Tip sheets | Glossary | Home | Contents

Designing and creating a website
3. Designing a template - layout and tables

2 hours

 

Your planning is the foundation of your website and the template is the building block of your website. Each file that you include on your site should have the same appearance and basic navigation links. You will create such a template file and subsequently re-use it and rename it as you create every other file on your website. In this way all your web pages will have the same design and functions.

The purpose of this activity is to create your layout for your web pages.

 

Follow these steps to complete these activities. Look for contexts that are meaningful to you in your classroom.

 

 
Action
Resources
1

Work on your own (30 minutes)

Each page on your website should look similar in design and layout so that the site as a whole has an identity.

  • Design the outline of a template page. Use a pencil and paper or use the drawing tool in the word processor.
  • Decide on the page layout remembering to include consistent text graphics, navigation, menus, and sub-menu structures.
  • Make space for the major graphic elements

 

 

What is a template?

 

The basic requirements for a template page.

The graphic elements of a website.

2

Work in pairs (15 minutes)

  • Share your rough plans of a page layout with your partner and give each other feedback.

 

 
3

Work on your own (75 minutes)

A template such as this is typically made of a page with a number of tables. The table border setting is '0', so that the lines are invisible.

  • Present these on a Web page.
  • Be sure to include the main elements of the page i.e. a place for a page heading, menus, and text.

 

How to use tables to create a layout.

How to work with tables

Changing table borders

Formatting cells

How to change text attributes (text and link colour)

 

4

Save your template page regularly. Name the file template.htm

 

How to save a file

Recommended next activity:

Activity 4: Designing a template - graphic identity

 

   
Home | Contents