Northlite Designs

Getting started with GoLive CS

| Take a class  | Reviews | Photos | Good Thunder | Terry Pratchett | Tutorials |

Home
Photos
Classes I Teach
Tutorials
Reviews
Good Thunder
Terry Pratchett
About Me
Cards & Prints
SabreQuill Editing
Eclectic Academy
LVS Online
Contact Me

pixelparity.org

 Member of National Association of Photoshop Professionals

 

Setting image options

 

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.)

 

Inspector

 

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.

 

leftLorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. rightLorem 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.

 

Add alt text

  

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.

 

low screen

  

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.

 

left middle 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.

Go to the next page to see how to add text links.

Index 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 Links
GoLive for Dreamweaver Users: Making the Transition

Take a class  | Reviews | Photos | Good Thunder | Terry Pratchett | Tutorials |

Northlite Designs