Dreamweaver MX Tutorial

Created and designed by Vivienne Trulock for ilikecake, 2005

Use CSS for layout

Continuing with the template and style sheet from before we will add more layout features to the page. To add layout features to the style sheet you have created, simply create some <div> tags in your page. You can either type them straight into the html source code, or use the 'Insert > Layer' option. <Div> tags have already been placed in the Template file you used in the previous exercise which you can use.

If using the insert layer option, remove from the source code everything but the <div id="layer1"> part. (these are done for you if you are using the sample template)

Name the tag, for example 'container'. (these are done for you if you are using the sample template)

name layer

To create a style for 'container' select the 'Use CSS selector' option and type #container. This creates the container style and means that we can now apply styles to that div tag by referencing the 'id' attribute name. Each 'id' should be unique on a particular page.

The edit window will open up and you can attach the style below to this tag.

#container - contains everything on page

Background

This specifies the background repeating striped image:

background image: design_dream2_r1_c1.jpg
repeat: repeat-x
horiz position: center
vert position: top

Box

padding: top - 255px
padding: left, right, bottom - 50px

Positioning

placement left: 0px

Other Named DIV Tags

Innercontainer, nav, content and backtop are all div tags found in the template file. These are again named using the id attribute, example: <div id="innercontainer">. Create the style in the same way as 'container' - the 'Use CSS selector' option and type #innercontainer for innercontainer, #nav for nav, #content for content and #backtop for backtop. The style settings are given below.