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.)
Web Standards in Dreamweaver Part 3 - CSS for Layout (Page 6 of 12 )
One of the reasons for building and validating an XHTML Transitional and Strict document is to show that you can still work to standards even if you are not ready to go with CSS for layout yet. However, CSS for layout is the way of the future and learning to use CSS in this way is going to be important for the future career of anyone working in this industry. Dreamweaver MX 2004 supports CSS for layout in a far more advanced way than previous versions, making it far easier to get started.
TIP -- You may also hear people talking about layers in Dreamweaver. Layers are simply content structured with inline CSS positioning. They are less useful than an external stylesheet for reasons including reduced code portability and added document size.
Creating the Banner
Follow these steps to create a banner.
1. To get started building a layout using CSS, create a new XHTML document in Dreamweaver and attach to it the stylesheet that you created for your tables-based layout.
2. You can use the styles you created for your banner table cell. Open your stylesheet in Dreamweaver and change .banner to #banner.
3. To create the banner, add a <div> tag. A <div> tag simply marks an area of the document, which you can then style. To insert a <div> for the banner, select the Layout pane of the Insert toolbar and click the Insert Div Tag icon to display the dialog box shown in Figure 2-34.
Figure 2-34. The Insert Div Tag dialog box
You will see that the banner shows up as an ID—this is because a pound sign (#) denotes an ID in the stylesheet, whereas a period (.) denotes a class.
4. Select the ID banner and click OK.
You should see the familiar banner appear in Design view. It contains the text Content for id “banner” Goes Here, as shown in Figure 2-35.
Figure 2-35. A banner in Design view
5. Switch to Code view to see the markup that Dreamweaver added.
<div id ="banner">Content for id "banner" Goes here</div>
6. Delete the placeholder text. In the tables-based layout, there was some white space above the banner. You can reproduce this with CSS by adding a margin to the top of the banner. Edit the #banner ID again and select the Box category. Uncheck the Same for all check box in the Margin section and then set the following properties, as shown in Figure 2-36:
Top: 20 pixels
Right: 0 pixels
Bottom: 20 pixels
Left: 0 pixels
Figure 2-36. The Box category
7. Click OK to see the change in Design view.
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.