Using Dreamweaver
by Vivienne Trulock
Users of this site also found these sites useful
Dreamweaver MX Tutorial
Created and designed by Vivienne Trulock for ilikecake, 2005
Hyperlinks
The outstanding feature of web pages, are the hyperlinks that enable the user to jump from one part of the text to another.
Exercise - make your first linked pages
Type in 'Page 1' onto your page, so that we can identify the page. Highlight 'Page 1' and make it into a level 1 header.
Go to the next line and type in 'Go to Page 2'. The words 'Go to Page 2' will become the hyperlink to page 2. Save the file (File > Save) as page1.htm, to your site folder.
create second page
The next stage is creating page 2, because we can't create a hyperlink to something that doesn't exist. To create page 2, go 'File > New' and type in 'Page 2', into the page. Make the text into a level 1 header in the same way as before.
Save this as Page2. To create the actual hyperlink itself, open Page 1 again.
make links
Highlight 'Go to Page 2' with your mouse and click on 'Modify > Make
link' or right-click and select 'Make link' or
click on the browse folder on the properties window. Browse to find Page2.htm
and click it. (Don't type in the name of the file - you may forget
to type in the .htm extension)
You could also have clicked on the pointer tool to the left of the folder
and dragged it to page2.htm in the site window. You will notice that the
text is now blue and underlined. This is the standard convention for hyperlinks.
check links
The next thing to do is to check that your hyperlinks actually work.
To do this you'll need to view the page in a browser. You can't check
links in Dreamweaver by clicking on them, as Dreamweaver is not a browser.
First you need to save the changes to your document (File > Save) To
look at your page in a browser, either press the F12 button on your keyboard,
or go to 'File > Preview in Browser'.
You'll now be in either Internet Explorer or Netscape Navigator. It is only here that you can click on your link to make sure it works. Try it! Page 2 should now appear. Easy eh?
You have now made your first web-page. Congratulations!
Exercise - Do it yourself
The next step is to make a link back from Page 2 to Page 1. Try this yourself, using the previous exercise to help you.
Just to practise those again, do the following exercise:
Exercise - more of the same
Make another page - page3, and link it to both pages 1 and 2, then link pages 1 and 2 to 3.
You now know the basics of web-design. All web-pages depend on the ability to move from one page to another. Most web-pages have several pages all linked to each other, and all linked to the first page, which usually has a menu on it.
Types of links
Relative links
The links you have made in the exercise above are all 'relative links'. That is, the files are all linked relative to each other. If you check your links above, the link from page 1 to page 2 looks like 'page2.htm'. All internal site links should be relative links. When moving or renaming pages or images that are relatively linked make sure to do it inside the site window in Dreamweaver and update the links when prompted. It you rename or move images outside Dreamweaver, your links will be broken.
Absolute links
Absolute links are normally used when linking to another site. To link to google you need to type in http://www.google.com into the link window in Dreamweaver. This is an absolute link because it does not matter where the page you are linking from is.
Anchors
There are times when you don't want to link to another page, but you do want to link to another area in the same page. How do you do it? Easy, you use anchors. In this exercise we will create links from the top of the page to the end, and back up to the top.
Exercise - using anchors
The first thing you need to do, so that you can see where your anchor
is, is to turn on your invisible elements.
Now insert your anchor at the top of the page: 'Insert > Named Anchor'
Name your anchor with a useful name. Call it 'top'.
Write the line 'This is the Top' in at the top of the page, and also
the line 'Click to go to the end of the page'.
Press your enter key until the line 'This is the Top' scrolls off
the screen. Now insert another Named Anchor, at the end of the page.
Call it 'end'.
Type in the line 'This is the End' onto the page and the line 'Click
to go to the top of the page'.
make links
Highlight the line 'Click to go to the top of the page' and in the properties
window type in '#top' in the link box in the properties window.
Next, highlight the line 'Click to go to the end of the page' and in
the properties window type in '#end' in the link box.
Save the page and view it in the browser to check your links.
Exercise - using anchors to create linked menu
Open the marketing essay. This document has a menu at the top detailing 8 sections of the article. Create the links, using anchors, which will link the menu at the top, to each of the relevant sections. At the end of each section create a link so that the user can easily access the menu at the top of the page.
Exercise
Try to link to an anchor in another page. You'll need to link to the page first, as normal and then manually add in the #anchorname to the end of the link.
Email links
E-mail links can be a convenient way of letting your readers contact you. Once the link is clicked on, the email program is activated and the compose page opens up with the email address already inserted. This only work if the user has outlook express or similar email editor configured ontheir system.
Exercise - e-mail links
To insert an e-mail link, just go to 'Insert \ Email Link'.
The text you want to have visible on the page goes into the text-box.
The email address is then inserted into the email box. Click OK. This then becomes the active link.
