An object, image, or text selection can be linked to a document. Select the item you wish to link and fill in the Link field on the property inspector. Click on the file folder to the right of that field to select a local document. Type in the URL to link to a remote document. The URL MUST begin with http:// or else Dreamweaver will search for file with the name you gave for the link.
You should provide a document-relative path to a linked local document. That is, the location of the linked document should be specified with respect to the document containing the link. If the two documents are in the same folder, you need only provide the name of the linked document. If the document is in a subfolder, the link will be specified as <subfolder name>/<filename>. (Note the forward slash separating the subfolder name and the file name for the linked document.) If you browse for the file, Dreamweaver will resolve the path for you. It may require you to copy files into the directory of the document containing the link.
Using document-relative paths simplifies porting of websites from one machine to another. As long as the folder structure is preserved in the ports, all defined links will remain unchanged. The alternative to document-relative are absolute paths which are defined independent of the location of the document containing the link (e.g., www.cs.colorado.edu) and root-relative paths which are defined relative to the root folder of the site.
It is often useful to link to a specfic spot in a large section of text. Such a link is defined by means of named anchors.
To define an anchor, click on the place in the text where you want to link, then do
Type in a descriptive name for the anchor. A small picture of an anchor will appear at that location.
To link to an anchor, select the item to be linked. In the Link field of the Property Inspector of that item, enter the path to the document followed by /#<anchor name>. That is, if you wish to link to the anchor Middle in the document FunStuff.htm, the link would be FunStuff.htm/#Middle. (The latter example assumes that FunStuff.htm is in the same folder as the document including the link.)
|
Download an HTML file that includes a large section of text. Place named anchors at various points in the text (top, middle, bottom and others of your choosing.) In your document, create links to those anchors. Preview using a browser and observe how those links work. |
Suppose you wish for visitors to your site to send you an email. You can provide a link to an email window by typing mailto:<your email address> in the Link field of some item on a page. For example, click here to send email to your instructor (or Not!). In this example, the link to "here" is defined as mailto:jessup@cs.colorado.edu.
|
Select an item in your page and link it to mailto:<your email address>. Preview in a browser, and send yourself some email! (Don't include the <>'s in the path! They just signify a computer variable.) |
A fun feature of Dreamweaver is the hotspot which allows you to link different parts of an image to different locations. If the image is a photo of a clown, you can click on his nose to visit one wepage and on his hat to visit another if the nose and the hat are defined as hotspots.
To create a hotspot
A hotspot is implemented by selecting a portion of an image then linking to it. To begin, select an image then click on the arrow in the lower right corner of its Property Inspector to show the image map properties. In the Map field, provide a name for the hotspot you will create.
Below the Map field, click on the rectangle, the oval, or the polygon to specify the shape of the hotspot. For the rectangle or oval, click in the image and drag the cursor to define the shape of the hotspot. For the polygon, click to define the vertices of the polygon--they will be connected in the order defined.
Click on the hotspot to select it. In the Link field of its Property Inspector, supply the location of the document to be linked to the hotspot. In the Target field, supply the name of the window where the linked file should open. (Some options are provided in the pulldown menu.) In the Alt field, provide text that appears in place of the hotspot in text-only browsers.
To link to a hotspot
The link to a hotspot is identical to the link to an anchor: <document name>/#<anchor name>.
|
Download an image and insert it into a document. Define rectangular, oval, and various polygonal hotspots in that image. Preview in a browser to observe how they work. |
For more information about links and anchors, see Help > Using Dreamweaver > Links and Navigation. For more information about hotspots, see Dreamweaver Help > Inserting Images > Creating image maps.