On the right side of your window should be the inspector. If you don't see it go to Window > Inspector or type ctrl + 1 to open it. There are tabs that let you set the various image options. The Basic tab is first and will be open by default. Notice that the source, or location on your hard drive is already entered for the image you just added to the page. Note also that the width and height are entered as well. These are very important because with this information the browser knows what size of space to leave for the image if it happens to load slower than the text on the page (which is very likely.)

You can also set alignment relative to the text in the line the image is added to there is any. For this image there is not, but often you will want the text aligned to the middle, right or left of an image and to wrap around it. For the logo image leave it at default.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Alt text is very important for making your page accessible to those using text based browsers or screen readers. Type alternate text that describes the image into the box. Name/ID is used in more advanced skills that aren't covered here so you can leave it set at None.

Click the More tab in the inspector. We will be concerned only with the top section of this tab today. GoLive has a trick that saved you a lot of time: you can designate a low quality image to load first that your viewers see as the higher quality image is loading. You can do this in any HTML editor, or when you hand code, but with GoLive simply ticking the box marked Low makes the low quality image for you, adds it to your site, and creates the code to make it happen! So check the Low box, and click the Generate button, and notice the there is now a name in the box: the same as your image with "ls" after it (short for low screen). If you replace the image at some point it will be auto updated with the new low screen image if you check the Auto Update button.

Hspace and Vspace

The Hspace and Vspace entries have to do with leaving white space around an image. Hspace leaves horizontal white space in the number of pixels you specify, and Vspace leaves vertical white space in the number of pixels your specify. On your logo it probably won't matter since the logo is on a line of it's own.

Notice in the right and left alignment examples I showed you a bit ago that the words are removed somewhat from the image. They both have a 10 pixels Hspace value entered.

Image Borders

Adding a border of 0 or leaving it unchecked leaves no border around the image, or enter a value in pixels. In the three boxes below, the left image has no border, the center image has a one pixel border, and the right image has a 5 pixel border.

Link tab

The Link tab allows you to add a link to an image that goes to another web page or another area in the page. We will look at adding image links later in the tutorial.