Naudotojo vadovas Atšaukti

Feature summary

  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


2017 releases of Dreamweaver CC


The Dreamweaver CC October 2017 (18.0) release is now available! See the New features summary.

The 2017 releases of Dreamweaver CC brings in several new features and enhancements including support for Git, an all-new code editor, more intuitive user interface with a selectable dark theme, and several enhancements including an improved onboarding experience. 

Read on for a quick introduction to these new features and enhancements.

For a summary of features introduced in earlier releases of Dreamweaver CC, see Feature summary | Dreamweaver CC 2015 releases.

Adobe Dreamweaver CC 2017.5 release

Dreamweaver CC 2017.5 supports the following new features and enhancements:

Read on to know more about these features and enhancements.

Git support in Dreamweaver

Dreamweaver CC 2017.5 release supports Git, which is an open source version control system. With the new Git support, you can now easily manage your files, including source code, from within Dreamweaver.

You can now perform common Git operations from within Dreamweaver, without the need for third-party tools. The new Git panel (Windows > Git) allows you to perform various Git operations including Commit, Push, Pull, and Fetch.

You can also use Git as a collaboration tool by creating and merging branches and remote repositories. You can also view the differences between two versions of a file, and view file and repository histories. 

Further, the Files panel in Dreamweaver now supports a new Git view. Using this view, you can manage the untracked, modified, staged, and committed files associated with your site. 

To learn more about using Git for version control and collaboration, see Using Git in Dreamweaver.

Use Git in Dreamweaver
Use Git in Dreamweaver

New code themes

Dreamweaver CC 2017.5 now supports two new code themes: Monaki and Classic. You can select and use these code themes that provide code colors similar to Dreamweaver CC 2015. 

Select Dreamweaver > Preferences (macOS) or Edit > Preferences > Interface (Windows), to try the new code themes for improved readability and visual appeal.

New code themes in Dreamweaver 2017.5 - Monaki and Classic
New code themes in Dreamweaver 2017.5 - Monaki and Classic

Improved onboarding experience

When you launch Dreamweaver CC 2017.5 for the first time, the Welcome screen displays an improved on-boarding experience. The new onboarding experience showcases one of the following two video tutorials, based on the workspace you choose:

  • A quick tutorial on Developer workspace
  • A quick tutorial on Standard workspace
Improved onboarding experience in Dreamweaver
Improved onboarding experience in Dreamweaver 2017.5

You can also access the two video tutorials from the Help menu. Click Help > Quick Tutorial to view the tutorials.

Access the new onboarding videos from Help menu in Dreamweaver
Access the new onboarding videos from the Help menu

Other enhancements

Dreamweaver CC 2017.5 is now integrated with a new version of CEF. With the new CEF version, the Live View in Dreamweaver displays custom HTML elements, custom properties for CSS, and more.

Adobe Dreamweaver CC 2017.1 release

Dreamweaver CC 2017.1 provides additional coding support by including the following features:

Read on for a quick introduction to these enhancements.

Support for PHP 7.1

In earlier versions of Dreamweaver, you could access code hints and parser checks for PHP 5.6. Dreamweaver 17.1 is set up for PHP versions 5.6 and 7.1.

You can choose to compile your site’s PHP files with 5.6 or 7.1 through the Site Setup dialog box, or Edit > Preferences.

For more information on PHP 7.1 support, see the following articles:

Improved find and replace

This release includes important enhancements to the find and replace features. 

You can now search for attributes and tags using the Find and Replace dialog box (Find > Find and Replace in Files). You can use this dialog even if no files are open in Dreamweaver (searching within a folder, for instance).

In addition, the Find and Replace Quick Find bar (Find > Find and Replace) is now moved to the bottom of the Dreamweaver workspace. Use this panel to quickly find and replace text and attributes within the current document.

For more information on find and replace, see Find and replace text, tags, and attributes. For known issues with find and replace in Dreamweaver 17.1, see Known issues and defects fixed in Dreamweaver CC 2017 releases.

New keyboard shortcuts for find and replace:

  • Find in Current Document: Ctrl + F (on Windows), and Cmd + F (on Mac) 
  • Find and Replace in Files: Ctrl + Shift + F (on Windows), and Cmd + Shift + F (on Mac) 
  • Replace in Current Document: Ctrl + H (on Windows), and Cmd + Alt + F (on Mac)

For a complete list of find and replace keyboard shortcuts, see Find and replace keyboard shortcuts.

Update to Dreamweaver CC 2017 release (17.0.2)

Create email campaigns using Dreamweaver with Campaign

You can now use the Campaign extension for Dreamweaver to create personalized email campaigns. 

Creating personalized content is very important to make an immediate connection with the reader, and hopefully increase your success rates with email marketing. 

If you use Dreamweaver to create email campaigns, you can now go a step further and add personalized content (such as the reader's name, or a personalized call to action) using data from Adobe Campaign.

To get started, download the Campaign extension by clicking Window > Extensions > Browse Extensions, create a new email newsletter, or edit an existing one. After you finish designing, personalize content using Campaign's personalization fields and content blocks, and you are ready to go. 

Dreamweaver automatically syncs up with Campaign so that your content changes in Dreamweaver are available for you in Campaign. All you then have to do is enter an email address, and send a personalized campaign to your email recipient.

For more information, see Create personalized email campaigns.

Update to Dreamweaver CC 2017 release (17.0.1)

In-built code coloring support

You can now create and customize code themes, based on the default Light and Dark themes. You can then customize the code colors by modifying the right selectors in the theme file.

Select the light or dark default code theme in Edit > Preferences > Interface, and if you want to change the code colors, save the theme with a new name, and start editing the theme file. 

For more information on customizing your code colors, see Customize code coloring.


This release also includes fixes for a number of defects. For more information on defects fixed, see Known issues and defects fixed in Dreamweaver CC 2017 releases.

Dreamweaver CC 2017 release (17.0)

The Dreamweaver CC 2017 release brings to you an all-new code editor, a more intuitive user interface with selectable dark and light themes, and several enhancements including support for new workflows such as CSS preprocessors.

Read on for a complete list of what's new and changed in Dreamweaver CC 2017:

Redesigned Code Editor

Several productivity enhancements have been made to the Code Editor in Dreamweaver to enable you to get on with the task of coding quickly and efficiently.

Code hints help new users learn HTML, CSS, and other web standards, and visual aids like auto-indentation, code coloring, and resizable fonts help reduce errors and make your code easier to read. 

Code hints

The code hinting functionality in Dreamweaver is enhanced to provide more useful information for the selected code.

In earlier versions of Dreamweaver, when you type a right-angle bracket, you get a drop-down list of relevant code.

In this release, you not only get the relevant code, you also get additional information that helps you to quickly ramp up on HTML, CSS, and other web technologies within Dreamweaver itself. 

Enhanced code hinting
Enhanced code hinting

For more information, see Code hinting and code completion.

Code display enhancements

The overall appearance of the code is now enhanced for better readability. You can see improvements in code formatting, and code coloring. 

Code formatting

When you write code, Dreamweaver auto-indents the code to circumvent erroneous manual indentation and improve readability. 

Code coloring

Dreamweaver now supports code coloring for additional number of file types.

Code coloring support is now available for HTML, JS, CSS, PHP, XML, LESS, Sass, SCSS, SVG, Bash, C, C#, C++, clojure, CoffeeScript, Dart, Diff, EJS, Embedded Ruby, Groovy, Handlebars, Haskell, Haxe, Java, JSON, Lua, Markdown, Markdown (GitHub), Perl, Properties, Python, RDF Turtle, Ruby, Scala, SQL, Stylus, Text, VB, VBScript, XML, and YAML. 

You can change syntax highlighting for different file types directly from the status bar in code view.

For more information on all these changes, see Coding environment in Dreamweaver.

CSS preprocessor support

Dreamweaver now supports common CSS preprocessors like Sass, Less, and SCSS, with full code coloring, and compilation, so you can save time and produce cleaner code.

For more information on Dreamweaver support for CSS preprocessors, see Using CSS preprocessors in Dreamweaver.

Real-time Preview in browser

Quickly preview your code changes in browser in real time without manually refreshing your browser. Dreamweaver now connects with your browser so changes appear in your browser instantly without page reloads. 

Preview changes in real-time in your browser
Preview changes in real-time in your browser

For more information, see Real-time Preview in browser.

Quick editing of related code files (Quick Edit)

To make quick changes to your code, place the cursor on specific code snippets and use the context menu, or press Ctrl-E (on Windows) or Cmd-E (on Mac) to access Quick Edit.

Dreamweaver offers context-specific code options and inline tools.

For more information, see Quick Edit.

Quickly edit related code without opening multiple files or tabs
Quickly edit related code without opening multiple files or tabs

In-context CSS documentation (Quick Docs)

Dreamweaver provides in-context documentation for CSS properties, right within the code view.

Now you don't have to navigate outside Dreamweaver to a web page to learn or refer to CSS properties. To bring up help for CSS, press Ctrl+K (on Windows) or Cmd+K (on Mac).

Quick docs help for CSS within the Dreamweaver code view interface
Quick docs help for CSS within the Dreamweaver code view interface

Multiple cursors to write and edit code

To write multiple lines of code simultaneously, use multi-cursors. 

This feature is a huge productivity booster, as you don't have to write the same line of code multiple times.

To invoke multiple cursors, you can:

  • To add cursors to multiple continous lines - Hold down the Alt key, then click drag vertically. 
  • To add cursors in multiple discontinuous lines - Press the Ctrl key, and click the different lines where you want to place the cursor.
  • To select text in multiple continuous lines - Press the Alt key and drag diagonally
  • To select text in multiple discontinuous lines - Select some text, then press the Ctrl key (Windows), or Cmd key (Mac), and continue to make further selections. 

Modern user interface

Dreamweaver is redesigned with a more intuitive and customizable interface, more accessible menus and panels, and a contextual and configurable toolbar that shows you only the tools you need.

The new interface also offers four levels of contrast from light to dark, so it’s easier to read and edit lines of code.

Here are before and after snapshots of the new user interface.

User interface - Dreamweaver 2015 releases

New user interface - Dreamweaver CC 2017 release

Dreamweaver's menus, toolbars, and workspaces are also redesigned in this release. Read on to learn more about these changes.

Workspace changes

The Dreamweaver interface is optimized to include the following default workspaces:

  • Developer workspace

This workspace is minimal, and by default, includes only those panels that are most essential for developers who code websites - for instance, the Files, and Snippets panels.

  • Standard workspace 

This workspace includes everything you need when you work with both code and design - such as Files, CC Libraries, CSS Designer, Insert, DOM, Assets, and Snippets panels.


After you select a workspace, you can customize it by adding or removing panels. For more information on customizing workspaces, see Create custom workspaces.

Here is a summary of the differences in the workspaces provided in Dreamweaver CC 2015 and Dreamweaver CC 2017.

Dreamweaver CC 2015

  • Beginner
  • Code
  • Default
  • Design
  • Extract

Dreamweaver CC 2017

  • Developer
  • Standard

For more information on workspace changes, see The Dreamweaver workspace.

The application menu is revamped to remove sparingly used menu items, and move others to more intuitive menu locations.

For a detailed description of the changes in Dreamweaver's application menu, see Redesigned Menus.

Toolbar changes

The toolbar is now common across all views. The toolbar displays only the tools that are required for the view in which you are working.

However, you can customize the toolbar to display the required set of tools you need. 

For more information, see Toolbar overview.

Status bar changes

The status bar now displays useful information when you work in Code view. 

You can now:

  • Toggle between INS (Insert) and OVR (Overwrite) modes
  • See the line and column number at the bottom of the screen. These numbers indicate the line and column where the mouse is placed.
  • Select a desired code coloring for different types of code files.

For more information, see Status bar overview.

Snippets panel changes

The snippets panel now wears a new cleaner look, and is also redesigned to make the process of inserting snippets easier.

The following image highlights the major changes in the Snippets panel:

UI changes in the Snippets panel
UI changes in the Snippets panel

In the previous releases of Dreamweaver, you had to insert snippets using keyboard shortcuts.

Inserting snippets using keyboard shortcuts was not an efficient process due to the following reasons:

  • The need to remember non-intuitive shortcuts
  • Possible clashes with product keyword shortcuts

In this version of Dreamweaver, you can use trigger keys to insert code snippets.

Trigger keys are user-friendly text strings assigned to code snippets. For example, for a code snippets that creates a mailto link, you can type "mailto" and make that the trigger key.

After you assign a trigger key, place the cursor in your document, type "mailto", and press Tab. Dreamweaver then inserts the related code snippet in your document.

For more information on the Snippets panel, see Reuse code with snippets.

Files panel changes

The Files panel is redesigned to make it simpler and more intuitive to use.

At its simplest, the Files panel displays a list of only the local files in your computer. As you work more with the Files panel - setting up a site, setting up connections to remote servers, enabling check in and check out, more options appear in the Files panel.

For more information on the changes to the Files panel, see Redesigned Files panel.

Changes in the Welcome screen and on-boarding experience

When you launch Dreamweaver or when you close all Dreamweaver documents, a new Start workspace is displayed. You have convenient access to your recently used files, Libraries, and starter templates with the Start workspace.

If you prefer the older dialogs, you can still type Ctrl/Cmd + O to launch the Open dialog, or Ctrl/Cmd + N to launch the New Document dialog.  

To help you ramp up quickly on the changes in the Dreamweaver CC 2017 workspace, an onboarding experience is available to you. Quickly go through the customization experience, and you will be presented with a workspace and theme options that are right for you. 

For more information, see The Dreamweaver workspace.

Live Highlighting in Find and Replace

The new, non-obtrusive, Find and Replace toolbar sits at the top of your window without blocking any portion of your screen.

Find and replace, in general, is faster and more efficient, as compared to previous versions of Dreamweaver. Dreamweaver now looks for search strings as you type in the Find panel and highlights all instances of the string in the current document. 

For more information, see Find and replace text.

Enhancements to Creative Cloud Libraries

Archive, restore, add comments, and see version history for all your assets stored in Creative Cloud, including files in your Creative Cloud Libraries, assets created with CC desktop products, and mobile projects.

Auto-recovery of files after a crash

If Dreamweaver shuts down unexpectedly because of system errors, power outages, or other problems, then you can recover any unsaved changes in the files that you were editing.

For more information, see Auto-recovery of files.

„Adobe“ logotipas

Prisijunkite prie savo paskyros