How to Build a Web Site Template
The average modern website requires thousands of lines of code, possibly more if you incorporate web 2.0 technologies in your site. A good chunk of this code is what gives any give site its particular layout and design, so web designers developed the system of templates early in the Internet's history. A template is a file that looks like a normal HTML file but is very different from a technical stand point. Basically, templates allow you to write the basic code for the layout and design of a site and easily reuse it on every page that it applies to. Almost every site on the Internet uses templates in one form or another and any web designer, even novice designers, know how to make effective and attractive templates.
Other People Are Reading
Instructions
-
-
1
Sketch out or otherwise plan what you would like your website's template to look like. This is very important because it can save you a lot of coding time and frustration.
-
2
Begin coding or designing your template file. Select a web design tool like Dreamweaver, Microsoft Expression Web, or SeaMonkey (see Resources). Dreamweaver and Expression Web are the two most full-featured options but they are expensive, while SeaMonkey is free but lacks some of the features and polish of its commercial competitors.
-
-
3
Add editable regions to your template. This is basically what allows a template to be a template and not a web page. Editable regions are the sections of your template that each individual page's content will go on. When designing the actual pages, these are the only parts of the template you will have to change. In all three tools, this is done by going to the top menu and clicking "Insert" then "Editable Region."
-
4
Open your template in several web browsers to test how it renders in them. Note that sites can render differently in different browsers. This is particularly true of Internet Explorer, since it tends to render website code radically differently than most other browsers. If it does not render properly, then there is likely some error in your code.
-
5
Check your code for errors. It is likely that there will at least one or two errors in your template and, if you are using any of the tools recommended in Step 2, they will be underlined in red for you, so you can quickly find them.
-
1
References
Resources
- Photo Credit website layout image by 6922Designer from Fotolia.com
