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.
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.
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.
Figure 2-18. The Table dialog box
3. In the Table dialog box, enter the properties of your table as follows:
- 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.
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.
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.
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. |
