382 Project 2
Web Interfaces & Cookies

TOC

  1. Web Interface: Frames-Style UI with CSS2 Positioned Elements
  2. General Concept: Frames-style Page Layout
  3. Frames-style Layout using HTML & CSS
  4. Project 2 Requirements
  5. Project Resources
  6. Office Hour Help

Web Interface: Frames-Style UI with CSS2 Positioned Elements

Our project for the term is to construct a database-backed eCommerce virtual storefront similar to BigHit Video Online.

As an alternative you are free to create any database-backed website you would like, based on your interests, but you must clear the project with your instructor. Students in past courses have created db-backed websites for their band, for a friend's business, for their schools, etc.

In project 2, you will start designing a prototype website, using Mollio's HTML/CSS templates for the web interface.

This project will give you started thinking about total design for a db-backed site. The target browser is Mozilla Firefox. The target platform is a desktop PC with a 17"-21" monitor set for 1024x768 resolution.

General Concept: Frames-style Page Layout

When a page is designed using frames, one frame is used to display content and another frame (or frames) is used to display navigation elements. When a link in a navigation bar is clicked, a new web page opens inside the content frame. The virtue of frames is that, as the content page is scrolled, the navigation elements remain in a fixed location, always available to the user. Frames have many drawbacks, however. frameset-eg1.html is an example of using frames for layout, and its content frame includes links to "Why are Frames so Evil?" and "Why Frames Suck (most of the time)."

A frames-style web interface supports a multi-panel layout. Here's an example:

    Logo
Home · Sign In · New Customers  · Privacy Policy · Contact · About     
      Content Area
A colored box inside content area 1 that holds the "Tip of the day"
    



Left NavBar

     link
     link
     link
     link
 

The illustration shown above uses a table for layout, the same layout can be implemented by using frames, and by using CSS.

Frames-style Layout using HTML & CSS

[ Download all Mollio template files at once: mollio_version1.1.zip (17/03/06) from www.mollio.org/ ]

The Mollio templates use html/css/JavaScript to achieve an effect close to that of frames. HTML div elements are positioned on the page using CSS2. Although the resulting layout looks like a frame, if the content is long, the navigation elements will disappear from when when the content is scrolled. CSS2 has the expressive power to prevent this by using fixed positioning, but this level of CSS is supported only by the most web-standards-compliant browsers (e.g., Mozilla browsers and Opera), but not by IE. Therefore, the ideal of a frames-style interface without frames is not yet a reality.

Mollio's templates also use a simple JavaScript & the DOM to implement drop-down menus.

We will use two of Mollio's templates for our project web pages

typeB.html: Layout: Top NavBar + Content (which is 2 columns, Main + Left hand nav)
typeD.html: Layout: Top NavBar + Content (which is 2 columns, Main + right sidebar).

Project 2 Requirements

This is a VLT project, but each team member must submit the project individually using Blackboard, in order to create a gradebook entry.

Complete the following exercises, in the order shown, by the project due-date:

  1. Download the Mollio templates to /382/mollio on your local host. The templates are available as a .zip file; see Project Resources, below, for the download site. Note that "/382" means your site root folder.

  2. Study the template typeB.html and its style sheet, main.css.

    To demonstrate the concepts, I modified typeB.html and main.css (renaming it main-michaelh.css) to create an eCommerce site home page and registration page for Armchair Theater Online:

    armchair-home.html. The My Account drop-down menu has a Change Preferences option that connects to armchair-prefs.html.

    armchair-prefs.html. Note the content panel contains the html from user-prefs-pt2.html, but not the JavaScript code for processing cookies. The Home link in the top navBar connects to armchair-home.html.

    armchair-prefs-D.html. I also modified typeD.html, so you can see an example of a web page that uses the right sidebar for timely information. You are welcome to use this template for some of your subsidiary web pages as we go through the term.

    You are welcome to use my examples but you must design your own color scheme, and cannot turn in mine for credit.

  3. Site Home Page. Using TextPad or Dreamweaver, open /382/mollio/typeB.html and save it as the home page for your eCommerce site. For example, if your business name is Acme, save the file as acme-home.html.

    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, logos and navigation should not become "pixel hogs". For this project, keep it simple and make sure everything fits "above the fold", so the user does not have to scroll the welcome page to see all its content.

  4. Modifying the style sheet. Copy the contents of /382/mollio/css/ to your /382/css. Modify the link elements in the head section of acme-home.html to have the correct path to /382/css/main.css, etc.

    Modify the style sheet to create a new, non-Mollio, look for the typeB template.

  5. Navigation Bars.

    The top navigation bar.     These links will change as your website evolves over the term. Most of the links do not have to be operational for this project, as it is early in the design stage. Example: armchair-home.html.

    The left navigation bar. To start, add six categories of films (or whatever product you are marketing). For example, Family, Action, Noir, Romantic Comedy, Date, Foreign. Example: armchair-home.html.

  6. Tagline. 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. Example: armchair-home.html.

  7. Contact Us. On this menu in the top navBar, include list items for each of your VLT team members. Each menu item should link to the corresponding 382 wiki ID page.

  8. acme-prefs.html. On the My Account menu in the top navBar, include a "change preferences" list item that connects to acme-prefs.html. acme-prefs.html uses the same Type B template as the acme home page. The content section must include the following elements:


  9. Personalizing acme-home.html. Add the javascript from the body section of welcome.html to the content section of acme-home.html. Modify the script as follows:

  10. Install your project 2 files on the remote host. When complete, install your p2 files in your site root folder on uoregon.edu.

  11. Project 2 Grading Rubric (available end of week 3). This document describes how your lab instructor (GTF) will grade your project. You should assess your project using this rubric before turning in your project. Also, this would be a good exercise for each member of your VLT: assess the project using this rubric before submitting it.

    The rubric page will describe how to submit this project for grading using Blackboard.

Project Resources

Office Hour Help

Bring your site folder on a USB drive. An equally good alternative is to copy your site folder to uoregon.edu. When you come to office hours, the project folder can be downloaded quickly for debugging.