I use an index on every page of my site to make navigation easier. I also include a site index where every page is listed. This way a user may jump to any page that isn't in the index. I can copy and paste this index into any new page I create. What follows is a description of how I made this index.

Skip ahead to the page on Creating Links for an example of how to make a simpler index.

Home

About

Projects

Calendar

Sponsors

Links

Site Index

Contact

Start the index by positioning the cursor where you want your index to be. Then create a new table by clicking the Table  icon in the tool bar. The New Table Properties window will pop up. For this index I used eight rows and one column. You can always add or delete rows and columns as needed later.

I set the Border line width, Cell spacing, and Cell padding to zero. I did this because I didn't want a box around my index, and I didn't want extra space around the links I will put in it. Also, I plan to use an image as a background for each link so that they look like little buttons.

Your new table should look like this:

Now you are ready to adjust the properties of your new table to fit the index you want to put in it. First, add some text to the top cell. I typed in "Home" to use as a link back to the home, or index page.

 

Note: sometimes it is easier to use your arrow keys rather than the mouse in Composer to position your cursor where you need it, particularly when you are using a table.

Next, right click on the cell containing the text you just typed, select Table Properties and click the Cell tab.

I set the Cell width to 100 pixels and the Cell height to 25 pixels, which is the same size as the button image I want to use for the background. Note that I had to tell Composer to use pixels for the height and width settings. This is done by clicking the little arrow to the right of the settings and selecting "pixels." I also set the Horizontal and Vertical Alignment to Center so that the text will be centered inside each cell.

Now, I am ready to put in a background image . . . click the Choose Image... button. Another window will pop up like this:

The image I want is called "button_no_title_tan.jpg." Click Open to choose the image. The Table Properties window will come back into view. I selected "Leave the image at the original location" because I keep images in my "images" folder and web pages in another.

Your table should now look like this (assuming you used the same image I did . . . here is that image, in case you want it:  Right click on the image and select Save Image as...)

Add text to the other cells for each page you want listed in your index and follow the same steps to put in a background image.

It turns out that there are many ways to make an index that looks just like the one I made. For example, you could use a single image and an image map to link all the pages to your index. I did this on the Creating Web Pages on KORRnet page (http://www.korrnet.org/chic), it's the horizontal menu bar on the top and bottom of each page. You could also create a separate image for each link, with text as part of the image. I chose to show you how to do it this way because it is more flexible. That is, you don't have to create a special image for an image map or for each button with text on it.

If you ever want to add a new link to your index, all you need to do is insert another row in your index table and set the properties like you did above - no new images to mess with.

For example, suppose I decided to insert a link to a new page for my organization's newsletter. I want to put it just after the Calendar link. Right Click on "Calendar" and select Insert and Row.

And, your new index will look like this:

Copying and Pasting a Table

Moving your index can be . . . quirky, thanks to some of the idiosyncrasies of Composer. Generally, I avoid moving, copying, or pasting tables like this index because Composer has trouble recognizing what it is that you want to do. I usually create a table right where I want it to stay. However, I have discovered an easy way to get around this problem.

Suppose I want to move a copy of my index table elsewhere. I discovered that if you place some text above and below a table before you highlight it, it will copy just fine. 

For example, I put a single character above and below this index, then I highlighted it using the arrow keys (hold down the Shift key and use the arrow keys to highlight the text and table):

I can now copy or cut this table and paste it wherever I need it. (Copy by clicking Edit and selecting Copy . . . alternatively, hold down the Ctrl Key and press the letter C. To paste the table, position your cursor where you want the table, click Edit, and select Paste . . . or hold down the Ctrl Key and press the letter V.)

Positioning the Table

The index on this page is aligned to the right side of the cell that contains it. I did this by right clicking the index table, choosing Table Properties, and selecting the Right button under Table Alignment.

I wasn't sure where to include this in the instructions for this site, so here it is:

Adjusting a Table's Column Size

Sometimes a column in a table just won't keep the dimensions you want it to have. I discovered that I can insert an image that is either invisible (you need a photo editing program to create one of these), or the same color as the background you are using for your page. Just below the the index table that is on all the pages of this site, I inserted an transparent image, called "invisible.GIF." 

You can see this image if you highlight the area around the index by dragging your cursor across it (while the page is open in Composer).

"invisible.GIF" is the black line highlighted at the bottom of the index. The image is just wide enough to insure that the column it is in will be the right width for the index and logo image that I put in it. 

You can modify this image to suit your own needs using the Paint program that comes with Windows. Here's an example:

I opened the "invisible.GIF" file in Paint. 

Click Image and select Attributes...

Now you can resize the image. Note that I checked the Use Transparent background color box.

I reset the image to a width of 200 pixels. So, it looks like this now:

Now, you'll need to change the color of the added area to match the original. Do this by using the Pick Color tool to sample the gray area in the image.

Use the Fill With Color tool to fill in the added white area.

Save the new image and use it wherever you need to set a column width.

An Extra Horizontal Index

Some people like a second index at the bottom of their pages, which isn't something I chose to do for this site. However, here is a sample index using a table and the background image as the other index:
 

Home

About

Projects

Calendar

Sponsors

Links

Site Index

Contact

Right click on the table to see how it is constructed.

Please go on to the next topic  Creating Links