Print Design Templates Take a look at these creative Graphic Design templates for brochures, flyers, newsletters, stationery, postcards, ads, menus and posters for a variety of businesses.

Invoicing 4 Freelancers A complete, secure, online billing application that maintains hourly service billing, flat fee billing and recurring charges. Integration with Authorize.Net and other leading payment gateways provides hands-free recurring billing with a sophisticated CRM system.

Free Design Magazines Browse through our extensive list of free Graphic Design, Web Design, Business, Computer, and Computer Graphics magazines, white papers, downloads and podcasts to find the titles that best match your skills and interests; topics include management, marketing, operations, sales, and technology. Simply complete the application form and submit it. All are absolutely free to freelance professionals who qualify.

Suggested Links Photoshop Tutorials
Logo Designer's Logos
Web Design Tools List
Layouts & Templates Directory
Web Design & Graphic Design Blog
Photoshop, Flash, 3D Studio Max Tutorials
Web Designers & Developers
Crafts for Kids
Photoshop Tutorial Man
Tutorial Guide -- Free Webmaster Tutorials
Design Contests
How to Draw
Work From Home Job Search

 

OTHER SITES WE OWN
AllFreelance
Graphic Design Resources Directory
Graphics Tutorials Directory
Social Networking Articles
Design Sites Up
All Freelance Work & Portfolios
Graphic Design Community
Education & Learning Directory

home > Why Use a Web Design Template?

Creating a Basic Web Template System : How to Use Web Design Templates

by Rick Hendershot

Web templates can save you a LOT of precious web design time. Since this is the case, you should make it a priority to learn how to create your own web template system. This article is a tutorial for creating web templates for your websites. Use this article as a guide to creating your own basic web template system. Once you learn how to use a web template, you will never design a website without them again.

 

Graphic Designers from our Community

What is a web "template"?

As I understand this term, it is a design format which you can apply to all (or most) of the pages in your site. The biggest advantage of using a "template" system like this is that it allows you to make your most important design decisions at the beginning, and then just focus on content. Of course it also allows you to quickly create new pages based on your standard design.

Disadvantages of Template-Based Websites

The disadvantage is that many template-based websites look homogenized and lacking in unique character. Designers who sell templates tend to use the same formats over and over again, insert the same generic images, use the same techniques. Just as important, I have never found one that I consider ready-to-go right out of the box. They 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 I prefer not to think of templates as the kind of thing you buy from an online template store. Rather I prefer to think of them as simply 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. I recommend you 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 separate file) which you then can very easily apply to your individual pages. In other words, you separate 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)

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 may be contacted at http://www.small-business-online.com
Rick Hendershot is based in Conestogo, Ontario, Canada. He publishes the Linknet Network a series of more than 35 websites and blogs that offer low cost advertising and link promotion opportunities to website owners.

 

Visit List of Web Design Template Sites