Creating a Basic Web Design Template

"Template" is simply a design format that applies to all (or most) pages on a web page. The first advantage of the "template" system is that it lets you make the most important design decisions at the beginning, and then focus on content only. The second advantage is that it allows you to quickly create new pages based on your custom design.

The disadvantage is that many template-based websites are homogenised and appear to lack the unique character. Templates sellers use the same formats over and over, apply the same generic images and apply the same techniques.

It is equally important that templates are not immediately available from the box. They almost always need modification and often modify a professionally prepared template because the designer uses techniques that are not fully understood or that they relate to the tools they create.

So rather is not thinking about a web template as the kind of thing you can buy an online template to store. Rather, just think of it as a motherboard format that can be used again and again. The best template therefore uses "standard" techniques that can be modified without using special tools or programs (such as Front Page or Dreamweaver).

Creating a Basic Template

If you do not know the web design, try to work with a "bare bones" template first. There are two ways to go. You can work with basic html and spreadsheets, or create a basic template using CSS. As CSS is rapidly becoming a new standard, it's probably better to start with CSS – especially if you have not used web pages to make tables.

CSS stands for "Cascading Style Sheets," but at the beginning it is not important to understand what this means. is important to understand that CSS allows you to create formatting parameters in a "style sheet" (in a separate file) that you can easily apply to each page. In other words, "style" separates from "content".

A simple style sheet can only contain three or four elements. Here is an example that you can copy freely (right-click and "Save Target" on the hard drive, and then change it to "sample-1.css").

Style Sheet Pattern [http://www.1-webworks.com/sample-templates/sample-1-css.html] (make sure you changes its name to "sample-1.css").

This template includes a definition for text, a header component (background image), a navbarra, and a two-step h1 and h2 definition.

Now that you have a style sheet, you can start building your site by creating a basic home page. Here is an example [http://www.1-webworks.com/sample-templates/sample-template-1.html] that contains the stylesheet mentioned in the previous paragraph. You can open the html code by opening the page in a browser window by looking at the "Source" code and saving the resulting file to the hard disk, for example, "sample-1.html".

You now have two files in the same place on the hard drive – "sample-1.css" and "sample-1.html". Right-click the image file to get the image on the sample page and save it to the location on the hard drive.

The second step is to create links to the "navbar" pages, so consider the names of these pages before continuing (eg Howitworks.html, products.html, about.html, sitemap.html, contact.html). Then build hyperlinks in the navigation bar. (See sample file code to find out how it is done.)

Once we find the basic home page with links, it will be your template. Just save "howitworks.html", "products.html", etc. And make the changes on those pages.

The result (if you upload it to a host server) is a basic, functional web site that contains many properly linked pages. Search engines also like it because the design is not crowded with scripts, and the most important elements are clearly defined at the top of the page.

For more webdesign tips and techniques, visit the Linknet Marketing Resource Library [http://www.small-business-online.com/b2e].

Comments

(0 Comments)

Your email address will not be published. Required fields are marked *