Assignment 3 Steps

Each of the following steps will complete one part of Assignment 3. Complete them, post to your class Web site and link from your site's home page.

Step 1 - Formatting with Tables (from last week)

Review using tables as page layout tools by creating the following versions of the I Ching. Do not look at the code unless you must:

  1. Download the basic text file and the needed resources.
  2. View the files. There are three versions linked together.
    1. Plain
    2. Nicer Format
    3. Table Version
  3. Create the code
  4. Post and link to your Site when you are done

Step 2 - Image Maps

WebMonkey has a nice tutorial on "Client-Side" image maps. Just a note: client-side is really the only technique being used these days. Ignore the link to the "Server-Side" image map tutorial.

These are other perspectives on client-side clickable graphics:

  1. NCSA Image Map Tutorial - Boring but comprehensive
  2. Yale Style Manual-Imagemaps (A short section is towards the bottom of this resource. They've recently revised this site, I see.)

There are several software packages available to create clickable image maps. In class we will use Fireworks, but several packages create maps. You can download a nice tutorial from the Macromedia tutorials site; Lesson 9 deals specifically with Image Maps.

Modified WebSite Exercise using a one-piece button bar.

Using your midterm as a basis, integrate the supplied one-piece graphical menu to use an interface element. I've included the whole midterm if you prefer to use it.

Step 3 - A Survey Form

Exercise: In your Web authoring program, add elements to the form you created above. Maybe now your form will look like this survey form.


All links are to a specific section of the WDVL Form Quick Reference

  1. Begin with the FORM tag
  2. Then create a place for text input
  3. Finally, create Submit and Reset buttons (note: This is kind of a dumb page. You create one submit button and one reset button.)
  4. Now add Text Boxes with several lines
  5. Popups (this is covered towards the bottom of the page)
  6. Check Boxes
  7. Radio Buttons


arrow upreturn to top

Cascading Style Sheets

Styles are made up of tags and one or more definitions that determine the appearance of text within that tag. Definitions are created with a property, a colon, and one or more values. Note that some properties can be grouped together, as in the font declaration in the paragraph below.

Styles may be applied locally, internally, and externally.

Local (inline) Styles

This is an example of an inline or local style. View the source and look at the STYLE attribute in the paragraph tag for this text. It is followed by a string of properties and values. Note that due to my use of a blockquote tag, more of the background may be filled that would be desired.

All of the above was accomplished with this version of the <p> tag. Note that there are a number of values for the style attribute. They are all separated by a semicolon (;):

Internal Styles

Internal styles are placed in the head of a document. They are declared in the <head> with the STYLE tag and TYPE="TEXT/CSS" attribute. As in JavaScript, the contents of the tag are commented out. Then a list of desired definitions are listed. Note that properties and values are contained within brackets, and multiple declarations are separated by semi-colons. Here is an example of what an internal style sheet looks like:

<style type="text/css">
body {color: black; background: white; }
H1, H2 { color: gray; font-family: Arial, Helvetica, Sans Serif; }
H3, H4, H5, H6 { color: red; font-family: Arial, Helvetica, Sans Serif; }
P { color: blue; font-family: Comic-Sans, Western, fantasy; }

This is a page created using this inline style.

External Styles

Most powerful of all is the external style sheet. Here a separate document is created containing the desired styles for a site. All pages within the site are linked to it with the LINK tag. The URL is defined in order to access the document, and its REL and TYPE are declared:

<LINK HREF="../../a1_styles.css" REL="stylesheet" TYPE="text/css">

Once this relationship is established in all the pages, changing the look and feel of the site becomes a simple process of changing the style document. This is how my site works.

The external document is simply a text file containing all of the definitions. No HTML coding is included in this document. It is saved with the extension .css. My external sheet simply looks like this.



Take this document and torture it to your hearts content (or use a page of your own). Include examples of local, internal and external styles. Pull some ideas from Raggett's Guide.

Step 4 - Add a Style Sheet

Conceptual Design for Web Projects

This week we go from paper plans to web mockÐups. The reading concentrates on organizing your thoughts and planning the site. Planning in a hypertext environment carries its own challenges; pay close attention to the various strategies suggested by the text.

Exercise: Use one or more of the text's ideas and create a visualization of your final project web site. Then create a prototype using simple web pages that show the content and link relationships.


arrow upreturn to top

Assignments for week of November 15



Hollenbeck Home

Last modified Thursday, April 13, 2006 9:56 AM

Search ECI 575