Unit 5: Working with Graphics

1
Unit 5 Working with Graphics

• Dreamweaver CS4
• Adobe Authorized Training
• December 2008

2
Unit Topics

• Graphics on Web Pages
• Placing Graphics on the Page
• Modifying Image Properties
• Editing Images
• Roundtrip Editing with Fireworks
• Adding Flash content
• Adding Flash video

3
Graphics on Web Pages

• Graphics give life and interest to Web pages
• Three main types supported by the Web
• GIFs
• JPEGs
• PNGs

4
Graphics on Web Pages

• Get the correct type of graphic with the
  appropriate size and resolution
• Use graphics judiciously
• Choose small graphics with a minimum number of
  colors to keep the time to load minimal

5
GIFs

• Most common image format on the Web
• For line art and images with solid colors
• Can contain transparent areas and can be used for
  animation files
• Saved as 8-bit color mode,which means only 256
  colors can be represented

6
JPEGs

• Unlimited colors -- for photographs or images
  that use color gradients
• Uses compression algorithms to reduce the file
  size
• For images with a large tonal range or with
  gradients
• A picture of a blue sky with clouds looks
  posterized when saved as a GIF image
• All the different shades of blue are mapped to
  only a few colors
• JPEG saves the image in 24-bit mode, retaining
  all the colors

7
PNGs

• Portable Network Graphic
• Created to overcome limitations of GIFs and JPEGs
• Supports unlimited colors
• Reduces color depth for optimization without
  degrading quality
• Supported by latest browsers
• Native file format for Adobe Fireworks CS4

8
Placing Graphics on the Page

• Use the Common category of the Insert Panel
• Choose Insert ? Image
• Drag images from the Files panel
• Drag or insert from the Assets panel

9
Image Path

• To specify the location of a path
• Document-relative path
• Site-root-relative path
• In this course, you will only use the
  document-relative path to images
• Save your Web page before importing images
• For unsaved pages, Dreamweaver warns you when you
  import an image, and corrects the path name when
  you save the file

10
Accessibility Setting

• Set accessibility prompt in preferences
• Associate information, such as labels and
  descriptions, with your page objects to make your
  content accessible to all users

11
Section 508

• Section 508 amendment to the Rehabilitation Act
  of 1973
• Requires federal agencies to make their content
  accessible to people with disabilities
• Agencies must give disabled employees and the
  public access to data that is comparable to the
  content available to people without disabilities

12
Using the Insert Panel

• Click where you want the image inserted on the
  page
• Click Image on the Common category of the Insert
  bar

13
Using the Insert Panel

• Navigate to the image you want to use on your
  page
• Leave the Relative To setting to Document

14
Using the Insert Bar

• If accessibility setting enabled, you will
  receive a dialog box
• Set the alternate text
• Set long description

15
Using Assets

• 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

16
Inserting an Image

• Add an image to your page
• Select either the image preview or the file name
• Drag the image into your page
• If you add an image to your site, click Refresh
  Site List to put the image in the Assets panel

17
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

18
Using Favorites Folders

• Organize favorites into folders
• From Favorites
• Choose New Favorites Folder from the Options menu
• Right-click (Windows) or Control-click
  (Macintosh) in the lower half of the Favorites
  view and select New Favorites Folder from the
  context menu
• Move assets into a folder
• Add the image to Favorites
• Drag it into the folder

19
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 cant see the preview of the image
• You can view the folder structure of your site

20
Walkthrough 5-1

• Using image favorites

21
Modifying Image Properties

• Resize an image
• Wrap text around the image
• Modify the space and border of an image
• Align images with text
• Set alternative text

22
Resizing an Image

• Use the Property inspector to change
• Width (W)
• Height (H)
• Circular arrow between the W and H values can be
  clicked to reset the value to the original size
• Note It is not recommended that you resize an
  image in Dreamweaver - best to use Fireworks

23
Aligning Images and Wrapping Text on the Page

• Align images to left (the default), center, or
  the right using the Property inspector
• Note Text flows around images aligned to the
  left or right as explained in the following
  section, but not around images aligned to the
  center.

24
Changing Spacing and Border

• Adjust the space around the image when aligning
• Use the Property inspector to change
• V Space
• H Space
• Border

25
Other Alignment Options

• Baseline
• Top
• Middle
• Bottom
• Text Top
• Absolute Middle
• Absolute Bottom

26
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

27
Walkthrough 5-2

• Inserting a Graphic

28
Editing Images

• Dreamweaver CS4 embeds Fireworks CS4 image
  editing engine for certain tasks
• Image resampling
• Cropping
• Brightness/contrast
• Sharpening

29
Editing Images

• Use Property inspector

30
Editing Images

• Message displayed that the image will be changed

31
Walkthrough 5-3

• Modifying a graphic

32
Roundtrip Editing with Fireworks

• Adobe Fireworks CS4 is an image-authoring tool
• Create, edit, and animate Web graphics
• Complete set of bitmap and vector tools
• Allows you to use export controls to optimize
  your images,
• Give advanced interactivity,and export them into
  Dreamweaver

33
Setting Editor Preferences

• Must have both Fireworks and Dreamweaver
  installed
• Fireworks must be set as your default image
  editor for PNG files

34
Setting Editor Preferences

• Check that Fireworks is set as the image editor
  for PNG files
• Choose Edit ?Preferences (Windows)Dreamweaver
  ?Preferences (Macintosh)
• Select File Types/Editors from the Category list
• Select .png from the list of Extensions,and then
  click the plus () and locate the Fireworks
  application
• Click Make Primary to set the application as the
  primary one to use

35
Optimizing an Image

• Optimize large, un-optimized images in Fireworks
• Right-click (Windows) or Control-click
  (Macintosh) the image
• Select Optimize with Fireworks from the context
  menu
• Search for the original PNG version of the file,
  or edit the existing one

36
Editing your Image

• click Edit on the Property inspector
• A dialog box opens asking for the source image of
  the image
• Better to edit the original PNG images instead of
  the JPEG or GIF image in your document

37
Resizing an Image

• Choose Modify ? Canvas ? Image Size.
• Verify Constrain Proportions and Resample Image
  are selected.
• Type the pixel dimension you want in either the
  width or the height (not both) and then click OK.

38
Optimizing an Image

• Change
• file format for the image
• image quality for JPEG images
• palette for GIF images

39
Optimizing an Image

• Youll see the image in the preview window as you
  change your settings
• When you complete changing the setting, click
  Update
• File is exported and the image is updated in your
  Dreamweaver page

40
Walkthrough 5-4

• Optimizing in Fireworks

41
Adding Flash Content

• Adobe Flash CS4 is an application for adding
  vector-based graphics, animations, and video to
  your page
• Uses geometrical formulas to represent images
• Usually are smaller than bitmaps images and
  therefore download very quickly

42
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

43
Adding a Flash Movie

• Using the Insert Panel
• Select the Media icon group of the Common
  category of the Insert bar
• Click the Flash button
• Using the Insert menu
• Choose Insert ? Media ? Flash

44
Adding a Flash Movie

• Both operations open the Select File dialog
• Select the Flash .swf file
• Click OK

45
Adding a Flash Movie

• Flash movies appear as a gray box
• Click Play in Property inspector to play movie in
  Dreamweaver

46
Flash Player Required Message

• You can edit the message displayed if the user
  needs a newer version of the Flash Player

47
Assets Panel

• 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

48
Files Panel

• Insert a Flash movie from the Files panel
• Select the Flash movie
• Drag it to the page

49
Walkthrough 5-5

• Adding Flash Content

50
Adding Flash Video

• Video plays within the Flash player, no other
  plug-in needed
• Video must be encoded as Macromedia Flash Video
  file (FLV)
• Set parameters in dialog box

51
Walkthrough 5-6

• Adding Flash Video

52
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.

53
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 CS4 creates vector-based movies
  you can add to your page.
• You can easily insert Flash video in your pages