Designing with CSS in Dreamweaver MX 2004 – Part 3: Creating a Standards-Compliant Page

June 9, 2006 | 0 comments

Creating a Standards-Compliant Page

To achieve the structure shown previously in Figure 1, lay out your page so that it can be processed in a standards-compliant mode.

Select File> New from the main menu in Dreamweaver. This opens the New Document dialog box.
Select the General tab.
From the Category column select Basic Page.
From the Basic Page column select HTML.
Check the Make Document XHTML Compliant option.
Click the Create button.
Save your page as basiclayout1.html at the root of your defined site.

Your page should look like the code below. This is what I would call a perfect starting point because Dreamweaver MX 2004 has created an XHTML page for you in its most basic form:

     <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title>Untitled Document</title>
 </head>
 
 <body>
 </body>
 </html>
Add a new folder to your local site and call it CssFiles. This is the location that you use to save your CSS documents. Do that now so you can create your CSS file. I covered creating and attaching a CSS file extensively in Part 1. 
Save your CSS file as basiclayout.css. Once you have completed the exercise of attaching the CSS file to basiclayout.html, the HTML source code will look like the following: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title>Untitled Document</title>
 <link href="CssFiles/basiclayout.css" rel="stylesheet" type="text/css" />
 </head>
 
 <body>
 </body>
 </html>
As you can see, the link to basiclayout.css has been inserted in the head of basiclayout.html. I discussed the merits of using an external CSS file earlier in this series, particularly the ability to control the appearance of your website from a single location. 
Note: Avoid using inline and embedded styles whenever possible.

Comments