In our last post, we discussed the basics of creating a CSS layout in Dreamweaver. For website designers, the basics of a good website designs starts with creating your website’s layout (before any images, text or design elements are incorporated). Now that you have your three layout boxes (Header, Content and Footer), we are going to start changing the positioning so that the layout is fit for an internet browser.
As mentioned in our previous post, you can change the positioning of the Div’s by clicking on the Div’s and dragging them around, but using fixed values for the positioning is much more accurate.
To use fixed values for your Div positioning, click on the Div and go down to the property inspector at the bottom of the page. You will see that the positioning values of the left, top, width and height (called L, T, W and H) are in the boxes. Click on the Header Div and reset the values (the L should be 0 – this is how far you want the Div from the left side of the screen), make the Width 990 pixels, Height should be 100 and T should be 0). You may be wondering why the Width is 990 pixels – this isn’t an arbitrary number, it’s because we want this layout to fit inside a monitor resolution of 1024 x 768 (vertical scrolling isn’t a big deal in website design, but we want to avoid any horizontal scrolling).
Click on the Footer Div and make the measurements as follows: L = 0, T = 560, W = 990, H = 50. You will see that there’s a “px” after the numbers, don’t take these letters out of the box when you are changing the numbers – the layouts will work in Dreamweaver but they won’t display in an internet browser if you remove the “px”. Now, click on the Content Div and change the values to the following: L = 0, T = 105, W = 990, H = 450.
You have now created the Div’s for your layout, but they won’t have any visibility in a browser yet. A good tip is to add a different background colour to each of the Div’s so that you can check them out in a browser (you can do this by clicking on the Div’s and them going down to the on property inspector at the bottom of the page – choose a bright background colour for each Div). Save the page and click on the globe icon at the top of the page so that you can see it in a browser.
These are the basics of using fixed values for your Div layout. This article is based on a video by Creativebits.org, an apple based design community). If you want to see the video, click here. In our next blog, we’re going to discuss how to create a Nested layout!