Recomendados
Más contenido relacionado
La actualidad más candente
La actualidad más candente (20)
Similar a Unit h adobe dreamweaver cs6
Último
Último (20)
Unit h adobe dreamweaver cs6
- 1. Adding Media and Interactivity
- 2. 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
- 3. 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
- 4. 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
- 5. 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
- 6. Add Flash Objects 4. Type Café logo animation in the Title text box – – – – 5. Click OK Select FlashID in the ID text box in the Property inspector Then type crabdance Press [Enter] (Win) or [return] (Mac) 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
- 7. Add Flash Objects 7. 8. Click the Switch Design View to Live View button – Compare your screen to Figure H-3 Click the Switch Design View to Live View button again – Then close the café page Adobe Dreamweaver CS6 - Illustrated
- 8. Adobe Dreamweaver CS6 - Illustrated
- 9. 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
- 10. 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
- 11. 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
- 12. 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
- 13. 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
- 14. 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 – – – – 3. Click OK Save your changes Preview the page in your browser Click the family_sunset image Close both browser windows Adobe Dreamweaver CS6 - Illustrated
- 15. 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
- 16. 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
- 17. Adding Rollover Images 1. 2. Select the image of the two dolphins, then delete it 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
- 18. 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
- 19. Adding Rollover Images 6. Select the image – – – – 7. 8. 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 Close the browser, then click the Show Code view button Click the Show Design view button Adobe Dreamweaver CS6 - Illustrated
- 20. 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
- 21. Adding Video 3. Browse to your local site assets folder if necessary, – 4. double-click umbrella_anchor_video.mp4, then enter four paragraph breaks after the plug-in placeholder 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
- 22. 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
- 23. 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
- 24. Clues to Use • Comparing video file formats – – – – – – AVI MOV MP4 FLV WebM Ogg Adobe Dreamweaver CS6 - Illustrated
- 25. Adding Sound 1. 2. 3. 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 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. 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
- 26. 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
- 27. Adding Sound Adobe Dreamweaver CS6 - Illustrated
- 28. Adding Sound Adobe Dreamweaver CS6 - Illustrated
- 29. Adding Sound Adobe Dreamweaver CS6 - Illustrated
- 30. Updating Files 1. Open the file dwh_2.html from the folder where you store your Unit H Data Files – 2. Click the broken graphic placeholder – – 3. 4. Save it as fishing.html in the striped_umbrella local site root folder, overwriting the existing fishing page but not updating links 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 Deselect the image placeholder Close the file dwh_2.html, close the fishing page, then switch back to Design view Adobe Dreamweaver CS6 - Illustrated
- 31. 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 – – – 7. 8. 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 Deselect the image placeholder Save and close the page, then exit Dreamweaver Adobe Dreamweaver CS6 - Illustrated
- 32. Updating Files Adobe Dreamweaver CS6 - Illustrated
- 33. 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
- 34. 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
- 35. Adobe Dreamweaver CS6 - Illustrated
- 36. 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
- 37. 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