Knowledge Base
Save up to  70% off.  Start your website today!

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 the site by holding down the control key and clicking links.
  • The navigation bar makes it easy to go back, forward, or home like in a browser.
  • The Live View Options button allows users to edit pages in a new tab.
How the Live View Works

Live View works on a Webkit-based build. Webkit is a rendering engine that powers most mobile browsers and 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 page's CSS-based elements and determining which element requires modification to produce the 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 navigates over the page.

The elements are highlighted in three separate colors.

  • Aqua reflects 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 navigating 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 the 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 Tutorials

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 Dreamweaver Tutorials learning portal.

Did you find this article helpful?

* Your feedback is too short