Dreamweaver in a Nutshell-Dreamweaver in a Nutshell

2.2 Hyperlinks

Naturally, Dreamweaver lets you create hyperlinks (a.k.a. links) that lead to other documents. Links begin with a protocol, such as http, as shown in Table 2-2.

Dreamweaver allows you to create and set links in several ways:

You can insert a link using Modify Make Link, Ctrl+L (Windows), or Cmd+L (Macintosh). This command opens the Select File dialog box in which you can select a local file or enter the link address in the URL field.
You can also select the text to act as the link, and then provide the full address, including the protocol such as http://, within the Link field of the Property inspector, as shown in Figure 2-5. You can drag-and-drop a file into the Link field, or select a file using the Browse button next to the Link field in the Property inspector.
You can right-click (Windows) or Ctrl-click (Macintosh) on a selection in the Document window and choose Make Link from the contextual menu.
If you select an item with an existing link, you can choose Change Link, Remove Link, or Open Linked Page from the Modify menu or the contextual menu.
Any link added to a document is automatically added to the Site list of the Assets panel's URLs category. Links can be applied to the selected item using the Apply button in the Assets panel (see Chapter 6).
Links can also be manipulated in the Site Map window (you can use the contextual menu to access the Link to New File, Link to Existing File, Change Link, and Remove Link commands.) See Section 6.3.2 in Chapter 6 for details.

Figure 2-5 shows a hyperlink in the Property inspector.

All links in a DW document will begin with the file:/// protocol until the document is saved. Save your document before testing links. Test links using File Preview in Browser (F12). URLs and anchor names are case sensitive on most web servers even though they may be case insensitive when tested locally. Links that work when tested locally may fail when uploaded to a server. (The domain name portion of a URL is not case sensitive.) You can set target frame in which a linked document opens using the Target field in the Property inspector. See Section 4.1.3 in Chapter 4.

Figure 2-5. Web page link set up

2.2.1 Protocols

A protocol is the first portion of a URL. Most protocols are followed by the name of the server, such as www.neoregon.net, or it's equivalent IP (Internet Protocol) address, such as 192.41.42.11. The server name is followed by the name of the file that you wish to download, such as index.html. Other protocols, such as javascript and mailto, are followed by a command or email address.

Table 2-2. Web protocol prefixes

Protocol prefix

Description

http://

The HyperText Transfer Protocol displays web pages. If the filename is omitted, most web servers look for a default file of the name index.html, index.htm, home.html, home.htm, default.html, or default.htm. (Some servers display a directory listing if a default file is not present in a folder. Either configure your server to not display a directory listing, or ensure that all folders contain an appropriate default file.)

Specifying with an absolute URL:

http://www.macromedia.com/index.html

http://192.41.42.11

Specifying with a relative URL:

http:subfolder/index.html

subfolder/index.html

Specifying HTTP port (default HTTP port is 80):

http://www.macromedia.com:80/

http://192.41.42.11:80/

ftp://

The File Transfer Protocol is used to download files, not display them. For example:

ftp://ftp.macromedia.com/downloads/demo.zip

Specifying FTP port (default FTP port is 26):

ftp://ftp.macromedia.com/downloads:26

Specifying a username (login name), in this case "luis":

ftp://luis@ftp.macromedia.com/downloads/

Specifying username ("luis") and password ("testing"):

ftp://luis:testing@ftp.macromedia.com/downloads/

nntp://

The Network News Transfer Protocol is used by news servers:

nntp://news.macromedia.com:119/rec.pets/100

news:

The News protocol accesses either an entire newsgroup or a single message from Usenet.

Entire newsgroup:

news:rec.pets

Individual message:

news:1234@news.macromedia.com

https://

The Secure HyperText Transfer Protocol is used for financial and other sensitive transactions:

https://buy.macromedia.com/placeorder.bin

Access with username ("luis") and password ("testing"):

https://luis:testing@buy.macromedia.com/order.bin

file:///

The File protocol accesses local files on the user's disk drive:

Windows:

file:///C|/Windows/testing/sample.html

Macintosh:

file:///MacHD/testing/sample.html

javascript:

The javascript protocol executes a JavaScript/JScript command. For example:

javascript:myfunction(name)

would run the function myfunction, passing it the parameter name.

vbscript:

The vbscript protocol executes a VBScript (Visual Basic) command (supported in IE only). For example:

vbscript:myfunction(total)

would run the function myfunction, passing it the parameter total.

mailto:

The Simple Mail Transfer Protocol (SMTP) is used to send email (see Table 2-4):

mailto:book_requests@oreilly.com

named anchors

Named anchors mark a specific location in a document.

To reference a named anchor on the current page, use:

#anchorname

To reference a named anchor on another page, use:

http://www.myserver.com/index.html#top

To reference a labeled scene within a Shockwave file:

http://www.shockwave.com/coolgame.dcr#intro

Telnet

The telnet protocol establishes a terminal session with a remote server.

Telnet with username "luis" and password "testing":

telnet://luis:testing@macromedia.com

Gopher

A connection to a Gopher server. For example:

gopher://macromedia.com:70/

2.2.2 Absolute and Relative URLs

Absolute addresses specify the complete URL, including the domain name, such as http://www.macromedia.com. Site root-relative addresses start with a forward slash (/) and specify a file relative to the root folder of the site (the one containing the site's home page). Document-relative addresses specify the location of a file relative the current document. Several variations are shown in Table 2-3.

Table 2-3. Absolute and relative URLs

Example

Description

http://server.domain.com/home.html

An absolute URL.

/home.html

A site root-relative URL specifying the home page in the root folder.

/data/images/myimage.gif

A site root-relative URL specifying a .gif file in the images subfolder one level down from the root folder.

stuff/index.html

A document-relative URL specifying a document one folder below the current folder. The http: protocol is assumed.

./stuff/index.html

The same as the prior entry. The period (.) represents the current folder

../myimage.gif

Specifies a file in the folder immediately above the current folder. The two periods (..) indicate the parent directory.

../data/images/myimage.gif

Specifies an image in a subfolder adjacent to the current folder.

2.2.3 Email Links

Clicking on an email link opens a new message window in the user's default email program and automatically fills in the To address field. Email links can be added to your HTML document in three ways:

By selecting Insert Email Link and providing the link text and address in the Insert Email Link dialog box, as shown in Figure 2-6.
By clicking the Insert Email Link button in the Objects panel's Common category, which also opens the Insert Email Link dialog box.
By highlighting existing text in your document and specifying an email address of the form mailto:username@domainname.com in the Link field of the Property inspector.

Provide the mailto: prefix when entering the link manually in the Property inspector, but not when using the Insert Email Link dialog box, where it is added automatically.

Figure 2-6. The Insert Email Link dialog box

A mailto link merely creates a new email message. The user must send the email via her email program manually. To emulate sending email from a web page, many developers use POST to submit data to a CGI script. For example, the free FormMail CGI script available from Matt's Script Archive at http://www.worldwidemart.com/scripts/formmail.shtml parses the information in a form and sends it to the designated email address.

Email links can also specify a default subject, message, and addressees using the formats shown in Table 2-4. Not all email programs support all attributes of the mailto protocol. For example, a user's email program may not fill in the body of the email automatically. Both Netscape Messenger 6 and Microsoft's Outlook 2000 support all email attributes.

Table 2-4. Mail link attributes

Added information

Example of format

CC

mailto:joe@macromedia.com?CC=heather@macromedia.com

Subject

mailto:joe@macromedia.com?Subject=Thisisthesubject

Body

mailto:joe@macromedia.com?body=Thisisthebodytext

BCC

mailto:joe@macromedia.com?BCC=heather@macromedia.com

To

Separate multiple recipients with a comma and space, as in: mailto:joe@macromedia.com,heather@macromedia.com

The following example creates an email message to be sent to heather@macromedia.com, with a CC sent to two additional recipients and a BCC to another recipient. It also sets the subject line and body text.

mailto:heather@macromedia.com?Subject=FrommyWebSite

&CC=joe@macromedia.com,jim@macromedia.com&BCC=bill@macromedia.com

&Body=thisisaquickmessage.

Note that the first attribute is separated from the mailto recipient by a question mark (?), and each subsequent item is separated with an ampersand (&) without any intervening spaces. Both CC and BCC must be in capital letters for the email to be properly addressed.

Question marks within the subject or body should be enclosed within quotation marks. If using double quotes to delimit the href attribute of your email link, use single quotes to delimit the subject and body strings, and vice versa. For example:

href="mailto:joe@macromedia.com?subject='Areyouokay?'"

2.2.4 Named Anchors

Named anchors define destination points within a document. After creating an anchor, you'll typically create a link that refers to it from within the same document or from another document. Place anchors preceding the heading or paragraph that you want to be displayed when the user follows the link.

To insert a named anchor at the cursor location, select Insert Invisible Tags Named Anchor, Ctrl+Alt+A (Windows), or Cmd+Opt+A (Macintosh). Provide the name of the anchor in the Insert Named Anchor dialog box, shown in Figure 2-7. In Code view, Dreamweaver indicates the anchor's location using a yellow anchor icon (see Figure 2-23).

Figure 2-7. The Insert Named Anchor dialog box

To link to an anchor within the current document, create a link (as described earlier) using the following format:

#linkname

To link to an anchor in another document, append the anchor name to the URL. The following example links to an anchor named bottom in the demo.html file, assumed to be in the same folder as the current HTML file:

demo.html#bottom

The following example links to an anchor named middle in the index.html file at an absolute location:

http://www.macromedia.com/index.html#middle

Anchor names and links to them are case sensitive. A link to a nonexistent (or misspelled) anchor name causes the browser to jump to the top of the document (as if no such anchor exists).