Assignment #3

RCC Fall 2009 CIS-72A XHTML

Using Tables to Organize Data and Control Page Layout!
Due Wed Sept 30 at start of class
7 Printouts, 100 Points

Note that for this and all future assignments, you are encouraged to use the CSE HTML Validator as both your HTML validator and your HTML editor. Tables are particularly tricky and detailed, so your coding efforts can be minimized by using this recommended editor/validator. You can download the most recent "lite" version of it for free from http://www.htmlvalidator.com/lite/ or other sources discussed in class. To follow along step by step with the hybrid video (part 1) more easily, this editor is recommended though not required.

Part 1: the Hybrid VIdeo #4: Tables
2 PrintoutS, 40 Points

For this part of the assignment, you are asked to watch, listen, and do the same steps as are done in the hybrid video. To do so you will need to have a set of data files ready for your own use. The links to this hybrid video and to the data files appear below. But before you attempt to access this video or its data files, you should first read the "About Hybrid Videos" document (and the section entitled "Getting The Data Files For The Video") so you are sure to be experiencing the video as it was intended.

Link to the data files: Data files for Video #4 (33K .zip file)

Link to the Windows Media video: Hybrid Video #4 (16MB .wmv file, 62 min 52 sec video)

Link to the Flash version of this video: Flash Hybrid Video #4

Link to the editor: CSE HTML Validator Lite (First download the .exe file -- then run to install)

By doing what the video does, you will be building a "Rooms" page for the fictitious "Rainforest Hotel" using the given data files as a starting point. The result will be a table-based 2-column page layout with navigation buttons down the fixed-width left-hand column and the main page content appearing in the more flexible-width right-hand column. Also, the page content includes a data table with detailed room information neatly organized into rows and columns. Your work can be saved on any disk and folder that you like and should be exactly like the document created in the video with the following differences.

After completing your work from the hybrid video, make the following changes to your page:

  1. Replace the name "Joe Student" with your own full name wherever it appears in the video's document. Also make sure your info appears in the commented area toward the top of the html code.
  2. If you are using the "CSE HTML Validator Lite" editor, make sure your page validates without any errors. If not, do whatever else you can to check it in your editor or check it online because it will be graded for correctness.
  3. After you complete the page, turn in the following printouts:

Printout #1: Turn in a printscreen printout of the finished page, as it displays in the browser at a resolution of 1024x768. All of your page's content should be visible and all images, background colors, and background image must also display (although you don't have to print it in color). Make sure your name shows up instead of "Joe Student" on the printout you turn in.

Printout #2: Turn in a printout of the HTML code for this same document, printed from within your text editor (such as CSE HTML Validator). Make sure that your HTML code printout shows all of your code and does not cut off long lines. If you are using the CSE HTML Validator to print your code, be sure to click the "Wrap lines" checkbox in the Print dialog box. Your code is expected to be valid and will be graded accordingly.

Part 2: Tutorial 5, Designing a Web Page with Tables
2 Printouts, 40 Points

Read and follow along the steps and instructions given within tutorial 5 (pages 271 - 330). In completing these pages, you will work with the "KPAF Radio" Web site that is in need of some table-related modifications. Work through this tutorial with following in mind.

  1. When entering the table's caption on page 285, modify the given caption text, "All times listed in central time", as follows. At the beginning of the caption, insert "Schedule by Yourfirstname Yourlastname -- ". To clarify, if your name is "Joe Smith", the caption should read...
    "Schedule by Joe Smith -- All times listed in central time".
  2. After completing page 299, the next sections of the tutorial focus on using CSS formatting. To better understand the use of "classes" in this part of the tutorial, it is recommended that you view the following video, which contains similar class styles to your page's styles. The last 4 minutes of this video are particularly relevant -- from 5:10 to the end. (Note this is the same video linked to in assignment #2, where the first 5 minutes were relevant.) After watching this video, continue to complete the rest of the tutorial.

    Link to the optional video: ID's and Classes Video (22MB .mov file, 9 min video)

After completing this entire tutorial, create the following printouts to turn in.

Printout #3: Turn in a printscreen printout of the finished "KPAF schedule" page, "schedule.htm", as it appears in the browser. Do so in a maximized browser window at as high a resolution as needed to see as much of the page as possible (at least 1024x768 and bigger if you can). It should look like the figure shown on page 329 except for the insertion of your name into the table's caption as described above. If the whole page will not display at once, scroll up/down as needed to make sure that at least your name and the entire schedule table is in full view.

Printout #4: Turn in a printout of the HTML code for this same document, printed from within your text editor (CSE HTML Validator for example). Make sure that all of your HTML code shows up on your printout. If you use the CSE HTML Validator to print your code, be sure to click the "Wrap lines" checkbox in the Print dialog box. Unfortunately, there isn't any one place in the book that contains all of the HTML code for this page, so you'll just have to carefully double-check the HTML code sections yourself. Note that this printout may take a few sheets of paper -- be sure to turn it all in and to order your printout sheets properly. Your code is expected to be valid and will be graded accordingly, so you should validate it (and fix any problems before printing it). To validate, you may use the CSE HTML Validator or another validator of your choice.

Part 3: Room With a Mirror View
2 Printouts, 20 Points

For this part of the assignment, you are asked to make some changes to the completed rooms page that you built for part 1 above. There are not many changes to make, but the changes have to be done correctly to make things work right. Your goal is to have your page look like the one pictured below, which is a printscreen taken at 1024x768 from within IE6. The guidelines listed below will detail the changes that need to be made to achieve the pictured goal.

  1. Make a copy of your completed rooms page from part 2 of this assignment and make your modifications on that copy. That way, in case you accidentally mangle the delicate table coding while working on part 3, you can always go back to your completed part 2 page's code.
  2. Make the necessary layout table adjustments so that the main content is displayed in the left-hand column and the navigation buttons are displayed in the right-hand column (as shown below.)
  3. Make the necessary data table modifications to add a 5th column to the table which lists the membership discount prices as shown below.
  4. Make the necessary column group modifications to this data table so that this new 5th column is accounted for and will also be right-aligned (like the 4th column) as shown below.
  5. Change this data table's footer (the fine print) so that the new 5th column is accounted for and change the footer text from "Note: prices are subject to change." to "Note: Memberships available to return guests.", as shown below.
  6. If you are using the "CSE HTML Validator Lite" editor, make sure your page validates without any errors. If not, do whatever else you can to check it in your editor or check it online because it will be graded for correctness.
  7. Adjust your screen resolution to 1024x768 (see assignment #0 if you do not know how to do this).
  8. Display the resulting page in Internet Explorer version 6 (or another browser that supports column groups) and make sure that your new items match display shown below (especially the alignment of the data table's new column and footer.)
  9. Then obtain the following printouts:

Printout #5: Turn in a printscreen printout of the modified rooms page, as it displays at a resolution of 1024x768 in a browser that supports column groups (such as IE6). It should look as close to the given sample printout below as possible (except for your name instead of "Joe Student".)

Printout #6: Turn in a printout of the HTML code for this same document, printed from within your text editor (such as CSE HTML Validator). Make sure that your HTML code printout shows all of your code and does not cut off long lines. If you are using the CSE HTML Validator to print your code, be sure to click the "Wrap lines" checkbox in the Print dialog box. Your code is expected to be valid and will be graded accordingly.

printscreen image of modified rooms table page for part 3 of assignment

A side note to those interested:
You may have noticed that at larger screen resolutions this table-based layout still has a few annoying problems. One is that the column with the navigation buttons will not always extend down to the bottom of the browser window. That can be fixed by using a "style" attribute in the layout table's "table" tag to set the "height" to "100%". Unfortunately that causes some browsers to then stretch the 1st row (instead of the 2nd) which in our case leaves an unsightly gap between the purple horizontal line and start of the 2nd row background colors. This in turn can be fixed by using another style, this time in the layout table's 1st row's "td" tag to set its "height" to "105px" -- 105 pixels is the height of the background image (71 pixels) plus the cell padding (17 pixels above and below.) This combination of styles forces the browser to stretch the 2nd (last) row of our layout table instead of the first resulting in the look originally intended. The design worked well when tested in both Win IE6 and Win Firefox 1.0 at both 1024x768 and 1280x1024. You may feel free to try this and even include it in your submitted part 2 and/or part 3 solutions if you like, although it is completely optional. (Please report any problems you may find in other browsers and/or other resolutions and/or other platforms.)

Part 4: Cover Sheet
1 Printout, 0 Points

For your last printout, you will make an adjustment to your assignment 2 cover sheet page and then print it for use as assignment 3's cover sheet. Begin by copying your existing assignment 3 cover sheet file and giving the new copy an appropriate name.

Printout #7: Turn in a printout of the updated cover sheet document. Staple this cover sheet printout to the front of your other printouts. Arrange the rest of your printouts in the order in which they were numbered in this handout.