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.

---

Website Promotion and Design Tips

Are you thinking that it is about time your small... Read More

10 Ways to Sabotage Your Website Traffic and Send Visitors Packing

If you're running a website or online business, your number... Read More

Why is a Logo so Important to Your Business?

Well, a logo for your business. Why is it important?... Read More

Color and Web Design

Color is one of the most important but least understood... Read More

Free Website Templates - Top 10 Things You Need to Know

When building your website you might not have a large... Read More

To Flash, or Not to Flash

When considering whether or not to incorporate Flash into your... Read More

How To Set Up A Professional Website On Your Own Using Web Templates

To create professional websites is not an easy task by... Read More

Keep Your Navigation Highly Visible

Effective navigation stands out. It's clear, obvious, and highly visible.You'll... Read More

You Too Can Have Fun With Sepia Images!

If you are one of those who wonder how people... Read More

KIS - Keep It Simple

There are many ways to add fancy bells and whistles... Read More

Web Design for Ecommerce

Your website is your tool for showing the online community... Read More

Top Ten Ways to Use Audio on Your Site

Audio can provide an added dimension to your site. It... Read More

How to Convince Your Visitors to Return Often

One visit does not make a sale. Be sure to... Read More

Revising Your Site - What Happened To My Search Engine Placement?

As of September, Smartads went through what so many have... Read More

Essential Strategies To Make Your Web Copy Attractive To Your Target Audience

Reading on the web is different than reading in all... Read More

What to Avoid to Make Your Website Design Effective

The effective design is this one, which is maximum simplified,... Read More

Dont Make Your Website User-UNfriendly!

Web Design is a very subjective process. Your idea of... Read More

10 Reasons Why You Need A Multilingual Website

The internet continues to grow and has become the default... Read More

Affordable Web Design In Birmingham

If you have a business, big or small you may... Read More

Why Dot-Coms Fail - a Webmasters Perspective

Everyday we hear that another company goes out of business.When... Read More

The Top 8 Website Sins Part Two

Sin #5Poor Spelling And GrammarWe all make mistakes when we... Read More

Effective Web Design Usability Principles

Website Design Usability Tips1. Getting to know about audience membersYou... Read More

The Secrets of The Shriekers

I am constantly bombarded with all sorts of advertisements, single-page... Read More

Color Psychology in Marketing

On the internet we don't deal with face to face... Read More

Tips for Getting More Sales From Your Website

(1) Create a Direct Response Website, with the minimum number... Read More

Building Web Sites Using Web Templates

Gone are the days when you had to rely on... Read More

Build It And Build It Cheap!

There are several very good reasons why you should consider... Read More

5 Powerful Ways To Get Zero Sales From Your Website

I want you to imagine a lemon. In your mind's... Read More

Web Design for Dictators

No question about it, web design is an art. Finding... Read More

Increasing Conversions Through Action-Oriented Copywriting

I do site reviews. Needless to say, I see a... Read More

Web Site Design Mistakes

Some wise human once said "Learn from the mistakes of... Read More

Best Web Design And Free Web Promotion Tips

This article gives free tips on how to find a... Read More

Ten Steps to a Winning Home Page

There's no doubt about it - the first page your... Read More