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

 

Adding image links

 

I am sure you've seen some pages that use an image to link to either a larger image or another web page altogether. These smaller images are called thumbnails and we will add one now so you can see how to use an image as a link.

Very often as you complete homework for various classes you'll have a variety of assignments and you may wish to use this technique. You can also use it for things like lining your personal logo back to your regular web page.

This is the logo I use on all my web pages to link back to my main site. I have several sites but they are all tied together on the main site at Northlite.net.

First, add the image you want to use as an image link to the site as we did before.

Note: When you add images as you work to the images folder we made to contain them, the site window does not automatically reflect the addition of new files. Right click on a blank area of the site window and choose Refresh View. This will force GoLive to add any new pages or images you have added to the web-content folder. Then you can drag and drop your image from the Site window to the page.

Now that you have your image on the page, with the image selected, add alt text to your image using the Basic tab on the Inspector, and set alignment if you wish.

 

Northlite designs inspector

 

Click the More tab, and add any vertical or horizontal white space necessary for the image. Add a Low Screen image if you desire. If you don't want the image outlined as a link, then make sure to click the Border box and enter 0.

 

inspector

 

Click the Link tab. Type the link into the link box. If it is in another site, or on another server you will need the complete link beginning with http://. If it is a page that is in the same folder as this one you can use the format mypage.html. Remember that HTML is a very specific and literal computer language. The server will not be able to find the page unless the path is correct. You can also click the folder icon on the right side of the link box and choose the file. GoLive will then write the link for you.

 

inspector

 

 

Preview tab 

  

In the document window, click the Preview tab. In the Layout tab, where we have been working, links don't work, so you won't be able to preview the link there. Switching to the preview tab lets you try the link. Now when you hover the mouse over the image you will see the pointer indicating it's a link, and if you click you will be taken to the page.

Click the Layout tab again to get back to the Layout view and the page you are working on. Your page should look similar to this one.

 

page

 

 

Go to the next page to see how to add a horizontal line to divide your page.

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