dreamweaver – dreamweaver extras web design section 8-4 part or all of this lesson was adapted...

Dreamweaver –Dreamweaver Extras

Web Design

Section 8-4

Part or all of this lesson was adapted from the University of Washington’s “Web Design & Development I” Course materials

Objectives

The Student will:Understand how set and use hotspots on

imagesCreate a “rollover image” Be able to create a form with fields that

users can fill in

Image Maps and Hotspots

An image map is an image that has been divided into regions called hotspots; when a user clicks a hotspot, an action occurs (for example, a new file opens).

Defining Hotspots

To define hotpots in an image:

1. Select the image

2. In the Properties panel define a Map Name

3. Using one of the selection tools sweep a region of the image

Defining Hotspots4. Set the Link, Target and Alt fields for the

“hotspot” Note: the Alt text will display when the

mouse hovers over the hotspot on the image

Defining Hotspots

When complete Dreamweaver will generate the HTML required for the hotspots: <map name="Cast" id="Cast"> <area shape="circle" coords="26,114,56"

href="http://www.imdb.com/name/nm0947338/" target="_blank" alt="Chekov - Anton Yelchin" />

<area shape="circle" coords="117,99,46" href="http://www.imdb.com/name/nm1517976/" target="_blank" alt="Kirk - Chris Pine" />

</map>

Rollover Images Rollover images allow you to have a graphic

change to a different graphic when the mouse rolls over it. To insert a rollover image, do the following:1. Click Insert > Image Objects > Rollover Image

Rollover Images1. In the Insert Rollover Image dialog box under

Original Image, browse for the image that is to be seen before the mouse rolls over it

2. Under Rollover Image browse for the image to be seen when the mouse rolls over it.

3. In the When clicked. Go to URL field, you can enter a link by typing in the web address or browsing to a file.

4. Click OK

Rollover Dialog Box - Example

Creating FormsCreating forms in

Dreamweaver is easy.

Later we will learn how add code to gather the data

Creating a FormStart by Insert | Form | Form

Now you can begin adding fields, buttons, etc. through Insert | Form

Adding a Text Field

In the dialog box add the Label for the field and choose where the label should appear.

Setting Attributes for the Field

Select the box and then set the attributes in the Properties panel

Text Fields

Add remaining fields the same waySet the Widths to appropriate values

Adding Check Boxes

You can also add Check Boxes to your form through Insert | Form | Checkbox Group

Add or subtract the number of boxes

Change the labels

Check BoxesThe file now looks like this:

Adding a Comment Section

To add a box for the user to input text through Insert | Form | Textarea

Text Area Attributes

Set the attributes in the Properties Panel:

Text Area

The file now looks like this:

Adding a ButtonTo submit the form you will need to add a

button with Insert | Form | Button In this case we

do not need to set a label

ButtonsThe default value for the button is “Submit”Our form is now complete:

Summary

Dreamweaver can be used to create interesting features and forms quickly and easily.

Rest of Today

Finish HW 8-1 and 8-2Play with rollover images, etc.

Add them to your image in unit6Try to create a form

You will need those in your final project