Homework 3

Due: Monday, January 28, 11:59:59 pm

  1. Design a frameset of four frames: a (small) title frame at the top, a navigation frame at the left, a main frame to the right of the navigation frame, and a small bottom frame. The precise layout is left up to you, but follow the general idea.

    The top frame should contain the title of the project, something that makes clear what it's about. The navigation bar shall contain the links to the pages that are going to be displayed in the main frame. The bottom bar shall contain a link that reloads the original frameset.

    The theme of the project is: "The five best reasons to attend the U of C". Alternatively, your theme may be, "The five best reasons not to attend the U of C". Or, if you're don't like either of them, invent one. Create an HTML page for each reason. These must be proper HTML pages with formatted text. The navigation bar should show links like, "Reason 1, Reason 2," etc. The link in the bottom frame could say something like, "Reload Frames". It must reload the entire frameset, not just a single page. Note: You need an additional page that will load into the main frame before any of the "reason" pages is called.

    1. Create a longer text document that contains the following HTML elements:
      • one <h1>
      • at least two <h2>
      • each <h2> must contain 3 <p>
      The text content does not matter; just put something in headings like, "Title 1", "Subtitle 1", "Subtitle 2", and paste a chunk of text into your paragraphs, so that they have some body.
    2. Save two copies of this page as text1.html and text2.html, for example.
    3. Create two external Cascading Style Sheets in which you set the style properties for all elements according to the following table


      Stylesheet Definitions
      TAG required optional
      body background
      color
      font-family
      font-size
      letter-spacing
      line-height
      margin
      		 text-align
      h1, h2 font-family
      font-size
      font-weight
      font-style
      		 color
      background
      line-height
      text-align
      border
      padding
      p font-family
      font-size
      font-weight
      		 text-indent
      margin
      text-align

      The style attributes in the "required" column must be defined in the style sheets. The "optional" items are suggestions. You may use them or not, or you may add other tags and style attributes to your style sheets. (However, as a strategy, we suggest you first fulfill the requirements and experiment optional items later.)

    4. Each style sheet must have two different classes for <p>; one should be appropriate for a quotation block. (Do not use <blockquote>.) The appearance of all elements must visibly suggest their function. (An <h1> divides a larger section than an <h2>; a proper paragraph is more important than a quotation, etc.)

      For a reference on style attributes and CSS, refer to "CSS Properties", or see the course resource page.

    5. Use different font families in each style sheet. Both style sheets must visibly change the appearance of the two text HTML pages you created.
    6. Finally, link each stylesheet to one of the two text HTML you created earlier.
      1. Finally, create an index.html page in your directory for homework 3, incuding links to the assigments. Corresponding to previous assignments, the path to your homework should be:

        http://people.cs.uchicago.edu/~[username]homework/hw3/index.html