Home arrow Web Standards arrow Page 6 - Web Standards in Dreamweaver Part 3
WEB STANDARDS

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
TABLE OF CONTENTS:
  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
SEARCH DEVARTICLES

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.

Dreamweaver

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.

Dreamweaver

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

Dreamweaver 

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.


blog comments powered by Disqus
WEB STANDARDS ARTICLES

- 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 
Support 

Developer Shed Affiliates

 




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