Website Folder Structure - Before you start building your website template it’s important that you set up your folder structure correctly if you haven’t done so already for your new website. You can start doing this by creating a folder. Create this folder anywhere on your PC or Mac.

Once you create this folder open the folder by either clicking once on the folder or double clicking the folder (depending how your operating  system is configured)

and create a folder by the name of images inside this folder you created. The purpose of this is that the main folder will be where you save your webpage’s and you will place or save your images in the images folder.

So if you created a webpage and placed an image in your webpage the path would be /images/myimage.jpg

It is very important you setup your website folder structure correctly and there are important reasons for this. The main one is that when you design and build your website on your computer your website webpage’s will use the same image path that you will use on your webhosting account when you upload your website.

When you have finished building your website you will need to login to your hosting account and create a folder in your main directory and give it a name identically to your images folder you created on your computer in this case being images.

Below is an example of an actual website I designed and how I setup my folders on my pc and how I used the same folder setup on my webhosting account so all my links will work for my webpage’s and images.

Computer Folder Setup

Below is a screen shot of a folder setup on my PC. The main folder name is called www.affacademy.com and high
lighted in light blue is the images folder I have created to store the images for the website.

PC Folder Setup

Webhosting Account Website Folder Structure Setup

Below is a screen shot of a folder setup on the webhosting account for affacademy.com. On the left hand side you can
see I am in the www folder which is the main directory for this webhosting account setup type which may vary. In this folder I have created the images folder.

Website Webhosting Server Folder Setup

The Idea behind this is that your image path will be identical so it will work on your website once everything has been uploaded and created. If you use a folder mapping path for example like c:\mysite\images if this is the path being saved in the webpage’s the site will work on your PC but no one will be able to view the images even though you have uploaded them into the images

Free Website Making - Using Tables - When you’re creating a template for your website its highly advisable that you create a table and place your contents within a table so you can keep the formatting of your template perfectly aligned within a table. This is the best practice to follow when you’re creating a template for your website.

You can design this template however you like however I suggest you keep your navigation on the left hand side so its viewable no matter what screen resolutions and settings your website visitors have. There is more information about this throughout my website.

Below is an example of what a table would like for a website template.

The above template example is identical to the
one used at Website Builder’s Guide

Rows and Columns

Before you create a table its important that you understand the difference between rows and columns. The identification of rows and columns is the same for Tables created in document writing software programs.

1. The black colored cells are called your rows.

Rows go across a table.

2. The light green colored cells are called columns.

Columns fill the areas between rows and generally go up and
down a table.

Banner - In this example if you were designing a template you would place you banner image here.

Navigation Links - In this example if you were designing a template you would carefully design and implement your links in he navigation links column I have highlighted in light green above.

Content - In this example you would place your content in this area.

It’s important you understand fully the concept to building your free website making template. Design and plan your template carefully. Make sure you add the correct navigation links because if you need to update these latter it will require work to make the changes.

Colors, border thickness etc are all entirely up to you to decide how to implement these or whether to use them.

How Make Your own Website - Choosing the right software. What software program you decide to use to build your webpage’s is entirely up to you. You will need a program that will give you the option to view, edit and copy your html source code. Expect to pay anything from $50 to $300 US.

Two great programs you can choose to build your webpage’s are Namo Web Editor and Dream Weaver.  These two programs behave like a document writing software program that create the html code for you. These programs are proven webpage making software programs and do an accurate job in coding your html for you.

My suggestion is to shop and buy our software program from ebay.  The cost savings are worth it and you can even look into purchasing a software program that is one version old because both are established and fully proven software programs.

Both programs have been in development now for over 5 years so the major changes and updates required would already be in place in the one old version software programs.

So by shopping smart you can save yourself money.

I do not suggest you build your website by coding your web page’s in html or using a program specifically designed in building html web page’s. This process is longer with a higher learning curve. You need a software program that has an interface like word (wysiwyg) but with the added power of viewing your html source code. Source - how make your own website software guide.

There are a few die hard technical people who love building there web site’s by coding there pages using html. With the time you will be spending in learning html and how to use these programs you could be writing valuable content. So way up what is important for you. I like doing things the simple way. However this is a decision you will need to make.

Website Webpage Structure consists of mainly the main index.html webpage and as many Tier 2 and Tier 3 web pages the website requires. Tier 2 and 3 webpage’s are what search engine spiders like to visit and rank in search engine results depending on the keywords used throughout your webpage.

Every website has a main index webpage. This is generally viewed by visiting the website
(eg. www.websitebuildersguide.com) and a default webpage (generally your index.html or index.htm webpage) shows up in your browser. These links when clicked go to what is called a Tier 2 webpage. If a webpage has been created and is only
accessed only via a link on a Tier 2 webpage this webpage is called a Tier 3 webpage.

Below is a website webpage structure that consists of Tier 2 and Tier 3 webpage’s.

As you can see above the website example has links to 4 Tier 2 webpage’s which are:

• Website Elements
• Website Design
• Contact Me
• About Me

When you visit one of the above pages there are also links that will take you to other webpage’s. These are Tier 3 webpage’s and generally have links going to these webpage’s either via a link on a Tier 2 webpage or a site map. Tier 3 webpage’s are generally not accessed via the index.html webpage.

So as a reminder just remember that when your creating your navigation links for your website webpage structure your actually adding links that link to your tier 2 webpage’s. It is important that you plan and design your website template carefully because any changes you need to make to your look and feel you will need to alter every webpage and it’s important these all look the same.

Once you have finalised your links to your Tier 2 webpage’s you will now need to think about adding Tier 3 webpage’s and place these links either in your content or a link menu in the bottom of your Tier 2 webpage.

Example

Lets take a look at the above example. The first link to my tier 2 webpage on my website is to the website elements webpage. Here I talk about the Elements of website design you need. Instead of talking about the whole subject in 3000 words I have split these pages into there own relevant content pages (Tier 3 webpage) and I have linked these back to my Website Elements page (Tier 2 webpage).

When you’re designing your website its important to plan your site using the Tier 2 and Tier 3 model.

Create free website Template Tutorial - Before you start building your website you will need to design a template that will represent your website’s look and feel.

When you create a template it will be easier to create your webpage’s because all you need to do is just save your template as the webpage your building add content and your webpage is complete. This process involves finalising the look of your template, adding your navigation, banner images and color scheme and doing this all once correctly in your website template.

It’s important you build your template correctly because the last thing you want to do is create 50 web pages then realise you need to change something to the structure which then you will need to change all 50 web pages.

Once you create free website template you will need to save the template multiple times as your webpage file names until you have created your web pages.

Your next step is to just add your content in each webpage. So don’t rush into it plan and design your template carefully.

Lets Get Started with the basics that are required.

Template Background - You can add color directly into your webpage background but what happens if you want to change this latter?

A suggestion is to create a small image with the color you would like your background to be. If in the near future you decide you want to change the background color you can do this easily by changing the color in the background image and saving it with the same file name upload and replace the old image on your server and your done.

Create free website and view the changes you just made by visiting your website and refreshing your browser.