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.
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.
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.
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.
Make sure you name your div tags as you go along in the properties panel.
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.
You can add as many boxes as you need and reposition them with the top left corner handle.
To see what they would look like, it’s best to click on Live on the toolbar or open it in your local browser.
These boxes can hold any kind of content, text, images, video or flash.
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.
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.
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.
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.
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.