How to Make a Great Website Template With Design Elements

Website templates define the layout for an entire site.

Making a great website template involves creating something that is reliable and adaptable. An effective template is one that can be used in a variety of contexts. You have to strike a balance between creating structures that are robust and effective and also allowing people to customize and tailor them to suit their own needs. The main tasks involved in creating a great website template include design, building HTML and creating a layout using CSS.

Instructions

1. Decide how much content you want your template to hold. A Web template will typically be used to display media including text, data from a database, images, audio, video and possibly Flash movies. Create a rough outline of the content you want a single page in the template to be capable of holding. It can be helpful to sketch a design of your template on paper, working out exactly what the elements within it will be.

2. Build the HTML for your template. With reference to your list of contents for the template, build each required HTML structure into your pages. Use the HTML in your pages only to create structures to hold the content, and avoid building in the style or design elements, since these are best kept separate from the markup itself. Use a variety of HTML elements in your template, as these are provided to hold a variety of content types.

3. Create the CSS for your template. Preferably in a separate file or files, list a set of Cascading Style Sheet declarations to display your HTML structures in the desired way when viewed in a browser. Use any design documents or sketches you have, and make sure your layout presents the site content to best effect. Try to create a CSS design that will perform equally well in a variety of browsers, as browsers can vary greatly.

4. Build interaction into your template. You can use a number of Client Side tools for interactivity, including CSS, JavaScript and Flash. How much interactivity you want in your template may depend on the types of websites you envision. Interactivity in a website can enhance usability and can present the site content more effectively. Consider adding transition effects to menus and other website elements.

5. Try your template out with real content in it. Create a sample version of the template with realistic content, such as text and media. This will allow you to showcase the template, and will also flag any remaining errors or issues. It's impossible to see how effective a Web page design is until you see it with real content, so it's essential to create a realistic demonstration.

Tips & Warnings

• It can be useful to tailor a template to a specific type of website. Browse the Web to see similar examples.

• Avoid making your template difficult to amend. A great website template is one that can be tailored for different needs, so it should be easy to make changes.

References

• W3Schools: HTML Elements
• HTML.net: How does CSS work?
• W3Schools: JavaScript Introduction

Resources

• SmartWebby: Web Design Tips