DREAMWEAVER ADVANCED BUTTONS

 

Weve already learned how to make a simple button; you insert an image and attach a link to it. But what about all those fancy buttons you see on the web like rollovers, pull down menus, and image maps? Dreamweaver can do those, too! Its easy. Dreamweaver will even help you build navigation menus.

Well, lets get to it!

 

Image Maps

You can define click-able areas on an image. Any single image may have more than one click-able area, each area linking to a different page. Coordinates laid out on the image define the click-able sections. The click-able coordinates make a map of sorts; that map is called an "Image Map". Image maps are almost impossible to accurately define when hand coding, but Dreamweaver makes them easy. The Academy's web design course

uses a couple of image maps on it's secondary pages.

 

To Make an Image Map:

1. First youll need an image. You can use the Academy of Web Design SF sample image map image:
   

The above image is one file, but we will create an image map that will allow users to click on "Academy of Web Design" to go to the schools homepage. If they click on the e-mail address theyll activate a mail link.

 

2. Insert the Image
3. Look at the Properties palette. It should be displaying images properties. If its not, click the image to activate the image properties. The image map buttons are in the lower left corner of the Properties inspector.

4. To draw a click-able area, select the shape that you wish to draw. Click the shape, then click and drag over the desired image map area.

Draws rectangle image map areas.

Draws circular image map areas.

Draws irregular shapes. Click to add a point. Click to add another point. Double click when finished.

5. Draw rectangular shapes over "Academy of Web Design, San Francisco" and "david@awdsf.com"

Take care not to overlap the images map areas.

6. Click a green image map area and define the link for that area in the properties inspector. Then define the other areas.

 

You can have as many image maps as you want on one image.

 

Rollover Buttons

Youve all seen rollover buttons on the web. You move your mouse over a button and it starts glowing or changes in some way. Rollover buttons are actually made of more than one image. When you rollover the first image, the button is switched to a totally different image. If it looks like the button is glowing, its because the computer is switching the buttons out so quickly that you cant tell. You only see the differences between the two images.

Rollover buttons are made using JavaScript, which Dreamweaver will happily create for you.

 

To Create a Rollover Button

1. Youll need two images of the same size. One should differ from the other in some way. Youll use one image for the buttons "up" stage, and one for the "over" stage. Dont insert them on the screen yet, just make sure theyre in your root folder.
   If you need buttons you can get samples below:
   
   

button_up

button_over

 

2. Click INSERT-> INTERACTIVE IMAGES-> ROLLOVER IMAGE
   The Dreamweaver "Insert Rollover" window should pop up:

3. Click Browse to choose the original, or up, image
4. Click Browse to choose the image to choose the Rollover Image. The Rollover image will display when a user rolls over your button.
5. Click Browse to choose which page to link to when your button is clicked.
6. Make sure Preload Rollover Image is checked. If your page doesnt preload rollover images itll try to load them at the instant a user rolls over your button. Even high-speed users will experience jerky load times.
7. You dont have to worry about the Image Name. Some advanced JavaScript functions require a name, but in those cases, the name that Dreamweaver assigns will do fine.
8. Hit OK. Then hit F12 to preview in the browser. Roll over your image!

Check your HTML code. Look at all that JavaScript!

 

Using Animated GIFs with Rollover Images

Animated GIFs are basically a number of images thrown together to approximate motion. The nice thing about an animated GIF is that the separate images are nicely wrapped in one file. You can freely use animated GIFs in any state of a rollover button.

 

Automatically Inserting Flash Buttons

Dreamweaver 4 gives you the ability to automatically insert buttons made with Macromedia Flash. Im not in love with this feature for a couple of reasons:

�.       Flash requires a plug-in to be viewed. Dreamweaver does not set up a good script to automatically detect the Flash plug-in when you insert a Flash button. This could leave many of your viewers with buttons they cant see. During the Flash section, you will learn about scripts that you can use to detect the Flash Player

�.       The buttons that come with Dreamweaver are by and large ugly. Most of them dont have any special Flash animation, and could have just as easily been made with animated GIFs.

 

The Flash buttons do give you the ability to use the same button over and over with a different label, which is kind of nice

 

To Insert Flash Buttons

Click INSERT-> INTERACTIVE IMAGES-> FLASH BUTTON

 

Once inserted, you can double click the button it if you need to edit it.

 

Pull-Down Jump Menus

A Pull-down jump menu is a normal pull down list that links users to a page when they make a choice. Jump menus can save screen space and remove clutter. Studies have also shown that people are more likely to find what theyre looking for on a large site if they are lead through well-labeled jump menus.

Dreamweaver is kind of weird in the way it makes you build a jump menu. It takes advantage of the fact that forms already have pull down menus, and so to create a jump menu, Dreamweaver has you build a form, and insert the jump-menu in the form area. Dont worry too much about building the form. Well be building Internet commerce forms soon enough. The jump menu is really simple.

 

To Build a Jump Menu

1. Click INSERT-> FORM OBJECT-> JUMP MENU

 

The Jump Menu Window should pop-up:

 

To Use The Insert Jump Menu Window:

1. Click in "Text". Whatever you type in this field will appear on the screen
2. Click Browse or fill in a URL to jump to when your choice is selected.
3. Hit the to add the menu choice
4. Add another choice.
5. Hit OK when done.
   The red dotted lines on the screen show where the <formset> tags are active.

|