Guided Tour

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

1. Introduction

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.

1.1 Before you start

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.

1.2 Learning goals

This Guided Tour will show you the basic operations in WebWebsite@School. When you have finished the tour you will be able to:

From now on we abbreviate Website@School to W@S.
Good luck with the tour!

1.3 Conventions

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.

(top)

2. Preparations

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.

2.1 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:

[ Exemplum website ]
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:

[ Login: empty fields ]
guidedtour_login_empty.png

You are ready to log in.

2.2 Logging in

In this paragraph we discuss the log in and log out procedures. We assume you are on the log in dialogue:

[ Login: Wilhelmina Bladergroen ]
guidedtour_login_wblader.png
Explanation:

Please press the [Enter] key on your keyboard, or click the [OK] button to log in to W@S Home Welcome.

2.3 Management home page

When you have successfully logged in (see status message), you are on the W@S Welcome page:

[ W@S Home 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.

2.4 Logging out

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:

[ User 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)

3. The whole caboodle

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.

3.1 Add an area

An area resenbles a site on its own. We start with creating a new area and assume you are on W@S Home Welcome:

[ W@S home Welcome ] guidedtour_was_home.png

Click the Configuration Manager icon, to open the Configuration Manager dialogue:

[ Configuration Manager: opeing screen ]
guidedtour_configurationmanager_overview.png

In the Menu, click Areas to open the Areas dialogue:

[ Configuration Manager: areas overview ]
guidedtour_configurationmanager_areas_overview.png

In Areas, click Add an area to open the Add an area dilogue:

[ Configuration: Manager add area ]
guidedtour_configurationmanager_add_area.png
Explanation:

Click the [Save] button to return to Areas dialogue:

[ Configuration Manager: area added ]
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.

3.2 Add a page

In this paragraph we create a welcome page for the new area. We assume you have returned to W@S' Home Welcome:

[ 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:

[ Page Manage4: overview ]
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: Area: no nodes ]
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 page ]
guidedtour_pagemanager_add_page.png
Explanation:

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: page added ]
guidedtour_pagemanager_page_added.png

The fWelcome page is added. Time to explain the icons, left from the Welcome page:

[ Page properties]
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:

[ Page Manager: home for page set ]
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.

3.3 Add a text

Now we add some content to the page. In Pupils of Grade 8, click Welcome, to open the a page editor:

[ FCK editor: open ]
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

[ FCK editor: maximised ]
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:

[ Page Manager: page edited ]
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 grade 8 preview text ]
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.

3.4 Add an image

We assume you are in the Page Manager and have selected the Pupils of Grade 8 area.

[ Page Manager: page edited ]
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:

[ FCK editor: add image ]
guidedtour_pagemanager_FCK_add_image.png

Proceed as foloows:

The Image Properties dialogue opens:

[ FCK editor: image properties ]
guidedtour_pagemanager_FCK_image_properties.png

In the Image Properties dialogue, click [Browse Server], to open the My Files dialogue:

[ FCK editor: image properties: My Files ]
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:

[ FCK editor: files grade 8 ]
guidedtour_FCK_files_grade_8.png

Please click Add (upload) files, to enter hte Add (upload) files dialogue:

[ FCK editor: add upload files ]
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

[ FCK editor: add upload files: browse ]
guidedtour_FCK_add_upload_files_browse.png

On your computer, navigate to the file you want to upload, select it and click [Open]:

[ FCK editor: files ready for upload ]
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:

[ FCK editor: files uploaded ]
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.:

[ FCK editor: Image Properties with image ]
guidedtour_FCK_image_properties_with_image.png

In the Image Properties dialogue, click [OK] to put the picture in the text:

[ FCK edtor: image and 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:

[ FCK editor: image resized ]
guidedtour_FCK_image_resized.png

Great! Click [Save] to save your work and return to the Page Manager.

[ Page Manager: page edited ]
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:

[ School site ]
guidedtour_frugal_site.png

Use the dropdown menu Select an area and select the Pupils of Grade 8 area. Next, click the [Go] button:

[ Preview of grade 8 welcome page ]
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.

3.5 Add a section

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:

[ 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.

[ Page Manager: Puils of Grade 8 ]
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 Maanager: add section ]
guidedtour_pagemanager_add_section.png
Explanation:

Click [Save], whereafter you are back in the Page Manager for Pupils of Grade 8. Herbert's section is added

[ Page Manager: section 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.

3.6 Order in court!

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:

[ Page Manger: grade 8: create order ]
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:

[ Page Manager: edit basic properties ]
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:

[ Page Manager: ordering ready ]
guidedtour_pagemanager_area_create_order_ready.png

And try to expand to maximal:

[ Page Manager: expanded tree ]
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:

[ Account Manager: overview ]
guidedtour_accountmanager_overview.png

In the Menu, click Users to open the list of users:

[ Account Manager: 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:

[ Account Manager: basic properties ]
guidedtour_accountmanager_user_basic.png

4.1 Admin permissions

You are on Herbers Basic access privileges. In the Menu, click on Admin, to enter the Administrator permissions: username (Full Name) dialogue:

[ Account Manager: admin properties ]
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:

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.

4.2 Page manager permissions

We can now give Herbert permissions to his sections and pages.

[ Account Manager: admin: permissions added ]
guidedtour_accountmanager_user_admin_perms_added.png

Click Page Manager to open the Page Manager permissions: username (Full Name) dialogue:

[ Account Manager: admin: pagemanager: all  permissions ]
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:

[ Account Manager: user page manager permissions ]
guidedtour_accountmanager_user_page_manager_permissions.png

Look for Herberts section and click the dropdown menu to give him a Role:

Roles:

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:

[ Page Manager: Herbets view ]
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)

5. Add a user

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:

[ Account Manager: overview ]
guidedtour_accountmanager_overview.png

In the Menu, click Users, to open the list of all users:

[ Account Manager: all users ]
guidedtour_accountmanager_users_all.png

At the Users, click Add a user' to open the Add a new user dialogue:

[ Account Manager: add a user ]
guidedtour_accountmanager_add_user.png

After clicking [Save], the user is added:

[ Account Manager: user added ]
guidedtour_accountmanager_user_added.png

Maybe it's a nice exercise to create a section and pages and give Harriet everything she needs.

6. Groups

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)

7. Error messages

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.

7.1 Locked page

After logging in again, and going to the page you want to ecit, you get an error message like:

[ Loceked page ]
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)

8. To conclude

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