WEC Template Developers Manual
2.2 Creating the HTML Template and CSS Styles
2.2a HTML Template & Graphics
The easiest, and least confusing way to organize your HTML template for easy implementation into the TemplaVoila Template format is to outline each of your dynamic areas with a <div> or <span> tag associated with an id or class. See Appendix II for the Web-Empowered Church Standard.
Images will be optimally compressed.
A church-friendly color and graphics scheme will be used.
Template graphics will be edited and saved in a program which allows image compression. Photos of a large file size (50KB or more) will not be used in the template or on the site as they considerably increase download time. All photos will be saved in a web-compressed format (jpg, gif, png) and will be sized before placing in the HTML document (no re-sizing outside the image editing program). The overall file size of the template (including graphics) will not exceed 70KB (50KB is ideal).
The appearance of links will be different than that of the main site content. For instance, bold, underline, different color, or different background.
No more than three different font faces will be used on a given site template.
High quality images will be used as much as possible (professional or stock photos may be used if you own the copyright to the work).
(X)HTML should be valid for the W3C document type you specify. For a list of document types visit http://validator.w3.org/.
There should be http://www.w3.org/QA/2002/04/Web-Quality#Standard no empty or un-closed markup tags in the (X)HTML document.
Images should have “alt” or “title” properties associated with them
The template HTML file will be named “template.htm”.
The template HTML file should be given a title in the <title> tag of the template, preferably one that mirrors the template naming structure as outlined in Section 1.4.
Markup & code should be commented whenever possible for easy maintenance.
2.2b Styles (CSS)
Common Template Styles
The development of CSS should be up to the template designer/developer, however some common template styles will make developing these stylesheets easier and will also make editing the stylesheet in the future easier.
Common CSS includes:
body {}
p {}
ul {}
li {}
a:link, a: visited, a:hover, a:active {}
h1, h2, h3 {}
.contact {}
.top-block {}
#breadcrumb {},
#breadcrumb a:link, #breadcrumb a:visited {}
#breadcrumb a:hover, #breadcrumb a:active {}
#footer {}
#content {}
#content h1, #content h2, #content h3 {}
#sitename {}
#siteslogan {}
#mainmenu {}
#altmenu {}
#pagetitle {}
#search
#login
#left
#right
#main-content, #main-content h1, #main-content h2
#sub-content
#bottomnav
#copyright
Additionally, extension CSS styles can be added to the main template CSS file to easily over-ride default extension CSS. This extension CSS can be found at www.webempoweredchurch.org. <Location TBD>
Style Creation Guidelines
All styles for the main template (fonts, colors, background images) will be defined in an external stylesheet rather than inline or with <font> tags.
Styles should be commented as to what areas they format. This will help make editing the stylesheet at a later date easier.
CSS should validate with W3C standards.
Interchangeable Styles
Within the template “family” main styles should be named consistently so that the CSS files can be interchangeable.
Styles File/Directory Naming Conventions
The CSS file that defines the style of a template should be named “styles.css” and should reside in the main template folder (i.e. template1/styles.css). If developing multiple styles for a template, a descriptive term should be appended to the name of the file (i.e “styles-print.css,” “styles-green.css”).
   |
6 / 15 |
