COIN74A - Assignment Nine


DW Cover


This assignment has several tasks.

Layers, which are AP Div tags, and behaviors are key elements in building dynamic and interactive websites. For this assignment, you'll create a set of examples of overlaid images, layers of text using <div>, and behaviors associated with layers. You may also submit any example of CSS-P. There are three primary deliverables, and you may be flexible in what you submit. Absolute positioning of layers, super positioning of text layers, super positioning of text and images, rollover effects (appear and disappear, pop-up images), or a navigation bar with pull-down menus, are all good examples.

For this assignment, please submit a link to a page where there is some evidence of using CSS-P, layers and behaviors. Use HW.htm, or supply navigation links to each of your assignment artifacts. You may apply layers and behaviors to your final website, but please keep it simple. You may also submit an example of a CSS page design.

HOMEWORK

Part 1: Layers (AP Elements)

You'll create one or more pages with examples of layers, following (carefully) the examples we've provided in the course website. Make sure to include a few examples as suggested below:

  1. Absolute positioning of images ( in CSS set, position:absolute; )
  2. Relative positioning of text layers ( in CSS set, position:relative; )
  3. Relative positioning and z-index of text and images

Part 2: Behaviors

You'll be submitting your assignment link HW.htm which will point to your assignment artifacts (wherever they maybe). Please include the following behaviors in your work:

  1. Rollover effects (appear and disappear)
  2. On click events (Open Browser Window)
  3. Add a one or more of the Spry Widgets, Menubar, Tabbed Panel, Accordian, Collapsible Pane, Tooltip

Part 3: CSS style sheet and CSS Positioning

  1. Prepare a small website using a CSS style sheet provided by Dreamweaver
  2. Develop a tableless page (use div tags instead of tables for layout) using CSS Positioning
  3. Comment on the pros and cons of using CSS templates and CSS Positioning (see the discussion links below)

Advice: I have no set expectations for what you submit for this assignment - and will grade according to effort.

CSS Style Sheet

Open a preset CSS style sheet from the File Menu - File>New>Page from Sample. Select CSS Style Sheet from the Sample Folder column. You will see a list of style sheets and what it looks like if applied to an .htm file. You can select one of these to be a starting point for your CSS file and build on it as you create your site.

For those with more time to spend on this project can download project samples files here. These contain .htm and css files.

CSS Style Sheet Samples


The Pros and Cons of replacing Tables with CSS Positioning

CSS1 specifications were enhanced to incorporate positioning. These positioning styles were known as CSS-P which has since become a part of the W3C specification for CSS2.

Someone on a list asked: "Can anyone explain to me WHY where I am now is not good enough and why TABLELESS CSS positioning is better?" And Eric Meyer replied: "To be honest, this isn't something that's really on-topic. If you want advice on how to make a certain layout tableless, that would be on-topic. Debating the worth of tables versus positioning is not. Both have strengths and weaknesses. Arguing about which one is "better" will get us nowhere. Therefore, this thread needs to end now. Thanks." -- Eric A. Meyer, List Chaperone

Replacing tables with div tags using CSS Positioning is the latest in web design. Here are a few excellent links and some controversy on the subject:

Up Arrow Top

Copyright © 2010 - 2011 Robert D. Cormia - March 7, 2011