Friday, February 3, 2012

Template Design


In this tutorial I will introduce the concept of modular design of web templates. This is a way to create easily adaptable and maintainable web templates from simple ones right up to the most complex.
A website template is a framework for a website containing the code for web pages, graphic elements and a styling template. Most people think of a template in terms of it's visual appearance but this is really the theme.
The two main parts of a template are the content management code and the theme. These should be kept separate so that the theme can easily be changed without affecting the structure. For example, the styles should be defined in an external style sheet and not embedded in the HTML code of the pages.
The structure of a website will be defined by a set of templates. It is good practise to make the templates modular rather than having page templates containing all the code for each page. This allows site-wide changes to be easily applied. For example, the footer may be mostly identical between pages.
We might divide a page template into a header, content, sidebar and footer where these are in separate files. The content will change most between pages, so rather than having a content file, we include the content into a page file which pulls in the individual template files and defines the unique features of that page.
The unique features of a page will be the title, description and article content. We can define these at the start of the page template with say PHP code to set the value of variables that are used by the other templates such as the header template. Then we assemble the page by including the required templates and inserting the content.
If we directly insert the content, we will create a new page template for each page of the site. But this is fine since we are not duplicating the header, footer and sidebar.
To reduce the number of page templates, we can store our content in a database and use a page ID to identify which page content to insert. This ID is usually appended to our URLs of the website. If we do this, we are creating what is known as a Content Management System (CMS).
Where the theme is likely to be changed often or people are encouraged to design new themes, a separate directory can be created to hold the various themes. A read me file could be included to credit the designer, or this information could be added to the start of the style sheet as a comment section.
For this to work, we now need to create master page templates that pull in the templates from the current theme. The master page templates will power the site. The code that these templates use is best kept in separate files in say an includes directory.
In summary I have covered the concepts of modular website template creation from the simple to a complex CMS.
flash templates, unique templates, html templates, web design services, banners, logos, dynamic templates, easy to use templates, web templates, website templates

No comments:

Post a Comment