We will be undergoing scheduled maintenance on May 20th, 2013 at 02:00 GMT.
QuickStart! - Adobe Dreamweaver CS3 Tutorials
Inserting Media / Photoshop/Flash/Fireworks Integration
Visitors to VTC.com will be able to view all introductory videos for each training course.
Free Trial Members will gain access to first three chapters for each training course.
Full Access Members have full access to VTC.com�s entire library of video tutorials.
Learn More
Subtitles of the Movie (QuickStart! - Adobe Dreamweaver CS3 / Inserting Media / Photoshop/Flash/Fireworks Integration)
Photoshop, Fireworks, and Flash are all powerful web development tools. In using them, you can create and manage graphics and SWF files that 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 and image or Flash file in its original editor after you've 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 and exported from Fireworks. Here it is in Dreamweaver. Notice if I click on the image, there's an icon of a Fireworks application right there. 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 the 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. Let's go ahead and label the text there, center it, make it smaller, preview it here, see how it looks. Looks fine. Notice up here in the upper left hand corner there's 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 source 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 that 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 workflow. Now, obviously, to use Dreamweaver in conjunction with these other Adobe applications, you must have these applications installed on your computer. This product integration is 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 export it, it exports a variety of files, including an HTML file and a cascading style sheet file that will tell Dreamweaver how to format that element. I did that using the file export option in Fireworks. So if I go back to Dreamweaver, you can see here the end result of that import. Let's go ahead and delete this one. Notice that there's quite a bit imported there. Let's go ahead and delete that and I'll re-import it to demonstrate how to do this. So I'm going to, from the main menu, choose insert, image object. 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. Now 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 subfolder. You can see all of 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 okay 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 files. You can see these design notes if you look to the location where you exported the files. Here in my images subfolder, where Fireworks exported those images, there is a folder called design notes. 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 the table and then insert these images into that table. If the exported file contains hot spots or rollovers, which in the last example they did, the design notes will include information about the scripts to make these rollover and JavaScript behaviors work. Finally, as part of this export operation, Dreamweaver created this folder called notes in the same folder as the root. 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.
Tutorial Information
| Course: | QuickStart! - Adobe Dreamweaver CS3 |
| Author: | James Gonzalez |
| SKU: | 33771 |
| ISBN: | |
| Release Date: | 2007-06-29 |
| Duration: | 1.5 hrs / 19 lessons |
| Captions: | No |
| Compatibility: |
Vista/XP/2000, OS X, Linux QuickTime 7, Flash 8 |
VTC Sign up & Benefits
- Unlimited Access
- 81,350 Video Tutorials (14,200 free)
- Video Available as Flash or QuickTime
- Over 715 Courses
- $30 for One Month Access
- Multi-User Discounts Available
