Working with Graphics

1
Working with Graphics

• Lesson 2

2
Objectives

• Identify the graphics formats 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 Flash.

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 image referencing options

• Dreamweaver 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
  category of the Insert bar.
• When the Select Image Source dialog box opens,
  locate and select the image in the folder
  containing the image.
• Click the arrow on the Relative To box and select
  your referencing preference. Click OK to insert
  the image at the insertion point.

6
Naming your image
While it is not required, it is a good idea to
name your image in the Property inspector. Enter
a name for the image in this text box.
Enter alternate text for the image here that will
display if the image cannot be displayed, or can
be read by reader software used by people with a
vision disability.
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.
9
Wrap text around images

• Dreamweaver 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 choosing your alignment option, remember,
• 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 a button to
  your page
• Position the insertion point in the Document
  window where the button is be placed.
• Select the Flash Button option from the Media
  button, which is located on the Common category
  of the Insert bar.
• Choose a button style
• (continued)

13
Add a Flash button

• (continued)
• Enter the text to display on the button, and
  select a font and font size for the text.
• Select a background color for the button.
• 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.

14
Add a Flash animation

• Flash animations must be created before you add
  them to your page. They cannot be created in
  Dreamweaver.
• 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.

15
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 Flash.