Dreamweaver –Dreamweaver Extras

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 I” Course materials

2. Objectives • The Student will: • Understand how set and use hotspots on images • Create a “rollover image” • Be able to create a form with fields that users can fill in

3. 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).

4. Defining Hotspots • To define hotpots in an image: • Select the image • In the Properties panel define a Map Name Using one of the selection tools sweep a region of the image

5. Defining Hotspots • 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

6. 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>

7. 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

8. 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

9. Rollover Dialog Box - Example

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

11. Creating a Form • Start by Insert | Form | Form • Now you can begin adding fields, buttons, etc. through Insert | Form

12. Adding a Text Field • In the dialog box add the Label for the field and choose where the label should appear.

13. Setting Attributes for the Field • Select the box and then set the attributes in the Properties panel

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

15. 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

16. Check Boxes • The file now looks like this:

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

18. Text Area Attributes • Set the attributes in the Properties Panel:

19. Text Area • The file now looks like this:

20. Adding a 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

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

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

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