Why use Links?

Links are a great feature of the web. They easily let you "jump" to new information which may be in the same site or in a completely different one - all you have to do is click with your mouse. The text you click on is known as hypertext. It's normally easy to spot because it's underlined or changes colour when you move your mouse over it. Your mouse cursor may also change to a hand shape when you move it over a link. Luckily, links are really easy to make in Dreamweaver.

Making Links

To see how links work, let's first make some pages to link to. Create two new pages and name and save them..

Remember that to make a new page choose File - New To name a new page and colour it's background choose Modify - Page properties - and fill in the title/background colour, click OK. To save a page choose File - Save as - type in the page name and click save.

Making links to new pages in your site - local links

1 - On your home page type a few words which, when people click on them, will take them to your new pages, e.g. on a pets web site, you could type cats to take visitors to a cats page and dogs to take them to a dogs page. These words will become your links.

2 - Highlight your first link text by dragging the cursor over it.

3 - In the properties inspector, click the small yellow folder next to the link box. (NB To display the properties Inspector select Properties from the Modify menu)

4 - Click the page you want the link to go to and press select.

5 - Do the same thing for your next link.

Look at your page in the browser and check the links work (press the F12 key)

Making links to other web sites - external links

It's just as easy to make a link to a page in another person's web site.
Follow steps 1 - 3 above, but this time in the link box type the full address of the site you want to link to.
So if you were linking to WebGenies you would type http://www.webgenies.co.uk

Making links to other places on a web page - anchors

It's even possible to make a link to that lets visitors jump to another place on the same web page. These links are often called anchors. Anchors are often used on long web pages that contain lots of information split up into sections. They are also used at the bottom of a web page to take visitors back up to the top quickly without them having to scroll up.
If you are viewing this document on the web look at the go to top of page link below - that's an anchor!

To insert an anchor:

1- Highlight the text or picture you want the visitor to jump to

2- From the Insert menu select Named Anchor (or in Dreamweaver 4 from the Insert menu select Invisible Elements and then Anchors)

Try inserting some anchors on your pages.

Changing link colours

1 - From the Modify menu select Page Properties. The Page Properties box will appear .

2 - The boxes marked Links, Visited Links, and Active Links control the colours of these links on the current page. Visited links are links that have already been clicked on, and Active links are links that are being clicked on at that moment.

3 - Change the colour of each type of link by clicking on the colour button beside it and selecting a new colour.

4 - Preview your page in the browser (F12) and click on the links you've set up. Can you see how the colour of a link changes while it is being clicked (the active link colour), and after it is has been clicked (the visited link colour)? - You'll need to go back to your home page to see the change to the visited link.

Using pictures as links

You don't have to use text to make links, pictures will work too.
To make a picture into a link:

1 - Select the picture you want to make into a link

2 - In the properties inspector click the small yellow folder next to the link box .

3 - Click the page you want the link to go to and press select.

If you want your image to have a border that changes colour like the normal underlines do on text links, select the image and type a number in the border box in the properties inspector. Most image link borders have a value of 1or 2.

E-mail links

Making email links is very easy too.
1 - Highlight the text or picture you want to make into an email link.

2 - From the Insert menu choose E-mail Link. The email link box appears.

3 - The text you highlighted in step 1 will appear in the text box. You can leave this as it is or change it if you want.

4 - Type the full email address in the e-mail box e.g. hsimpson@horbury.wakefield.sch.uk and click OK

Now, when a visitor to your site clicks this email link, their email programme will open up with the email address already inserted, ready for them to type a message, cool eh?

Recap of Work Sheet 6

• We learnt why links are very useful on the web
• We inserted a link to another page in our site and to a page in an external site.
• We changed the colour of our links and reviewed them in the browser
• We inserted an email link in our web page