Adobe Dreamweaver CS5 : Working with Divs and AP Elements - Divs and AP Elements 101

10/30/2014 9:42:59 PM

When the World Wide Web first made its debut in 1989, few people were concerned about the aesthetic layout of a page. In fact, because the Web was a descendant of Standard Generalized Markup Language (SGML) — a multiplatform text document and information markup specification — layout was trivialized. Content and the capability to use hypertext to jump from one page to another were emphasized. After the first graphical Web-browser software (Mosaic) was released, it quickly became clear that a page's graphics and layout could enhance a Web site's accessibility and marketability. Content was still king, but design was moving up quickly.

To relieve the woes of Web designers everywhere, the W3C included a feature within the new Cascading Style Sheets specifications that allowed for absolute positioning of an element upon a page. Absolute positioning enables an element, such as an image or block of text, to be placed anywhere on the Web page. Browser support for Cascading Style Sheets-Positioning specification began with fourth-generation browsers and has grown steadily ever since.

The addition of the third dimension, depth, truly turned the positioning specs into AP elements. Now objects can be positioned side by side, and they have a z-index property as well. The z-index gets its name from the practice in geometry of describing three-dimensional space with x, y, and z coordinates; the z-index is also called the stacking order because objects can be stacked upon one another.

All these attributes, and others such as background color, can be assigned to a CSS style, as shown in the following code:

#header {
position: absolute;
z-index: 1;
height: 115px;
width: 400px;
left: 100px;
top: 50px;
background: #FFCC33;

The CSS style is then applied to a <div> tag to represent an area on the page, like this:

<div id="header">Header content goes here.</div>

Dreamweaver calls <div> tags that are drawn with your mouse AP elements; the CSS style is automatically created and embedded in the page for you. Drawing out the same AP element results in the same CSS code, except the selector name is automatically created for you (apDiv1, apDiv2, and so on) and the code is embedded in the page, like this:

<style type="text/css">
#apDiv11 {

position: absolute;
z-index: 1;
height: 115px;
width: 400px;
left: 100px;
top: 50px;
background: #FFCC33;

The <div> code is also added for you, sans content, like this:

<div id="apDiv11"></div>

Although both approaches are valid, many designers prefer to keep the CSS information in the style sheet rather than embedded.

If you don't define a unit of measurement for AP element positioning, Dreamweaver defaults to pixels. If you edit out the unit of measurement, the Web browser defaults to pixels.

Positioning Measurement

The positioning of AP elements is determined by aligning elements on an x-axis and a y-axis. In CSS, the x-axis (defined as Left in CSS syntax) begins at the left side of the page, and the y-axis (defined as Top in CSS syntax) is measured from the top of the page down. As with many of the other CSS features, you have your choice of measurement systems for Left and Top positioning. All measurements are given in Dreamweaver as a number followed by the abbreviation of the measurement system (without any intervening spaces). The measurement system options are as follows:

PixelsPxRelative to the screen
Pointspt1 pt = 1/72 in
Inchesin1 in = 2.54 cm
Centimeterscm1 cm = 0.3937 in
Millimetersmm1 mm = 0.03937 in
Picaspc1 pc = 12 pt
EMSEmThe height of the element's font
Percentage%Relative to the browser window
- 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
- Adobe Fireworks CS5 : Designing the banner ad (part 1) - Adding the background, Editing gradient colors, Editing gradient direction and angle
- Adobe Fireworks CS5 : Masking - About masks
- 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