CREATING LINKSYou already know the HTML code required for creating links:
|
||||||
To create text or image as a link in Dreamweaver, select it, and type the url into the link field in the properties panel. 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 box in Dreamweaver.)
|
||||||
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, or “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, so even easier, click on the folder icon to browse through your site folder/disk and select the .html file you want the link to open. Best yet, click and drag the registration mark/target icon to the file you want to link to, within the Files panel. 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 your pages, saved with the file names you’ve planned, so you can create links right away. Otherwise, you have to create the document and then open and create links in all the other pages you’ve already created. You get the picture. Because you’ve defined your site, Dreamweaver can update the links to any files you move around using the files panel. If, however, you move them around in your site disk/folder, you’ll have to update the links by hand. Not hard, but no fun.
|
![]() |
|||||
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, insert your email link from the common panel of the insert bar at the top of your document. (The email icon looks like an envelope.) If you forget to specify a target, the default is “_self.”
|
![]() |
|||||
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. First, place your cursor next to the word you want to act as an anchor. Click on the anchor icon in the common panel of the insert bar (it looks like an anchor). You’ll get a dialog box asking you to name the anchor. Make sure you write the name down! 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 panel, type the name of the anchor, preceded by a number sign (#). 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!).
|
|
|||||
IMAGE MAPSImage maps are pictures that have hot spots attached to them, with links (usually) attached to each hot spot. As someone moves their cursor over the image, it will change into a finger-pointing hand icon, indicating a link, whenever it passes over a hot spot. 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 panel. Click on a tool and draw a shape over the portion of your 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 with your shape, you must select the arrow tool to stop drawing (this is an important step!). 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 type the link information into the link portion of the properties panel, use the folder icon to browse to the file you want, or drag the registration/target icon to the appropriate file in your Files panel. 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 the top of another document (and not a named anchor) delete the # sign before typing your link information.
|
|
|||||
JUMP MENUSThese cute little link devices create drop down menus that act as links, but you can’t really design them. Switch your insert bar to the “forms” tab and click on the jump menu icon. You’ll get a dialog box where you can list the contents of your menu and attach the relevant urls to each item. Use the + button to add an item, type the name for it, and either type in or browse to the file you want to link to. If you type things in the wrong order, select the item you want to move and use the up and down arrows to put it where it belongs. When you’re finished, click OK. What you see in your document isn’t very interesting, but if you preview it in your browser, you can see how (and if) it works. To edit your menu, select it and select the "list values" button in the properties palette.
|
|
|||||

















