FREE Advice on Using A Template For Web Design

Using A Template For Web Design

Want to Learn Web Design?

If you would like to learn how to build a website you will need to register a domain name and purchase web hosting, start here to follow a step by step website creation guide.

Or dont you have time?

If you would like a website but you do not have the knowledge, experience or time to create your own, i recommend you use a web hosting provider that includes a free website builder, this is a very quick and easy way to get setup online immediately.

What program do i need to make my website?

There are a selection of tools available to use to build your website, you can view my recommended web editing programs here

Building a website using a Pre-Made Template

One of the fastest and easiest ways to set up a website is by using a website template, this is to put simply a ready made website that can be used instead of designing one yourself from scratch, you just simply insert your text and graphics and your away.

This allows you to have all of the features (as described below) instantly without having to pay someone else.

Using a template will definitely increase production especially if you are unfamiliar with HTML and CSS (explained in more detail below), thus allowing you to concentrate you efforts on producing great content, building traffic to your website and converting your traffic into paying and satisfied customers.

W3C Validated. W3C Stands for World Wide Web Consortium – This is the main international standards organization for the World Wide Web, basically if your site is W3C validation this means it is robust, error free and very search engine friendly, meaning search engines will have no problems accessing your website and you will be ranked higher as you website code will be efficient, so in terms of ticking all the technical code boxes this will tick them all.

CSS has already been defined. This is the style and design of your website, all of these designs and style attributes have already been defined in one place, and there is no need for you to do it yourself. Basically a website is made up of many images, many HTML pages (web pages) and normally 1 CSS sheet.

Furthermore many of the website templates out there are extremely easy to customise giving you the ability to take an existing design, touch it up / make amends to it giving you a professional looking unique design for your business.

Another great advantage of using templates is it gives you an opportunity to learn from example, all of the design and style work has already been done for you so you can learn how it’s been done, and this really is a great learning curve.

So if you think using a website template is the right option for you simply start the tutorial now.

use the link below to search for a template design. For the purpose of this tutorial I have chosen template:

Download here: http://www.oswd.org/design/preview/id/3564

Ok .. lets start

As you can see the template above has certain sections. I am just going to show you how this looks behind the scenes in code and then I would like you to watch the video tutorial and learn how you can customise the whole template.

As mentioned above a website has many web pages (HTML pages) and normally 1 CSS sheet.

For the purpose of this example I will now show you how the NAVIGATION looks on the web, in HTML and CSS.

Firstly how it looks on the web: -

Ok so there is one navigation bar (dark blue rectangle shape) with four links, home, about us etc.

Here is how this looks in HTML, don’t worry after I explain it you will understand how this works: -

• Starting from line 23. This line forms the blue rectangle navigation bar and on line 30 this is where this piece of code is closed. Think of this as a sandwich, there has to be a top and bottom and line 23 is the top and line 30 is the bottom.
• <ul> Stands for Unordered List. If this was <ol> this would put the navigation list in a numbered list e.g. 1. Home 2. About Us 3. Products etc.
• Lines 25, 26, 27, 28 <li> Stands for List – As it forms a list of links.
• Line 25 - Class=”active” – If you look at the web preview of the navigation bar (above in blue) you will see that ‘Home’ has a lighter blue background, this is to show the website visitor what page they are on, very good for usability.
• <a href=”index.html”> simply means that if you click on the ‘Home’ link you will go to the page index.html and if you click on About Us link you will go to ‘about-us.html’.
• As explained earlier every time you open a tag whether it be <div class=”bar”> you always need to close it as it is on line 30, the same goes for <ul>, <li> and <a href>, you MUST close all tags, to signal a closure of a tag you must use ‘/’ (forward slash) e.g the closure of <li> = </li> - notice the ‘/’.

Now see how this looks in CSS.

This is fairly simple to understand.

• Line 115 defines the size of the font, you will find that size can be defined using different types e.g here ‘em’ has been used, whereas in other templates you may find px is used, the great thing about using ‘em’ is if website visitors decide to increase the size of the text on youtr website then this text size will increase when they do so, so this is a safe type to use.
• Line 116 shows the height of the navigation bar in Pixels (px)
• Color: #FFF basically means the colour of the text is white. #FFF is a fancy way of saying white, this is a RGB value.
• Line 118 background: #5A8096. Again this is the blue background colour you see.
• Again you will see that the ‘bar’ navigation has been wrapped in .bar { (open) and then its close at the end of the statement } (closed).
• Now lets see the HTML and CSS together to tied up the loose ends: -