Home arrow Web Standards arrow 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
(Page 1 of 12 )


The first part of this chapter is available via this link, and the second part is here.  

The Layout

You are going to create a layout with a banner at the top of the page and a navigation menu on the left side.

1. To create the banner, select the top row of the table cells and click Merge Cells in the Property inspector.

NOTE -- The bottom half of the Property inspector changes to reflect the current selection in Design view.

2. Repeat this process for the next two rows so your table has three rows containing one cell each, and a fourth row containing three cells, as shown in Figure 2-22.


Figure 2-22. Creating a table in the Property inspector

3. Click the left cell of the bottom row. This will be the menu. In the Property inspector, set this cellís width to 200 pixels, as shown in Figure 2-23.


Figure 2-23. Setting table properties in the Property inspector

4. Click the bottom-right cell. Set this cell to 40 pixels wide. The middle cell is where your page content will go.

5. Click the top cell and set it to 20 pixels high. Do the same to the third cell down. Finally, set the middle cell to 80 pixels high.

The Banner

The middle cell will be the banner across the top of the page. You could simply set a background color for the table cell, but it is a better idea to do this using CSS. If you create additional pages from this template page, you can change the color of the banner on every page with one change in the stylesheet.

1. To set the background color using CSS you need to create a class. Create a new class and name it .banner. In the Background category of the CSS Style Definition dialog box, select a color for the banner. Then go to the Border category and give the banner a top and bottom border, as shown in Figure 2-24.


Figure 2-24. The Border category

2. Click OK. Next, using the Property inspectorís Style drop-down list, apply the .banner class to the banner table cell.

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-2019 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials