Home arrow Web Standards arrow Page 4 - Web Standards in Dreamweaver Part 3
WEB STANDARDS

Web Standards in Dreamweaver Part 3


This last part of the chapter on Web Standards in Dreamweaver shows you how to create a layout with a banner at the top of the page and a navigation menu on the left side. (From the book ASP.NET Web Development with Macromedia Dreamweaver MX 2004, by Costas Hadjisotiriou, 2004, Apress, ISBN: 1590593480.)

Author Info:
By: Apress Publishing
Rating: 4 stars4 stars4 stars4 stars4 stars / 9
September 22, 2004
TABLE OF CONTENTS:
  1. · Web Standards in Dreamweaver Part 3
  2. · Adding Page Content
  3. · Validating the Document
  4. · Revalidate Your Page in Dreamweaver
  5. · Set Properties of Table Cells
  6. · CSS for Layout
  7. · Create the Navigation
  8. · The Content Area
  9. · Browser and Device Issues
  10. · Media Descriptors
  11. · Working with Dynamic Data
  12. · Resources and Summary

print this article
SEARCH DEVARTICLES

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.
 
Dreamweaver 

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.

 Dreamweaver

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.

 Dreamweaver

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.

  Dreamweaver

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.


blog comments powered by Disqus
WEB STANDARDS ARTICLES

- 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 
Support 

Developer Shed Affiliates

 




© 2003-2017 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials