All Articles Dreamweaver
Understanding CSS Layout in Dreamweaver CS6, Part 1
Tareq Fadel on Thu, May 30th | 1 comments
Need some help understanding Dreamweaver and laying out CSS for your website? Expert web designer, Tareq Fadel, shows how in part 1 of this two part tutorial.

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


Content

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.


Comments (1)

You must be logged in to comment. Login Now

  • Enrique Gomez
    Did you have related articles in Espanish
    • 3 years ago
    • By: Enrique Gomez
    Reply
Feedback
Course Advisor
Don't Know Where To Start?
Ask A Course Advisor
Ask Us!
Copy the link below and paste it into an email, forum, or Facebook to share this with your friends.
Make money when you share our links
Become a macProVideo.com Affiliate!
The current affiliate rate is: 50%
Classes Start Next Week!
Live 8-week Online Certification Classes for: