Home arrow Web Standards arrow Page 5 - Web Standards in Dreamweaver, Part 2

Web Standards in Dreamweaver, Part 2

This article walks you through setting the preferences for working with CSS in Dreamweaver, how to work with the CSS style panel, linking to the stylesheet, improvements to the Propert Inspector, how to creat new XHTML documents and more. (From the book ASP.NET Web Development with Macromedia Dreamweaver MX 2004, by Costas Hadjisotiriou, with Rachel Andrew and Kevin Marshall, published by Apress, 2004, ISBN: 1590593480.)

Author Info:
By: Apress Publishing
Rating: 4 stars4 stars4 stars4 stars4 stars / 7
September 08, 2004
  1. · Web Standards in Dreamweaver, Part 2
  2. · Creating Classes
  3. · The Property Inspector
  4. · Design Files: Premade CSS Stylesheets
  5. · Creating Valid Markup

print this article

Web Standards in Dreamweaver, Part 2 - Creating Valid Markup
(Page 5 of 5 )

In this section, we will show you the tools available for laying out web pages. You will create a document using XHTML 1.0 Transitional, tables for layout, basic CSS for text styling, and rollover graphics for navigation.

You will then see how to move this document to XHTML Strict—removing any presentational attributes from your pages. Removing presentational attributes and markup from your pages means that you need to replace them with something, so we will explore replacing them with CSS.

Finally, we will show you more advanced CSS and re-create the layout using CSS positioning, replacing the image rollovers with CSS.

A New XHTML Document

To create a new XHTML documents select File -> New to open the New Document dialog box. Select the first two options—Basic page in the Category list and HTML in the Basic page list. Select the Make document XHTML compliant check box at the bottom of the New Document dialog box, as shown in Figure 2-16.

Web Standards 

Figure 2-16. Creating a new XHTML document

Laying Out a Page

Follow these steps to create a page layout.

1. To insert a table (in this instance, for layout) into your page, switch the Insert toolbar to the Layout panel, as shown in Figure 2-17.

 Web Standards

Figure 2-17. The Insert toolbar’s Layout panel

2. There are three modes for creating tables-based layouts: Standard, Expanded, and Layout. Layout mode might look like a good idea because you can drag table cells, but it tends to create very messy markup—something you want to avoid! Therefore, start in Standard mode. Click the Table icon on the Insert toolbar to open Table dialog box, as shown in Figure 2-18.

 Web Standards

Figure 2-18. The Table dialog box

3. In the Table dialog box, enter the properties of your table as follows:

  • Rows: 4

  • Columns : 3

  • Table width: 100 percent

  • Border thickness: 0 pixels

  • Cell padding: 0

  • Cell spacing: 0

  • Header: None

4. In the Summary text box, type This table is for layout purposes.

5. Click OK and your table will appear in Design view, as shown in Figure 2-19.

Web Standards 

Figure 2-19. Design view after inserting the table.

Setting Page Properties

Before continuing, let’s set some basic page properties.

1. To open the Page Properties dialog box (shown in Figure 2-20), either click the Page Properties button in the Property inspector or select Modify -> Page Properties.

Web Standards 

Figure 2-20. The Page Properties dialogue box.

2. Enter the properties of the page as follows:

  • Page font: Verdana, Arial, Helvetica, sans serif

  • Size: .9 ems

  • Text color: #333333

  • Background color: #ffffff

  • Left margin: 0

  • Right margin: 0

  • Top margin: 0

  • Bottom margin: 0

3. Click OK to see the changes in Design view. If you switch to Code view, you will see that these properties have been added with CSS and are in a stylesheet within the head of the document. Because you are likely to want to apply the same properties to multiple pages, it is wise to move these properties to an external stylesheet. To do so, select File -> New -> Basic Page, and select CSS to open the New Document dialog box, as shown in Figure 2-21.

Web Standards 

Figure 2-21. Moving properties to an external stylesheet.

4. Click Create to open an empty stylesheet in Dreamweaver. Copy the styles from the head of the document (do not copy the <comment> or <style> tags that enclose them) and paste them into your new stylesheet. Save the stylesheet as global.css. Return to your document and delete the <style></style> tags and everything inside them. Return to Design view.

5. Now attach your new stylesheet to the page by selecting Attach Stylesheet from the CSS Styles panel and selecting the global.css document.

NOTE: The next part of the chapter will deal with creating a layout with a banner on the top of the page and a navigation menu on the left side.

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.

DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware.

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