Adding and modifying images – Adobe Dreamweaver CC 2014 v.13 User Manual
Page 673
Adding and modifying images
GIF (Graphic Interchange Format)
JPEG (Joint Photographic Experts Group)
PNG (Portable Network Group)
About images
Insert an image
Visually resize an image
Insert an image placeholder
Replace an image placeholder
Set image placeholder properties
Edit images in Dreamweaver
Create a rollover image
Use an external image editor
Applying behaviors to images
About images
Many different types of graphic file formats exist, but three graphic file formats are generally used in web pages—GIF, JPEG, and PNG. GIF and JPEG file formats are the
best supported and can be viewed by most browsers.
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.
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.
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
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 panel, click the Images icon
.
In the Common category of the Insert panel, click the Images button and select the Image icon. With the Image icon displayed in the
666