8 Steps to a Functional Site
Teacher: Thomas Benton

The first step to uploading a functional website is creating a folder to contain that website. This is true whether you code HTML or use a WYSIWYG editor.

I suppose you could call this a *back to the basics* article. It is a fundamental practice that I didn't discover until after I had been building websites for quite some time.

If you always make the website folder the first step in the process, (after planning your site) you can save yourself some problems. Especially if you use a WYSIWYG editor. You'll understand why later.

STEP ONE: Create a New Folder

On your hard drive, in whatever directory you choose to keep your website folders, create a new folder. Name it. This folder will be the same *directory* as the root directory on your web server. All other subdirectories within your root directory will have a matching folder in your website folder. Your website folder will be a *mirror* of your root directory after you upload your site to the server.

STEP TWO: Create an Images/Graphics Subdirectory

It is a good idea to have an *images* subdirectory. You can then locate all graphics in the images subdirectory so that only one copy of the graphics file is required.

STEP THREE: Create a Folder for Each Subdirectory

If your website plan includes other subdirectories, create a folder for each of these.

STEP FOUR: Copy Files to the Subdirectories

You should have an idea of which graphics and other files you will be using on your web pages. These would include logos, single-pixel transparent gif, background graphics, etc. Also include other existing web pages that you want duplicated in your subdirectories.

STEP FIVE: Create the Index.html Page

Using your editor, open a new document, specify the title and background color. Save as index.htm or index.html (your preference)in your website folder (root directory).

STEP SIX: Build Your Web Page

Now that you have all the files, including your homepage, in the directory, you are ready to build your web pages. If, in the process, you discover that you are missing a graphic or other file that will be linked to your web page, copy it to the images or appropriate subdirectory before inserting or linking it to your page.

Follow this procedure for each web page on your site. Why? If you use a WYSIWYG editor it will automatically link to the file location from which you inserted a graphic or other component. If your inserted/linked file is already in the right folder/subdirectory, your link will be a good link throughout the website building process. It will remain that way when you upload it to the server.

If you do it *haphazardly* (a weakness of mine), you will end up with a lot of broken links that will require repair before your site will function properly.

STEP SEVEN: Test Your Finished Site

Once your website is complete on your hard drive you are ready to test. Open your index page in a browser. If you don't see the graphics, you've done something wrong. More than likely you inserted it BEFORE moving it. Fix it by clicking View - Source to open the page in a text editor. Then change the HTML to the correct location. When you get it right, the graphic will display properly in your browser. (You'll have to *refresh* after changing and saving the HTML).

Next, hold your mouse pointer over each hyperlink. Observe the file path in the browser's status bar. If it looks right, go ahead and click the link. If the page opens properly you've done it right. This is also a good time check the link *target*. Did it open in a new browser window or in the same window? If you used *bookmarks*, did it open to the right place? Fix as you go. When you find a problem, fix it then.

When you've checked every graphic, and every link you are ready to upload your website.

STEP EIGHT: Upload Your Website

Use your favorite FTP program to upload your site. This is where having a website folder on your hard drive that will be a mirror image of your server's root directory pays off. Open your website folder and the root directory on your site. Transfer entire subdirectory folders to your server. It will create a subdirectory in your server's root directory to match. Moving entire subdirectories at once can save time and prevent the overlooking of individual files.

One more thing to do. Check every image and link again. If you followed the previous steps, you aren't likely to find any broken links. Pat yourself on the back for a job well done!

About the teacher:
Thomas Benton's WebDesignWisdom.com is a comprehensive website design and Internet marketing resource featuring free articles and tutorials to help beginning netrepreneurs get it right the first time. Subscribe to his ezine, Active-eBuilder, at http://www.active-ebuilder.com or at http://www.webdesignwisdom.com