8 Steps to a Functional Site
by 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!
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
