IT tutorials
 
Graphics
 

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

10/30/2014 9:42:59 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

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;
}
-->
</style>

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:

UnitAbbreviationMeasurement
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
 
Others
 
- 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
 
 
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