382 Project 2.0
Due 21:00 R 1/24

Project Description

Create two pages using the same CSS layout as this document you are reading now. By default we will create pages for BigHit Video, but you are welcome to create a different eCommerce site (for boardsports, clothing, travel, etc., as long as whatever you are marketing has at least nine product categories).

a. 382 Information Architecture

Master this essential concept asap: You must have the identical site architecture (a.k.a. folder structure, a.k.a. directory structure) on both the local and remote hosts.

If you have the same site architecture on both the local and remote hosts all pathnames and URL's will work correctly on both hosts, with no changes required as you move web pages from one to the other. Since this will save you immense amounts of wasted time, weeping and gnashing of teeth, it is the Sine Qua Non for success.

The local host is whatever computer you are using for your projects. The remote host for this project is shell.uoregon.edu.

On your computer (or a USB drive, better yet), you should have a site root folder. named 382 containing subfolders css, js, cookies, examples, html, images and php.

Remote host: Tilde (~) in Unix Pathnames. In Unix, "~" stands for the Unix pathname to your home directory. Example: for my uoregon.edu account, "~" stands for /home4/michaelh/, so ~/public_html/110/ is the same as /home4/michaelh/public_html/110/.

Start SSH, open a new File Transfer window, open your public_html folder and create a new folder named 382. Open 382 and create subfolders css, js, cookies, examples, html, images and php.

Use No Blanks, Punctuation or Special Characters in File Names (dashes and underscores are OK).

File transfer bugs to watch out for. Windows will sometimes change .jpg to .JPG, thus breaking your image elements. If this happens, you will have to use the SSH File Transfer Window to change the filename back to .jpg.

b. Home Page.

Copy the page you are now viewing (p2.html) and modify its content so that it looks like BH-home-v1.png.

  1. Open the projects directory, click-right on p2.html and Save Link As /382/BH-home.html. That is, save it to your 382 folder on your computer (a.k.a., your "local host").
  2. Open BH-home.html in TextPad or Dreamweaver, and make the following changes.
  3. Put your film (or other product) categories in the leftNav bar (div#link). Each category name is a link but does not have to connect to any web page yet.
  4. Add a search box at the bottom of the leftNav, as shown. It doesn't have to actually do anything (but, for fun, you could use the DOM to make the button change its label when clicked, a good review exercise).
  5. Add a topNav bar, as shown. Create a new div with id="topNav" and add the new div to the content div. The links in topNav do not have to connect to a web page yet.
  6. Add a Home link to either the left or top navigation.
  7. Modify the content div to display your welcome page. Make an impression on your public, and try to keep the key information above the fold.

    As pointed out by web usability expert Jacob Nielsen in Homepage Real Estate Allocation, the highest percentage of pixels on a web page should be devoted to content and navigation. Therefore, avoid "pixel hogs" but, if you can keep key information above the fold, do anything you want.

  8. Add a "tagline" above the fold on your homepage (for example, as part of your site's name). Read Taglines: What's the Site About? for ideas.
  9. Leave the Image Credits section in place, as the background images are copyrighted and used by permission.
  10. When complete, upload BH-home.html to /382/BH-home.html on shell.uoregon.edu.

c. Sign-In Page.

  1. Save /382/BH-home.html as /382/html/sign-in.html.
  2. Delete the html in the content div, and replace it with the content in user-prefs-pt3.html. Modify the content div so that sign-in.html closely resembles the page shown in this image: BH-sign-in.png.
  3. Modify the checkboxes so that the genre categories in the form match the ones shown in the leftNav section; they should agree in name and number.
  4. Copy the javascript code from the head section of user-prefs-pt3.html and paste it into the head section of sign-in.html. Edit the JavaScript code so that it no longer references the radio buttons and the savePref box, and handles the correct number of checkboxes.
  5. Use "catCB" for the value of the name attribute for all the category checkboxes:

    <input type="checkbox" name="catCB" value="category1" />
    <input type="checkbox" name="catCB" value="category2" />

  6. Leave the Image Credits section in place on all your pages, as the background images are copyrighted and used by permission.
  7. When complete, upload BH-sign-in.html to /382/html/BH-sign-in.html on shell.uoregon.edu.

Project 2 Grading Rubric Available Friday.

How to Turn-in Project 2 in Blackboard

Project Help

The 382 Projects blog is a forum for communicating and collaborating to resolve any difficulties you may be having with the project. Although your instructor and GTF will regularly read and post to the blog, all students are encouraged to post answers to questions.

Credits


The layout of this document was created by Eric Meyer and is explained in Eric Meyer on CSS (New Riders), ch. 12. Used by permission.

Nautilus shell: scanned by and copyright Eric A. Meyer. CSS by Eric A. Meyer.

Understanding the CSS Layout of this Page


After our coverage of CSS in class, you should be able to modify this page as required.

For additional information click the following links in the leftNav bar of this page: