Unit h adobe dreamweaver cs6

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


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


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


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


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



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


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


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


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


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


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


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


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


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



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



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


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


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


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


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


Clues to Use

• Comparing video file formats– AVI– MOV– MP4– FLV– WebM– Ogg


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


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


Adding Sound


Adding Sound


Adding Sound


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


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


Updating Files


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


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



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


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
