Operation Manual

223
USING DREAMWEAVER
Adding content to pages
Last updated 3/28/2012
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 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 Insert panel, 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.
• Click the Sites And Servers button to choose an image file in a remote folder of one of your Dreamweaver sites.
3 Browse to select the image or content source you want to insert.
If you are working in an unsaved document, Dreamweaver generates a file:// reference to the image file. When you
save the document anywhere in the site, Dreamweaver converts the reference to a document-relative path.
Note: When inserting images it’s also possible to use an absolute path to an image that resides on a remote server (i.e., an
image that is not available on the local hard drive). If you experience performance problems while working, however, you
might want to disable viewing the image in Design view by deselecting Commands
> Display External Files.
4 Click OK. The Image Tag Accessibility Attributes dialog box appears if you have activated the dialog box in
Preferences (Edit
> Preferences).