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. In Dreamweaver, open your YourNameMyDiskDesigns Web site.

2. 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!