For this tutorial, I used Dreamweaver. If you use a different html or text editor, you will still be able to follow the steps in this tutorial. This tutorial will teach you how to build a gallery template that can be used over and over again to promote more than one site and sponsor.

For this tutorial, we are going to create a basic gallery template that will consist of a header, 16 thumbs, and 3 areas for text / ads / links to sponsor. This is what the template will look like when it is complete. template

Part 2 of this tutorial will explain how to take this gallery template and create a gallery that looks like this: completed gallery

At the end of the tutorial will be examples of galleries that use the exact same template, but promote different sites.

Rough Draft:

As you can see, the gallery will have 4 thumbs across and 9 rows. The thumbs will be 165 pixels wide and 180 pixels high. Row1: Reserved for the header (Some people use this space for an ad) Row2: First row of thumbs (4 thumbs) Row3: Second row of thumbs (2 thumbs) Row4: Text/Ad/Sponsor link Row5: Third row of thumbs (4 thumbs) Row6: Fourth row of thumbs (2 thumbs) Row7: Text/Ad/Sponsor link Row8: Fifth row of thumbs (4 thumbs) Row9: Text/Ad/Sponsor link

(The following steps are color coded for easy reference)

Step 1: Create New Template Open up DW.
Go to File/New/Blank Page/ HTML/ then click CREATE.

Step 2: Insert Main Table (grey)
This table will serve as a container to hold the rest of your gallery contents. The table will be centered, 760 pixels wide, 1 row, 1 column, with a cell pad of 6.

Go to Insert/Table. A window will appear. Fill in the following attributes:
1 row
1 column
760 pixels wide
Cell pad: 6
Cell space: 0
Border: 0



In your Properties panel:
Center the table
Bg color: #CCCCCC


The reason why you want to use a table that is 760 pixels wide and centered, is because it will fit nicely into any size resolution without causing a horizontal scroll. Some reviewers still review galleries at 800x600.

Step 3: Insert Second Table (pink)
This table will be inserted into the first table, (the container), you just created. The table will be centered, 750 pixels wide, consist of 9 rows, 4 columns, with a cell pad of 5.

Go to Insert/Table. A window will appear. Fill in the following attributes:

9 rows
4 columns
750 pixels wide
Cell pad: 5
Cell space: 0
Border: 0

In your Properties panel:
Center the table
Bg color: #FFAED7

By inserting a 750 pixel wide table into a 760 wide main table, you still have plenty of room to add content, spacing so the thumbs aren't squished together, and room for a nice border effect around the gallery.

For this gallery, I chose to use 4 thumbs across that are 165 pixels wide. Divide 750/4 = 187.5. What this number tells you, is that the thumbs can be a maximum of 187 pixels wide. Any larger than that, you will cause the table to expand and potentially mess up the alignment and/or cause a horizontal scroll.

You also want to factor in for spacing between the thumbs and a border around the thumbs. You don't want your gallery to look like the content is all scrunched together, nor do you want the alignment to be off.

The height of the thumbs can be any size you choose. You don't want to make them too long. You don't want to make your surfers scroll too far down the page when the rest of your content is added. The thumbnails are just that - thumbnails. Not full size images.

Step 4: Insert Header (light purple)

This Step will be using the image named header.jpg in the zip file.

You may create your own image as a placeholder or create an image placeholder right inside DW.
(Insert/Image Objects/Image Placeholder - Fill in attributes. Name, width 740 pixels, height 100 pixels, color)

*Your header should not be any wider than 750 pixels and no higher than 150 pixels max.* If you make your header too wide, it will push your gallery out of alignment. If you make your header to high, (too thick), it will push your content that much farther down the page.

Before you can add an image, you must clear the row. Basically you are making this row all one cell.

Click on Row 1, Column 1

Right click. A window will appear. Table/Select Table/Increase Column Span

Repeat until entire row is clear.



To insert the header:
Go to Insert/Image (select the image from folder, desktop, or drive)

In the Properties panel:
center header
align: absolute bottom

Step 5: Insert Thumbs - Row 2 (light blue)
This Step will be using the image named thumb165x180.jpg in the zip file.

You may create your own image as a placeholder or create an image placeholder right inside DW.
(Insert/Image Objects/Image Placeholder - Fill in attributes. Name, width 165 pixels, height 180 pixels, color)

Click on Row 2, Column 1
Insert/Image (select the image from folder, desktop, or drive)

Click on Row 2, Column 2
Insert/Image (select the image from folder, desktop, or drive)

Repeat until all 4 columns are filled

Select all thumbs and center them

Step 6: Insert Thumbs - Row 3 (light blue)
This Step uses the same thumbnail image as Step 5.

Click on Row 3, Column 2
Insert/Image (select the image from folder, desktop, or drive)

Click on Row 3, Column 3
Insert/Image (select the image from folder, desktop, or drive)

Repeat until all 4 columns are filled

Select all thumbs and center them

Step 7: Add Text/Ad/Sponsor Link - Row 4 (light yellow)
In this Step, we will be added a table to hold text/ad/sponsor link. The row must be cleared just like Step 4.

Click on Row 4, Column 1

Right click. A window will appear. Table/Select Table/Increase Column Span

Repeat until entire row is clear

Add table:

Click on Row 4.
Go to Insert/Table. A window will appear. Fill in the following attributes:

1 Row
1 Column
Width: 740 pixels
Border: 0
Cell padding: 5
Cell space: 0

Properties panel:
Center table
Bg color: #FFFFC6

Step 8: Insert Thumbs - Row 5 (light blue)

Click on Row 5, Column 1

Repeat Step 5

Step 9: Insert Thumbs - Row 6 (light blue)

Click on Row 6, Column 2

Repeat Step 6

Step 10: Add Text/Ad/Sponsor Link - Row 7 (light yellow)

Click on Row 7, Column 1

Repeat Step 7

Step 11: Insert Thumbs - Row 8 (light blue)

Click on Row 8, Column 1

Repeat Step 5

Step 12: Add Text/Ad/Sponsor Link - Row 9 (light yellow)

Click on Row 9, Column 1

Repeat Step 7

Step 13: Save Template
File/Save As/
(I name templates like this: template01-760-16.html. What this tells me is that it is template #1, it is 760 pixels wide, and uses 16 thumbs.) You can choose to name your templates however you wish.