Home arrow Web Standards arrow Page 7 - Web Standards in Dreamweaver Part 3

Web Standards in Dreamweaver Part 3

This last part of the chapter on Web Standards in Dreamweaver shows you how to create a layout with a banner at the top of the page and a navigation menu on the left side. (From the book ASP.NET Web Development with Macromedia Dreamweaver MX 2004, by Costas Hadjisotiriou, 2004, Apress, ISBN: 1590593480.)

Author Info:
By: Apress Publishing
Rating: 4 stars4 stars4 stars4 stars4 stars / 9
September 22, 2004
  1. · Web Standards in Dreamweaver Part 3
  2. · Adding Page Content
  3. · Validating the Document
  4. · Revalidate Your Page in Dreamweaver
  5. · Set Properties of Table Cells
  6. · CSS for Layout
  7. · Create the Navigation
  8. · The Content Area
  9. · Browser and Device Issues
  10. · Media Descriptors
  11. · Working with Dynamic Data
  12. · Resources and Summary

print this article

Web Standards in Dreamweaver Part 3 - Create the Navigation
(Page 7 of 12 )

Follow these steps to create the navigation.

1. Create a new CSS class; this time select the Advanced (IDs, contextual selectors, etc) radio button, and type #nav in the Selector text box, as shown in Figure 2-37.


Figure 2-37. Creating an advanced CSS class

2. Click OK. Then select the Positioning category and set the following properties:

  • Type: absolute

  • Width: 200 pixels

  • Top: 140 pixels

  • Left: 4 pixels

3. Click OK. Click the Insert Div Tag icon once again, and in the ID drop-down list, click nav. In the Insert drop-down list, select After start of tag, and choose <div id="banner">, as shown in Figure 2-38, to ensure that this <div> tag is created outside the banner and is not nested inside it.


Figure 2-38. The Insert Div Tag Dialog Box

4. Click OK. The <div> tag will appear underneath the banner on the left, as shown in Figure 2-39.


Figure 2-39. The <div> tag Design view.

CSS Navigation Buttons

One way to trim down file sizes and improve the accessibility of your document is to use CSS for navigation that would have previously required images. You will use CSS in this way to create your navigation. Your navigation is simply a list of places where the user can go, and as such, using a list to markup the content is a good choice.

1. In the <div#nav> tag, create a list, and make each item a link, as shown in Figure 2-40.


Figure 2-40. Design view showing a list.

2. First you will style the list itself. Create a new CSS style, choose Advanced, and in the Selector box, type #nav ul, as shown in Figure 2-41.

Using the selector #nav ul means that you are creating styles for all <ul> tags within the div #nav. Any <ul> tags within that division will be styled in this way, but those not inside this area of the page will retain their default formatting.


Figure 2-41. Creating styles for all <ul> tags

3. Go to the Box category of the CSS Style Definition dialog box and set Margin Left to 0 pixels and Padding Left to 0 pixels. Click OK and then create a new CSS Style that styles any list item that is inside the #nav.

4. Go to the List category of the CSS Style Definition dialog box and under Type, select the none check box to remove the bullet from the start of each list item. Next, in the Box category, set padding to 3 pixels and select the Same for all check box. Set the bottom margin to 4 pixels and clear the Same for all check box. To add a border to each item, use the Border category, as shown in Figure 2-42.


Figure 2-42. Setting border properties

5. You now need to style the anchor tag—the navigation link itself. Create a new CSS class, select the Advanced radio button, and type #nav a:link. Using the Type category, style the text of the link and set the color. You can also set the navigation link to have no underline by selecting the none check box, as shown in Figure 2-43.


Figure 2-43. Setting text properties

6. After setting up #nav a:link, repeat this process for #nav a:visited, #nav a:hover, and #nav a:active. If you want your navigation to be highlighted when the user holds his or her mouse pointer over the link, set a different color for the #nav a:hover state.

TIP When setting different properties for the hover state, take care not to change the size of the text. If you do, you will end up with a jiggling effect as the page elements are shifted around by the change in size of the link.

This chapter is from ASP.NET Web Development with Macromedia Dreamweaver MX 2004, by Costas Hadjisotiriou (Apress, 2004, ISBN: 1590593480). Check it out at your favorite bookstore today.

Buy this book now.

blog comments powered by Disqus

- Mozilla Popcorn Maker 1.0 Makes Videos More...
- Completing a Configuration for Chrome and a ...
- Getting Connected with Firefox and Chrome
- Configuring Servers and Databases with Chrome
- Configuring Firefox for Chrome and a Server
- Designing the Elements of a Web Page
- Matching div heights with CSS and JavaScript
- Forms
- Get Down With Markup
- If I Said You Had a Beautiful Body...
- Web Standards in Dreamweaver Part 3
- Web Standards in Dreamweaver, Part 2
- Web Forms
- Making Lists Using XHTML
- Web Standards in Dreamweaver, Part 1

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 

Developer Shed Affiliates


© 2003-2018 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials