Home arrow Web Standards arrow Page 8 - 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 - The Content Area
(Page 8 of 12 )

Finally, for this simple layout, you need to place the content on the page.

1. Create a new CSS style, select the Advanced radio button, and type #content into the Selector box. You want your content to be liquid and stretch to fill the user’s screen width, so click the Box category, and in the Margin area, clear the Same for all check box and set the following properties:

  • Top: 50 pixels

  • Left: 260 pixels

  • Right: 40 pixels

2. Now click OK, and insert the content after the tag <div id="nav">. You should see the <div> appear in the main area of the page, as shown in Figure 2-44. Add some dummy content.


Figure 2-44. The <div> tag in the page's main area.

As you may have realized, you did not use absolute positioning or anything else to position this content. You simply used a margin to clear it from the navigation, which is absolutely positioned. This works because absolute positioning takes an element out of the flow of the document. The content without any margins applied to it would have simply lain over the top of the navigation as if the navigation was not there.

To display the layout so it is resized with the user’s screen size, make sure that the content leaves space for the absolutely positioned navigation.

This is a very simple layout, but hopefully it has given you an idea of the tools that are available in Dreamweaver to work with CSS layouts. If this is your first experience with CSS, you may find the concepts a little tricky, but the best way to become accustomed to any new way of working is simply to experiment and try things out. The “Resources” section at the end of this chapter lists several sites that provide CSS layouts that you can experiment with. There are also the CSS page designs within Dreamweaver that you can use as starting points for your own experiments.

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