Project 2: Multi-Page Web Site

Assignment

Design and build (part of) an original web site based on a social issue or environmental cause of your choosing. Research other context-related sites on the Web for a sense of thematic style and information presentation. The full site, if brought to completion would probably consist of several dozen pages. However, you will not build the entire site, rather you will complete the home page, four to six primary pages (main links), and at least two sub link pages for each main link page.

Part One: Site Map

  1. Research the Web for information and graphics/pictures appropriate to your topic, copy it, then organize this content into groups that will define your main links. You will continue to collect content as the course progresses, but you must define your primary link pages.
  2. Ask yourself, what sort of site will this be? Who is the target audience? How should the information be organized? How many sections should the site contain? How many levels down should it go?
  3. Create a site map that diagrams the number of pages and the way they will relate to one another. Hint: start with a home page and work down from there. It can be hand drawn, but make sure it's neat and easy to read. Refer to the Navigation Map page for the four recognized navigational structures.

Site map due: week 5 .

Part Two: Interface Mock-Up

  1. Create a mock-up of the interface; this a graphical representation of what a typical page will look like. The mock-up serves two main purposes: 1) it provides the client with an accurate picture of the site you are building so she can make sure she is getting what she wants, and 2) it acts as a template/guide for you, the designer, to work from as you build the finished site, therefore there should be no unfinished or vague parts. As you design, also consider 'how can I build this with HTML and CSS?' Don't try to do anything too fancy or difficult.

    2. Mock-up an interior page, not the home page, so that you can show an example of secondary navigation as well.

    Build your mock-up in Photoshop. I'd recommend a width around 960 pixels. As far as height goes it's up to you, but aim for somewhere between 450 and 800 pixels (your actual web pages will likely vary in height depending on the content.

    For this site, I require certain elements that must be included and conventions that must be followed (see below). Beyond these you are free to be creative.

    Requirements

    The following elements must be included in your mock-up:

    • Main navigation menu. The menu may be horizontal or vertical. You must determine the number and nature of the links. You could design these as tabs, fancy buttons, or simple links. Consider also how the link will appear when it's rolled-over (an 'over-state') and whether it will look different when you are on that page or within that section (a 'current' or 'active' state).
    • Sub or secondary navigation menu. These are links to sub-sections and pages within the main categories. As with the main menu, the sub menu could be horizontal or vertical.
    • Main content/article area. This is usually the largest part of the page, containing the important information of the page—articles, pictures, featured content.
    • Advertising space. While not found on every web page, many commercial sites contain some form of advertising. Although advertising could occur virtually anywhere on a web page, there are a few spots that more typical:
      • A long horizontal ad above the banner.
      • To the right of the banner/site ID.
      • A tall vertical ad (or column of ads) to the right of the main content.
      • Under a navigation menu in the left column.
      • A horizontal block of ads at the bottom of the page (least desirable to advertisers).

      For this site choose at least one spot to commit to advertising.

    • A footer that contains the copyright and perhaps the address. The footer may also contain redundant site navigation and/or utility navigation. Use your own name/design company in the copyright.
    • Options: utility navigation, breadcrumbs, and/or a search field. Utility navigation usually includes links to contact information, terms and conditions, 'about us' pages, etc. Basically content that is important but not directly related to the theme of the site. Breadcrumb navigation is a convention which is sometimes employed to help users find their way around a site. The links at the very top of Fairfield University New Media page (College of Arts and Sciences > Student Visual & Performing Arts >Media/Film/TV/Radio) are and example of breadcrumbs. I find breadcrumbs very useful and encourage their inclusion, but they are not a requirement.

    Mock-up due: week 7.

Part Three: Build the Home Page

  1. Assemble your assets (various pictures, text, etc.). Choose which of the photos you will use and how.
  2. Create a root folder. Inside make an 'images' folder for your photos and graphics.
  3. Launch Dreamweaver and begin building your home (index) page. Start with just headings, paragraphs, and lists (use lists for your navigation menus); surround the different sections of your page with <div> tags (for example: a 'header' section, a 'navigation' section, a 'mainContent' section, and so on).
  4. Once everything is in place, begin writing your CSS. Use CSS to size and position your various <div> sections, as well as add design.

    5. Home page due: week 9.

Part Four: Build the other pages

  1. Create the main link pages for your site.
  2. Hint: Use the finished home page as a template for the other pages. Simply save it with a different name, then change the content on the page.
  3. Link all of your pages together. Determine what you're going to name all of your pages ahead of time you that you can write the links for your navigation on the home page before you duplicate it. This way, when you 'save-as' in order to create new pages, you will have the links all set and ready to go.
  4. Create the remaining pages and allow enough time for revisions and tweaks.

    5. Complete site due: Friday at 4:00 pm, week 11.

Deliverables

Upon completion you should give me your root folder with all pages, images, CSS documents, etc. Your site will be posted on the http://faculty.fairfield.edu/mediacenter/tl_110/student_projects/ site and you will be required to discuss your project with the class over weeks 12 and 13.