Creating a Basic Web Design Template

A "template" is simply a design format which you can apply to all (or most) of the pages in your web site. The first advantage of using a "template" system is that it allows you to make your most important design decisions at the beginning, and then just focus on content. The second advantage is that it allows you to quickly create new pages based on your standard design.

The disadvantage is that many template-based websites look homogenized and seem to lack a unique character. Designers who sell templates tend to use the same formats over and over again, insert the same generic images, and use the same techniques.

Just as important, templates are often not ready-to-go right out of the box. They almost always need modification, and often modifying a professionally prepared template is difficult because the designer will have used techniques you may not fully understand or are specific to the tools he or she used to create it.

So it is preferable not to think of a web template as the kind of thing you buy from an online template store. Rather just think of it as a basic page format that can be used over and over again. The best template is therefore one that uses "standard" techniques that can be modified without the use of specialized tools or programs (like Front Page or Dreamweaver).

Creating a Basic Template

If you are not familiar with web design, try working with a "bare bones" template to begin with. There are two ways you can go. You can work with basic html and tables, or you can create your basic template with CSS. Since CSS is rapidly becoming the new standard, it is probably better to begin with CSS -- especially if you have not yet become used to constructing web pages with tables.

CSS stands for "Cascading Style Sheets", but at the beginning it is not important to understand what that means. What is important is to understand that CSS allows you to create a set of formatting parameters in a "style sheet" (a seperate file) which you then can very easily apply to your individual pages. In other words, you seperate the "style" from the "content".

A simple style sheet can contain just three or four design elements. Here is an example which you are free to copy (right click and "Save target as" to a location on your hard drive, then change its name to "sample-1.css".)

Style Sheet Sample (be sure to change its name to "sample-1.css").

This template contains a definition for the body text, a header component (with a background image), a "navbar", and a definition for two headline styles, h1 and h2.

Now that you have a style sheet you can begin building your web site by creating a basic home page. Here is an example which embeds the style sheet referred to in the previous paragraph. You can get the html code by just opening the page in a browser window, looking at the "Source" code, and saving the resulting file on your hard drive as, for instance, "sample-1.html".

Now you should have two files in the same location on your hard drive -- "sample-1.css" and "sample-1.html". You can get the image file by just right clicking on the image in the sample page and saving it to the same location on your hard drive.

Your second step will be to create the pages referenced in the "navbar", so make sure you think of names for these pages before proceeding (e.g., howitworks.html, products.html, about.html, sitemap.html, contact.html). Then build your hyperlinks into the navbar. (Look at the code of the sample file to see how it is done.)

Once you have your basic home page with links, this then becomes your template. Just save it as "howitworks.html", "products.html", etc., and make the changes to the specific pages.

The result (once you upload it all to your host server) will be a basic, functional website containing a number of properly interlinked pages. It will also be search engine friendly because the design is not cluttered with scripts, and the most important elements are clearly laid out at the top of the page.

For more web design tips and techniques see the Linknet Marketing Resource Library.

Rick Hendershot is a marketing consultant, writer, and internet publisher who lives in Conestogo, Ontario, Canada. He publishes several websites and blogs, including The Linknet Network of Websites. This network provides an inexpensive way to advertise your website, and get as many as 100 low cost links.

More Web Design Articles

Using Server Side Includes to Simplify Your Web Design
An "include" file is a piece of code that can be put into a seperate file -- for example -- your navigation bar -- and then "included" in a number of other pages. This has the very useful advantage of allowing you to retain consistency over a very large number of pages, and then make changes to all of those pages by just changing the include file.

Build Web Pages from the Top Left Corner Down
There are two important reasons to build your website from the top left hand corner down.The first one is that this is the way people (at least in the western world) read pages.

Make it Clear What Your Website is About
Just about every list of the "Top 10 Web Design Mistakes" includes at least one reference to either1. Not clearly specifying the objectives of your website, or2.

Website Savvy: 10 Key Steps to Turn Your Customers ON!
?How to turn ?slightly interested? customers into ?I?ve got to have it!? customers!?I am truly amazed as to the lack of information websites contain. You would think that a business would realize that a potential customer would at least like to know how to contact the customer service department.

The Secrets of The Shriekers
I am constantly bombarded with all sorts of advertisements, single-page sites, and sites offering very little real content but some wonderful new "product" or "service" for sale that purports to make its customers wealthy beyond their wildest dreams.For the purposes of this article, let's refer to Amazing Formula (http://www.

How To Rescue Your Graphic Design Project When All Else Fails
Whether you're giving a critical sales presentation to a client, producing visuals for a meeting, event, trade show or seminar, or unveiling the new company logo before an audience of shareholders, top-notch graphics will help ensure that you, your products, and your message receive the attention they deserve.Yet when you decide to do the graphics in-house to reduce turnaround time or cut expenses, those logos, photos, charts, graphs, pictures, timelines, illustrations, etc.

Positive Design Attributes for a Successful Website
Designing a website is hard job, and requires you to think out a plan of action, and put in a lot of work to make it successful. There are many different kinds of websites on the Internet, but if you look at all the top performers with high traffic, you will notice that they all have similar design characteristics which place them as the best in the world.

Bad Design Characteristics For A Website
Making a poorly designed website is one of the easiest things you can do as a webmaster! You barely need to try! If you want to run a successful high traffic website there are many different elements of design that you need to implement, and ones you need to avoid.This article will describe some of the major design flaws in many new websites.

Make Artistic Graphic Designs
Are you a student of graphic design? If you have taken time in extra reviews and put ?graphic design? and ?drawing? into any search engines, you?ll get almost the same result = descriptions of graphic design programs at many design schools. Baffled? Well, it?s like this: As a student interested in graphic design, you have to take drawing and not actually a degree in fine art.

Creating Your First Website
Building your first website can be very frustrating. It looks fairly easy, but almost always turns out to be more complicated than you expected.