WebSite 2.0 content management tutorial

1.Startup & Overview   2.Editing Text   3.Editing Photos   4.Formatting

Section 4: Formatting Using the Icon Toolbar

The toolbar allows you to perform more advanced tasks such as inserting images, links etc. An example toolbar is shown below.

What the buttons do

	Cut
	Copy
	Paste
	Paste as plain text	Formatting such as bold, italic, fonts & sizes are usually preserved when pasting text. Use this button to paste text without such formatting.
	Paste from Word	Special options for pasting text from Microsoft Word.
	Undo
	Redo
	Find	Search for text in the page
	Replace	Replace some text with some other text
	Remove Format	Remove formatting from selected text. This can be very useful when pasting text from a formatted source. Also useful for resetting things when it all goes crazy (it happens, unfortunately).
	Bold
	Italic
	Underline
	Insert/Remove Numbered List	Click to change the current paragraph into the first item of a numbered list. Click again to change the current list item into a normal paragraph.
	Insert/Remove Unordered List	As above, except for bulleted lists.
	Decrease Indent
	Increase Indent	Indent current paragraph. If used when the cursor is in a list it turns the list into a sub list.
	Left Text Align
	Center Text Align
	Right Text Align
	Justify Text Align
	Source	Displays the HTML source of the current page. Very useful if you understand HTML, utterly bewildering if you don't!
	Insert/Edit Site Link	Insert a link to another page on the current site. (Only those pages on your site enabled for WebSite 2.0).
	Insert/Edit Link	Insert a link. See separate section below for full details.
	Remove Link	Removes the currently selected link.
	Insert/Edit Image	Insert a image. See separate section below for full details.
	Insert Special Character Format	Insert accented and other special characters that are not available on a standard keyboard.
Format		Set the format of the current paragraph. See separate section below for full details.
Size		Set the size of the selected text. Use Format instead.
	Text Color	Set the color of the selected text. Use sparingly.

Inserting links

First highlight the text that you wish to turn into a link (the 'clickable' bit). Next click the Link button on the editor toolbar which will make a small window pop up. You now have several choices depending on what kind of link you wish to create:

• To make a link to another website select 'URL' for Link Type, 'http://' for Protocol and then type or paste the web address into the URL text box.
• To make a link to an email address select 'Email' for Link Type and type or paste the email address into the Email Address text box. You may optionally specify the subject and the body of the email message.
• To make a link to a file on your computer you first need to upload the file to your website. To do this select 'URL' for the Link Type and click on the Upload tab. Click Browse and choose the file to upload. Next click Send it to the Server and wait for the file to be uploaded. This may take several minutes especially if you are on a slow internet connection or you are uploading a large file. Note you can only upload one file at a time and the maximum size of individual files you can upload is limited. This limit will probably be 1MB, 2MB or 8MB. Ask your webmaster. Once the upload has completed you will be notified and brought back to the Link Info tab where the appropriate values will have been filled out for you.
• To make a link to a file which you have previously uploaded select 'URL' for the Link Type and click on Browse Server. A new window will pop up displaying a kind of file system browser. Use this to navigate to the file you wish to link to. Click on the file name and you will be brought back to the first pop up window where the appropriate values will have been filled out for you.

When you have finished click 'OK' and your link should appear in the text. Remember that you need to select the text to turn into a link before creating the link itself.

Using the Format drop-down

It is very important to use this. Normal text should use the 'Normal' format and headings should always be set using the 'Heading 1', 'Heading 2' etc. formats rather than the Font size and Bold, Italic, Color etc. buttons. There are several reasons for this:

1. Improves consistency throughout the site since all headings look the same.

2. Improves search engine ranking since the search engine understands the document structure better.

3. Improves accessibility since sight impaired users can listen to a list of headers in the current page and skip straight to the relevant section.

4. Allows the webmaster to change the style of every heading throughout the site in one place using stylesheets.

Saving your changes

Below the content area are four buttons:

• The 'Preview' button allows you to preview your changes in context without saving them.
• The 'Submit' button saves your changes and takes you back to the list of pages.
• The 'Apply' button saves your changes but allows you to continue editing.

• The 'Cancel' button discards all changes since the last save and takes you back to the list of pages.

Inserting images

Place the cursor where you wish for the image to appear. Next click the Image button on the editor toolbar which will make a small window pop up. You now have several choices depending on where the image that you wish to insert is currently stored:

• To insert an image which is on your computer you first need to upload the image to your website. To do this click on the Upload tab then on the Browse button and choose the file to upload. Next click Send it to the Server and wait for the file to be uploaded. This may take several minutes especially if you are on a slow internet connection or you are uploading a large file. Note that you may wish to resize and/or change the file format of the image before you upload it. Dimensions over about 640x480 pixels are probably too big and the only file formats supported by the web are JPEG, GIF and PNG. Once the upload has completed you will be notified and brought back to the Image Info tab where the URL, Width & Height will have been filled out for you.
• To insert an image which you have previously uploaded click Browse Server. A new window will pop up displaying a kind of file system browser. Use this to navigate to the image you wish to insert. Click on the file name and you will be brought back to the first pop up window where the URL, Width & Height will have been filled out for you.

It's a good idea to type something descriptive into the Alternative Text box as this will make the image more meaningful to search engines and sight impaired users.

You can change the width and height in pixels but note that this does not change the size of the image itself, only the size that it is displayed at. Changing the size in this way usually degrades image quality and is generally discouraged in favor of resizing the image in an image manipulation program prior to uploading it.

You may also set values for an image border and horizontal & vertical spacing. Finally you can set an Alignment to alter the way text flows around the image.

Once you have finished click 'OK' and the image will appear in your page.

Was this helpful?  Do you have any suggestions for improvement?  Please take a minute and let us know.

---

Next page: Web 2.0 blog & news editing
Top

© 2008 RisingLine — Boise, Idaho | Legal | Terms of Service | Client Login