About creating Dreamweaver documents

Dreamweaver offers a flexible environment for working with a variety of web documents. In addition to HTML documents, you can create and open a variety of text-based documents, including ColdFusion Markup Language (CFML), ASP, JavaScript, and Cascading Style Sheets (CSS). Source code files, such as Visual Basic, .NET, C#, and Java, are also supported.

Dreamweaver provides several options for creating a new document. You can create any of the following:

  • A new blank document or template

  • A document based on one of the predesigned page layouts that comes with Dreamweaver, including over 30 CSS-based page layouts

  • A document based on one of your existing templates

    You can also set document preferences. For example, if you typically work with one type of document, you can set it as the default document type for new pages you create.

    You can easily define document properties, such as meta tags, document title, and background colors, and several other page properties in either Design view or Code view.

Dreamweaver file types

You can work with a variety of file types in Dreamweaver. The primary kind of file you will work with is the HTML file. HTML files—or Hypertext Markup Language files—contain the tag-based language responsible for displaying a web page in a browser. You can save HTML files with either the .html or .htm extension. Dreamweaver saves files using the .html extension by default.

Dreamweaver lets you create and edit HTML5-based web pages. Starter layouts are also available for building HTML5 pages from scratch.

Following are some of the other common file types you might use when working in Dreamweaver:

CSS

Cascading Style Sheet files have a .css extension. They are used to format HTML content and control the positioning of various page elements.

GIF

Graphics Interchange Format files have a .gif extension. GIF format is a popular web graphic format for cartoons, logos, graphics with transparent areas, and animations. GIFs contain a maximum of 256 colors.

JPEG

Joint Photographic Experts Group files (named after the organization that created the format) have a .jpg extension, and are usually photographs or high-color images. The JPEG format is best for digital or scanned photographs, images using textures, images with gradient color transitions, and any images that require more than 256 colors.

XML

Extensible Markup Language files have a .xml extension. They contain data in a raw form that can be formatted using XSL (Extensible Stylesheet Language).

XSL

Extensible Stylesheet Language files have a .xsl or .xslt extension. They are used to style XML data that you want to display on a web page.

Create a layout using a blank page

You can create a page that contains a predesigned CSS layout, or create a completely blank page and then create a layout of your own.

  1. Select File > New.

  2. In the Blank Page category of the New Document dialog box, select the kind of page you want to create from the Page Type column. For example, select HTML to create a plain HTML page.

  3. If you want your new page to contain a CSS layout, select a predesigned CSS layout from the Layout column; otherwise, select None. Based on your selection, a preview and description of the selected layout appears on the right side of the dialog box.

    The predesigned CSS layouts provide the following types of columns:

    Fixed

    Column width is specified in pixels. The column does not resize based on the size of the browser or the site visitor’s text settings.

    Liquid

    Column width is specified as a percentage of the site visitor’s browser width. The design adapts if the site visitor makes the browser wider or narrower, but does not change based on the site visitor’s text settings.

    Dreamweaver also offers two HTML5 CSS layouts: two- and three-column fixed.

    Note:

    In Dreamweaver CC and later, only HTML5 CSS layouts are available.

  4. Select a document type from the DocType pop-up menu. In most cases, you can use the default selection, XHTML 1.0 Transitional or HTML5 (Dreamweaver CC).

    Selecting one of the XHTML document type definitions from the DocType (DTD) menu makes your page XHTML-compliant. For example, you can make an HTML document XHTML-compliant by selecting XHTML 1.0 Transitional or XHTML 1.0 Strict from the menu. XHTML (Extensible Hypertext Markup Language) is a reformulation of HTML as an XML application. Generally, using XHTML gives you the benefits of XML, while ensuring the backward and future compatibility of your web documents.

    Note:

    For more information about XHTML, see the World Wide Web Consortium (W3C) website, which contains the specification for XHTML 1.1 - Module-Based XHTML (www.w3.org/TR/xhtml11/) and XHTML 1.0 (www.w3c.org/TR/xhtml1/), as well as XHTML validator sites for web-based files (http://validator.w3.org/) and local files (http://validator.w3.org/file-upload.html).

  5. If you selected a CSS layout in the Layout column, select a location for the layout’s CSS from the Layout CSS pop-up menu.

    Add To Head

    Adds CSS for the layout to the head of the page you’re creating.

    Create New File

    Adds CSS for the layout to a new external CSS file and attaches the new style sheet to the page you’re creating.

    Link To Existing File

    Lets you specify an existing CSS file that already contains the CSS rules needed for the layout. To do this, click the Attach Style Sheet icon above the Attach CSS file pane and select an existing CSS style sheet. This option is particularly useful when you want to use the same CSS layout (the CSS rules for which are contained in a single file) across multiple documents.

  6. (Optional) You can also attach CSS style sheets to your new page (unrelated to the CSS layout) when you create the page. To do this, click the Attach Style Sheet icon  above the Attach CSS File pane and select a CSS style sheet.

    For a detailed walk-through of this process, see David Powers’s article, Automatically attaching a style sheet to new documents.

  7. Select Enable InContext Editing if you want to create a page that becomes InContext Editing-enabled as soon as you save it.

    An InContext Editing-enabled page must have at least one div tag that can be specified as an editable region. For example, if you’ve selected the HTML page type, you must select one of the CSS layouts for your new page, since these layouts already contain pre-defined div tags. The InContext Editing editable region is automatically placed on the div tag with the content ID. You can later add more editable regions to the page if you like.

    Note:

    InContext Editing is removed in Dreamweaver CC and later.

  8. Click Preferences if you want to set default document preferences, such as a document type, encoding, and a file extension.

  9. Click Get More Content if you want to open Dreamweaver Exchange where you can download more page design content.

  10. Click the Create button.

  11. Save the new document (File > Save).

  12. In the dialog box that appears, navigate to the folder where you want to save the file.

    Note:

    It’s a good idea to save your file in a Dreamweaver site.

  13. In the File Name box, type a name for the file.

    Avoid using spaces and special characters in file and folder names, and do not begin a filename with a numeral. In particular, do not use special characters (such as é, ç, or ¥) or punctuation marks (such as colons, slashes, or periods) in the names of files you intend to put on a remote server; many servers change these characters during upload, which will cause any links to the files to break.

Create a blank template

You can use the New Document dialog box to create Dreamweaver templates. By default, templates are saved in the Templates folder of your site.

  1. Select File > New.

  2. In the New Document dialog box, select the Blank Template category.

  3. Select the kind of page you want to create from the Template Type column. For example, select HTML template to create a plain HTML template, select ColdFusion template to create a ColdFusion template, and so on.

  4. If you want your new page to contain a CSS layout, select a predesigned CSS layout from the Layout column; otherwise, select None. Based on your selection, a preview and description of the selected layout appears on the right side of the dialog box.

    The predesigned CSS layouts provide the following types of columns:

    Fixed

    Column width is specified in pixels. The column does not resize based on the size of the browser or the site visitor’s text settings.

    Liquid

    Column width is specified as a percentage of the site visitor’s browser width. The design adapts if the site visitor makes the browser wider or narrower, but does not change based on the site visitor’s text settings.

  5. Select a document type from the DocType pop-up menu. In most cases, you will want to leave this selected to the default selection, XHTML 1.0 Transitional.

    Selecting one of the XHTML document type definitions from the DocType (DTD) menu makes your page XHTML-compliant. For example, you can make an HTML document XHTML-compliant by selecting XHTML 1.0 Transitional or XHTML 1.0 Strict from the menu. XHTML (Extensible Hypertext Markup Language) is a reformulation of HTML as an XML application. Generally, using XHTML gives you the benefits of XML, while ensuring the backward and future compatibility of your web documents.

    Note:

    For more information about XHTML, see the World Wide Web Consortium (W3C) website, which contains the specification for XHTML 1.1 - Module-Based XHTML (www.w3.org/TR/xhtml11/) and XHTML 1.0 (www.w3c.org/TR/xhtml1/), as well as XHTML validator sites for web-based files (http://validator.w3.org/) and local files (http://validator.w3.org/file-upload.html).

  6. If you selected a CSS layout in the Layout column, select a location for the layout’s CSS from the Layout CSS pop-up menu.

    Add to Head

    Adds CSS for the layout to the head of the page you’re creating.

    Create New File

    Adds CSS for the layout to a new external CSS styles sheet and attaches the new style sheet to the page you’re creating.

    Link To Existing File

    Lets you specify an existing CSS file that already contains the CSS rules needed for the layout. To do this, click the Attach Style Sheet icon  above the Attach CSS file pane and select an existing CSS style sheet. This option is particularly useful when you want to use the same CSS layout (the CSS rules for which are contained in a single file) across multiple documents.

  7. (Optional) You can also attach CSS style sheets to your new page (unrelated to the CSS layout) when you create the page. To do this, click the Attach Style Sheet icon  above the Attach CSS file pane and select a CSS style sheet.

  8. Select Enable InContext Editing if you want to create a page that becomes InContext Editing-enabled as soon as you save it.

    An InContext Editing-enabled page must have at least one div tag that can be specified as an editable region. For example, if you’ve selected the HTML page type, you must select one of the CSS layouts for your new page, since these layouts already contain pre-defined div tags. The InContext Editing editable region is automatically placed on the div tag with the content ID. You can later add more editable regions to the page if you like.

  9. Click Preferences if you want to set default document preferences, such as a document type, encoding, and a file extension.

  10. Click Get More Content if you want to open Dreamweaver Exchange where you can download more page design content.

  11. Click the Create button.

  12. Save the new document (File > Save). If you haven’t added editable regions to the template yet, a dialog box appears telling you that there are no editable regions in the document. Click OK to close the dialog box.

  13. In the Save As dialog box, select a site in which to save the template.
  14. In the File Name box, type a name for the new template. You do not need to append a file extension to the name of the template. When you click Save, the .dwt extension is appended to the new template, which is saved in the Templates folder of your site.

    Avoid using spaces and special characters in file and folder names and do not begin a filename with a numeral. In particular, do not use special characters (such as é, ç, or ¥) or punctuation (such as colons, slashes, or periods) in the names of files you intend to put on a remote server; many servers change these characters during upload, which will cause any links to the files to break.

Create a page based on an existing template

You can select, preview, and create a new document from an existing template. You can either use the New Document dialog box to select a template from any of your Dreamweaver-defined sites or use the Assets panel to create a new document from an existing template.

Create a document based on a template

  1. Select File > New.

  2. In the New Document dialog box, select the Page From Template category.

  3. In the Site column, select the Dreamweaver site that contains the template you want use, and then select a template from the list on the right.

  4. Deselect Update Page When Template Changes if you don’t want to update this page each time you make changes to the template on which this page is based.

  5. Click Preferences if you want to set default document preferences, such as a document type, encoding, and a file extension.

  6. Click Get More Content if you want to open Dreamweaver Exchange where you can download more page design content.

  7. Click Create and save the document (File > Save).

Create a document from a template in the Assets panel

  1. Open the Assets panel (Window > Assets), if it is not already open.

  2. In the Assets panel, click the Templates icon  on the left to view the list of templates in your current site.

    Note:

    If you just created the template you want to apply, you might need to click the Refresh button to see it.

  3. Right-click (Windows) or Control‑click (Macintosh) the template you want to apply, then select New From Template.

    The document opens in the Document window.

  4. Save the document.

Create a page based on a Dreamweaver sample file

Dreamweaver comes with several professionally developed CSS design files and starter pages for mobile applications. You can use these sample files as starting points for designing pages in your sites. When you create a document based on a sample file, Dreamweaver creates a copy of the file.

You can preview a sample file and read a brief description of a document’s design elements in the New Document dialog box. In the case of CSS style sheets, you can copy a predesigned style sheet and apply it to your documents.

  1. Select File > New.

  2. In the New Document dialog box, select the Page From Sample category.

    In Dreamweaver CC, select Starter Templates category.

  3. In the Sample Folder column, select CSS Style Sheet or Mobile Starters; then select a sample file from the list on the right.

    Note:

    CSS Style Sheet option is removed in Dreamweaver CC and later

  4. Click the Create button.

    The new document opens in the Document window (Code and Design views). If you selected CSS Style Sheet, the CSS style sheet opens in Code view.

  5. Save the document (File > Save).

  6. If the Copy Dependent Files dialog box appears, set the options, and then click Copy to copy the assets to the selected folder.

    You can choose your own location for the dependent files or use the default folder location Dreamweaver generates (based on the sample file’s source name).

Create other kinds of pages

The Other category of the New Document dialog box lets you create various types of pages that you might want to use in Dreamweaver, including C#, VBScript, and text-only pages.

  1. Select File > New.

  2. In the New Document dialog box, select the Other category.

    Note:

    Other category is removed in Dreamweaver CC and later.

  3. Select the kind of document you want to create from the Page Type column and click the Create button.

  4. Save the document (File > Save).

Save and revert documents

You can save a document using its current name and location, or save a copy of a document using a different name and location.

When naming files, avoid using spaces and special characters in file and folder names. In particular, do not use special characters (such as é, ç, or ¥) or punctuation (such as colons, slashes, or periods) in the names of files you intend to put on a remote server; many servers change these characters during upload, which will cause any links to the files to break. Also, do not begin a filename with a numeral.

Save a document

  1. Do one of the following:
    • To overwrite the current version on the disk, and save any changes you have made, select File > Save.
    • To save the file in a different folder or using a different name, select File > Save As.
  2. In the Save As dialog box that appears, navigate to the folder where you want to save the file.
  3. In the File Name text box, type a name for the file.

  4. Click Save to save the file.

Save all open documents

  1. Select File > Save All.

  2. If there are any unsaved documents open, the Save As dialog box is displayed for each unsaved document.

    In the dialog box that appears, navigate to the folder where you want to save the file.

  3. In the File Name box, type a name for the file and click Save.

Revert to the last saved version of a document

  1. Select File > Revert.

    A dialog box asks if you want to discard your changes, and revert to the previously saved version.

  2. Click Yes to revert to the previous version; click No to keep your changes.

    Note:

    If you save a document, and then exit Dreamweaver, you cannot revert to the previous version of the document when you restart Dreamweaver.

Set default document type and encoding

You can define which document type is used as a default document for a site.

For example, if most pages in your site are of a specific file type (such as ColdFusion, HTML, or ASP documents), you can set document preferences that automatically create new documents of the specified file type.

  1. Select Edit > Preferences (Windows) or Dreamweaver > Preferences (Macintosh).

    Note:

    You can also click the Preferences button in the New Document dialog box to set new document preferences when you create a new document.

  2. Click New Document from the category list on the left.

  3. Set or change preferences as necessary, and click OK to save them.

    Default Document

    Select a document type that will be used for pages that you create.

    Default Extension

    Specify the file extension you prefer (.htm or .html) for new HTML pages you create.

    Note: This option is disabled for other file types.

    Default Document Type (DDT)

    Select one of the XHTML document type definitions (DTD) to make new pages XHTML-compliant. For example, you can make an HTML document XHTML-compliant by selecting XHTML 1.0 Transitional or XHTML 1.0 Strict from the menu.

    Default Encoding

    Specify the encoding to be used when a new page is created, as well as when a document is opened that does not specify any encoding.

    If you select Unicode (UTF‑8) as the document encoding, entity encoding is not necessary because UTF‑8 can safely represent all characters. If you select another document encoding, entity encoding may be necessary to represent certain characters. For more information on character entities, see www.w3.org/TR/REC-html40/sgml/entities.html.

    If you select Unicode (UTF‑8) as a default encoding, you can include a Byte Order Mark (BOM) in the document by selecting the Include Unicode Signature (BOM) option.

    A BOM is 2-4 bytes at the beginning of a text file that identifies a file as Unicode, as well as the byte order of the following bytes. Because UTF‑8 has no byte order, adding a UTF‑8 BOM is optional. For UTF‑16 and UTF‑32, it is required.

    Unicode Normalization Form

    Select one of these options if you select Unicode (UTF-8) as a default encoding.

    There are four Unicode Normalization Forms. The most important is Normalization Form C because it's the most common one used in the Character Model for the World Wide Web. Adobe provides the other three Unicode Normalization Forms for completeness.

    Show New Document Dialog Box on Control+N

    Deselect this option (“on Command+N” for Macintosh) to automatically create a document of the default document type when you use the key command.

    In Unicode, there are characters that are visually similar but can be stored within the document in different ways. For example, “ë” (e‑umlaut) can be represented as a single character, “e‑umlaut,” or as two characters, “regular Latin e” + “combining umlaut.” A Unicode combining character is one that gets used with the previous character, so the umlaut would appear above the “Latin e.” Both forms result in the same visual typography, but what is saved in the file is different for each form.

    Normalization is the process of making sure all characters that can be saved in different forms are all saved using the same form. That is, all “ë” characters in a document are saved as single “e‑umlaut” or as “e” + “combining umlaut,” and not as both forms in one document.

    For more information on Unicode Normalization and the specific forms that can be used, see the Unicode website at www.unicode.org/reports/tr15.

Convert HTML5 to an older DocType

Using File > Convert to switch from HTML5 to an older DOCTYPE doesn’t remove HTML5 elements or attributes. Only the DOCTYPE changes, and trailing slashes (for XHTML) are inserted.

Semantic tags, such as <header> and <article>, and attributes such as required, placeholder, and type="number" are not affected.

Note:

Convert option is removed in Dreamweaver CC and later.

Set the default file extension of new HTML documents

You can define the default file extension of HTML documents created in Dreamweaver. For example, you can use an .htm or .html extension for all new HTML documents.

  1. Select Edit > Preferences (Windows) or Dreamweaver > Preferences (Macintosh).

    Note:

    You can also click the Preferences button in the New Document dialog box to set new document preferences when you create a new document.

  2. Click New Document from the category list on the left.

  3. Make sure that HTML is selected in the Default Document pop-up menu.

  4. In the Default Extension box, specify the file extension you want for new HTML documents created in Dreamweaver.

    For Windows, you can specify the following extensions: .html, .htm, .shtml, .shtm, .stm, .tpl, .lasso, .xhtml.

    For Macintosh, you can specify the following extensions: .html, .htm, .shtml, .shtm, .tpl, .lasso, .xhtml, .ssi.

Open and edit existing documents

You can open an existing web page or text-based document, whether or not it was created in Dreamweaver, and edit it in either Design view or Code view.

If the document you open is a Microsoft Word file that was saved as an HTML document, you can use the Cleanup Word HTML command to remove the extraneous markup tags that Word inserts into HTML files.

To clean up HTML or XHTML that was not generated by Microsoft Word, use the Cleanup HTML command.

You can also open non-HTML text files, such as JavaScript files, XML files, CSS style sheets, or text files saved by word processors or text editors.

  1. Select File > Open.

    Note:

    You can also use the Files panel to open files.

  2. Navigate to and select the file you want to open.

    Note:

    If you haven’t already done so, it’s a good idea to organize files you plan to open and edit in a Dreamweaver site, instead of opening them from another location.

  3. Click Open.

    The document opens in the Document window. JavaScript, text, and CSS Style Sheets open in Code view by default. You can update the document while working in Dreamweaver, and save the changes in the file.

Dreamweaver lets you view files related to your main document, without losing the main document’s focus. For example, if you have CSS and JavaScript files attached to a main document, Dreamweaver lets you view and edit these related files in the Document window while keeping the main document visible.

Note:

Dynamically Related Files (such as PHP files in Content Management Systems) are covered in the next Help section.

By default, Dreamweaver displays the names of all files related to a main document in a Related Files toolbar below the main document’s title. The order of the buttons in the toolbar follows the order of related files links that exist within the main document.

Note:

If a related file is missing, Dreamweaver still displays the corresponding button in the Related Files toolbar. If you click the button, however, Dreamweaver does not display anything.

Dreamweaver supports the following kinds of related files:

  • Client-side script files

  • Server Side Includes

  • Spry data set sources (XML and HTML)

  • External CSS style sheets (including nested style sheets)

Do one of the following:

  • In the Related Files toolbar at the top of the document, click the filename of the related file you want to open.

  • In the Related Files toolbar, right-click the filename of the related file you want to open and select Open as Separate File from the context menu. When you open a related file by this method, the main document does not remain simultaneously visible.

  1. Place the insertion point on a line or in an area that you know is affected by a related file.

  2. Wait for the Code Navigator indicator to appear, and then click it to open the Code Navigator.

  3. Hover over the items in the Code Navigator to see more information about them. For example, if you want to change a particular CSS color property, but don’t know which rule it resides in, you can find the property by hovering over the available rules in the Code Navigator.

  4. Click the item you’re interested in to open the corresponding related file.

Return to the source code of the main document

  • Click the Source Code button in the Related Files toolbar.

You can view related files in a number of ways:

  • When you open a related file from Design view or Code and Design views (Split view), the related file displays in a split view above the Design view of the main document.

    You can select View > Design View on Top if you want the related file to display at the bottom of the Document window instead.

  • When you open a related file from vertically split Code and Design views (View > Split vertically), the related file displays in a split view alongside the Design view of the main document.

    You can select or deselect Design View on Left (View > Design View on Left), depending on where you want the Design view.

  • When you open a related file from Split Code view or Vertical Split Code view (View > Split Code view, and View > Split vertically), the related file displays in a split view beneath, above, or alongside the source code for the main document, depending on the options you have selected.

    The “code view” in the display option refers to the source code of the main document. For example, if you select View > Code View on Top, Dreamweaver displays the source code of the main document in the top half of the Document window. If you select View > Code View on Left, Dreamweaver displays the source code of the main document on the left side of the Document window.

  • Standard Code view does not let you display related Documents at the same time as the main document’s source code.

  1. Select Edit > Preferences (Windows) or Dreamweaver > Preferences (Macintosh).

  2. In the General category, deselect Enable Related Files.

The Dynamically-Related Files feature extends the functionality of the Related Files feature by allowing you to see the related files of dynamic pages in the Related Files toolbar. Specifically, the Dynamically-Related Files feature lets you see the numerous dynamic includes that are required to generate the runtime code for popular open-source PHP Content Management System (CMS) frameworks such as WordPress, Drupal and Joomla!

To use the Dynamically-Related Files feature, you must have access to a local or remote PHP application server running WordPress, Drupal, or Joomla! One common approach for testing pages is to set up a localhost PHP application server, and test the pages locally.

Before you test pages, you’ll need to perform the following steps:

  • Set up a Dreamweaver site and make sure that you have filled out the Web URL text box the Site Setup dialog box.

  • Set up a PHP application server.

    Note: The server must be running before you attempt to work with Dynamically-Related Files in Dreamweaver.

  • Install WordPress, Drupal, or Joomla! on the application server. For more information, see:

  • In Dreamweaver, define a local folder where you’ll download and edit your CMS files.

  • Define the location of the installed WordPress, Drupal, or Joomla! files as your remote and testing folder.

  • Download (Get) your CMS files from the remote folder.

When you open a page that is associated with Dynamically-Related Files, Dreamweaver can discover the files automatically, or let you discover the files manually (which you do by clicking a link in the Info bar above the page). The default setting is manual discovery.

  1. Choose Edit > Preferences (Windows) or Dreamweaver > Preferences (Macintosh OS).

  2. In the General category, make sure the Enable Related Files option is selected.

  3. Select Manually or Automatically from the Dynamically-Related Files pop-up menu. You can also disable the discovery entirely by selecting Disabled.

  1. Open a page that has Dynamically-Related Files associated with it—for example, the site root index.php page of a WordPress, Drupal, or Joomla! site.

  2. If the discovery of Dynamically-Related Files is set to manual (the default), click the Discover link in the Info bar that appears above the page in the Document window.

    If the discovery of Dynamically-Related Files is automatically enabled, then a list of Dynamically-Related Files appears in the Related Files toolbar.

The order of Related and Dynamically-Related Files in the Related Files toolbar is as follows:

  • Static related files (i.e. related files that do not require any sort of dynamic processing)

  • External related files (i.e. .css and .js files) that are attached to dynamic path server include files

  • Dynamic path server include files (i.e. .php, .inc, and .module files)

Because Related Files and Dynamically-Related Files can often be numerous, Dreamweaver lets you filter Related Files so that you can precisely locate the files you want to work with.

  1. Open a page that has Related Files associated with it.

  2. Discover Dynamically-Related Files if necessary.

  3. Click the Filter Related Files icon at the right side of the Related Files toolbar.

  4. Select the types of files you want to see in the Related Files toolbar. By default, Dreamweaver selects all Related Files.

  5. To create a custom filter, click the Filter Related Files icon and choose Custom Filter.

    The Custom Filter dialog only allows for the filtering of exact file names (style.css), file extensions (.php), and wildcard expressions using asterisks (*menu*). You can filter on multiple wildcard expressions by separating each expression with a semi-colon (for example, style.css;*.js;*tpl.php).

Note:

Filter settings do not persist once you close the file.

Clean up Microsoft Word HTML files

You can open documents saved by Microsoft Word as HTML files, and then use the Clean Up Word HTML command to remove the extraneous HTML code generated by Word. The Clean Up Word HTML command is available for documents saved as HTML files by Word 97 or later.

The code that Dreamweaver removes is primarily used by Word to format and display documents in Word and is not needed to display the HTML file. Retain a copy of your original Word (.doc) file as a backup, because you may not be able to reopen the HTML document in Word once you’ve applied the Clean Up Word HTML feature.

To clean up HTML or XHTML that was not generated by Microsoft Word, use the Cleanup HTML command.

  1. Save your Microsoft Word document as an HTML file.

    Note:

    In Windows, close the file in Word to avoid a sharing violation.

  2. Open the HTML file in Dreamweaver.

    To view the HTML code generated by Word, switch to Code view (View > Code).

  3. Select Commands > Clean Up Word HTML.

    Note:

    If Dreamweaver is unable to determine which version of Word was used to save the file, select the correct version from the pop‑up menu.

  4. Select (or deselect) options for the cleanup. The preferences you enter are saved as default cleanup settings.

    Dreamweaver applies the cleanup settings to the HTML document and a log of the changes appears (unless you deselected that option in the dialog box).

    Remove All Word Specific Markup

    Removes all Microsoft Word-specific HTML, including XML from HTMLtags, Word custom metadata and link tags in the head of the document, Word XML markup, conditional tags and their contents, and empty paragraphs and margins from styles. You can select each of these options individually using the Detailed tab.

    Clean Up CSS

    Removes all Word-specific CSS, including inline CSS styles when possible (where the parent style has the same style properties), style attributes beginning with “mso,” non-CSS style declarations, CSS style attributes from tables, and all unused style definitions from the head. You can further customize this option using the Detailed tab.

    Clean Up <font> Tags

    Removes HTML tags, converting the default body text to size 2 HTML text.

    Fix Invalidly Nested Tags

    Removes the font markup tags inserted by Word outside the paragraph and heading (block-level) tags.

    Apply Source Formatting

    Applies the source formatting options you specify in HTML Format preferences and SourceFormat.txt to the document.

    Show Log On Completion

    Displays an alert box with details about the changes made to the document as soon as the cleanup is finished.

  5. Click OK, or click the Detailed tab if you want to further customize the Remove All Word Specific Markup and Clean Up CSS options, and then click OK.

This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License  Twitter™ and Facebook posts are not covered under the terms of Creative Commons.

Legal Notices   |   Online Privacy Policy