Website Project

Learning goals

For this assignment, you will build a realistic-size sample web. You will build and revise this website in stages so it expands and improves throughout the middle of the term. The assignment's goal is to give you practice with a variety of web-construction and editorial techniques in a structured, efficient manner.

Unlike most other assignments this term, this assignment is quite open-ended, and a substantial part of your grade will be based on how much creativity and originality your website contains.

Learning goals about setting up a website:

• Learn to create pages, link them together appropriately, and modify the website's organization by renaming pages, adding new pages, and deleting pages.
• Learn various ways to build links in web pages.
• Discuss formatting methods to improve the appearance of your website.
• Explore how to link pages in your website with navigation bars.
• Know the difference between relative and absolute addresses in building web links. Choose the right kind of link for the task at hand.
• Learn how to make an interactive website by using a feedback form to allow the reader to easily send you an email message filled with date lifted from the form.
• Learn how to edit a website at one location (a development site) and publish the website at another location (the publicly viewable site).

Videos about using Nvu

I decided to record some videos showing how to get started with the process of building and publishing a website with Nvu.

• Video 1: Getting started: Building pages, link bars, adjusting file names and page titles. (13 minutes)
• Video 2: Basic versus Final website; publishing your website. (8 minutes)
• Video 3: Using tables to hold things in position, putting in an OSU Disclaimer (7 minutes)

Choosing a website editor

Some website development tools are incredibly powerful and take all the guesswork and fuss out of constructing a business or e-commerce website. This sort of "online store in a box" development tool might use a wizard to ask about items to be sold and will automatically create an online catalog complete with shopping baskets, credit card validation, and a host of other handy features. As long as you know that this sort of powerful tool exists, then if you decide to set up actual business website, you will know to choose a powerful website editor.

In this class, I want you to create your website without using such powerful tools to automatically generate an entire website or link all pages together. Instead, I want you to learn how to create web pages and link them by hand. By way of an analogy, consider a wood working class that focuses on the basics of using hand tools well. In this sort of class, it would be considered unethical to build and submit a wood working project that was constructed with power tools and nail guns.

One advantage of using a fairly simple website editor is it will focus your attention on the most important issues: organizing ideas into a relatively simple and understandable collection of web pages, writing well, and illustrating your web pages with appropriate images.

We will use Nvu at the in-class example of how to build and link web pages for this assignment. You do not have to use Nvu as your website editor -- feel free to use other web construction tools, such as Microsoft FrontPage or Macromedia DreamWeaver. The choice is entirely up to you. But if you choose to use another tool, then you should not use its features to automatically create web pages or navigation bars to link the pages together. Also, since we need an example program to use in BA271, the midterm exam will ask you to be able to perform basic website construction and maintenance tasks with Nvu.

Selecting a topic

Your first task is to choose the content to put in the web pages. One possibility would be to build a set of web pages that would function as the web site for a small local business. Caution: If you build your website about a commercial business, you must disguise its name (such as building a site for "Goto's Sandwiches" rather than "Togo's Sandwiches"). I don't want anyone to confuse your class project with a real business web site. Alternatively, you could build a set of web pages about nearly any professional business-related topic that you want to research or document. Do not build your website about personal or hobby interests, such as "places I like to hike" or "my favorite pubs."

My first choice is to have you build a website about an actual business or organization. To help you think of possible topics, here are some ideas that have worked well in the past:

• Build a website about a business owned by a relative, such as a brother, uncle, or your mother.
• Build a website describing the family farm or vacation cabin.
• Build a website about a nonprofit organization, such as a club, sorority, religious group, athletic team, or theatre.
• Build a website about a business where you work.
• Build a website that describes the educational background and research interests of a faculty member at OSU.

All these options have a huge advantage over trying to invent a project out of your imagination: few people have an imagination as creative as the lively facts that are readily available in the real world. You will find it far easier to collect information and organize your website if you base it on an actual entity.

Also, it is against the law to use university computing facilities for commercial gain, so you should not build a commercial website directly as this class project. However, you can easily sidestep this restriction if you build your class project using an alias name (like "Goto's Sandwiches") that can easily be replaced later with the actual business name. Still in doubt about what to do? Talk with me ... after asking some questions to collect information about your interests and life, I often can suggest suitable topics for your website project.

Decide on the website's goals

The most important step in any development project is to carefully define what the project should accomplish. So you should begin by thinking through what your website's goals will be.

• How will it add value to the organization?
• Who is the target audience (such as employees, suppliers, advertisers, managers, or athletes)?
• What methods will be used to attract attention to the site, keep it lively and interactive, collect information from users, or provide useful information?
• Will the site change any current business practices?

By answering this sort of question, you focus attention on creating a site that can make substantive improvements.

Publishing your website

Nearly all development projects in the Information Systems field go through various phases. For example, projects typically go through a system life cycle with problem recognition, feasibility study, development, training, implementation, revision, and abandonment phases. The exact procedure for moving from one phase to another varies from firm to firm, and larger firms typically have rigidly defined milestones that separate each phase. The construction, maintenance, and publication of a corporate website usually involves a similar development cycle.

To model this process, I want you to develop your website in a relatively private part of the college's Cob-Storage file server and then publish your website to a more publicly available location on the college's web server.  This will duplicate the process of writing and developing off-line, followed by rolling out a finished product. It will also have the advantage of storing your work in two locations. Thus, you will be forced into creating a back-up copy of your work.

Creating a development website on Cob-Storage

After deciding on content for your website, you will use Nvu or another website editor to construct your website.  You will build a collection of web pages in your p:\classwork\ba271 area inside a folder named "website". This area will hold the developmental copy of your website. You should use this area when you are writing, creating, editing, and revising your website. The home page of your website should be named "index.html". Thus, your website's home page for development purposes should be located at p:\classwork\ba271\website\index.html. If your Username is STUJ123, then this means your website's home page will be located at \\cob-storage\studentpdata\stuj123\classwork\ba271\website\index.html. 

Files placed in your Classwork folder on the college's file server are quite private -- other students cannot read or view these files. To make your website publicly available, you will need to move the entire website to

Publishing your website

The university has given you two different locations where you can publish a website:

• You can publish a website by moving the entire folder containing the website to a specific location on the College of Business file://cob-storage.bus.oregonstate.edu/studentwebdata  area. All files in this area automatically become web pages. For example, if a page has a name similar to file://cob-storage.bus.oregonstate.edu/studentwebdata/sullivan/website/index.html, it will immediately be available at http://students.bus.oregonstate.edu/sullivan/website/index.html. Because index.html is a reserved name for the default web page in a folder, the website's home page would also be available at http://students.bus.oregonstate.edu/sullivan/website. 
• You can also publish websites with your ONID file storage area. Since I haven't discovered a reliable, easy-to-explain method of publishing websites to your ONID area (it isn't hard to do -- I just haven't found a method I trust will always work from written instructions), for this assignment, I will have you publish your website to the college's cob-storage web area.

To publish your website to the college's web server:

• Use Nvu or another website editor to construct web pages and links between the pages in your initial website area at P:\classwork\ba271\website.
• Continue to create pages, write, edit, and revise the website in your classwork folder.
• When you want to publish a copy of your website where others can see it (or when you want to make a back-up copy of your website), then make a copy of your entire p:\classwork\ba271\website folder at \\cob-storage\studentwebdata\name123\website, where you replace the "name123" with your Username. 
• Verify that you placed the published version of your website in the right location by checking to see whether your web pages can be accessed from the Student Pages portion of this BA271 website. In particular, click on your name in this Student Website listing to make sure we will be able to find your work.

If for some reason your web pages cannot be accessed from the Student Pages: Website Project page and you cannot figure out how to fix the problem yourself, then send a message describing the situation to Dave Sullivan via e-mail, or drop by my office, or ask for help during one of the help sessions.

Graphics Basics

As part of your website project, you should become comfortable editing graphic images with an image editing program like Paint Shop Pro. I recommend looking at the ideas about Paint, Draw, and Image Editors in this Graphics area.

You need to know:

•  How to build a logo for your website 
•  How to scan a photograph for the web project.

If you would like to make an animated GIF as part of your website project, I recommend using PaintShopPro's Animation Shop. This program is not particularly well designed, and lots of other programs exist to create animated GIFs. Nonetheless, because this program is conveniently located on the College of Business network, as long as you are located in Bexell Hall, I recommend giving this program a quick try. With reasonable guesses, you should be able to create an animated GIF with relatively little fuss, particularly if you use its built-in animation wizard.

What is the "Basic Website" versus the "Final Website"

The Graded Activities page lists both "basic website" and "final website" due dates.

• The Basic Website should include your first-best effort to complete the assignment. Thus, your basic website should contain everything you think should go into the final website. It needs to be at the correct location of our network, which you can check by clicking on the appropriate Student Pages link.
• The Final Website will contain a finished version of the entire website project. It also needs to be at the correct location on our network, so you should make sure all your revisions have been correctly published by clicking on the appropriate Student Pages link.
• Why have two due dates? I want you to complete this project by the Basic Website due date, but I also want to give you some time to let the site mature before beginning the final grading process. So you will be able to extend or revise your website before the bulk of grading occurs. I view this sort of like letting wine age in a barrel before drinking -- good things take some time to mature fully.

General guidelines about what to put in your website

When thinking about what to put in your project, you should consider both technical and content issues.

Relevant technical questions will include:

• Do your web pages have links to other relevant web areas? Do all the links work?
• Do they make good use of headings, lists, and graphics?
• Have you included images that were scanned on a scanner? Here are instructions for using the college's scanners.
• Did you build an appropriate feedback form that sends email to your personal mailbox?
• Are the pages in your website organized in a logical way, and are they linked appropriately?

Relevant content questions include:

• If you chose to build a website for a local business, did you adapt the site appropriately to that business' needs?
• How closely did you stick to the initial structure created by the Corporate Presence Wizard? In general, the more changes you make to the site's structure and the names of pages, the better. For example, few business have generic "Products" and "Services", so you should consider creating pages for "Location", "Staffing Needs", "Power Tools", or other site-specific purposes.
• Are your thoughts clearly expressed?
• Did you build interesting facts and descriptive material in your web pages?

Specific Requirements

The overall goal of this project is to create a useful, original website in support of an organization or professional activity. Items listed below represent specific minimum requirements, but they will not result in an "A" project. This project will be graded subjectively based on writing quality, originality, usefulness, and other factors that require the use of wisdom and experience. It will not be graded based on "how many pages" you have in the website. Copy-and-paste commands make it easy to add more pages to the site. Adding value to a site is harder.

1. Your "home" page (index.html) for your website project must be located at \\cob-storage\studentwebdata\name123\website\index.html, where name123 is replaced with your Username. Check that your website is at the correct location by clicking on your Username in this BA271 -- Student Pages -- Website Project page.
2. All pages in your website should include a link to OSU's standard disclaimer. As an example, you might look at the disclaimer at the bottom of this page.
3. Your website must have a Goals/Sources page. After looking at the home page, this will be the next page for us to read when we begin evaluating your site. Make it easy for us to find this page by building a [Goals/Sources] link into an obvious spot of your home page. This page needs two distinct areas:
   1. Goals: Describe what you want the site to accomplish overall. Explain why you picked this project's topic. Explain who will be the site's target audience. Tell how the site will add value to the organization. In large part, we will evaluate your site based on whether it meets the objectives that you describe in this section.
   2. Sources: this area needs to describe where you obtained the material for the site. A formal bibliography style is not as important as accurately identifying which parts of your website you constructed and which parts were copied from elsewhere. Thus, if you copied a bunch of photographs from another website, and you can no longer remember where — that is OK as long as you explain the situation. Take enough time to clearly explain the sources of information for all parts of your site. As a counter example, you should not simply list a bunch of websites as "sources of information" and expect us to guess at what material you used from them.
      Note: Accurately disclosing your sources of information is critical. We need to know what you created versus what you have copied from elsewhere. Your sources list or bibliography should make this clear. Alternatively, if you fail to clearly credit others for material you copied from other locations, expect a major deduction from your website project grade based on your violation of academic honesty (plagiarism).
4. Your website must have "content" or "body" pages. A content page might show a map, describe employees, list upcoming events, or provide contact information, so they might have names like "Directions", "Upcoming Events", or "About Us". Build content pages that make sense for your target business or website's topic. The content pages do not necessarily need to be complete. For example, if you are building a website to support a realtor's office, and you thought the finished website should have several hundred pages that show each home offered for sale, then you might prepare a sample page showing what a typical listing would look like. If your website is this sort of prototype, then please place explanatory text that describes the unfinished portions of your site in italic type like this sentence. If your website should have interactive features that would require programming or more advanced development methods than are taught in BA271, then explain those features in paragraphs of italic type.
5. Your website must have a "feedback" form. This form might collect information about product orders, reservations ... or collect suggestions about future events. Feedback forms are one of the most popular ways to make a website interactive because they gather information from those who visit the site. Forms have much applicability in the business world, as forms may be used to collect customer orders, customer inquiries, gather feedback, and so on. When someone fills out your website's form, it should send an email message to your College of Business mailbox. 
   Adapt the form to ask appropriate questions given the rest of the content in your website. For example, you might collect information from prospective clients about the price range of homes that they want to buy. This page explains how to get forms to send you email.
6. Your website must have a photograph that you captured yourself with a digital camera or scanned with a scanner. This requirement is generally unrelated to the content of your website: We want to make sure everyone has converted images into photos in a web page. You can meet this requirement by using your own equipment, or you can use the college's scanners. The college doesn't have digital cameras for students to use. Because the college has only two color scanners, this part of the website project doesn't need to be completed until the "Final website due date."

   To explain this requirement better, assume that you have numerous photographs that you took with a digital camera scattered throughout your website. You still would need to have a Photos page, but it might contain some or all of the same images found elsewhere. Thus, your Photos page acts like your personal pledge that its images are ones you created yourself.

   Use Nvu (or some other web-page editor) to create a page in your website named photo.html. Make sure your photo.html page is stored in the same folder as your index.html home page. Your photo essay (photo.html) page should have a similar page background, headings, title, and borders as the rest of the website's pages. Include your picture or pictures and write appropriate captions for the pictures. You need to include only one photo in the page, but more photographs are welcome. Your photo.html page should be linked with the rest of your website project as follows:

   Make sure your Home pages has a link named "Photos" or has a Link Bar with a Photos button to your photo.html page. This link or button must be easy to find—or we won't give you credit for your work. The simplest approach is to make it a Link Bar button similar to the [Up] button on the top of this page. However, if your website doesn't use a Link Bar, then make sure the link to your Photos Page is prominently displayed, such as the sample in this sentence. Build a return link from your Photos page (photo.html) to your website's home page (index.html).

7. Your "home" page must have easily identifiable links to your goals/souces, feedback form, and photograph pages. You can use either of two ways to meet this requirement: build these links into your website's "Link Bar", or place these links in a clearly identified section of text in the home page.

This website was created and is maintained by Dave Sullivan.
[College of Business Home Page] [OSU Home Page] [OSU Disclaimer]