Working with Graphics

1
Working with Graphics

• Lesson 2

2
Objectives

• Identify the graphics methods commonly used on
  Web pages.
• Insert graphics on a Web page.
• Use the Assets panel to manage graphics.
• Wrap text around graphics and work with alignment
  options.
• Insert buttons and animations from Macromedia
  Flash MX.

3
Graphic formats for Web use

• Modern Web browsers all support graphic images in
  GIF or JPEG format.
• Learn when to use which format
• GIF Use when your image has large areas of
  solid color and no color blending.
• GIF images are saved in 8-bit color mode, which
  limits them to 256 colors.
• JPEG Use when your images are photographs or
  when the image contains a large color tonal
  range.
• JPEG images are saved in 24-bit color mode and
  can contain millions of colors.
• Both image formats are saved as compressed files,
  creating a small file which downloads quickly
  when the page is loaded.

4
Dreamweaver MX image referencing options

• Dreamweaver MX allows you to choose how it will
  reference your images.
• Document-relative referencing constructs the path
  to the image based on the relative location of
  your HTML document to the graphics file.
• Use this for hyperlinks and paths.
• Site-root-relative referencing constructs the
  path to the image based on the relative location
  of the image from your site root.
• Use this for very large sites or if you will be
  moving pages frequently within the server.

5
Placing an image on a page

• Click in your document to set the insertion
  point, then click the Image button on the Common
  tab of the Insert bar.
• When the Select Image Source dialog box opens,
  locate the image in the folder containing it.
• Click the arrow on the Relative To box and select
  your referencing preference. Click OK to insert
  the image at the insertion point.
• While it is not required, it is a good idea to
  name your image in the Property inspector.

6
The Select Image Source dialog box
This figure shows the Select Image Source dialog
box. In this box, you locate the drive and folder
containing the image.
You can set your referencing preference in the
Relative To box at the bottom. If the Preview
Images box is selected, a thumbnail of the image
will appear on the right side of the box in the
Image Preview section.
7
Manage images using the Assets panel

• All images added to a site are listed in the
  Assets panel.
• You can categorize images as favorites and
  store them in folders to locate them quickly when
  needed.
• Images stored in the Assets panel can quickly be
  added to any part of your site.
• Before you can add images to the Assets panel, a
  site cache and a site catalog must be created.
• You will be prompted to create these when you
  open the Access panel if they do not already
  exist.

8
The Assets panel
This figure shows the Favorites view of the
Assets panel. When you click on an image to
select it, a thumbnail will appear in the upper
part of the panel.
If you add an image and it does not immediately
appear in the list, click the Refresh Site List
button.
Add a new image to a selected folder by clicking
the Add to Favorites button.
9
Wrap text around images

• Dreamweaver MX allows you to set alignment
  options to wrap text to the left or the right of
  an image.
• There are many alignment options that can be set
  for images, but only Left and Right affect text
  wrapping.
• When you set either the Left or Right alignment
  option, a small image anchor symbol will appear
  in your document.
• This indicates where the HTML tag for the image
  is in relation to the text.
• If you want your image on the left side of the
  page and the text to wrap to the right side of
  the image, choose the Left align option.
• If you want your image on the right side of the
  page and the text to wrap to the left side of the
  image, choose the Right align option.

10
The Property inspector showing image properties
This figure shows the Property inspector when an
image has been selected on the page. The H Space
and V Space text boxes are used to add horizontal
and vertical space around the edge of the image.
You can specify a border (in pixel width) around
the image in the Border box
Clicking the Align list arrow shows the available
alignment options for images.
11
Image alignment options

• There are many image alignment options you can
  choose, such as
• Baseline or Bottom Aligns the bottom of the
  image with the baseline of a text line.
• Top Aligns the image with the top of the
  tallest item in the line.
• Middle Aligns the baseline of a text line with
  the middle of the image.
• Text Top Aligns the image with the top of the
  tallest text in a text line.
• Absolute Middle Aligns the middle of the text
  line with the middle of the image.
• Absolute Bottom Aligns the bottom of the image
  with the bottom of the text line.

12
Add a Flash button

• Flash buttons have several states that respond to
  actions of the mouse pointer. To add one to your
  page
• Position the insertion point where the button is
  to go.
• Click Flash Button on the Media tab of the Insert
  bar.
• Choose a button style, enter text for the button,
  and select a background color.
• Assign a name for the button in the Save As text
  box and click OK.
• Click the Play button in the Property inspector.
  The button will be shown in its original state.
  Click it and roll the mouse over it to see its
  other states.

13
Add a Flash animation

• Flash animations must be created before you add
  them to your page. They cannot be created in
  Dreamweaver MX.
• To add one to your page
• Position the insertion point, then click Flash on
  the Assets panel.
• Locate the animation in the Favorites panel and
  click Insert.
• Select the Loop and Autoplay options in the
  Property inspector. Click Play to preview the
  animation, and click Stop to stop it.

14
Summary

• In this lesson, you learned
• How to identify the graphics formats commonly
  used on Web pages.
• How to insert graphics on a Web page.
• To use the Assets panel to manage graphics.
• How to wrap text around graphics and work with
  alignment options.
• How to insert buttons and animations from
  Macromedia Flash MX.