STANDARD 1: The student will use commercial web design software (for example: Adobe Dreamweaver, Microsoft Expression) to create dynamic and interactive websites.
Objective 4: Create an image map with hotspots.
STANDARD 2: The student will use commercial image editing software (for example: Fireworks, Photoshop) to create graphics/web page.
Objective 2: Create a navigation bar incorporating a drop-down or fly-out menu.
STANDARD 5
The student will use commercial animation software (for example: Flash, Alice, Anim8, Ulead) to create graphics/web page.
Objective 4: Understand the importance and use of a timeline and/or storyboard.
Objective 5: Understand animation concepts: tweening and/or morphing, motion paths, behaviors and/or actions, library, import graphics.
Objective 6: Insert animation into a web page. / INSTRUCTIONSHEET –
Interactive Utah Map
Image Mapping using Hotspots
& Pop-ups
Animated Top Bar
Picture in Text
Weather Widget
Objective: “I can create an interactive and dynamic website using hotspot image mapping pop-up menu tools, animation, and widgets.”
Part 1: Create “utah_map.png” with hotspots and pop-upsin Fireworks(50 pts)
Part 2: Export from Fireworks as an html file -- “utah_map.html”
Part 3: Create “TopBar_Balloons.swf” in Flash(animated shockwave flash file) (100 pts)
Part 4: Create Title Text (.gif)in Photoshop (25 pts)
Part 5: Create Dreamweaver Site (Import Flash, Fireworks & Weather Widget)(100 pts)
Part 6: Add a Weather Widget(25 pts)
Part 3: Create “utah_map.png” with hotspots and pop-ups in Fireworks
Example:
Under Web tools, select the Rectangle Hotspot tool. Using the mouse, create a hotspot around the text “Salt Lake City”. In the properties window, add the Link:
Alt: Salt Lake City, Utah, Visitor’s Guide Target: _blank
After each hotspot, click the Pointer toolfrom Select in the toobox before doing the next.
(1)Add a Rectangle hotspot for the text “Moab” Add a Status Bar Message that says: “Moab, Utah’s Playground” Add a Pop-up Menu for Moab with the following drop down items: Arches National Park, Canyonlands National Park, Dead Horse Point State Park, Hiking, Mountain Biking, and River Rafting. *students will need to look up the web links
(2)Add a Rectangle hotspot for “Lake Powell” Add a Status Bar Message “Lake Powell” Add a Pop-up Menu for Lake Powell with the drop down items: Bullfrog Marina, Hite Marina, Wahweap Marina, and Rainbow Bridge National Monument s *students will need to look up the web links
(3)Add three (3) more Hotspots and Status Bar Messages for the following national parks: Zions National Park, Capitol Reef National Park, and Bryce Canyon National Park. *students will need to look up the web links
(4)SAVE “utah_map.png”
(5)Export from Fireworks as an html file -- “utah_map.html” Click File, Export, File name = “utah_map.html” HTML: “Export HTML File” Save the file into the“Project_Interactive Utah Map”folder.
Part 4: Create the Dreamweaver Site (Import Flash, Fireworks, and Widgets)
(1)Open Dreamweaver and click, Site, New Site, Name the Site: “Interactive Utah Map” Click “Next,” choose “No,” do NOT use server technology. Choose “Edit Local Copies on My Machine” and browse to the folder you created called “Project_Interactive Utah Map” and select, click “Next,” choose Local/Network and again browse to the folder you created called “Project_Interactive Utah Map”choose “Done.”
(2)Open the Files Window (Window, Files or F8). Right-click topmost green folder (Site – Utah Interactive Map), New File and name index.html. Double-click and open index.html.
(3)Change the document title to: “Interactive Utah Map”
(4)Choose Modify, Page Properties, choose Category “Appearance (HTML)” Select the Background color: #ffca87,Text color black: #000000 Click OK.
(5)Insert a table, 3 Rows, 2 Columns. Left align the table and change the border to 0.
(6)Merge all cells in Row 1. Also in Row 1, Horizontal alignment = “Center, ” Vertical alignment = “Top”
(7)Insert the picture “UTAH--Life-Elevated.gif” into Row 1(Insert, Picture)
(8)Merge both columns in Row 2. In Row 2, insert the Flash SWF “TopBar_Balloons.swf” (Choose Insert, Media, SWF)
(9)On Row 3 change Column 1 to be about 1/4th the size of the table and make column 2 3/4th the size of the entire table.
(10)Click inside Row 3, Column 2. Choose Insert, Image Objects, Fireworks HTML. Select the file“utah_map.html”and click OK.
Part 5: Add a Personal Weather Station Widget into Row 3, Column 1. Navigate to and choose your local city, Lehi, then click on the personal weather station listed directly below the city and state, click on “400 N [KUTLEHI16]”
(11)Once you see your “Personal Weather Station” click on the link below “Get a PWS Widget”
(12)Choose a widget style, then copy and paste the widget code into the HTML Code section of Row 3, Column 1
(13)Save as “index.html” and test your final website in a browser. Pass off with your instructor.
(14)Your final website should look similar to the following:
1