Search

»

ID #1118

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.

IMPORTANT INFORMATION

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.

Click on the Browser Server button to view all the images you have available to add to your web page.
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.

IMPORTANT INFORMATION

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.

The Preview window shows how your image will look next to the text.
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.

Tags: sitewizard editor

Related entries:

Last update: 2009-06-26 14:53
Author: SiteWizard Support
Revision: 1.2

{writeFacebookMsgTag} {writePrintMsgTag} {writeSend2FriendMsgTag} {writePDFTag}
Rate this FAQ

Average rating: 0 (0 Votes)

completely useless 1 2 3 4 5 most valuable

You cannot comment on this entry

SiteWizard : Lyndean House : 30-34 Albion Place : Maidstone : Kent : ME14 5DZ Tel No.08450 60 88 60 : Fax No.08450 60 88 61
© 1996- www.SiteWizard.co.uk - SiteWizard is a Registered Trademark (Patent Pending)
Company Registration Number 03454062. Registered in England. VAT Number 683830804.