Microsoft Front Page 2002 Photo Gallery - Tutorial

Need Web Help?
Join our

" Photo Gallery
How To "

Galleries

Computer

Sports

Links

Slide shows

Graphic Prog

ScriptFX

Front Page
Flash Tutorials

Photo Gallery - how to customise the Horizontal layout

Horizontal Gallery
Some of this is the same as for the Vertical and Montage layouts, but please read carefully, as it does differ later on.

Open your newly created folder containing the pages Front Page created, thumbnails, larger images and your gallery page (as discussed in the all galleries section). I am assuming your gallery is on a page that already has either text or other graphics, or has used a template, opposed to a blank empty page being used.

The content of your folder should look something like this (some of the icons will probably be different to yours though - and yes, I know I have spelt ballerina wrong! ):

Content of gallery folder

We will be using the real_p.htm file.

Open the real_p.htm. In Folders View, delete the real.htm and the real_x.htm.

In HTML view for the real_p.htm - copy everything between the <body> and </body> tags, but excluding those two tags.

Open up the page you originally inserted the gallery into - in Normal view, you will not see the images now, but just some code saying that the album should be there .... that is normal. Go into HTML view and find code that looks like this (only the file path to the page will be different):

Highlight all that code and paste over the top of it the content you just copied. Save your page.

Now delete the real_p.htm.

You can now edit the gallery from the normal view of your main page, just like you would edit any other aspect of your page.

Table Layout
The horizontal layout has one main table, inside of which is a table for each thumbnail image. That table has two cells, one for the image, then a cell below for the text. The image below shows this layout. The black lines either side are the vertical lines that separate each image.

Horizontal table layout - as seen in normal view

Here is the layout again. This time I have applied a border color to each table, and a bit of cell spacing, so you can see the layout better.

Table layout with borders applied

Careful if you move the thumbnail that you don't lose the hyperlink to your larger image. If you do, then just right click on the image and select "hyperlink".

You need to be aware of the code that is used to make the vertical lines - and how to change it if you want. The next section will deal with that.

Next: Code used in the Horizontal Gallery