Dreamweaver –Dreamweaver Extras

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


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 images Create a “rollover image” - PowerPoint PPT Presentation

Transcript of Dreamweaver –Dreamweaver Extras

Page 1: Dreamweaver –Dreamweaver Extras

Dreamweaver –Dreamweaver Extras

Web DesignSection 8-4

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

Page 2: Dreamweaver –Dreamweaver Extras


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

Page 3: Dreamweaver –Dreamweaver Extras

Image Maps and HotspotsAn 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).

Page 4: Dreamweaver –Dreamweaver Extras

Defining Hotspots To define hotpots in an image:1. Select the image2. In the Properties panel define a Map

Name3. Using one of the

selection tools sweep a region of the image

Page 5: Dreamweaver –Dreamweaver Extras

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


Page 6: Dreamweaver –Dreamweaver Extras

Defining HotspotsWhen 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" />


Page 7: Dreamweaver –Dreamweaver Extras

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

Page 8: Dreamweaver –Dreamweaver Extras

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

Page 9: Dreamweaver –Dreamweaver Extras

Rollover Dialog Box - Example

Page 10: Dreamweaver –Dreamweaver Extras

Creating FormsCreating forms in

Dreamweaver is easy.

Later we will learn how add code to gather the data

Page 11: Dreamweaver –Dreamweaver Extras

Creating a FormStart by Insert | Form | Form

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

Page 12: Dreamweaver –Dreamweaver Extras

Adding a Text Field In the dialog box

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

Page 13: Dreamweaver –Dreamweaver Extras

Setting Attributes for the FieldSelect the box and then set the attributes

in the Properties panel

Page 14: Dreamweaver –Dreamweaver Extras

Text FieldsAdd remaining fields the same way

Set the Widths to appropriate values

Page 15: Dreamweaver –Dreamweaver Extras

Adding Check BoxesYou can also add Check Boxes to your

form through Insert | Form | Checkbox Group

Add or subtract the number of boxes

Change the labels

Page 16: Dreamweaver –Dreamweaver Extras

Check BoxesThe file now looks like this:

Page 17: Dreamweaver –Dreamweaver Extras

Adding a Comment SectionTo add a box for the user to input text

through Insert | Form | Textarea

Page 18: Dreamweaver –Dreamweaver Extras

Text Area AttributesSet the attributes in the Properties Panel:

Page 19: Dreamweaver –Dreamweaver Extras

Text AreaThe file now looks like this:

Page 20: Dreamweaver –Dreamweaver Extras

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

Page 21: Dreamweaver –Dreamweaver Extras

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

Page 22: Dreamweaver –Dreamweaver Extras

SummaryDreamweaver can be used to create

interesting features and forms quickly and easily.

Page 23: Dreamweaver –Dreamweaver Extras

Rest of TodayFinish HW 8-1 and 8-2Play with rollover images, etc.

Add them to your image in tools.htmlTry to create a form

You will need those in your final project