Due Tuesday, 1/27/09
Create a web page that displays information about at least 6 books. The web page shall contain three frames. The top 1/4 of the page (the title frame) should display a simple header that says, "X's Books" (where X is your name) in a very large font. The font should be a color other than black on a background that is other than white. The bottom 3/4 of the page will be split into two frames, the left of which comprises 1/3 of the remaining space and will hold navigational information. The right 2/3 (the information frame) will display information about the books.
The navigation frame will display at least three links corresponding to "science fiction", "technical reference", "biographies". You may add other links if you like. Clicking on any of these will display information in the information frame about at least two books that fit the given classification. I.e., clicking on "biographies" will display information about at least two biographies. This frame should use a different font and background color from the title frame. (The background color cannot be white.)
When the web page is first loaded, the information frame should be blank (a white background). Whenever one of the navigation links is selected, the information frame will list the appropriate books in an ordered list, using roman numeral numbering. Each element of this list will provide the title and author of the book, as well as a small image of the cover of the book.
(The following is shamelessly stolen from Bill Sverdlik!:)
Static web pages are created via HTML. Read [here] for a simple introduction and follow the link for more advanced techniques. In all web development, one should strive for compliance with XHTML. IMPORTANT: For this class, all web pages must conform to the XHTML 1.0 Transitional DTD or later . How do you ensure this ? Simple: post your page on the web and then invoke a validator like W3C . IMPORTANT (yet again!): I have had many situations where I find a problem in a student's web page that he/she did not know about. The common response from the student is that "it worked in my browser", and sure enough, it did. The problem is that browsers take many liberties with HTML documents that violate the specification. I highly recommend the following: check your web pages in all browsers available (and I can think of at least two popular ones) and validate your documents with a validator. In fact, you may consider this a requirement of this course!!
The text comprising the information about the first book listed for each of the three categories should be displayed in a style that is different from that of the second book. Define a style for each line using an external style sheet. (You might want to use sub-classes of the li tag.) To obtain the roman numbering of your lists, define a style for your ol tag.
Use Amazon.com to get the information about the books you choose, as well as images of their covers. You can copy the image files to your machine by right-clicking on the image and taking appropriate action.
Submit your several files as a zip file to the dropbox on Blackboard (webct). Make sure you include in your zip file all the .html files that form your frames, as well as any image files (.gif and .jpg, for example) that your page references and the external style sheet. The main .html file (the one I will access with my browser) should be called bookpage.html. Don't forget this!
Also, don't forget to submit hardcopies of your html and css files at the beginning of class, as well.
Write your html files by hand--don't use a wysiwyg web page editor program (like Dreamweaver). The pages are simple enough that you should need fewer than 20 lines of html for most of them.
You should be able to do all of this on your PC without having to post your page on a web server (in fact you should avoid using a server in case some other student accesses your pages there and attempts to copy them and pass them off as their own work!) Just use the File menu of your browser to open the .html file on your PC.
Test your web page using a W3C validator.
When you submit your page to me, make sure you submit all the files used by your page.