Using Dreamweaver

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)

insert layer

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:

  1. background image: design_dream2_r1_c1.jpg
  2. repeat: repeat-x
  3. horiz position: center
  4. vert position: top

Box

  1. padding: top - 255px
  2. padding: left, right, bottom - 50px

Positioning

  1. 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.

#innercontainer - inside container, contains everything on page

Background

This specifies the position of the header image:

  1. background image: design_dream2_r1_c2.jpg
  2. repeat: no-repeat
  3. horiz position: right
  4. vert position: top

Positioning

  1. position type: absolute
  2. width: 100%
  3. height: 265px
  4. placement top, right, left: 0px

#nav - contains navigation

Type

  1. case: uppercase

Background

  1. background color: #BDBDB0

Box

This sets the nav area to 200 pixels wide and indents all content by 10 pixels on every side.

  1. width: 200px
  2. height: auto
  3. float: right
  4. all padding: 10px

Border

  1. all border style: solid
  2. all border color: #1A1109
  3. all border width: 1px

Positioning

  1. position type: fixed
  2. top: 38px
  3. right: 34px

#content - contains page content

Box

  1. width: 65%
  2. padding top, right, left: 10px, bottom: 50px

Position

  1. position: absolute
  2. placement: left: 0px, top: 225px, right: 240px

#backtop - contains back to top link

Positioning

  1. position: absolute
  2. width: 100px
  3. height: 20px
  4. placement left: 600px, bottom: 55px

Exercise using CSS with surrounding images.