How to Build a Web Page Template
by Brandy Alexander, Demand MediaWeb page templates are used to create a page just once, keeping the look of any future pages uniform and with little effort. Using templates, websites are created with ease because any issues with the design are worked out beforehand and you can simply copy the file as many times as necessary. By considering some essential items, you create solid building blocks and put together all the parts necessary to create a successful template.
Items you will need
- Graphics program, such as Fireworks
- CSS style sheet
- HTML text editor, such as BBEdit
Step 1
Draw a sketch of your intended web page. This determines what is needed, identifies potential problems and provides the necessary blueprint during the actual creation of your page.
Step 2
Design the navigation bar needed to house the links of your document. You can construct this feature in a graphics application, such as Fireworks, or use an automatic Internet toolbar generator (see Resources). Save this file in the same folder as your intended template so that it can easily be added to the page.
Step 3
Create or find a Cascading Style Sheet (CSS) template to style your layout. The CSS formats the overall look of your content, such as font styles and background colors, and keeps the page's code light so that it will not have long load times when it is published. Use an HTML text editor, such as BBEdit, to develop your style rules or get a ready-made template on the web. Name and save your file with the ".css" extension and place it in the same directory that your template will be.
Step 4
Generate or prepare any images necessary for your page, such as logos or icons. Graphics programs, such as Fireworks, come with easy to use interfaces to help you create original art. Be sure to place the file(s) in the appropriate location for easy access.
Step 5
Launch your HTML text editor and create a new file for your web page template.
Step 6
Refer to your sketch and enter the previously constructed components in the appropriate places to build your template. For example, enter the navigation bar code underneath the opening "
" body tag and place any content or images after "" paragraph elements.
Step 7
Link your CSS file to your web page document. Locate the "
" section and enter the following:Step 8
Name the file "template" or something similar and save it. You can now make copies when needed.
Tips
- You can use an HTML text editor, such as Dreamweaver, to get ready-made CSS templates.
