Web Standards in Dreamweaver Part 3 - Revalidate Your Page in Dreamweaver
(Page 4 of 12 )
In Edit -> Preferences -> Validator, select the check box to validate against XHTML Strict. Run Validate as XML again. This time you will get a list of errors shown with an exclamation mark inside a red circle, as shown in Figure 2-30.
Figure 2-30. Validator showing the errors
TIP -- You can also save this list (right-click on a PC or CMD-click on a Mac and select Save Results) or open the list in a browser (select Open Results in Browser), which is useful if you are validating a large document or entire site because you can use the list as a checklist to ensure that you caught all instances of invalid code.
The validator at the W3C site gives a similar list of errors, as shown in Figure 2-31.
Figure 2-31. W3C validator in a browser showing the errors
These “errors” are simply the tags and attributes that have been removed from the Strict DTD. They are mainly elements that handle how the document looks and therefore should be replaced with CSS. This list is very helpful in making your page validate against the XHTML Strict DTD because it gives you a quick way to see the deprecated elements. (The document validates as XHTML Transitional, so it conforms to the rules of being well formed.)
Table 2-1 shows the errors that the validator flagged and how these are solved.
Table 2-1. Validator Errors and Solutions |
Error | Solution |
Attribute language is not declared for element script | This refers to <script language="JavaScript"type="text/JavaScript">. The language attribute is deprecated and should be removed. |
| | |
Attribute width is not declared for element td | This refers to <td width="80">. The width attribute of the <td> tag has been deprecated because it can be replaced by CSS. All width attributes of table cells should be removed. |
| | |
Attribute border is not declared for element img | This refers to <img border="0" [...] >. You might be accustomed to using border="0" to remove the unsightly border around images that are also links. It is possible to use CSS to do this, so border must be removed from all images. |
| | |
Attribute name is not declared for element img | Dreamweaver MX inserts both a name attribute and an id attribute when you name an image. The name attribute is still used by older browsers and ensures backward compatibility, whereas the id attribute is the attribute in the specification. To use both is valid in XHTML Transitional, but in Strict the deprecated name attribute has to go. |
| | |
After removing these deprecated attributes you should find that your page validates as XHTML 1.0 Strict, but it looks a bit funny—the banner is shorter and there are big blue borders around the images. You can fix this by replacing the deprecated attributes with CSS.
Remove Borders Around Images
In the days of HTML, you would use border="0" to remove borders from images with links; now you can create the same effect with CSS.
1. Open the New Style dialog box, click the Tag (redefines the look of a specific tag) radio button, and select img in the Tag drop-down list, as shown in Figure 2-32. Then click OK.
Figure 2-32. Selecting img in the Tag drop-down list
2. Select the Border category in the CSS Style Definition dialog box. In the Style list, select the value none in the Top drop-down list and make sure that Same for all is checked, as shown in Figure 2-33.
Figure 2-33. CSS definitions for the image
3. Click OK. Your image borders disappear in the Dreamweaver Design view.
TIP -- Dreamweaver adds a border="0" attribute to any image that is a link. If you need to validate to XHTML Strict or simply do not want this attribute there, you will need to remove it.
 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. |
Next: Set Properties of Table Cells >>
More Web Standards Articles
More By Apress Publishing
/ 4 
