2.8 Inserting & Managing Images

Now that you have included the contextual content of your website, you can, if you choose to, add images to the page to make the information more appealing. A well-placed image can go a long way to increase the overall attractiveness of a website.

Before you can insert an image onto your page you must first upload the picture into the online server space allocated for your images. For more information on this please read the Image Store section of this guide.

Although you can upload an image with any dimensions, we recommend that you resize the images to the exact size you would like them to appear on your site using photo-editing software.

Inserting an image onto your page

1. Click on the page where you would like the image to appear.
2. Click on the Insert/Edit Image button on the toolbar.
3. In the pop-up menu that appears click on the Browse Server button which is to the right of the URL input box.
4. This will open the Image Library in a new pop-up window.
5. Find the image you would like to insert and click on its filename.
6. This will now take you back to the original pop-up window. In the preview window, you'll now see the image you selected along with some sample text.
7. If you are happy with how the image looks click on the OK button.

Figure 2.13 Click on the Browser Server button to view all the images you have available to add to your web page.

Changing the parameters of an image

Now that you have included an image you can go back and change any of it settings by Right Clicking your mouse over the image and selecting Image Properties in the pop-up menu. The list of features you can change or add to the image are given below.

Alternative text
This option allows you to give the image some text that will show if the picture doesn't load for any reason. The text will also appear when you hover over the image with your mouse. It's always a good idea to give your images some alternative text as Search Engines take notice of whether the information they contain is relevant. This text is also read by sight-readers and browsers created for the partially sighted.

Width and height
The width and height parameters allow you to set the dimensions of the image as it appears on your page. You'll notice that when you change the height of the image, the width will maintain the same aspect ratio (e.g. if you double the height of an image the width will double as well). This is because the ratio has been locked. If you would like to be able to set the height and width independently, click on the blue closed padlock so it becomes unlocked. If at any point you are not happy with the dimensions you have set, just click on the blue circular arrow next to the padlock to return to the image to its original size.

Remember our recommendation is that you resize the images for your site in a photo-editor. This way the quality of an image will be maintained and file sizes will remain low. This means they will download quicker.

Border
This option allows you to set a black border around the outside of your image. The border size is set by a numerical value and the larger the number, the thicker the border becomes.

Hspace
This parameter allows you to set the space that appears to the left and right of the image. If for example you enter the number 5 in this box, a 5 pixel space will be added to the left and right of the image.

Vspace
This parameter allows you to set the space that appears at the top and bottom of the image. If for example you enter the number 10 in this box, a 10 pixel space will be added to the top and bottom of the image.

Align
The options in this drop-down box allow you to set how the image is positioned in relation to the surrounding text. When you have selected one of the alignments, have a look in the Preview box to see how the layout is affected.

Figure 2.14 The Preview window shows how your image will look next to the text.

When you are happy with all your chosen settings click the OK button to apply these changes.

Adding a link to an image

As well as adding a link to a word or block of text, you can also make a specific image a link.

1. Right Click the image you wish to make a link and select the Image Properties option in the pop-up menu.
2. Select the Link tab at the top of the window.
3. If you would like to link to another website then type the web address for the site in the URL box, remembering to include the http:// (e.g. http://www.google.com).
4. If you would like to link to a specific file or page on your website then click on the Browser Server button.
5. This will open the Link Library. Select the file or page you wish to link to by clicking on the file name. This will insert the pathway to the chosen file in the Link URL box.
6. You can now set how the linked item will show up when the image is clicked on. The best two options to select are <not set>, which will open the file in the same window as your website, and New Window (Blank), which will open the file in a new browser window, the second option is particularly good for when you are linking to an external site.
7. In the Preview window you'll see that a blue border has been added to your image. This is added so users can identify that the image has link attached. If you would like to remove this, add 0 to the Border box before saving.

Advanced image settings
These settings should only be modified if you have an in-depth knowledge of how HTML works and are not covered in this guide.

Back to top

2.9 Pasting From Microsoft® Word

If you have written out the content for your site in Microsoft® Word, you can now use the Paste from Word tool in the Web Page Editor to add this information to a page. This tool will attempt to clean your information into a format that is more suitable for the web. It can handle simple presentational elements such has text size, colour and lists, but it may however struggle to convert some of the more advanced features Word can produce. Our recommendation is that you carry out all your design work within the editor and that you should save at regular intervals to avoid any disappointment.

Never paste information straight from Microsoft Word into the page editor. When you do this, Word includes lots of extra code used for presentational purposes. As with all Content Management Systems, this extra code will make your page break. If you have done this and your page shows an error then please contact our support staff.

1. In Microsoft® Word select the text you wish to add to your website and then press the Copy button (Ctrl +C).
2. Open the page you wish to add the text to using the SiteWizard Page Editor.
3. Click on the Paste from Word button on the toolbar.
4. A pop-up box will appear that has a white area in the middle of it.
5. Click in this white area and press Ctrl+V to paste your text into this box. If you would like to remove the text you have inserted then click the Clean Up Box button.
6. Keep the Ignore Font Face definitions selected, the Remove Styles definitions unchecked and hit the OK button to insert the text into your page.

Figure 2.15 The Paste From Word function will clean up your content ready for the web.

Back to top

2.10 Editing The Meta Tag Information For The Page

The SiteWizard Page Editor allows you to set the Meta Tag information for individual pages. This means you can make the information they hold much more relevant, which makes the page search engine friendly. If Meta Tag information isn't specified the default information will be inserted. For more information on this please take a look at the Settings section of this guide.

To edit the information click on the purple Edit Meta Tags & Title button at the top of the screen. This will reveal three boxes that allow you to add a specific title, keywords and a description for the page you are editing. Once you have finished editing you can click on the Hide Tag Information button to make more space in the editing window.

Figure 2.16 Click on the Edit Meta Tags & Tile button to add specific details to your page.

Back to top

2.11 Installing & Using The Spell Checker

The SiteWizard Page Editor now gives you the option of checking your page for spelling errors. This invaluable tool from www.iespell.com is free to use on a personal basis and works just like those found in word processors.

Unfortunately the spell checker option only works with Internet Explorer. If you are using a different browser we recommend that you copy your text into a word processor to check your spelling before you save the page.

Installing the spell checker

1. Click on the Check Spelling button on the Page Editor toolbar.
2. If it is the first time of using the spell checker a pop-up box will appear and inform you that it has not been installed and will ask if you wish to download it.
3. Click the OK button.
4. Another pop-up will appear asking you whether you wish to Run or Save the spell checker file.
5. Click the Run button and the file will start to download.
6. A pop-up box will appear saying that the software has not been verified. Internet Explorer is only warning you of this because you are modifying its settings. It's OK to ignore this warning because the spell checker program is held securely on our own servers and contains no spyware or malware.
7. Click the Run button and the User Licence Agreement will appear.
8. Once you have read this please click on the I Agree button.
9. You will be prompted to select a Destination Directory. We recommend that you keep the pre-selected Destination Folder that has been chosen.
10. Click on the Install button and the spell checker will be installed.
11. A further pop-up will appear asking whether you wish to look for latest updates.
12. Click the No button.
13. The installation complete box will then appear.
14. Click OK.

Using the spell checker

The SiteWizard Content Management System uses a third party spell checker from www.iespell.com which works in a similar way to those found in word processing software such as Microsoft Word. If you haven't used a spell-checking tool before, please follow the instructions below.

1. Click on the Check Spelling button on the Page Editor toolbar to check the spelling of your entire page. Alternatively, if you wish to check the spelling of a single word, highlight it using the mouse before clicking on the button.
2. If there are any incorrectly spelt words on the page the spell checker window will pop-up on the screen.
3. The word the spell checker doesn't recognise will be shown in the Not in Dictionary box and the words it thinks you possibly meant will be shown in the Suggestions box.
4. If you see the correct spelling in the Suggestions box, click on the word to highlight it and then press the Change button. If you would like to change all instances of this word on the page, click on the Change All button.
5. If the spell checker comes across a word that you believe is spelt correctly (e.g. a specific name of a product) you can tell it to disregard the spelling. To do this click on the Ignore or Ignore All button to move to the next word. Alternatively you can add the word to the spell checkers dictionary by clicking on the Add button. This way it will always treat this as a correctly spelt word whenever it comes across it in the future.

By clicking on the Options button the spell checker also gives you the opportunity to adjust all the different settings that it uses. Although you can change these options the spell checker has already been optimised so it isn't necessary to adjust them.

Figure 2.17 The Spell Checker will hunt out any words spelt correctly and offer you an alternative from it's dictionary.

Back to top

Click Here To Read The Image Store Section Of The Guide >>