INDIVIDUALLY

Create the table design, label with style classes, and add content. Your page could look something like this one, although copying this page will not gain you any credit.
1. Create Dreamweaver Site
  • Select Site —> New Site
  • Site Name : Project
  • Local Root folder : h:\www\society (create the folder society in the h:\www)
2. Create a new web page
  • File —> New : Basic Page - Make XHTML compliant : Create
    delete the top line <?xml version="1.0" encoding="iso-8859-1"?>
  • enter Title: <project name | your theme>,
    eg SPAM | Vikings
  • Save in filename index.htm (make sure you save it in the society folder)
3. Create the table framework.
  • Insert —> Table
    3 rows
    2 columns
    cell padding 4
    cell spacing 0
    border 0
  • Save
4. Add the style classes to table

Click just after the tag <tr| or <td|
don't use the mouse at this point
Press [space], choose class
press [Enter]
type in class names listed below in the graphic
don't press [Enter]. Just press –›
5. Enter Content
in the second cell of the .header row
heading level 1 : Project Name
heading level 2 : Theme
in the .links cell
heading level 2 : type “Links”
unordered list of links to all the themes in the project:
    type in the labels to click on.
in the .text cell
Open the file containing the draft text
Switch to Code view and select everything between the <body> tag.
Go back to index.htm and click in the .text cell.
Paste in the content.
in the .footer row
in first cell type the current date (change this every time you edit the page)
in the second cell type your name
6. Overview / Introduction

Remember that every project needs a page where you introduce the project topic, briefly summarize each theme and write a short conclusion.

You can make a copy of index.htm — call it overview.htm — before pasting in the theme content and then paste in the text of the overview that you've already written. You have thought about this, right?

This overview should be located in the project leader's society folder and therefore will have a URL similar to ~kamonji/society/overview.htm
7. Create links in side menu

What we want to do is to create links to all the theme pages of the project in the menu links sidebar

For each label text in the menu list:
  1. Browse to the project URL of the person doing the theme. For example, Nathan Bulls page would be at http://www.earlham.edu/~bullsna/society. Make sure it opens (if not check that the author has the correct filename in the correct folder), and select and copy the URL.
  2. In the sidebar menu (style .links, highlight the label text (this is the list of themes you inserted in stage 6) and in Properties : Link box paste in the URL. That's it.
  3. Remember that each group should have a joint introduction / overview called overview.htm; this needs to be linked too.
8. Format table grid

  1. Center the table so that it's always in the middle of the browser.

    Click on the <table> code to select the whole table.
    Properties : Align : Center

  2. Center the header cell:

    Click in .header cell
    Properties : Horiz : Center

  3. Vertical align the Links menu:

    Click in .links cell
    Properties : Vert : Top

  4. In the footer, right align author name; left align date:

    Click in author cell in .footer row
    Properties : Horiz : Right
    Click in date cell
    Properties : Horiz : Left
 

GROUP

Work as a group on on the group leader's index page to create the group stylesheet. Upload stylesheet to group blog. Other group members download stylesheet and attach to their own pages.
9. Decide on Color Scheme

This is a crucial part of web design but unfortunately we don't have the time to delve into color theory to give real guidance on appropriate color combinations and transitions.

Suggestions:

  • Top priority is contrast. Either light background — dark text (preferred) or dark background — dark text.
    Remember, what I cannot see I cannot grade!

  • Think about using a two color scheme and Eric Meyer's Color Blender to provide gradients.

  • For more on colour go to the Color Matters web site.

  • Set colours for:

    background color body and table header, links menu, & footer (these may not all be the same color)
      text area
    foreground color headings in header and links menu
      headings in text area
      text in text area
    Links in links menu (link, visited, hover)
      in text area (link, visited, hover). You will want to make these different
      in footer for email link (link, visited, hover)

10. Create stylesheet and disseminate.

  1. Make sure that you are currently in the project web page, index.htm
    In Design : CSS Styles click the Attach Stylesheet button

    click Browse , make sure that you're in the same folder as your project page (ie h:\www\society)
    type project_styles.css , OK
    Save.

  2. On the styles_skeleton printout write the values for the style attributes you want to change. For example, you might want to change the body font size to 10 pixels, the line height to 1.4em and the background color to black or whatever.
    Decide on all the vlaues before typing them in - that way you'll have a good record of what you originally chose.

  3. Now, from the Files pane open up project_styles.css
    Type in all the styles that you want to use, taking careful note that style classes begin with a period and styled html tags do not.
    Save as you go along — switch to the index.htm page and preview in both Netscape and Internet Explorer to see the effects.

  4. When you have finished, open up the group blog and upload the stylesheet into a new blog entry.

  5. Each group member should download the stylesheet into his/her own h:\www\society folder (right-click and Save Link Target As)
    Now, each group member should open up their own page and attach the stylesheet as above.
    Viola, instant web design.

  6. When you have finished check that all the links work and paste the URL of the overview page into a new blog entry in the group blog.
    Email me to tell me it's ready to go.