How to Make Pictures and Text into Links

This chapter takes you through the process of creating links on your website as well as making existing pictures and words into clickable links. All this is covered in our comprehensive Dreamweaver course in Brighton, Sussex.

Getting rid of the border around a linked image

Linked Images can offer a nice alternative to the same old generic and dull text most that is often used. However when you create a linked image a browser will automatically create a border around it. This can be easily rectified as follows:

Click on and select the image in question. Go to Windows > properties to get the properties palette to appear. When you have the properties palette in front of you, you can then alter the size of the border by changing the number in the border text box. This number represents the thickness of the border, so if you change it to 0 then the border will no longer be visible; similarly if you wished to make the border bigger then you would make the number in the border text box higher.

Introduction to URLs: Relative and Absolute Links

The web address of any page on your website is a type of “URL”, or “Uniform Resource Locator”.
URL’s can be either absolute or relative.  An absolute URL specifies the full address of a web page or file.  For example, “http://www.siliconbeachtraining.co.uk/index.html“

A relative link can be used to link to other pages within your own website.  Rather than using the whole URL you can just use “index.html”.  The files must be in the same site and also in the same folder otherwise this won’t work.  Browsers assume that if a relative link is used the page or file it is linking to is in the same folder in the same website.

Rollovers:

To create a rollover in Dreamweaver is not difficult. Firstly you will need to export the image and its rollover image from fireworks. When you have done this you will then need to go to the “insert” option in Dreamweaver and then click on “rollover image.” After this you will want to give the image a name, select the images you want from the folder icon in Dreamweaver before submitting a link to the image. After which you will have successfully created a rollover.

Add a comment Read more

Posted by Aaron Charlie in Dreamweaver Tutorial on March 9th, 2009 | No Comments »

Part 5.1: Making your logo into a click-able link to your homepage

Most websites have a logo at the top of the page that when clicked takes you to the home page of the site.  Although it is not compulsory, so many sites have this click-able logo that it has pretty much a convention.  To make your site as user friendly as possible we would recommend that you follow this convention. All this is covered in our comprehensive Dreamweaver training course in Brighton, Sussex.

1: Open Dreamweaver and load your ‘index.html’ page.

2: Click your logo on this page to select it, this will display the ‘Properties’ panel at the bottom of the main Dreamweaver window.

3: In the ‘Link’ field, enter the absolute URL of your site (http://www.example.com).  If you haven’t registered a domain name, it is also possible to use a relative link here (index.html).

We recommend that you use the absolute link here.

4: In the ‘Border’ field in the ‘Properties’ panel enter a value of ‘0’ (zero).  Some browsers put a blue border around images that are links.  Entering ‘0’ here removes this border.

5: Save and publish your web page.  You will notice that when you roll the cursor over the logo it now changes from an arrow to a pointing finger showing that the image is now a link.

Making other images into links

You can use the same method described above to make other images on your site into links.

At the moment ‘index.html’ is the only page in your web site.  You can create images that link to pages that don’t yet exist and make these pages later.  When you click on a link to a page that doesn’t exist your browser will display a ‘404 file not found’ error, this is normal and the error will disappear when the pages are made.

Add a comment Read more

Posted by Aaron Charlie in Dreamweaver Tutorial on March 16th, 2009 | 3 Comments »