2. Web Page Editor

The SiteWizard Content Management System gives you the ability to update and maintain the information on your website. As one of the most powerful systems on the market, our editor allows you to structure the information on your pages however you see fit. We also provide you with some amazing extra tools that make this whole process a little quicker and easier to complete.

2.1 The Editing Environment

To enter the SiteWizard WYSIWYG editor you must first click on the Web Editor button on the main menu at the top of the screen. Once there you can choose the page you wish to edit by clicking on the Spanner image next to the page name.

Figure 2.0 A screenshot of the SiteWizard WYSIWYG editor.

The first thing you will notice is that not all of your site is shown in the editing window. This is because the system allows you to edit the content of your website separately from the menu and its overall appearance. This is a system our research has shown to be the easiest way to maintain your site.

Adding text to your page is as easy as clicking the mouse where you would like it to appear and then to start typing. When you do this you'll see that the text style (font type, size and colour) of your actual site will be replicated in the editing environment.

Back to top

2.2 The WYSIWYG Toolbar

A first glance of the toolbar will reveal that there are some familiar icons. This is because some of the functions the editor can complete are the same as those that are found in most word processors. For a breakdown of these icons and all the others you may not be so familiar with please see the table below.

Icon	What It Does
	Save the changes you've made to the page.
	Remove the highlighted text.
	Copy the highlighted text.
	Paste the text you copied (with or without formatting).
	Copy content from Microsoft® Word, then paste it into the HTML editor using the pop-up accessed from this icon.
	Print the HTML page.
	Spell check the HTML page. This will need to be installed.
	Undo or redo the most recent action.
	Find a word or phrase within the text of the HTML page.
	Find and replace a word or phrase within the text.
	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).
	Remove the formatting from highlighted text.
	Bold, italic, underscore or strikethrough highlighted text.
	Superscript or subscript the highlighted text.
	Change the colour of the highlighted text.
	Change the background colour behind the highlighted text.
	Add bullets to highlighted text lines.
	Add numbered bullets to highlighted text lines.
	Increase or decrease the highlighted text's indentation.
	Alignment of highlighted text (left, centred, right, justified).
	Add or remove hyperlink from highlighted text. Also used to manage file uploads and links to files on the web server.
	Add an anchor to a page.
	Upload or insert your own or other's images into the HTML page.
	Insert table. Number of columns or rows, and table width, height, borders, & alignment can also be set.
	Insert divider line (horizontal rule).
	Insert symbols & special characters (trademarks, currency, etc.).
	Insert page break. Only impacts printed version.
	Insert a line break onto the page.
	Online keyboard for certain non-roman character languages.
	Insert a default Enquiry Form.
	Insert a checkbox into a form.
	Insert a radio button into a form.
	Insert a textfield into a form.
	Insert a multi-line textarea into a form.
	Insert a drop-down box into a form.
	Insert a button.
	Insert a picture button.
	Insert a hidden field into a form.
	Swap from WYSIWYG mode to HTML mode.
	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.

Figure 2.1 An overview of the icons used in the SiteWizard Page Editor.

Back to top

2.3 Picking A Style

In the bottom left hand corner of the toolbar you'll see there is a drop-down box with the title of Style. Using this box you can set the appearance of a word or section of text to one of eleven different built in styles. These styles have been created by our designers to keep in line with the overall appearance of your website.

1. Type in your text into the web page editor.
2. Select the text you wish to change the appearance of by holding down the Left Mouse Button and dragging across the screen to highlight the text.
3. Click on the Style drop-down box and select one of the pre-determined styles.
4. Once you have clicked you will see the text you've highlighted change its appearance to the selected style.

Although you can change the style of your text by using the Font and Size boxes, we recommend that you use the styles that have been created for you in the Style drop-down box. This way you can preserve the continuity of design that runs through your entire website.

Figure 2.2 By using the Style drop-down box, you can change the appearance of a block of text to that of a pre-determined look designed for your site.

Back to top

Click Here To Continue Reading Section Two Of The Guide >>