Computer Tutorial

                                     How to Add the Menu to the Side Bar

1. Start up Dreamweaver and load your home page as before.
2. Click "Insert | Spry | Spry Menu Bar" from the menu. That is, click the "Insert" menu, followed by the "Spry" item in the menu that appears, and then the "Spry Menu Bar" item in the submenu that appears.
3. A dialog box, entitled "Spry Menu Bar", will appear. Since you're creating a menu bar for your side column, and want the menu items to appear one after the other vertically, select the "Vertical" item and click "OK".
4. Dreamweaver CS4 inserts a default menu bar into your site column with some dummy content. The menu has four items. Items 2 and 4 are normal menu items, while items 1 and 3 have sub-menus: notice that there is a small right arrow on the buttons for items 1 and 3. In an actual browser, hovering your mouse over item 1 and 3 will expand the submenus. (It won't expand in Dreamweaver, since the latter is an editor, not a real browser.

 5.Notice that there are 3 list boxes in the middle of the panel. The first list box contains "Item 1",  "Item 2", "Item 3" and "Item 4". Theses are the 4 buttons that you see in your web page. At present, "Item 1" is selected. Since "Item 1" is a button with submenus, the second listbox is populated with the items in the submenu, namely, "Item 1.1", "Item 1.2" and "Item 1.3".

If you were to click on "Item 2" in the first list box, you'll notice that the second listbox becomes empty. This is because the menu button "Item 2" does not have a submenu. Now click "Item 3". The 2nd listbox is filled with that button's submenus. Click "Item 3.1" in the 2nd listbox. Notice that the 3rd listbox is now filled with two items "Item 3.1.1" and "Item 3.1.2". In your main Dreamweaver window, you should be able to see that Dreamweaver has expanded the button menu to show the first level submenu so that you have an idea of how your menus appear visually on your web page.

6.Click "Item 1" in the first list box in the PROPERTIES panel. The first item in a navigation bar is typically the link to the website's home page. Since we will not be needing submenus for this button, we will delete them. To do this, click "Item 1.1" in the second list box. Notice that directly above "Item 1.1", the "-" (minus) sign, beside the existing "+" (plus) sign, is now shown in bold.As you may have guessed, clicking the minus ("-") sign will delete the item you've highlighted, while clicking the plus ("+") sign will add a new one. Click the minus sign now.You should now have two empty listboxes next to the still-populated first one.

7.To the right of the 3 list boxes, you should be able to see a few fields. The "Text" field contains the words that you want displayed on the button. It should currently say "Item 1". Change it to "Home" (without the quotation marks).Click the "Link" field, which currently contains a hash ("#") mark. Notice in the window above, that your menu bar now shows "Home" for its topmost button.

                                                                                                             Put the address of your website's main page in this "Link" field. if you used an absolute URL like "http://www.example.com/" for your site logo link, use the same thing here. If you used a relative URL like "index.html" for that link, put "index.html" (without the quotes) here.

8. Depending on how you set the background colours of your side bar.you may find that the background colour of your left column ends midway in the window, compared to the right column. That is, it doesn't go down all the way to the footer. One way of dealing with this is to add blank lines after your menu bar (just click the blank space below the menu and keep hitting the ENTER key).  make the left column have the same background colour as the main content area.

9. Click "File | Save". A dialog box called "Copy Dependent Files" will appear, asking you for permission to copy the files needed by the Spry navigation menu to your website folder. Click "OK". Dreamweaver will then create a new folder ("SpryAssets") in your website's directory that contains the support code for the menu.