User Guide Cancel

Preview pages

Search
Dreamweaver

Dreamweaver

Open app
  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

 

 

Preview your web pages in Dreamweaver, in browsers.

Real-time preview allows you to preview your pages in the browser and view the changes in the browser in real time as you code.

Live view gives you an idea of how your page will look on the web and lets you edit items in Code view.

Design view also gives you an idea of how your page will look on the web but does not render the page exactly as browsers do.

The Open in Browser feature lets you see how your pages will look in browsers. This is best for working with pages that use dynamic data from databases as this is not real-time.

Read on to learn more about the different types of preview options in Dreamweaver.

Real-time Preview in browser

You can preview your web pages in real-time as you code or design them in Dreamweaver. This feature allows you to code and preview your web pages simultaneously on multiple browsers. 

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

  1. Click Real-time Preview in the Dreamweaver status bar.

    Real-time preview
    Real-time preview

    You have options to preview your web pages in real-time in a browser.

  2. To preview your web pages in the browser, click any of the available browser options.

    You can edit the browsers that appear in this list. To add or remove a browser from this list, see Set browser preferences.

    If you have a testing server, make sure you enable Automatically push files to testing server, while setting up the testing server. 

    The real-time preview works off the files in the testing server. Enabling automatic push to the testing server ensures you see the changes in real time. 

  3. If prompted, save the web page and its related documents.

    A browser opens displaying the webpage.

  4. Continue to code your page and watch the changes in the browser as you code.

Set browser preview preferences

You can switch between real time preview and preview in browser. Set preferences for the browser to use when previewing a site and define default primary and secondary browsers.

These browser preferences are then used regardless of whether you are previewing your site live with real-time preview, or you are opening the page in the browser.

  1. Select File > Real-time Preview > Edit Browser List.

    Real-time preview
    Default to Static Browser Preview

    If you deselect the Default to Static Browser Preview option, realtime preview is disabled. You can use keyboard shortcuts of primary and secondary browsers to open preview in browser. Alternatively, you can use File menu or click the device preview icon at the status bar. 

  2. To add a browser to the list, click the Plus (+) button, complete the Add Browser dialog box, and then click OK.
  3. To delete a browser from the list, select the browser, and then click the Minus (-) button.
  4. To change settings for a selected browser, click the Edit button, make changes in the Edit Browser dialog box, and then click OK.
  5. Select the Primary Browser or the Secondary Browser option to specify whether the selected browser is the primary or secondary browser.

    F12 (Windows) or Option+F12 (Macintosh) opens the primary browser; Control+F12 (Windows) or Command+F12 (Macintosh) opens the secondary browser.

  6. Select Preview Using Temporary File to create a temporary copy for previewing and server debugging. (Deselect this option if you want to update the document directly.)

Default to static browser preview  This will allow users to choose the mode of previewing their files in browser. On checking the checkbox users can preview files using “Open in browser” from menus and using shortcuts. When unchecked Real Time Preview will be used for previewing files in browsers. By default the checkbox is unchecked and Real time preview will be used for previewing the files in browser.

Preview pages in Live view

Live view differs from the traditional Dreamweaver design view in that it provides a more realistic rendering of what your page will look like in a browser, which is also editable. 

You can switch to Live view any time you are in Design view. Switching to Live view, however, is not related to switching between any of the other traditional views in Dreamweaver (Code/Split/Design). When you switch to Live view from Design view, you are simply toggling the Design view between editable and “live”.

While Design view remains frozen once you enter Live view, Code view remains editable, so you can change your code, and then refresh Live view to see your changes take effect. When you’re in Live view, you have the additional option of viewing live code. Live Code view is like Live view in that it displays a version of the code that the browser is executing in order to render the page. Like Live view, Live Code view is a non-editable view.

An additional advantage of Live view is the ability to freeze JavaScript. For example, you can switch to Live view and hover over jQuery-based table rows that change color as the result of user interaction. When you freeze JavaScript, Live view freezes the page in its current state. You can then edit your CSS or JavaScript and refresh the page to see the changes take effect. Freezing JavaScript in Live view is useful if you want to see and change properties for the different states of pop-up menus or other interactive elements that you can’t see in traditional Design view.

To preview pages in Live view:

  1. Make sure that you are in Design view (View > Design) or Code and Design views (View > Code and Design).

  2. Click the Live view button.

  3. (Optional) Make your changes in Code view, in the CSS Styles panel, in an external CSS style sheet, or in another related file.

    Even though you can’t edit in Live view, your options for making edits in other areas (for example, in the CSS Styles panel or in Code view) change as you click in Live view.

    You can work with related files (such as CSS style sheets) while keeping Live view in focus by opening the related file from the Related Files toolbar at the top of the document.

  4. If you’ve made changes in Code view or in a related file, refresh Live view by clicking the Refresh button in the Document tool bar, or by pressing F5.

  5. To return to the editable Design view, click the Live view button again.

Preview Live Code

The code displayed in Live Code view is similar to what you would see if you viewed the page source from a browser. While such page sources are static, providing you with only the source of the page from the browser, Live Code view is dynamic, and updates as you interact with the page in Live view.

  1. Make sure that you are in Live view.

  2. Click the Live Code button.

    Dreamweaver displays the live code that the browser would use to execute the page. The code is highlighted in yellow and is uneditable.

    When you interact with interactive elements on the page, Live Code highlights the dynamic changes in the code.

  3. To turn off highlighting for changes in Live Code view, choose View > Live View Options > Highlight Changes in Live Code.

  4. To return to the editable Code view, click the Live Code button again.

To change Live Code preferences, choose Edit > Preferences (Windows) or Dreamweaver > Preferences (Macintosh OS), and select the Code Coloring category.

Freeze JavaScript

Do one of the following:

  • Press F6

  • Select Freeze JavaScript from the Live View button’s pop-up menu.

An info bar at the top of the document tells you that JavaScript is frozen. To close the info bar, click the close link.

Live view options

Besides the Freeze JavaScript option, there are some other options available from the Live View button’s pop-up menu, or from the View > Live View Options menu item.

Freeze JavaScript Freezes elements affected by JavaScript in their current state.

Disable JavaScript Disables JavaScript and re-renders the page as it would look if a browser did not have JavaScript enabled.

Disable Plug-ins Disables plug-ins and re-renders the page as it would look if a browser did not have plug-ins enabled.

Highlight Changes in Live Code Turns highlighting for changes in Live Code off or on.

Edit the Live View Page in a New Tab Lets you open new tabs for site documents you browse to using the Browser Navigation toolbar or the Follow Link(s) feature. You must browse to the document first, then select Edit the Live View Page in a New Tab to create a new tab for it.

Follow Link Makes the next link you click in Live View active. Alternatively you can Control-click a link in Live view to make it active.

Follow Links Continuously Makes links in Live View continuously active until you disable them again, or close the page.

Automatically Sync Remote Files Automatically syncs the local and remote file when you click the Refresh icon in the Browser Navigation toolbar. Dreamweaver puts your file to the server before refreshing so that both files are in sync.

Use Testing Server for Document Source Used mainly by dynamic pages (such as ColdFusion pages), and selected by default for dynamic pages. When this option is selected, Dreamweaver uses the version of the file on the site’s testing server as the source for the Live view display.

Use Local Files for Document Links The default setting for non-dynamic sites. When this option is selected for dynamic sites that use a testing server, Dreamweaver uses the local versions of files that are linked to the document (for example, CSS and JavaScript files), instead of the files on the testing server. You can then make local changes to related files so that you can see how they look before putting them to the testing server. If this option is deselected, Dreamweaver uses the testing server versions of related files.

HTTP Request Settings Takes you to an advanced settings dialog box where you can enter values for displaying live data. For more information, click the Help button in the dialog box.

Open in browser

You can open a page in a browser at any time; you don’t have to upload it to a web server first. When you preview a page, all browser-related functions should work, including JavaScript behaviors, document‑relative and absolute links, ActiveX® controls, and browser plug-ins provided that you installed the required plug‑ins or ActiveX controls in your browsers.

Before opening a document in browser, save the document; otherwise, the browser does not display your most recent changes.

  1. Right-click the filename in the Document toolbar, and click Open in Browser.

    Note:

    If no browsers are listed, select Edit > Preferences or Dreamweaver > Preferences (Macintosh), and then select the Preview In Browser category on the left to select a browser. For more information, see Set browser preview preferences.

  2. Click links and test content in your page.
    Note:

    Content linked with a site root-relative path does not appear when you preview documents in a local browser unless you specify a testing server, or select the Preview Using Temporary File option in Edit > Preferences > Preview In Browser. This is because browsers don’t recognize site roots—servers do.

    Note:

    To preview content linked with root-relative paths, put the file on a remote server, and then select File > Preview In Browser to view it.

  3. Close the page in the browser when you finish testing.

More like this

Get help faster and easier

New user?

Quick links

View all your plans Manage your plans
View quick links
Hide quick links

Legal Notices    |    Online Privacy Policy