Archived copy for reference only
 

 

Graphic Design / Interactive Design / Fine & Applied Arts / Parkland College

Interactive Design Exercises
Dreamweaver: Advanced CSS

Objective

To learn Dreamweaver's CSS style sheet capabilities by recreating this web page.

Discussion

Browser incompatibilities are big headaches for designers who care about visual accuracy of CSS. For this reason, many designers choose to "reset" the browser defaults before writing custom rules. In this exercise, we'll start with a modified version of Eric Meyer's reset styles, then add styles for positioning and typography.

Included in this exercise are special instructions for styling <hr> with CSS and making jump menu items open in new browser window.

Procedure

Prepping for the exercise

  1. download starter files (move files to proper location)
  2. download CSS reset starter files (move CSS files to proper location)
  3. examine downloaded files
  4. launch dreamweaver
  5. define a new site (site > new site): name=happy,
    local root folder=class/jsmith/html/exercises/happy_cog
  6. open "happy.html"

Adding layout CSS

  1. select <body>
  2. insert > layout objects > div: wraparound, ID=content
  3. window > CSS: link "reset.css"
  4. window > CSS: add new rules (+), define in "layout.css"
    • #content: background: image="bkgd.gif"; box: padding=20px (all), margin-left=45%, margin-right=5%
    • body: background: image="man.gif" (no-repeat);
    bg-color=#CC6613 (eye dropper); min-width=750px (type in manually)
  5. save, file > preview in browser (opt+F12 and cmd+F12)

Adding font CSS

  1. select <body>
  2. insert > layout objects > div: wraparound, ID=font
  3. window > CSS: link "font.css"
  4. edit the following rules
    • #font: type=Georgia
    • p: box: left margin=2em
    • h1: box: padding-bottom=0
  5. add the following rules
    • a: decoration=none, color=#F6A50C (point to color)
    • a:hover: decoration=underline
    • h2: box: margin-top=2em
    • h6: font=Verdana, size=1em, weight=normal;
    box: margin-left=0px
    • hr: color=#F6A50C (point to color); background-color=#F6A50C; border=0px; box: height=1px
    • #jumpMenu: font=Verdana, size=1em; background: color=#F6A50C; box: padding=2px; border: dotted, 1px, black
  6. save, file > preview in browser (opt+F12 and cmd+F12)

Adding the jump menu

  1. insert > form
  2. insert > form > jump menu
  3. insert menu items with URLs
  4. delete reference text
  5. optional (code view): change 'parent' with 'window.open()'
  6. save, file > preview in browser (opt+F12 and cmd+F12)

Finishing the HTML File

  1. modify > page properties: title: "Happy Cog Productions"
  2. view > head content
  3. insert > head > keywords
  4. insert > head > description
  5. commands > clean up XHTML

Grading

  1. publish file (see separate lesson)
  2. make a link from your process page to this assignment

BACK TO TOP
Last updated: 5/7/21