Designing with CSS – Part 3: Using a Correct Doc Type
Using a Correct Doc Type
I discussed in Part 1 the importance of using a correct doc type. Using either an incomplete doc type, or no doc type at all, will drop your browser into “quirks mode,” which causes your CSS to be improperly rendered and will set you on a road to frustration and confusion. Always set your web pages up correctly. You can do this by making sure you have a valid doc type. (As with the rest of this series, we use the XHTML Transitional doc type.)
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 8 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