Dreamweaver –Dreamweaver Extras
Transcript of 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
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 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).
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
Defining Hotspots4. Set the Link, Target and Alt fields for the
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" />
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 FieldSelect the box and then set the attributes
in the Properties panel
Text FieldsAdd remaining fields the same way
Set the Widths to appropriate values
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
Check BoxesThe file now looks like this:
Adding a Comment SectionTo add a box for the user to input text
through Insert | Form | Textarea
Text Area AttributesSet the attributes in the Properties Panel:
Text AreaThe 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:
SummaryDreamweaver can be used to create
interesting features and forms quickly and easily.
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