| Building a Horizontal
Navigation Bar |
|
|
| The next step is to add a way to navigate through the site. For
this project we will use a horizontal navigation bar across the
top. This bar, really a one celled table will be on every page without
taking up much space. We will insert a one celled table after the
top table. Because tables do not like to be side-by-side, this second
table will go beneath the first. Click anywhere in the white space--
this will ensure that the cursor is after the top table and not
inside it. |
Click to enlarge |
|
- Click the Table button on the Insert
toolbar and select 1 row, 1 column, 3 cellpadding, and 770 pixels
wide.
|
Click to enlarge |
|
- The table should go in right underneath the top one. If it
doesn't check to make sure the Alignment on each of the tables
is set to Default.
|
Click to enlarge |
|
- Type in the text for the links seperating each with a space
and the "pipe" (shift-forward slash). Once this is
done select all the text and use the property bar to change
the font size to "2". The text should get smaller.
|
Click to enlarge |
|
- Next add a background color to the table. Select the table
by clicking on its border. When it is selected ti will be highlighted
with a thick black border and little black squares on the right.
Next look at the property bar and notice it has switched to
the table properties.Look for the BgColor box. When the color
chip is selected a palete opens and a color can be selected
or a Hexadecimal color code can be typed in the text box. The
color used here is 9999CC.
|
Click to enlarge |
|
- Now make the nav bar active. Select the first word, look down
in the property tool bar for the Link section. You will see
a wide text box followed by a little round icon and a folder
icon. If the link it to a page within the site the round pointer
is the easiest to use.
|
Click to enlarge |
|
- With the text selected, click and drag the pointer over to
the site window and release it when it is over the page you
want to link to. Dreamweaver writes the proper path in the link
window.
|
Click to enlarge |
|
- Link up the rest of the nav bar. If you have links to other
web sites the adress con be typed or pasted right into the link
text box. Be sure to include the whole URL. For example "http://www.uen.org"
|
Click to enlarge |
|
- Rember these pages you are linking to are all blank, but they
exist so the links can be made. Once this page is designed it
will be turned into to a template that will be used get the
design to all the other pages.
|
Click to enlarge |
|
- In this design this menu needs to be aligned to the right.
Use the Cell's properties to align the contents. Click inside
the cell and then look in the propery bar for the Horizontal
controls, open the menu and select "right". The entire
contents of the cell move to the right.
|
Click to enlarge |
|
- The page should look like this. Be sure to test it in the
browsers.
|
Click to enlarge |
|
| Next: Adding the main content
table |
Click to enlarge |
|
Search 
Site
Map 
