User Guide Cancel

Optimize code

  1. Dreamweaver User Guide
  2. Introduction
    1. Responsive web design basics
    2. What's new in Dreamweaver
    3. Web development using Dreamweaver - An Overview
    4. Dreamweaver / Common Questions
    5. Keyboard shortcuts
    6. Dreamweaver system requirements
    7. Feature summary
  3. Dreamweaver and Creative Cloud
    1. Synchronize Dreamweaver settings with Creative Cloud
    2. Creative Cloud Libraries in Dreamweaver
    3. Using Photoshop files in Dreamweaver
    4. Work with Adobe Animate and Dreamweaver
    5. Extract web-optimized SVG files from Libraries
  4. Dreamweaver workspaces and views
    1. The Dreamweaver workspace
    2. Optimize Dreamweaver workspace for visual development
    3. Search files based on filename or content | Mac OS
  5. Set up sites
    1. About Dreamweaver sites
    2. Set up a local version of your site
    3. Connect to a publishing server
    4. Set up a testing server
    5. Import and export Dreamweaver site settings
    6. Bring existing websites from a remote server to your local site root
    7. Accessibility features in Dreamweaver
    8. Advanced settings
    9. Set site preferences for transferring files
    10. Specify proxy server settings in Dreamweaver
    11. Synchronize Dreamweaver settings with Creative Cloud
    12. Using Git in Dreamweaver
  6. Manage files
    1. Create and open files
    2. Manage files and folders
    3. Getting and putting files to and from your server
    4. Check in and check out files
    5. Synchronize files
    6. Compare files for differences
    7. Cloak files and folders in your Dreamweaver site
    8. Enable Design Notes for Dreamweaver sites
    9. Preventing potential Gatekeeper exploit
  7. Layout and design
    1. Use visual aids for layout
    2. About using CSS to lay out your page
    3. Design responsive websites using Bootstrap
    4. Creating and using media queries in Dreamweaver
    5. Present content with tables
    6. Colors
    7. Responsive design using fluid grid layouts
    8. Extract in Dreamweaver
  8. CSS
    1. Understand Cascading Style Sheets
    2. Laying out pages using CSS Designer
    3. Using CSS preprocessors in Dreamweaver
    4. How to set CSS Style preferences in Dreamweaver
    5. Move CSS rules in Dreamweaver
    6. Convert inline CSS to a CSS rule in Dreamweaver
    7. Work with div tags
    8. Apply gradients to background
    9. Create and edit CSS3 transition effects in Dreamweaver
    10. Format code
  9. Page content and assets
    1. Set page properties
    2. Set CSS heading properties and CSS link properties
    3. Work with text
    4. Find and replace text, tags, and attributes
    5. DOM panel
    6. Edit in Live View
    7. Encoding documents in Dreamweaver
    8. Select and view elements in the Document window
    9. Set text properties in the Property inspector
    10. Spell check a web page
    11. Using horizontal rules in Dreamweaver
    12. Add and modify font combinations in Dreamweaver
    13. Work with assets
    14. Insert and update dates in Dreamweaver
    15. Create and manage favorite assets in Dreamweaver
    16. Insert and edit images in Dreamweaver
    17. Add media objects
    18. Adding videos in Dreamweaver
    19. Insert HTML5 video
    20. Insert SWF files
    21. Add audio effects
    22. Insert HTML5 audio in Dreamweaver
    23. Work with library items
    24. Using Arabic and Hebrew text in Dreamweaver
  10. Linking and navigation
    1. About linking and navigation
    2. Linking
    3. Image maps
    4. Troubleshoot links
  11. jQuery widgets and effects
    1. Use jQuery UI and mobile widgets in Dreamweaver
    2. Use jQuery effects in Dreamweaver
  12. Coding websites
    1. About coding in Dreamweaver
    2. Coding environment in Dreamweaver
    3. Set coding preferences
    4. Customize code coloring
    5. Write and edit code
    6. Code hinting and code completion
    7. Collapse and expand code
    8. Reuse code with snippets
    9. Lint code
    10. Optimize code
    11. Edit code in Design view
    12. Work with head content for pages
    13. Insert server-side includes in Dreamweaver
    14. Using tag libraries in Dreamweaver
    15. Importing custom tags into Dreamweaver
    16. Use JavaScript behaviors (general instructions)
    17. Apply built-in JavaScript behaviors
    18. About XML and XSLT
    19. Perform server-side XSL transformations in Dreamweaver
    20. Performing client-side XSL transformations in Dreamweaver
    21. Add character entities for XSLT in Dreamweaver
    22. Format code
  13. Cross-product workflows
    1. Installing and using extensions to Dreamweaver
    2. In-App updates in Dreamweaver
    3. Insert Microsoft Office documents in Dreamweaver (Windows only)
    4. Working with Fireworks and Dreamweaver
    5. Edit content in Dreamweaver sites using Contribute
    6. Dreamweaver-Business Catalyst integration
    7. Create personalized email campaigns
  14. Templates
    1. About Dreamweaver templates
    2. Recognizing templates and template-based documents
    3. Create a Dreamweaver template
    4. Create editable regions in templates
    5. Create repeating regions and tables in Dreamweaver
    6. Use optional regions in templates
    7. Define editable tag attributes in Dreamweaver
    8. How to create nested templates in Dreamweaver
    9. Edit, update, and delete templates
    10. Export and import xml content in Dreamweaver
    11. Apply or remove a template from an existing document
    12. Edit content in Dreamweaver templates
    13. Syntax rules for template tags in Dreamweaver
    14. Set highlighting preferences for template regions
    15. Benefits of using templates in Dreamweaver
  15. Mobile and multiscreen
    1. Create media queries
    2. Changing page orientation for mobile devices
    3. Create web apps for mobile devices using Dreamweaver
  16. Dynamic sites, pages and web forms
    1. Understand web applications
    2. Set up your computer for application development
    3. Troubleshoot database connections
    4. Removing connection scripts in Dreamweaver
    5. Design dynamic pages
    6. Dynamic content sources overview
    7. Define sources of dynamic content
    8. Add dynamic content to pages
    9. Changing dynamic content in Dreamweaver
    10. Display database records
    11. Provide and troubleshoot live data in Dreamweaver
    12. Add custom server behaviors in Dreamweaver
    13. Building forms using Dreamweaver
    14. Use forms to collect information from users
    15. Create and enable ColdFusion forms in Dreamweaver
    16. Create web forms
    17. Enhanced HTML5 support for form elements
    18. Develop a form using Dreamweaver
  17. Building applications visually
    1. Build master and detail pages in Dreamweaver
    2. Build search and results pages
    3. Build a record insert page
    4. Build an update record page in Dreamweaver
    5. Building record delete pages in Dreamweaver
    6. Use ASP commands to modify database in Dreamweaver
    7. Build a registration page
    8. Build a login page
    9. Build a page that only authorized users can access
    10. Securing folders in Coldfusion using Dreamweaver
    11. Using ColdFusion components in Dreamweaver
  18. Test, preview, and publish websites
    1. Preview pages
    2. Preview Dreamweaver web pages on multiple devices
    3. Test your Dreamweaver site
  19. Troubleshooting
    1. Fixed issues
    2. Known issues

 

 

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 .

  1. In an open document, select Tools > Clean Up HTML.

  2. In the dialog box that appears, select any of the options, and click OK.
    Note:

    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

  1. Open the document in Code view.
  2. Place the insertion point in the nested code you want to check.
  3. 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

  1. Open the document in Code view.
  2. Place the insertion point in the code you want to check.
  3. 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.

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

  2. Double-click an error message to highlight the error in the document.
  3. To save the report as an XML file, click the Save Report button.
  4. 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.

Note:

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

  1. Select Window > Results > Validation to open the Validation panel. This panel displays the results of the validation.

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

  1. Select Window > Results > Validation to open the Validation panel. This panel displays the results of the validation.

  2. Click Live View.

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

  1. Select Window > Results > Validation to open the Validation panel.

  2. In the W3C Validation panel, click the W3C Validation (Play) icon. Select Settings.

  3. Select a DOCTYPE for validation if a DOCTYPE has not been explicitly specified for the document.

  4. If you do not want errors and warnings displayed, clear the options.

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

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

  1. Select Edit > Preferences (Windows) or Dreamweaver > Preferences (Macintosh).
  2. Select W3C Validator from the Category list on the left.

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

  4. Select Display options for the types of errors and warnings that you want the Validator report to include.
  5. 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

  1. Select File > New.
  2. Select a category and type of page to create.
  3. 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.

    Note:

    Not all document types can be made XHTML-compliant.

Create XHTML-compliant documents by default

  1. Select Edit > Preferences or Dreamweaver > Preferences (Mac OS X), and select the New Document category.
  2. 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

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

  2. To convert the whole document, repeat this step for every frame and the frameset document.

Note:

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.

 Adobe

Get help faster and easier

New user?

Adobe MAX 2024

Adobe MAX
The Creativity Conference

Oct 14–16 Miami Beach and online

Adobe MAX

The Creativity Conference

Oct 14–16 Miami Beach and online

Adobe MAX 2024

Adobe MAX
The Creativity Conference

Oct 14–16 Miami Beach and online

Adobe MAX

The Creativity Conference

Oct 14–16 Miami Beach and online