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.

---

Create Favorite Icon

Favorite icon appears to the left of your link in... Read More

Web Templates: Replacing Designers?

I've seen articles (and websites) that suggest you can buy... Read More

Website Design Basic Concepts

So, what's in a website design anyway? And, how do... Read More

Finger Eating Garage Door Reveals Breakthrough Web Design and Linking Strategy

Last Thursday afternoon I was working on a garage door... Read More

Custom Website Design - 3 Must Have Tools

Creating your own website can be fun and easy, as... Read More

Understanding How HTML Color Codes Work

Ever wonder how HTML color codes are put together? For... Read More

The Importance of Choosing Your Website Keywords Carefully

The importance of choosing your website keywords carefully is very... Read More

My Top Ten List Of Extremely Annoying Web Page Design Elements!

Easy navigation and usability are one of the most important... Read More

One-Product Sales Sites: Avoid These Top Blunders

One product, one long web page: this kind of web... Read More

Using CCS to Eliminate Tables

CSS or Cascading Style Sheets has opened up tremendous possibilities... Read More

Create A Web Site That Builds Trust

If someone doesn't know you personally, will they trust you... Read More

Why a Website Design Speaks Volumes About Your Company?

Whether a business has just got off the ground or... Read More

Adding the Right Keywords to Your Website Content

You've made your website, added a great title and keywords... Read More

Why Dot-Coms Fail - a Webmasters Perspective

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

Build It And Build It Cheap! Part II

If you are familiar with my work, then you have... Read More

10 Important Web Design Tips: SEO Friendly Website

A website should firstly be searched out by visitors before... Read More

6 Reasons Why A Website Is Crucial To Your Business

Since I'm a web designer, I have a tendency to... Read More

How to Chose Stock Photography for your Web Site

So you've decided to take the plunge. You know that... Read More

Web Designers Beware!

As a web designer, I have a personal interest in... Read More

Browser Compatibility

Internet Explorer, created by microsoft has been the most popular... Read More

Flash Doesnt Always Add Shine to Web Efforts

The trend today to overuse animation in a website's opening... Read More

Caveat Scriptor: Use the Advice of Those Who Know Before You Build a Site

~A man [woman] is a success if he [she] gets... Read More

Setting Up a Website

Where does a person start when setting up a website?... Read More

Why Content is King of Website Design

If there's one thing that most web site developers can... Read More

Cheap Website Design In Birmingham

Due to the large number of people offering website design... Read More

Wording Up Your Website

Back to basics. Forget funky design, good copywriting is the... Read More

Sales Versus Customer Oriented Websites

Should Generating Revenue From A Website Be The Prime Motivator?... Read More

7 Benefits of HTML Validation

You may not bother with html validation or writing simple... Read More

Web Site Professionalism? What Is It?

Your web site should be-visitor friendly to navigatesearch engine friendly... Read More

10 Nifty Ways to Prolong Your Visitors at Your Website

Increasing the length of time a visitor is on your... Read More

8 Tips for Designing a Great Website

Square buttons, round buttons, flashy buttons ? will they match... Read More

Quality Graphics for your Web Site

For most people graphic design does not come easy. Unfortunately... Read More

How Important is Content to a Successful Website

Content is the most important part of any website.The Internet... Read More