Adobe Fireworks CS3 Tutorials
Exporting / Working with Dreamweaver
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 (Adobe Fireworks CS3 / Exporting / Working with Dreamweaver)
A variety of integration features are built into both Dreamweaver and Fireworks making it a snap to move files and content back and forth between these two applications. Dreamweaver and Fireworks recognize and share many of the same file edits including changes to links, image maps, tables, slices and much, much more. Together these two applications provide an easy workflow for editing, optimizing, and placing Web graphic files and HTML pages. So, let me, in this movie demonstrate some of the techniques for working with these two applications side-by-side. You can start Fireworks directly from the Properties Inspector in Dreamweaver and then make edits and then return to the updated document in Dreamweaver. To do this, simply click on the Fireworks-based graphic right here in Dreamweaver. Notice that next to the edit option here in the Properties Inspector is a Fireworks icon. Click on that icon. Fireworks will launch, if it's not already open, and then load the file right here into Fireworks. In this case, I'm getting a warning: The structure of the HTML table that you're editing does not match the table structure in Fireworks source PNG. Updating within Fireworks will overwrite the table within the HTML document. I'm going to go ahead and click OK. I might have made some changes to this document, original document, back in Dreamweaver. So, anyway, I can make my changes here in Fireworks. Notice that there's a button up here at the top: Editing from Dreamweaver. When I'm done editing I click on the Done button and then it brings it back right here into Dreamweaver. If you want to make quick optimization edits to images an animations, you can open the Fireworks export preview dialog box, also right here from the Dreamweaver Property Inspector. This can be accessed by clicking on this icon right here, the optimize icon, right adjacent to the Fireworks icon. Actually, that's kind of an obscure little icon. You may have not noticed it if you're a Dreamweaver user, but if you click on that, this time, rather than going directly into Fireworks I just go into this image preview, which is very similar to the image preview in Fireworks, but instead of having to open up another application, I can come back here, for example, and change the number of colors. Let's reduce the number of colors to 64, then click OK. Dreamweaver will prompt me to save the Web image that it's going to be creating. Whichever method you use, whether you use the Edit, or the Optimize buttons here, updates will be made to the placed files in Dreamweaver as well as to the source Fireworks files if those source files were opened. To further integrate your Web design workflow you can also create image placeholders in Dreamweaver for future unspecified Fireworks images. Let's say that you're working on a layout and you know you want an image right here adjacent to my Gems, but you're not quite sure what it will be, you can choose from the Main menu, Insert, Image Objects, Image Placeholder, provide a name, and a dimension for this image placeholder, let's say 150 by 150 pixels, let's click OK. It provides a little placeholder there. Now, when you're ready to actually work on this graphic image in Fireworks all you need to do is select that image placeholder and then click on the Create button, right here in the Properties Inspector. That'll launch Fireworks. Notice what's interesting is it launches a document that's the same dimensions as my placeholder. If I go to canvas size here, notice that this is 150 pixels By 150 pixels, so that makes it very convenient for now, working on this image. Notice that it says up here, Editing from Dreamweaver, so when you're done, you'll just click on the Done button. You'll save the image to your images sub-folder in your site root in Dreamweaver and then those updates will be made right here on the working page. And now it's important that you designate Fireworks as your PNG editor in order for this technique to work. To do this, from the Dreamweaver Main menu, choose Edit, Edit with External Editor. This is also a little bit hidden and obscure. That'll bring up the preferences dialog where it says file types and editors, choose the PNG extension and then make sure that your Fireworks EXC file is specified here in the Fireworks text field. In this case, it's the Adobe Fireworks CS3, but it actually doesn't have to be Fireworks CS3, it can be another version of Fireworks, 8 or MX04. Let me continue with more Dreamweaver and Fireworks integration techniques including round trip HTML, and several ways for placing Fireworks graphics into a Dreamweaver document in the next movie.
Tutorial Information
| Course: | Adobe Fireworks CS3 |
| Author: | James Gonzalez |
| SKU: | 33836 |
| ISBN: | 1-934743-42-9 |
| Release Date: | 2008-01-25 |
| Duration: | 8.5 hrs / 93 lessons |
| Work Files: |
Yes |
| 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
