Creating a model based Web Design

A "model" is simply a design format that can be applied to all (or most) of the pages of your website. The first advantage of using a system of "template" that allows you to make your most important design decisions early, and then just focus on content. The second advantage is that it allows you to quickly create new pages based on the standard version.

The disadvantage is that many Web sites based on templates homogenized look and seem to lack a unique character. The designers who sell models tend to use the same formats over and over again, enter the same generic images, and use the same techniques.

Equally important, the models often are not ready to go right out of the box. They almost always need to change, and often the change of a professionally prepared model is difficult because the designers have used techniques that may not understand or are specific to the tools that he or she used to create it.

So it's best not to think of a web template as the kind of thing you buy from a shop template online. Rather think of it as a basic page format that can be used over and over again. The best model is therefore a technique that uses "standard" that can be changed without the use of specialized tools or programs (such as Front Page or Dreamweaver).

Creation of a basic model

If you are not familiar with web design, try working with a "Bare Bones" template to get started. There are two ways you can go. You can work with html and base tables, or you can create the basic model with CSS. Since CSS is rapidly becoming the new standard, it's probably best to start with CSS - especially if you are not yet used to build web pages with tables.

CSS stands for "Cascading Style Sheets", but initially it is important to understand what it 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), so that you can easily apply to individual pages. In other words, separating "style" from the "content".

A simple stylesheet may contain only three or four design elements. Here's an example that 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".)

Example Style Sheet [http://www.1-webworks.com/sample-templates/sample-1-css.html] (be sure to change its name to "sample-1.css").

This model contains a definition for body text, a component header (with a background image), a "navbar" and a definition of the two styles headline, H1 and H2.

Now that you have a style sheet you can start building your website by creating a basic home page. Here's an example [http://www.1-webworks.com/sample-templates/sample-template-1.html] which incorporates the style sheet referred to in the preceding paragraph. You can get the HTML code to only opening the page in a browser window, looking at the code "spring", and save the resulting file to your hard drive, for example, "sample-1.html".

You should now have two files in the same location on your hard drive - "sample-1.css" and "sample-1.html". You can get the image files by simply right clicking on the image to the sample page and save it in the same location on your hard drive.

The second step is to create the reference pages in the "navbar", so be sure to think of names for these pages before (for example, howitworks.html, products.html, about.html, sitemap.html, contact. html). Then build the hyperlinks in the navigation bar. (See the code sample file to see how it's done.)

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

The result (once you load it all on your host server) is a simple, functional website with a number of linked pages correctly. It will also be search engine friendly, because the project is not cluttered with scripts and the most important elements are clearly arranged on the top of the page.

For more tips and techniques about web design see the Marketing Resource Library LINKnet [http://www.small-business-online.com/b2e] .......