How to Create Web Site Template

Website Design Template Using Tables as Framework

Using the standard templates that accompany many Web authoring programs can be an appropriate design choice for anyone creating a first website. To achieve a more individualized appearance for your site, however, you will want to design your own template. This can be accomplished by using tables as the basis for your design.

Difficulty:

Moderately Easy

Instructions

Things You'll Need

• Web authoring software
• Computer
• Internet connection
• Web hosting company

1. Make basic decisions about how you want your template to appear before you actually start to work on it. Select the colors and fonts you want to use. Decide what images to use and where to position them. Choose where you want to place links to your other site pages and how you want the links to appear. Finally, draw a rough sketch of how you want your page to look.

2. Open your Web authoring program. The software used in this example, KompoZer 0.7.10, is similar to many others you might select. KompoZer is available for Windows, MacOSX and Linux platforms.

3. Select "New" from KompoZer's "File" menu. Click on the button that creates a blank template.

4. Click "Insert" and select "Table" to begin your design. This allows you to create an invisible framework of cells arranged in columns and rows that lets you position the elements of your design in specific locations. Choose a 2 x 2 table from the resulting grid.

5. Increase the size of the table to fit your page by using one of the handles that appear when you click on the table.

6. Adjust the appearance of your table. Change cell width by sliding the measurement bar located above the table. Control cell height from the bar on the left. Eliminate unneeded cells by choosing the "Join with Cell" option from your context menu.

7. Add appropriate images to your template. Click the upper left cell to position your image. Choose "Image" from the "Insert" menu. Select the file name of your image to bring it into your template. Adjust its appearance if necessary by selecting "Image properties" from the context menu.

8. Click on the upper left cell to place your Web site's name. Type it in the cell and highlight it. Select the name of the font you want to use. Click the sizing icon to increase or decrease font size. Use the alignment icons to move your text within the cell.

9. Add editable text to your table for content that you want to be able to change by clicking the lower right cell. Select "Templates" from the "Insert" menu; then choose "Insert editable area." Next, apply font, color and positioning options if necessary.

10. Place navigation links to your other Web pages in the lower left cell. Type in a short form of the page name; then click on the "Link" icon to insert its file name. Repeat this process for each additional page.

11. Save your completed template as a file. Create all subsequent Web pages from it by selecting "a new document based on a template" from the "File" menu. Change your template data as needed; then go to KompoZer's "Edit" menu and click "Detach from template." Save your completed page as an HTML file.

12. Use KompoZer's "Publish" feature to send your completed pages to your web host, or use an FTP program such as FileZilla to transmit your finished work.

References

• How to Create a Website Template
• KompoZer User Guide: 7 Templates
• KompoZer - Easy Web Authoring