Steps to Create a Web Site
by Agatha Taormina

 

Table of Contents

Step 1: Make a General Plan
Step 2: Create a Site Outline
Step 3: Create a Storyboard or Site Map
Step 4: Set up a basic navigational structure
Step 5: Create a site template
Step 6: Add site content

Step 1:
Make a General Plan

Think of a web site as a document and think of your preparation for developing that web site as analogous to your preparation for creating a document.
  • Consider the subject of your site.   Presumably you have knowledge of the subject and already have access to material related to the subject.
  • Consider the purpose of your site.   What do you want to say about your subject?
  • Consider your audience.
    • Who are they?
    • Why are they at your site?
    • What knowledge of the subject do they bring to your site? 
    • What knowledge of the Web do they bring to your site?
    • What hardware and type of Internet access is your audience likely to have access to?
Example
  • I decide to create a site devoted to the Myers-Briggs Type Indicator (MBTI), an instrument for evaluating personality.
  • I have already read widely on the subject; I have taken several courses devoted to the Myers-Briggs, and I have written a paper and lecture notes that discuss various aspects of the Myers-Briggs and its applications.
  • My site will have a two-fold purpose:
    • Introduce and explain the basic tenets of the Myers-Briggs.
    • Discuss practical applications of the Myers-Briggs for English teachers and for managers.
  • My audience will be college-aged students and above who are likely to have modem-based access to the Internet and at least version 3 of Netscape Navigator and/or Microsoft Internet Explorer. They are likely to be familiar with the basic operation of a mouse and also likely to have at least moderate experience surfing the web and using email.
Step 2:
Create a Site Outline
A site outline functions much like an outline for a document.  
  • The outline delineates the major sections and subsections of your document.
  • The format of the outline demonstrates the relationships among the main topics and the subtopics to be covered.
  • The outline is a useful device for organizing the content you have gathered and/or for suggesting content to be gathered for your site.

Sentence Outline for the MBTI Site

Step 3:
Create a Storyboard or Site Map
A storyboard is an illustration of the relationships among the various individual files (i.e., web pages) that constitute your site. The storyboard will be a picture of the levels of your site.
  • Base your storyboard on your sentence outline.
  • You might want to start with a blank sheet of paper and Post-It notes:  write the titles of topics and subtopics on the Post-It notes and experiment with their arrangement on the blank sheet.
  • You can use the organization chart software that comes with Microsoft Word to create a storyboard
  • High-end web page editing software can also help you create your storyboard.

Storyboard for the MBTI Site

See "Use a Storyboard to Plan Your Web Site" for specific information on how to create a storyboard for your web site.
Step 4:
Set up a basic navigational structure
Using your storyboard and your site outline as guides, determine how many large areas your site will contain.
  • These large areas are likely to be accessed from the home page of your site. 
  • These large areas are likely to have introductory pages of their own.

At this point you may be ready to create folders within your site to hold the web page and graphics files for each large section of your site.  Folders facilitate organization and make it easier for you to import and export individual sections of your site to another site.

Generally I base the standard navigation bar of my site on these large areas.

Example
Home Page|General Information|Applications|Resources
Step 5:
Create a Site Template
When you create a site template you make some decisions about the way your site will look.  Essentially you begin to develop the style manual for the site.

Your template page will include:

  • the background image or color
  • the text and link colors
  • the navigation bar and buttons if any
  • the basic page layout with positioning of the navigation bar; you may set up tables to facilitate the standardization of your layout
  • a linked navigation bar
  • an address footer with an email link
View some template pages:
Step 6:
Add site content
  • Start with your template page.
  • Add specific site content.
  • Use the Save As command to save the page and rename the page when you do so.
  • Repeat the process with the template page.

 

Button: Web Design Center HomeButton:Readings Menu

Web Design Center Readings
Last Revised: January 18, 2004
©  Agatha Taormina