Working with Graphics – Lesson 21 Working with Graphics Lesson 2

2 Working with Graphics – Lesson 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 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 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 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 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 Working with Graphics – Lesson 2 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 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. Add a new image to a selected folder by clicking the Add to Favorites button. 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 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 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 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 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 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 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 Macromedia Flash MX.