Web Page Templates
Making your own web page templates has never been easier than it is today. With software like Adobe Photoshop & Image Ready, Macromedia Dreamweaver & Contribute, and Microsoft Front Page, you have a number of options for creating web site templates. Rather than outlining the software differences, it's important to understand the basics of web page templates.
Good web page templates consist of four essential components: CSS file(s), includes, editable & locked regions, and search engine information. This article briefly outlines these four essential components to an effective template.
CSS Files
CSS files allow you to specify attributes for everything on your web page. With the ability to specify alignment, link colors, fonts, backgrounds, table sizes and padding, form appearance, and more in a CSS file you have the ability to greatly reduce your page size and have one place where you control the appearance of your entire site. When you want to change the font(s) used on your website, you can change it in one place and it changes everywhere on your site.
To reference a CSS file, add this line to your header information, where design.css refers to the location and file name of your CSS file.
< link href="design.css" type="text/css" rel="stylesheet" />
Include Files
Include files are used to avoid duplicating information on your web pages. Every website has some kind of navigation that appears across many pages. Rather than including the html code for the navigation links on every page, you can put the html in an include file called header.html and then include it on every page that needs to have the navigation html.
To include a file, add this line to the place in your web page you want it to appear:
< !--#include virtual="other_page.htm" -->
If it's not working, make sure you have includes enabled on your server. Some web servers require you name your pages .shtml in order to use includes. If you're using a server technology like PHP or ASP, the include syntax will vary slightly.
Editable & Locked regions
If you're using Dreamweaver & Contribute or certain other web development software, then you have the ability to create editable and locked regions in your template. Editable regions allow you to control what pages of a page can be edited in the future and which areas are locked. This is particularly useful when you are creating web site for a client or other users who will update the site after you're doing creating it. The editable regions prevents them from changing something they're not supposed to.
Search Engine Information
Although there are tons of things you can do to increase search engine optimization (SEO) of your website, there are a number of easy things you can do.
Use meta tags to specify keywords and a description. Use a keyword-minded title for each web page. Make sure your web pages are HTML validated. Use alt text for images and links. These basic guidelines can go a long way and are done by surprisingly few people.
Summary
Remember to use CSS files to specify all the attributes of your web page, include files to store common information that appears on more than one page, specify editable and locked regions to control where future web page updaters can edit, and include critical search engine information to give your web site a boost.
| 