IT tutorials
 
Graphics
 

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

10/30/2014 9:54:12 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.3. CSS Layout Box Model

All CSS block elements are rendered in the browser according to the CSS box model. The box model, established by the W3C CSS standards body, determines how much room a block element actually takes up on the page. The amount of space required for a block element, such as a <div> tag, is a combination of the declared width, plus the padding, border, and margin settings. For example, say a <div>tag has the following style declared:

#myBox {
width:200px;
padding:10px;
border:5px;
margin:10px;
}

Although nominally, the myBox style appears to be 200 pixels wide, CSS specifications indicate that it will actually take up 250 pixels of space. Here's how the space requirement is figured:

200 pixels content area width
10 pixels padding-left
10 pixels padding-right
5 pixels border-left
5 pixels border-right
10 pixels margin-left
10 pixels margin-right
250 pixels width total

To make it easy for you to design with the box model in mind, Dreamweaver provides the CSS Layout Box Model visual aid. When enabled, any selected <div> tag or otherwise affected block element depicts all the contributing elements: content area (the width), padding, borders, and margins. Both the padding and margins are shown with colored diagonal lines, although in opposing directions, as shown in Figure 7.

Figure 7. The CSS Layout Box Model visual aid reveals the unseen reserved space around layout elements.

Dreamweaver not only reveals how the layout element is constructed visually, but you'll also receive a wealth of information from tooltips that appear as you move your cursor around the element. The information in the tooltip varies according to cursor's position:

  • Hover over the content area to see all the CSS properties, including those related to the box model.

  • Move your cursor over the padding or margin areas to see their respective values — for example, Margin: 10px.

  • With the cursor over the border, the tooltip reveals the current values for the margin, border, and padding properties.

I recommend turning on the CSS Layout Box Model feature in the fine-tuning and debugging stages of your Web page development; it's a great tool for understanding exactly why elements on your page are positioned the way they are.

3.4. CSS Layout Outlines

CSS Layout Outlines, when enabled, place a border around <div> tags and other block layout elements (see Figure 8). The outline is a dashed style for inserted <div> tags and a solid border for drawn Dreamweaver AP elements.

Figure 8. Highlight your <div> tags at design-time with CSS Layout Outlines.

I tend to keep CSS Layout Outlines enabled during most of my design process; I find having the outlines visible quickly allows me to insert content in just the right places and, more importantly, select the <div> tags for quick refinement.

Applying a CSS Layout

In this Technique, you apply previously defined CSS styles to a variety of <div> tags to create a basic layout.

  1. From the Techniques site, expand the 10_Divs folder and open div_start.htm.

    The first style to apply acts as a container for the entire page; to apply this properly, you'll need to position the cursor properly.

  2. Place your cursor in the series of links on the page and click the <p> tag in the Tag Selector.

  3. From the Insert panel's Layout category, click Insert Div Tag.

  4. When the Insert Div Tag dialog box opens, make sure the Insert list is set to Wrap Around Selection.

  5. From the ID list, choose Wrapper and click OK.



Next, add the first of three <div> tags, the header so that it appears with the wrapper <div> tag:

  1. From the Insert panel's Layout category, click Insert Div Tag.

  2. From the Insert list, choose After Start Of Tag and then, when the adjacent list appears, select <div id="wrapper">.

  3. From the ID list, choose Header and click OK.

  4. Click Delete to remove the selected placeholder text.

Now you're ready to insert the middle <div> tag after the header <div> tag:

  1. From the Insert panel's Layout category, click Insert Div Tag.

  2. From the Insert list, choose After Tag and then, when the adjacent list appears, select <div id="header">.

  3. From the ID list, choose Middle and click OK.

The final <div> wraps around navigation links and forms the bottom area, the footer:

  1. Place your cursor in the series of links on the page and click the <p> tag in the Tag Selector.

  2. From the Insert panel's Layout category, click Insert Div Tag.

  3. When the Insert Div Tag dialog box opens, make sure the Insert list is set to Wrap Around Selection and, from the ID list, choose Footer; click OK when you're done.



  4. Save your page.

Your new CSS-based layout is now ready to be filled out with content.

 
Others
 
- Adobe Dreamweaver CS5 : Working with Divs and AP Elements - Placing div Tags (part 2)
- 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
 
 
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