IT tutorials
 
Graphics
 

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

10/30/2014 9:52:41 PM
- How To Install Windows Server 2012 On VirtualBox
- How To Bypass Torrent Connection Blocking By Your ISP
- How To Install Actual Facebook App On Kindle Fire

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.

NOTE

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.
 
Others
 
- 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
 
25 Inspiring Game of Thrones Quotes
 
Top 10
 
- Microsoft Visio 2013 : Adding Structure to Your Diagrams - Finding containers and lists in Visio (part 2) - Wireframes,Legends
- Microsoft Visio 2013 : Adding Structure to Your Diagrams - Finding containers and lists in Visio (part 1) - Swimlanes
- Microsoft Visio 2013 : Adding Structure to Your Diagrams - Formatting and sizing lists
- Microsoft Visio 2013 : Adding Structure to Your Diagrams - Adding shapes to lists
- Microsoft Visio 2013 : Adding Structure to Your Diagrams - Sizing containers
- Microsoft Access 2010 : Control Properties and Why to Use Them (part 3) - The Other Properties of a Control
- Microsoft Access 2010 : Control Properties and Why to Use Them (part 2) - The Data Properties of a Control
- Microsoft Access 2010 : Control Properties and Why to Use Them (part 1) - The Format Properties of a Control
- Microsoft Access 2010 : Form Properties and Why Should You Use Them - Working with the Properties Window
- Microsoft Visio 2013 : Using the Organization Chart Wizard with new data
programming4us programming4us
 
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