The header and the footer will be as wide as the browser. This is a new technique, and you are to accomplish it with a bit of experimentation (hint: keep the header and the footer outside of the wrapper div).

You will invent the topics and write or copy (with attribution) content for them. You will also provide all imagery. The images are indicated by sizes on the wireframe (380 x 300px, etc.).

The background of the links in the menu will turn a different colour when they are hovered over (see wireframe). Also, the link for the page that the user is visiting will have that same background colour highlighted to indicate which page they are on (see wireframe).

Two of the Continue Reading links should link to Page 1 and Page 2 of your website. The third Continue Reading link can be a link to nowhere.

You must supply a different 380 x 300px image for all three of main page, page 1, and page 2.



Marking Guide (Out of 50):

All pages (23)
All html elements are correctly nested. (4 marks)
All html code is properly indented. (4 marks)
The basic HTML boilerplate code is used (4 marks)
The menu links are in a <nav> div, and are coded as a floating list. (4 marks)
The header and the footer sections are as wide as the browser, and the rest of the page is 960 pixels, fixed width layout. (4 marks)
The content of the website makes sense, and is consistent on all three pages (3 marks)
Main Page (16 marks)
The widgets contain 100 x 180 px images, and look like the wireframe (6 marks)
The Continue Reading links are laid out like in the wireframe, and work (3 marks)
The main content section looks like the wireframe (3 marks).
The 380 x 300px image is in the proper position (2 marks)
All elements are separated by margins like in the wireframe (4 marks).
Pages 01 and 02 (8 marks)
The text wraps around the image (4 marks)
The pages look like the wireframe (4 marks)
Miscellaneous (3 marks)
The link that you submit is clickable, and leads to your assignment (3 marks)
Total: 50 marks