Technology How To

Getting Started
This handout assumes all of the following:

• The user has Adobe Dreamweaver CS3 or higher installed on his/her computer.

• The user has established a WFU personal web page (See handout “Web Pages at
WFU.”)

• The user has a local copy of their web page on his/her computer. (Stored in
Userdata folder)

Rollover Images
A rollover image is a technique using JavaScript that lets you change a page element (usually a graphic image) when the user rolls the mouse over something on the page (like a line of text or a graphic image). For this example, the two rollover images will be the same, with only minor differences (ie. darker or lighter). When a user moves the mouse across an image, the image changes by exchanging the two rollover image files.

Creating a Rollover Image

• Before inserting the Rollover Image into Dreamweaver, open up your first image in MS
PhotoEditor or some other image-editing program.

• In MS PhotoEditor, click on the Image menu and select Balance. In the balance window
adjust the Brightness, Contrast and Gamma.

• Once you get the desired effect, use Save As to save the image under a new name. This
new image will be your Rollover Image.

• Close MS Photo Editor a return to Dreamweaver.

Inserting a Rollover Image

• In Dreamweaver, click Insert > Image Objects > Rollover Image. A window will pop
up.

• Insert an Image Name (This is not a filename, just a name for the Rollover Effect.)

• Use the Browse buttons to select the Original Image and the Rollover Image. (Use
the samples provided on our web site or by the instructor)

• Insert Alternative text for accessibility.

• Insert a link URL for the Rollover Image.

• To preview how your mouseover will work in a Web browser, press the F12 key and a
Netscape Navigator window will pop up with the document in it. Move your mouse across
the image and watch it change. Click the image to test the link.

Creating an Image Map
Image maps are single images or clusters of images that have been defined so that the use can click on different areas and be linked to different destinations.

• To create an image map in Dreamweaver, you’ll first need an image.

• Insert the image into your page and click the image to select it.

• Expand the Property window using the “twistie” in the lower right corner of the window.
This opens the image-mapping window.

• There are four buttons along the left-hand side of the window, a pointer and three
shapes.

• The pointer allows you to move “hot spots” (links within the image map) around, and resize
them. The rectangle allows you to draw rectangular hot spots; the circle creates circular
ones; and the freehand tool allows you to trace irregular shapes. (Note: to end a freehand
shape, double click on the last point.)

• To remove a hot spot, select it with the pointer tool and hit the delete key.

• If you wish to make these hot spots link to files within your Web site, all you have to do is
type the filename into the Link field. Remember to put “http://” in front of the web address
in the Link field for external sites.

Inserting Flash Text
The Flash text object lets you create and insert a Flash file that contains just text. This allows you to create a small, vector-graphic object with the designer fonts and the text of your choice.
Note: You must save your document before inserting a Flash button or text object.

• Choose Insert > Media > Flash Text. The Insert Flash Text dialog box appears.

• Select a font from the Font pop-up menu. This menu lists all TrueType fonts currently
loaded on your system.

• Enter a font size in the Size field; these are point sizes.

• Specify style attributes like bold or italic, and text alignment by clicking the appropriate
style buttons.

• In the Color field, set the color of the text by using the color picker or entering a Web
hexadecimal value.

• In the Rollover Color field, set the color that appears when the pointer rolls over the
Flash text object. Use the color picker or enter a Web hexadecimal value.

• Enter the text you want in the Text field. To see the font style displayed in the Text
field, select Show Font.

• If you want to associate a link with the Flash text object, enter a document-relative or
absolute link in the Link field. In the Save As field, enter a name for the file. You can use
the default file name (for example, text1.swf), or type in a new name. If the file contains a
document-relative link, you must save the file to the same directory as the current HTML
document.

• Click Apply or OK to insert the Flash text in the Document window. If you click Apply,
the dialog box remains open, and you can preview the text in your document.

Inserting Flash Buttons
Flash buttons work like flash text and allow for the easy creation of buttons for a web page. To insert a flash button, click Insert > Media > Flash Button. Select a button from the Style list, fill in the button text and link destination, and change any other available options.