What is a Template?

Image 1

Templates are ready-made pages format, complete with margins, fonts, headers and footers, numbering, logos or any other kind of formatting the designer wants to appear on each page. It is a tool for enforcing a standard layout and look and feel across multiple pages or within content regions. By creating pages of these templates, designers can be sure that the look and feel is preserved. Also, when you change a template, any pages or regions that are based on that template are automatically changed as well. Templates provide additional standardization controls, depending on the type you use.

A website is usually composed of a home page template and then a level 1 or level 2 templates depending on the depth of the sitemap. Each one of these templates would be the mold on which all other pages in the same level are created. An example of a homepage is clear in Image 1 and Level 1 template in Image 2. Note how the layouts in the templates are different. However, all pages created from these 2 templates will have the same layout as their templates.

Image 2

How to build a template out of a design:

If you want to build your website from scratch; before actually building your pages, it is best if you have a clear plan.
The following steps describe the analysis process to decide on the number of templates and regions needed.

• First decide how many pages your website will have, for example: index.html, aboutus.html, contactus.html....etc.


• Then decide the best folder structure for these pages. For example, if you have 3 pages that are in the ‘about us’ section, it would be best practice to place them in a folder called about; and refer to them as about/aboutus.html, about/mission.html, about/history.html in your links.


• Once you have decided on the pages and structure, you will need to check and see how many unique templates your website needs and start designing each template.


• After choosing the design of the template, you need to choose which parts should stay static in the template, and which should be editable. Region decomposition is used to maintain design. If you want to ensure the structure and layout of a certain section in the page, you can decompose it into two or more smaller regions instead of one big region. For example, in the image below, the left column should maintain its form and remain separated from the right content. So the page is divided into two regions.


  


• The regions that will contain content that is unique to a page should be set as normal regions; as for content that you need to be identical in multiple pages of your website, it is best to place it in shared regions. Go over the html templates and define what regions should be shared and what should be normal.
  
• Do this “region” analysis for each template.


• Once the analysis is done and clear you can proceed to building the html pages, adding the regions and adding the navigation as was explained in the step by step example above.