X Course Advisor FREE Course Advisor
Watch Tutorials
Understanding CSS Layout in Dreamweaver CS6, Part 1

Check out our HTML and CSS: Adding Images to Web Pages course!

When designing sites, a crucial part of design is layout. CSS (Cascading Style Sheets) is the main technology that will allow you to position and lay out your elements throughout your site. Adobe Dreamweaver as a web-authoring tool has a good selection of design user interface tools that will assist you in using CSS for layout on your site.

CSS Mechanics

The first part is understanding a little of how CSS works in terms of layout. There is a property called position, which has four options: absolute, fixed, static and relative. In this tutorial we’ll explore how to use AP elements (Absolutely Positioned Elements) work and their behaviours, and in later tutorials we’ll explore the other three options.

Absolutely Positioned Elements

The first one is absolutely positioned elements, and in most cases this element would be a div tag. These are boxes that can be positioned as a fixed element wherever on the page.

Pic 1

First we select the Draw AP Div option from the Insert>Layout Panel. The next step is clicking and dragging to draw a marquee (div box) that will hold your content.

Pic 2

Make sure you name your div tags as you go along in the properties panel.

Pic 3

When naming the div tags, change the name in the ID box but make sure not to include any spaces or special characters. Also the names are case-sensitive. By default the boxes are transparent and are difficult to see when previewing in the browser. I temporarily changed the background colour while designing and prototyping so that I can easily see my layout.

Pic 4

You can add as many boxes as you need and reposition them with the top left corner handle.

Pic 5

To see what they would look like, it’s best to click on Live on the toolbar or open it in your local browser.

Pic 6


These boxes can hold any kind of content, text, images, video or flash.

Pic 7

You can even layout the boxes in the stacking order that you wish. This is controlled via the z-index property that can be found in the AP elements panel. The higher the z-index the higher it is on the static order.

Pic 8

Pic 9

There is another option in the AP elements panel that will prevent overlaps. Ticking the box will not allow any overlaps when moving the panels on the page. This is useful if you wish to align boxes to each other without having gaps.

Pic 10

Position & Size

You can resize the boxes using the handles on the edges of the boxes. There are 8 handles on each box and each one allows you to resize to fit to get it the size that you want.

Pic 11

You can also resize and position using the properties panel. There are four properties that can be changed from the panel. L, T, W and H (Left, Top, Width and Height). The Left and Top properties allow you to exactly position the box from the top left of the browser window. So T: 100px and L: 100px will be from the top of the browser by 100 pixels and from the left 100 pixels using the top left of the box as a reference point. The Width and Height determine the size of the box in your unit of measurement, so W: 200px and H:200px will set the dimensions of the box accordingly. This gives you very precise positioning and size.

Pic 12

Using the AP elements you can easily design your layout and have complete control over how your page looks. As everything will be fixed to the top left corner of your site. Although a whole site can be built using this method, it is best to mix and match with the other design principles to give you a bit more flexibility. In future tutorials, we’ll explore the other options in detail.

Check out our HTML and CSS: Adding Images to Web Pages course!

Tareq Fadel

Tareq Fadel | Articles by this author

Tareq has been developing and designing websites since the turn of the century and works with HTML5, CSS3 and JavaScript. He is a HTML5 advocate that is ever looking at the cutting edge technologies of the web. He is always experimenting and pushing the boundaries what can be done on modern, innovative websites through various JavaScript APIs. He is also a freelance developer and instructor at various different training centres throughout the U.K. teaching and developing course content for HTML5, CSS, JavaScript, Dreamweaver, Flash and ActionScript.


Nov 05, 2015
Enrique Gomez
Did you have related articles in Espanish
You must be logged in to post a comment.
Create an Account  Login Now

What is macProVideo.com?

macProVideo.com is an online education community featuring Tutorial-Videos & Training for popular Audio & Video Applications including Adobe CS, Logic Studio, Final Cut Studio, and more.
© 2018 macProVideo.com
a division of NonLinear Educating Inc.