This is a full featured editor, usable under Linux with Mozilla 1.3.1 and higher, Firefox 1.0 and higher. Also under Windows with Firefox 1.0 and higher, Internet Explorer 5.5 and higher and Netscape 7.1 / Mozilla 1.3 and higher.
The first and the second editors are both WYSIWYG (What You Will See Is What You Get) editors and operate more or less like a word processor.
Their main functions are:
- Adding text, images, links, etc. to pages on the site and to pupils' pages.
- Uploading material from your computer to directories on the S@S server.
We will now describe every editor in detail:
Before you can use this editor, you must be sure it is enabled in Configuration > Personal settings.
Open the editor by going, for example: Pagemanager > Some section > Some page.
When the steps described above are unfamiliar to you, consult the Page Manager chapter.
You will see:
You can distinguish three sections:
We will now cover each item in detail.
Explanation:
NOTICE: This function is not available in the pupil's editor.
NOTICE: When a template is loaded via this option then the complete current content is lost!
NOTICE: When this directory does not exist or is empty this option will not be shown.
![]() |
HTML code | View or edit document HTML source code (for advanced users). (In Firefox a separate window is opened with the HTML source code) |
![]() |
Save | Will save the page, same as the save button at the bottom of the page. |
![]() |
Preview | Preview what the HTML page will look like for users. |
![]() |
Template | Select a layout template. The editor has three default templates delivered. A popup window appears, click on the template of your choice. Careful: current content will be lost! |
![]() |
Cut | Remove the highlighted text. |
![]() |
Copy | Copy the highlighted text. |
![]() |
Paste | Paste the text you copied (with or without formatting) |
![]() |
Paste | Paste plain text you copied |
![]() |
Paste Word | Copy content from Microsoft Word, and paste it into the HTML editor using the pop-up accessed from this icon. |
![]() |
Print the HTML page. | |
![]() ![]() |
Undo/Redo | Undo or redo the most recent action taken. |
![]() |
Search | Find a word or phrase within the text of the HTML page. See 2.2 Find |
![]() |
Replace | Find and replace a word or phrase within the text. See 2.2 Replace |
![]() |
Select all | Select all of the text in the HTML page (usually used before copy or cut or to apply a style or format to the whole page). |
![]() |
Un-format | Remove the formatting from highlighted text. |
![]() ![]() ![]() ![]() |
Bold, etc. | Bold, italic, underscore (u) or strikethrough (wrong) highlighted text. |
![]() ![]() |
Superscript | Superscript (X2) or subscript (X2) the highlighted text. |
![]() ![]() |
Lists | Add numbering or bullets to highlighted text lines. |
![]() ![]() |
Indent | Increase or decrease the highlighted text's indentation. |
![]() ![]() ![]() ![]() |
Alignment | Alignment of highlighted text (left, centred, right, justified). |
![]() ![]() |
Hyperlink | Add or remove hyperlink from highlighted text. See 2.4 Insert web link |
![]() |
Bookmark in HTML page | Make the highlighted text a bookmark within the HTML page (you can then hyperlink to it in order to help users quickly navigate to specific parts of long pages). See 2.5 Insert anchor link |
![]() |
Insert a S@S link | Here you can make an internal link in S@S. See 2.6 Insert S@S link |
![]() |
Image | Upload or insert your own or other's images into the HTML page. See 2.7 Insert image |
![]() |
Flash | Upload or insert flash file into the HTML page. See 2.8 Insert Flash |
![]() |
Table | Insert table. Number of columns or rows, and table width, height, borders, & alignment can also be set. See for more information 2.9 Tables |
![]() |
Line | Insert divider line (horizontal rule). |
![]() |
Emoticons | Insert emoticons (e.g. smiley faces, email icon, light bulb). See 2.10 Insert emoticons |
![]() |
Symbols | Insert symbols & special characters (trademarks, currency, etc.) See 2.11 Insert special character. |
![]() |
Page break | Insert page break. Only impacts printed version. |
![]() |
Non-English | Online keyboard for certain non-roman character languages. See 2.12 Universal keyboard |
![]() |
Styles & Formatting | Styles & formatting determine the appearance of HTML text. You may also use the drop down boxes to style specific elements (such as headings), or set overrides for font face, font size, etc. |
![]() |
Text color | Change the color of the highlighted text. |
![]() |
Background | Change the background color behind the highlighted text. |
![]() |
About the editor | Gives information about the editor version. The current version in S@S 2.4 is FCK editor version 2.2 |
Here you can make a link to a document, anchor link, email. Before you can make a link, you must select a piece of text.
Fill in a name (for example 'top'; easy to remember when you have more than one anchor in a text) and click on 'OK'. You can use the 2.4 Insert web link to refer to this anchor in a different place on your page. An "anchor" icon will be placed in the page as follows:
Explanation:
Explanation:
Explanation:
Explanation:
NOTICE: The HTMLarea editor is no longer supported or maintained in Site@School because this project has ended. Therefore the pupil editor is now using the FCK editor.
The text editor has a menu bar. When opening a page, you will see:
Here you can select special characters that you can put in your text.
Link text: Here you can type the text that will appear as clickable link.
Link URL: Here you enter the desired URL.
Target: No need to put anything in this field. When you put in "_blank" (omit the " and ") the link opens in a new window.
Fill in a name (for example 'top'; easy to remember when you have many anchors in a text) and click on 'OK'.
You will not see anything in your text. However, clicking on source will show in the HTML code;
<a name="top"> </a>
Step 2 Go to 'Insert S@S Link' in the menu bar. You will see:
Find the page you were working on by clicking on the sections and pages in the upper site of the window. When you have clicked on the right page you will see its location in the field 'HTML code'. In the field 'Link text' you will see the name of the page.
Replace the name of the page with (example): "to the top of this document" (omit the quotes).
In the bottom field 'Anchor name' you put in the name of the anchor you made in Step 1, i.e. 'top' (omit the quotes).
Click on 'Insert'.
You are taken back to the editor. Save your work, go to the document on your website.
When you have put the 'anchor' on the top of the page and the link 'To the top of this document' at the bottom, clicking on the link will bring you to the top of the document.
Here you can make an internal link in S@S. For example, you have an entry in vertical column, called 'Festivals'. When clicking on the 'Festivals' button, you can have a page with links to 10 pages of information on school festivals. These pages are internal links. They are made as normal pages, but are made invisible (see no. 54: 'Invisible').
By clicking on a section you will see:
When clicking on the (invisible) page, its link appears at 'HTML code:'. You can change the link text in something appropriate "fireworks on festivals" (omit the quotes). Do not use the anchor text field. For explanation of this field see the previous item.
Click on the image to insert it in the page. Click on 'Browse' to open a window on your computer to choose a picture. Click on 'Save' to upload the picture to the S@S server. When it's uploaded you can see the picture in window where pictures are displayed.
Fill in the number of horizontal rows and vertical columns. Leave 'Border thickness' to '1', even if you do not want a border, otherwise you cannot see your table when editing.
When you don't want a border: make sure the table is selected (you will see the
small black squares around it) and click on the first button third row
(table properties)
Change the border style to "none" and press OK
When you look at the bottom icons, they are grey (i.e. not functioning). When you have made a table and put your cursor in one of the table fields, you will see the bottom icons become visible and therefore accessible. The row of bottom icons is treated below.
NOTICE: The Icons summed up below ( 37 - 54) are not explained further. Their meaning is obvious to users who use tables in HTML pages. When the terms below are unfamiliar to you, consult a HTML book on how to use tables.
NOTICE: In Firefox 1.5, after creating a new page, the cursor might not be visible. However, you just can start typing, thereafter the cursor will appear.
NOTICE: A new paragraph is made by pressing the 'Enter' key on your keyboard. A new line is made by pressing the 'Shift' and 'Enter' keys simultaneously.
NOTICE: This function is not available in the pupil's editor.
NOTICE: A new paragraph is made by pressing the 'Enter' key on your keyboard. A new line is made by pressing the 'Shift' and 'Enter' keys simultaneously.
Author: Dirk Schouten <schoutdi (at) knoware (dot) nl> Last updated: 2006-04-24