IMAGES AND RICH MEDIA - OKALOOSA SCHOOLS€¦ · You can use PSD images in Dreamweaver The Image Optimization dialog box automatically appears, offering options for converting PSD

Copyright © 2013 MyGraphicsLab / Pearson Education

IMAGES AND RICH MEDIA

MYGRAPHICSLAB: ADOBE DREAMWEAVER CS6


INSERT AN IMAGE

Choose Insert > Image or press Ctrl+Alt+I or Command+Option+I Can be done in either Design or Code view


ALIGN AN IMAGE

HTML vs. CSS alignment Use the Property inspector to apply HTML-based alignment Or use CSS-based alignment


INSERT PHOTOSHOP SMART OBJECTS

You can use PSD images in Dreamweaver The Image Optimization dialog box automatically appears, offering options

for converting PSD images to web-friendly formats and listing the estimatedfile size in Preview

Icon on the image indicates object is up to date


EDIT PHOTOSHOP SMART OBJECTS

Icon on the image indicates image needs to be updated Choose Modify > Image > Update from Original

OR Choose Edit Original With > Adobe Photoshop CS6 from the context menu


ACCESS AND INSERT IMAGES USING THE ASSETS PANEL

Drag images from Assets panel Use the Insert button in the Assets

panel Choose Insert from the panel menu


ACCESS AND INSERT IMAGES USING BRIDGE

Access images using Bridge Check image size and resolution in Bridge Choose File > Place > In Dreamweaver You can also drag images from Bridge


RESIZING AN IMAGE

Multiple methods of resizing images Resize images using the mouse Resize images using width and

height fields Resize using Optimize command


INSERT AN IMAGE PLACEHOLDER

Use image placeholders to mock up page layouts Choose Insert > Image Objects > Image Placeholders

OR Use the Insert panel


SET IMAGE PLACEHOLDER PROPERTIES

Using the Image Placeholder dialog box, you can: Name the placeholder Set width and height Set color Set alt text


REPLACE AN IMAGE PLACEHOLDER

Three ways to replace placeholders Double-click image placeholder Use the Property inspector Right-click on placeholder and choose Source File from the context menu


EDIT IMAGES IN DREAMWEAVER

Crop images Resize images Resample images Adjust image brightness

and contrast Adjust image sharpness


USE AN EXTERNAL IMAGE EDITOR

Choose Modify > Image > Edit With Choose Modify > Image > Edit Original With Export changes to replace original File updates automatically in site


ADD OR EDIT ALT TEXT TO IMAGES

Alt text displays when images don’t Used by people with disabilities

Add alt text using the Property inspectorOR

Add alt text in Code view


INSERT AND CONFIGURE HTML5 ANIMATION

Create animation in Flash and convert to HMTL5 Create HTML5-compatible animation in Adobe Edge Insert code elements into layout Alternate workflow: Insert Flash; use HTML5 animation as

alternate content

INSERT AND CONFIGURE HTML5 VIDEO

Insert using HTML5 <video> tag Include multiple <source> files to support all browsers Include FLV video for backward compatibility

Alternate workflow: Insert FLV; use HTML5 <video> as alternate content



INSERT AND FORMAT ALTERNATE CONTENT

Use FLV elements as alternate content for HTML5 video FLV is supported by older browsers Access alternate content in Code view

Documents

IMAGES AND RICH MEDIA - OKALOOSA SCHOOLS€¦ · You can use PSD images in Dreamweaver The Image Optimization dialog box automatically appears, offering options for converting PSD