How to Make Kehilalinks Pages

Page Layout and Navigation Menus

Introduction

In this lesson you'll learn more about how to use tables to arrange the content of your pages. You'll also learn about adding a "navigation menu" to your site, to make it easier for people to move from page to page within the site.

The lesson also shows you how to make links and images change when you move the mouse over them. This is optional, but fun.

Introduction
Multicolumn Layout
Side Headings
- More about Side Headings
Layouts Using Layers
Navigation Menus
Simple Animation with JavaScript (Optional)
- Changing Link Colors
  - JavaScript and Internet Explorer
- Changing Images
Assignment

Multicolumn Layout

Using tables, you can divide your page into multiple columns, making the page layout look more like that of a magazine or newspaper. All you have to do to make two columns, for example, is create a table that is 100% of the width of the page and that has one row and two columns. You can have any number of columns this way, but remember that some people have small screens and the more columns there are the more difficult it might be for people to read your page.

Unlike in word processing programs, Composer won't automatically balance the length of your columns as you enter text, so you will have to play a bit to get the columns to come out roughly equal in height. Here I am using a one row, two column table with the vertical alignment for the row set to "top." The table has a cell spacing of 7 pixels. You can, of course, also use images in tables like this. Make sure that the columns are each set to be 50% of the table width.

Side Headings		Instead of always having the headings for a section of text located above the section, you can use tables to put the headings to the side. Here I am using a two row by three column table. The entire table is set to be 100% of the width of the window, with a border of 0 and a cell spacing of 5 pixels.
More about Side Headings		The leftmost cell in each row contains a header and is set to be 20% of the width of the table, the middle cell is there to keep some space between the headers and the rest of the text. I set each of these cells to be 15 pixels wide. The rightmost cells that contain the text automatically occupy all the rest of the space (because the table width is 100% of the window). Note that I set the width of each of the cells separately and did not set the width of an entire column. This is because the column width feature did not work in all of the different browsers that I used to view the page, but setting the width of each cell independently did work. The alignment of the header cells is top, right, so that the headers seem to line up along their right sides. The alignment of the text cells is top, left, so that they line up along their left sides, opposite their headers.

Layouts Using Layers

All of you worked hard to master tables, but SeaMonkey has another way of laying out objects in a page. The method is called "Layers", and it uses the three icons on the far right of the Format Toolbar.

Layers work by making each element -- images or paragraphs or even tables -- a separate, floating item. You can move each layer anyplace on the page you want to, even put them Layer Move Tab

on top of each other, and they will stay that way no matter how the browser window is resized. To make an object into a layer, click on the object (use "Table -> Select -> Table" to select an entire table), then click on the "pushpin" icon (the left-most of the three layer tools). That will make the object into a layer. You can move the object by clicking and dragging a tab that appears above the item. The tab is easy to spot because it has arrows pointing in four directions.

The other two Layer tools are active only when you move the layer on top of other objects. The middle tool puts the layer behind the other objects, while the right-most tool brings the object forward relative to the other objects. I haven't found it very useful to be able to put layers on top of one another (except to make a kind of collage out of images), but layers allow you much more flexibility with regard to page layout than tables do.

Tables, I've found, are often better when I have a lot of material to layout. The table takes care of positioning so all I have to do is insert the material into each cell. Layers are better when I have only a relatively few objects to layout, and when I want to deviate from the "row and cell" format of tables. But if you use layers at all, you have to be sure to put EVERYTHING in layers, even text, and the text should be in fixed size tables. Otherwise, the layered objects will stay in place while the text shifts in different size browser windows! Try making a page using layers and see what I mean.

Navigation Menus

A navigation menu or navigation bar is a collection of links to pages in a web site that are organized in a coherent way and intended to help visitors move from one page to another within the site. You've seen many examples of navigation menus, such as the colorful, pyramidal menu near the top of the Orhei Kehilalinks site (although there is only one page and the links are to locations within the home page) and the dark blue menu on the left side of the Belchatow Kehilalinks site. And, of course, the class template that many of you are using for your pages includes a navigation menu along the left side.

A navigation menu can use text links, as in these examples, or images, as seen on the Horodenka Kehilalinks site. Each of the buttons in the Horodenka site is a separate image.

Very often, the links or buttons in a navigation menu are animated -- they change color as you move the mouse over them or click on them. The Lyubar Kehilalinks site is an example of this. I'll tell you how to do that later in this lesson.

If your site has more than a handful of pages, a navigation menu should be an essential part of your design. It is a really good idea to have the navigation menu be fairly static on all of your pages. For an example of this, look at the Kehilalinks site for Balta. Notice how the consistent navigation menu along the top helps you orient yourself within the site? If it changed on every page you would have no idea how to get around.

Navigation Menu Design

The web "standard" is to have a navigation menu either run along the left side of a page or near the top. You could also put a menu along the right side of a page, but that might be difficult for people to use (and people might not even find the menu if it is on the bottom of the page).

A navigation menu should always include a link to the home page as well as links to the most important pages on the site. In a Kehilalinks site, typically, this will include pages for maps, photos, and other major types of research materials. One goal of a navigation menu should be to minimize the number of clicks it takes for someone to get from any page in your site to another page (a "rule of thumb" is 3 clicks maximum).

Whichever orientation you choose for the navigation menu, try to keep it consistent and fairly static throughout the site. This means that the order of links and their layout should be as consistent as possible as people move from page to page within the site.

Kehilalinks Template

Kehilalinks wants you to use a navigation menu. Take a look, for example, at the Kehilalinks "template" page, at http://kehilalinks.jewishgen.org/documentation/KehilaLinksTemplateSource.html. It has a navigation menu along the left side of the page. You don't have to use the Kehilalinks template, if you don't want to, but it demonstrates what Kehilalinks would like to see in a page.

Using Tables to Create Navigation Menus

For navigation menus along the top of a page you can either just put all of the links in one line of text or use a one-row table. A text menu might look something like this, for example:

Kamen Kashirskiy | Kehilalinks | JewishGen

Or, using a table, it might look like this:

Kamen Kashirskiy

Kehilalinks

JewishGen

(This is just an example of a navigation menu. On your own site you might replace "Kamen Kashirskiy" with "Home" and a link to your index.html page.)

A navigation menu along the side of a page, however, is a little more complicated to make. At a minimum, you'll need to have the entire page in a table with one row and two columns. The column on the left is for the navigation menu and the column on the right is for the page content. In the left column you'll need to insert another table -- this one with just one column and one row for each button of the navigation menu. The class template uses this model.

Try this out yourself. First, make a new page in Composer. (No, really, make a new page and do this, or else you won't be able to try it out and learn something interesting.) Insert a 1 row x 2 column table. Make the table width 100% of the page. Use a border of 1 pixel, cell spacing of 2, and cell padding of 2. Make the left cell (the cell, not the column) exactly 125 pixels wide. That's where you'll insert your navigation menu. The right cell will occupy the rest of the width of the page so we won't specify a width for it. Now, in the left cell, insert another table, this one 3 rows x 1 column. This table will be the menu. In each of the cells of the menu table, insert some text with links. In the empty cell on the right you can insert whatever you feel like. Here's an example of what I mean:

Kamen Kashirskiy

Kehilalinks

JewishGen

This cell is where you will insert the real content of the page. The cell on the left is for the navigation menu, which will appear on every page of the site. But the content of this cell will be different on each page.

Now let's try an experiment: First, make sure your table has no background color (i.e., let the page color show through; don't make it green like I did). Then use the line image below as the page background image:

If you did it right, you should see something like this when your browse the page:

Do you see how the table helped to position the navigation menu over the green bar (which may look blue to you, depending on how your monitor is calibrated) on the left? Do you notice how, when you resize the browser window, the menu over the green bar stays in place, but the contents of the cell on the right automatically adjust?

Here's what it looks like when I set the borders to 0 in both the outer table and the inner table in the left cell:

Navigation menu over green bar -- no border

Web designers frequently use lots of tables inside of tables inside of tables to arrange things on their sites. To see what I mean, here's what the Gesher Galicia SIG home page looked like a while back, with all the zero-width table borders in red:

A 2-column table overlayed on top of the background aligns the navigation buttons on top of the blue bar. Another table aligns the small logo and the title bar image at the top of the page. Additional cells in each table are used to provide constant spacing between elements on the page.

Putting the Same Navigation Menu on Multiple Pages Using a Template

I mentioned before that it is a really good idea to have the navigation menu be static, for the most part, on all of your pages. This means that the order of links and their layout should be as consistent as possible to make it easier for people to navigate around the site. But Composer doesn't make it easy to do this because you have to edit each page individually. That can get tedious if you have a lot of pages. (Other, more advanced and often more costly programs will automatically generate navigation menus for you, but Composer doesn't.)

To simplify the creation of a multi-page site using Composer, first create a page that has the complete navigation menu (as complete as you can make it -- obviously the site will change over time). Call this the "template" page. Then, for each page in your site, start with the template page and save it under a new file name using "File -> Save As...". For example, I could create a "template.html" page in Composer and save it, then open it in Composer again and immediately save it using "File -> Save As..." as "index.html". To add a second page, let's call it "second.html", I again open the template.html page in Composer and immediately save it using "File -> Save As..." as "second.html". Now I have index.html and second.html files that both have the exact same navigation menu, which I can edit without changing the template.html file.

Of course, this method of putting the same menu on each page only works if you know in advance what pages you are going to have so you can create the menu. If you add new pages later, you'll have to fix the menu on every page, one-by-one. There's no easy way around that unless you use a more sophisticated program than Composer.

Navigation Menu Using Images (Optional)

The "buttons" along the left of the Horodenka page are images. Some web page editing programs will create buttons for you, but Composer won't. You'll have to make the images yourself in a different program and then use Composer to insert the images into your web page. In this short course we won't be able to cover how to create button images, but in case you already know or will soon learn how to do that, I'll discuss here how to create navigation menus using images and HTML tables.

The Horodenka buttons are separate images that are kept aligned by putting them inside a table -- each in it's own cell in the same column. The text on each button is part of the image, so each of the buttons is a separate image. (Actually, there are 4 separate images for each button: When you move your mouse over a button, a different image is automatically loaded so it looks like the color of the button changes. We'll learn how to do that later in this lesson.) For this lesson, I made a couple of example buttons (I used Irfanview for this) that I can use to create a navigation menu:

Even with the jazzy red strip, this menu looks a bit plain. It would look better if I added another image as a kind of spacer between the buttons and on the top and bottom of the menu:

Finally, I set the border, spacing and padding all to 0, so the images seem to touch:

The last step is to add links to the two buttons. That's something that you already know how to do, so I don't need to demonstrate it here.

More Kehilalinks Examples of Tables and Navigation Menus

Kehilalinks web masters have used many different styles of navigation menus. You've already seen the Orhei, Balta, and Belchatow sites. Here are some other Kehilalinks pages that have navigation menus and layout tables that you can use for ideas when designing your site:

http://kehilalinks.jewishgen.org/Lyubar/ You've already seen this one, but I wanted to add that it has images next to the text links, not just images or text. Note how there is a page background image that shows in the content area, but some of the table cells have a background color that covers the background image, so the content area is distinct.

http://kehilalinks.jewishgen.org/homyel/ puts everything in a table that has colors distinct from the page background, so it looks like the contents are framed. A thin row and column have a different, dark, background color to separate the title area at the top from the navigation menu on the left from the page content on the right. For some reason, the web designer used images that look like text for the links in the menu, not actual text. Maybe this was to avoid having the links look like links, with underlines and different colors? I also like the use of thumbnail images, which make it easy to see the variety of maps, documents, or pictures, although the links are directly to the image files instead of to pages that contain the images. A very colorful and well-designed site.

http://kehilalinks.jewishgen.org/Vitsyebsk/ is also a very nicely designed site.

http://kehilalinks.jewishgen.org/Kolonja/home.html has a simple navigation menu similar to the one used on the Chynadiyovo site.

http://kehilalinks.jewishgen.org/motol/ has a straightforward, text navigation menu on the left. The menu cell has a different background color than the content, together with a row on the bottom, which helps frame the content.

http://kehilalinks.jewishgen.org/lvovo/ has a navigation menu at the top of each page. One thing that I don't like about this menu, however, is that some of the links are to pages within the same site and other links go outside of the site, but there's no way to tell that before you click on the link. It would be a better design to have a navigation menu for moving around within the site, and a different set of links (in a menu or not) for external links.

Simple Animation with JavaScript (Optional)

This section is not required, but it can add an interesting animated feature to your site.

You've no doubt noticed in many navigation menus that links and images change colors when you move the mouse over them and then change back when you move the mouse away. JavaScript events

This kind of animation in web pages is usually done using a programming language called "JavaScript". If you aren't a programmer then learning how to program in JavaScript can be quite complex but, using Composer, we can easily include enough JavaScript in our web pages to make links and images change colors.

Changing Link Colors

First, let's learn how to change the colors of links when a mouse moves over them. You must follow these steps in the exact order I introduce them here or there is a good chance that this won't work.

Start with some text. Leave the text the default color. We'll change the text color in the last step.

Add a link to the text. It doesn't matter what you link to, but you must have a link on the text for this to work.

In the "Link Properties" window, click on the button that says "Advanced Edit". This will open the "Advanced Property Editor" window. In that window, click on the tab that says "JavaScript Events".

At the bottom of the "JavaScript Events" there is an area marked "Attribute:" and another area marked "Value:". In the "Attribute:" area, choose the "onmouseover" attribute. In the "Value:" area, type exactly what I show you here (including the single quotes):

this.style.color = 'orange'

Now select in the "Attribute:" area the "onmouseout" attribute and in the "Value:" area type this:

this.style.color = 'red'

You can use any colors, including color strings like '#C9D2D7', but you must always use the single quotes.

Click "OK" to close the Advanced Property Editor window and then click "OK" again to close the Link Properties window. Try browsing your page. What happens when you move the mouse over the link? Does it change to orange? What happens when you move the mouse away? Does the link change to red?

The text of the link did not start out red, however, so it looks a little strange that it changes to red after moving the mouse away.

The last step is to make the link text red to start, so it seems to change back and forth between red and orange as the mouse moves over it. To do that, once more open the Advanced Property Editor windows for the link and click on the "Inline Style" tab. In the "Property:" area, type "color" (without the quotes). In the "Value: area, type "red" (without the quotes). Then click "OK" to save the value. (Note: No single quotes here.)

Browse the page in SeaMonkey. The result should look something like this: JewishGen. Does it change colors when you mouse over it?

Try viewing the page in different browsers to see if it works everywhere. I expect it to (with one caveat about Internet Explorer; see below), but please let me know if you find a browser where it doesn't!

JavaScript and Internet Explorer

If you try opening your practice page that has the color-changing link in Internet Explorer, you might notice that Internet Explorer gives you a warning, saying that it has blocked "scripts or ActiveX controls" in the page. It is warning you about the JavaScript. Although some scripts can be dangerous, ours isn't, but Internet Explorer has in the past been so vulnerable to attacks that Microsoft is taking no chances. You won't be able to see the color change in Internet Explorer unless you click on the warning and choose "Allow Blocked Content".

Changing Images

Changing images when you move the mouse over them is a little bit more complicated than changing the color in links, but here's how to do it.

First, start with two images that are in the same folder as the page you are editing. Here I have two image files, "clickhere1.gif" and "clickhere2.gif". Note that the only differences between the two are their file names and the color of the text (and some dots). click here 1

"Clickhere1.gif" will be the "default" image. "Clickhere2.gif" will be the image that shows when I move the mouse over the button.

My first step is to insert "clickhere1.gif" into my page. In the image properties window I then click on the "Advanced Edit" button. In the "Advanced Property Editor" window, I click on the "HTML Attributes" tab, choose the attribute "name", and type a name for the button (here, I used the value "button").

Next, I click on the "JavaScript Events" tab. As I did for changing the color of the link, I select the "onmouseover" attribute, but this time I give it the following value (note the single quotes, which must be there):

document.button.src='clickhere2.gif'

Did you notice how the name "button" is part of this value? That's the name value I chose in the "HTML Attributes" tab. If I had chosen a different name, like "abc", for example, the value for the onmouseover button would have been "document.abc.src='clickhere2.gif'". If I have more than one button in my web page, they can't all have the same name, so I must give them different names (like "button1", "button2", "button3", etc.). In this example, however, there is only one button.

Then I select the "onmouseout" attribute and give it the following value (remember to include the single quotes):

document.button.src='clickhere1.gif'

The result looks like this (mouse over the button):

. (You might also notice that I put a link to Kehilalinks on the image.) Do you see how the text color changes (and dots appear) when you move the mouse over the image? That's the web browser swapping one image for the other.

Now try this out yourself. You can copy and use my example buttons, or pick any two images that are the same size. The second image will occupy the same space as the first when you move the mouse over the image, so you can't use a larger image. For example, mouse over this button to see what happens when I use the larger green box as the second image:

See how it gets squished into the space occupied by the "click here" button? Now mouse over the next button to see what happens when I use the single red pixel as the second image:

The tiny red pixel is expanded so it fits the space occupied by the "click here" button. It's a Procrustean bed!

If you want to have more than one button that changes, the key thing is that the "name" attribute identifies one specific button. If you have multiple buttons then you'll need to give each of them a different name and use that name in the values for the "onmouseover" and "onmouseout" attributes. For example, if I create another button, I could name it "button2". Then the values for the onmouseout and onmouseover attributes for that button would be
document.button2.src='clickhere1.gif' and document.button2.src='clickhere2.gif'.

Assignment

A navigation menu is one of the requirements for Kehilalinks sites. If you are using the class template, you already have a navigation menu. Make sure it has working links to the other pages on your site. If you haven't included the navigation menu on the other pages, add it so that people can easily move around your site.

If you are not using the class template, add a navigation menu to your site. You can make it a simple text navigation bar near the top of the page or, if you are ambitious, a table navigation menu along the left side. If there's only one or two pages in your site, you don't have to to anything fancy, but at least make a navigation menu that links to JewishGen and Kehilalinks.

Extra credit: make the links (or buttons) in the navigation menu change color when you move the mouse over them! You can see what I did in kc-9.html.

Top of the page

Back to the Course Outline