Creating a Navigation Flash Button in Dreamweaver

Documentation written by Rob Leader, Erica Mueller, and Adil Tiwana for Tracy Clark's Technical Writing course, Spring 2002

So, you've decided to create a web page? You've got your web address, you've got some ideas, and now you're ready to get started. One of the things you might need to do to make your web page come to life is to add some navigation buttons that will help your audience navigate through your site. A lot of Professional Writing students use Dreamweaver 4 to create websites for personal or public use, so this documentation was designed to help you, the students in the IMP lab, to navigate this detailed program with a little more ease. Below, you will find some easy steps to help you create a basic Flash navigational button.

We assume that you are knowledgeable of the following things:

  • How to turn on a computer and locate software.
  • How to open the software once located.
  • How to set up a basic web page.
Step 1: Getting Started

Once you have opened Dreamweaver 4 on your PC, and have a blank page ready to go, you can start to create your website with Flash navigational buttons!

The first thing you have to do is SAVE YOUR DOCUMENT in HTML FORMAT.

  • Go to "File"on the menu bar.
  • Select "Save As."
  • At the top of the box where it says "SAVE IN,"select where you would like your web page to be saved.
  • At the bottom of the box where it says "FILE NAME,"type in a title for your web page.
  • HTML is the default format that you want; so don't give your file an extension (such as .doc).
  • Click SAVE.

*****Always remember to SAVE FREQUENTLY so you don't lose anything you are working on. *****

For the purpose of this document, we created our Flash button first before creating an entire web page. You can create a Flash button with or without text.

Step 2: Creating your Flash Button

Now that you have your web page saved, you're ready to create some Flash buttons.

  • Go to the top of your screen on the menu bar and select "insert." This will bring a list of choices for you.
  • Select "Interactive Image"
  • Then click on "FLASH BUTTON."

Step 3: Designing your Flash Button

Once you select Flash Button, a box like the one displayed below will come up on your screen:

NOTE: If at any time you would like to view the button you are creating, click the "Apply"button in the upper right corner of the box.

Below are descriptions of each option within the Insert Flash Button window:

STYLE: Click once to reveal a menu with a list of different styles you can choose from. If you click once on one of the styles you will see the picture change at the top of the box. You can view all of the styles until you find one that suits you.

BUTTON TEXT: In this box you will type in the word or words that you wish to appear on your button.

FONT: From this scroll down menu you can select the type of font that you want you words to appear in.

FONT SIZE: Type in the size that you would like the words on your button to be viewed as.

LINK: In this box, type in the hyperlink that you want the button to link to. This should be in HTML format. Example: http://www.weather.com

TARGET: This controls how the link opens. This is for if you want a new window to open off your link or if you're using frames. If neither applies, you can leave this box empty.

BACKGROUND COLOR: If you click once on the small box just to the right of these words, you will get a large palette of colors. This is the color that will appear behind your button. If you don't want any color behind your button, then keep the default setting.

Step 4: Positioning your Flash Button

Once you have selected all the desired options for your button, click OK in the upper right hand corner of the box. The box will close, and place one of the buttons you created onto your page. The results are shown below:

Step 5: Viewing the Properties Toolbar

Once your button is on the page, you can select it at any time to make changes to its size and position. Just select the button, and this tool bar will appear:

NOTE: If you cannot see your tool bar, see the TROUBLESHOOTING section at the bottom of this page.

Step 6: Sizing and Placing the Flash Button

The properties toolbar allows you to change the following:

W: (width) - If you want to make your button wider, just type in a different number.

NOTE: Anything larger than your button default will make the button wider, whereas anything smaller will make the button less wide.

H: (height) - If you want to make your button taller, just type in a different number.

NOTE: Anything larger than your button default will make the button taller, whereas anything smaller will make the button shorter.

To change width and/or height settings, please see the example below:

You may also add vertical and/or horizontal space to your button.

V SPACE (vertical space) - This feature will set the margins of your button.

If you type in a number in the vertical space area, it will move you button to the corresponding number on the left ruler on your screen. We set ours to 100. If you look at the ruler on the top of the screen, you will see that it is aligned with the 100 mark.

NOTE: *If you can't see your rulers, or your ruler is in inches, see the TROUBLESHOOTING section at the bottom of this page.

H SPACE (horizontal space) - This feature will allow you to specify how far you want your button from the margins.

If you type in a number in the vertical space area, it will move you button to the corresponding number on the top ruler. We set ours to 100. If you look at the ruler on the left side of the screen you can see that it is aligned with the 100 mark.

NOTE: *If you can't see your rulers, or your ruler is in inches, see the TROUBLESHOOTING section at the bottom of this page.

For adjustments to your vertical and/or horizontal space, please see the example below:

Step 7: Alignment and Scale of the Flash Button

If you click on the ALIGN BOX, you will be able to view a menu with a list of different alignment options. Each option will position your button in that corresponding position on your final web page.

BASELINE- Aligns the baseline of the text to the bottom of the selected object.

TOP- Will place your button as far towards the top of the document as possible.

MIDDLE- Will place your button in the middle of the navigation bar.

BOTTOM-Will place your button as close to the bottom of the navigation bar as it can allow.

TEXTTOP- Aligns your button with the tallest character of text.

ABSOLUTE MIDDLE - Aligns to the absolute middle of the current line.

ABSOLUTE BOTTOM- Aligns to the absolute bottom with the bottom of the selected object.

LEFT ñ Will place your button on the very left edge of the navigation bar or table cell.

RIGHT ñ Will place your button on the very right edge of your navigation bar or cell.

If you click on the SCALE menu, shown below, you will be able to view a menu with three different scale choices -- show all, no border, and exact fit.

Choosing any of these will change the border around your button, as follows :

SHOW ALL ñ Show all will allow all of the extra space to be seen:

NO BORDER ñ Arranges the button so that no background will be seen:

EXACT FIT ñ Exact fit stretches the button to fit the drag box:

Step 8: Editing and Resetting the Flash Button

EDIT: If at any time you wish to change the style of your button, or the words on your button, click once on the button you created.

Then, in the properties box, click EDIT in the upper right hand corner. This will bring up the original screen that you created the button in.

You can then make adjustments as needed.

RESET SIZE: Selecting this button will reset the size of your button to the default.

Step 9: Saving your Flash Button

Now you should have an attractive working flash button. Would you like to view your work of art? First, you must SAVE YOUR DOCUMENT. Any problems launching your browser may lock up the program, so save now!

If you have questions about saving your work, refer back to Step 1 and follow the steps listed at the beginning of this document.

Step 10: Viewing your Flash Button

Now you should have an attractive, working flash button. To see if your button works, click once on the "Preview/Debug in browser"icon. This is located towards the right side of the toolbar at the top of your screen, and looks like a picture of Earth.

This will let you select which local web browser to use and previews it as it would be seen on the internet.

TROUBLESHOOTING

Problem

Solution

All my words won't fit on the button!

If your words won't show up in the button, you must make the button wider.

Select the button, and on the Properties Menu on the screen, change the width of the button until all of the words fit inside.

My ruler is in inches!

If you notice that your ruler numbers don't match the numbers given in your properties toolbar, then you probably need to change the setting of your ruler.

Click once on "View."

Go down and click once on "Rulers."

Select the type of ruler you would like. "Pixels"is the best for this program.

My properties toolbar isn't there!

If your properties toolbar doesn't automatically pop up, either press CTRL+F3 or click on "Window"

Then select "Properties"

My rulers aren't there!

If you can't see your rulers, go to the menu bar at the top of the screen.

Click once on "View."

Go down and click once on "Rulers."

Select "Pixels". This should bring up the rulers in pixel form

NOTE: The number in your properties toolbar may be different. Each of the buttons has its own settings.

If you are looking for more help, try visiting: