Working with Graphics and Tables - New Perspectives on Adobe Dreamweaver CS5, Comprehensive - page 269

You will move the nb_logo.psd fi le to the root folder of your NextBest Fest site. You
can do this directly from the Files panel.

To move the nb_logo.psd file to the local root folder:

◗

1. In the Files panel, click the Site button, and then click the folder where you store
your Data Files.

◗

2. In the files list, navigate to the Tutorial.05\Tutorial folder included with your
Data Files.

◗

3. Right-click nb_logo.psd to open a context menu, point to Edit , and then click
Copy . The file is copied to the Windows Clipboard.

You can also press the
Ctrl+C keys to copy the
selected graphic and press
the Ctrl+V keys to paste it.

◗

4. In the Files panel, click the Site button, and then click NextBest Fest . The site's
files are displayed in the files list.

◗

5. In the files list, navigate to the root folder of your NextBest Fest site.
◗

6. Right-click the web folder to open a context menu, and then click New Folder . A
new folder is inserted within the web folder.

◗

7. Type ps_files as the name of the new folder, and then press the Enter key.
◗

8. Right-click the ps_files folder to open a context menu, point to Edit , and then
click Paste . The nb_logo.psd file is pasted into the ps_files folder in the local
root folder.

Creating a Photoshop Smart Object
When you select a Photoshop .psd fi le to insert into a Web page in Dreamweaver, the
actual Photoshop fi le is not inserted directly into the Web page because .psd fi les are
uncompressed fi les that cannot be displayed in Web browsers. Instead, the Image Preview
dialog box opens and you are prompted to select optimization settings that enable
Dreamweaver to create a compressed .gif, .jpg, or .png fi le that is inserted into the page.
The graphic is inserted as a Smart Object , which is a graphic fi le in Dreamweaver that is
connected to its original source fi le—in this case, a Photoshop fi le. A sync icon appears at
the upper-left corner of the Smart Object graphic in the Document window to remind you
that the image is synced to its source fi le and to indicate the current status of the sync.

Inserting a Photoshop File into a Dreamweaver Web Page
• In the Document window, click where you want to insert the image.
• In the Common category of the Insert panel, click the Images button arrow, click
Image, and then double-click the image to insert (or copy the image in the Photoshop
window, and then in Dreamweaver paste the image in the Web page).
• In the Image Preview dialog box, select optimization settings, and then click the
OK button.
• In the Save Web Image dialog box, enter a filename and storage location, and then
click the OK button.

When you insert a Photoshop fi le in a Web page, Dreamweaver opens the Image
Preview dialog box so you can optimize the image for Web display. There are two
goals of optimizing an image for Web display. The fi rst goal is to create an image that
can display over the Web because the Photoshop .psd fi le cannot display in a browser.