In an open document, select Tools > Clean Up HTML.
- Dreamweaver User Guide
- Introduction
- Dreamweaver and Creative Cloud
- Dreamweaver workspaces and views
- Set up sites
- About Dreamweaver sites
- Set up a local version of your site
- Connect to a publishing server
- Set up a testing server
- Import and export Dreamweaver site settings
- Bring existing websites from a remote server to your local site root
- Accessibility features in Dreamweaver
- Advanced settings
- Set site preferences for transferring files
- Specify proxy server settings in Dreamweaver
- Synchronize Dreamweaver settings with Creative Cloud
- Using Git in Dreamweaver
- Manage files
- Create and open files
- Manage files and folders
- Getting and putting files to and from your server
- Check in and check out files
- Synchronize files
- Compare files for differences
- Cloak files and folders in your Dreamweaver site
- Enable Design Notes for Dreamweaver sites
- Preventing potential Gatekeeper exploit
- Layout and design
- CSS
- Understand Cascading Style Sheets
- Laying out pages using CSS Designer
- Using CSS preprocessors in Dreamweaver
- How to set CSS Style preferences in Dreamweaver
- Move CSS rules in Dreamweaver
- Convert inline CSS to a CSS rule in Dreamweaver
- Work with div tags
- Apply gradients to background
- Create and edit CSS3 transition effects in Dreamweaver
- Format code
- Page content and assets
- Set page properties
- Set CSS heading properties and CSS link properties
- Work with text
- Find and replace text, tags, and attributes
- DOM panel
- Edit in Live View
- Encoding documents in Dreamweaver
- Select and view elements in the Document window
- Set text properties in the Property inspector
- Spell check a web page
- Using horizontal rules in Dreamweaver
- Add and modify font combinations in Dreamweaver
- Work with assets
- Insert and update dates in Dreamweaver
- Create and manage favorite assets in Dreamweaver
- Insert and edit images in Dreamweaver
- Add media objects
- Adding videos in Dreamweaver
- Insert HTML5 video
- Insert SWF files
- Add audio effects
- Insert HTML5 audio in Dreamweaver
- Work with library items
- Using Arabic and Hebrew text in Dreamweaver
- Linking and navigation
- jQuery widgets and effects
- Coding websites
- About coding in Dreamweaver
- Coding environment in Dreamweaver
- Set coding preferences
- Customize code coloring
- Write and edit code
- Code hinting and code completion
- Collapse and expand code
- Reuse code with snippets
- Lint code
- Optimize code
- Edit code in Design view
- Work with head content for pages
- Insert server-side includes in Dreamweaver
- Using tag libraries in Dreamweaver
- Importing custom tags into Dreamweaver
- Use JavaScript behaviors (general instructions)
- Apply built-in JavaScript behaviors
- About XML and XSLT
- Perform server-side XSL transformations in Dreamweaver
- Performing client-side XSL transformations in Dreamweaver
- Add character entities for XSLT in Dreamweaver
- Format code
- Cross-product workflows
- Installing and using extensions to Dreamweaver
- In-App updates in Dreamweaver
- Insert Microsoft Office documents in Dreamweaver (Windows only)
- Working with Fireworks and Dreamweaver
- Edit content in Dreamweaver sites using Contribute
- Dreamweaver-Business Catalyst integration
- Create personalized email campaigns
- Templates
- About Dreamweaver templates
- Recognizing templates and template-based documents
- Create a Dreamweaver template
- Create editable regions in templates
- Create repeating regions and tables in Dreamweaver
- Use optional regions in templates
- Define editable tag attributes in Dreamweaver
- How to create nested templates in Dreamweaver
- Edit, update, and delete templates
- Export and import xml content in Dreamweaver
- Apply or remove a template from an existing document
- Edit content in Dreamweaver templates
- Syntax rules for template tags in Dreamweaver
- Set highlighting preferences for template regions
- Benefits of using templates in Dreamweaver
- Mobile and multiscreen
- Dynamic sites, pages and web forms
- Understand web applications
- Set up your computer for application development
- Troubleshoot database connections
- Removing connection scripts in Dreamweaver
- Design dynamic pages
- Dynamic content sources overview
- Define sources of dynamic content
- Add dynamic content to pages
- Changing dynamic content in Dreamweaver
- Display database records
- Provide and troubleshoot live data in Dreamweaver
- Add custom server behaviors in Dreamweaver
- Building forms using Dreamweaver
- Use forms to collect information from users
- Create and enable ColdFusion forms in Dreamweaver
- Create web forms
- Enhanced HTML5 support for form elements
- Develop a form using Dreamweaver
- Building applications visually
- Build master and detail pages in Dreamweaver
- Build search and results pages
- Build a record insert page
- Build an update record page in Dreamweaver
- Building record delete pages in Dreamweaver
- Use ASP commands to modify database in Dreamweaver
- Build a registration page
- Build a login page
- Build a page that only authorized users can access
- Securing folders in Coldfusion using Dreamweaver
- Using ColdFusion components in Dreamweaver
- Test, preview, and publish websites
- Troubleshooting
Learn how to clean up code in Dreamweaver, check for browser compatibility, validate XML documents, and make pages XHTML compliant.
Clean up code
You can automatically remove empty tags, combine nested font tags, and otherwise improve messy or unreadable HTML or XHTML code.
For information on how to clean up HTML generated from a Microsoft Word document, see Open and edit existing documents .
-
-
In the dialog box that appears, select any of the options, and click OK.Lưu ý:
Depending on the size of your document and the number of options selected, it may take several seconds to complete the cleanup.
Remove Empty Container Tags
Removes any tags that have no content between them. For example, <b></b> and <font color="#FF0000"></font> are empty tags, but the <b> tag in <b>some text</b> is not.
Remove Redundant Nested Tags
Removes all redundant instances of a tag. For example, in the code <b>This is what I <b>really</b> wanted to say</b>, the b tags surrounding the word really are redundant and would be removed.
Remove Non-Dreamweaver HTML Comments
Removes all comments that were not inserted by Dreamweaver. For example, <!‑‑begin body text--> would be removed, but <!‑‑TemplateBeginEditable name="doctitle”‑‑> wouldn’t, because it’s a Dreamweaver comment that marks the beginning of an editable region in a template.
Remove Dreamweaver Special Markup
Removes comments that Dreamweaver adds to code to allow documents to be automatically updated when templates and library items are updated. If you select this option when cleaning up code in a template-based document, the document is detached from the template. For more information, see Detach a document from a template.
Remove Specific Tag(s)
Removes the tags specified in the adjacent text box. Use this option to remove custom tags inserted by other visual editors and other tags that you don’t want to appear on your site (for example, blink). Separate multiple tags with commas (for example, font,blink).
Combine Nested <font> Tags When Possible
Consolidates two or more font tags when they control the same range of text. For example, <font size="7"><font color="#FF0000">big red</font></font> would be changed to <font size="7" color="#FF0000">big red</font>.
Show Log On Completion
Displays an alert box with details about the changes made to the document as soon as the cleanup is finished.
Verify tags and braces are balanced
You can check to make sure the tags, parentheses (( )), braces ({ }), and square brackets ([ ]) in your page are balanced. Balanced means that every opening tag, parenthesis, brace, or bracket has a corresponding closing one, and vice versa.
Check for balanced tags
-
Open the document in Code view.
-
Place the insertion point in the nested code you want to check.
-
Select Edit > Select Parent Tag.
The enclosing matching tags (and their contents) are selected in your code. If you keep selecting Edit > Select Parent Tag, and your tags are balanced, eventually Dreamweaver will select the outermost html and /html tags.
Check for balanced parentheses, braces, or square brackets
-
Open the document in Code view.
-
Place the insertion point in the code you want to check.
-
Select Edit > Code > Balance Braces.
All of the code between the enclosing parentheses, braces, or square brackets is selected. Choosing Edit > Code > Balance Braces again selects all of the code inside the parentheses, braces, or square brackets that enclose the new selection.
Check for browser compatibility
The Browser Compatibility Check (BCC) feature helps you locate combinations of HTML and CSS that can trigger browser rendering bugs. This feature also tests the code in your documents for any CSS properties or values that are unsupported by your target browsers.
Validate XML documents
You can set preferences for the Validator, the specific problems that the Validator should check for, and the types of errors that the Validator should report.
-
Do one of the following:
For an XML or XHTML file, select File > Validate > As XML.
The Validation tab of the Results panel displays a “No errors or warnings” message or lists the syntax errors it found.
-
Double-click an error message to highlight the error in the document.
-
To save the report as an XML file, click the Save Report button.
-
To view the report in your primary browser (which lets you print the report), click the Browse Report button.
Validate documents using W3C validator
Dreamweaver helps you create standards-compliant web pages with its in-built support for the W3C validator. The W3C validator validates your HTML and XML documents for conformance to HTML, XHTML, or XML standards. You can validate both open documents, and files posted on a live server.
Use the report that is generated after validation to fix errors in your file.
In Dreamweaver preferences, you can specify the parser against which your documents must be validated. This preference is used as a fallback setting in cases where the DOCTYPE cannot be detected automatically.
Validate an open document
-
Select Window > Results > Validation to open the Validation panel. This panel displays the results of the validation.
-
Select File > Validate > Current Document (W3C).
Validate a live document
For live documents, Dreamweaver validates code received by the browser. This code is displayed when you right-click in your browser, and choose the option to view the source code. Validating live documents is especially useful when validating dynamic pages using PHP, JSP, and so on.
The Validate Live Document option is enabled only when the URL of the page being validated begins with http.
-
Select Window > Results > Validation to open the Validation panel. This panel displays the results of the validation.
-
Click Live View.
-
Select File > Validate > Live Document (W3C).
For live documents, when you double-click an error in the W3C validation panel, a separate window opens. The window displays the browser-generated code, and the line with the error is highlighted.
Customize validation settings
-
Select Window > Results > Validation to open the Validation panel.
-
In the W3C Validation panel, click the W3C Validation (Play) icon. Select Settings.
-
Select a DOCTYPE for validation if a DOCTYPE has not been explicitly specified for the document.
-
If you do not want errors and warnings displayed, clear the options.
-
Click Manage if you want to delete any warnings or errors that you have hidden using the W3C Validation panel. When you remove warnings and errors, they are not displayed when you select Show All in the W3C validation panel.
-
Select Don't Show W3C Validator Notification Dialog if you do not want the W3C Validator Notification dialog displayed when you begin validation.
Work with validation reports
After validation is complete, the validation reports are displayed in the W3C Validation panel.
For more information on the error or warning, select the error/warning in the W3C Validation panel. Click More Info.
To save the report as an XML file, click Save Report.
To view the entire report in HTML, click Browse Report. The HTML report provides the complete list of errors and warnings along with a summary.
To jump to the location in the code containing the error, select the error in the W3C Validation panel. Click the Options button, and select Go to Line.
To hide errors/warnings, select the error/warning. Click the Options button, and select Hide Error.
To view all the errors and warnings, including the hidden errors, click the Options button. Select Show All. Any hidden errors and warnings you deleted in the Preferences dialog are not listed.
To clear all the results in the W3C validation panel, click the Options button. Select Clear Results.
Set Validator preferences
In addition to the standard W3C Validator, Dreamweaver supports external code validators that you install as extensions. When you install an external validator extension, Dreamweaver lists its preferences in the W3C Validator category of the Preferences dialog box.
-
Select Edit > Preferences (Windows) or Dreamweaver > Preferences (Macintosh).
-
Select W3C Validator from the Category list on the left.
-
Select tag libraries to validate against.
You can’t select multiple versions of the same tag library or language; for example, if you select HTML 4.01, you can’t also select HTML 5. Select the earliest version you want to validate against. For example, if a document contains valid HTML 4.01 code, it will also be valid HTML 5 code.
-
Select Display options for the types of errors and warnings that you want the Validator report to include.
-
Click Apply to apply the changes, and click Close to close the Preferences dialog box.
Make pages XHTML-compliant
When you create a page, you can make it XHTML-compliant. You can also make an existing HTML document XHTML-compliant.
Create XHTML-compliant documents
-
Select File > New.
-
Select a category and type of page to create.
-
Select one of the XHTML document type definitions (DTD) from the DocType pop‑up menu on the far right of the dialog box, and click Create.
For example, you can make an HTML document XHTML-compliant by selecting XHTML 1.0 Transitional or XHTML 1.0 Strict from the pop‑up menu.
Lưu ý:Not all document types can be made XHTML-compliant.
Create XHTML-compliant documents by default
-
Select Edit > Preferences or Dreamweaver > Preferences (Mac OS X), and select the New Document category.
-
Select a default document and select one of the XHTML document type definitions from the Default Document Type (DTD) pop‑up menu, and click OK.
For example, you can make an HTML document XHTML-compliant by selecting XHTML 1.0 Transitional or XHTML 1.0 Strict from the pop‑up menu.
Make an existing HTML document XHTML-compliant
-
Open a document, and do one of the following:
For a document without frames, select File > Convert, and then select one of the XHTML document type definitions.
For example, you can make an HTML document XHTML-compliant by selecting XHTML 1.0 Transitional or XHTML 1.0 Strict from the pop‑up menu.
For a document with frames, select a frame and select File > Convert, and then select one of the XHTML document type definitions.
-
To convert the whole document, repeat this step for every frame and the frameset document.
You can’t convert an instance of a template, because it must be in the same language as the template on which it’s based. For example, a document based on an XHTML template will always be in XHTML, and a document based on a non-XHTML-compliant HTML template will always be HTML and can’t be converted to XHTML or any other language.