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. Link to their versions of all the images, unless they disappear (see below), in which case, put whatever copies you need into a directory.

You will replace image text 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.

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

1. Open their home page in a fullscreen Internet Explorer browser window.
2. Save 2 versions of the page. One should be HTML only; the other should be "Web Page, complete". The latter will save all of the images for you on your local hard drive, just in case they disappear from the Met's site (though this is unlikely).
3. Use the print screen button to take a screen shot of the page in the browser window. Use Photoshop or Programs->Accessories->Paint to save this screenshot as a JPEG file.
4. Use 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.
5. To check your progress, as you code your version of the file, you can swap this reference background image in as the background, using the CSS background attribute of the body tag.
6. When you get comfortable enough, using a little javascript, create a link at the very bottom of the page that toggles whether or not the reference background is showing. This will be convenient for development.

Refer to image assets by linking to versions on the Met's servers, not your own copies, unless this becomes impossible. If that is the case, please report about it explicitly.

If for any reason, there are some features of the Met page that are impossible to duplicate without tables, explain the nature of the limtation, how you have done your best to provide similar but alternative functionality, and what the differences are.

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

<div>
<p>
<h1>...<h6>


float:
border:
margin:
padding:
width:
height:
position:


<table>
<font>


When you have finished coding the main part of the assignment, create an additional variant version of the page. On the variant, modify the set of "Special Exhibitons," so that one of them is an imagined exhibition for some 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, which can be whatever your heart (or your sense of humor) desires. Add links to the bottom of each version of the page, to enable navigation from one to the other.

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.

You will need to identify some web space for your work on this and future assignments. In your web space, make a subdirectory called assignment_one. Put your assignment in there, as index.html. Email to me a link that tells me where the top of your web space is. For now, don't tell others where it is. Soon, we will share this information.

On this assignment, unlike on most assignments in this class, you are NOT allowed to share your code, or look at other people's. Violations of this policy will be considered A&M honor code violations: VERY SERIOUS.

Make sure that your version of the assignment works on Windows 2000 and XP, for mozilla 1+, and ie 6. Make sure it works for a full range of browser window sizes, and at assorted reasonable monitor resolutions.