Adding Web Pages, Links, and Images (Adobe Dreamweaver CS5) Part 10

To Create a Relative Link to the Home Page

Visitors can enter a Web site at any point, so you should always include a link from each page within the site to the index page. To accomplish this for the Montana Parks Web site, you create a relative link to the index page from the Lewis and Clark National Historical Trail page and from the Montana National Parks and Preserves page, as shown in the following steps.

1

•    Click the preserves .htm tab to display that page in the Document window, and then scroll to the bottom of the page. Drag to select the text Home.

•    Drag the index. htm file name from the Files panel to the Link box in the Property inspector, and then click in the Document window to deselect the text.

•    Click the Save button on the Standard toolbar to save your changes to the preserves.htm page.

•    Press the F12 key to view the Montana National Parks and Preserves page in your browser (Figure 2-64).

Figure 2-64

Figure 2-64


Q&A

Do I need to specify the complete path to the index.htm page? o3

No. When you link to another file in the same folder, you only need to specify the file name.

Can I make a linked Web page open in a new browser window? o3

Yes. By default, when you click a link, the linked Web page opens in the current browser window. However, you can specify that a linked Web page opens in a new browser window. To do this, first select the item and    create the link.

Next, in the Property inspector, click the Target box arrow and then click _blank on the Target pop-up    menu.    When you view the page in a browser and click the link, it is displayed in a new window.

2

• Click the Home link to display the index page (Figure 2-65).

Figure 2-65

Figure 2-65

3

•    Close the browser to redisplay Dreamweaver.

•    Click the historical_ trail.htm tab to display that page in the Document window. If necessary, scroll to the end of the document and then drag to select the text Home.

•    Drag the index .htm file name from the Files panel to the Link box in the Property inspector to create the link, and then click anywhere in the Document window to deselect the text.

•    Click the Save button or the Standard toolbar to save your changes to the historical_trail.htm page.

• Press the F12 key to view the Lewis and Clark National Historical Trail page in your browser (Figure 2-66).

Figure 2-66

Figure 2-66

4

•    Click the Home link to verify that it works.

•    Close the browser.

Creating an Absolute Link

Recall that an absolute link (also called an external link) contains the complete Web site address of a document. You create absolute links the same way you create relative links — select the text and paste or type the Web site address.

To Create Absolute Links

You now will create three absolute links in the Montana National Parks and Preserves page and two absolute links in the Lewis and Clark National Historical Trail page. The links in the Montana National Parks and Preserves page are to Web pages about the selected preserve. In the Lewis and Clark National Historical Trail page, the links are to Web pages about Lewis and Clark. The following steps show how to create these links. Keep in mind that Web site addresses change. If the absolute links do not work, check the Dreamweaver CS5 companion site at www.scsite.com/dwcs5/ for updates.

1

•    Select the Montana National Parks and Preserves page (preserves.htm).

Drag to select the text Glacier National Park in the first bulleted item.

•    Click the Link box in the Property inspector and then type http:// www.nps. gov/ glac/index. htm as the link. Press the ENTER key.

•    Drag to select the text Nez Perce National Historical Park. Click the Link box and then type http : //www. nps.gov/nepe/ index.htm as the link. Press the ENTER key.

Figure 2-67

Figure 2-67

•    Drag to select the text Bighorn Canyon National Recreation Area. Click the Link box and then type http://www.nps.gov/bica/index.htm as the link. Press the ENTER key.

•    Save the preserves.htm page.

•    Press the F12 key and then click each link to verify that they work (Figure 2-67).

2

• Close the browser to return to the Dreamweaver window.

E-Mail Links

An e-mail link is one of the foundation elements of any successful Web site. Visitors must be able to contact you for additional information or to comment on the Web page or Web site. When visitors click an e-mail link, their default e-mail program opens a new e-mail message. The e-mail address you specify is inserted automatically in the To box of the e-mail message header.

To Add an E-Mail Link

The following steps show how to use the Insert menu to create an e-mail link for your home page using your name as the linked text.

Figure 2-68

Figure 2-68

1

•    Click the index.htm tab, scroll down to the end of the page, and then drag to select your name.

•    Click Insert on the Application bar and then point to Email Link to highlight it (Figure 2-68).

Figure 2-69

Figure 2-69

2

• Click Email Link to display the Email Link dialog box (Figure 2-69).

Q&A

What happens if I Q change the name in the Text box?

The text that you selected to create the e-mail link is also changed.

3

• Click the Email text box and then type your e-mail address (Figure 2-70).

Figure 2-70

Figure 2-70

4

•    Click the OK button to accept the entries in the Email Link dialog box.

•    Click anywhere in the selected text of your name to view your e-mail address in the Property inspector Link box (Figure 2-71).

Q&A

What does mailto mean in the Link box?

This text refers to the Internet protocol used to send electronic mail. E-mail links start with "mailto" to indicate that the Web page should use this protocol when linking to the e-mail address in the Link box.

Figure 2-71

Figure 2-71

5

• Click the Save button on the Standard toolbar to save the changes to the index.htm page.

•    Press the F12 key to view the page in your browser.

•    Click your name to open your e-mail program.

•    Send a message to yourself and one of your classmates.

•    Close your e-mail program and then close the browser.

Next post:

Previous post: