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.

---

Excellently Constructed Websites

Want to see an excellently constructed website? As a writer... Read More

Cool Web Design And Promotion Tips

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

The Newbie?s Guide to Small Business Web Design

You've got a concept for a business, are excited about... Read More

6 Reasons Why Web Templates Are Todays Trend

As the Internet blooms at an alarming rate, so as... Read More

Good Websites Stand Out From The Masses Of Boring, Hard To Travel Sites

Good websites stand out from the masses of boring, hard... Read More

How to Make a Website (Minus the Headaches)

There is nothing wrong with making your own website if... Read More

Digitalize It! : (Modification of images with tools such as Adobe CS and Corel)

Then it was a choice among crayons, paints and palettes... Read More

Images: How To Make Them To Load Fast On Your Web Pages?

1. Use .gifs rather than .jpgs. GIFs are smaller in... Read More

Put Up A Website And Start Promoting In About An Hour

I can't figure out people who have products or information... Read More

Website Design Basic Concepts

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

Differences between XP Icons and MAC Icons

The icons in an application are the soul of the... Read More

Dont Overdo it!

Have you ever been to site with so much ad... Read More

How To Boost Your Chances at Having a Successful Web Site

New Web sites are springing up online by the millions.... Read More

Choosing the Right Web Designer

Creating your web site can be a tricky process. Choosing... Read More

Reach Out To Billions

Have you heard of 'Babel Fish'?It's a service provided by... Read More

Why Hire a Professional to Design Your Web Site?

Creating an appealing, functional, and effective Web site is much... Read More

Why You Should Hire a Professional Website Designer

Your web site should always adhere to standards!A professional web... Read More

Dos and Donts in Web Design - part 2 (content)

Do know your audienceIt's important to know your audience. If... Read More

How To Increase Your Conversion Rate or What Most People Miss When It Comes To Optimization

Everybody talks about the importance of testing your sales copy... Read More

A Web Site That Sells Is All One Needs To Have A Successful Online Business!

There are more than billions of Web Sites, running Online... Read More

Web Production And Design Tips

You have identified that to have an internet prescence would... Read More

Explode Your Homepage And Replace It With Something Dynamite!

You know that I'm always extolling the virtues of an... Read More

Concentrate On Web Content Instead Of Search Engine Optimization

For many webmasters the title of my article may seem... Read More

How to Make the Online Sales Copy for Your Website More Conversational

It has been said that the best online sales copy... Read More

Fast Web Design For The Skint Webmaster

About two years ago, I had a go at commercial... Read More

Making Good Websites that Stand Out

Websites, there's literally billions of them out there in cyber-space.... Read More

Online Businesses Still Ignoring Dial-up Market

In this article you will find the parallel between two... Read More

Website Redesign for Existing Websites

Does your website need a re-design? Here are some questions... Read More

Create Favorite Icon

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

Stop Sabotaging Your Sales

Do your web pages, sales letters or personal presentations include... Read More

User Experience and Search Engines: If Your Home Page Could Only Talk

Dear web site visitor.I can't tell you how glad I... Read More

Use Exclusive Content - When Reprint Articles Dont Do Enough

There is no doubt that reprint articles can serve lots... Read More

Your Website Could be Letting You Down

A professionally presented business website is a powerful and essential... Read More