template (1) 7

Home
Up
.
 

The Template 

Professional sites have a consistent design throughout the site.  No matter what page you are on, certain graphics and color combinations remain the same.  This establishes an identity for the site and visitors learn to associate the design with the site.  For instance, if you see a page that looks like this:

You immediately recognize it.  Despite the fact that the screen shot above has absolutely no labels identifying what site this page comes from, you (hopefully) immediately recognize it.  (If, for whatever reason you do not, it's a Franklin University page.)

Also note that the page above could be any Franklin University page.  This is because the Webmaster has established a color scheme and design and has applied it throughout the site.  

This kind of consistency is most easily achieved through the use of templates.  A template is one web page that all of the web pages in your site will be based on.  You need only truly "design" the site once and then you simply change the actual content for each individual page.

 

Setting aside room for navigation and banners.

For this site, we will be using a traditional design.  Across the top of the page, we will create a "banner", or identifying mark.  We'll put the navigation links of the left side.  This will act as a frame around the body of each page.

There are two ways of achieving these results.  One is through the use of frames, which we will be discussing later.  The only problem with frames is that some browsers (a very small number of them) will not display them and the page will thus not appear to load.

The method that will work in any browser is the use of tables.  Tables are parts of the page that are divided up into rectangles (known as cells) arranged in columns and rows.  They were originally implemented for use as actual tables - rows and columns of information:

NAME TITLE EXT.
Bowman, Joel Graphic Artist 9024
Grooms, Aran Producer 9123
Etc. Etc. Etc.

 This is still an excellent use for them.  But, as web designers sought to create more interesting designs for sites, they began to come in use for positioning of elements.  Complex invisible tables are commonly used to position elements precisely on a page.  (I used this method to create the image map on this page.)

In our case, we are going to set up invisible tables to position the elements in our template.

Create a table for use in a site template
Working with tables is extremely difficult and tedious in Netscape Editor.  In the workshop environment, I encourage folks to use one of these design templates.  To continue using this tutorial after picking a template, go straight to customizing the table.
Click on the table button ()

A window will open that details the options available for a table:

First, we choose the number of rows and columns for the table.  For our template,

Use 2 rows and 2 columns

Set these properties:

border line width: 1

cell spacing:0 

cell padding:0

Set the table width to 100%

Set the table minimum height to 100%

 

Include Caption will add an additional column to the table.  Do not choose it.

The Table Alignment refers to which side of the page the table will be flush against.

Choose "left"

Finally...

Click "close".

 

You should now have something that looks like this

:

(Don't worry if the colors aren't the same.)

Customize the table for use as a template.

We are going to use the cell on the top right for our banner.

Click inside the cell on the top right.

Change the font style to HEADING 1 using the drop-down font style menu in the upper left corner.

 

Type in the name of your web site:

This is text that will appear at the top of every page.  If you have (or eventually, make) a graphic for the banner, you can put it in here in place of the text.

Now, here is where mapping the site out in advance is going to pay off.  Since you already know what your major categories are going to be, you can create what will eventually be your hyperlinks.

Click in the lower left cell.

Type in the name of your first major category

Press the enter key

Type in the name of your second major category and continue until you have entered all of your major categories:

At this point, we will want to move our banner (web site name) over to the left a bit.  You can do this by resizing the column on the left.

Right-Click on a cell in the left column.

Choose the option Table Properties

The Cell Properties dialog box (shown below) should pop up.  If it doesn't, click the tab marked "cell" at the top of the box.

Change the cell width to 50 pixels.

Save the document.  This is your template, so far...

 

PART 7PART 8

Did you get lost somewhere?

Click here to go to an example page set up in this fashion.  

 

 

 

 

©2000 Harry Knight

Certain elements (software titles, search engine logos, etc.) are copyright and/or trademarks of the respective copyright owners.  Use of this material is restricted to educational use and is intended to promote both further understanding of the intellectual property discussed and, in effect, the product itself.