Web Page Editor Overview & Icon Descriptions

Page Editor Tools

Text Tools

Bold: Click to begin typing in Bold, or highlight text and click to change existing text to Bold.

Italic: Click to begin typing in Italic, or highlight existing text and click to change to italics.

Underline: Click to begin typing with an underline, or highlight existing text and click to underline.

Strikethrough: Click to begin typing with a strikethruogh strikethrough, or highlight existing text and click tostrikethruogh.

Alignment Tools

Align Left: Click to align cursor to the left, or highlight existing text and click to align to the left.

Center: Click to position cursor in the center, or highlight existing text to position it in the center.

Align Right: Click to align cursor to the right, or highlight existing text and click to align to the right.

Align Full / Justify: Click to align text across the width of the page. By adjusting the character spacing, this will make all lines in a paragraph of equal length, except the last line which can be considerably shorter.

Cut and Paste Options

Cut: Highlight text and click to cut the text. This will remove the text and keep it stored in memory. The text can now be placed into another location in your web page by using the Paste option.

Copy: Highlight text and click to copy text into memory. This text can now be placed into another location on your page by using the Paste option.

Paste: Click to paste copied or cut text or images.

Paste as Plain Text: Click to paste copied or cut text without style or size formatting.

Paste from Word: Click to paste text from Microsoft Word. This will modify the text to make it easier to edit in the page editor.

Find Options

Find: Click to search for text on the page. Type in the text you are searching for in the pop-up box and clickFind Next.

Find / Replace: Click to search for text and automatically replace it with other text once the search has been found.

List Tools

  Unordered List / Bullet List: Click to start a bullet point list, which will insert a bullet point every time you press enter. Hit enter twice to exit the list mode, or Shift + Enter to enter a line break without adding a bullet point.

  Ordered List / Numbered List: Click start a numbered list, which will insert numbers in sequence at the beginning of every line when you hit enter. Hit Enter twice to exit the list mode, or Shift + Enter to enter a line break without moving on to the next number.

Indent Options

Outdent / Decreate Indent: Click to decrease the indentation at the beginning of a line or paragraph.

Indent / Increase Indent: Click to indent or increase the indentation of a line or paragraph.

Undo / Redo Options

Undo: Click to undo the last edit you made.

Redo: Click to reapply your last edit before an undo.

Link Options

Insert  / Edit Link: Highlight text to add a link to a web page or edit an already existing link.

Unlink: Removes the link(s) from the current selection.

Insert / Edit Anchor: Highlight text and click to insert or edit an existing anchor. This will create a link on the selected text, which can be referenced in another link to take users directly to that part of the page.

Image Options

Insert / Edit Image: Click to insert a new image, or select an image and click to replace the image.

HTML Options

Cleanup Messy Code: Removes unwanted or unnecessary formatting from the html code. This may be useful when pasting from another text editor such as Microsoft Word.

  HTML: Opens the HTML source code editor. This where you can edit the code directly.

Date Options

Insert Date: Click to automatically enter today’s date.

Insert Time: Click to automatically enter the time.

Preview Options

Preview: Click to see how your page will be appear when viewed with your current browser.

Color Options

Text Color: Click to select a different text color and begin typing, or highlight text and click to change color.

Background Color: Click to choose a different background color for your web page.

Table Options

Insert Table: Click to open the Insert / Modify table box and enter your table values.

Table Row Properties: Click inside the beginning of a table row to edit values for the entire row of a table, such as alignment, class and height.

Table Cell Properties: Select one or more cells of a table and click to edit values such as alignment, class, width and height.

Insert Row Before: Select a table cell and click to add a row above the current one.

Insert Row After: Select a table cell and click to add a row below the current one.

  Delete Row: Select a cell within a table and click to remove the entire row to which the cell belongs.

  Insert Column Before: Select a cell within a table and click to add a column before the current one.

  Insert Column After: Select a cell within a table and click to add a column after the current one.

Remove Column: Select a cell within a table and click to delete the entire column.

Entering text into the page editor is like using Microsoft Word and other similar word processors. There are also features common to word processors such as the BOLD, Italic and Underline functions.

  • Styles that are available for your website depend on the design and cololr scheme. Selecting a style will automatically select a font style, size and color. To use a style, either select a style before you begin typing or highlight text you have entered and click on the Styles dropdown menu to select a style.You can still make changes to the format after applying a style. (Example: you can apply a style and then make the font size larger).
  • Copying and pasting from Word: If the text you want to enter is already in digital format (such as a Microsoft Word document), you may copy the text and paste it into the page editor using the icon.This button exists because pasting from word can often bring unwanted formatting.When you click on the icon, a new window will appear – paste the text into this window and click Insert.
  • Creating / Breaking Links:  To create a link:
    • Highlight the text you want to link and then click the icon.A small pop-up will appear. In Link URL you must enter the address of the page you want to link to. (you must enter the exact address of the page you want to link to and it must begin with http:// – e.g. http://www.kazeli.com) The easiest method to do this is to go to that page and copy & paste the address that appears in your address bar.To create an email link you must enter the following in the Link URL field: mailto:info@yourdomain.com This link will open up the user’s default email client and prepare an email to be sent to the address included in the link, eg. info@yourdomain.com. All email links must begin with mailto:

      Title: The link title can be a useful way of giving information about the link and where it is leading to. The title will appear when the user puts the cursor over the link before clicking on it.

      Target: select whether you would like the link to open in the same window or a new window.

  • Insert Image: In order to insert an image into the website you must first upload it to the Media Center. The Media Center can be accessed by clicking on the Media Center button at the top of the page when you are in the page editor. See Media Center for further instruction.To insert an image onto the page from the Media Center, click your cursor where you want the image to be inserted and click on the insert / edit image icon. A small pop-up will appear from which you can select an image from a list of those already in the Media Center.Select an image by clicking Normal next to the image you want to select. A preview of the image will appear in the preview space. The image URL and dimensions will be entered into the fields automatically.

    Enter a value into the Border field to insert a picture border. Values entered are measured in pixels.

    Alignment positions the image on the page.

    VSpace (Vertical Space) and HSpace (Horizontal Space) leave a space vertically and horizontally between the image and the rest of the page. The numbers entered into these fields are measured in pixels.

    Alternative Image: It is possible to have two different images show in an image area – one will show when the mouse is moved over the image and the other will show when the mouse is not over the image.

    To enable this you must check the Alternative Image box.

    To select the image to use for mouse over, click on M.Over next to the image you want to use.

    For the image to use for mouse out, click on M. Out next to the image you want to use.

    When you are finished, click Insert to add the picture to the page.

  • Insert TableClick on the Insert a new table icon . A small window will pop up for you to enter the details of the table you want to create. All information entered here can be edited later.Enter the number of Columns and Rows you wish the table to have.

    Cellpadding / spacing: By default, table cells tend to be squeezed close to each other. To give your table cells more room, use Callpadding and Cellspacing.

    Cellspacing controls the space between table cells.

    Cellpadding sets the amount of space between the contents of the cell and the cell wall. This is usually more effective for spreading out the contents of the table than Cellspacing. See examples below:

    Alignment: Tables can be aligned to the left, right or center of the page. Without a specified alignment a table will default to display on the left side of the browser. Elements within the table can be manipulated further regardless of the table alignment.

    Border: The border defines the thickness of the lines which make up your table. If you do not want the lines to show, enter zero ( 0 ) in the border field.

    If you plan to work with the table, it may be a good idea to set the border to 1 so you can see the table lines, to make it easier to see what you are doing. You can go back to the table properties and set the border to zero again once you have finished.

    Width and Height: The width and height define the dimensions of the table. These are measured in pixels.

    If no value is entered in these fields, the table will automatically take the dimensions needed to accommodate the content inserted in the cells.

    Class: Choose a style to use for the table text. If no style is selected, the current font size, style and color will be used.

    When you are ready to insert your table, click Insert. Click Cancel to return to the page editor without inserting a table

    Direction: Depending on your selection the editor will be searched going downwards or upwards. If you want to search below or above a specific point in the text, highlight a point a then click the [icon]. By doing this the search will begin downwards or upwards from that specific point.

    Match Case: Selecting this check box will search for words matching only text with the same casing. i.e. small letters or capital letters.

    You can Find Next to just find a word, Replace, to replace the word with the typed replacement, Replace All, to replace all of the same words with the replacement, or Cancel to return to the editor without making changes.

  • Remove Formatting: To remove formatting, highlight the text from which you want the formatting removed and click the [removeformatingicon] icon. This will remove all formatting from the highlighted section.
  • Toggle Full Screen Mode: This button allows you to change between full screen and normal modes. Full screen mode allows you to work with the full size of the screen. You must revert to normal mode to use the top buttons as they do not appear in full screen mode.
  • Insert custom character: Allows you to choose from a list of commonly used characters, such as ¢, ¤, and ‰.
  • Emoticons: Some faces to use to give your text that extra zing
  • Remove Formatting For those who work in code, this is a useful tool to remove all unnecessary formatting code to make the html clearer and easier to edit.
  • Print Click to open the Print dialogue box with the regular printing options for your printer and operating system.

NB: You must select Make Active for the version when you have finished editing or else the changes will not appear on the live site.