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: The Student will: Understand how set and use hotspots on images Understand how set and use hotspots on images Create a “rollover image” Create a “rollover image” Be able to create a form with fields that users can fill in 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). 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: 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 Hotspots 4. 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 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: When complete Dreamweaver will generate the HTML required for the hotspots:

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: Click Insert > Image Objects > Rollover Image

Rollover Images 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 Under Rollover Image browse for the image to be seen when the mouse rolls over it In the When clicked. Go to URL field, you can enter a link by typing in the web address or browsing to a file Click OK

Rollover Dialog Box - Example

Creating Forms Creating forms in Dreamweaver is easy. Creating forms in Dreamweaver is easy. Later we will learn how add code to gather the data Later we will learn how add code to gather the data

Creating a Form Start by Insert | Form | Form Start by Insert | Form | Form Now you can begin adding fields, buttons, etc. through Insert | 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. 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 Select the box and then set the attributes in the Properties panel

Text Fields Add remaining fields the same way Add remaining fields the same way Set the Widths to appropriate values Set the Widths to appropriate values

Adding Check Boxes You can also add Check Boxes to your form through Insert | Form | Checkbox Group You can also add Check Boxes to your form through Insert | Form | Checkbox Group Add or subtract the number of boxes Add or subtract the number of boxes Change the labels Change the labels

Check Boxes The file now looks like this: The file now looks like this:

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

Text Area Attributes Set the attributes in the Properties Panel: Set the attributes in the Properties Panel:

Text Area The file now looks like this: The file now looks like this:

Adding a Button To submit the form you will need to add a button with Insert | Form | Button To 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 In this case we do not need to set a label

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

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

Rest of Today Finish HW 8-1 and 8-2 Finish HW 8-1 and 8-2 Play with rollover images, etc. Play with rollover images, etc. Add them to your image in unit6 Add them to your image in unit6 Try to create a form Try to create a form You will need those in your final project You will need those in your final project