CREATING HORIZONTAL NAVIGATION BAR USING ADOBE DREAMWEAVER CS5

Transcription

1 CREATING HORIZONTAL NAVIGATION BAR USING ADOBE DREAMWEAVER CS5 Step 1 - Creating list of links - (5 points) Traditionally, CSS navigation is based on unordered list - <ul>. Any navigational bar can be thought of as a list or links. The first step is to create a list of links and then to remove bullets, margins and paddings that all lists have in default. 1. In the Code view, place the cursor inside the #navholder. In the Properties panel click the unordered list button to start unordered list as shown below: <div id="navholder"> <ul> <li></li> </ul> </div> <!-- end of #navholder --> 2. Make sure your mouse pointer is placed between <li> and </li> tags. Return to the Design view. Type home and click Enter, type portfolio and click Enter, type resume, and click Enter, type contact and click Enter. Click Enter twice to exit from the list. The list is completed.

2 Step 2 - Adding anchors - (5 points) 1. Add the anchor tag to each list item. In Design view, select the home text. In the Properties panel, locate the Link field. Type index.html in this field. Click Enter to complete the link. 2. Do the same for the rest of menu items entering the following names: portfolio.html, resume.html, contact.html. In the Code view, review the list of links <ul> <li><a href="index.html">home</a></li> <li><ahref="portfolio.html">portfolio</a></li> <li><a href="resume.html">resume</a></li> <li><a href="contact.html">contact</a></li> </ul> Design View

3 The list of links is created inside of the DIV #navholder. Step 3 - Styling lists of links - (10 points) 1. First, we will create an ID for the list (We need this to set up styles for unordered list (<ul>). You may include unordered lists somewhere else on the same page; but you don t want other lists look like navigation buttons. To solve this issue, we will give a unique ID to our navigation menu. Let s name it #nav. 2. Go to the CSS STYLES panel and click New CSS Rule button (+). In the New Style dialog box, type #nav in the Selector name field. Make sure that Choose where your rule will be defined drop-down menu displays main.css your external css file. Click OK. The CSS Rule Definition dialog box appears. 3. In the Box category set the Margin and Padding (the Same for All sides) to zero. This will remove the default left indent. Click OK to close the window 5. Apply the ID #nav to the <ul>. To do so, click the <ul> tag in the Tag Selector (at the bottom of the document window) to select it. 6. Right-click the selected <ul> and choose Set ID > nav (shown below)

4 This will apply id #nav to our list Step 4 - Styling list items - <li> - (10 points) Now we will set styles for list items <li>. 1. Click any link. In the Tag Selector click the <li> tag to select it. 2. With the <li> selected, go to the CSS STYLES panel and click the New CSS Rule button (+) 3. In the New CSS Rule dialog box, remove the #wrapper selector to make the rule less Specific (shown below). Click OK. 4. The CSS Rule Definition window appears. In the Box category: a. set the Margin and Padding to zero (Same for all). b. Set the Float property to left. The float:left will move all the list items to the left, so they will appear one after another as one row of links. c. Click Apply button. 5. Click the Block category. Locate the Display drop-down list and choose inline from the list. Display: inline turns block-level elements into inline elements. <li> is a block-level element. This will reinforce the horizontal orientation of the items in the menu. 6. Click the Apply button.

5 6. In the List category, click the list-style-type drop-down arrow and set the Type to none. This will remove the bullets from the list. 7. Click OK. The menu should look as shown below: Step 5 - Styling links - (10 points) The next step is to style the links inside the <li>. We will change the links into rollover buttons. This can be accomplished by changing the <a> tag to block-level element. Once the <a> tag is a block-level element, you can assign width, height, padding, and background image to your links. 1. Click on one of the list items. In the Tag Selector bar, click the <a> to select it 2. With the <a> selected, go to the CSS STYLES panel and click the New CSS Rule button (+) 3. The New CSS Rule window opens. 4. In the Selector Type field remove the selector and type the following: #nav a:link, #nav a:visited, #nav a:active (Unfortunately, you have to enter the group of styles manually)

6 Click OK. There are 4 states of the anchor tag in CSS: a:link (unvisited) a:visited (visited link) a:active (link that is currently clicked) a:hover (a link is hovered when the mouse moves over it) 5. In the CSS Rule Definition window, click the Type Category and establish the following settings: a. Type :Arial, Helvetica, sans-serif b. Size: 12px c. Color: #333333; Set the Text-Decoration to none by clicking none check box.

7 5. Click the Apply button. 6. In the Block category: a. set Text-align to center. b. Set Letter-spacing to 2px. c. set Display property to block. The display: block definition allows you to turn inline element into block-level so you can set width, height, padding and background properties to the anchor tags. 7. In the Background category, click Browse button and choose the image for the background. I used file nav_back.png. Note: you can use background-color instead. Set Repeat property to repeat-x. 8. In the Box category, establish the following settings: a. set Width to 120 pixels b. set Height to 21 pixels. pixels. c. In the Padding section, uncheck the Same for All checkbox and set the padding-top to 4 9. Click the Border category. Uncheck the Same for All checkbox. Click the Right drop-down menu, and set the value to solid. In the Width field, set the value to 1 pixel, set the Color to # Click OK. 11. Preview your menu in the web browser by clicking F12. Step 6 - Creating styles for a:hover state - (10 points) 1. In the CSS STYLES panel, click the New CSS Rule button (+). 2. In the New CSS Rule window type #nav a:hover in the Selector field. Click OK. 3. In the CSS RULE Definition window click the Background Category. For the Hover state we need to change the background image (or color) only. The links in the hover state will inherit the styles from the unvisited and visited link states.

8 4. Set the background to the image of your choice. Set repeat to repeat-x. (Alternatively, you can set Background-color to a color of your choice). Note: If you use dark background color, go to the Type category and set the Color: to white to provide good foreground/background contrast. 4. Click OK. Navigation is competed. You can save your files (File > Save All) and click F12 to preview the menu. Navigate the menu items to view the rollover effect.