CMSC10100
Homework 2

In your second assignment, you task is to design and implement a multi-page site and work on page layout and site navigation. To these ends, you will create two version of your site, on with tables to control layout, and one with frames to control layout (this simulates the real world: your tables version is the alternative of your frames version used in browsers without frames support). You should create directories  ~/html/cmsc10100/hw2/tables/ and ~/html/cmsc10100/hw2/frames/ and put the two versions of your site in separate directories. A Web page should be at ~/html/cmsc10100/hw2/index.html to link the visitor to each site.

You are highly recommend to make both your tables version and frames version describe a same theme or topic (you may make them totally different in topics but not necessary). You may use the same theme or topic in your homework1 implementation or you can switch to a new one if you like.

You should follow the site top-level layout as depicted in Figure 1 to implement both your tables version and frames version. In particular, for the table site, make sure each page has a common look and feel, including separate sections for header, navigation, and content. For the frame site, use a frameset that provides frames for navigation, header, and content.


Figure 1: site top-level layout

You are required to implement at least 3 different Web pages for each version. Among these pages, you should fulfill the following requirements:

  • Control font size, color consistently in all your pages for each version.
  • The Banner/title Region and Navigation Region should remain stable and Content Region contains the dynamic information from page to page.
  • Use both a list of text-based hyperlinks and an image map to implement Navigation Region. For example, for your tables version, you use text-based hyperlinks for navigation and for your frames version you use image maps or vice versa.
  • In each version, each of your Web page should have a link (either text-based hypertext or image map hotzone) in the Navigation Region. You also need to provide a link that points back to the ~/html/cmsc10100/hw2/index.html Web page (this provides viewers to go back to the original page they start from). For frames version, you should make sure these links in Navigation Region are targeted to the Content Region. For tables version, your implementation should provide the similar effect.
  • For each version, you should have at lest one Web page providing a table-based  photo gallery. The gallery contains thumbnails of the pictures (should related to the site's theme or topic) that link to the full-size pictures. 
  • For each version, you should have at lest one Web page defining a set of named anchors at different position of the page. You should provide a list of hyperlinks at the top of that page to navigate to these named anchors.
  • For both versions, use tables when necessary to provide sub-structure for each section of the page.
  • Make sure your frames version has no deep linking problems.
  • For both version, validate your pages through the W3C validator.

Your homework will be graded on the basis of the correctness of your HTML, using good style, etc for both versions. 

Due Date

Your homework 2 is due Midnight, July 9th (Wednesday).

Permissions

Make sure the permissions for all your directories are set so that they are world-readable and executable (755). Make sure that the permissions for all the Web pages (~/html/cmsc10100/hw2/index.html, Web pages under ~/html/cmsc10100/hw2/frames/, and Web pages under ~/html/cmsc10100/hw2/tables/) set to be world readable (644). You should point your browser to http://people.cs.uchicago.edu/~<your cs account>/cmsc10100/hw2/ once the code is on the server to make sure it looks right and the permissions are properly set. If the browser loads the file, then your permissions are ok.