Adobe 38040334 User Guide - Page 251

DREAMWEAVER CS3 244 User Guide PNG files are best suited for almost any type of web graphic due to their flexibility and small file size; however, the display of PNG images is only partially supported in Microsoft Internet Explorer (4.0 and later browsers) and Netscape Navigator (4.04 and later browsers). So unless you are designing for a specific target audience using a browser that supports the PNG format, use GIFs or JPEGs for broader accessibility. GIF (Graphic Interchange Format) GIF files use a maximum of 256 colors, and are best for displaying noncontinuous-tone images or those with large areas of flat colors, such as navigation bars, buttons, icons, logos, or other images with uniform colors and tones. JPEG (Joint Photographic Experts Group) The JPEG file format is the superior format for photographic or continuous-tone images, because JPEG files can contain millions of colors. As the quality of a JPEG file increases, so does the file size and the file download time. You can often strike a good balance between the quality of the image and the file size by compressing a JPEG file. PNG (Portable Network Group) The PNG file format is a patent-free replacement for GIFs that includes support for indexed-color, gray scale, and true-color images, and alpha channel support for transparency. PNG is the native file format of Adobe® Fireworks®. PNG files retain all the original layer, vector, color, and effects information (such as drop shadows), and all elements are fully editable at all times. Files must have the .png file extension to be recognized as PNG files by Dreamweaver. Insert an image When you insert an image into a Dreamweaver document, a reference to the image file is generated in the HTML source code. To ensure that this reference is correct, the image file must be in the current site. If it is not in the current site, Dreamweaver asks whether you want to copy the file into the site. You can also insert images dynamically. Dynamic images are those images that change often. For example, advertising banner rotation systems need to randomly select a single banner from a list of potential banners, and then dynamically display the selected banner's image when a page is requested. After you insert an image, you can set image tag accessibility attributes that can be read by screen readers for visually impaired users. These attributes can be edited in HTML code. For a tutorial on inserting images, see www.adobe.com/go/vid0148. 1 Place the insertion point where you want the image to appear in the Document window and do one of the following: • In the Common category of the Insert bar, click the Images icon . • In the Common category of the Insert bar, click the Images button and select the Image icon. With the Image icon displayed in the Insert bar, you can drag the icon to the Document window (or to the Code view window if you are working in the code). • Select Insert > Image. • Drag an image from the Assets panel (Window > Assets) to the desired location in the Document window; then skip to step 3. • Drag an image from the Files panel to the desired location in the Document window; then skip to step 3. • Drag an image from the desktop to the desired location in the Document window; then skip to step 3. 2 In the dialog box that appears, do one of the following: • Select File System to choose an image file. • Select Data Source to choose a dynamic image source. September 4, 2007