Working with Graphics – Lesson 21 Working with Graphics Lesson 2

2 Working with Graphics – Lesson 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 Working with Graphics – Lesson 2 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 Working with Graphics – Lesson 2 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 Working with Graphics – Lesson 2 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 Working with Graphics – Lesson 2 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 Working with Graphics – Lesson 2 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 Working with Graphics – Lesson 2 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 Working with Graphics – Lesson 2 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 Working with Graphics – Lesson 2 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 Working with Graphics – Lesson 2 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 Working with Graphics – Lesson 2 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 Working with Graphics – Lesson 2 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 Working with Graphics – Lesson 2 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 Working with Graphics – Lesson 2 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.