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.

TIP An ID needs to be unique in your document, so it is perfect for use in an area of the page that will occur only once in each docu ment, such as a banner or navigation block. A class can be present multiple times in one document, so you use a class for elements that may appear more than once, such as styles for links, a boxout style to highlight terms, and so on.

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. Buy this book now.

Next: Create the Navigation >>
 

More Web Standards Articles
More By Apress Publishing

Comments On: Web Standards in Dreamweaver Part 3

>>> Be the FIRST to comment on this article!