To Homework

Homework Assignment 4
Due: Thursday, Apr 28, 2011

References for this assignment:

Part 1: (80pts) Continue working on your website:
  1. Make copies of all your previous files and work on the copies only!
    As I have mentioned in class many times, I highly recommend that you create your entire website offline (on your PC) before transferring it into your students account. To help streamline this process, please see building your website offline.

  2. (20pts) For all your formatting, use CSS only. Well, okay, if you want you can use <b>,<u>, and <i>, but try to think of other ways using CSS. The <span> and <div> tags come in handy in this regard. But no <font> or <center>tags should be present in your code. You can use CSS for layout, or stick with tables. You may use a combination of internal and external CSS if you wish. A lot of this part you've probably done already.

  3. (20pts) Navigation: Use CSS or table for layout, and CSS for the formatting of your navigation items (make link, visited, and hover links look different using CSS). I give lots of navigation examples on our lectures page. For example, a simple technique for designing navigation is in Lecture 5. I'd also reccomend that you read over my Horizontal Navigation document, and then use the technique I discribe there. All hyperlinks should be working and pointing to the correct destination.
    Include navigation on all the pages! After you complete this assignment your pages should be:
    • Homepage: Save as Homework4-A.html
    • About Us page: Save as Homework4-B.html
    • Gallery or photo album page: Save as Homework4-C.html
    • Credits page: Save as Homework4-D.html

  4. (20pts) Gallery page: Create an new page for your web site. This should be a page containing a minimum of 4 images, such as a gallery page or photo album. This can be as simple as a table containing images (with captions) or you could use a simple tableless method like I did in Lecture 6. If you'd like to make it a little more interesting, you could try a type of slide show. As an example, have a look at this Cat Show. Save your gallery page as “Homework4-C.html”.

  5. (20pts) Credits page: Create a new page for your web site. Save this file as “Homework4-D.html”.
    Contents of the credits page:
    • Your name and email address as being the author of the site.
    • If you used images, backgrounds, links to other people’s pages, music or video that you did not produce yourself (possibly in future assignments), indicate their sources or authors. If you used CSS and/or FORM templates or generators, indicate what they are and give their URL’s. In short, in this page you must include links to the sources of all material that you did not produce yourself. This includes referencing the class material if necessary.

  6. Grading points:
    • Remember, your website should have a uniform navigation system. So from each of the four pages on your website, a visitor should be able to easily get to any of the other three pages using your navigation links.
    • Any references (<a href= . . . >   or   <img src= . . . >) from your website to anywhere else on your website, must use relative addressing. For a complete explaination of relative addressing, please see Relative Addressing.
    • On all of your <img> tags include the title attribute to provide additional information to the viewer when he/she hovers over the image.
    • Correct HTML/CSS code.
    • Content, design, and presentation.
Part 2: (20pts)
  1. Update your assignment index page:
    • Make a copy of your old html Assignments file. Name this new copy: “Assignments-4.html”. Keep the old copy as is.
    • Update the file by creating a link to all Homework 5 items, as in previous assignments.
    • Improve the page layout and format using CSS only. You can still use tables for layout if you prefer, but all other formatting should be done using CSS.
    • Using SSH, upload “Assignments-4.html” into your IT130 folder on students.
    • Make sure you can view it on the browser by typing in the URL you will be submitting, and click on all the links on it to verify that they lead to the appropriate files!
What to submit: