Further Reading Page

description / requirements / researching & documenting / XHTML reminders / saving your page / adding CSS

Description

This assignment gives you a chance to practice (1) using RU Libraries resources to research a narrowly focused subject (i.e., the Dada art movement); (2) documenting print and online sources in MLA format; and (3) implementing internal page navigation and layout with HTML and CSS.

For this assignment you will make a short Further Reading Page (FRP) for visitors to the Surrealism Unbound exhibition at the Metropolitan Museum of Art in New York.

Your page should observe the conventions of the FRP as discussed in class.

Here is a typical further reading page, on marine biology, that uses MLA documentation style to organize the bibliographical information for each source.

Here is a similar page made for this class: "Through the Eyes of an Octopus".

Use the web to learn about Surrealism. Then use IRIS, the online indexes and databases available at the Rutgers Libraries website, and the search engine of your choice to find the best sources to satisfy the following FRP requirements.

top

Requirements

Your page will need to include:

    Part 1

  1. A "General Interest" section listing at least three books on Surrealism.
  2. An "In Depth" section listing at least three articles on specific aspects of Surrealism. Follow each bibliographical item with a two sentence description of the article. Base your descriptions either on the article abstract or on the article's introduction.
  3. A "Surrealists" section listing at least three articles on one or more artists in the Dada movement. No description required.
  4. An "Online" section listing and briefly describing at least three really good/useful websites devoted to Surrealism in general or a particular Surrealist visual artist, writer, or film-maker.

    5. Note: These shouldn't be just any books, articles, or sites; they should be GOOD ones and they need to be genuinely relevant, if not the best you can find. So be selective.

  5. A few relevant images to decorate the page.
  6. Navigation ("subnav") between the top of the page and each section (see Castro 106).
  7. Back-to-top links from the end of each section to the top of the page, like this one:

    Return to top

  8. At least three levels of Header (h1, h2, h3, etc.) to divide the page. As with your Bio Page, headers of at least one level should repeat several times (e.g., using h2 or h3 headers to label each of your main sections).
  9. A byline in that reads "Prepared by [your name]" under the the title/main header.
  10. A surrealistically themed banner.

    11. Part 2

  11. A one-column layout using divs.
  12. Style formatting using CSS.

The last two requirements will come into play later, as we learn CSS and revise the FRP. Do not worry about them until weeks 3 and 4.

You should not use Dreamweaver or another WYSIWYG for this assignment. If you do, be sure to clean up your code so that it looks as if you did not.

Your page should follow the course Design Baseline, as discussed in class.

top

Researching and Documenting

Use the RU Libraries IRIS and other catalogues to research books.

Use the RU Libraries indexes and databases to research articles in science journals.

Use the search engine of your choice to research websites.

For documenting books and articles, use Dianna Hacker's site on MLA style (or the MLA Handbook, if you have a copy).

top

XHTML Reminders

As you work on your page, remember these features of good XHTML form:

  1. Include the following DOCTYPE declaration at the start of your file (above the opening <html> tag):

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

  2. Remember to declare the namespace inside the opening <html> tag; thus:

    <html xmlns="http://www.w3.org/1999/xhtml">

  3. Close all paragraphs with a closing P tags (i.e., </p>) — despite what it says on the GetIT HTML tutorial.
  4. Use only lowercase letters in your tags (i.e., <body> and not <BODY>).
top

Saving Your FRP

Save your Further Reading Page and related files in your "drafts" folder on Eden.

top

Adding CSS

Add CSS to your Further Reading Page. First, use CSS to center the "wrapper" div containing your content. Next: use CSS to control the margins, padding, and font color(s), and background color(s).

Customize the links on your FRP so that subnav links look different from other links on the page.

Make sure your page has the following FRP design features (using CSS):

  1. Wrapper is no more than 770px wide
  2. Main content consists of darker text on lighter background (curious about this requirement? See these comments on readability from Max Design)
  3. Main textual content is left aligned and no more than 560px wide
  4. Main content has 15px or more padding left and right
  5. Main content has 20 px or more of padding top and bottom
  6. Main content has a background color
  7. The space outside the wrapper div (i.e., the body) has a different background color (or image)
  8. All intro and bibliographical data appears in a sans-serif font
  9. All headings (h1, h2, h3, etc.) in a contrasting serif font
  10. The subnav design is distinct (at least in color) from other links on the page
  11. The nav is customized and uses at least the hover pseudo-class
  12. The page has a banner of your own design

Note: Refer to Common Fonts page for some font options.

Finally (but essentially): Does your FRP show good use of contrast, proximity, alignment, and repetition?

top
return to schedule ~Jonathan Bass
Web Authoring - Fall 2007