2. Preparations
2.1 Two browser windows
2.1.1 First
browser: website
2.1.2 Second
browser: management
2.2 Logging in
2.3 Management home page
2.3.1 General
features
2.3.2 Blind and
visually impaired Users
2.4 The Welcome page
explained
2.5 Logging out
3. Areas, Sections, pages, text and
images
3.1 Add an Area
3.2 Add a page
3.2.1 Page and
section icons
3.3 Add some 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. Miscellaneous
7.1 Locked page
7.2 Our sandbox
7.3 Get rid of the Exemplum Primary
School
Website@School is a tool to create websites. On those sites you can publish web Pages. The Pages show content like texts, images, etc. or contain modules like contact forms, weblogs, chats, image galleries, collaborative editing, digital flyers, sitemaps and much more. Website@School is a Website Content Management System (CMS). The only thing you need is your browser.
NOTE: If you do not have access to Website@School, please read 7.2 Our sandbox to do the tutorial.
font-size: 1.3em; font-family: monospace;
A block of text or code.
background-color: #B6B6B6;
to... etc: A snippet code in a text. NOT in this chapter!
icon, while [P] indicates the Page
preview
icon.For schools, it might be wise to have two separate workstations with their own browsers; one for Website@School management and the other to display the website being managed. All popular browsers (Mozilla Firefox, Opera, Safari, etc.) are compatible with Website@School. On most browsers, pressing the [F5] key refreshes the web page content.
Open the websites viewing browser window. Go to the URL
(Uniform
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 part of your school, do not delete the
index.php part.
With the demonstration data installed during the installation of
Website@School, the following school web page will be
displayed:
Press the [Enter] key on your keyboard, or click the button to login to Website@School Home Welcome web page.
The management interface of Website@School can be customized. These adaptions (called 'Skins') can be set for each individual User in the 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, section 5. Skins.
Header pane:
Home: Click to
return to Home Welcome.
Page
Manager: Add pages and sections, select and
manage modules, add content.
File
Manager: Upload files and create
folders.
Module
Manager: Manage special functions in
modules.
Account
Manager: Manage User accounts, manage Groups
of users, assign or revoke permissions.
Configuration Manager: Create Areas
and configure the general parts of the website.
Statistics: Not yet implemented.
Tools:
Translate Tool, Backup Tool, Log View, Update
Manager.
Help : Content
Sensitive Help. For example, when being in the
Configuration Manager at Areas, clicking on the
question mark displays the relevant part of the
Configuration Manager manual.
NOTE: To open the Help page in full screen mode with scrollbar, right click on the icon and select Open Link in New Window (Firefox).
Below the status bar the screen is divided in 2 panes:
Book : Access to
the documentation index and all chapters.
Info: Checks if
a newer version is available.
E-mail :
Allows you to send e-mails to the development
team.Clicking on the text in the upper right corner of the screen (logout Wilhelmina Bladergroen), will log you out cleanly.
Click the Configuration Manager
icon, to open the
Configuration Manager dialogue:
In the Menu, click Areas to open the Areas dialogue:
In Areas pane, click Add an Area to open the Add an Area dialogue:
NOTE: Once you have saved the Area details, the Area type is permanent. You cannot change a private Area into a public one or vice versa. This is a security feature. The content of an area can be moved. See the Configuration Manager for details.
NOTE: An unacceptable or invalid name results in an error message. Website@School then suggests a suitable directory name. If this occurs, accept the suggested name and click .
Click the button to return to the Areas dialogue:
The Areas dialogue is now displayed. The Senior Pupils Area has been added. Notice the message in the yellow status bar.
Home icon:
Click the Page Manager
icon, to open the Page Manager
dialogue. In the Workplace pane, the name
of the Area Exemplum Primary School is
displayed:
The Menu pane shows the list of Areas you can manage. The Exemplum Primary School is highlighted so the pages and sectionss belonging to that Area are displayed in the Workplace pane, i.e. the Exemplum Primary School
We are interested in your new Area, so in the Menu, click on Senior Pupils to enter your new Area.
Notice that no nodes [*] (pages and sections) exist as yet in
our new Area. We will now add a node with a page.
[*] Node: computer jargon, meaning, a basic unit used to build
data structures.
Click Add a page, to open the Add a page dialogue:
With the Plain HTML-page (htmlpage) module one of the available editors in Website@School is selected. Eeach user can have his preferred editor, from sophisticated WYSIWYG (What You See Is What You Get) word processors to a basic HTML editor.
Check the Table of contents for all available modules and editors.
Click to save the page details. The Page Manager of the Area is now displayed. Notice the status message shown:
The Welcome page has been added. Notice the the icons to the left of the Welcome page text. They are explained below.
The icons are:
NOTE: Capitals between '[ ]' (brackets) are for visually impaired, using the skin specially designed for them. See Account Manager section 5. Skins.
Home or [H]
or
Not Home or [_]
icon: A visible Home icon indicates the
default (opening) page of an Area, Section or Page, i.e
the first page seen in that Area or Section. A greyed
out Home icon indicates that these areas, sections or
pages are not the opening ones.
Trashcan icon or
[D]: Click to delete an Area, Section or
Page.
Pencil icon or [E]:
To edit the basic properties of an Area, Section
or Page.
Visible or [_]
or
Invisible or [I]: These icons
have two functions:
Page preview or
[P] or
Folder icon or
[+]: These icons have two functions:
Pencil icon:
Accesses the Edit Basic properties of page/Section.
Visible or
Invisible icon: Accesses the
Edit advanced properties of page/Section.Now set the Home icon by clicking on the (greyed out) Home icon to make the page the home page:
NOTE: It is not necessary to set the home icon because something will always be displayed, even an empty page. But it is good practice to set the home icon now.
Although the page is visible, it has no content yet. In the next section we will add some text and an image to the page.
icon at the
right side of the bottom row of icons. The editor will now
occupy the full screen allowing you more room on the screen
to create your text and add images.
Please enter some text, for example:
Hello World! This is the welcome page of the Seniors. We hope you enjoy our pages.
Save the text in the editor, either with the Save
icon, or use [Ctrl+Shift+S] on your keyboard. After
saving you return to the Page Manager.
You can also use the and
buttons. Please see ,
, in this tutorial.
NOTE: Save often as it reduces the risk of losing the text due to a sudden workstation failure or losing connection to the school server or the Internet.
After saving, you return to the small sized editor:
You have returned to the Page Manager in the Senior Pupils Area. Check your results by
clicking on the Page Preview
icon. A new window opens
showing you what the page will look like on the website:
If you prefer to see a full screen page, right click on the
preview icon and select Open Link in New Window (in
Firefox).
Close the window and you are back in the Page Manager dialogue of
the Senior Pupils Area.
In the next paragraph, we will add a photograph of the seniors
class to the Welcome page.
* We assume you have an image and know where it is on your computer.
In the Welcome page, click on the Page
Manager
icon and select in the
Menu the Senior
Pupils Area:
In the Senior Pupils workspace, click the
Welcome (37) page link.
The page editor opens. Maximize the editor workspace by clicking
the maximize
icon.
Proceed as follows:
icon.The Image Properties dialogue opens:
In the Image Properties dialogue, click the button, to open the My Files dialogue:
There are no files present at this time; not in your personal file storage (called 'My Files') or in the storage space associated with the Area 'Senior Pupils'.
You must first upload an image to your Website@School server before you can insert it in your web page. Please see the next paragraph.
Click Add (upload) files, to enter the Add (upload) files dialogue:
You can upload files directly from the computer your are now
working on to your school server.
The number of uploadable files can be changed. Please see the
Configuration Manager to change this.
Default is 8. Multiple file upload is also possible. Do not
uncheck the 'Resize images' checkbox. For both features and
help, please see the File Manager chapter.
Click the button for Filename (1), to open a dialogue on your computer allowing you to navigate to the path and filename of a file you want to upload:
Select the file and click (the button name depends on your operating system: Mac, Linux or Windows PC):
The path and the filename on your computer are now visible in the Filename (1) field. Click to upload the file to the school server. After this, you return to the Senior Pupils Area file space:
The image has been uploaded to your schools Website@School server. Notice the confirmation message displayed in the yellow status bar. The file has been scanned for viruses and a thumbnail has been automatically created.
Click on the thumbnail of the image. The Image Properties dialogue is displayed:
Here you can add or modify additional properties of the image. For now, simply press the button to insert the image into the page:
You can easily change the image size by clicking on any corner of it and, while keeping the left mouse button pressed, simply enlarge or shrink it to the desired size.
Click to save your page and return to the Page Manager.
You are now back on the Page Manager in the Senior Pupils Area.
If you wish, you can display your page by pressing the Page
preview icon; this has already been explained before. It is more
fun to go directly to the Website@School website:
Use the dropdown menu Select Area and select the Senior Pupils Area. If you do not have JavaScript, click the button:
Not only are you on the site of the Seniors, but, just for this occasion, we replaced our logo with the one of the Seniors. This is a simple operation. Please see chapter Bazaar Style Style, paragraph 2. Replace the Website@School logo to simply put a new image here, or to leave it blank. Or see one of the other available themes in the Website@School index.
Please go to the Website@School Welcome page:
Click the Page Manager
icon. Then in the
Menu, click Senior
Pupils to open the Senior
Pupils Area dialogue:
In the Senior Pupils workspace, click Add a section, to go to the Add a section dialogue:
Click to save the Section data. After doing this, you are back in the Page Manager for Senior Pupils. The Section for Andrew has been added:
The following exercise is useful to practice creating new sections and pages. Proceed as follows:
- Add 2 new section called 'Catherine Hayes' and 'Poems'
- Create a page for a poem called 'Cat'
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:
Or it could look different, but that does not matter for this exercise; it merely serves to bring you to the next paragraph.
You will notice the new items were added at the top of the Area. That is because we did not create the new Sections and the page within Andrew's Section. This is not what we really want for the structure of the website. Now is the time to put things right and arrange them in the order we want. We want the Welcome page at the top of the tree structure and the Sections belonging to the Seniors placed in alphabetical order below it. And we want the poem in Andrew's poems section.
This is how you can adjust the items to suit your desired order:
Click on the pencil icon of Catherine's Section. The Edit Basic properties of section nn dialogue opens:
Use the Order dropdown menu to
move Catherine's section and Andrew's section.
Use the Parent section dropdown
menu to move the Poems section to Andrew's section.
Finally, also with the Parent
section dropdown menu, move the Cat poem to Poems.
Your final result could look like this:
Now expand the display to maximal to show the items in the structure:
We used the 'Set tree view to minimal' and clicked on it. The tree view has a few options, which are explained in the Page Manager chapter.
In the next section, we will give Andrew the necessary Access permissions to his Section and pages.
In this tutorial, we will assign access permissions to Andrew's Sections and pages. This is done from within his Admin and Page Manager permissions.
Click on the Account Manager
icon, to open the Account
Manager:
In the Menu, click Users to open the list of Users:
To set Andrew Reese's account permissions, click on the pencil icon next to his name, to open the Edit User username (Full Name) dialogue:
On this page you can set the permissions for the various
management tasks. Default there are no permissions set for a new
user. This is a security feature.
We want to limit Andrew's permissions to editing his pages and
uploading images in his own file space 'My Files'. That is why we
only check the boxes for the following options:
NOTE: For normal Users, 'Basic administrator' permission is always necessary. The User can also be given extra permissions but never assign 'All permissions' to an ordinary User.
Click to save the User's
permissions. You are now positioned back on the Edit User
username (Full Name) dialogue.
In the Menu, the Page
Manager link has now been added and is accessible.
Click on Page Manager to open the Page Manager permissions: username (Full Name) dialogue:
You can see there are no permissions at all assigned
to User Andrew. This is a standard security feature. We only want
to grant Andrew partial permissions to his own section in the
Senior Pupils Area.
To open the Senior Pupils Area, click on the folder
icon of 'Area 4: Senior
Pupils', to open its tree:
Look for 'Section 38: Andrew Reese' and click to open its dropdown menu. Several Roles become visible. A 'Role' represents a set of permissions. These access permissions are discussed in depth in the Account Manager chapter.
We trust Andrew Reese so we can give him permission to create, delete and modify pages in his own Section, as well add subsections like Poems and Papers. It is safe to make him Sectionmaster over his own Section, so we set the dropdown menu to Sectionmaster.
NOTE:
Be very careful NOT to assign Andrew permissions as Guru on all
current and future Areas!
Now click to save Andrew's permissions and return to his basic properties.
When Andrew logs in with his username and password, he sees the following page when he navigates to the Page Manager:
NOTE: Andrew has no access (greyed out) to the other management tasks. Nor to the other Areas (also greyed out) or to Catherine's section (greyed out) and he has no knowledge of the existence of Intranet(s).
The access permissions are further discussed in the Account Manager chapter.
Click the Account Manager
icon, to open the Account
Manager:
In the Menu, click Users, to open the list of all Users:
At the Users, click Add a User to open the Add a new User dialogue:
NOTE: A username can have a maximum 16 characters: lowercase (a-z), digits (0-9), underscore (_) and starts with a letter.
A well-chosen password, for example, could be Mrbh3ws!. This password is easy to remember for its owner as it can mean "My red bike has 3 wheels!". And only the owner knows this, making it difficult for anyone else to guess. This 'sentence trick' is one easy way for Users to create difficult passwords while making it easy to remember.
When your password is not acceptable to Website@School, it
will be rejected andin the yellow status bar you will see a
warning message.
At this point, it is a good exercise to add a new User called mastell who is a new teacher in the school and to create a Section and pages for her.
In this way we can create a Group consisting of say: Teachers and Pupils. Teachers can have diffeent permissions compared to Pupils. That is, the Teachers may add sections and pages to an Area, whereas the Pupils may only add pages to a section.
Now, when creating accounts, we do not have to give 20 pupils
their permissions one by one. It's annoyingly, time consuming and
error prone to each time in Admin give Basic-, Page Manager and
File Maanger permmssions and next in Page Manger grant
permissions in the specific Area, eanble the right Role in the
dropdown menu.
With the Groups and Campacites feature we simply make the 20
pupils a Pupil in the Group 'Class Name' as Pupil. And we make
their teacher a Teacher in the group 'Class Name'. Now we can
make Pupils a Sectionmaster and Teacher 'Areamaster'. That's
all.
The power of Groups, Capacities and Roles, combined with Areas, Sections and Pages deserves more than this too short explanation. The features are extensively discussed in the Account Manager.
If the one who tries to access the page is the owner of the page, it suffices to click the button to unlock the page.
When a User selects a page that is in use by someone else, he will see the following screen:
The message says that the webmaster Wilhelmina tries to open the page Andrew is working in. This means the page is in use and cannot be unlocked by Wilhelmina.
NOTE: In this case, only the owner of the page has access to the unlock feature.To login in to the Website@School sandbox, go to:
http://wyxs.net/was_daily/admin.php,
where you find:
Now it's time to add more public and private Areas and giving each one modules like: contact forms, sitemaps, image galleries, multiple weblogs, chats, collaborative editors, ? In the 'Modules' section of the Table of Contents, we explain in detail how to add these functions and configure them. On the top of that page you find a clickable link to a long page with a searchable list of the contents of all chapters. Easy if you are looking for something specific.
You can find example modules in the demonstration data:
Happy learnng!