Web Standards in Dreamweaver Part 3
(Page 1 of 12 )
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.)
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. |
Next: Adding Page Content >>
More Web Standards Articles
More By Apress Publishing
/ 4 
