Web Site Design:
Everyone has their own method for site organization, but this model
seems to be very helpful for people getting started. We highly recommend
you follow it until you grow reasons to do otherwise.
In the examples below, we use yourwebsite.com as a substitute for
your actual domain name.
It is very important that you have a specific folder on your local
hard drive where you keep your web site's files. Because we don't
know what you named that folder or where you put it, we will always
call it c:\website\ and I'll leave it up to you to know where it
really is. (If you currently have your web files in a big mess inside
My Documents or something, then create the c:\website\ folder and
move them in there.) If you have multiple domain names, you may
wish to organize them in seperate folders underneath your c:\website\
Name all your files in all lowercase letters with no spaces. If
you would like seperation in a filename, use the dash (-) character.
(The filename rules apply to all files, even images.) Inside your
html, referance your files with the same filename (including lowercase);
most web servers are case sensitive and this just makes your life
The first page of your website is named index.html. If you are
using PHP in your pages, then name it index.php.
Keep your main html pages in the main folder and, for each main
html page, create a folder to hold images and other items that page
may need. It is also good to have a main images folder to hold images
that appear on more than one page.
If your main homepage file is index.html and you also had a page2.html,
your site might look like this:
In the main c:\webpages\mysite folder:
The mylogo.gif and button.gif appear on both pages so get put in
the universal images folder; the other items only apply to a specific
page and end up in a folder for just that page. This saves you an
incredible amount of work later when you decide to change images
on your site and have them organised. Many large sites have hundreds
of images. When you decide an image is unneeded, it is really nice
not to have to wonder how many places you used it. Who wants to
have to look at their entire website looking for broken picture
When you referance a file in your html, like mylogo.gif, use a relative
path to the file.
This will permit your web site to be viewed on your local hard drive
exactly the same as on the server.
It is time to create your web site. We will pretend that you already
know what kind of information you will be placing on your site and
jump right into building it.
Most beginners have no idea how to build a web site. Most tutorials
on learning how to make a web page focus on basics and don't give
you much more than an ugly little "Hello World" web page.
We will assume that you don't know what you are doing and still
want a great looking website!
The first thing you should do is go template shopping. It is very
important that you pay money for your template. It may only be $5,
but paying for your template insures that you have nicely dodged
all the people giving away "free" templates that they
don't own. You really don't want someone showing up and telling
you how you have infringed on their copyrighted material because
of the template you used for your website.
Here is a list of some template sites where you can shop for a
nice template. The first place on the list, Steve's
Templates, will permit you to use a template for free. You can
continue to use it for free by leaving the link to his website on
the template or you can remove the link and pay a small fee for
the template. This is fantastic, because Steve has given us permission
to use one of his fully-functional templates in our tutorial.