Contents
1. Introduction
1.1 Before you start
1.2 Learning goals
1.3 Conventions
2. Preparations
2.1 Two browsers
2.2 Logging in
2.3 Management home page
2.4 Logging out
3. The whole caboodle
3.1 Add an area
3.2 Add a page
3.3 Add a text
3.4 Add an image
3.5 Add a section
3.6 Order in court!
4. Access permissions
4.1 Admin permissions
4.2 Page manager permissions
5. Add a user
6. Groups
7. Error messages
7.1 Locked page
8. To conclude
In a nutshell, WebWebsite@School is a Content Management System (CMS), specially designed for schools. Its most important function is to create websites, sections (folders) and webpages with content. Each page has a module attached to it. Modules are ready made building blocks. For example a text editor or a guestbook. A text editor is used to create texts and add images to it, the guestbook is used by guests to say something about the site.
The sections and pages can be grouped into Areas. An area resenbles 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, sub sections, sub sub sections and even much deeper. For example, the site of Grade 8 can contain a section for each pupil. Herberts section, for example, contains subsections like Papers and Poems. In his Poems section he keep the poems in which he expresses his feelings for a certain girl. We will use some of these examples in this Guided Tour.
To successfully follow this Guided Tour, we assume you have access to WebWebsite@School with demonstration data.
We also assume you have installed the WebWebsite@School manual. When you do not have an installation of WebWebsite@School, you can use the sandbox at http://sandbox.websiteatschool.org. This site is renewed every night at 04.00 GMT +1.
We also assume you have a valid username and password to get access to the management part of Webste@School. This username and password are given by yourself during the installation of Website@School, so you have full access permissions. Or the username and password were given to you by the webmaster who has given you access permission according to the role you may perform. In this tour Miss Wilhelmina Bladergroen installed Website@School, thus she has full access permissions.
This Guided Tour will show you the basic operations in WebWebsite@School. When you have finished the tour you will be able to:
- Create an area with sections and pages.
- Create a text with a text editor.
- Upload an image and put it in the text.
- Create a user account and give the user access permissions.
From now on we abbreviate Website@School to W@S.
Good luck with the tour!
Some general features of W@S are not that easily found. Some corrrespond with the markup of this manual text, so we explain them both here.
- Mouseovers: Almost every image, icon, button, link or data field has a mouseover text. Please hover over these items to see a short description, and expanastion or shortcut key combination for an item. This user friendly feature is aimed at the novice user of a CMS.
- Shortcut keys: You do not need a mouse to work with W@S. Items are accessible with shorcut keys that are mentioned in the mouseover. Your browsers manual will tell you which keys to press in conjunction with the shortcut keys.
- Yellow status bar: The yellow bar will give status messages, for example:
Data folder (cannot be changed lateron): filename not acceptable: 'grade 8'
Confirmation or error messages will be displayed in this yellow bar. If necessary these messages can be copied and past in e-mail or forum posts for support.
- Pop up windows: Sometimes pop up windows are displayed together with the yellow status bar. They draw your attention and you have to turn them off to proceed. Read them, then click the [OK] button. The pop up messages are also displayed in the yellow status bar to cut and paste them.
- Text markup: Below are the text elements that have s special markup:
- [Enter] or, for example [Alt-N]: To indicate that you can use the keyboard.
index.php
: To indicate a file name.
- Name: The bold underlined character of field titles identfy the keyboard shortcut that can be used to access or modify the item. Your browsers manual will tell you which keys to press in conjunction with the bold underlined character.
- [D] or, for example [P]: In high visibility mode (for blind an dvisually impaired persons) the first one indicates the Trashcan (Delete). The second one indicates the Page preview
icon.
- Private area [ ] Mark ... etcetera: The [ ] in a text indicates a checkbox.
- Add a page or, for example Area: A blue text refers to the same text in a screenshot.
- Add an area, or for example Page Manager: Bold text refers to an item that is visible in a screen shot
(top)
Website@School (W@S from now on) is a content management system. The content you make in the management part of W@S is visible on your school's website. Most times, when you work in W@S, you do something in W@S management, and after that, you examine what you have done on one of the Areas. This operation is best done with two browsers.
To work with W@S as easily as possible, we advise you to open two browsers on the workstation:
- one browser for Website@School management, and
- one browser to see the results of your work on the site.
When at school, it might be an idea to have two workstations; one with W@S 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 examp: http://www.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:
guidedtour_frugal_site.png
Now open a new browser window or use a second workstaton, or one workstations with two different browsers. Go to:
http://www.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 log-in dialogue that gives access to W@S Management:
guidedtour_login_empty.png
You are ready to log in.
In this paragraph we discuss the log in and log out procedures. We assume you are on the log in dialogue:
guidedtour_login_wblader.png
Explanation:
- Username: Enter the log-in name you used during the installation of W@S, or that is given to you by the webmaster. Press the [Tab] key on your keyboard to go to the next field. Using a mouse is also possible, but takes more time.
- Password: Enter the password you used during the installation of W@S, or that is given to you by the webmaster. The password is not shown but asterisks. This is a security feature.
- [OK]: Press the [Enter] key on your keyboard or, with your mouse, click on the [OK] button to log in to W@S management.
- home: This is a clickable link to the site.
- Forgotten your password?: A detailed description on renewing your password can be found in the Logging in and out chapter.
Please press the [Enter] key on your keyboard, or click the [OK] button to log in to W@S Home Welcome.
When you have successfully logged in (see status message), you are on the W@S Welcome page:
guidedtour_was_home_after_login.png
NOTICE:
This page is full of difficult to find features. See paragraph 1.4 Conventions for an overview.
Explanation:
This is the Home or Start Center section of W@S management. From here all functions are accessible.
NOTICE:
It is very important to log out. Do not kill your session by clicking the X in your browser or exiting your browser via its Menu and Exit option. The next time you log in you might be confronted with an error message. For an explanation see paragraph 6. Error messages below.
After clicking on the link in the upper right corner of the screen logout Wilhelmina Bladergroen, you are logged out:
guidedtour_login_logged_out.png
You are successfully logged out. This the shortest tour :-).
To log in again, click [OK] in the popup message to remove it, and log in again.
(top)
In this part of the Guided Tour you will create a new area and a welcome page for Grade 8, add a section for pupils Herbert Reese and Catherine Hayes, and finally create some order in the caboodle you created.
An area resenbles a site on its own. We start with creating a new area and assume you are on W@S Home Welcome:
guidedtour_was_home.png
Click the Configuration Manager
icon, to open the Configuration Manager dialogue:
guidedtour_configurationmanager_overview.png
In the Menu, click Areas to open the Areas dialogue:
guidedtour_configurationmanager_areas_overview.png
In Areas, click Add an area to open the Add an area dilogue:
guidedtour_configurationmanager_add_area.png
Explanation:
- Name: Enter the name of the area. This will appear as the name of the site. Example: Pupils of Grade 8.
- Private Area: It is not a private area as they are only accessible with a log-in name and a password. The pages for Grade 8 must be publicly accessible. So, do not check this item.
NOTICE:
Once chosen and saved, private and public areas cannot be undone.
- Data folder: Enter the name of the data folder for this area. It's a good idea to keep it short and descriptive. Do not use spaces. For example: grade8.
NOTICE:
If the name is not acceptable, this results in an error messge. W@S tries to make a suitable directory name. If this occurs, accept the suggested name and click [Save].
- Theme: Select a theme for the area or leave it as it is. It can be changed later on.
- Save: To save your results. After saving your results, the newly created area will appear in the list of areas.
- Cancel: To cancel your action and return to the Areas dialogue.
Click the [Save] button to return to Areas dialogue:
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.
In this paragraph we create a welcome page for the new area. We assume you have returned to W@S' Home Welcome:
guidedtour_was_home.png
Click the Page Manager
icon, to open the Page Manager dialogue. It opens on the demonstration data, the Exmemplum Primary School:
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.
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:
guidedtour_pagemanager_add_page.png
Explanation:
- Name: Enter the name of this page. For example: Welcome
- Description of the page/section: Give a short description of the page. It will be visible as mouseover in the Page Manager and on the site. For example: Welcome page for pupils of Grade 8.
- Parent section: For the moment, do not use this option.
- Module: In the dropdown menu, select Plain HTML- page (htmlmpage).
- Initial visibility: Select visible, because for this tour we do not want an invisible page or a page under embargo. For details see the Page Manager chapter.
- Save: To save your results.
- Cancel: To cancel your action and return to the area.
Click [Save] and return to the Page Manager of the area. The newly created Welcome page is added. Also notice the status message.
guidedtour_pagemanager_page_added.png
The fWelcome page is added. Time to explain the icons, left from the Welcome page:
- Home/greyed out Home: A visible Home icon indicates the default (opening) page of an area, section or page, i.e what the visitors will see first.
A greeyed out Home icons indicate that these areas, sections or pages are not the opening ones.
- Trashcan icon: To delete areas, pages and sections.
- Pencil icon: To edit the basic properties of an area, page or section.
- Visible/Invisible: The icons have two functions:
- 1. The icons indicate whether a page or section is visible, invisible or hidden.
- 2. Clicking on the icons opens the advanced edit options.
- Page preview/Folder icon: The icons have two functions:
- 1. Clicking the Page preview icon shows the content of the page in a new window.
- 2. Clicking on the folder icon opens its tree and shows its underlaying pagens and/or folders.
- Page/Section name: The page name gives access to the page. The section name gives, like the pencil icon, access to the basic properties of the section.
NOTICE:
The icons of: pencil, visible/invisible and page/section, respectively lead to: basic options, advanced options and content. They can serve as shortcuts.
Plese set the Home icon now, to make the page visible:
guidedtour_pagemanager_home_added.png
Although the page is visible, it has no content. In the next paragraph we will add a text and an image to the page.
Now we add some content to the page. In Pupils of Grade 8, click Welcome, to open the a page editor:
guidedtour_pagemanager_FCK_open.png
This is a WYSIWYG (What You See Is What You Get) text editor, wich is fully explained via chapter Editors. Howerver, there is one feature to point to because it's now very useful: Maximize the editor size to full screen.
Click on the Monitor
icon at the right side of the bottom row of icons . Now you have plenty of real estate to create your text. Please enter some text, for example:
Hello World!
This is the welcome page of grade 8
We hope you enjoy our pages
|
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 school server.
After saving, you return to the Page Manager Pupils of Grade 8 area dialogue:
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:
guidedtour_pagemanager_grade_8_preview_text.png
If necessary, enlarge the 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.
We assume you are in the Page Manager and have selected the Pupils of Grade 8 area.
guidedtour_pagemanager_page_edited.png
In the Pupils of Grade 8 workspace, click the Welcome page link. The FCK page editor opens. Set it to Maximized:
guidedtour_pagemanager_FCK_add_image.png
Proceed as foloows:
- Set the cursor between the last two lines.
- Click the
icon.
The Image Properties dialogue opens:
guidedtour_pagemanager_FCK_image_properties.png
In the Image Properties dialogue, click [Browse Server], to open the My Files dialogue:
guidedtour_FCK_image_properties_My_Files.png
There are no files in the My Files directory of Wilhelmina Bladergroen.
NOTICE:
Please save files in the right directory! It's not a good idea to save a file for the Pupils of Grade 8 area in your personal My Files directory. It's better to choose the Pupils of Grade 8 area.
Proceed as follows:
In Wilhelmina's My Files, click Up one level to go to the Page Manager, there click Areas and finally in Areas, click Pupils of Grade 8.
Maybe easier is to use the breadcrumb trail:
You are here: all files > my files,
to navigate to every place you have access to.
Anuway, after some clicking, you should end on the Pupils of Grade 8 directory:
guidedtour_FCK_files_grade_8.png
Please click Add (upload) files, to enter hte Add (upload) files dialogue:
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 dialoge on your computer, whereafter the path and filename are entered in the
guidedtour_FCK_add_upload_files_browse.png
On your computer, navigate to the file you want to upload, select it and click [Open]:
guidedtour_FCK_upload_files_ready.png
The path and the filename on your computer are visible in the Filename (1) field. Click [Save] to uplod the file to the school server, whereafter you return to the Pupils of Grade 8 area file space:
guidedtour_FCK_files_file_uploaded.png
The image is uploaded to the server. Notice the yellow status bar messags. The file is scanned for viruses and a thumbnail is automatically created.
Click on the thumbnail picutre, wereafter you are back on the Image Properties dialogue with a visible picture.:
guidedtour_FCK_image_properties_with_image.png
In the Image Properties dialogue, click [OK] to put the picture in the text:
guidedtour_FCK_image_addede.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:
guidedtour_FCK_image_resized.png
Great! Click [Save] to save your work and return to the Page Manager.
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:
guidedtour_frugal_site.png
Use the dropdown menu Select an area and select the Pupils of Grade 8 area. Next, click the [Go] button:
guidedtour_pagemanager_grade_8_preview_text+img.png
You are on the site of the Pupils of Grade 8.
Yes, we added another image in the logo. See the Configuration Manager chapter, paragraph 4.4 Configure theme 'Theme Name' for are nn how to simply put another image there, or have no image, or one of the many other possibilities of a theme.
In this paragraph we will add a section for Andrew Reese, a senior pupil in grade 8. He has a colleague, Catherine Hayes, about whom we will hear more later on.
We assume you are back on W@S Home Welcome:
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.
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:
guidedtour_pagemanager_add_section.png
Explanation:
- Name: Enter the name of this section. Fro example: Andrew Reese.
- Description of the page/section: Give a short description. This descripion is used as mousover text in the Page Manager and the site. For example: Andrew's section.
- Parent section: For the moment, do not use this option.
- Initial visibility: Select visible, because for this tour we do not want an invisible page or a page under embargo. For details see the Page Manager chapter.
- Save: To save your results and return to the Page manager for grade 8.
- Cancel: To cancel your action and return to the previous page.
Click [Save], whereafter you are back in the Page Manager for Pupils of Grade 8. Herbert's section is added
guidedtour_pagemanager_section_added.png
Now about Catherine Hayes. To execute the next paragraph: Order in court!, please create a section for Catherine Hayes and create a sub section for Herbert Reese called 'Poems'. In that section, create a page called 'Cat'. Feel free to write a poem.
We assume you are in the Page Manager, in the area Pupils of Grade 8. When you performed the tasks as described above, you see pages and sections like:
guidedtour_pagemanager_create_order_overview.png
As you can see, new items are always added at the top of the area. 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 Catherines section. The Edit Basic properties of sectonn nn dialogue opens:
guidedtour_pagemanager_area_create_order_basic_prop.png
Use the Order dropdown menu to move Catherine's section and Herbet't section.
Use the Paremt section dropdown menu to move the Poems section in Herbert's section. Finally, also with the Paremt section dropdown menu, move the Cat poem in Poems.
Your final reslut could look like:
guidedtour_pagemanager_area_create_order_ready.png
And try to expand to maximal:
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 explainded in the Page Manager chapter.
In the next paragraph, we will give Herbert access permissions to his section and pages.
(top)
4. Access permissions
In this paragraph only the basics of access management are discussed. Website@School has sopisticated access management in which it is possible to give access privileges from area down to page level. This is disucssed in the Account Manager chapter.
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:
guidedtour_accountmanager_overview.png
In the Menu, click Users to open the list of users:
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:
guidedtour_accountmanager_user_basic.png
You are on Herbers Basic access privileges. In the Menu, click on Admin, to enter the Administrator permissions: username (Full Name) dialogue:
guidedtour_accountmanager_user_admin.png
Here the permission for the various managers can be set. 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:
- Basic administrator
- Page Manager
- File Manager
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.
We can now give Herbert permissions to his sections and pages.
guidedtour_accountmanager_user_admin_perms_added.png
Click Page Manager to open the Page Manager permissions: username (Full Name) dialogue:
guidedtour_accountmanager_page_man_perms.png
There are no permissions for Herbert. That's standard. We only want to give him partial permissions in the Pupils of Grade 8 area. To unfold the Grade 8 area, click on its folder icon:
guidedtour_accountmanager_user_page_manager_permissions.png
Look for Herberts section and click the dropdown menu to give him a Role:
Roles:
- --: Null, nothing: this role corresponds to no permissions at all.
- Contentmaster: Only page content can be modified.
- Pagemaster: Page properties and page content can be modified.
- Sectionmaster: Section properties can be modified and sub sections and pages can be added.
- Areamaster: Area properties can be modified and top-level sections and pages can be added.
- Sitemaster: Site properties can be modified and areas, sections and pages can be added.
- Guru: Everything: this role provides all possible permissions.
We know Herbert Spencer as a responisble young man and railway enthousiast. 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 login with his user name and password, and go to the Page Manager, he would see:
guidedtour_pagemanager_herberts_view.png
Note that Herbert has no access (greyed out) to some managers, to some areas and to Catherine's section.
The access permissions are discussed in the Configuration Manager chapter.
(top)
In this paragraph we will create the user Harriet Tubman. We assume you are inn W@S Home.
Click the Account Manager
icon, to open the Account Manager:
guidedtour_accountmanager_overview.png
In the Menu, click Users, to open the list of all users:
guidedtour_accountmanager_users_all.png
At the Users, click Add a user' to open the Add a new user dialogue:
guidedtour_accountmanager_add_user.png
- Name: Enter the log-in name the new user. For example: harriet.
NOTICE:
A username consists of maximum 16 characters: lowercase (a-z), digits (0-9), uderscore (_)and starts with a letter.
- Password: Please do not skip this paragraph. W@S does not accept simple passwords like
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:
- have at least a minimum length of 6 (six) characters,
- have at least 1 (one) uppercase character (A-Z).
- have at least 1 (one) lowercase character (a-z).
- have at least 1 (one) digit (0-9)
- preferably have special character like: at-sign '@', hash '#', dollar '$', percentage sign '%', caret '^', ampersand '&', asterisk '*', left parenthesis '(', right parenthesis ')', dash '-', underscore '_', plus '+', equals '=', left curly brace '{', right curly brace '}', opening bracket '[', closing bracket ']', semicolon ';', slash '/', dot '.' and question mark '?'.
A good password, as 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 warning popup message. After reading, click [OK] and try again.
- Confirm password: Retype the password.
- Full nmae: The full name of the owner of this account, for example Harriet Tubman.
- E-mail: Enter the e-mail address of this user. This e-mail address is used when the user has forgotten her password, for example h.tubman@exemplum.eu
- Active user [ ] Mark this user as active:
Check this box if it's not checked, so this user can use her account.
- Save: To save your results and return to the list of users. The user is added.
- Cancel: To cancel your action and return to the list of users.
After clicking [Save], the user is added:
guidedtour_accountmanager_user_added.png
Maybe it's a nice exercise to create a section and pages and give Harriet everything she needs.
We can create groups of users for a site and give them different access permissions. This subject is discussed extensively in the Account Manager chapeter, paragraph 5. Groups.
(top)
We hope you experience no errors. But since most users end their session by killing the browser and other users cooperate on pages, two errors can be common.
After logging in again, and going to the page you want to ecit, you get an error message like:
guidedtour_locked_page.png
Hm, Wilhelmina tries to have a sneak preview in the poem Herbert is writing. That is, hte page is in use and cannot be accessed by another person.
(top)
That's it. You have made an area, sections, a page, added a text and an image to it, gave a user access permissions and created a useer.
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.
(top)
Author: Dirk Schouten < schoutdi (at) knoware (dot) nl >
Last updated: 2011-01-29