Dreamweaver Tutorial - Hyperlinks

Setting up hyperlinks Dreamweaver CS3

One of the most basic skills a webmaster needs to know is how to create hyperlinks, in this short Dreamweaver tutorial we cover just that. Links can be either text or images and by the end of this short tutorial you will be able to create both.

View Dreamweaver basics in video format: Beginners Dreamweaver Tutorial Videos.

Using the Property inspector
Making links in Dreamweaver is a simple but very important task, there are a few different ways in Dreamweaver to create simple hyperlinks, in this tutorial we are going to use the "property inspector" to create our hyper links for us. If the Property Inspector is not visable select Windows > Properties or press Ctrl+F3 to display it.
:
image 01

 To start with we need to create the text or insert image that we wish to use as the link, the image below shows a some simple text . (image 02 )

image 02

After we have created our text or inserted our image all we have to do is select it. (image 03 )
image 03

With our text or image still highlighted enter into the Link field on the property inspector  the page name that you wish the link to. Note :  there are two types of links that can be used, relative and absolute, an absolute link is when you use the full URL such as http://www.amazon.com , a relative link is used when you wish to link to a page that is in the same folder as the document containing the link, there is no reason at all why you can't use absolute links all the time if you so wished. In this example I am using a relative link. ( image 04 )

image 04

You may also like to know that instead of trying to remember the correct name of the file that you wish to link to and then having to type it into the link field you can use the little yellow folder to the right, clicking on this icon will launch a site file dialog box, allowing you to navigate to the file on your local machine. Have you ever wondered how to open a link in a new window? In Dreamweaver it's easy, the little box entitled Target ( see image 04 ) holds the key, click the little dropdown arrow and you are presented with a few different options, the one that you need for this is called _ blank .

Different kinds of links In Dreamweaver
There will be times when you need to create different types of links in Dreamweaver such as a link that will allow visiters to your site to send you an email, and again there are a few different ways to accomplish this, we are going to do it the hard way ( which is not that hard really ).

Create the link that you wish to use to open up the email application when clicked, in the screen shot below I have used a simple example.

image 05

Like we did in the earlier example we just highlight the text and move to our Property Inspector, but this time instead of typing in a webpage address we enter mailto:youremail@somedomain.com ( notice the : after the mailto ) , of course replacing this with real information. (image 06 )

image 06

That's all there is to it, you can now link to web pages and create email links in Dreamweaver.