Homework

Homework Assignment 3

Due: Thursday, Apr 21, 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 your layout and formatting, use CSS. The <span> and <div> tags come in handy in this regard. 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 for the formatting of your navigation items (make link, visited, and hover links look different using CSS), like we did in Lectures 6, 7, and 8. Also, see the example linked to at the beginning of this document. 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 hw3A-yourname.htm
    • About Us page: Save as hw3B-yourname.htm
    • Gallery or photo album page: Save as hw3C-yourname.htm
    • Credits page: Save as hw3D-yourname.htm

  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 make it a little more interesting by making it more like a slide show. As an example, have a look at this Cat Show. Save your gallery page as "hw3C-yourname.htm".

  5. (20pts) Credits page: Create a new page for your web site. Save this file as "hw3D-yourname.htm".

    6. 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 URLs. 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 Assignments index:
    • Make a copy of your old html Assignments file. Name this new copy: "Assignments3.htm". Keep the old copy as is.
    • Update the file by creating a link to all Homework 3 items (like you did in your Homework 2 Assignments page). The items are the four HTML files noted in Part 1, #3.
    • Improve the page layout and format using CSS.
    • Using SSH, upload "Assignments3.htm" into your HCI201 folder on students.depaul.edu.
    • 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:

 

Posted: 4-14-2011