Absolute Addresses and Text Links

Using a file similar to imagedemo1.html discussed in Section 3, we add a link to the web site of the photographer, Bruce Damer. The file is imageandlinkdemo1.html. Figure 4 and Figure 5 show the XHTML code and a Firefox browser rendering.

Figure 4: XHTML Source Code for imageandlinkdemo1.html

Figure 5: Firefox Browser view of imageandlinkdemo1.html

Line 12 of Figure 4 contains the anchor tag:

		
		<a href="http://www.damer.com/">Bruce Damer</a>
		
		

If the page to which you are linking is not in your web site, then the value of href needs to be the complete URL. This includes the protocol, http:. Pnly giving www.damer.com will not suffice in order for the link to work correctly.

Absolute Addresses and Image Links

Links, as well as text, can also be images. imagelinkdemo1.html shows a simple example where the Google logo is used as a link to Google's web site. Figure 6 and Figure 7 show the XHTML code and a Firefox browser rendering.

Figure 6: XHTML Source Code for imagelinkdemo1.html

Figure 7: Firefox Browser view of imagelinkdemo1.html

imagelinkdemo2.html is an additional example, where the image is a "thumbnail" (a smaller version) of the original image. The img tag also contains a longdesc attribute with the attribute value specifying a file piestats.html. All three files reside in the same folder/directory of the XHTML file. As noted above, this can be very useful to making the data in the figure accessible to those will visual difficulties.

Relative Addresses

We now move to this situation where you want to specify links to files on your own web site. In our example, Figure 8 shows the folder/directory structure we will be using.

Figure 8: Folder/Directory Structure for Relative Addressing Examples

Figure 9 shows the relevant segement of XHTML source code for browserusage_table.htm .

Figure 9: Segment of XHTML code for browserusage_table.htm

Named Anchors

We have now discussed the following:

Our example is a snippet from William Shakespeare's Julius Caesar, taken from Project Gutenberg. Let's say that we wish to place a link at the top of the file that takes the user directly to the beginning of Mark Antony's oration, the familiar, "Friends, Romans, countrymen, lend me your ears!...". caesar_snippet.html shows the finished result.

First, we need to place a marker at the location to which we wish our link to go. Next, we need to specify the link to that marker. This marker is often called a "named anchor." Some HTML generators will also call it a "bookmark."

The code shown on line 49 of Figure 10 shows the XHTML code associated with specifying the marker/named anchor.

Figure 10: Specifying a Named Anchor

You might notice that line 49 also contains one other XHTML tag about which we have not talked, <br />. This "break" tag (and empty tag, note the "/" at the end) produces a new line in your browser window. The difference between the break tag, <br />, and paragraph tags, <p> ... </p> is that the default settings of most browsers display paragraph breaks with a blank line between paragraphs, whereas the break tag only displays as a new line without a blank line between the lines where the tag appears.

All that remains is to move to the top of the file and place the link to the named anchor specified in line 49. Line 14 of Figure 11 show the link specification.

Figure 11: Specifying a Link to a Named Anchor

Images

To insert an image using Dreamweaver, you can use the menu bar and Insert/Image and then provide the image name and path when the "Select Image Source" dialog (see Figure 12) box appears.

Figure 12: Select Image Source Dialog Box

Alternatively, you can also use the Insert Toolbar by clicking on the drop-down menu button next to the button, as shown in (Reference)

Figure 13: Inserting an Image from the Insert Toolbar

Relative and Absolute Addresses/Text and Image Links

Specifying links using Dreamweaver is simply a matter of selecting the text or image you wish to make a link and completing the "Link" field in the Properties Panel. Since the Properties Panel differs depending on context, there is one for the text selection as shown in Figure 14 and one for the image selection as shown in Figure 15.

Figure 14: Inserting Text Link from the Properties Panel

Figure 15: Inserting an Image Link from the Properties Panel

Named Anchors

Once the "named anchor" is specified as discussed in Section 8, the link specification is done as noted in the previous section. Once the cursor is at the place where the named anchor is to be placed, you can use Insert/Named Anchor from the menu bar or the button on the Insert Toolbar as show in Figure 16

Figure 16: Inserting an Image Link from the Properties Panel

Image Maps

We will begin with the pie chart, piedemo1.html, we discussed earlier when we were demonstrating relative addressing of links in Section 7, using the directory structure shown in Figure 8.

In this case, however, we will construct links such that when the mouse is moved over the slices of the pie chart corresponding to IEt and Ffox, there will be a link to the corresponding line chart for the January, 2006 to August, 2006 usage for a particular browser.

In order to do this, while in Dreamweaver, select the image and select then click on the "irregular polygon hotspot" on the Properties Panel as indicated in Figure 17.

Figure 17: Selecting the "Irregular Polygon Hotspot" in the Properties Inspector

Next click around the edges of the slice of the pie for which you wish to define the link, as shown in Figure 18

Figure 18: Selecting the "Irregular Polygon Hotspot" on the Image

Figure 19: Completing the Link for the Pie "Hotspot"