GS-09: Using Live View and CSS Inspect - Dreamweaver CS5

Focus on specific content regions and make precise edits to a web page with Dreamweaver's Live view and CSS Inspect. Make changes to your style sheets and preview the results without leaving the application.

Live View

To open Live View, click on the Live View button in the document toolbar.

Live View allows you to:

  • View the website the way it will appear in most modern browsers
  • Test functionality of elements and layout
  • Tour site by holding down control key and clicking links
  • Navigation bar makes it easy to go back, forward or home like in a browser
  • Live View Options button allows users to edit pages in a new tab

How Live View Works

Live View works on a Webkit based build. Webkit is a rendering engine that powers most mobile browsers as well some of the most popular browsers such as Google Chrome and Apple's Safari.

Webkit's engine ensures that users obtain the most accurate preview possible and allows the authoring of richer HTML5 and CSS3-based experiences than previous versions of Dreamweaver.


CSS Inspect Tool

The CSS Inspect tool assists users in overseeing the CSS-based elements of the page and determining which element requires modification to produce a desired effect.

The CSS Inspect Tool can be activated by clicking the Inspect button listed beside Live View in the document toolbar.

Note: Make sure that Live View is on in order to better operate the CSS Inspect Tool.

How the CSS Inspect Tool Works

Upon activation, the CSS Inspect tool will highlight the various elements of the page as the user mouses over the page.

The elements are highlighted in three separate colors.

  • Aqua reflects the the total height and width of the element
  • Magenta represents padding around the element
  • Yellow shows the margin for the element
Pro tip: Use the left arrow while mousing over the page as this allows you to navigate the document tree to the parent elements.The right arrow will assist with introspect into the document tree.

Once the element needing modification has been located and the issue identified, open the code navigator to continue.


The Code Navigator

The Code Navigator allows you to browse for the coding of the element requiring modification. Clicking on the element in the code navigator will open the CSS code for the element in code view.

You can get to the Code Navigator by doing the following:

  • For Mac users: Press the Opt button and click the element requiring CSS editing.
  • For Windows users: Press the Alt button and click the element requiring CSS editing.

Getting Started Videos


Dreamweaver is a popular Adobe program for creating websites and applications.  It supports HTML5, CSS3, PHP, FTP, jQuery and more; and it works with HostGator web hosting.

You can learn more about Dreamweaver by visiting Adobe's website or the video learning portal, Adobe TV.  The video in this article is courtesy of Adobe TV.