Homework 7

Scenario:

Your task is to create a web page that displays a weekly planner page. I have done a sample. You can imitate my sample, or you can creatively create your own design, using the criteria that I have listed below.

Sample output:

• A sample planner page as displayed in Firefox is shown here. Firefox output.
• The background texture that I used: texture.jpg
• The flower image that I used: flower.jpg

Specifications:

CSS Implementation:

• Implement CSS entirely with a single stylesheet brought in via the <link /> approach, with media="screen,projection" specified so that NS 4.x ignores the file.
• Use the CSS box model liberally
• Use the following properties somewhere in the presentation of your page:

  background
  border
  border-collapse (collapse) or empty-cells
  color
  font or font-family (verdana,geneva,lucida,arial,sans-serif)
  div
  font or font-size
  font or font-weight
  line-height
  margin
  margin-left and margin-right (auto)
  min-width
  padding or a specific padding-side
  text-align (center, left)
  table, tr, td
  width

Tags/Attributes/Properties and Coding Approaches Not to Use:

• cellpadding attribute (use the padding property)
• width attribute (use the width property)
• align attribute (use the text-align property)

Layout:

• Center the layout in the browser window. Make it be variable width (use 90% for the width).
• Create a 3 column table for the outer table.
• Set a minimum width on the outer table. Applying a min-width on a column doesn't have any effect, since any width applied to a column is considered a minimum value already.
• Use a nested table to insert the month in the lower right-hand corner
• Create an attractive border for the page, using a combination of more than one border style.
• Use a background image for the entire page or part of the page.
• Include an image in the second column of the table that extends vertically over more than one row.
• Display blank lines for each day so that the user can write in appointments or notes.
• Color coordinate your text colors, border colors, background-image, and image.
• Note: If you choose border-collapse to be "collapse", then an empty-cells value of "hide" will not work.

Linking:

• There is no link from this page to your class page. However, you should link from your class page to this assignment. Use a relative link.
• We are not altering the default link appearance or behavior.

Validation, Code Efficiency, and Coding Style:

• Streamline your code to make it efficient.
• Use XHTML tags appropriate.
• Use white space to make the coding easier to read.
• Include some comments, to improve understanding by someone reading your code.
• Provide an appropriate <title> </title> value.
• Include your name in a meta "author" element.
• Validate your code at the W3C validator (validator.w3.org). Your code should achieve perfect XHTML 1.0 Strict validation.
• Validate your CSS at the W3C CSS validator (http://jigsaw.w3.org/css-validator/). There should be no errors reported.

Submitting Your Work:

• Print out and submit your XHTML code in landscape mode.
• Print out and submit your CSS file.
• Write on your output the url of your hw7 file.

Due:

• Start of class on Monday August 6.