This assignment is about learning the fundamentals of Cascading Style Sheets (CSS), especially relative positioning, and the rich set of attributes that can be applied to control layout. You will also use CSS to control the appearance of text.

Using only CSS and the CSS-positioning HTML tags listed below, duplicate the layout of an old version of the Metropolitan Museum of Art navigational home page. This will be a shift in coding, since they use tables, and font tags, and for this assignment, you will not.

You will replace "image text" used for navigation with regular HTML text, with appearance controlled by CSS. When replacing the image text, choose a set of fonts such that the first one is as close a match as possible; the later entries in the set will be fonts that make sure that at least one of those that you specify will be available on any computer. Do this only for images that consist entirely of text.

You will need to capture a snapshot of this page, at the start of the assignment. Follow the following procedure:

1. Open the home page (right-click to open in new tab) in a sufficiently large Chrome browser window.
2. Take a screenshot of the page in the browser window.
3. Use GIMP or Photoshop to carefully crop the image of the page, from inside of the browser, in your screenshot. Save this as a copy, keeping the original. This will be your reference image. Add a link to the bottom of the page that allows the viewer to see your reference image as a background, underneath your HTML version of the page.
4. To check your progress, as you code your version of the file, swap this reference background image in as the background, using the CSS background attribute of the body tag.
5. Using a little javascript, including an onclick handler, create a link below the page that toggles whether or not the reference background is showing. This will be convenient for development.

If for any reason, there are some features of the Met page that are impossible to duplicate, in general, or on a particular display, then explain: (1) the nature of any such limitation; (2) how you have done your best to provide similar but alternative functionality; and (3) what differences arise between the original home page and your presentation. This includes any potential issues involving replication of your screen shot.

Do not look at the source for the current Met Home Page while working on this assignment.

Block level HTML elements for this assignment

<div>

<p>

<h1>...<h6>

Some Useful CSS attributes

float:

border:

margin:

padding:

width:

height:

position:

HTML Elements not allowed for this assignment

<table>

<font>

Variant: Your Exhibition

When you have finished coding the main part of the assignment, create a variant page. In the variant, modify the set of "Special Exhibitions," so that one of them is an imagined exhibition for some (real or imagined) work of yours. Make sure to exactly imitate the style of their presented exhibits (same sized image, same amount of text and formatting). Your exhibit should look like it belongs, except for the content. Express yourself with the content! Add links to the bottom of each version of the page, to enable navigation from one to the other.

Coding Standards

Please adhere to the following HTML coding standards for this assignment, and throughout the course:

1. Make your code readable. Use whitespace. Name styles and other identifiers so that each name indicates function.
2. Put all of your style declarations into a separate .css file. Access them in your HTML via the class attribute, the name attribute, or through HTML element level declarations.

Course Website

Create an initial course website. You will need to identify hosting. Create a home page for this course. Include some information about yourself and your interests, regarding expression on the web.

Put your version of the Met Home Page on your website. Put a link to your Met Home Page on your course home page. To turn in this assignment, use this form to submit the URL for your course homepage.

Deployment Context

Make sure that your version of the assignment works with latest Chrome browser on Windows and Mac OS. Make sure it works for a full range of browser window sizes, and at assorted reasonable monitor resolutions.

Honor Code

On this assignment, unlike on most assignments in this class, you are NOT allowed to share your code, or look at other people's. You are not allowed to use any external frameworks.

Any violation of this policy will be considered an A&M honor code violation: VERY SERIOUS.

Rubric