Transcription
Adobe Dreamweaver CS6Project 3 guideHow to add rich media to a web pageTo add interest and interactivity, you can easily add rich media to web pages. Rich media includes most kinds ofvideo, Flash videos, audio files, and interactive Flash content.When building web pages that will be viewed across different devices and screen sizes, consider using HTML5.HTML5 video is emerging to become the new standard way to show video on the web. Dreamweaver supports theHTML5 video tag that allow users to play video files in a browser, without an external plug-in or player(Figure 1).Figure 1 Viewing HTML5 video in a browserHTML5 videoThere are a few steps you need to accomplish before setting up your web page for HTML5 rich media. Create a video in H264 format. You can use the Adobe Media Encoder CS6 or the website www.onlineconvert.com to convert video into a range of formats. If you want viewers to be able to play your video in aFirefox browser, you should also create a WebM or Flash (FLV) version of your video. Create a poster image that is the same size and orientation as the video. This graphic provides a splashscreen for viewers to see while the video is downloading. If no poster is specified, a browser will display thefirst frame of the video. Include a folder named video in your site, and place the video file and poster image in it.Once a video is embedded in a page, you can use Live view in the Document window to render and preview richmedia.Note: Although you can embed rich media in your web page, Live view does not always render all videos. The audioand video tags are supported in Dreamweaver by using the Apple QuickTime plug-in. In Windows, if the AppleQuickTime plug-in is not installed, then the web page does not render the media content. 2012 Adobe Systems IncorporatedHow to add rich media to a web page1
Project 3 guideAdobe Dreamweaver CS6To create the HTML5 page and video:1. Start Dreamweaver.2. Select File New.The New Document dialog box opens (Figure 2).3. Click the Blank Page category link if not already open,and select HTML from the Page Type column, and none from the Layout column.4. Select the HTML5 document type from the DocTypepop-up menu.5. Click the Create button.6. Save the new document (File Save).DocType pop-up menuThe Save As dialog box opens.7. Navigate to your Dreamweaver site folder, name the file,and click Save.Figure 2 New Document dialog box8. Click the Split button in the Document toolbar at the topof the document window (Figure 3).Code view and Design view are visible in the documentwindow.Figure 3 Document toolbarYou work in Code view in the next steps as you set up thevideo player with the specifications for your own videofiles.9. In Code view, locate the body tag, and place theinsertion point at the end of the the opening body tag.Figure 4 Code hints10. Press Enter (Windows) or Return (Mac OS) to create anew line for code.11. Type vi and then press Tab to complete the beginning ofthe video tag.12. Press the spacebar and type src and then press Tab tocomplete the the source parameter.The Browse link appears (Figure 4).13. Click the Browse link to open the Select File dialog box.14. Navigate to the H.264 video file you saved to the videofolder and double-click that file to select it.Figure 5 Code hints15. Press the spacebar and then double-click Controls fromthe list of code hints (Figure 5).This adds a parameter to tell the browser to displayplayback controls with the video.16. Press the spacebar and type po and then press Tab tocomplete the the poster parameter.The Browse link appears.2How to add rich media to a web page 2012 Adobe Systems Incorporated
Adobe Dreamweaver CS6Project 3 guide17. Click the Browse link to open the Select File dialog box.18. Navigate to the poster file you saved to the video folder and double-click that file to select it.19. Press the spacebar and type prel and then press Tab to complete the the preload parameter.20. Select Auto from the list of available options.The preload parameter tells the browser to load the entire video when the page loads.Figure 6 Sample code21. Place the insertion point after the closing preload quote.22. Press the spacebar and then type /.Dreamweaver will complete the closing tag /video .23. Place the insertion point before the closing tag /video .24. Press Enter (Windows) or Return (Mac OS) twice to create a blank line for code.25. Enter (or copy and paste) the following code just before the closing video tag: p Your browser does not support HTML5 video. Click here to download it. /p You’ve added text that will display in browsers that don't support HTML5, but you need to add a link to the fileso users can download it.26. In Code view, highlight the sentence Click Here To Download It.27. Click in the Design window to update the preview.28. Drag the Point-To-File icon (target icon) at the right of the Link box in the Property inspector and point to thevideo in the Files panel.A link is created to the video file as in Figure 7.Figure 7 Sample code29. Save the file (File Save). 2012 Adobe Systems IncorporatedHow to add rich media to a web page3
Project 3 guideAdobe Dreamweaver CS630. Select File Preview In Browser, and select a browser topreview the video in a web browser (Figure 8).Figure 8 Test movie in browserTroubleshooting support for FirefoxTo this point, you’ve embedded a video file in a web page using the HTML5 Video element (tag), and added a linkthat displays a message if a viewer tries to watch the video in a browser that doesn't support HTML5. This approachworks well across versions of current browsers including Chrome, Safari, and Internet Explorer. Unfortunately, thevideo won't play in Firefox because it does not support H.264 video. Because Firefox does support HTML5, the textlink to open the video in a new browser window also won't display. This problem is typical of the kind of issues you'llencounter with HTML5 video: it’s still a work in progress.You can check with the W3C for the latest information about browser support for HTML5 video at www.w3.org/wiki/HTML/Elements/video.To add support for a Firefox browser:1. Add a simple message after the closing video tag: p Firefox viewers click here to watch thevideo. /p 2. Create a link to a version of the video in one of theformats that Firefox supports, such as WebM or FlashVideo (FLV).4How to add rich media to a web page 2012 Adobe Systems Incorporated
Adobe Dreamweaver CS6Project 3 guideAbout FLA, SWF, and FLV file typesBefore you use Dreamweaver to insert content created with Adobe Flash, you should be familiar with the followingfile types:FLA file (.fla) the source file for any project, created in Flash. This file type can be opened only in Flash (not inDreamweaver or in browsers). In Flash, you can publish a FLA file as a SWF file to use in browsers.SWF file (.swf) a compiled version of the FLA (.fla) file, optimized for viewing on the web. This file can beplayed back in browsers and previewed in Dreamweaver, but cannot be edited in Flash.FLV file (.flv) a video file that contains encoded audio and video data that can be played in Flash Player. If youhave a QuickTime or Windows Media video file, use an encoder such as Flash Video Encoder or SorensenSqueeze to convert the video file to an FLV file.Adding FLV video to a web pageYou can easily add FLV video to your web pages without using the Flash authoring tool. You must have an encodedFLV file before you begin. Dreamweaver inserts a SWF component that displays the FLV file; when viewed in abrowser, this component displays the selected FLV file, as well as a set of playback controls. You can also use Liveview to provide a non-editable, more realistic rendering of how the page will appear in a browser. Live view does notreplace the Preview In Browser command, but provides another way of seeing what your page looks like “live,”without having to leave the Dreamweaver workspace.To add an FLV video to a web page:1. Start Dreamweaver and open the document in which youwant to insert the FLV video.2. Place the insertion point in Design view where you wantto add the FLV video.3. Select Insert Media FLV.The Insert FLV dialog box opens (Figure 9).4. Click the Browse button to the right of the URL text box.5. Locate and select the Flash video (FLV), and then clickOK (Windows) or Open (Mac OS).6. In the Insert FLV dialog box, select ProgressiveDownload Video from the Video Type pop-up menu.The Progressive Download Video option enables visitorsto see movies as they download instead of waiting untilthe entire movie has downloaded.Figure 9 Insert FLV dialog boxNote: The Streaming Video option requires the use ofAdobe Flash Media Server.7. Fill in the Width and Height boxes.Dreamweaver requires this information to include thevideo.8. Select a skin from the Skin pop-up menu.This determines the appearance of the Flash videoplayback controls (Figure 10). 2012 Adobe Systems IncorporatedFigure 10 Flash video in a browser with Clear SkinselectedHow to add rich media to a web page5
Project 3 guideAdobe Dreamweaver CS69. Select the Auto Play option to cause the video to playwhen the page loads.10. Select the Auto Rewind option to cause the video torewind automatically when it reaches the end.11. Click OK to close the dialog box and insert the video.A Flash Video placeholder appears in your document(Figure 11).Note: If the Copy Dependent Files dialog box opens,click OK to copy the necessary scripts to your site forproper playback of the video.12. Save the document.13. In Design view, click the Live View button in theDocument toolbar.Figure 11 Flash Video placeholderAdding Flash movies (SWF files) to a web pageYou add a Flash movie just as you would an image, by browsing to and selecting the Flash file. The file extension ofFlash movies is SWF.To add a SWF file to a web page:1. Start Adobe Dreamweaver and open the document inwhich you want to insert the Flash movie.2. Place the insertion point in Design view where you wantto add the Flash movie.3. Select the Common category in the Insert panel.4. Click the down arrow on the Media button and selectSWF in the pop-up menu (Figure 12).The Select SWF dialog box opens (Figure 13).Figure 12 Media pop-up menuFigure 13 Select SWF dialog box6How to add rich media to a web page 2012 Adobe Systems Incorporated
Adobe Dreamweaver CS6Project 3 guide5. Locate and select the Flash movie (SWF), and then clickOK (Windows) or Open (Mac OS).The Object Tag Accessibility Attributes dialog box opens(Figure 14).6. In the Title text box, type a brief title to identify themovie’s contents. Then click OK.A Flash content placeholder, rather than a scene from theFlash movie itself, appears in your document(Figure 15). This is because the page is pointing to theFlash SWF file. When a visitor opens this page, thebrowser plays the SWF file.Figure 14 Object Tag Accessibility Attributesdialog boxTo determine how the movie plays when the page loads,you set options in the Properties panel.7. Make sure the Flash content placeholder is selected.8. In the Properties panel (Figure 15), select the Loopoption to cause the movie to repeat as long as the visitoris on the page. Or, if you don’t want the movie to loop,make sure that the Loop option is not checked.9. Select the Autoplay option to cause the movie to playwhen the page loads.10. To test the movie, click Play.Dreamweaver plays the Flash file in the document,showing you what visitors will see when they view thepage in a browser.11. When you are finished viewing the Flash movie, clickStop in the Properties panel.Figure 15 Flash movie placeholder in the Document window and Properties panel 2012 Adobe Systems IncorporatedHow to add rich media to a web page7
Project 3 guideAdobe Dreamweaver CS6Editing a SWF file from Dreamweaver in FlashIf you have both Flash and Dreamweaver installed, you can select a SWF file in a Dreamweaver document and useFlash to edit it. Flash does not edit the SWF file directly; it edits the source document (FLA file) and re-exports theSWF file.To edit a SWF file from Dreamweaver:1. In Dreamweaver, open the Properties panel (Window Properties).2. In Design view, click the SWF file placeholder to selectit; then in the Properties panel, click Edit.3. In Flash, browse to locate and then select the FLA file.Edit the FLA file as you choose.Figure 16 Flash edit barThe Flash edit bar indicates that you are modifying thefile from within Dreamweaver (Figure 16).4. When you finish making edits, click Done in the Flashedit bar (in the upper-left corner of the workspace).Flash updates the FLA file and re-exports it as a SWFfile.5. Return to Dreamweaver.6. To view the updated file in the document, click Play inthe Properties panel (Figure 17) or press F12 to previewyour page in a browser window.Figure 17 Flash movie, Play mode, in the Dreamweaver Document window8How to add rich media to a web page 2012 Adobe Systems Incorporated
Adobe Dreamweaver CS6Project 3 guideAdding audio to a web pageYou can add sound to a web page. There are several different types of sound files and formats, including .wav, .midi,.mp3, and .ogg . Some factors to consider before deciding on a format and method for adding sound are its purpose,your audience, file size, sound quality, and differences in devices and web browsers.There are two methods for adding audio to a web page: Use a plug-in or encode your page using HTML5.When using a plug-in, remember that sound files can be handled differently and inconsistently by different browsers.For more information about common audio file formats along with some of the advantages and disadvantages of eachfor web design, see Dreamweaver Help, Audio File Formats.HTML5 provides additional flexibility for adding audio files to web pages without a plug-in. However, devices andweb browsers must support the new standard for the audio to work properly. You use the audio element to embedan audio file on a web page. As with HTML5 video files, be sure to convert your audio files into three supportedformats: .ogg, mp3, and .wav. These sources are listed in the audio tag, and the browser will use the firstrecognized format.Note: When incorporating sound files in your web pages, carefully consider their appropriate use in your web siteand how visitors to your site use these media resources. Always provide a control to either enable or disable theplaying of the sound, in the event that visitors don’t want to listen to the audio content.To add an audio file by using a plug-in:1. Start Dreamweaver and open the document in which you want to add sound.2. In Design view, place the insertion point where you want to embed the file and select Insert Media Plugin.3. Browse for the audio file and click OK (Windows) or Open (Mac OS).4. Enter a width and height in the W and H text boxes in the Properties panel or by resizing the plug-in placeholderin the Document window (Figure 18).These values determine the size at which the audio controls are displayed in the browser. Audio controls have nofixed dimension so find a size that is suitable for the web page in which it is used. For the example in Figure 18,the size is set to 257 W x 128 H.5. Save the file.6. Select File Preview In Browser, and then select a browser to preview the audio in a web browser.Figure 18 Audio plug-in placeholder in the Document window and Properties panel 2012 Adobe Systems IncorporatedHow to add rich media to a web page9
Project 3 guideAdobe Dreamweaver CS6To add an audio file by using HTML5:1. Create a new HTML5 document, or open an existing HTML5 document in which you want to add audio.2. Click the Split button in the Document toolbar at the top of the document window.3. In Code view, enter (or copy and paste) the following code between the body tags, substituting your folderand filename paths for the placeholders in the code: audio controls source src "folder/song-title.ogg" type "audio/ogg" / source src "folder/song-title.mp3" type "audio/mpeg" / source src "folder/song-title.wav" type "audio/wav" / p Your browser does not support the audio element. /p /audio The control attribute adds audio controls, like play, pause, and volume. The text at the end of the audio tag isfor browsers that do not support the element.The folder and filename paths for the sample site are shown in Figure 19.Figure 19 Sample code4. Save the document.5. Select File Preview In Browser, and then select a browser to preview the audio in a web browser (Figure 20).Figure 20 Test audio in browser10How to add rich media to a web page 2012 Adobe Systems Incorporated
media. Note: Although you can embed rich media in your web page, Live view does not always render all videos. The audio and video tags are supported in Dreamweaver by using the Apple QuickTime plug-in. In Windows, if the Apple QuickTime plug-in is not installed, then the web
