You are on page 1of 3

Web Page Design Navigation Buttons and Text Links Part 5: Add Navigation Buttons 1. In your Language_Main.

dwt file, click in the table’s left hand column. 2. On the insert toolbar, click the images drop-down arrow. a. Choose rollover image. b. In the insert rollover images dialog box, in the image name box, type home. 3. Next to the original image box, click browse. a. Browse to the MTComputers \Scook \WebPageDesign \Images folder. b. Double-click the nav_home_blue.gif. c. When asked if you would like to save the file, click yes. d. Save the file in your images folder. 4. Next to the rollover image box, click browse. a. Browse to the MTComputers \Scook \WebPageDesign \Images folder. b. Select the nav_home_red.gif file and save it to your images folder. 5. In the alternate text box, type home. a. In the When clicked, Go to URL box, type index.html. b. Click ok. 6. Using Steps 2 through 5 above, create About Us, Events, and Contact Us navigation buttons. a. Use the table below to create the buttons. Navigation Buttons Image Original Image Rollover Image Alternate When Clicked, Name Text Go to URL About Us nav_about_blue.gif nav_about_red.gif About Us about_us.html Events nav_events_blue.gif nav_events_red.gif Events events.html Contact Us nav_contact_blue.gif nav_contact_red.gi Contact Us contact_us.html f 7. Your link bar (the blue area on the left side of the screen) should look similar to this. Home About Us Events Contact Us 8. Preview your page in a browser. a. Click OK if This template doesn’t have any editable regions. Are you sure you want to move? Appears. b. Move your mouse pointer over the buttons to see each one turn form blue to red. 9. Close your browser. Part 6: Add Footer Information 1. Click in the bottom cell of the right hand column in your table. 2. In the Properties inspector, click the size drop-down arrow and select 12.

Web Page Design Navigation Buttons and Text Links 3. Type in the following text (shown under 3b in bold), including the vertical line between each section. a. (To create the vertical line (also known as a pipe) you will press the Shift>\.) b. Place a space between each item you type. Also, type Shift + Enter between each line so that it will go on the next line and not two lines down. Home | About Us | Events | Contact Us Questions or comments about the Web Site? Copyright 2009 – Language Club In the properties inspector, click the horz drop-down arrow and select center. Any text or objects placed in this cell will be centered. Proofread your work and make any corrections. SAVE YOUR FILE.

4. 5. 6.

Part 7: Add Text Links 1. In the pages footer that you just typed, select the word home. a. In the properties inspector, in the link box, type index.html. b. Press Enter. The text changes color to indicate that it is a link. 2. Repeat step 1 above for the About Us, Events, and Contact Us links. Use the information in the table below to find the link information. Text Links Text Link About Us about_us.html Events events.html Contact Us contact_us.html Right-click a blank area of the page and select Page Properties. In the page properties dialog box, under Category, select links on the left hand side of the window. Use the following values type in the color values for link color, rollover links, visited links, active links. Link color: #0000FF Visited links: #FF00FF Rollover links: #FF0000 Active links: #FF0000 Click ok to save your work.

3. 4. 5.

6.

Part 8: Add a Link to an E-Mail Window 1. Place your cursor at the end of the sentence Question or comments about the Web site? Press the spacebar once. 2. Choose Insert>Email link from your drop down menu at the top of the screen. a. In the email link dialog box, in the text box, type E-mail the Webmaster. b. In the e-mail box, type in LangClubPres@yahoo.com. c. Click ok.

Web Page Design Navigation Buttons and Text Links 3. 4. 5. In your properties inspector window, in the link box, notice that the text mailto: is automatically inserted at the beginning of the e-mail address that you typed in. Spell-check and proofread your template. You will be using this template to create the rest of your Web site so you want to make sure that everything is correct. If you make any changes, be sure to resave your page.