Anchors

Web Page Design Anchors Part 1 – Add Named Anchors A frequently asked questions (FAQ) page answers common questions that visitors are likely to have about the site. Many FAQ pages included named anchors. A named anchor is a hyperlink to a specific place in another document or to a specific place within a document. Intrapage (within the same page) names anchors are useful when you have long pages, or when you want to jump from a central list of links to multiple locations on a page. 1. 2.

In Dreamweaver, open your YourNameMyDiskDesigns Web site. Open the faq.html page. a. Place your cursor right before the text that reads: “How can I get a custom design made?” b. Choose Insert>Named Anchor. c. In the Named Anchor dialog box, type: custom. d. Click ok. e. You will see an icon that will appear in front of the sentence. It looks like this:

3.

At the top of the page, highlighted the bulleted question that says, “How can I get a custom design made?” a. In the properties inspector, in the Link box, type #custom. b. Press Tab c. Click to the right of the question that you just linked.

Web Page Design Anchors 4.

Repeat Steps 2 (a through e) and 3 (including a through c) to create named anchors for the remaining four questions on the FAQ page. Use the information below to complete the steps: Question Anchor Name Link What if the design I wan is temporarily sold out? soldout #soldout How can I use my blank DVDs and CDRs? use #use What is the return policy? policy #policy How long will it take to get my disks? disks #disks

5. SAVE YOUR WORK!! 6. Test the named anchors in a Web browser. When you click the last question in the bulleted list, you should be at the end of the page. Part 2 – Create a Guest Book A guest book gives visitors a place to record their experiences with the Web site. Unlike a feedback form a guest book is a public record of comments made by the site’s visitors. Many guest books gather visitors’ names, e-mail addresses, and comments. This information is then stored in a log file that other visitors can read. 1. In your MyDiskDesigns Web site, in the Files Panel on the right side of your screen, right-click on blank.html. a. Choose Edit>Duplicate. b. Right click on the Copy of blank.html file and choose Edit>Rename. c. Rename the file: guestbook.html. 2. Open the guestbook.html page. a. In the Title box, delete the text and type: MyDiskDesigns – Guest Book b. SAVE YOUR FILE 3. Click in the header graphic area (top right box). a. Choose Insert>Image. b. Go to MTComputers\Scook\WebDesignImages051309 folder c. Select hdr_guestbook.gif and save it in your site’s images folder. d. Make sure that you have selected the graphic and in the Alt box type: Guest Book. 4. Place your cursor right under the header that you just inserted (Guest Book). a. Type the following text: How do you like our Web site? Please sign our public guest book so we can share your thoughts with other visitors. (Return to the Contact Us page). b. Format the text as Bold. 5. Select the text Contact Us. a. In the Properties inspector, move the mouse pointer over the Point to File icon. b. Click and drag from the icon to the contact.html file in the Files panel on the right side of your screen. c. Click at the end of the sentence and press enter 6. Type: Add Your Comments. a. Select the text that you just typed in 6 above.

Web Page Design Anchors b. In the Properties inspector, click the Format drop-down arrow and select Heading 3. c. Click after the text and press enter. 7. Choose Insert>Textarea. a. In the Add form tag? Dialog box, click yes. b. Select the Textarea element that you just added. c. In the Properties inspector, under TextField, delete the text and type: comments. d. In the Char width box, type 40. e. In the Num Lines box, type 5. f. Leave the Init val box blank. 8. In the document window, place your cursor AFTER the Textarea box. a. Choose Insert>Form>Button to create a Submit button. b. Click after the submit button and insert a second button. c. In the Properties inspector, under Action, select Reset form to insert a Reset button. 9. SAVE YOUR WORK! 10. Preview your page and test the Contact Us link. 11. In Dreamweaver, open the contact.html page. a. In the Get in Touch box (left side of the document window); highlight the text Guest Book (at the end of the last sentence in the box). b. In the Properties inspector, click and drag from the Point to File icon to the guestbook.html file in the files panel on the right side of your screen. 12. SAVE YOUR WORK!