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