How to create and open files in Dreamweaver

Create and open files

Search
Adobe Dreamweaver User Guide

On this page

Applies to: Adobe Dreamweaver

某些 Creative Cloud 应用程序、服务和功能在中国不可用。

Create, open, edit, save, and revert files in Dreamweaver. Create templates and open related files.

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 - such as JavaScript, PHP, and Cascading Style Sheets (CSS).

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

The New Document dialog

The New Document dialog displays all the supported document file types, including PHP, XML, and SVG.

You can also access predefined layouts, templates, and frameworks from this dialog.

Note:

All the featured starter layouts are built to support responsive websites and are HTML-5 compliant.

Create an HTML 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 New Document category, select the kind of page you want to create from the Document Type column. For example, select HTML to create a plain HTML page.

  3. Select a document type from the DocType pop-up menu. In most cases, you can use the default selection, HTML5.

  4. Select additional options depending on the type of page you want to create.

    • None: Select this option if you want to create a simple web page without using any framework.
    • Bootstrap: Bootstrap templates are predefined layouts using the Bootstrap framework. Select this option if you want to create responsive web pages using the Bootstrap framework.

    Note:

    If you are planning to create responsive web pages, then select the Bootstrap framework.

  5. If you are not using a framework, then:

    • Document Title: Enter your Document Title in this field, and Dreamweaver adds it automatically to the document's <head> section.
    • Doc Type: Select a doc type from the DocType pop-up menu. In most cases, you can use the default selection, HTML5.

    Selecting one of the XHTML document type definitions from the Doc Type 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).

    • Attach CSS: Attach an existing CSS layout to the page.  To do this, click the Attach Style Sheet icon  next to the Attach CSS File pane and select a CSS style sheet.
    Creating a new HTML page without using a framework
    Creating a new HTML page without using a framework

    If you want to create a new page based on your Photoshop comp, then select Use Extract to build your page from Photoshop comps. 

    Selecting this option opens the Extract panel where you can upload a PSD file and get started creating your HTML page.

  6. If you want to create a responsive web page using the Bootstrap framework, then:

    • Bootstrap CSS: Opt to create a new Bootstrap CSS, or use an existing CSS file. If you are using an existing CSS file, provide the path to the file. Make sure that the CSS file is within your site root folder.
    • Attach CSS:  Attach an existing CSS layout to the page.  To do this, click the Attach Style Sheet icon  next to the Attach CSS File pane and select a CSS style sheet.
    • Include a pre-built layout: Select this option if you have a layout already. Click Customize to edit the grid and breakpoint values.
    Creating a new HTML page using the Bootstrap framework
    Creating a new HTML page using the Bootstrap framework

    If you want to create a new page based on your Photoshop comp, then select Use Extract to build your page from Photoshop comps. 

    Selecting this option opens the Extract panel where you can upload a PSD file and get started creating your HTML page.

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

  8. Click the Create button.

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

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

    Note:

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

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

Note:

You cannot create a template without creating a site first. For information on sites, and how to create a site, see About Dreamweaver sites.

  1. Select File > New.

  2. In the New Document dialog box, select the Site Templates category.

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

  4. Select Update page when template changes if you want to want the page to update automatically when you edit the template.

  5. Click the Create button.

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

  7. In the Save As dialog box, select a site in which to save the template.

  8. 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 a template

You can select, preview, and create a new document using one of your existing templates, or Dreamweaver's starter templates. 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 starter template

Dreamweaver comes with several professionally developed starter files 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 starter template, Dreamweaver creates a copy of the file, so you don't overwrite the starter files.

You can preview a sample file and read a brief description of a document’s design elements in the New Document dialog box.

  1. Select File > New.

  2. In the New Document dialog box, select the Starter Templates category.

    Starter templates in Dreamweaver
    Starter templates in Dreamweaver

    You can see the sample page details and the and the visualisation on the right side of the panel as you select the different options.

  3. Click the Create button.

    The new document and all its relates files open in the Document window.

  4. Save the document (File > Save).

Create new code files for different coding languages

You can create code files for a number of coding languages in Dreamweaver.

For more information on coding support in Dreamweaver, see About coding in Dreamweaver.

To create a new code file in Dreamweaver, use the following instructions:

  1. Select File > New Document.

  2. From the Document Type, select the code file you want to create.

  3. Select the kind of document you want to create from the Document Type column (such as a PHP file).

    Creating a new PHP page
    Creating a new PHP page

  4. Based on the file type you select, additional options are available while creating a document. 

    For example, if you are creating a PHP file, you can select DocType options, and some CSS options.

  5. Click the Create button. Then 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.

Note:

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 preferences

If most of the pages in your site are of a specific file type (such as HTML, PHP, or JavaScript), 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.

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 Tools > Clean up Word HTML to remove the extraneous markup tags that Word inserts into HTML files.

To clean up HTML or XHTML that is not generated by Microsoft Word, use Tools > Clean up HTML. For more information, see Clean up Microsoft Word HTML files.

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 is a good idea to organize files you plan to open and edit in a Dreamweaver site, instead of opening them from another location. For more information on Dreamweaver sites, see About Dreamweaver sites.

  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.

For information on dynamic related files, see Open Dynamically Related Files.

Note:

When working with HTML files, if you want to make quick changes to related CSS, JavaScript, or PHP files without having to navigate to that file, you can use Quick Edit. For more information, see Quick Edit.

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

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

When you open a related file from Design view or Code and Design views (Split view), the related file displays in Split view.

You can select View > Split and choose from the different Split view options if you want to customize the Split view.

If you want to view the related files in Code view only, select Code at the top of the toolbar.

Note:

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

Note:

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.

By default, when you open an HTML file, Dreamweaver displays the related files in separate tabs. If you want to disable this functionality, you can disable it using the Preferences panel.

  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 (related files that do not require any sort of dynamic processing)
  • External related files (.css and .js files) that are attached to dynamic path server include files
  • Dynamic path server include files (.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 (Microsoft Word 97 or later) as HTML files, and then use Tools > Clean Up Word HTML to remove the extraneous HTML code generated by Word.

The code that Dreamweaver removes is primarily used by Word to format and display documents in Word and is not actually 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 have cleaned up the HTML file.

Note:

To clean up HTML or XHTML that is not generated by Microsoft Word, use Tools > Clean up 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 Tools > 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).

    Microsoft Word HTML clean up options
    Microsoft Word HTML clean up options

    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.