Adobe Dreamweaver CS3 Unleashed- P18 docx

As youcan 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 dire

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 itreaches 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

infovolumepanel, infopanel, playbutton,positionslider, positionfield, statuspanel,statusbar, stopbutton, statusfield, andvolumeslider

By default, RealMedia files have an interface that resembles Figure 17.5 when viewed in the browser As youcan 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 Documentwindow 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 automaticallyand 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 Workingwith Flash Video on the Web is similar in process to the other three video formats except for a couple ofminor nuances First, a standard video file must be encoded using the Flash Video Encoder Second, theresulting 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 standardvideo file into the Flash Video format This can be handled in one of many ways Out of the box, Flashprovides the Flash Video Encoder you can use to encode a standard video file into the Flash Video format Toencode 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 CS3Video 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 beginthe queue processing At this point the Flash Video Encoder encodes your file format to the Flash Videoformat Before we get too far ahead of ourselves, however, let's add the movie to the queue To dothis, 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 Fromthis 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 fromthis list is Crop and Resize Switching to this tab reveals cropping sliders you can use to crop the blackborder out of the video file

5. Experiment with the many settings available from the Show Advanced Settings menu For now, limityour 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 beginsencoding the video file frame by frame The progress is tracked with the progress indicator similar toFigure 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 supportencoding 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 variousparameters 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 usingDreamweaver 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 theDelete key on your keyboard

3. To import the FLV file created in the previous section, choose Insert, Media, Flash Video The InsertFlash 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 theBrowse 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 thebrowser 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 thefollowing 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 Filespanel Clear_Skin_1.swf, FLVPlayer_Progressive.swf, and Scripts\AC_RunActiveContent.jsare 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 youroll 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 downloadsand streaming audio directly from their websites at a fraction of the cost of buying the CD from a musicstore—and have been doing it for years now With the number of mobile music devices on the market, it'sobvious 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 toyour website Whether you want to add faint ambient background music or direct downloads of your band'swork, adding audio to your web pages in Dreamweaver is simple The rest of this chapter deals with addingaudio 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 includingimages and text

Audio File Formats

Many audio formats are in use today, spanning various platforms and operating systems Table 17.4 outlinesthe 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

AIFF aiff Developed by Apple, the Audio Interchange File Format

can be played in most browsers However, refrain fromusing 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 mostbrowsers support the Flash plug-in, think about exportingyour audio files as PCM- or MP3-compressed ShockwaveFlash movies

MIDI mid Developed in the 1980s by electronic musical instrument

manufacturers, the MIDI audio file is an extremely smallsynthesized audio format MIDI files were the mostcommon audio format in the 1990s because of their smallfile size If you want to hear what your favorite musiciansounds like on a keyboard, convert the MP3 to a MIDI fileand 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 goodreason MP3 files are high-quality (sometimes CD quality)files that offer excellent compression MP3 files are alsowidely supported by nearly every audio and video player,including RealPlayer, QuickTime Player, Windows MediaPlayer, WinAmp, iTunes, and more Because of bandwidthincreases, 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 onthe market today and offers good-quality audio at low bitrates 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 LikeAIFF on a Mac, WAV files can be played in most browsers,but you should avoid using them on your web pagesbecause of their rather large file size

Windows asx, When you're working with Microsoft's WindowsMedia 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 nothave to look any further than MP3 MP3 files are quality, highly compressed audio files that can play innearly all audio players and in nearly all browsers For the following examples, we'll use the MP3 formatbecause 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, thebrowser loads the appropriate media player and attempts to play the clip To add a link to your web pagethat plays an MP3 audio file, follow these steps:

1. Open the linkingaudio.html page included with the download files for this chapter Notice the bulletpoint for linking the audio file

2. Highlight the bullet point and drag the point-to-file icon into the spitalfield.mp3 file located in theMedia 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 youcan 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 itwithin 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.

RealAudio ra RealAudio is the audio component of RealMedia This

format is also widely adopted by a variety of players onthe market today and offers good-quality audio at low bitrates 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 LikeAIFF on a Mac, WAV files can be played in most browsers,but you should avoid using them on your web pagesbecause 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 whenthey want to If you're a musician, linking your audio files to your web pages gives you the opportunity toallow your fans to download your music directly from your website Of course, the downside to linking audiofiles 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 doone 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 withthe ability to stop, play, set the volume, and use a slider to pan to a specific portion of the audio clip Theobvious 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 earsinto consideration Unsuspecting users who might have accidentally turned the volume up on theirspeakers could easily browse to your page and be startled when the audio starts You should alwaysgive 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, agood size is 320 pixels wide by 45 pixels high Change the values for the W and H settings in theProperty 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, theaudio clip begins playing in an instance of Windows Media player directly within the browser (see Figure17.14)

Figure 17.14 The audio clip begins playing in an instance of Windows Media player directly in the

browser.

The MP3 file began playing in Windows Media Player because that's my operating system's defaultmedia player Results vary, depending on which player is configured to run for a specific file type onyour system

In this example, we used Windows Media Player to play our MP3 clip Depending on the file type of the audioclip, 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 audiofiles directly in the browser If this is the case, the user can click the plug-in icon The browser redirects theuser 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 withoutnotice), 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 onthe 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 Parametersdialog 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, theaudio clip begins playing faintly in the background Notice that the default audio player is hidden from viewand that the clip loops to the beginning to produce continuous sound

Adding media such as rich video and audio is a great way to add depth to your site And both of thesemediums 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 sitemight 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 atDreamweaver'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 theyhave become the standard for web professionals as well Fireworks has always been primarily geared towardimage 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 timearound? In the real world, this is never the case Fortunately, Dreamweaver's integration with image editingprograms like Fireworks and Photoshop makes it simple to quickly edit and optimize images directly fromDreamweaver With a simple click of an icon within the Property inspector in Dreamweaver, you can quicklyand effortlessly launch graphics for editing purposes within either Fireworks or Photoshop After you'vemade a change to the graphic, you click Done in Fireworks or Save in Photoshop, and the image is instantlyupdated in Dreamweaver Gone are the days of fumbling for original images, opening them directly in adedicated image-editing program, making changes, exporting your work, saving the original, and thenreimporting the completed image into Dreamweaver

In this chapter, we'll harness the web-centric power that Fireworks and Photoshop provide We'll browse forimages, 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 ofFireworks 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 theother 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 bydownloading 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 sitereference 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 tomake 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 communicationand 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 Preferenceswindow, shown in Figure 18.1, allows you to specify which external applications you want to handle imageediting for specific file types Another option that you might notice right away is a text box for defining thepath 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) Toset 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 Fornow, 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 FireworksCS3\fireworks.exe (/Applications/Adobe Fireworks CS3/Adobe Fireworks CS3.app) and clickOpen 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 theapplication you just selected as the default, highlight it in the Editors list and click the Make Primarybutton Notice that to the right of the application name, it reads (Primary) This application acts as thedefault 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 toFireworks, it makes sense to make this association Depending on the graphics editor you prefer, youmight also want to set Fireworks as the primary editor for GIF and JPG files Of course Fireworks isn'tthe 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 thesame 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 andPhotoshop 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 fromthe Property inspector Or, you might even decide to right-click (Control+click) onto an image and choosethe Edit with Fireworks/Edit with Photoshop options from the context menu Doing this would launch yourimage 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 theyhave become the standard for web professionals as well Fireworks has always been primarily geared towardimage 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 timearound? In the real world, this is never the case Fortunately, Dreamweaver's integration with image editingprograms like Fireworks and Photoshop makes it simple to quickly edit and optimize images directly fromDreamweaver With a simple click of an icon within the Property inspector in Dreamweaver, you can quicklyand effortlessly launch graphics for editing purposes within either Fireworks or Photoshop After you'vemade a change to the graphic, you click Done in Fireworks or Save in Photoshop, and the image is instantlyupdated in Dreamweaver Gone are the days of fumbling for original images, opening them directly in adedicated image-editing program, making changes, exporting your work, saving the original, and thenreimporting the completed image into Dreamweaver

In this chapter, we'll harness the web-centric power that Fireworks and Photoshop provide We'll browse forimages, 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 ofFireworks 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 theother 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 bydownloading 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 sitereference 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 tomake 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 communicationand 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 Preferenceswindow, shown in Figure 18.1, allows you to specify which external applications you want to handle imageediting for specific file types Another option that you might notice right away is a text box for defining thepath 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) Toset 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 Fornow, 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 FireworksCS3\fireworks.exe (/Applications/Adobe Fireworks CS3/Adobe Fireworks CS3.app) and clickOpen 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 theapplication you just selected as the default, highlight it in the Editors list and click the Make Primarybutton Notice that to the right of the application name, it reads (Primary) This application acts as thedefault 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 toFireworks, it makes sense to make this association Depending on the graphics editor you prefer, youmight also want to set Fireworks as the primary editor for GIF and JPG files Of course Fireworks isn'tthe 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 thesame 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 andPhotoshop 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 fromthe Property inspector Or, you might even decide to right-click (Control+click) onto an image and choosethe Edit with Fireworks/Edit with Photoshop options from the context menu Doing this would launch yourimage directly within the specific program for editing

Editing Images in Dreamweaver with Fireworks or Photoshop

Imagine building a website for a client who wasn't satisfied with the images you added to the client's webpages Making changes to the images could be a tedious, multistep process that involves opening theoriginal image within Fireworks or Photoshop, making the necessary changes, exporting the original image

as a web-safe GIF, JPG, or PNG file, and then switching back to Dreamweaver to reimport or reset theimage Doing this over and over would be enough to make you pull your hair out in frustration Fortunately,Dreamweaver's integration with its sibling programs makes image editing directly from Dreamweavervirtually effortless To edit an image directly within Fireworks/Photoshop follow these steps:

1. Open the companyevents_surfpics.html file included with the chapter downloads

2. Insert the SurfingOahu.gif image located in the Images folder of your defined site by selecting it anddragging it into the newly created page, preferably under the paragraph of text As you'll see, the 400

by 250 pixel image is inserted

3. As I'm sure you've noticed, the image is a bit too big for our design We'll use this opportunity to editthe image in an effort to reduce its dimensions To edit this image using Photoshop or Fireworks, selectthe image The Property inspector changes, revealing the Edit button shown in Figure 18.2 As you'llsee, Figure 18.2 shows a Fireworks icon If Photoshop is set up as your default editor for GIF images,your icon will be a Photoshop icon instead

Figure 18.2 The Property inspector offers the option to edit the selected image.

[View full size image]

4. Click the Edit button to automatically launch Photoshop or Fireworks and open the image for editingwithin the program In Photoshop, the selected image is opened for editing, no questions asked Ifyou're using Fireworks, it immediately displays a dialog asking you if you want to open a Fireworks PNGfile as the source of the graphic or if you want to continue opening the original file, as shown in Figure18.3

Figure 18.3 A dialog appears as Fireworks launches, asking you to determine the

source of the image you want to edit.

[View full size image]

In Chapter 2, "Building a Web Page," we discussed the process of round-trip editing Round-trip editing

is the process of opening an original file to make changes and then exporting it back to the originalprogram all in one shot With Dreamweaver and Fireworks, true round-trip editing works best withFireworks-native PNG source files For this reason, I've included the original PNG file for the

SurfingOahu.gif image in the Images folder (SurfingOahu.png) If you're using Fireworks for thisprocess, select the Always Use Source PNG option from the Fireworks source files menu and click theUse a PNG button The Open dialog appears

Browse to the SurfingOahu.png image located in the Images folder and click Open The originalversion appears in Fireworks similar to Figure 18.4 As you can see, the original image is even largerthan the GIF image that currently resides on our page in Dreamweaver

Figure 18.4 The original image appears in Fireworks for editing.

[View full size image]

5. Whether you're using Fireworks or Photoshop, the image is now ready for editing In our case, we want

to resize it To do this, choose Modify, Canvas, Image Size (for Fireworks) or Image, Image Size (forPhotoshop) The Image Size dialog will appear for the specific program (both are shown in Figure18.5)

Figure 18.5 The Image Size dialogs in Fireworks and Photoshop allow you to resize

an image.

[View full size image]

6 Regardless of which program you're using, enter 300 within the Width text box The Height text box's

value should automatically change to 188 (because the Constrain Proportions check box is selected).Click OK The image is now resized

7. If you're using Fireworks, you can finalize the image and return to Dreamweaver by simply clicking theDone button This action brings you back into Dreamweaver with the new, updated image, dropped