Template Creation Tutorial

Preparations for carrying out the exercises

1. Purpose of the exercises

Practicing exercises for template creation.

2. Required experience

The tutorial exercises are primarily meant for proficient siteBuilders to pick up on the creation of a template by our system according to a given design.

Therefore the required experiences are the following:

• HTML knowledge

• CSS knowledge at an advanced level

• Photoshop (or another similar program) handling for the preparation of design elements

• Our CMS's basic operation for creating sufficient content

Optimal experience:

• Advanced level CSS knowledge

• CrossBrowser development knowledge

• Advanced SiteBuilding experience

• Thorough knowledge of our system

3. Template Creation Kit

Within the templates there is a Universal Template (UT2) which has been specially developed so that nearly any design can be utilized by it; practically without modifying the HTML source, only by CSS customization.

The TemplateCreationKit has been formed to enable the siteBuilder to work with CSS on his or her local machine, in the environment she/he is used to. When finished, the siteBuilder can just reinstall the information to the site. A big advantage of the Kit is that it that any Template can be uploaded to any site created on our system.

Further information on the UT2 template:

• UT2 guide

• UT2 map

4. First step

For carrying out the exercises you need a registered account and site. If you already have one, it is advised to create a new one for the exercises.

Creating the initial site:

1. Create a site in advanced mode. Choose the „Website Builder” then the E-commerce or Business portal options.
2. In the “Modify your site's basic content” wizard you will need the following contents (the rest should be deselected): 
   - About Us
   - Our services
   - Contact
3. On the created page go to Design → Templates choose Site Creation Kit Base template which is called “Template Builder” 
   
   
4. Create a “Home” customPage menu at the uppermost menu level.
5. Download the TemplateCreationKit

When opening the local index.html in the browser, it should look something like this:

Initial view

5. Schematics of the exercises

The exercises are interlinked  and will guide you through every element of template creation. The final stage of each exercise is the same as the initial stage of the following exercises.

File structure:

• design-start: extracted TemplateCreationKit, initial status of the exercise

• design-end: extracted TemplateCreationKit, the final status of the exercise carried out by us

• PSD file: design utilized by the exercise showing the skin to be developed

• PNG files: the design elements extracted from the PSD file used in the exercise
  
  

6. Carrying out the exercises

In an optimal case, the elements used to carry out the exercise are your own creations.

What does this mean?

Build upon the initially downloaded TemplateCreationKit at each stage of the exercises , and use the extractted  design elements from the attached PSD file.

Therefore, optimally you should not need any other files for the exercise than the PSD file!

After the second or third exercise, in any case, it is advised to carry out the tasks without supplements.

It is recommended that you read the guide and examine the attached PSD file.

Before starting the exercises, view The Appendix where the special terminology of the exercises are defined.

7. Next step after the exercises

Always try to maintain cross-browser compatibility. The key is not 100% uniformity, but it should not produce erroneous display on any browser.

Check to see if your site displays properly on the following browsers:

• Mozilla Firefox 3.5.+

• Internet Explorer 7

• Internet Explorer 8

• Opera 10.+

• Google Chrome

  You can download an Excel checklist HERE, or a sample PDF HERE. The Excel checklist is also included in the exam template found under The Evaluation menu.

 
Try to keep to the standards, right from the beginning!

Continue to The Exercises!