| ESU 10 Home > Network and Information Services > nis.esu10.org/teachers | November 22, 2008 |
Photo Gallery Options
Using Tables for a Photo Gallery
In this example, I have used tables to organize the layout of the photo gallery. A note before you start your gallery - Before uploading the pictures, make sure they are all the same dimensions. For example, all the pictures used in this gallery are 175 pixels tall by 175 pixels wide. This adds consistency and makes the page look cohesive.
1) Prepare your pictures for the web - save as jpg or gif, consider dimensions, consider file size.
2) Upload your images to the Pictures Editor's Only menu in Manila.
3) Create a new story for your photo gallery.
4) Create tables depending on how many photos you have. You may want 2x2 tables as I have created in the example below or 3x2 if you want 3 photos across. Use separate tables for each row of pictures. This will help visually with page layout and organization of the pictures and captions. Add the picture shortcuts and captions to the tables. Do any other modifications such as centering the pictures and text within each cell and centering the tables on the page.
5) Post your changes.
Editing Process:
Final Result:
Other hints to consider when creating a web photo gallery.
Removing a table border
Sometimes you don≠t want the border to show on the table. To do this you will need to enter the html source code view. This is sometimes a little scary, especially if you have never looked at it. I use a trick to help me locate information within source code. Try entering in text that will help you recognize where in the code you need something changed. For example, I will type a row of x's across the editing page so I know when I read the code to look for the x's.
Next, click on the "View HTML Source" option in the lower left corner of the editing window. In this view, you should be able to locate the x's you typed earlier. This tells us where the beginning of the table starts. If you read a little beyond the x's, you will see a section that starts with "<table". Shortly after this, you will read border="1". If you change this to border="0", this will remove the border of the table.
The last step is MAKE SURE you uncheck the "View HTML Source" option before posting your changes!!! If you don≠t do this step, you will end up posting the source code as your web page and not the contents you intended.
Adding a horizontal rule
A horizontal rule is just a line divider that spans the web page. It is a nice feature to use when you need to separate the page content. The process is a lot like removing the border of a table. You will need to dive in to the code to add a horizontal rule in Manila.In the Manila editor, enter in a series of x≠s where you want your horizontal rule to appear. Check the "View HTML Source" box and look for the x's. Replace the series of x's with "<hr>" without the quotes. Some other options you may want to try for the hr tag:
<hr color="blue"> - changes the line color to blue.
<hr color="blue" width="400> - forces the line to a width of 400 pixels across the page.
<hr color="blue" align="center" width="400"> - centers the line.
<hr color="blue" align="center" width="75%"> - create a dynamic line length of 75% of the width of the web page window.
Photo text wrapping
You may want to insert a photo on your page and have text wrap around either the left side of the picture or the right side.
In the Manila editing window, type:
{pictureRef("imagename", align:right)}
Other variables you can add to this macro are the horizontal space and vertical space options. The text or content of the page will often butt right up next to the photo and it would be nice to have some white space between these. Use the following to add 10 pixels of white space around the whole image:
{pictureRef("imagename", align:right, hspace:20, vspace:20)}
Copyright © 2008 manilaSupport
Last updated on Friday, October 6, 2006 at 10:37:15 AM
webmaster@esu10.org