The Federalist Era – 1789 -1817. Washington’s “Life Mask” Washington’s “Death Mask”
Dreamweaver – Dreamweaver Extras Web Design Section 8-4 Part or all of this lesson was adapted...
-
Upload
jerome-stone -
Category
Documents
-
view
213 -
download
0
Transcript of Dreamweaver – Dreamweaver Extras Web Design Section 8-4 Part or all of this lesson was adapted...
![Page 1: 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.](https://reader030.fdocuments.us/reader030/viewer/2022032605/56649e745503460f94b742e8/html5/thumbnails/1.jpg)
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
![Page 2: 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.](https://reader030.fdocuments.us/reader030/viewer/2022032605/56649e745503460f94b742e8/html5/thumbnails/2.jpg)
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
![Page 3: 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.](https://reader030.fdocuments.us/reader030/viewer/2022032605/56649e745503460f94b742e8/html5/thumbnails/3.jpg)
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).
![Page 4: 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.](https://reader030.fdocuments.us/reader030/viewer/2022032605/56649e745503460f94b742e8/html5/thumbnails/4.jpg)
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
![Page 5: 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.](https://reader030.fdocuments.us/reader030/viewer/2022032605/56649e745503460f94b742e8/html5/thumbnails/5.jpg)
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
![Page 6: 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.](https://reader030.fdocuments.us/reader030/viewer/2022032605/56649e745503460f94b742e8/html5/thumbnails/6.jpg)
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>
![Page 7: 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.](https://reader030.fdocuments.us/reader030/viewer/2022032605/56649e745503460f94b742e8/html5/thumbnails/7.jpg)
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 Web Design Section 8-4 Part or all of this lesson was adapted from the University of Washington’s “Web Design & Development.](https://reader030.fdocuments.us/reader030/viewer/2022032605/56649e745503460f94b742e8/html5/thumbnails/8.jpg)
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 Web Design Section 8-4 Part or all of this lesson was adapted from the University of Washington’s “Web Design & Development.](https://reader030.fdocuments.us/reader030/viewer/2022032605/56649e745503460f94b742e8/html5/thumbnails/9.jpg)
Rollover Dialog Box - Example
![Page 10: 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.](https://reader030.fdocuments.us/reader030/viewer/2022032605/56649e745503460f94b742e8/html5/thumbnails/10.jpg)
Creating FormsCreating forms in
Dreamweaver is easy.
Later we will learn how add code to gather the data
![Page 11: 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.](https://reader030.fdocuments.us/reader030/viewer/2022032605/56649e745503460f94b742e8/html5/thumbnails/11.jpg)
Creating a FormStart by Insert | Form | Form
Now you can begin adding fields, buttons, etc. through Insert | Form
![Page 12: 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.](https://reader030.fdocuments.us/reader030/viewer/2022032605/56649e745503460f94b742e8/html5/thumbnails/12.jpg)
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 Web Design Section 8-4 Part or all of this lesson was adapted from the University of Washington’s “Web Design & Development.](https://reader030.fdocuments.us/reader030/viewer/2022032605/56649e745503460f94b742e8/html5/thumbnails/13.jpg)
Setting Attributes for the Field
Select the box and then set the attributes in the Properties panel
![Page 14: 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.](https://reader030.fdocuments.us/reader030/viewer/2022032605/56649e745503460f94b742e8/html5/thumbnails/14.jpg)
Text Fields
Add remaining fields the same waySet the Widths to appropriate values
![Page 15: 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.](https://reader030.fdocuments.us/reader030/viewer/2022032605/56649e745503460f94b742e8/html5/thumbnails/15.jpg)
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
![Page 16: 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.](https://reader030.fdocuments.us/reader030/viewer/2022032605/56649e745503460f94b742e8/html5/thumbnails/16.jpg)
Check BoxesThe file now looks like this:
![Page 17: 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.](https://reader030.fdocuments.us/reader030/viewer/2022032605/56649e745503460f94b742e8/html5/thumbnails/17.jpg)
Adding a Comment Section
To add a box for the user to input text through Insert | Form | Textarea
![Page 18: 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.](https://reader030.fdocuments.us/reader030/viewer/2022032605/56649e745503460f94b742e8/html5/thumbnails/18.jpg)
Text Area Attributes
Set the attributes in the Properties Panel:
![Page 19: 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.](https://reader030.fdocuments.us/reader030/viewer/2022032605/56649e745503460f94b742e8/html5/thumbnails/19.jpg)
Text Area
The file now looks like this:
![Page 20: 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.](https://reader030.fdocuments.us/reader030/viewer/2022032605/56649e745503460f94b742e8/html5/thumbnails/20.jpg)
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 Web Design Section 8-4 Part or all of this lesson was adapted from the University of Washington’s “Web Design & Development.](https://reader030.fdocuments.us/reader030/viewer/2022032605/56649e745503460f94b742e8/html5/thumbnails/21.jpg)
ButtonsThe default value for the button is “Submit”Our form is now complete:
![Page 22: 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.](https://reader030.fdocuments.us/reader030/viewer/2022032605/56649e745503460f94b742e8/html5/thumbnails/22.jpg)
Summary
Dreamweaver can be used to create interesting features and forms quickly and easily.
![Page 23: 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.](https://reader030.fdocuments.us/reader030/viewer/2022032605/56649e745503460f94b742e8/html5/thumbnails/23.jpg)
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