Creating a Web Site - Basics Part 1

Before I start this explanation there is one thing that MUST be done on your PC to prevent files getting the wrong names.

Open your Windows Explorer (not the browser)
Usually found by going to Start > programs > accessories > Windows explorer.

Click on Tools then on Options.

Click on the tab View.

Remove the check mark from the box called "Hide file extensions for known file types"
Next click on ok.


The basics when creating a web site.

Planning is important when creating a web site.
Not only what you are going to put on it but also having it organized on the server is important.

Many people create a site and just put everything in the one folder.
This is fine if you only plan on having a one page site and a couple of images, but when you decide to expand your site the more you add into the base folder the more difficult it becomes to find things when you need to make changes.

My server uses cPanel so I am going to base my description of how I organize things from this point of view.

The first thing I do is on my PC I create a folder with the name of the web site
example mydomainname.com.

Inside this folder I then create a folder called public_html
The reason for this is that with cpanel the base folder for viewable pages of a site such as index.html have to be placed in the public_html folder or they will not show up.

Inside the public_html folder I create a sub folder called images where all image files (gif, jpg, png, etc) are placed and a sub folder called pages to hold the other pages of the site.

By setting up this way you start off organized and as your site builds you can stay organized.

The next part of the planning is to write down what pages you are going to need besides the index.html.

As an example if you are going to cover several subjects allocate one page per subject.

Lets say for example I am going to set up a site and promote 3 programs plus i want to tell people a bit about me, and
I am also going to run a links page.

So I would list the pages I need
program abc name the page abc.html
program def name the page def.html
program ghi name the page ghi.html
links page name the page links.html
About me name the page aboutme.html

The next thing to think about is page consistency.
By this I mean that no matter which page I go to I will find the layout is the same and it has a consistent theme.
The menu is in the same place, on each page, I don't have to search each page to find it.
The basic color schema is the same on each page. important for branding your site.
The main body content is easy to find.

As you can see on the plan I have chosen to go for a header area that will be full width at the top
The menu as a column on the left
The main body in the center
A column on the right (this is optional)
A footer the full width at the bottom.
The layout will be achieved by the use of tables.

So now I have a plan on paper to follow

Next I look for any graphics I want to use or create them and then place them in the images folder.
If I am going to use a banner from a program then I will save the banner into the images folder so that I can call it locally rather than from the programs web site.
Doing this ensures the image will always be displayed even if there is a temporary problem with the website the banner is for.

Using what ever site builder you prefer, set it up to work inside the public_html folder.

Now we have the basic preparation done.

Click here for part 2