Navigation Buttons:
Image Buttons, CSS Buttons, Hotspots, Spry Nav

By Floyd Jay Winters 03/01/2011, last update 10/04/2012

Expression Web Interactive Navigation Buttons - Images
Dreamweaver Rollover Images for Navigation - Images
Expression Web Rollover Images for Navigation - "Swap" Images
Pure CSS Nav Buttons - no images used, so quicker to load, easier to modify
Dreamweaver Spry Navigation - CSS - allows dropdown menus
Alternative and simple Dropdown Navigation using <select> and <option> tags
PhotoShop Navigation Buttons using Layers - Images - create your own button images
Hotspots - Images - create custom images that allow you to click on areas that become links
Neat Nav Button Generator: http://www.buttongenerator.com/

Expression Web Interactive Navigation Buttons - Images

Position your cursor in your Nav div on your Web page.
Insert > Interactive Button

From the Button tab:
1. Select the button style from the Buttons: dialog box
2. Enter the button text in the Text: dialog box
3. Click the [Browse] button to browse the page to link to

From the Font tab:
1. Set the desired Font andFont-Size
2. Set the desired Font colors for each rollover event: Original, Hover, Pressed

From the Image tab:
1. Set your desired Height and Width

Type out these style, font and color settings and save them as buttonSettings.txt in the images/bottons/ subfolder.

When you save your Web page, EW will prompt you to save the newly created images. At this time, if you click on each of the button names one at a time, you can click the [Rename] button and give them appropriate names like HomeOn, HomeOff...
Also at this time, it is strongly suggested that you click the [Change Folder] button browse to your images folder, click the yellow Create New Folder icon, can create a subfolder called buttons.

When done click [OK] and Expression Web will add a rollover script in the head tag, and preload code to the body tag, and rollover code in your Nav div.

If I did not click [Rename] above, afterwards, I will go to the images/buttons folder and rename each of the images appropriately. For example: instead of button1, button2, and button3, I'll rename them HomeHover, HomeOn, HomeOff, ContactHover, ContactOn, ContactOff... Then I'll edit the source code of my Web page and replace each reference to button1 with HomeHover, button2 with HomeOn...

Below are examples of Expression Web Interactive Buttons (Style: Corporate 5)
Home Resume
OR Neat Nav Button Generator: http://www.buttongenerator.com/

Dreamweaver Rollover Buttons - Images

Position your cursor in your Nav div on your Web page.
1. Insert > Image Objects > Rollover Image
2. Enter the name your image(s), such as btnHome, btnContact - this will be the id for the button.
3. Click [Browse] to find the Original image (such as HomeOff.jpg) (I often create these button images in PhotoShop)
4. Click [Browse] to find the Rollover image (HomeOn.jpg)
5. Enter to Alt text, such as Home
6. Enter the URL, such as index.htm
7. When done click OK and Dreamweaver will add rollover script in the head and preload code to the body tag, and rollover code in your Nav div.
 

Expression Web Rollover Buttons - "Swap" Images

Swap Images (Rollover)
1. Insert a picture: Browse to find the Original image (such as HomeOff.jpg) (I often create these button images in PhotoShop)
2. Select the picture
A. in the Behaviors task pane (lower right hand corner) click on the [Insert] button or [Insert] dropdown.
    (If you cannot see the Behaviors task pane, choose Panels and select Behaviors)
B. choose Swap Image from the drop down and choose the new image to replace the initial image for "onmouseover".
C. Besure to click the "Restore on Mouseout event" checkbox
OR

1. Select the picture
B. in the Behaviors task pane click on the Insert button
C. choose Swap Image Restore from the drop down restore the initial image for "onmouseout".
To make it a working hyperlink: in the Behaviors task pane select the onmouseover event image, then click on the Insert button,then choose Go to URL and enter the link address.
 

Dreamweaver Spry Navigation - CSS

Allows dropdown menus

Position your cursor in your Nav div on your Web page.
1. Insert > Spry > Spry Menu Bar
2. Select Horizontal or Vertical and Dreamweaver will create your Spry script and code.
The following will be inserted between the <head> tags:
<script src="../SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="../SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
3. In code view, edit Item 1 to read Home, and edit Item 2 to read ...
4. Edit the SpryAssets/SpryMenuBarHorizontal.css to customize your styles.

See eBook-Springer/DreamweaverCS4/Powers06CSSnav.pdf for a chapter on DreamWeaver Spry Navigation.

Below is a Spry Menu Bar:
 

Alternative simple Dropdown Navigation using <select> and <option> tags

<form name="Drop">
  <select style="color:#069" name="menu" onChange="window.open(document.Drop.menu.options [document.Drop.menu.selectedIndex].value);">
    <option value="http://scf.edu">
SCF</option>
    <option value="http://msn.com">
MSN</option>
    <option value="http://ibm.com">
IBM</option>
  </select>
</form>

<select onchange="if(selectedIndex != 0) location = options[selectedIndex].value;">
     <option value="">
-- Select One --</option>
     <option value="http://scf.edu">
SCF</option>
     <option value="http://msn.com">
MSN</option>
     <option value="http://ibm.com">
IBM</option>
</select>

 

Pure CSS Navigation Buttons

Put the code below in the <head>
<style type="text/css">
#top_nav {width:300px; border-top: 3px solid #31588A; border-bottom: 3px solid #31588A; background-color: #CCEAFF; text-align:center; margin:auto;}

#top_nav ul {margin:auto; padding:0px; line-height:52px; white-space:nowrap;}

#top_nav li {list-style-type:none; display:inline;}

#top_nav a {border:6px outset #CCEAFF; color:#003366; background-color: #CCEAFF; text-decoration:none; font-family:Georgia, "Times New Roman", Times, serif; font-weight:bold; margin:1px; padding:4px 20px;}

#top_nav a:hover {border:6px outset #CCEAFF; color:#C7EAFB; background-color: #003366;}
</style>

Put the code below in the <body>
<div id="top_nav">
<ul>
<li><a href="index.htm">
Home</a></li>
<li><a href="resume.htm">
Resume</a></li>
</ul>
</div>

Pure CSS buttons are much quicker to load than images, and they allow the Web programmer to very quickly add or delete or modify existing Navigation buttons.

The buttons below are pure CSS using the code shown above.
Note: They may look different in different browsers; so be sure to test.
 

Photoshop Nav Button Directions - Images

    Create your blank OFF button:
1. File > New > Width 125 x 75px
2. Select two complimentary colors in the square Color Picker tool
    on the bottom of the toolbox (two different overlapping colored squares)
    Double-click a square to select and change its color
3. Click the small triangle on the bottom right corner on the Paint Bucket tool
4. Choose the Gradient Tool
5. Draw a line from the top to the bottom of your button blank to create a gradient effect
6. Right-click the layer in the layers panel, located in lower right corner of screen
7. Choose Duplicate layer from the pop-up menu
8. Double-click the duplicate layer name and name it ButtonOffBlank
9. Right click the new duplicate layer and choose Blending Options
10. Under the Styles section - click Bevel and Emboss

    Add Text to the button
11. Click the Text Tool, select the desired font, size and color from the top menu
    and then use the Text Tool to type the word Home on your button
12. Right-click the new Home Text layer and choose Duplicate layer
13. Double-click the new duplicated layer name and name it Resume
14. Click the eye located before the Home Text layer and toggle it off
15. Double-click the [T] in the Resume layer and type Resume in the text area of the newer button
16. Repeat for your Portfolio and your Contact page.

    Create your blank ON button
17. You can create another layer and this time draw with the gradient tool from the bottom to the top
18. Name the new layer ButtonOnBlank
19. Repeat the the steps above to create the On or Hover or Selected buttons.
20. Turn on the eye for the Home layer and the ButtonOffBlank layer.
    Turn off all the other layer Eyes.

    Save your individual buttons as .gifs and also save the .psd file
21. File > Save for Web and Devices and name the new button HomeOff.gif
(I'll name them HomeOff, HomeOver, HomeOn - the order of how they appear)
22. Repeat the steps above to save your other buttons.
23. Choose File > Save As and name the PSD file buttons.psd
so that you can easily change your buttons if you want to in the future.
 

Hotspots - Images

A Hotspot is an area on an image that a user can click on to launch a hyperlink.
Hotspots work with an Image Maps to map the x y coordinates on an image that become the hotspot.

    Expression Web: Insert a picture.
  • Select the picture > View > Toolbars > Pictures >
  • Click on Rectangular or Circle or Poly icon on the right on the toolbar and draw the desired shape over the part of the picture that you want to be a Hotspot, and enter the URL of for the Hotspot link in the Address textbox.
    Dreamweaver: Insert a picture.
  • Select the picture
  • Make sure the Properties panel is displayed on the bottom of the Dreamweaver screen.
  • Click on Rectangular or Circle or Poly tool on the left on the Properties panel and draw the desired shape over the part of the picture that you want to be a Hotspot, and enter the URL of for the Hotspot link in the Target textbox.