LINKS
You already know the HTML code required for creating links:
<a href="http://domainname.com/foldername/file.html">some text or image<a>
To create text or image as a link in Dreamweaver, select it, and type the URL into the link field in the Properties pane.
If you're linking to an external file—someone else's web site—type in the whole address, starting with "http..." (Or go to the page on the web, copy the URL and paste it in the Link field.)
Typing the whole address is called an absolute URL. It's absolute because there's no doubt that, unless someone took that page off the server, the link is going to take you there. Make sure to decide whether you want the new page to open in a new browser window (_blank), or the same window (_self) from the Target field.
If you're linking to another page within your site, you can type a relative URL. It's relative because it's part of your site, and the link information might be as simple as typing "nextpage.html." I get nervous trusting myself to type the right path. Luckily, you can use either of two built-in methods to do it for you.
Either click on the folder icon to browse through your site folder and select the HTML file you want the link to open. Or, click and drag the registration mark icon to the file you want to link to, in the Files pane.
Of course, that file has to exist before you can link to it. It's not a bad practice to create blank Dreamweaver documents for all the pages you will need, saved with the file names you've planned, so you can create links right away. If you're using a template for all the pages, you just have to update the links on the template file.
To create placeholder HTML files, bring the Files panel forward and control-click on the folder in the local site where you want to save the HTML file. Choose New File from the contextual menu. Give the file a name. Then double-click on this new file and add some text content to remind you what will go on this page when you get to it.
Once you've defined a site, Dreamweaver will update the links to any files you move around using the Files pane. If, however, you move them around in your site folder on your hard drive, you'll have to update the links by hand. Not hard, but no fun.
EMAIL LINKS
To create an email link, select the type or image you want to act as a link and instead of typing an absolute or relative URL, type
mailto:username@somewhere.com
Note that there are no spaces involved in this code, just as there are none in a URL.
If you'd like to specify a message in the subject field of an email, type
mailto:username@somewhere.com?subject=Your subject here
Obviously you'd change "Your subject here" to something more appropriate. Note that there are no spaces between the email link and the additional code.
ANCHORS
Documents that contain a lot of information are often broken down alphabetically, or by topic. At each break point, you can place a named anchor. Then, back at the top of your document, you can create a set of links that use these anchors to jump to various portions within the document. If you've been reading any of these lectures online, you should be familiar with anchors.
First, place your cursor next to the word you want to act as an anchor. Click on the Named Anchor icon in the Common panel of the Insert panel (it looks like an anchor!), or use the Insert menu. You'll get a dialog box asking you to name the anchor. Make sure you write the name down so you don't forget it! When you click OK, you'll see a little golden anchor icon pop up where your cursor was. (If you don't see it, you can select View > Visual Aids > Invisible Elements.)
To make it all work, select the text you want to link to the named anchor you made, and in the link field of the Properties pane, type the name of the anchor, preceded by a number sign (#).
#this
In some cases you may want to link from one area in one document to another place in a second document. You do this exactly the same as for a named anchor, except you need to specify the document as well as the anchor name: browse to the file (using the folder icon next to the link field) and select it. Once the link path is showing, just add #anchorname to the end of it (no spaces!).
..foldername/filename.html#this
IMAGE MAPS
Image maps are pictures that have hot spots attached to them, with links attached to each hot spot. As someone moves their cursor over a hotspont on the image, it will change into a finger-pointing hand icon.
Creating an image map is simple in Dreamweaver. Start by inserting your image file. While it's selected, hot spot tools will appear in the bottom left of the Properties pane. Click on a tool and draw a shape over the portion of the image you want to act as a link. Use the arrow tool to adjust the size and shape of your hotspots if needed.
To draw an irregularly shaped hotspot, use the polygon hotspot tool.
When you're done drawing the hotspots, you must select the arrow tool to stop drawing.
Each blue area on your image represents the opportunity to create a link, which you should do; there's nothing more frustrating than clicking with the little finger-pointing hand icon and have nothing happen.
To add link information to a hotspot, select it with the arrow tool and either type the link information into the link portion of the Properties pane, use the folder icon to browse to the file you want, or drag the registration/target icon to the appropriate file in your Files pane.
When you first select a hotspot, the link portion has a # sign in it—remember this is used for named anchors. If you are linking to another document (and not a named anchor) delete the # sign before typing your link information.