Web: Creating Interactive Navigation

You can use Macromedia Dreamweaver to write the Javascript required to create interactive web navigation, or what is commonly called a rollover.

A. Create the images:

1. Using Photoshop or any other graphic editor
2. Create 3 versions of each button
3. all images must be exactly the same size
   • up state (normal button)
   • over state (highlight when cursor moves over)
   • down state (depressed or activated button)
4. Save all buttons in a folder called images or buttons
   • place this folder in a folder for local web work

Naming conventions: for ease of use with Dreamweaver, name your files

buttonU.jpg or button1.jpg (up version)

buttonO.jpg or button2.jpg (over version)

buttonD.jpg or button3.jpg (down version)

obviously the word button should be a more descriptive name when you do it!

B. Set up Dreamweaver's Local Root Folder:

1. Open Dreamweaver
2. Site menu: New site: Local Info Category
   • Site name: something you recognize
   • Local Root Folder: browse to your local web work folder
     • this should be the folder containing your button images
   • Click Choose (MAC) or click Open and then Select (WIN)
3. Click OK
4. File menu: Save
   • name the first file in any directory index.html
   • be sure it saves the file in your Local Root Folder

Dreamweaver works best if you work on all web files locally, in a folder (or set of folders) containing all of the files required for your website.

Dreamweaver can help you manage your files and the links between them if you first define a site, telling it where the local folder is, and where it should upload the files on the web server once you publish them.

C. Create a Navigation Bar:

1. Insert menu: Navigation Bar
2. Element Name: name the button
3. Up Image: browse to the button images folder
   • double-click the up version of your button
4. Over Image: browse to the button images folder
   • double-click the over version of your button
5. Down Image: browse to the button images folder
   • double-click the down version of your button
6. When Clicked go to URL:
   • type in the URL for your button, or browse to a local file
7. Options: (checked)
   • Preload Images
   • Show "Down Image" Initially
     only one button on each page should have this selected
8. Insert: (choose an orientation)
   • Horizontally or Vertically
9. Click the + button to add an element
   • repeat the process from the Element Name step until all of your buttons have been added
10. To change the order of your buttons
    • click on the element name at the top press the up or down arrows to shift the order
11. Click OK

The Element Name is just so that you know which button you are programming. It is used in the Javascripting, but doesn't actually show up in the page.

An asterisk next to the name of an element indicates it will initially load in the "Down" image version. For each page you create with your navigation bar, be sure the appropriate button is "pressed" so that your viewer will know where they are in relation to the navigation bar.

Preloading the images helps prevent the buttons from appearing to be broken when a user rolls over them before they have finished loading.

D. To modify a Navigation Bar:

1. Click once on the Navigation Bar to select it
2. Modify menu: Navigation Bar
3. Make changes as specified in the last step
4. Click OK

Only one Navigation Bar can exist on each page, but changes and adjustments can be made after you've inserted a Navigation Bar by modifying it.

E. Preview your work:

1. Press the F12 key or
2. File menu: Preview in Browser
   • select a browser from the list

The Javascript doesn't function within Dreamweaver, to see how it works you must preview it in a Browser. For good web development, check your work on both platforms and in both Netscape and Internet Explorer.

F. Set up Dreamweaver to publish:

1. Site menu: Define sites:
   • double-click the site name
2. Under Category, click Remote Info
   • Server Access : FTP
   • FTP Host: abacus.bates.edu
   • Host Directory: public_html
   • Login: abacus username
   • Be sure to choose SFTP for connection
   • DO NOT ENTER YOUR PASSWORD YET!
3. Ignore the rest of the dialog box
4. Click OK

This step assumes you will be publishing to your personal space on abacus, and that you've already set up your public_html directory.

G. Publish your web pages:

1. Site menu: Put:
   • enter your abacus password
2. This will upload the file you are working on
   • you will be prompted to save it if necessary
3. For additional files:
4. Window menu: Site Files:
5. Click on the filename on the right side of the window
   • click the Put button at the top of the window
6. OR click and drag the file on the right to a folder on the left
   • right side is local files, left side is remote (web server)
7. Site menu: Disconnect:
   • when you are finished uploading files
   • disconnect is automatic after 30 minutes of inactivity

Dreamweaver automatically sets the permissions for everyone to view your files.

After you've uploaded your webpages, your URL will be: www.bates.edu/~username for example www.bates.edu/~hpotter

For good web development, be sure to check your live pages on both platforms and in both Firefox and Internet Explorer.