Web Design All-in-One For Dummies, 2nd Edition
Book image
Explore Book Buy On Amazon

When most web designers select a document type definition (DTD) for their web docs, they have all the intention in the world of writing code that’s compliant with that DTD’s syntactical rules.

Sometimes, however, with all the cutting and pasting and inserting and hand-coding, the syntax gets out of whack here and there, and when the time comes to test and validate pages, you might find errors that cause the pages to not display exactly as you intended.

This is especially true when you make the shift to using an XHTML or HTML5 DTD but are still in the habit of hand-coding tags in HTML syntax. One of the easiest mistakes to make in this regard is forgetting to add the extra space and slash for certain tags in XHTML when their HTML counterparts don’t require it, like forgetting to write
instead of
.

If you happen to be a Dreamweaver user, you’re in luck because Dreamweaver has a sweet little Convert Syntax tool that automatically converts all the code in a single document to conform with the syntactical rules of any selected DTD. If you’re using a different code editor, check that editor’s help files to see whether you can find a similar command.

Using Dreamweaver’s Convert Syntax command, you can change all the HTML syntax into XHTML or HTML5 and vice-versa. In other words, the code on any page — regardless of the original DTD and syntax used to code the page — can be automatically adjusted to match the syntax for any of the following DTDs:

  • HTML 4.01 Transitional

  • HTML 4.01 Strict

  • HTML5

  • XHTML 1.0 Transitional

  • XHTML 1.0 Strict

  • XHTML 1.1

  • XHTML Mobile 1.0

  • XSLT 1.0

To convert the syntax of any open document in Dreamweaver — which includes having Dreamweaver automatically insert the selected DTD when one isn’t detected or overwrite any existing DTD — follow these simple steps:

  1. With your document open in the Dreamweaver workspace, choose File→Convert and select the desired DTD from the submenu.

    image0.jpg

    Dreamweaver immediately updates the DTD in the open file to match the one you just selected and converts any tags within the code of the page to match that DTD’s syntax rules.

  2. Save the file and repeat this process on any additional open files to ensure that all the files within the same managed site use the same DTD and coding format.

    Currently this tool doesn’t perform any site wide conversion; therefore, be sure to apply this Convert command to each document in your managed site.

If you happen to be working on a site that uses templates, feel free to apply this tool to normal documents, templates, and template-based files. Any changes made to the template should be automatically applied to any template-based pages upon save. However, be sure to also apply the Convert Syntax command individually to all the template-based files on the site after updating the template so that the content inside any editable regions of the template-based files will also be converted to match the selected DTD.

About This Article

This article is from the book:

About the book author:

Sue Jenkins is a working designer as well as a design trainer and author. Her design firm, Luckychair, provides design services for web, logo, and print. Sue has also created a series of training DVDs on popular Adobe design tools including Photoshop, Dreamweaver, and Illustrator.

This article can be found in the category: