2. Preparations
2.1 Two browsers
2.2 Logging in
2.3 Management home page
2.4 Logging out
3. Areas, sections, pages, text and image
3.1 Add an area
3.2 Add a page
3.2.1 Page and section
icons
3.3 Add a text
3.4 Add an image
3.4.1 Select the right
folder
3.4.2 Upload an
image
3.4.3 Insert the image into
the web page
3.5 Add a section
3.6 Create some order
4. Access permissions
4.1 Administrator permissions
4.2 Page manager permissions
7. Error messages
7.1 Locked page
The sections and pages can be grouped into Areas. An area
resembles a site on its own, for example, the site of the school, the
site of Grade 8 and the Intranets of Grade 8 and the Board. An area can
contain sections, subsections, sub subsections and even much deeper. For
example, the site of Grade 8 can contain a section for each pupil.
Herbert's section, for example, contains subsections like Papers and
Poems. In his Poems section he keep the poems; one per page. We will use
some of these examples in this Guided Tour.
If you do not have an installation of Website@School, you can use the
test site at http://wyxs.net/was_daily/admin.php.
login name: jtester
password: Jtester4U
You can check your work at: http://wyxs.net/was_daily/index.php.
This site is renewed every night at 04.00 GMT +1.
We also assume you have a valid username, password and access
permissions to enter the management part of Website@School. When you
installed Website@School you have full access permissions. Or the
username and password were given to you by the webmaster who also gave
you access permission according to the management role you
perform.
In this Guided Tour Miss Wilhelmina Bladergroen installed Website@School,
thus she has full access permissions.
Have a nice tour!
Some general features of Website@School are not that easily found.
![[ Strikethrough texts for managers, public area and logout ]](guidedtour/guidedtour_was_home-top.png)
Greyed out icons, public area and logout. The user first has to save or cancel an action before these items become accessible again. This is a security feature. In high-visibility mode the texts are struck through when the items are unaccessible.
Data folder (cannot be changed later on): filename not acceptable: 'grade 8'
Confirmation or error messages will be displayed in this yellow bar. If necessary these messages can be copied and pasted in e-mail or forum posts for support.
The management interface of Website@School can be adapted. These adaptions (called 'skins') can be set for each individual user in her user settings. This is done in the Account Manager > Users > User name > Basic properties > Drop down menu: Skins. For an overview of skins, see the chapter Account Manager, paragraph 5. Skins.
index.php: To indicate a filename.
icon.When at school, it might be an idea to have two workstations; one with Website@School management in the browser and the other one with the site. On the latter one, depending on your browser, you only have to press the [F5] key on the keyboard to refresh the content.
Open one browser (Mozilla Firefox, Opera, Safari, etcetera). Go to the
URL (Universal Resource Locator) of your school. For example:
http://exemplum.eu/index.php. This is a fictional URL, replace it with
the real URL of your school. Only replace the URL, of the
school, but keep the index.php.
You will see the site of the school with demonstration data:
![[ Exemplum Primary School website, demonstration data, welcome page ]](guidedtour/guidedtour_site_in_browser.png)
Now open a new browser window or use a second workstation, or one
workstation with two different browsers. Go to:
http://exemplum.eu/admin.php. This is a fictional URL, replace it with
the real URL of your school. Only replace the URL, of the
school, but keep the admin.php.
You will see the login dialogue that gives access to Website@School
Management:
![[ Exemplum Primary School: login page ]](guidedtour/guidedtour_login_in_browser.png)
You are ready to log in.
![[ Exemplum Primary School, login page: username: wblader, password: *********** ]](guidedtour/guidedtour_login_wblader.png)
Please press the [Enter] key on your keyboard, or click the [OK] button to log in to Website@School Home Welcome.
![[ Management home: Message= succes. Welcome ]](guidedtour/guidedtour_was_home_after_login.png)
NOTICE:
This page is full of difficult to find features. See paragraph 1.3 General
features for an overview.
Explanation:
This is the Home or Start Center section of Website@School management.
From here all functions are accessible.
? Help: A great feature of Website@School: content sensitive help, meaning when you are, for example, in the Areas in the Configuration Manager, clicking the question mark gives you that part of the Configuration Manager manual.
NOTICE:
To open the Help full screen with scrollbar, right click on the icon
and select Open Link in New Window (Firefox).
After clicking on the link in the upper right corner of the screen logout Wilhelmina Bladergroen, you are logged out:
![[ Exemplum Primary School, logout page: Message= success, pop up: success ]](guidedtour/guidedtour_login_logged_out.png)
You are successfully logged out. This the shortest tour :-).
To log in again, click [OK] in the pop up message to remove it, and log in again.
![[ Management home: Welcome ]](guidedtour/guidedtour_was_home.png)
Click the Configuration Manager
icon, to open the Configuration
Manager dialogue:
![[ Configuration Manager ]](guidedtour/guidedtour_configurationmanager_overview.png)
In the Menu, click Areas to open the Areas dialogue:
![[ Configuration Manager: Areas ]](guidedtour/guidedtour_configurationmanager_areas_overview.png)
In Areas, click Add an area to open the Add an area dialogue:
![[ Configuration Manager: Add an area, entry fields ]](guidedtour/guidedtour_configurationmanager_add_area.png)
NOTICE:
Once you have chosen for a public or private Area and saved your
choice, this choice is permanent. You cannot change a private Area
into a public one or vice versa. This is a security feature. Of
course you can delete Areas.
NOTICE:
If the name is not acceptable, this results in an error message.
Website@School tries to make a suitable directory name. If this
occurs, accept the suggested name and click [Save].
Click the [Save] button to return to Areas dialogue:
![[ Configuration Manager: Message= success. Areas: Area added ]](guidedtour/guidedtour_configurationmanager_area_added.png)
You are back on the Areas dialogue. The Pupils of Grade 8 Area is added. Notice the status message.
In the next paragraph we will create the welcome page for this Area.
![[ Management home: Welcome ]](guidedtour/guidedtour_was_home.png)
Click the Page Manager
icon, to open the Page Manager dialogue. It opens on the
demonstration data, the Exemplum Primary School:
![[ Page Manager: Exemplum Primary School ]](guidedtour/guidedtour_pagemanager_overview.png)
The Menu shows the list of areas. The Exemplum Primary School is selected, thus visible in the workspace.
In the Menu, click Pupils of Grade 8 to enter their area.
![[ Page Manager: Pupils of Grade 8: no nodes ]](guidedtour/guidedtour_pagemanager_area_no_nodes.png)
Notice that no nodes (pages and sections) have been added to this area. We will now add a node with a page. In Pupils of Grade 8, click Add a page, to open its dialogue:
![[ Page Manager: Add a page: entry fields ]](guidedtour/guidedtour_pagemanager_add_page.png)
Click [Save] and return to the Page Manager of the area. The newly created Welcome page is added. Also notice the status message.
![[ Page Manager: Message= success. Pupils of Grade 8: Welcome page added ]](guidedtour/guidedtour_pagemanager_page_added.png)
The Welcome page is added. Time to explain its icons, left from the Welcome page.
![[ Page Manager: page and section icons ]](guidedtour/guidedtour_pagemanager_page_properties.png)
Please set the Home icon now, to make the page visible:
![[ Page Manager: Pupils of Grade 8: home set ]](guidedtour/guidedtour_pagemanager_home_added.png)
NOTICE:
It is not necessary to set the home icon because something will always be
displayed, even an empty page. But it's good practice to set the home
icon.
Although the page is visible, it has no content. In the next paragraph we will add a text and an image to the page.
![[ Page Manager: FCK editor: opened. Other managers, logout and public area inaccessible ]](guidedtour/guidedtour_pagemanager_FCK_open.png)
This is a WYSIWYG (What You See Is What You Get) text editor, which is fully explained via links in chapter Editors. There you also find a list of keyboard shortcuts. However, there is one feature to point to because it's now very useful: Maximize the editor size to full screen.
Click on the Maximize the editor size
icon at the right side of the
bottom row of icons. The editor maximizes it's size. Now you have
plenty of space to create your text. Please enter some text, for
example:
|
![[ FCK editor: maximized. Text added ]](guidedtour/guidedtour_pagemanager_FCK_maximised.png)
Save the text in the editor with the Save
icon, or use [Ctrl+Shift+S]. Do this
often. It reduces the risk of losing text by a power outage or a lost
connection to the web server.
After saving, you return to the Page Manager Pupils of Grade
8 area dialogue:
![[ Page Manager: Message= success. Pupils of grade 8 ]](guidedtour/guidedtour_pagemanager_page_edited.png)
You have returned to the Page Manager in the Pupils of Grade
8 area. Please check your results by clicking on the Page
Preview
icon. A new window opens, showing how the
page would look on the site:
![[ Page Manager: preview of Area: Pupils of Grade 8 ]](guidedtour/guidedtour_pagemanager_grade_8_preview_text.png)
If you prefer a full screen image, right click on the preview icon and
(In Firefox), select Open Link in New Window.
Close the window and you are back at the Page Manager dialogue of the
Pupils Grade 8 area. In the next paragraph, we will add
a picture of the pupils to the Welcome page.
![[ Page Manager: Pupils of Grade 8 ]](guidedtour/guidedtour_pagemanager_home_added.png)
In the Pupils of Grade 8 workspace, click the Welcome page link. The FCK page editor opens. Set it to Maximized:
![[ FCK editor: maximized, text ]](guidedtour/guidedtour_pagemanager_FCK_add_image.png)
Proceed as follows:
icon.The Image Properties dialogue opens:
![[ FCK editor maximized with Image Properties window ]](guidedtour/guidedtour_pagemanager_FCK_image_properties.png)
In the Image Properties dialogue, click [Browse Server], to open the My Files dialogue:
![[ My Files ]](guidedtour/guidedtour_FCK_image_properties_My_Files.png)
There are no files at all. Not in your personal file storage (called 'My Files') and also not in the storage space associated with the area 'Pupils of Grade 8'.
Therefore we must first upload an image to the server before we can use it in our page.
Alternatively you could use the breadcrumb trail at the top to quickly move to the top level folder 'All Files' by clicking the link 'all files'.
![[ Pupils of Grade 8 ]](guidedtour/guidedtour_FCK_files_grade_8.png)
Please click Add (upload) files, to enter the Add (upload) files dialogue:
![[ Add (upload) files, entry field, browse buttons ]](guidedtour/guidedtour_FCK_add_upload_files.png)
You can upload files from the computer you are now working on to the school server. In this picture only 4 files can be uploaded in one time. The number of uploadable files can be set. See the Configuration Manager.
Click the [Browse] button for Filename (1), to open a dialogue on your computer, to navigate to the path and filename of the file you want to upload:
![[ Add (upload) files. File upload window, file selected ]](guidedtour/guidedtour_FCK_add_upload_files_browse.png)
Select the file and click [Open]:
![[ Add (upload) files: Filenme (1): file path entered ]](guidedtour/guidedtour_FCK_add_upload_files_ready.png)
The path and the filename on your computer are visible in the Filename (1) field. Click [Save] to upload the file to the school server, whereafter you return to the Pupils of Grade 8 area file space:
![[ Pupils of Grade 8: Message= success ]](guidedtour/guidedtour_FCK_files_file_uploaded.png)
The image is uploaded to the server. Notice the yellow status bar messages. The file is scanned for viruses and a thumbnail is automatically created.
Click on the thumbnail of the image. You now return to the Image Properties dialogue. Here you can add or edit additional properties of the image if you wish. For now, simply press [OK] to insert the image into the page.
![[ FCK editor maximized: Image Properties window with image ]](guidedtour/guidedtour_FCK_image_properties_with_image.png)
In the Image Properties dialogue, click [OK] to put the picture in the text:
![[ FCK edtor maximized: text and image, image too big ]](guidedtour/guidedtour_FCK_image_added.png)
We think the picture of grade 8 is too big for the text. Adjust the size of the image by clicking on a corner and resize it, with the left mouse button pressed, to get the desired size:
![[ FCK editor maximized: image resized ]](guidedtour/guidedtour_FCK_image_resized.png)
Great! Click [Save] to save your work and return to the Page Manager.
![[ Page Manager: Message= success. Puils of Grade 8 ]](guidedtour/guidedtour_pagemanager_page_edited.png)
You are back on the Page Manager in the Pupils of Grade 8 area. If you wish, you can check your work by pressing the Page preview icon, but that's a trick you know. It's more fun to go to the school website:
![[ Exemplum Primary School home site ]](guidedtour/guidedtour_frugal_site.png)
Use the dropdown menu Select an area and select the Pupils of Grade 8 area. Next, be prepared for a little shock and click the [Go] button:
![[ Area: Pupils of Grade 8. Welcome page, logo picture changed ]](guidedtour/guidedtour_pagemanager_grade_8_preview_textimg.png)
Photo courtesy Lamco School Buchanan
Surprise! Not only are you on the site of the Pupils of Grade 8, but, just for the tour, we replaced the logo with the Pupils of Grade 8. This is a simple operation. Please see the chapter Configuration Manager, paragraph 3.4 Configure theme 'Theme Name' for area n and the Frugal theme configuration options on how to simply put a new image here, or to have no image at all, or one of the many possibilities of the available other themes in Website@School.
We assume you are back on Website@School Home Welcome:
![[ Management home: Welcome ]](guidedtour/guidedtour_was_home.png)
Click the Page Manager
icon. If necessary, in the Menu click Pupils of Grade 8 to open the Pupils of Grade
8 area.
![[ Page Manager: Pupils of Grade 8 ]](guidedtour/guidedtour_pagemanager_area_grade_8_open.png)
In the Pupils of Grade 8 workspace, click Add a section, to go to the Add a section dialogue:
![[ Page Manager: Add a section, entry fields ]](guidedtour/guidedtour_pagemanager_add_section.png)
Click [Save], whereafter you are back in the Page Manager for Pupils of Grade 8. Herbert's section is added
![[ Page Manager: Message= success, Pupils of Grade 8, section added ]](guidedtour/guidedtour_pagemanager_section_added.png)
Exercise
Now is a good time to practice with creating new sections and pages.
Please do the following.
- Add a new section called 'Catherine Hayes'
- Go to the section 'Herbert Spencer' and add a subsection called
'Poems'
- In the subsection 'Poems' create a page called
'Cat'
Please make sure that the sections and pages you add are visible.
You can now display an overview of the complete area by setting the tree view to 'maximal'. The result could look like this:
![[ Page Manager: Pupils of Grade 8: page and sections added ]](guidedtour/guidedtour_pagemanager_create_order_overview.png)
Or it could look different. It does not matter for the exercise, it only brings you to the next paragraph.
![[ Page Manager: Pupils of Grade 8: page and sections added ]](guidedtour/guidedtour_pagemanager_create_order_overview.png)
As you can see, the new items were added at the top of the area.
That's because we did not create the new sections and the page
in Herbert's section. So we created a mess.
Now we can create some order. We want the Welcome page at the top of the
tree and the sections for the pupils in alphabetical order. Please go
ahead until the result suits your needs.
Click on the pencil icon of Catherine's section. The Edit Basic properties of section n dialogue opens:
![[ Page Manager: Edit basic properties of section n, dropdown menu: Order, opened on After page 34 (Welcome), ]](guidedtour/guidedtour_pagemanager_create_order_basic_prop.png)
Use the Order dropdown menu to move
Catherine's section and Herbert's section.
Use the Parent section dropdown menu to
move the Poems section in Herbert's section. Finally, also
with the Parent section dropdown menu,
move the Cat poem in Poems.
Your final result could look like:
![[ Page Manager: Pupils of Grade 8. Ordering ready ]](guidedtour/guidedtour_pagemanager_create_order_ready.png)
And try to expand to maximal:
![[ Page Manager: Pupils of Grade 8. Tree view expanded ]](guidedtour/guidedtour_pagemanager_area_expanded_tree.png)
We used the: Set tree view minimal and clicked on it. The tree view has a few options, they are explained in the Page Manager chapter.
In the next paragraph, we will give Herbert access permissions to his section and pages.
In this Guided Tour we will give Herbert access permissions on his sections and pages. This is done with his Admin permissions and Page Manager permissions
Click on the Account Manager
icon, to open the Account
Manager:
![[ Account Manager: Account Manager. Summary of users and groups ]](guidedtour/guidedtour_accountmanager_overview.png)
In the Menu, click Users to open the list of users:
![[ Account Manager: Users ]](guidedtour/guidedtour_accountmanager_users.png)
To set Herbert Spencer's account permissions, click on the pencil icon next to his name, to open the Edit user username (Full Name) dialogue:
![[ Account Manager: Edit user herbert (Herbert Spencer) ]](guidedtour/guidedtour_accountmanager_user_basic.png)
![[ Account Manager: Administrator permissions: herbert (Herbert Spencer). Checked: Basic administrator, Page Manager and File Manager ]](guidedtour/guidedtour_accountmanager_user_admin.png)
Here the permission for the various managers can be set. Standard
there are no permissions for the user; a security feature.
We only want Herbert to edit pages and upload images in his own section.
Do not make errors here and only check the boxes at:
NOTICE:
'Basic administrator' permissions are always necessary when a
user may have one or more permissions but not 'All
permissions'.
Check for errors and next, click [Save]. You are back on the
Edit user username (Full Name) dialogue.
In the Menu, the Page Manager
is added and accessible.
![[ Account Manager: Message= success. Edit user herbert (Herbert Spencer). In Menu Page Manager link added ]](guidedtour/guidedtour_accountmanager_user_page_perms_added.png)
Click Page Manager to open the Page Manager permissions: username (Full Name) dialogue:
![[ Account Manager: Page Manager permissions: herbert (Herbert Spencer) ]](guidedtour/guidedtour_accountmanager_page_man_perms.png)
There are no permissions for the user. That's standard; a security feature. We only want to give Herbert partial permissions in the Pupils of Grade 8 area. To unfold the Grade 8 area, click on its folder icon:
![[ Account Manager: Page Manager permissions: herbert: (Herbert Spencer). Dropdown menu: section Herbert Spencer: Sectionmaster ]](guidedtour/guidedtour_accountmanager_user_page_manager_permissions.png)
Look for Herbert's section and click the dropdown menu. Several Roles become visible. A 'Role' represents a set of permissions.
Roles and permissions:
We know Herbert Spencer as a responsible young man and railway enthusiast. We can give him permissions to create, delete and modify pages in his own section, as well add subsections like Poems and Papers. We think it's safe to make him Sectionmaster over his own section, so we set the dropdown menu on Sectionmaster.
NOTICE:
Take care NOT to make Herbert Guru on all current and future areas!
Next, click [Save] to save Herbert's permissions and return to his basic properties. He can go ahead.
If Herbert would log in with his username and password, and go to the Page Manager, he would see:
![[ Page Manager: Pupils of Grade 8, Herbert's section accessible ]](guidedtour/guidedtour_pagemanager_herberts_view.png)
Note that Herbert has no access (greyed out) to some managers, to other areas and to Catherine's section and cannot see the Intranet(s).
The access permissions are further discussed in the Configuration Manager chapter.
Click the Account Manager
icon, to open the Account
Manager:
![[ Account Manager: Account Manager, summary of users and groups ]](guidedtour/guidedtour_accountmanager_overview.png)
In the Menu, click Users, to open the list of all users:
![[ Account Manager: Users ]](guidedtour/guidedtour_accountmanager_users_all.png)
At the Users, click Add a user to open the Add a new user dialogue:
![[ Account Manager: Add a new user, entry fields ]](guidedtour/guidedtour_accountmanager_add_user.png)
harriet.
NOTICE:
A username consists of maximum 16 characters: lowercase (a-z), digits
(0-9), underscore (_) and starts with a letter.
helen or maria2. These simple
passwords are easy to guess and using them endangers your complete
system and the data. Passwords must have certain properties to make
them difficult to guess. A Website@School password must:
A good password, for example, is Mrbh3ws!. This
password is easy to remember when you know it stands for the
sentence: "My red bike has 3 wheels!". However, and that
makes it a good password, it's very difficult to guess when you
do not know the sentence. This 'sentence trick' is an easy
way for pupils to create difficult passwords and remember them with
ease.
NOTICE: When your password does not meet the requirements, you get
a yellow warning message.
Harriet Tubman.h.tubman@exemplum.eu.After clicking [Save], the user is added:
![[ Account Manager: Message= success. Users, user added ]](guidedtour/guidedtour_accountmanager_user_added.png)
Maybe it's a nice exercise to create a section and pages and give Harriet her access permissions.
Assume that user Helen Parkhurst (the teacher of the Juniors) has no
permissions whatsoever. By associating her account 'hparkh' with
group 'Team' and capacity 'Member' she inherits all
permissions associated with the combination Team/Member. This could mean,
as example, that she may only read the Intranet (private Area)
of the Team, while another member with the combination Team/Principal
(i.e. Amelia Cackle) has privileges to write, add and delete pages and
sections for the Team Intranet.
If Helen is subsequently associated with the group 'Juniors' in
her capacity as a 'Teacher' she enjoys all privileges associated
with the 'Teacher'-capacity of the 'Juniors'-group. Her
pupils may also be associated with the group 'Juniors' but in the
'Pupil'-capacity rather than the 'Teacher' capacity.
Privileges associated with this 'Pupil'-capacity could be limited
to viewing pages in a protected area, whereas the 'Teacher'-
capacity would allow for adding and editing pages to such a protected
area.
To expand the example: When Helen becomes teacher for the seniors, it is
very easy to end her membership of the 'Juniors' area and make
her a member of the area of the 'Seniors'.
This subject is a bit lengthy for the Guided Tour and is discussed extensively in the Account Manager chapter, paragraph 5. Groups.
![[ Page manager: message= page locked, pop up: page locked. Pupils of Grade 8 ]](guidedtour/guidedtour_locked_page.png)
Hm, Wilhelmina tries to have a sneak preview in the poem Herbert is writing. That is, the page is in use and cannot be accessed by another person.
Here ends your guided tour. We hope we have convinced you about the
ease of use of the Website@School Content Management System.
In the other chapters we will explain, step-by-step, richly illustrated
and in depth, the many possibilities of the Website@School CMS. Please
use the Table of
Contents to select a chapter.