Subtitles of the Movie

Photoshop, Fireworks and Flash are all powerful web development tools in using them you can create and manage graphics and swf files can be put into or integrated into Dreamweaver. This integration greatly simplifies your web design workflow. You can easily insert images from Photoshop and Fireworks and Flash content in the form of SWF files into a Dreamweaver document. You can also edit an image or flash file in its original editor after you have inserted it into a Dreamweaver document. In this example here I have an image that was created in Fireworks. That's this one here, this menu image, I have another one that was imported after being saved an exported from Fireworks and here it is in Dreamweaver, I notice if I click on the image there is an icon of a Fireworks application right there and I can click on the edit button and it will ask me do you want to edit the source file, the PNG file or do you want to edit this exact image which is a jpeg. I'm going to use this file, the JPEG file, notice that it opens up here in Fireworks where I can edit it and make changes to this image. For example I can add a text element to this. Lets go ahead and label the text there center it, make it smaller, preview it here and see how it looks. It looks fine and notice up here in the upper left hand corner there is an editing from Dreamweaver label with a done button. Click on the done button and Fireworks warns me that although I've saved your file you have objects that will not remain fully editable unless you also save as a Fireworks PNG file. I can normally go ahead and do that but in this case I won't. I just want to go back into Dreamweaver and notice if there are my updates in Dreamweaver. So this is an example of the tight integration between Dreamweaver and Photoshop, Flash and Fireworks that will greatly enhance your web design work flow. Now obviously to use Dreamweaver in conjunction with these other adobe applications you must have these applications installed on your computer. This product integration has achieved through something that adobe calls round trip editing. In the case of Fireworks and Flash and also design notes, not quite the same with Photoshop. Round trip editing ensures that code updates are transferred correctly between Dreamweaver and these other applications, for example to preserve rollover behavior or links to other files. I have an example of a rollover behavior here that I created in Fireworks. Let me demonstrate that. If we look at the file over here in Fireworks, you can see that I've added a behavior for a pop up menu and I've gone ahead and exported that. When I exported, it exports a variety of files including an HTML file and a cascading style sheet file that will tell to remove or how to format that element, and I did that using the file export option in Fireworks. So if I go back to Dreamweaver, you can see here is the end results of that import. Let's go ahead and delete this one. Notice that there's quite a bit that imported there. Let's go ahead and delete that and I'll reimport it and demonstrate how to do this. So I'm going to, from the main menu, choose insert image objects. It's actually an image object in addition to the HTML file and the cascading style sheet file. Fireworks will also export a variety of images, so I'm going to choose image objects Fireworks HTML, and I'm going to browse to the location of the HTML file that was exported by Fireworks. There is my pop up menu cascading style sheet. My HTML file is right here; that's got the firefox logo. The images were exported in my images sub folder. You can see all these images that start off with pop up menu are the images that were exported, so to make this work I'm going to choose the pop up menu, firefox HTML document, click open, click OK to close the insert Fireworks HTML dialog, and there is my menu. If we preview this in the browser we can't see that javascript based behavior in Dreamweaver, but if we preview in Firefox, let's go ahead and save the changes. You can see that there is the pop up menu created in Fireworks. So you can see that there's very tight integration between these two programs in particular; Dreamweaver CS3 and Fireworks CS3. Part of what makes this integration work so well are design notes. Design notes are small files that allow Dreamweaver to locate source documents for an exported image or Flash file. When I exported those files from Fireworks directly to a Dreamweaver defined site, design notes containing references to the original PSD, PNG or Flash authoring file are automatically exported to the site along with the web ready GIF JPG or SWF file. You can see these design notes if you look to the location where you exported the files here in my images sub folder where Fireworks exported those images. There is a folder called Design Notes, and inside of there are the instructions in addition to location information. These design notes contain other pertinent information about exported files. For example, when I exported my Fireworks table there in that last example, Fireworks wrote a design note for each exported image file in the table. That's where these notes come in. Those were all put into a table and those are the design notes to tell Dreamweaver how to reassemble this table and then insert these images into that table. If the exported file contains hotspots or rollovers, which in the last example they did, the design notes will include information about the scripts to make these rollovers and javascript behaviors work. Finally, as part of this export operation, Dreamweaver created this folder called Notes in the same folder as the root, and this folder contains the design notes that Dreamweaver will need to integrate with Fireworks in this case, or Photoshop if you're also exporting out of Photoshop.