Building a Website

How to Build a Website

Your instructor tells you that one of your assignments for the semester is to "Build a Website". So where do you start? This mini course breaks the process into 4 basic components.

1. Planning

  • Goals - What exactly are you trying to communicate or accomplish? What outcome will make you feel that your site is a success?
  • Audience - With what exact groups of people are you trying to communicate?
  • Content - What types of material could your site provide that would both attract your audience and meet your goals?

2. Storyboard

Before creating a web site, you should have a clear idea of the purpose of your web site. Once you know your audience and content, you should create a storyboard. A storyboard is an organized layout of your entire web site. The storyboard looks like a lot like a comic strip. See the model below:

Sample Storyboard

The words that appear in brackets (text, links, etc.) simply indicate that text, links, pictures, etc. will appear in that designated space. As you continue working, your storyboard will become more developed. Just make sure that you have a clear idea of what you want to do and an organized layout to keep you on track!

3. Collecting Resources

Where am I going to put all the files I want to use in my website?

First, create a folder to be used solely for your website. Within the site folder create an image folder, a text document folder and folder for links. Now you are ready to begin gathering your content items such as word documents, web page links, any HTML pages, and all images. Place all these files into your new site root folder. Organizing your resources within the website folder is a good idea because it makes the site directory, a very important aspect of posting your site, easier to understand.

Images and useful links can be found on your everyday search engines like Google or Ask.com.There are only two image file formats that the internet browsers can display: GIF and JPG. If your image files are a different format (like bmp, tga, png, or others), then use a file converter to change them into GIFs or JPGs.

Gather or create the content / text that you want on your webpages. Any text editor will work such as MS Word, MS Works, or even Notepad or Simple Text. These files will be moved into HTML files later.

4. Building the Website/Pages

There are several steps to actually build your site.

Build HTML Webpages

This may be the longest step to creating your webpage and there are many different ways to build them. You could use basic HTML, or Dreamweaver, or Mozilla's (SeaMonkey), or many others. Mozilla's (SeaMonkey) is free and is relatively easy to use. It is available to download from mozilla.org's seamonkey product. We also have some help documents located on our site (under the Mozilla section). The pages should be constructed with the site storyboard in mind. The first file should be named 'index.htm' and should be the main linking page for the rest of the site. Continue making webpages until you are satisfied that your goals have been accomplished.

Obtaining a Site

This can vary greatly between different cases. Your website needs a server which will 'host' your site. There are many different types and locations to servers. If you are a Millersville student, Millersville has webspace available to you. Sign up for email account, and webspace will be provided. After setting up your email, you will have an address that looks something like 'name@marauder.millersville.edu'.

Posting Information to the Site

While building your site is probably the longest step, you may find posting the pages to be the most frustrating. After obtaining a site, the next step is to move your files from your computer to the server. This process is done using FTP (File Transfer Protocol). There are several ways of doing this transfer. Another way of posting the information is to use Mozilla's (SeaMonkey). Detailed instructions on how to post information to the site through Mozilla's (SeaMonkey) are available at this site. The Mozilla's (SeaMonkey) method is more clumsy and harder to use, but if you are familiar with Composer it could work better for you.

Viewing the Site

To view your site, you will need to open Internet Explorer or Netscape Navigator. Type in the address of your site. If your website is on marauder, then your web address is 'http://marauder.millersville.edu/~name'. Your site should appear and you can click on the links to your other pages and make sure everything is operating property. The pages you see on Internet Explorer are what someone else viewing your page will see.

Other Resources

To view pdf (PDF File) documents you will need Adobe Reader

To view flash videos (Flash Video) you will need Adobe Flash Player