Dynamic Learning Dreamweaver CS3
Page 3

Spry effects

Elements on a page can adopt some very cool behaviors-boxes can fade in and out, shrink and grow; menus and images can slide in when a user loads a page. Spry effects make all this possible. Take a look at some of the new Dreamweaver Spry effects through the Behaviors panel (open by going to Window > Behaviors). Choose the plus-sign symbol > Effects and check out the Spry effects options.

The new Effects group contains highly interactive Spry effects.

Choose File > Open. When the Open dialog box appears, navigate to the dw01lessons folder. Select the file named SpryEffects.html, then Press Open.

Choose File > Preview in Browser or press the Preview/Debug in browser button on the Document toolbar. The page launches in a new browser window.

Use your cursor to roll over and select the different boxes on the page to see how Spry effects can make objects disappear, highlight, and fade to bring life and interactivity to an otherwise simple web page.

Each box uses a different Spry effect for some very cool interactivity.

Close the browser and return to Dreamweaver. Choose File > Close.

 

Photoshop CS3 integration

Users of the industry-standard Adobe Photoshop CS3 application can now easily bring designs and components they've created in Photoshop into Dreamweaver for use in their web pages. The new Optimization panel lets you specify settings for how to import a Photoshop document. Editing the document later is a snap; just double-click it and edit the original layered .psd file directly in Photoshop CS3. You can even select portions of documents in Photoshop CS3 and paste them directly into a document in Dreamweaver.

Now you will see how easy it is to import Photoshop images in the .psd file format into your web pages.

Choose File > Open. When the Open dialog box appears, navigate to the dw01lessons folder and select the file named PhotoshopDoc.html. Press Open.

Locate the Insert bar above the Document window, and select the Image icon.

 

Click the image icon on the Insert bar and choose Insert Image to choose an image for your page.

The Select Image Source dialog box appears, prompting you to locate an image file to place in your page. Navigate to the images folder within the dw01lessons folder and select the image named Discover.psd. Press OK (Windows) or Choose (Mac OS) to place the image. If the Image Tag Accessibility Attributes dialog box appears, choose Cancel.

The Image Preview dialog box appears. Here's where you can set the quality, file type, and other options for the image file that you're about to place. Leave the default settings at JPEG, Quality 80%. Press OK.

The Image Preview window saves your Photoshop file into a web-ready format before you place it.

Now you must save the converted image. In the Save Web Image dialog box that appears, navigate to the images folder within the dw01lessons folder. In the Name field, type Discover.jpg, then press Save.

Choose a save location for the converted image.

Next, the Image Tag Accessibility Attributes dialog box appears. Press OK. The image is placed in your document.

The image placed into your document.

Choose File > Save to save your work, then choose File > Close.

 

1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | PDF Version

If you enjoy our articles, click here to subscribe.
Free JavaScripts provided by The JavaScript Source

©2007 AGI. All rights reserved. Reprinted with permission.