Adobe Dreamweaver CS5 : Working with Divs and AP Elements - Placing div Tags (part 2)

10/30/2014 9:52:41 PM

3. Visualizing <div> tags

The <div> tag is a structural element, not intended to be apparent when viewed through the browser at run-time. Design-time, however, is another matter. Designers often need to be able to see the underlying structure to craft their layouts; they also need to be able to hide the structure at any point so they can see a browser-like view while designing.

Dreamweaver provides a full slate of visualization options for CSS layouts. Each of the options, found under the Visual Aids menu button on the Document toolbar or the View => Visual Aids menu item, can be toggled in and out of view at will. There are three different visualizations that can be used singly or in combination: CSS Layout Backgrounds, CSS Layout Box Model, and CSS Layout Outlines. The three CSS layout visualization options apply to other page elements in addition to <div> tags. Any page element with the CSS declaration of display:block, position:absolute, or position:relative is considered a block layout element and is affected as well. For example, if an <a> tag style was set to display:block — a common method used when developing CSS navigation buttons — it would be rendered with the same visualizations as <div> tags, including sizing handles, etc.

3.1. CSS Inspect

Live View makes it easy for the Dreamweaver designer to accurately preview the current Web page as it appears in a modern browser. Unfortunately, by itself, Live View obscures the underlying CSS structure: There's no easy way to see how the various elements fit together. However, Dreamweaver includes an option called Inspect that exposes certain properties of any CSS block-level elements on the page.


With Inspect mode enabled, you can quickly view the margins, paddings, border, and content area of any block-level element in Live View. Just click Inspect and hover over any <div>, <p>, <span>, or other block-level tag to display these properties as solid color blocks (see Figure 4). In addition, Inspect can highlight the targeted area in both Code view and the CSS Styles panel. n

Figure 4. When Inspect mode is toggled on in Live View, you can reveal the margins, padding, and border of any element by hovering over it.

Inspect mode is also available in other Dreamweaver views of the document. If you have Code view or Live Code enabled, the code for the element under the cursor in Live View is highlighted. When the CSS Styles panel is open and Current mode engaged, the CSS rule that applies to the targeted element is shown. You can see both of these effects at once — as well as the box model color highlights in Live View — in Figure 5. Better still, any changes made to the CSS Styles panel are instantly reflected in Live View and Inspect mode.

Figure 5. Inspect mode can also reveal the code and CSS related to a targeted element.

Inspect mode is great for getting a clearer picture of how your page is structured and very useful when debugging a CSS issue.

3.2. CSS Layout Backgrounds

In the early stages of laying out a page, it's often helpful to see your basic building blocks clearly depicted. When you invoke the CSS Layout Background options from the Visual Aids menu, Dreamweaver clears any background image or color previously defined in the CSS styles and replaces them with a different solid color for each <div> tag. The resulting patchwork shows at a glance how the page is structured (see Figure 6). This option is also useful when debugging layouts because it clearly shows which <div> tags — if any — overlap.

The colors assigned to each of the <div> backgrounds are random and can't be predefined. A new set of colors is used every time you toggle CSS Layout Backgrounds into view.

Figure 6. Turn on CSS Layout Backgrounds when first creating your CSS layout or debugging it.
- Adobe Dreamweaver CS5 : Working with Divs and AP Elements - Placing div Tags (part 1)
- Adobe Dreamweaver CS5 : Working with Divs and AP Elements - Divs and AP Elements 101
- Adobe Illustrator CS5 : Working with Paths (part 3) - Understanding how fills and strokes relate to paths
- Adobe Illustrator CS5 : Working with Paths (part 2) - Understanding control handles and control handle lines
- Adobe Illustrator CS5 : Working with Paths (part 1) - Understanding types of paths , Understanding anchor points
- Microsoft OneNore 2010 : Distributing Your Notes - Emailing a Page
- Adobe After Effects CS5 : Expressions - Color Sampling and Conversion, Extra Credit
- Adobe After Effects CS5 : Expressions - Layer Space Transforms
- Adobe Fireworks CS5 : Designing the banner ad (part 3) - Importing Photoshop images
- Adobe Fireworks CS5 : Designing the banner ad (part 2) - Importing assets, Using the Auto Vector Mask for quick fades
- First look: Apple Watch

- 10 Amazing Tools You Should Be Using with Dropbox

- Sigma 24mm f/1.4 DG HSM Art

- Canon EF11-24mm f/4L USM

- Creative Sound Blaster Roar 2

- Alienware 17 - Dell's Alienware laptops

- Smartwatch : Wellograph

- Xiaomi Redmi 2
- How to create your first Swimlane Diagram or Cross-Functional Flowchart Diagram by using Microsoft Visio 2010 (Part 1)

- How to create your first Swimlane Diagram or Cross-Functional Flowchart Diagram by using Microsoft Visio 2010 (Part 2)

- How to create your first Swimlane Diagram or Cross-Functional Flowchart Diagram by using Microsoft Visio 2010 (Part 3)
Popular tags
Video Tutorail Microsoft Access Microsoft Excel Microsoft OneNote Microsoft PowerPoint Microsoft Project Microsoft Visio Microsoft Word Active Directory Biztalk Exchange Server Microsoft LynC Server Microsoft Dynamic Sharepoint Sql Server Windows Server 2008 Windows Server 2012 Windows 7 Windows 8 Adobe Indesign Adobe Flash Professional Dreamweaver Adobe Illustrator Adobe After Effects Adobe Photoshop Adobe Fireworks Adobe Flash Catalyst Corel Painter X CorelDRAW X5 CorelDraw 10 QuarkXPress 8 windows Phone 7 windows Phone 8 BlackBerry Android Ipad Iphone iOS
Top 10
- How To Install Android Market & Google Apps On Kindle Fire
- How To Make Ubuntu Look Like Windows 7
- How To Add A New Account in MS Outlook 2013
- Get Android & Mac OS X Style Gadgets For Windows 7 & Windows 8 With XWidget
- How To Activate Microsoft Office 2013
- How To Install Actual Facebook App On Kindle Fire
- How To Create, View And Edit Microsoft Office Files On Kindle Fire
- Download Attractive Business PowerPoint Templates For Free At SlideHunter
- How To Use And Enable Hibernate & Sleep Mode In Windows 8
- How To Get Microsoft Office 2013 Trial Product Key From Microsoft