adobe dreamweaver cs5 on demand part 22 ppt

ptg 136 Chapter 6 After you create or modify images in Adobe Photoshop in the PSD for- mat, you can quickly copy and paste all or part of a multi-layered or multi-sliced image or insert the entire PSD file directly into Dreamweaver. Dreamweaver handles the integration and optimizes them as Web-ready images in the selected format (GIF, JPEG, or PNG formats). Before you insert a PSD (or any other image) into a Web page, you should store the file along with the site files, so the link (rela- tive path) to the file is always available and the file gets published when the time comes. When you insert the entire PSD file, Dreamweaver creates a Smart Object that maintains a live connection with Photoshop. This live connection allows you to update changes from the original image with the click of a button in Dreamweaver. When you copy and paste, a live connection is not maintained. Any changes to the original need to be manually updated again. However, Dreamweaver does remember your optimization setting when you re- paste it or use the Edit button in the Properties panel. Inserting Images from Photoshop Create a Smart Object from a Photoshop File Open a Web page you want to insert an image. Click within the document where you want the image inserted. Click the Insert menu, and then click Image. ◆ You can also drag the PSD file from the Files panel (if available) to the Web page. Navigate to and select the PSD image you want, and then click OK (Win) or Open (Mac). Click the Options tab, and then specify the format, quality, and smoothing options you want. Click the File tab, and then specify the scale options you want. Click OK. If prompted, locate the Images folder on your local root site, save the image, and then specify Input Accessibility options. 8 7 6 5 4 3 2 1 4 5 6 7 From the Library of Wow! eBook ptg Chapter 6 Working with Web Page Images 137 Copy and Paste All or Part of an Image from Photoshop Open the image you want to copy in Photoshop (PSD format). Select the image, layer, or slice. Click the Edit menu, and then click Copy. Exit Photoshop. Open a Web page in Dreamweaver that you want to insert an image. Click within the document where you want the image inserted. Click the Edit menu, and then click Paste. The Image Preview dialog box opens. Click the Options tab, and then specify the format, quality, and smoothing options you want. Click the File tab, and then specify the scale options you want. Click OK. If prompted, locate the Images folder on your local root site, save the image, and then specify Input Accessibility options. To ed it the paste d imag e, select it, and then click the Edit button in the Properties panel. 12 11 10 9 8 7 6 5 4 3 2 1 Did You Know? You can change Image Preview opti- mization settings. If you want to change optimization settings after you insert an image, you can use the Edit Image Settings button in the Properties panel to open the Image Preview dia- log and make the changes you want. 3 1 2 6 5 11 From the Library of Wow! eBook ptg 138 Chapter 6 After you insert a Photoshop (PSD) file into a Web page, Dreamweaver creates a Smart Object that maintains a live connection with the origi- nal file in Photoshop. This live connection allows you to update changes from the original image with the click of a button in Dreamweaver. Any changes you make in Dreamweaver to the Smart Object do not affect the original Photoshop file. When you create a Smart Object from Photoshop, Dreamweaver displays an icon in the upper-left corner of the image. When the object in Dreamweaver and the original file in Photoshop are the same, both of the arrows in the icon are green. When the original file in Photoshop is different than the Smart Object in Dreamweaver, one of the arrows in the icon changes to red, which indicates you need to update it. Updating Images from Photoshop Update a Smart Object from a Photoshop File Open a Web page in Dreamweaver that contains text. Select the Smart Object image derived from a Photoshop PSD file. Click Edit Image in the Properties panel. Dreamweaver opens the source file in Photoshop. Make the changes you want, save the file, and then exit Photoshop. NOTE If you’re getting a PSD file from another person and don’t have Photoshop installed on your computer, you can still make the update from Dreamweaver. Select the Smart Object. A red icon appears in the upper- left corner of the Smart Object. Click the Update from Original button in the Document window. The red icon turns to green, indicating the Photoshop file and the Smart Object are the same. 6 5 4 3 2 1 1 2 3 6 5 Update Smart Object From the Library of Wow! eBook ptg Chapter 6 Working with Web Page Images 139 Update Multiple Smart Objects In Photoshop, open the linked images (PSD) that you want to update in Dreamweaver, make changes to the files, save them, and then exit Photoshop. Open a Web page in Dreamweaver that you want to insert an image. Open the Files panel, and then click the Assets tab to view the site assets. Click the Images button to display Images view. Select the image assets in the Assets panel that you want to update. You can use Control-click to select multiple filenames. The Smart Objects display an icon in the upper left corner. Right-click (Win) or option-click (Mac) one of the selected filenames, and then click Update from Original. 6 5 4 3 2 1 Did You Know? You can reset the size of a Smart Object. Drag a resize handle, and then click the Update From Original button in the Properties panel. You can reset the size of a Smart Object to the original PSD. If you want to change the size of the original PSD file, Dreamweaver doesn’t recognize the size change with the update icon. To resi ze the Sma rt Obj ec t to matc h the original PSD file, right-click (Win) or option-click (Mac) the Smart Object, and then click Reset Size To Original. 3 1 4 5 6 Updated Smart Object From the Library of Wow! eBook ptg 140 Chapter 6 After you create or modify images in Adobe Fireworks in the PNG for- mat, you can quickly copy and paste or insert them directly into Dreamweaver. Dreamweaver handles the integration and optimizes them as Web-ready images in the selected format (GIF, JPEG, or PNG formats). You can also paste images into a Web page. After you insert images into a Web page, you can edit the source image in Fireworks and update the image in Dreamweaver. Inserting Images from Fireworks Copy and Paste Images from Fireworks Open the image you want to copy in Fireworks (PNG format). Select the image, layer, or slice. Click the Edit menu, and then click Copy. Exit Fireworks. Open a Web page in Dreamweaver that you want to insert an image. Click within the document where you want the image inserted. Click the Edit menu, and then click Paste. The Image Preview dialog box opens. Click the Options tab, and then specify the format, quality, and smoothing options you want. Click the File tab, and then specify the scale options you want. Click OK. If prompted, locate the Images folder on your local root site, and save the image, and then specify Input Accessibility options. The image is inserted into the document with the specified format and settings. 11 10 9 8 7 6 5 4 3 2 1 3 1 4 8 9 10 2 From the Library of Wow! eBook ptg Chapter 6 Working with Web Page Images 141 Insert Images from Fireworks Open a Web page you want to insert an image. Click within the document where you want the image inserted. Click the Insert menu, and then click Image. Navigate to and select the image you want (.PNG), and then click OK (Win) or Open (Mac). Click the Options tab, and then specify the format, quality, and smoothing options you want. Click the File tab, and then specify the scale options you want. Click OK. If prompted, locate the Images folder on your local root site, and save the image, and then specify Input Accessibility options. Update Images from Fireworks Open a Web page in Dreamweaver that contains text. Select the image derived from a Fireworks PNG file. Click Edit Image in the Properties panel. Dreamweaver opens the source file in Fireworks. Make the changes you want, and then save the file. Select all or part of the image, copy it to the Clipboard, and then exit Fireworks. The image is optimized and updated. 5 4 3 2 1 8 7 6 5 4 3 2 1 4 3 From the Library of Wow! eBook . Dreamweaver creates a Smart Object that maintains a live connection with Photoshop. This live connection allows you to update changes from the original image with the click of a button in Dreamweaver. . Photoshop (PSD) file into a Web page, Dreamweaver creates a Smart Object that maintains a live connection with the origi- nal file in Photoshop. This live connection allows you to update changes. PSD file from another person and don’t have Photoshop installed on your computer, you can still make the update from Dreamweaver. Select the Smart Object. A red icon appears in the upper- left