Expected Appearance:
You must match in appearance the following web page (between but not including the thick black lines):
This assignment tests your understanding of XHTML and CSS for layout, positioning, and the CSS box model. You will create several files related to a movie review web site. Turn in the following files:
index.html, the first of two web pagestmnt.html, the second of two web pagesmovie.css, the style sheet for tmnt.html
In this assignment, you will be creating the web site for a movie review web site named Rancid Tomatoes. The first part of your task is to create your own movie review for this web site, stored in a file named index.html. Your index page can be a review of any movie you like. It should have at least two quotes from critics. You can take these quotes from a real site such as Rotten Tomatoes or make them up yourself. If your index page contains images, they should be either the ones described in this document for tmnt.html or ones that reside on your space on our Webster server (not ones on other servers on the Internet). Your index page must contain a link to tmnt.html. It must have a body at least 20 lines long that contains at least 6 different HTML elements. It must also be your own work and must not take significant content from this assignment's other file tmnt.html, or an index.html you have submitted for previous assignments. Otherwise, this front page can have any appearance you like. If you like, you may use an optional CSS stylesheet with this page named index.css and submit it with your other files. Be creative! We may show some students' pages in class on future dates.
The second part of the assignment is to recreate a specific web page containing a review for the recent movie TMNT, stored in a file named tmnt.html. This page must match a specific appearance specified in this document.
We will provide you with a skeleton version of tmnt.html that contains most of the basic page contents, but without any page sections or styling. Our intention is that the only major modifications you will need to make to this file will be to add page sections using div and span tags, and adding id and class attributes as targets for CSS styles. For full credit, you should not change the existing elements on the page other than the additions just described (and any minor changes such as indentation and spacing).
You must match in appearance the following web page (between but not including the thick black lines):
All images on the page and mentioned in the following text are hosted on the web in the following folder. You should link to all images using their full absolute URLs, not relative ones.
http://www.cs.washington.edu/education/courses/cse190m/08sp/homework/2/images/
The overall page has a background image of background.png. Text on the page uses an 8pt normal font. The preferred fonts for text are Verdana, Tahoma, or any sans-serif font available on the system. The overall page body has no margin or padding, so its contents stretch to the very edge of the browser window.
The top of the page contains an image banner. The center of this banner is the image rancid_banner.png. Behind this banner the image rancid_background.png is repeated horizontally across the entire length of the page. Each of these images is 50px tall.
Underneath the image banner is a centered heading containing the movie name and year in a 24pt bold font. The preferred fonts for this heading are Tahoma, Verdana, or any sans-serif font available on the system.
Below the main heading is the page's overall content area, containing an overall 32% rating for the film, several critics' reviews, and an overview of the film at right. Taken together this content occupies 800px in width and is centered horizontally within the page.
Within the overall content area, there is a central section that contains the overall rotten
rating of 32% and the critics' reviews of the movie. This section is 540px wide with no padding, and has a background color of (red=239, green=225, blue=171) or #EFE1AB. The section is topped by a smaller section containing a large rotten
image (rotten_big.png). Behind this the image rotten_background.png repeats horizontally across the entire length of the section. Each of these images is 83px tall. This is followed by the 32% overall rating for the film, which is shown in a 48pt red bold font.
Each individual review consists of a box in which the reviewer gives a quote about the movie, shown in bold 8pt font. The quote box has a background color of (red=225, green=214, blue=151) or #E1D697. The box has a gray border, 2px in thickness. 8px separate the quote box's content from its border. Each quote box also contains an icon representing whether the reviewer liked (fresh.png) or disliked (rotten.png) the movie. These images hover to the left side of the quote box, with 5px separating them from the text to their right. The reviewer's personal information follows underneath the quote box, including the reviewer's name in italic and publication to the right. A reviewer icon (critic.png) is also shown, hovering at left with 5px separating the image from the personal information text to its right. 20px separates the bottom of the critic personal information text (such as Peter Debruge, Variety) and any content below it (such as the next critic's quote box).
Below the set of reviews is a bar explaining that the page shows reviews 1-8 of 88. This bar has a background color of (red=186, green=189, blue=115) or #BABD73 and is placed directly up against its surrounding content. 5px separate the edge of its text and the element's own outer edge.
To the right of the critics' reviews is a General Overview section of the page. This section's content area is 224px wide, with 10px of space between its content and its outer edge, for a total of 244px in width. The overview's content uses a background color of (red=162, green=185, blue=100) or #A2B964. Its text appears in an 8pt font of Arial or any sans-serif font available on the system.
The section includes a definition list (using dl, dt, and dd elements) containing information about the movie such as its stars, director, rating. Each of these terms of information is bolded and has 0.5em of vertical separation between it and the element that precedes it. The bottom of this section contains a link to the official movie web site, http://www.tmnt.com/.
The bottom of the page has a right-aligned paragraph containing two links to the W3C validators. These are the same images and links as used in the previous assignment, except for the fact that they should not have borders.
All other style elements on the page are subject to the preference of the web browser. The screenshots in this document were taken on Windows XP in Firefox 2.0, which may differ from your system. The web page's title text should be TMNT - Rancid Tomatoes .
CSE majors in majors-only sections should also complete the following additional features. Many of these haven't been covered in class, but we are expecting you to learn about them on your own.
HINT: When multiple elements float in the same direction, they stack up horizontally into columns.
Place the heading image general_overview.png on top of the right-hand-side General Overview section of the page. (This is slightly trickier than it sounds, because you must add this image without significantly changing the XHTML code, and because the image should extend out to the very edge of that page section, without any green border around it.)
tmnt.html page describing its content type, author, and a page description.
(See the lecture 04 slides or check a site such as w3schools to learn about the meta element.)
rotten.gif.
(See the lecture 04 slides or check a site such as the w3 HTML specs to learn about favicons.)
A screenshot of the majors-only output will be provided on the course web site.
We STRONGLY recommend that you install and use the Firebug add-on for Firefox when working on this assignment. Using it to inspect elements will help you diagnose problems with the box model and get your styles just right. We particularly suggest using the "Layout" tab on the bottom right to investigate the box model settings for particular elements.
Implement the content of your web page using XHTML 1.1 as taught in class. For full credit, your page must successfully pass the W3C XHTML validator. Do not express stylistic information in the XHTML itself, such as inline styles or presentational HTML tags such as b or font.
Express all stylistic information on the page using CSS defined in the file movie.css. For full credit, your style sheet must successfully pass the W3C CSS validator. Part of your grade comes from expressing your CSS concisely and without unnecessary or redundant styles, as well as using context selectors to avoid applying classes and IDs to large numbers of elements when possible. As much as possible you should avoid using absolute and fixed positioning on this assignment (non-majors do not need to use either). You should not use HTML or CSS constructs past Chapter 2 of the textbook.
Format your HTML and CSS nicely so that it is as readable as possible, similarly to the examples shown in class. Also place a comment header in each file containing your name and section and a brief description of the assignment and the file's contents. You must properly use whitespace and indent your XHTML and CSS code following examples shown in class. To keep line lengths manageable, do not place more than one block element on the same line or begin any block element past the 100th character on a line. For reference, our solution has 115 lines of CSS, though you do not need to match this exactly.
The majority of the points for this assignment will be for the movie.css file. The tmnt.html and index.html will also be graded but will be worth fewer points. The main stylistic constraint on your index.html file is that it should pass the W3C XHTML and CSS validators. Beyond that it can contain any non-obscene content you like, even content that uses material we have not yet learned in lecture. Please do not link to external resources other than image files from your index.html.
Submit your assignment online from the course web site. Make sure to turn in both .html files and your .css style sheet. You do not need to turn in the provided images. If your index.html page includes images linked using absolute URLs, you do not need to turn them in.
Part of your grade will also come from successfully uploading your files to the Webster web server. You should place your files into your public web space in a subdirectory named hw2, so that it is possible to navigate to your page by entering the following URL into the browser:
Please do not place a solution to this assignment online on a publicly accessible web site. Doing so is considered a violation of our course academic integrity policy.
Except where otherwise noted, this document's contents are © Copyright 2008 Marty Stepp / Jessica Miller and licensed under Creative Commons Attribution 2.5 License.