IT tutorials
 
Graphics
 

Adobe Fireworks CS5 : Fireworks and Dreamweaver (part 1) - Copying and pasting to Dreamweaver

2/19/2013 5:30:17 PM
- How To Install Windows Server 2012 On VirtualBox
- How To Bypass Torrent Connection Blocking By Your ISP
- How To Install Actual Facebook App On Kindle Fire
It’s no surprise that products within Adobe Creative Suite are meant to play well together—they are a suite, after all. In this section, you’ll learn some techniques for making the most of the integration between Fireworks and Dreamweaver.

Note

This exercise requires Dreamweaver CS5. If you do not own Dreamweaver, you may skip this section, or download the 30-day, fully functional trial version of Dreamweaver from Adobe at www.adobe.com/downloads.


Copying and pasting to Dreamweaver

You can quickly add objects from a Fireworks design directly into a website layout in Dreamweaver.

1.
Start Dreamweaver.

2.
Open the check_mag_home.html file from the webpage folder of the Lesson13 folder. This is an HTML prototype page that has been reviewed by the client. It has also undergone a lot of layer restructuring for better organization.



Another watch image has been sent as a replacement for the existing watch promo image. The client has requested the blue background be removed and replaced with a gradient background.

This work has already been done in the file called watch.fw.png, using a bitmap mask and a gradient-filled rectangle.

The image is currently not the right dimensions for the watch promo section of the banner. You will create the correct image size without affecting the original file in any way.

3.
In Fireworks, open the watch.fw.png file in the Lesson13 folder.

4.
In the Layers panel, hold down the Shift key and select both the watch and the background.

5.
Choose Edit > Copy.

6.
Switch to Dreamweaver.

7.
Select the original watch image, and delete it.

8.
Choose Edit > Paste.

The Image Preview window opens. This is the same Image Preview window you can access from Fireworks, but in this case, it’s initiated by Dreamweaver.

9.
In the Options pane, set the file format to JPEG – Better Quality.

10.
Switch to the File tab, and then set the scaling to 95%.

11.
In the Export Area option, type 237 in the width field and 90 in the height field.

These are the dimensions of the original watch image.

12.
Type 0 in the x field and 35 in the y field, and click OK.


The Save Web Image dialog box appears.

13.
Browse to the images folder within the webpage folder of the Lesson13 folder.

14.
Rename the file to watch_promo2.jpg, and click Save.

The Image Description (Alt Text) dialog box appears.

15.
Type Win a watch! in the Alt Text field, and click OK.

The new, cropped image appears on the page, where the old image used to be.

16.
Return to Fireworks; the original PNG file remains unchanged.

17.
Close the watch.fw.png file without saving.
 
Others
 
- Adobe Flash Professional CS5 : Working Within the Flash Environment - Organizing Layers
- Adobe Flash Professional CS5 : Working Within the Flash Environment - Viewing Layers
- Adobe InDesign CS5 : Opening Documents and Templates (part 2) - Converting documents created with other programs
- Adobe InDesign CS5 : Opening Documents and Templates (part 1) - Working with files in the Bridge file system
- Adobe Dreamweaver CS5 : Working with the CSS Styles Panel
- Adobe Dreamweaver CS5 : Understanding Cascading Style Sheets
- Corel Painter X : The Great Outdoors - Just Add Watercolor, Bayside Scene
- Adobe Illustrator CS5 : Working with Objects - Creating Arcs and Spirals
- Adobe Illustrator CS5 : Working with Objects - Creating Polygons and Stars, Creating Line Segments
- Adobe Photoshop CS5 : Sizing Digital Images - Resizing an Image (part 4) - Content-Aware Scaling, Puppet Warp, Using Smart Objects Before Transforming
 
 
Top 10
 
- Microsoft Visio 2013 : Adding Structure to Your Diagrams - Finding containers and lists in Visio (part 2) - Wireframes,Legends
- Microsoft Visio 2013 : Adding Structure to Your Diagrams - Finding containers and lists in Visio (part 1) - Swimlanes
- Microsoft Visio 2013 : Adding Structure to Your Diagrams - Formatting and sizing lists
- Microsoft Visio 2013 : Adding Structure to Your Diagrams - Adding shapes to lists
- Microsoft Visio 2013 : Adding Structure to Your Diagrams - Sizing containers
- Microsoft Access 2010 : Control Properties and Why to Use Them (part 3) - The Other Properties of a Control
- Microsoft Access 2010 : Control Properties and Why to Use Them (part 2) - The Data Properties of a Control
- Microsoft Access 2010 : Control Properties and Why to Use Them (part 1) - The Format Properties of a Control
- Microsoft Access 2010 : Form Properties and Why Should You Use Them - Working with the Properties Window
- Microsoft Visio 2013 : Using the Organization Chart Wizard with new data
programming4us programming4us
 
Popular tags
 
Video Tutorail Microsoft Access Microsoft Excel Microsoft OneNote Microsoft PowerPoint Microsoft Project Microsoft Visio Microsoft Word Active Directory Biztalk Exchange Server Microsoft LynC Server Microsoft Dynamic Sharepoint Sql Server Windows Server 2008 Windows Server 2012 Windows 7 Windows 8 Adobe Indesign Adobe Flash Professional Dreamweaver Adobe Illustrator Adobe After Effects Adobe Photoshop Adobe Fireworks Adobe Flash Catalyst Corel Painter X CorelDRAW X5 CorelDraw 10 QuarkXPress 8 windows Phone 7 windows Phone 8 BlackBerry Android Ipad Iphone iOS