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.
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.
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
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
- What is Dreamweaver CS5?
- 1. Defining a New Site
- 2. Creating New Documents
- 3. Adding Structure to Text
- 4. Managing Assets
- 5. Placing Images on the Page
- 6. Creating Links
- 7. Understanding Style Sheets (CSS)
- 8. Controlling CSS from the Property Inspector
- 9. Using Live View and CSS Inspect
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.