Web Site Design Tips for SCS Webmasters

Introduction - Planning
Purpose - Structure - Basic Web Site
Design - Navigation - Accessibility
Place Content - Update - Evaluate


Setting up your basic web site

On your computer set up the folders needed for your site and build the web pages needed to fulfill your site structure. Think carefully about the names given to each folder and each file.

  1. Create your site's main folder and name it using your school name. Use no spaces or unusual characters in this name.

    create main folder

  2. Create a folder named "images."

    create images folder

  3. Create a folder for each of your main categories. Again, use no spaces or unusual characters in any of these names.

    create folderd for main categories

  4. Inside the folders for your main categories, create folders for any subcategories you need to fulfill your site structure.

    Structure in two tiers

  5. If your Web site is on the larger side, you may find that your subcategories have subcategories. If your site is only two levels deep do not worry. Having your site structured in this manner will give your site room to grow as you expand the information you offer to your visitors over the months to come.

    create folders for subcategories

  6. Open the software you use to create web pages. Open a new, blank document. On it type "Home Page" and save it as your main page inside the folder named for your school. (Do not change the name of the file from what is already used on your site. It may be index.html, index.htm, default.html, or default.htm)

    create blank home page

  7. There are several ways to proceed from this point. If you are not using some sort of template system, try following these steps to set up your blank web pages.

    1. Set up the text for your text links (main categories of your web site) by typing them in on your home page.



    2. Make the links active to where you plan to put your main pages in each main category folder. Make sure your paths are correct.



    3. Now you will probably want these text links centered at the bottom of your page (under your content which will be added later). Now would be a great time to center those links. If there are any other items you plan to have on every page, place them on this page now. Some of those items may include a JavaScript for showing the date that the page was last modified, the standard school/SCS disclaimer, copyright information, email link to the webmaster, etc. You may also want to add metadata at this time (keywords, basic description, author, generator).



    4. Make sure you save the page before you close it (give it a title if you haven't already done so). What you will do now is save this document as index.htm (or index.html or default.htm or default.html - just be consistent and use the same file name for the main page of each category) in each main category folder of your site. Before you save the document, change the text at the top of the page and the title of the page.

      Here is an example for the main page for the category "info."



    5. Now that you have the main pages for your main categories, go back and double check that the text links are working properly. If they do not take you to the correct pages, fix the paths attached to the links.

    6. Now you need to set up all of the other web pages in your sketched site structure. Deal with one main category at a time.

      For example, in the main category of "info" we have created a subcategory of "calendar." Inside that folder we need to create a folder for "2001" and a folder for "2002." In each of those folders we need to set up documents for each month of the appropriate year. To create those documents, follow these steps.

      1. Open the main page for the "info" category.
      2. Change the text at the top of the page to read "January 2001" and change the page title to an appropriate title. You may also wish to modify the metadata at this time.
      3. SAVE AS -> navigate to the folder 2001 inside the info folder -> january.htm
      4. Repeat steps 2 and 3 for each month of the year.
      5. Follow steps 2, 3, and 4 to create monthly documents for the folder "2002."

      Follow a similar procedure to set up all the pages that you have planned to include in your site structure.

  8. As you completed the previous step you probably found that you needed to rearrange your structure slightly. You may have added or removed pages to your site structure. If you have made changes, go back to the typed version of your site structure and make those modifications.

 

Introduction - Planning
Purpose - Structure - Basic Web Site
Design - Navigation - Accessibility
Place Content - Update - Evaluate