Editize is the only component of the Site Management System which was not developed in-house by Sites4Professionals. After a great deal of research, it was chosen from a number of alternatives as being the most appropriate tool to allow our customers to create and edit web pages. It offers all the essential features for web pages but none of the bewildering range which might tempt inexperienced users to create over-complicated pages. However, it does allow those who understand how web pages work to write thir own HTML (Hypertext Mark-up Language).
The editor works just like a word-processor such as Microsoft Word, so anyone who has produced documents on a computer should find it quite familiar. If anything, though, it is simpler than something like Word.We suggest that you read the whole of this page through, trying out each feature. You can then use the links below to go straight to any heading for reference.
We suggest that you read the whole of this page through, trying out each feature. You can then use the links below to go straight to any heading for reference. You may also wish to keep a printed version nearby while you use the editor.
When you click the New page link on the SMS home page for the first time in each session, there is a short delay before the Page creation form appears. This is caused by the Java system initialising and Editize downloading from the SMS website. There is no such delay when you re-open this form or open others during a session. (A 'session' lasts until you close your web browser window.)
When you choose to create a new page, the Editize work area is blank, but when you choose to edit an existing page it displays the content of that page.
To begin work, you need to point inside the work area and left-click. This causes the text cursor to appear, enabling you to start typing. We recommend that new users practice typing and styling some simple text before moving on to the features that are specific to web pages.
For the sake of completeness, we give some very basic guidance on simple text entry, editing and styling here. Experienced word-processor users can skip this section.
The references to various buttons in this text refer to the Editize toolbar, which is illustrated below. This may look a little confusing at first, but it provides only a small number of essential functions. Also, when you place your mouse pointer over a button text pops up to tell you the name of the button.
Each button or group of buttons is illustrated separately with the relevant text below.
Normally, when you start typing, your text should appear in lower-case ('small') letters. If it appears in capitals, the capitals lock function on your keyboard must be on. To turn it off, tap the Caps lock key once. You can turn it on again by tapping to key once if you wish to type a passage all in capitals.
To type a single capital letter - the initial at the start of a sentence or a name, for example - it is best simply to hold down one of the Shift keys while tapping the letter key. These are normally found at each end of the first row of keys above the space bar, and are normally identified by an up arrow (not to be confused with the separate cursor-control key, which is in a group with three other arrowed keys).
Many keys have two characters on them - the exclamation mark above the numeral '1', for example. Holding down the Shift key while typing one of these produces the upper character.
Paragraph and line breaks are produced by tapping the Enter key. This is found above the right-hand Shift key and is identified by an arrow that starts downwards and turns left, indicating a line-feed and a return to the start of the the new line.
Untrained word-processor users tend to hit Enter once for a new line and twice for a paragraph, but this is incorrect - hitting twice produces a double paragraph break - far too much white space. A single Enter produces a paragraph break, and if you want simply to start a new line you should hold down Shift and tap Enter.
The great advantage of a computer-based text editor over either a pen or an old-style typewriter is that the text can be corrected, altered and reorganised freely. This process is known as 'Editing'.
At its simplest, this means using either the mouse or the four arrow keys to move the text cursor to the point where a change is required and then using the Delete key to delete characters to the right of the cursor, the Backspace key to delete characters to the right of the cursor or the letter and other entry keys to type characters at the cursor.
You can also select a block of text for editing. To do this, place the mouse pointer at either the start of the end of the text you wish to change. Then you have two choices:
When you do this you will see that your chosen block of text is highlighted by exchanging the background and foreground colours. If your release point or second click is in the wrong place you can move the pointer andShift-click to move the end of the highlighted block.
This process is known as 'selecting' a block of text.
Once the block is selected, you can hit Backspace or Delete to delete all of it with one keystroke. You can also start typing, in which case the selected block will be replaced by what you type.
You can move your selected block by cutting and pasting (the current version of Editize does not yet allow 'drag-and-drop'). Cutting means deleting the block but saving a copy in your computer's clipboard. There are three ways of doing this:
The place the cursor at the point where you want your block to appear and either:
You can also place a copy of your selected block somewhere else. To do this, copy rather than cutting your block, using any of these methods:
Powerful facilities like these allow you to make catastrophic errors, so you need some means of recovering from these. Editize has a multi-level Undo/Redo capability, which means that you can backtrack, undoing a number of edits to find and correct an error. If you go back too far, you can then repeat several stages until you get to where you were heading. You can Undo operations like this:
Redo works like this:
There are two kinds of style which you can apply to your text:
These are about the function of a paragraph rather than its appearance. How they actually look on screen is determined by your site's style sheet, which can be changed to suit you.
The SMS deliberately offers a very limited range of paragraph styles - this is to encourage you to maintain a logical structure for each page:
These styles can only be applied to whole paragraphs (blocks of text separated by a single Enter). To apply a style, simply:
Individual paragraphs or groups of paragraphs can be selected and then aligned left, centre or right by clicking on one of the Left, Centre or Right buttons on the toolbar.
Individual paragraphs or groups of paragraphs can be indented by selecting them and then clicking on the Increase indent button. This can be done several times to increase the amount of indentation. Clicking the Reduce indent button cancels previously-applied indentation.
Groups of paragraphs can be turned into bulleted or numbered lists by selecting them and then clicking on the Bullet-points button or the Numbered button. There is no provision for 'nesting' lists (eg: putting a numbered list inside a bulleted list).
There is sometimes a problem if you try to cut- or copy-and-paste text in a list. This has been reported to the developers of Editize and we hope it will be corrected soon. Meanwhile, the solution is to select your list, click the relevant list button to turn it back into normal paragraphs, do your editing, select the paragraphs and click the list button to restore the list format.
These can be applied to any block of text (not necessarily one or more whole paragraphs - phrases, words or even single letters can be styled) by selecting it as explained above under 'Block editing'. The available styles are:
Inline styles can be applied by either:
Hyperlinks are what makes the World Wide Web the incredibly powerful tool it is. Forget all the colour, the images, the sounds, the video clips, the animations - these are merely the icing on the cake. The absolute essence of the web is the ability to make any block of text - word, phrase, sentence or even paragraph - into a hyperlink which users can click to go instantly anywhere else - somewhere else in the same page, somewhere else on the same website, somewhere else on a different website on the same server or somewhere else on a website on the opposite side of the world.
Editize allows you to create and edit links on your pages very easily.
Just select the text you want to form the link and then click the Hyperlink button. This will call up a dialogue box like this:
You can type the web address (URL or Uniform Resource Locator) in the box if you like (you must include the 'http://' bit at the beginning), but many URLs are very complicated and it is easy to make a mistake. Since you are connected to the Internet when using the SMS, there is a far more reliable way of getting the address right (if you are linking to a page on your own site ignore step 1):
This may seem long-winded, but it soon becomes a natural sequence of operations and should ensure that you don't make any mistakes with your links.
If you like, you can click Open in a new window. If this box is ticked, your link will open the target web page in a separate browser window, which the user can then close rather than having to use the Back button to return to your page.
To create the link, simply click OK. You can check it simply by saving your page, previewing it and clicking the link.
If you need to correct or remove a link, simply select it and click the Hyperlink button. You will see an almost identical dialogue box, but with an additional button: Remove Link. You can change the URL, tick or untick the Open in a new window option or click to remove the link completely. You can even select part of your link text and edit to unlink just that section, leaving the rest of the link intact.
It is possible to insert any picture on the World Wide Web into your own web pages without having your own copy, simnply by inserting the URL (web address) of the image in the box. However, this makes you dependant on the owner of the image, so it is preferable to store all your images on your own site.
Before you can insert an image into your web pages, you need to upload it to your site by following the Upload an image link in the Pages box on the SMS home page (if you have not done this before, please read the note about filenames on the picture upload page).
When you insert an image into a web page, it will appear at the current position of the text cursor, so place the cursor where you think you want the image to appear. To make your first experience as simple as possible, it is best to put the cursor at the end of a paragraph and hit Enter so that the cursor is in an empty paragraph. Now click the Insert Image button. You will see a dialogue box like this:
Click the List button to display a list of the available pictures. If you entered a optional description when uploading your picture, this will appear in the list; if not, you will see the filename in the format 'images/picture.jpg' - there are examples of both in the illustration below.
Click the title or filename of your chosen image to select it and then click the OK button. The list box will close and the Insert Image box will now show a small preview of your chosen picture. Its filename will be in the URL box and, if you entered a description when uploading, this will appear in the Alt box:
Click the OK button. The dialogue box will close and the picture will appear in the editor window. If the cursor was in the middle of a paragraph, there will be a little icon to show the image's exact position in the text, which may confuse you, so click the Save page button and preview your page from the SMS home page so you can see the real effect.
Go back to the SMS home page and click the Edit link for the page on which you were working. Click on the little image icon embedded in your text if it is there; if not, click on the image itself. You will see that the Insert Image button on the toolbar is highlighted. Click this to reopen the dialogue box, which will now be headed 'Edit Image'.
At this point you need to experiment, rather than reading a long involved explanation. Click to drop down the Align menu, which will offer you the following options: Bottom, Top, Middle, Left and Right.
Try clicking each of the first three, followed by the OK button, and observe what happens. If the cursor was in the middle of a paragraph, none will produce a sensible result, but if you inserted the picture into an empty paragraph they will all have the same effect. So for practical purposes these three options are useless! This is not the fault of the editor, but of the way images are aligned by your web browser.
However, you now know that one option is to place your picture in a separate paragraph, where it will sit happily against the left margin between the previous and subsequent paragraphs (like the illustrations on this page). The other two options, Left and Right, actually work sensibly, giving you a total of three possibilities. They align the picture against either the left or the right margin and allow the text to flow around it. To use either of these, you should not make your picture a separate paragraph - simply embed it where you want it in the text. The tidiest result is produced by inserting it at the beginning of a paragraph.
Clicking the Advanced button in the Edit Image box gives you access to several other properties:
First, it allows you to insert 'Alt' text for your image (or to edit this if it has been inserted from the description you entered when you uploaded your image). Alt text appears on your page if, for any reason, the image cannot be displayed. It also pops up when the user moves the mouse pointer over the image. Perhaps most importantly, it tells blind and vision-impaired users what the image is via their talking web browsers. So while the descriptive text entered on upload is to help you identify the image you want to insert into a page, you should probably edit the Alt version at this stage to help your site's users.
It also allows you to change your picture's size. In general you should not make a picture bigger than its true size because this will make the pixels (the coloured dots from which it is built up) visible. And, ideally, it is better to produce a smaller version of a picture in a graphics package, as the file size will be smaller and the picture will appear on the user's screen more quickly. However, if you do not have the skills or software to do this, Editize allows you to change the size of any image. (This is also useful just for testing - use it to determine how big you want your picture and then create an image to the required size.)
When you open the 'Advanced' box, the Preserve shape button will be ticked, so Editize will do the calculations needed to preserve the proportions of your image - you just change either the height or the width. If for any reason you want to stretch the image vertically or horizontally, you need to un-tick the button. To change dimensions, simply edit them in their boxes and click OK. If you lose track and forget the original dimensions, just click Reset.
If you leave the Spacing box at zero, you will find that the text is very close to the edges of your picture. You can increase the horizontal and vertical spacing separately in pixels to give more 'clearance'. Experiment with these settings to achieve the results you want.
Finally, you can give your picture a border. A 1-pixel border around a photograph gives it a crisp edge which can be more attractive than letting it bleed into the background. A heavier one may be oppressive. Again, feel free to experiment.
Tables were included in web page technology to allow tabular data to be presented, but they are now used much more widely to control the format of web content. Tables should always be inserted between paragraphs, so to insert a table into your page, place the cursor at the start of a new paragraph and click the Insert Table button. This will display the simple version of the Insert Table dialogue box:
To begin with, this is probably all you need to create a simple table. By default it offers you a table with five columns and two rows. Change these values if you know you want something different and then click OK. An empty table will appear.
You can now click to place the cursor in any table cell and type normally. The column containing the cell with increase in width to accommodate your text.
When you have some experience of tables, you can choose the advanced version of the dialogue box to choose other properties when creating your table:
This allows you to set the width of the borders displayed - entering zero removes the borders completely. Experiment to see what other values do. You can also enter the width and height you want for the table, rather than relying on the text to stretch it - you can enter either numbers of pixels or percentages in the form '70%' in these boxes, so experiment to see what happens with these.. And you can use the dropdown menu to align the table left, centre or right on your page.
Once a table has been created, you can edit its properties. Click to place the cursor in one of the table cells, then - pointing anywhere on the page - right-click to see the pop-up menu. Because the cursor is in the table, you will see a Table entry at the top. Move the pointer onto this to display a drop-down sub-menu:
The top two menu entries allow you to insert a row and insert a column. A new rows is inserted above the row in which you placed the cursor. A new column is inserted to the left of the column in which you placed the cursor.
The next two entries allow you to delete a row and delete a column. These delete the row or column in which you placed the cursor. They also delete any text you have typed in those positions.
The next entry allows you to edit the properties of the cell in which the cursor is placed:
Cell type may be either Header or Normal. If you make a cell a header cell the text in it will by default be bold and centered. Text in normal cells is by default aligned left and in normal style. The text can be aligned vertically and horizontally in each cell: vertical alignments are top, middle, bottom and Baseline (baseline is an obscure property that does not seem to do anything in Internet Explorer); horizontal alignments are left, centre and right.
The next entry allows you to edit the properties of the whole table:
The options are the same as in the advanced version of the Insert Table box except that you can give the table a Description. This is mainly used to help blind and vision-impaired users: your can use it to tell them whether a table contains structured data or is purely to control layout, for example.
The final entry allows you to delete the entire table and all its contents.
Editize is very good at handling text pasted in from other programs such as Word or Excel. It handles numbered and bulleted lists and tables from Word, and any block of cells copied from Excel will paste into Editize as a stand-alone table. The resulting content in Editize can then be edited and styled just like anything you type in yourself.
This means that, if you feel more at home in, say, Word, you can create and format your page text in that program and then paste it into Editize.
There is sometimes a problem if you try to copy-and-paste into Editize from another program: if you have previously cut or copied something from inside Editize, it may paste this rather than the text from outside. This has been reported to the developers of Editize and we hope it will be corrected soon. Meanwhile, the solution is to save your work, shut down all browser windows and log back into the Site Management System.
This is the first draft of the Editize Help page. It already contains a great deal of information which you may find useful, but we expect to modify it considerably. To assist us in this, we would appreciate your feedback on how it could be improved (please use the Support/suggestion form).