Creating Hyperlinks In Adobe Dreamweaver

Posted by Bertie Howard | Posted in Web Development | Posted on 30-04-2010

0

Most Dreamweaver training courses will show you how to create hyperlinks. HTML links or hyperlinks are one of the cornerstones of interactivity allowing users to move from one place to another within a web site. Links can be attached to both text and images. To attach a link to text

1. Select the text.

2. Click the Browse icon next the Link box in the Property Inspector.

3. Locate and then double-click the file to which you want to link.

Any text you convert to a hyperlink will change appearance and become blue (with underline) or to the link colour specified with the command Modify – Page Properties. CSS styles can also be used to change the appearance of links and to exploit Internet Explorer’s Hover feature whereby the link colour can be changed when the mouse rolls over it. (See the section on using CSS styles in Unit 5: working with text.)

The Browse and point to file icons are especially useful ways of creating links since they minimise the risk of errors. However, if the file to which you want to create the link has not yet been be saved to disk, these methods cannot be used. To create a link manually:-

1. Select your text.

2. Key in the URL in the Link box in the Property Inspector.

3. Press Enter.

Another useful way of defining a link is to use the point-to-file icon, located next to the Link box in the Property Inspector (to the left of the folder icon).

1. Reposition the Files and Document windows as necessary until they are next to each other.

2. Select the text.

3. Drag the point to file icon into the Files panel directly onto the file to which you want to link.

You can also use an image file as a link.

1. Click once on the image to highlight it.

2. Click on the Browse icon next the Link box in the Property Inspector.

3. Find file to which you want to link to and then double-click on it.

Needless to say, the point-to-file and manual link creation techniques can also be used with images. Images which have been hyperlinked can normally be distinguished from other images by a border which appears around them in a colour which matches the link colour for that page. Dreamweaver suppresses this border by setting the border attribute of the IMG element to zero. If, for any reason, you wish to have a border around a linked graphic, in the Property inspector, change the zero to one or more pixels.

If you would like to learn more about Dreamweaver training courses, visit Macresource Computer Training, an independent computer training company offering Dreamweaver training courses in London and throughout the UK.

Related posts:

  1. How Adobe Dreamweaver Handles Cascading Style Sheets Because of its ability to separate design from content, Cascading...
  2. The Best New Additions To Dreamweaver CS4’s List Of Features Dreamweaver's New Related Files facility...
  3. Developing Client-side Content With Adobe Dreamweaver Adobe Dreamweaver is a multi-purpose web development tool aimed at...
  4. Working With HTML and XHTML in Adobe Dreamweaver CS4 HTML is a markup language used to create web pages...
  5. How Dreamweaver CS4 Speeds Up The Web Development Prcocess If you have ever wanted to build your own website,...

Related posts brought to you by Yet Another Related Posts Plugin.

Write a comment

Anti-Spam Protection by WP-SpamFree