Using Photoshop with Dreamweaver MX

Team-Fly    

Macromedia® DreamWeaver® MX Unleashed
By Matthew Pizzi, Zak Ruvalcaba
Table of Contents
Chapter 15.  Integration with Complementing Programs


This is an especially important topic to cover because the majority of creative professionals use Photoshop and ImageReady to create Web graphics. If you are a Photoshop user, you will miss out on some of the perks that Fireworks offers; however, it is still possible to create content in either Photoshop or ImageReady and get it into Dreamweaver. The first topic we'll look at is using Photoshop as an external editor.

Using Photoshop As the External Editor

Make sure you select Photoshop as an external editor in the Preferences mentioned earlier in this chapter. Then you can select the graphic within the document and Ctrl+Click (Mac) or right-click (Windows) and select Edit With, Adobe Photoshop in the contextual menu. This automatically launches Photoshop. When the image is inside Photoshop, make all necessary changes to the image. After you're happy, choose File, Save. Close Photoshop and return to Dreamweaver. You'll notice that the image has been automatically updated.

Using Photoshop as an external editor isn't much of an inconvenience; however, when it comes to importing JavaScript-based content or Image Maps created in Photoshop into Dreamweaver, that's where it's not quite as seamless.

Importing Content Created in ImageReady

If you use Photoshop to create content for the Web, but use Dreamweaver to lay out your content, you can get your Photoshop material into Dreamweaver. The process is a bit more tedious. When creating your material in Photoshop, try to keep in mind that you want it to end up in Dreamweaver.

Create the content as usual, whether it is a button, an image map, or even an entire site. When exporting, be sure to export both an HTML document as well as the images. Save the images somewhere within your local root folder. Save the HTML document there as well. Try to save it in the same locations as you would if you were working in Dreamweaver.

After the files have been exported, open the HTML document that Photoshop or ImageReady has generated for you. Copy all the contents of the HTML document that pertain to the Photoshop content you want to get into Dreamweaver. If you have nothing in your Dreamweaver document, it's easy. Highlight all the HTML in the Photoshop-generated document and copy it. Then back in Dreamweaver, switch to the code view and delete all the code and paste the Photoshop HTML. After you return to the design view, your Photoshop content will appear in the document.

However, if you want only to add a button you've created in Photoshop to a cell in a table inside of Dreamweaver, it gets a bit tricky, especially if you don't know HTML. To do this, put a blinking cursor in the cell you want to add the content to. This places a blinking cursor in the appropriate location of the HTML code. Open the HTML document that Photoshop has generated in Text Edit (Mac) or Notepad (Windows) and copy only the necessary HTML and JavaScript. Avoid copying tags like <html>, <head>, and <body>. After you've copied the code, paste it into the appropriate locations. You may have to copy and paste different sections of the code, making this a several-step process.


    Team-Fly    
    Top


    Macromedia Dreamweaver MX Unleashed
    Macromedia Dreamweaver MX 2004 Unleashed
    ISBN: 0672326310
    EAN: 2147483647
    Year: 2002
    Pages: 321

    flylib.com © 2008-2017.
    If you may any questions please contact us: flylib@qtcs.net