1 / 24

Unit 5: Working with Graphics

Unit 5: Working with Graphics. Unit Topics. Graphics on Web Pages Placing Graphics on the Page Modifying Image Properties Editing Images Roundtrip Editing with Fireworks Adding Flash Movies. Graphics on Web Pages. Graphics give life and interest to Web pages

marinel
Download Presentation

Unit 5: Working with Graphics

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Unit 5: Working with Graphics

  2. Unit Topics • Graphics on Web Pages • Placing Graphics on the Page • Modifying Image Properties • Editing Images • Roundtrip Editing with Fireworks • Adding Flash Movies

  3. Graphics on Web Pages • Graphics give life and interest to Web pages • Three main types supported by the Web: • GIFs • JPEGs • PNGs

  4. Placing Graphics on the Page • Four ways to insert images: • Use the Common category of the Insert bar • Choose Insert  Image • Drag images from the Files panel • Drag or insert from the Assets panel

  5. Accessibility Setting • Associate information, such as labels and descriptions, with your page objects to make your content accessible to all users • Activate a dialog box for images in the Accessibility category in Preferences

  6. Using the Insert Bar • To insert an image using the Insert bar: • Click where you want the image inserted on the page • Click Image on the Common category of the Insert bar

  7. Assets panel displays different types of media and items in your site View all your site assets Easily add content to your page Images category: Shows all images for site Preview images To see the panel, choose Window Assets or press F11 Using Assets

  8. Adding To Image Favorites • Many images can be painful to scroll through • Use the Favorites list • To add Favorites: • From the Files panel, right-click (Windows) or Control-click (Macintosh) the image and choose Add to Image Favorites • From the Assets panel Site list, select the image and then click Add to Favorites, or choose Add to Favorites from the Assets Option menu

  9. Adding Images from Files Panel • Drag images into your page from the Files panel • Save your page so that a document-relative path can be calculated • You can’t see the preview of the image • You can view the folder structure of your site

  10. Walkthrough 5-1 • Using image favorites

  11. Modifying Image Properties • Modify properties of an image to do the following: • Resize an image • Wrap text around the image • Modify the space and border of an image • Align images with text • Set alternative text

  12. Wrapping Text Around Images • When aligned right, an image anchor is placed at the point where the image is inserted • Indicates the HTML tag for the image • If anchor moved, it must be at the beginning of the paragraph for text wrap to work properly • Text wraps to the bottom of the image and then returns to the left margin of the page • Note:If you cannot see the anchor, choose View Visual Aids Invisible Elements

  13. Setting Alternative Text • Appears in place of the image: • Text-only browsers • Browsers where images are disabled • Some browsers when the pointer is over the image • Accessibility • Used by speech synthesizers for visually-impaired users

  14. Walkthrough 5-2 • Inserting A Graphic

  15. Editing Images • Dreamweaver MX 2004 embeds Fireworks MX 2004 image editing engine for certain tasks: • Image resampling • Cropping • Brightness/contrast • Sharpening

  16. Walkthrough 5-3 • Modifying a graphic

  17. Setting Editor Preferences • For roundtrip editing to work: • Must have both Fireworks and Dreamweaver installed • Fireworks must be set as your default image editor for PNG files

  18. Setting Editor Preferences • Editor preferences:

  19. Adding Flash Movies • Macromedia Flash MX 2004 is an application for adding vector-based graphics and animations to your page • Uses geometrical formulas to represent images • Usually are smaller than bitmaps images and therefore download very quickly

  20. Adding Flash Movies • Insert Flash movies : • Insert bar or menu • Assets panel • Site panel • Place your cursor where you want the Flash movie to appear on the page and insert the Flash movie in your page

  21. Using the Assets panel: Select the Flash icon on the left of the panel Select the Flash movie from the list Click Insert Drag the Flash movie from the panel to the page Assets Panel

  22. Walkthrough 5-5 • Adding Flash Movies

  23. Unit Summary • Web browsers support two common types of image files: GIF and JPEG. PNG files are also supported, but they are not as widespread. • The GIF format is best suited for images with limited color use. • The JPEG format can have unlimited colors and is best suited for photographs.

  24. Unit Summary • Put images onto your web pages using the Insert bar, Assets panel, Insert menu, or by dragging from the Files panel. • The Property inspector lets you change image properties for alignment, spacing, border, and alternate text. • Edit images in Fireworks from within Dreamweaver. • Macromedia Flash MX 2004 creates vector-based movies you can add to your page.

More Related