Adobe Dreamweaver CS3 Unleashed- P18

Chia sẻ: Cong Thanh | Ngày: | Loại File: PDF | Số trang:50

Thêm vào BST

Báo xấu

72
lượt xem 8
download

Download Vui lòng tải xuống để xem tài liệu đầy đủ

Adobe Dreamweaver CS3 Unleashed- P18: The good news is Dreamweaver provides numerous windows, panels, inspectors, and toolbars for streamlining the way you build websites. The bad news, unfortunately, is that Dreamweaver provides numerous windows, panels, inspectors, and toolbars for streamlining the way you build websites. Why so many windows, panels, and so on, Dreamweaver is unprecedented in the feature set it provides, allowing developers complete control when building websites and applications....

Chủ đề:

Bình luận(0) Đăng nhập để gửi bình luận!

Lưu

Nội dung Text: Adobe Dreamweaver CS3 Unleashed- P18

1. Open the embeddingvideo.html page if it's not open already. 2. With the existing video clip selected, click the Parameters button in the Property inspector. The Parameters dialog appears. 3. Enter the parameter name Loop in the Parameter column and the value True in the Value column similar to Figure 17.4. Figure 17.4. Enter the Loop parameter and set the value to True. 4. Click OK. 5. Save your work. Preview your page in the browser by pressing F12 (Option+F12). This time the movie loops as soon as it reaches the end. Similar to QuickTime movie files, RealMedia files can also accept parameters. Table 17.3 outlines the parameters supported by RealMedia files. Table 17.3. Supported RealMedia Parameters RealMedia Parameter Values Autostart True or False Console Name, _master, _unique Controls All, controlpanel, imagewindow, infovolumepanel, infopanel, playbutton, positionslider, positionfield, statuspanel, statusbar, stopbutton, statusfield, and volumeslider Nolabels True or False By default, RealMedia files have an interface that resembles Figure 17.5 when viewed in the browser. As you can see, the default interface is nonintuitive and doesn't resemble a typical RealMedia player interface.
Figure 17.5. The default RealMedia interface isn't very intuitive. [View full size image] With the addition of a couple parameters, we can customize this interface to look a bit more traditional. To do this, follow these steps:
1. With the embeddingvideo.html page open, select the existing QuickTime movie in the Document window and delete it. 2. Choose the Insert, Media, Plugin option. Browse to the surfing.rm movie and click OK. 3. When the plug-in icon appears on the page, select it and change the width and height properties in the Property inspector to 320 by 240. 4. Click the Parameters button in the Property inspector to launch the Parameters dialog. 5. Add the two parameters Autostart and Controls, setting their values to True and Imagewindow, respectively. The result resembles Figure 17.6. Figure 17.6. Enter the Autostart and Controls parameters for the RealMedia file. 6. Click OK. 7. Save your work. Preview your page in the browser by pressing F12 (Option+F12). This time, the movie starts automatically and doesn't display the control panel as it did in Figure 17.5. Encoding Flash Video As mentioned earlier, Flash Video is the newest video format supported by Flash Player 7 and later. Working with Flash Video on the Web is similar in process to the other three video formats except for a couple of minor nuances. First, a standard video file must be encoded using the Flash Video Encoder. Second, the resulting Flash Video file must be imported into the web page in Dreamweaver, as explained in more detail in the next section. The first and most important step in working with Flash Video in your web pages is to encode a standard video file into the Flash Video format. This can be handled in one of many ways. Out of the box, Flash provides the Flash Video Encoder you can use to encode a standard video file into the Flash Video format. To encode a video file into the Flash Video format, follow these steps: 1. Assuming that you have Flash CS3 installed, locate the program directory and choose the Flash CS3 Video Encoder program. The application launches and presents an interface similar to Figure 17.7. Figure 17.7. The Flash Video Encoder interface.
[View full size image] 2. As you can see from Figure 17.7, the interface is fairly simple and requires little explanation. To encode a Flash Video file, add a video file to the list; modify the encoding settings as needed; and then begin the queue processing. At this point the Flash Video Encoder encodes your file format to the Flash Video format. Before we get too far ahead of ourselves, however, let's add the movie to the queue. To do this, click the Add button. The Open dialog appears. Browse to the surfing.wmv file and click Open. The movie file format appears in the list. 3. By default, video files are encoded using the default Medium Quality setting and is shown in the Settings column after a file has been added to the list. To modify this setting, click the Settings button. The Flash Video Encoding Settings dialog appears, similar to Figure 17.8. Figure 17.8. Use the Flash Video Encoding Settings dialog to change the default encoding settings for the Flash Video file. [View full size image]
4. Initially, the Flash Video Encoding Settings dialog displays an encoding profile drop-down menu. From this menu, select a predefined encoding setting (options include Flash 7 and Flash 8 and quality settings from Low to High). You can also click the Show Advanced Settings button to display a complete list of modifiable settings. One of the many settings we might want to take advantage of from this list is Crop and Resize. Switching to this tab reveals cropping sliders you can use to crop the black border out of the video file. 5. Experiment with the many settings available from the Show Advanced Settings menu. For now, limit your video modifications to cropping the black border and click OK. 6. To begin the encoding, click the Start Queue button. The Flash Video Encoding Settings dialog begins encoding the video file frame by frame. The progress is tracked with the progress indicator similar to Figure 17.9. Figure 17.9. The progress indicator displays the encoding progress. [View full size image]
7. When the encoding finishes, close the Flash Video Encoding Settings dialog by clicking the Close button in the top-right corner of the dialog. The new surfing1.flv file appears in the Media folder of the Vecta Corp project. However, you don't have to use the Flash Video Encoder exclusively. The following programs also support encoding of Flash Video: Adobe After Effects Apple Final Cut Express Apple Final Cut Pro Apple QuickTime Pro Avid Media Composer Avid Xpress DV and Avid Xpress Pro Sorenson Squeeze Unless you're using Sorenson Squeeze, you'll need to install the Flash Video Exporter to encode Flash Video
directly from the programs just listed. The Flash Video Exporter can be found at the following URL: www.adobe.com/devnet/flash/articles/flv_exporter.html. Embedding Flash Video One of the features introduced in Dreamweaver 8 is the capability to insert and customize various parameters of Flash Video files directly. Formerly a $99 software purchase known as the Flash Video Kit, Dreamweaver CS3 now includes the feature for free. To embed a Flash Video file into a web page using Dreamweaver CS3, follow these steps: 1. Open the embeddingvideo.html page if it's not open already. 2. Select the current video clip (surfing.rm) in the Document window and remove it by pressing the Delete key on your keyboard. 3. To import the FLV file created in the previous section, choose Insert, Media, Flash Video. The Insert Flash Video dialog appears (see Figure 17.10). Figure 17.10. The Insert Flash Video dialog facilitates the modification and subsequent insertion of Flash Video files into your web pages. [View full size image]
4. Later in this section, we'll discuss the various properties outlined in this dialog. For now, click the Browse button and locate the surfing1.flv file. 5. Enter the values 320 for width and 240 for height and click OK. The Flash Video file is inserted into your web page. Your screen will appear similar to Figure 17.11. Figure 17.11. The Flash Video file is inserted into your web page. [View full size image] 6. Save your work. To view the Flash Video file in the browser, press F12 (Option+F12). Notice that the video file appears in the browser. Click the Play button to begin playing the clip. Aside from simply browsing to and inserting a Flash Video file into the web page, you can also customize the following parameters outlined by the Insert Flash Video dialog: Video type— Select one of the two options from this menu to have the video file either progressively download or stream to the user. URL— Enter the relative or absolute path of the Flash Video file into this text box. Skin— Choose a skin for the video file. The skin you choose here customizes the look of the playback controls as well as the progress indicator.
Skin preview— This window displays an image preview of the skin you choose from the Skin drop- down menu. Width and Height— Enter the width and height (in pixels) for the video file. Constrain— Enable this check box to automatically constrain (maintain the aspect ratio of) the width and height of the video file. Detect Size— If you've forgotten the width and height of the video file, click this button to automatically detect these values for the selected video file. Auto play— Enable this check box to have the video file automatically begin playing when the page loads for the first time or when the browser is refreshed. Auto rewind— Similar to loop functionality, enable this check box to have the video file automatically rewind and begin playing if the Auto Play check box is enabled. Depending on your needs, customize the properties as you see fit. Most of these properties are also available from the Property inspector after a Flash Video file has been inserted. Note After you've inserted the Flash Video file into your web page, you'll notice a few new files in the Files panel. Clear_Skin_1.swf, FLVPlayer_Progressive.swf, and Scripts\AC_RunActiveContent.js are files that Dreamweaver will copy into your directory by default. The two SWF files are the interface files that the page needs to skin and provide playback controls for the video in the browser. The directory Scripts and associated AC_RunActiveContent.js are placed in the directory as a way of preventing that annoying Click to Use and Activate This Control tooltip from appearing when you roll your cursor over an embedded video file within Internet Explorer.
Audio on the Web Audio on the web isn't a new phenomenon. In fact, record labels, bands, and websites such as Napster, Purevolume.com, Real's Rhapsody (formally Listen.com), iTunes, eMusic, and others offer direct downloads and streaming audio directly from their websites at a fraction of the cost of buying the CD from a music store—and have been doing it for years now. With the number of mobile music devices on the market, it's obvious that Internet-based audio, including the distribution of music online, is the most exciting and potentially earth-shaking aspect of the Internet audio scene. In an effort to keep up with the latest trends, you might be thinking that it's time to begin adding audio to your website. Whether you want to add faint ambient background music or direct downloads of your band's work, adding audio to your web pages in Dreamweaver is simple. The rest of this chapter deals with adding audio to your websites using Dreamweaver. As you'll see, working with audio is similar, if not closely related to, working with video; adding these types of media to your websites is no more complicated than including images and text. Audio File Formats Many audio formats are in use today, spanning various platforms and operating systems. Table 17.4 outlines the most common audio formats on the Web. You might already be familiar with some of these. Table 17.4. Audio File Formats Common on the Web Audio Format Extension Description AIFF .aiff Developed by Apple, the Audio Interchange File Format can be played in most browsers. However, refrain from using this format in your web pages because the file size is usually large. Dolby AAC .m4a www.dolby.com/consumer/technology/aac.html Flash .swf Although you might think that Flash's only purpose is to create slick animated movies, think again. Because most browsers support the Flash plug-in, think about exporting your audio files as PCM- or MP3-compressed Shockwave Flash movies. MIDI .mid Developed in the 1980s by electronic musical instrument manufacturers, the MIDI audio file is an extremely small synthesized audio format. MIDI files were the most common audio format in the 1990s because of their small file size. If you want to hear what your favorite musician sounds like on a keyboard, convert the MP3 to a MIDI file and listen. MP3 .mp3 The most widely known audio format on the Web today is the MPEG Audio Layer 3 or MP3 file format, and for good reason. MP3 files are high-quality (sometimes CD quality) files that offer excellent compression. MP3 files are also widely supported by nearly every audio and video player, including RealPlayer, QuickTime Player, Windows Media Player, WinAmp, iTunes, and more. Because of bandwidth increases, the MP3 file format has become more popular and is taking over as the de facto standard. QuickTime .mov A QuickTime movie with audio only.
Audio Format Extension Description RealAudio .ra RealAudio is the audio component of RealMedia. This format is also widely adopted by a variety of players on the market today and offers good-quality audio at low bit rates. However the quality is still not as good as MP3. WAV .wav Codeveloped by Microsoft and IBM, WAV files are the default audio format for Windows operating systems. Like AIFF on a Mac, WAV files can be played in most browsers, but you should avoid using them on your web pages because of their rather large file size. Windows .asx, When you're working with Microsoft's Windows Media .wma Media Streaming Server, these audio files are generally available. As you can see, you have numerous options at your fingertips. Depending on your project, you might not have to look any further than MP3. MP3 files are quality, highly compressed audio files that can play in nearly all audio players and in nearly all browsers. For the following examples, we'll use the MP3 format because it's the most universal. Linking to Audio Files Linking to audio files in your site can be accomplished just as easily as linking video clips. Simply add a link to your web page and point the link source to the MP3 file. When the user clicks the link on the page, the browser loads the appropriate media player and attempts to play the clip. To add a link to your web page that plays an MP3 audio file, follow these steps: 1. Open the linkingaudio.html page included with the download files for this chapter. Notice the bullet point for linking the audio file. 2. Highlight the bullet point and drag the point-to-file icon into the spitalfield.mp3 file located in the Media folder. 3. Save your work. Preview the page in the browser by choosing F12. When the page loads in the browser, click the link. As you can see from Figure 17.12, the browser prompts you with a dialog asking whether you want to save the file to disk to play later (direct download) or if you want to open the file directly from the server and play it within the appropriate audio player (progressive download). Figure 17.12. The browser prompts you with a dialog asking you to either save the file to disk or open it directly in the appropriate audio player.
Embedding Audio Files The upside to linking audio files in the browser is that it gives users a chance to play the audio file when they want to. If you're a musician, linking your audio files to your web pages gives you the opportunity to allow your fans to download your music directly from your website. Of course, the downside to linking audio files from your web pages is also the fact that your fans can download your music directly from your website. Suppose that you don't want users to freely download and distribute your audio files? You can do one of two things: First, you can sample a small portion of the entire clip and post that on your web page. Second, you can embed the clip into the web page. When you embed the clip, you can provide users with the ability to stop, play, set the volume, and use a slider to pan to a specific portion of the audio clip. The obvious benefit is that users can listen to the entire clip but cannot save the clip to disk. Caution When embedding audio clips into your web pages, it's crucial that you take your user's sensitive ears into consideration. Unsuspecting users who might have accidentally turned the volume up on their speakers could easily browse to your page and be startled when the audio starts. You should always give your viewers a method of stopping any audio that's playing in your pages. To embed audio in a web page, follow these steps:
1. Open the embeddingaudio.html page. 2. Place your cursor just under the paragraph of text and choose Insert, Media, Plugin. 3. Browse to the spitalfield.mp3 file located in the Media folder and click OK. A new plug-in icon appears on the page. 4. The plug-in icon's size varies with the audio player you are targeting. For Windows Media player, a good size is 320 pixels wide by 45 pixels high. Change the values for the W and H settings in the Property inspector so that it resembles Figure 17.13. Figure 17.13. Resize the plug-in icon to coincide with the default Windows Media player size. [View full size image] 5. Save your work. Preview the page in the browser by pressing F12 (Option+F12). When the page loads in the browser, the audio clip begins playing in an instance of Windows Media player directly within the browser (see Figure 17.14). Figure 17.14. The audio clip begins playing in an instance of Windows Media player directly in the browser. [View full size image]
Note The MP3 file began playing in Windows Media Player because that's my operating system's default media player. Results vary, depending on which player is configured to run for a specific file type on your system. In this example, we used Windows Media Player to play our MP3 clip. Depending on the file type of the audio clip, the appropriate player is automatically chosen by the browser. In some rare cases, visitors to your website might not have an audio player installed to handle playing audio files directly in the browser. If this is the case, the user can click the plug-in icon. The browser redirects the user to the appropriate page for downloading plug-ins required to play audio files within the browser. Playing Background Music When used tastefully, faint ambient background music can be an added plus to your website. As mentioned in the previous section, however, if you use music inappropriately (adding blaring music that starts without notice), your users will wish they never visited your site and will probably quickly close the page. To add background music to your web page, follow these steps:
1. Open the backgroundmusic.html file. 2. Place your cursor just under the paragraph of text and choose Insert, Media, Plugin. 3. Browse to the ambient.mp3 file located in the Media folder and click OK. A new plugin icon appears on the page. Keep the plug-in icon's default size (its size won't matter in this case). 4. Select the plug-in icon and click the Parameters button in the Property inspector. The Parameters dialog appears. 5. Add the hidden, autostart, and loop parameters and set all their values to true. 6. Click OK to close the Parameters dialog box. 7. Save your work. Preview the page in the browser by pressing F12 (Option+F12). When the page loads in the browser, the audio clip begins playing faintly in the background. Notice that the default audio player is hidden from view and that the clip loops to the beginning to produce continuous sound.
Summary Adding media such as rich video and audio is a great way to add depth to your site. And both of these mediums can remain optional for the end user. Although both options require plug-ins in the user's browser, they often add to the uniqueness of your website's existing content. With web users demanding more from their web experiences, offering digital video and audio on your site might just be the ticket for getting them to return to your site time and time again. In the next few chapters, we'll stray from the traditional mediums of animation, video, and audio and look at Dreamweaver's integration with the complementary programs Fireworks, Photoshop, and Flash.
Chapter 18. Integrating with Fireworks and Photoshop IN THIS CHAPTER Specifying External Editors Editing Images in Dreamweaver with Fireworks or Photoshop Browsing Images in Adobe Bridge Replacing Image Placeholders Optimizing Images Creating Buttons Using Fireworks Inserting Fireworks HTML Creating a Web Photo Album Adobe's Fireworks and Photoshop have grown to become two of the premier image-editing programs used by graphics professionals. With features that allow for quick optimization, cropping, and resizing of images, combined with the power to make colors transparent, change contrast, and color balance, it's clear why they have become the standard for web professionals as well. Fireworks has always been primarily geared toward image creation, editing and optimization for web development. When was the last time you built a website for a client who thought everything was perfect the first time around? In the real world, this is never the case. Fortunately, Dreamweaver's integration with image editing programs like Fireworks and Photoshop makes it simple to quickly edit and optimize images directly from Dreamweaver. With a simple click of an icon within the Property inspector in Dreamweaver, you can quickly and effortlessly launch graphics for editing purposes within either Fireworks or Photoshop. After you've made a change to the graphic, you click Done in Fireworks or Save in Photoshop, and the image is instantly updated in Dreamweaver. Gone are the days of fumbling for original images, opening them directly in a dedicated image-editing program, making changes, exporting your work, saving the original, and then reimporting the completed image into Dreamweaver. In this chapter, we'll harness the web-centric power that Fireworks and Photoshop provide. We'll browse for images, edit and optimize images, create new images, use Fireworks HTML code, and even create a full- featured web photo album with little to no effort. To take advantage of these integration features, however, it's important to have these programs installed on your computer. If you don't have access to full versions of Fireworks or Photoshop, you can download the trial versions from Adobe's website at www.adobe.com/products/fireworks/ and www.adobe.com/products/photoshop/. Note This chapter assumes that you've purchased a standalone version of Dreamweaver. If that's the case, Fireworks and Photoshop won't be installed by default. You'll either have to purchase the software separately or download the trial versions for use as you complete the exercises in this
chapter. Additionally, you might have purchased Adobe Creative Suite 3 Web Premium or Adobe Creative Suite 3 Web Standard. If that's the case, Fireworks is included with both. Photoshop, on the other hand, is included only with Adobe Creative Suite 3 Web Premium. As you've done with the rest of the chapters in this book, you can work with the examples in this chapter by downloading the files from www.dreamweaverunleashed.com. You'll want to save the files for Chapter 18 in an easy-to-find location. I'll place mine in C:\VectaCorp\Chapter18. Also, don't forget to update your site reference in Dreamweaver to point to the newly created folder. Specifying External Editors Depending on the order in which you installed Dreamweaver and Fireworks/Photoshop, you might have to make changes to the File Types/Editors category in the Preferences dialog. Options within the File Types/Editors category in the Preferences dialog exist to allow Dreamweaver to establish communication and easily send files to its sibling programs such as Fireworks and Photoshop. In Chapter 4, "Defining Preferences," you learned that the File Types/Editors category in the Preferences window, shown in Figure 18.1, allows you to specify which external applications you want to handle image editing for specific file types. Another option that you might notice right away is a text box for defining the path to Fireworks. Dreamweaver uses this path when sending image files (such as GIF, JPG, and PNG) specifically to Fireworks during round-trip editing scenarios. We'll discuss this in more detail later. Figure 18.1. In the Preferences dialog, under the File Types/Editors category, you can specify which application you want to use to edit a particular file type. Additionally, when working with round-trip editing, you might want to specify the path to Fireworks on your computer. [View full size image] Because PNG files are native to Fireworks and have the potential for use on the web, we'll use this
opportunity to associate the PNG file format with Fireworks (assuming that it isn't already associated). To set the application association, follow these steps: 1. Open the Preferences dialog by choosing Edit, Preferences (Dreamweaver, Preferences). 2. In the Preferences dialog, choose the File Types/Editors category. 3. In the File Extension list, choose the file extension you want to (re)associate with an application. For now, select the PNG file format. 4. Click the Add (+) button just above the Editors option box to launch the Select External Editor dialog. 5. With the Select External Editor dialog open, navigate to C:\Program Files\Adobe\Adobe Fireworks CS3\fireworks.exe (/Applications/Adobe Fireworks CS3/Adobe Fireworks CS3.app) and click Open. Notice that the new editor is added to the Editors list, associating itself with the PNG file format. 6. If you have more than one application associated with a particular file type and prefer to use the application you just selected as the default, highlight it in the Editors list and click the Make Primary button. Notice that to the right of the application name, it reads (Primary). This application acts as the default editor when you ask Dreamweaver to edit that particular file type. Note Associating PNG files with Fireworks is a step in the right direction. Because PNG files are native to Fireworks, it makes sense to make this association. Depending on the graphics editor you prefer, you might also want to set Fireworks as the primary editor for GIF and JPG files. Of course Fireworks isn't the only program you might decide to use with the PNG, GIF, and JPG file formats. Adobe Photoshop is also an excellent alternative. If you'd rather use Photoshop as the default editor, run through the same steps that you went through previously, adding Photoshop from the following path: C:\Program Files\Adobe\Adobe Photoshop CS3\Photoshop.exe (/Applications/Adobe Photoshop CS3/Adobe Photoshop CS3.app). Setting the File Types in the Preferences dialog is a necessary step to ensure integration with Fireworks and Photoshop. With these programs now set, you can easily launch images directly within one of these programs (covered next) by either selecting the image and then choosing the specific program's icon from the Property inspector. Or, you might even decide to right-click (Control+click) onto an image and choose the Edit with Fireworks/Edit with Photoshop options from the context menu. Doing this would launch your image directly within the specific program for editing.
Chapter 18. Integrating with Fireworks and Photoshop IN THIS CHAPTER Specifying External Editors Editing Images in Dreamweaver with Fireworks or Photoshop Browsing Images in Adobe Bridge Replacing Image Placeholders Optimizing Images Creating Buttons Using Fireworks Inserting Fireworks HTML Creating a Web Photo Album Adobe's Fireworks and Photoshop have grown to become two of the premier image-editing programs used by graphics professionals. With features that allow for quick optimization, cropping, and resizing of images, combined with the power to make colors transparent, change contrast, and color balance, it's clear why they have become the standard for web professionals as well. Fireworks has always been primarily geared toward image creation, editing and optimization for web development. When was the last time you built a website for a client who thought everything was perfect the first time around? In the real world, this is never the case. Fortunately, Dreamweaver's integration with image editing programs like Fireworks and Photoshop makes it simple to quickly edit and optimize images directly from Dreamweaver. With a simple click of an icon within the Property inspector in Dreamweaver, you can quickly and effortlessly launch graphics for editing purposes within either Fireworks or Photoshop. After you've made a change to the graphic, you click Done in Fireworks or Save in Photoshop, and the image is instantly updated in Dreamweaver. Gone are the days of fumbling for original images, opening them directly in a dedicated image-editing program, making changes, exporting your work, saving the original, and then reimporting the completed image into Dreamweaver. In this chapter, we'll harness the web-centric power that Fireworks and Photoshop provide. We'll browse for images, edit and optimize images, create new images, use Fireworks HTML code, and even create a full- featured web photo album with little to no effort. To take advantage of these integration features, however, it's important to have these programs installed on your computer. If you don't have access to full versions of Fireworks or Photoshop, you can download the trial versions from Adobe's website at www.adobe.com/products/fireworks/ and www.adobe.com/products/photoshop/. Note This chapter assumes that you've purchased a standalone version of Dreamweaver. If that's the case, Fireworks and Photoshop won't be installed by default. You'll either have to purchase the software separately or download the trial versions for use as you complete the exercises in this