Directions for creating rollover buttons/images:

How to make the button images-

One of these programs (Photoshop, Fireworks or Paint Shop Pro) must be on your computer for you to use any of these. Click on the button that corresponds the the imaging program that you want to use. You will then be able to save the appropriate file on your hard drive.

	PHOTOSHOP	FIREWORKS	PAINT SHOP PRO
"off" buttons for external site
"on" buttons for external site
"off" buttons for internal site
"on" buttons for internal site

Open the saved Photoshop (.psd), Fireworks (.png), or Paint Shop Pro (.psp) file.

Activate the text layer and change the text to the desired navigation word(s). Fonts vary from computer to computer, so if yours does not have the same fonts, just choose one that in similar in size and style to the ones pictured above. Just keep the font consistent on your site.

Save your newly created button as a .gif file, naming the image with “on” or an "off" at the end (Ex.: homeon.gif). Create and "on" and "off" version of each button you want on your navigation bar. Create a folder called images to save all of these buttons in.

Directions for creating the rollover effect for your buttons.

Front Page User Instructions-

1. Create a table (1 row X 1 column) to put your buttons in. Click on Table > Insert > Table to accomplish this.The table should be a few pixels wider than your button. The background color of the table should match your buttons. The yellow buttons have a color code value of #FED649 and the light blue buttons have a color code value of #DCE2F6. The border color is #000080 and is 1 pixel wide. The cell padding and the cell spacing should be set to 0. The vertical alignment for the cell contents should be set to top.
   
   
2. Place your curser inside the table. Select Insert > Picture > from file. Select the "off" picture you want for the button. Click OK to insert the image into the table.
   
   
3. Make sure that the DHTML tool bar is open. It's located in the Format menu, make sure it has a checkmark by it.
   
   
   
   
   
   
4. Select the "off" image you just put in the table. Go over to the DHTML tool bar.
   
   
   • Click on <choose an event> and select mouseover
   • Click on <choose an effect> and select swap picture
   • Click on <choose settings> and select choose picture
     
     
5. Select the "on" image. Click Ok to insert the rollover image.
   
   
6. Select the button and add the url address that you want the button to refer to. Also, make sure you put in an appropriate alt text description. The same text that is on the button is fine, but don't just put "button'. This is important to comply with Section 508.
   
   
7. If you want to see how it works click on the preview button at the bottom of the page.
   
   
8. Once you get one button to work, the rest are done the same way.

 

Dreamweaver User Instructions-

1. Create a table (1 row X 1 column) to put your buttons in. Click on Insert > Table to accomplish this. The table should be a few pixels wider than your button. The background color of the table should match your buttons. The yellow buttons have a color code value of #FED649 and the light blue buttons have a color code value of #DCE2F6. The border color is #000080 and is 1 pixel wide. The cell padding and the cell spacing should be set to 0. The vertical alignment for the cell contents should be set to top.
   
   
2. Place your curser inside the table. Select Insert > Interactive Images > Rollover Image
   
   
   
   
   
3. A dialog box will open.
   
   
   • Don't worry about the Image Name box-just leave the default name in there.
   • Original Image-this is your "off" button. Click on the browse button and select the "off" button you need.
   • Rollover Image-this is your "on" button. Click on the browse button and select the corresponding "on" button.
   • Alternate Text-Make sure you put in an appropriate description. The same text as the button is fine, but don't just put "button'. This is important to comply with Section 508.
   • When clicked, go to URL-Put in the URL that you want the button to link to. Click OK to insert the rollover image.
     
     
4. If you want to see how it works click the F12 button on your keyboard.
   
   
5. Once you get one button to work, the rest are done the same way.

Creating a custom banner for your web site using the new design for the USNA web site:

One of these programs (Photoshop, Fireworks or Paint Shop Pro) must be on your computer for you to use any of these. Click on the button that corresponds the the imaging program that you want to use. You will then be able to save the appropriate file on your hard drive.

Open the saved Photoshop (.psd), Fireworks (.png), or Paint Shop Pro (.psp) file.

Activate the "insert your text here" layer and change the text to the desired department. Fonts vary from computer to computer, so if yours does not have the same fonts, just choose one that in similar in size and style to the ones pictured below.

Save your file as a .gif file.

Click on image below for Photoshop Image

Click on image below for Fireworks Image

Click on image below for Paint Shop Pro Image