Images are common elements of most websites. You add images by inserting them from an existing file. In this activity, you create a simple web page by adding an image to the page.
Adding 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. 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.
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.
1. Select Insert > Image. The Select Image Source dialog box opens.
2. Browse to the folder that contains the image you want to place in the document.
3. Select the image. A preview of the image appears in the right side of the dialog box.
4. Click OK
Set image properties
The Images Properties panel allows you to set properties for an image. If you do not see all of the image properties, click the expander arrow in the lower-right corner.
These are a few of the commonly-used image options you can set in the Properties panel:
• W and H the width and height of the image, in pixels. Dreamweaver automatically updates these text boxes with the image’s original dimensions when you insert an image in a page. If you set W and H values that do not correspond to the actual width and height of the image, the image may not display properly in a browser. (To restore the original values, click the W and H text box labels, or the Reset image size button that appears to the right of the W and H text boxes in entering a new value.)
• Src specifies the source file for the image. Click the folder icon to browse to the source file, or type the path.
• Link specifies a hyperlink for the image. Drag the Point-To-File icon to a file in the Files panel, click the folder icon to browse to a document on your site, or manually type the URL.
• Align an image and text on the same line.
• Alt specifies alternative text that appears in place of the image for text-only browsers or for browsers that have been set to download images manually. For visually impaired users who use speech synthesizers with text-only browsers, the text is spoken out loud. In some browsers, this text also appears when the pointer is over the image.
