Adding Media and Interactivity
Unit Objectives
• Understand media objects• Add Flash objects• Add behaviors• Edit behaviors• Add rollover images• Add video• Add sound• Update files• Incorporate Web 2.0 technology
Adobe Dreamweaver CS6 - Illustrated
Understanding Media Objects
• Role of media objects• Types of media objects
– Go to URLs– Plug-ins– Flash video, sounds, rollover images– Movies, Java applets, ActiveX controls
• Adding media objects with HTML5
Adobe Dreamweaver CS6 - Illustrated
Clues to Use
• Using Adobe Flash Player to view Flash content
– Adobe Flash player often included in Web browser software
• Or download latest Flash Player – Using Insert panel to add Flash content
• Code that links and runs content:– Embedded into page code
Adobe Dreamweaver CS6 - Illustrated
Adding Flash Objects
1. Open café page– Place the insertion point in the sidebar to the left of the
word “Reservations”
2. Click the Media button list arrow– Located in Common category on the Insert panel– Then click SWF
3. Navigate to location where you store Unit H Data Files– Click crabdance.swf– Click OK (Win) or Open (Mac)– Click Yes in the Dreamweaver dialog box, then click Save
Adobe Dreamweaver CS6 - Illustrated
Add Flash Objects
4. Type Café logo animation in the Title text box– Click OK– Select FlashID in the ID text box in the Property inspector– Then type crabdance– Press [Enter] (Win) or [return] (Mac)
5. With the placeholder selected:– Click the Play button in the Property inspector– Click Stop (Win) or skip to Step 6 (Mac)
6. Click the Loop check box to deselect it– Save your work– Click OK to close the Copy Dependent Files dialog boxJ-3
Adobe Dreamweaver CS6 - Illustrated
Add Flash Objects
7. Click the Switch Design View to Live View button– Compare your screen to Figure H-3
8. Click the Switch Design View to Live View button again– Then close the café page
Adobe Dreamweaver CS6 - Illustrated
Adobe Dreamweaver CS6 - Illustrated
Clues to Use
• Using Flash movies– Movies can include multimedia elements
• Examples: audio files, animated objects, scripted objects, clickable links
– Always add a title tag• To provide accessibility
– Browser should check for and load a Flash player
Adobe Dreamweaver CS6 - Illustrated
Adding Behaviors
1. Open dwh_1.html– From the location where you store Unit H Data Files– Save it in the site root folder as wildlife_message.html
without updating links– Close both files
2. Open the activities page– Select the family_sunset image – Click Window on the Menu bar– Click Behaviors
3. Click the Add behavior button– Located on the Behaviors panel toolbar – Then click Open Browser Window
Adobe Dreamweaver CS6 - Illustrated
Adding Behaviors
4. Click Browse next to the URL to open the Select File dialog box– Navigate to the site root folder if necessary– Double-click wildlife_message.html
5. Type 300 in the Window width and Window height text boxes– Type message in Window name box– Click OK
6. Save your work– Preview the page in your browser– Click the family_sunset image
7. Close both browser windows
Adobe Dreamweaver CS6 - Illustrated
Clues to Use
• Using the Behaviors panel to add actions– Can insert JavaScript-based behaviors– Examples:
• Automate tasks• Respond to visitor selections and mouse
movements• Add automatic dynamic effects
– Actions triggered by events
Adobe Dreamweaver CS6 - Illustrated
Clues to Use
• Using the Spry Framework• AJAX is a method for developing interactive
Web pages• JavaScript library called Spry framework for
AJAX– Contains spry widgets and spry effects
• Prebuilt components for adding interactivity to pages
Adobe Dreamweaver CS6 - Illustrated
Editing Behaviors
1. Click the family_sunset image if necessary– Right-click (Win) the Open Browser Window action
• Located in the right column of the Behaviors panel
– Click Edit Behavior
2. Change window height to 245– Click OK– Save your changes– Preview the page in your browser– Click the family_sunset image
3. Close both browser windows
Adobe Dreamweaver CS6 - Illustrated
Editing Behaviors
4. Click the left column of the Open Browser Window action in the behaviors panel– Click the events list arrow– Click onMouseOver
5. Save your work– Preview page in browser– Move mouse over family_sunset image
6. Close the browser windows– Close the Behaviors panel
Adobe Dreamweaver CS6 - Illustrated
Clues to Use
• Using the Server Behaviors Panel– Adds server behaviors
• Tools that write server-side code• Examples: ASP, PHP, ColdFusion
– Use examples• Write code to create a login page• Create password protected page• Build search pages
Adobe Dreamweaver CS6 - Illustrated
Adding Rollover Images
1. Select the image of the two dolphins, then delete it
2. Click the Images list arrow– Located in the Common group on the Insert panel– Click Rollover Image
3. Type dolphins in the Image name text box– Click Browse next to the Original image text box– Browse to the location where you store Unit H Data Files– Open the assets folder– Double-click one_dolphin.jpg
Adobe Dreamweaver CS6 - Illustrated
Adding Rollover Images
4. Click Browse next to the Rollover image text box– Browse to the location where you store Unit H Data Files– Double-click two_dolphins.jpg– Overwrite the two_dolphins.jpg file in your website assets
folder
5. Type Dolphins riding the surf in the Alternate text box– Verify that the Preload rollover image check box is selected– Compare your screen to Figure H-9– Click OK
Adobe Dreamweaver CS6 - Illustrated
Adding Rollover Images
6. Select the image– Apply the img_right_float rule to it– Save your work– Preview the page in your browser– Move your mouse pointer over the single dolphin image,
and compare your screen to Figure H-10
7. Close the browser, then click the Show Code view button
8. Click the Show Design view button
Adobe Dreamweaver CS6 - Illustrated
Adding Video
1. Copy the file umbrella_anchor_movie.flv from the location where you store Unit H data files– Then paste it into The Striped Umbrella site root folder– Close Windows Explorer (Win) or Finder (Mac)– Return to Dreamweaver
2. Open the about_us page– Click to place the insertion point at the end of the last
paragraph on the page– Enter a paragraph return– Click the Media list arrow on the Insert panel, then click
Plugin
Adobe Dreamweaver CS6 - Illustrated
Adding Video
3. Browse to your local site assets folder if necessary, – double-click umbrella_anchor_video.mp4, then enter four
paragraph breaks after the plug-in placeholder
4. Select the plug-in placeholder,– Change the W value in the Property inspector to 220, and
the H value to 200– Click the Parameters button, click the Add button, enter
autostart for a Parameter and false for the value, as shown in Figure H-13
– Click OK
Adobe Dreamweaver CS6 - Illustrated
Adding Video
5. Place the insertion point to the right of the video placeholder image– Type Visit us at the front desk to pick up your
complimentary Umbrella Anchor! Using line breaks as shown in Figure H-14
– Apply the img_left_float rule to the plug-in placeholder
6. Apply the H3 format and the body_text rule to the sentence– Switch to code view– Delete the ending < /embed> tag from the code that
embeds the video on the page
Adobe Dreamweaver CS6 - Illustrated
Adding Video
7. Save your work– Preview the page in the browser– Compare your screen to Figure H-14– Click the Play button– Close the browser– Return to Design view– Close the about_us page
Adobe Dreamweaver CS6 - Illustrated
Clues to Use
• Comparing video file formats– AVI– MOV– MP4– FLV– WebM– Ogg
Adobe Dreamweaver CS6 - Illustrated
Adding Sound
1. Use Windows explorer (Win) or Finder (Mac) to copy the file interviews.mp3 from the drive and folder where you store your Unit H Data Files to your website assets folder
2. On the activities page, add a paragraph break after the last paragraph, then type Here are some comments from recent guests describing their favorite activities at the striped Umbrella.
3. Add another paragraph break– Click Insert on the Menu bar– Point to Media, click Plugin, browse to find the
interviews.mp3 file in your website assets folder– Double-click interviews.mp3
4. Select the plug-in placeholder, then use the Property inspector to change the W value to 200 and the H value to 20
Adobe Dreamweaver CS6 - Illustrated
Adding Sound
5. Click Parameters in the Property inspector, click the Add button, enter autostart for a Parameter and false for the value, as shown in Figure H-16, then click OK
6. Save the activities page, preview the page in a browser, then play the file, as shown in Figure H-17
7. Close the browser, then switch to code view
8. Scroll to locate the <embed> tag for the audio file, delete the ending < /embed> tag at the end of the line, then save your work, switch back to Design view, and close the page
Adobe Dreamweaver CS6 - Illustrated
Adding Sound
Adobe Dreamweaver CS6 - Illustrated
Adding Sound
Adobe Dreamweaver CS6 - Illustrated
Adding Sound
Adobe Dreamweaver CS6 - Illustrated
Updating Files
1. Open the file dwh_2.html from the folder where you store your Unit H Data Files– Save it as fishing.html in the striped_umbrella local site
root folder, overwriting the existing fishing page but not updating links
2. Click the broken graphic placeholder– Click the Browse for File button next to the src text box in
the Property inspector– Browse to where you store your Unit H Data Files, open
the assets folder, then double-click the file fisherman.jpg to copy the file to the striped_umbrella assets folder
3. Deselect the image placeholder
4. Close the file dwh_2.html, close the fishing page, then switch back to Design view
Adobe Dreamweaver CS6 - Illustrated
Updating Files
5. Open the file dwh_3.html from where you store your Unit H Data Files, then save it as cruises.html in the striped_umbrella local site root folder, overwriting the existing cruises page but not updating links
6. Close the dwh_3.html page– Click the broken graphic placeholder, click next to the src
text box in the Property inspector– Browse to where you store your Unit H Data Files, open
the assets folder, double-click the file boats.jpg– Click Yes to copy the file to the striped_umbrella assets
folder, then click Save
7. Deselect the image placeholder
8. Save and close the page, then exit Dreamweaver
Adobe Dreamweaver CS6 - Illustrated
Updating Files
Adobe Dreamweaver CS6 - Illustrated
Clues to Use
• Using HTML5 compliant media tags– Use HTML5 tags to insert and format your media
content– To insert video files, use <video> tags– To insert audio, use <audio> tags
Adobe Dreamweaver CS6 - Illustrated
Incorporating Web 2.0 Technology
• RSS feeds and podcasts• Social networking
– Example: Facebook
• Wikis– Example: Wikipedia
• Blogs• Video sharing applications
– Examples: Skype, Google Video Chat
Adobe Dreamweaver CS6 - Illustrated
Adobe Dreamweaver CS6 - Illustrated
Design Matters
• To incorporate Web 2.0 components:– Register to set up an account on the social
networking site– Place a link on one of your site’s pages
• Opens your page on the social networking site
– Download logos from social networking sites
Adobe Dreamweaver CS6 - Illustrated
Unit Summary
• Understand media objects• Add Flash objects• Add behaviors• Edit behaviors• Add rollover images• Add video• Add sound• Update files• Incorporate Web 2.0 technology
Adobe Dreamweaver CS6 - Illustrated