Dreamweaver Tutorial: Inserting images with Dreamweaver

Images are an essential part of most web pages. Just as lists make content friendlier and more accessible, images help to give your visitors the rich, visual experience that they’ve come to expect on the Web. However, before you learn to insert images, you will briefly learn about web graphics.

Image resolution

While it is possible to resize images with Dreamweaver, it’s generally not a good idea. Specifying the width and height of an image in the Property Inspector changes the display size of the image, but it does not resample the image the way a graphic processing application like Photoshop does. For example, a JPEG image that is 150 pixels by 150 pixels might have a file size of 30k. You could resize this image in Dreamweaver by 50% and the result would be a thumbnail image displayed at 75 pixels by 75 pixels. However, even though the image is visually smaller, the file size remains the same. A visitor to your website still must download the 30k file and this translates to slower loading time for the image (and possibly the page) and a potentially poor user experience, especially if they have low bandwidth.

Image formats

The three most common image formats on the Web are JPEG, GIF, and PNG. While an exhaustive description of how each of these formats compresses data is beyond the scope of this book, a general overview can help you avoid some common pitfalls.

The JPEG format was created by a committee named the Joint Photographic Experts Group. Its sole purpose is to compress photographic images. Specifically, it uses lossy compression, which means that it selectively discards information, to reduce the size of a file. When you save a JPEG, you decide how much information you are willing to sacrifice by selecting a quality level. A high-quality image preserves more information and results in a larger file size. A low-quality image discards more information, but produces a smaller file size. The goal is to reduce file size as much as possible without creating distortion and artifacts.

Because JPEGs were designed to handle photographic images, they can significantly reduce the size of images containing gradients and soft edges, without producing noticeable degradation. However, reproducing sharp edges and solid areas of color often requires a higher quality setting.

The GIF format was created by CompuServe. GIF is an acronym for Graphics Interchange Format. Unlike the JPEG format, GIFs do not use lossy compression. Instead, GIFs rely on a maximum of 256 colors to reduce the size of images. This means that images with a limited number of colors can be reproduced without degradation. Logos, illustrations, and line drawings are well-suited to this format. Unlike JPEGs, GIFs excel at reproducing sharp edges and solid areas of color. However, because photographic elements such as gradients and soft edges require a large number of colors to appear convincing, GIF images containing these elements look choppy and posterized.

The PNG format has become increasingly popular on the Web in recent years because it incorporates many of the best features of JPEGs and GIFs. The PNG format is closer to GIFs in that it offers lossless compression and comes in two categories: 8 bit and 24 bit. This means it can be used quite effectively for simple graphics as well as continuous tone photographic images. A PNG also offers better transparency features than a GIF, most significantly the support of alpha channels. For many years the adoption of PNGs (especially the use of the transparency) was held back because Internet Explorer 6 ignored the transparency. As the number of people using this browser continues to decline, the PNG format is being used more frequently. For more information on web graphics see the Web Design with HTML and CSS Digital Classroom book, which is available in both print and electronic formats.

Creating a simple gallery page

Now that you have a better understanding of the types of images that are appropriate for use on your website, it’s time to build the products.html page that you linked to earlier in this lesson.

1 Double-click on products.html in the Files panel or click on the tab, as it’s still open. Place your cursor after the word Produce and press Enter (Windows) or Return (Mac OS) to create a new line.

2 Choose Insert > Image. The Select Image Source dialog box appears. If your site folder does not open automatically, click the Site Root button, and then double-click the images folder. Select beets.jpg and press OK (Windows) or Open (Mac OS).

3 When the Image Tag Accessibility Attributes dialog box appears, type Beets in the Alternate text field. Press OK.

The Alternate text field in the Image Tag Accessibility Attributes dialog box corresponds to the Alt attribute of an <img> tag. Including a description of the inserted image in this field is not technically necessary, but it is good practice. It provides information about the images to visually impaired visitors using screen readers. Also, Alt text is displayed in place of images on some handheld devices, and browsers where images are disabled.

4 Click on the Split button in the Document toolbar to view the code that was written by Dreamweaver when you inserted beets.jpg. An <img> tag was created, with four attributes. The src attribute is a relative link to the .jpg file in your images folder. The alt attribute is the alternate text you specified in the last step. The width and height attributes are simply the width and height of the image, and these have automatically been added by Dreamweaver. Press the Design button to return to this view.

5 Double-click on the images folder in the Files panel to reveal its contents. In the document window, click to the right of the beets image and press Enter (Windows) or Return (Mac OS) to create a new line. Click and drag cucumbers.jpg from your Files panel directly below the beets image in the Design view. When the Image Tag Accessibility Attributes dialog box appears, type Cucumbers into the Alternate text field. Press OK.

6 Click to the right of the cucumber image to place your cursor, and press Enter (Windows) or Return (Mac OS) to create a new line. To add the last image, you’ll use the Insert panel on the right side of your page. Click the menu at the top of the Insert panel and choose Common from the list. Click on the Images:Image option, and the Select Image Source dialog box appears.

7 Navigate to the images folder if necessary, select the eggplants.jpg image, and press OK (Windows) or Open (Mac OS).

8 Type Eggplants in the Alternate text field of the Image Tag Accessibility Attributes dialog box, then press OK.

9 Choose File > Save and leave products.html open for the next part of this lesson.

Working with Dreamweaver to link images

Often, gallery pages on the Web contain small thumbnail images that are linked to larger, high-resolution images. Like many web conventions, there are practical reasons for this format. Because all the images on a gallery page must be downloaded by visitors in order to view the page, small images are necessary to keep the page from taking too long to load. Additionally, a user’s screen isn’t large enough to accommodate multiple large pictures at one time. Giving your visitor a way to preview which pictures they would like to see on a larger scale makes the page more user friendly and interactive.

1 In products.html, click on the image of the beets to select it. In the Property Inspector, type images/beets_large.jpg into the Link text field. Press Enter (Windows) or Return (Mac OS). The 5-pixel border around the image turns blue. This border indicates that the image is a link.

Manually typing in the link is one way to link to the image, but can introduce errors. Here is a second method using Dreamweaver’s Point to File feature.

2 Click on the image of the cucumbers to select it. In the Property Inspector, locate the Point to File icon () next to the Link text field. Click and drag this icon into the Files panel. An arrow with a target at the end follows your cursor. As you hover over items in the Files panel, they become highlighted. Release the mouse while hovering over the cucumbers_large.jpg file.

3 Select the image of the eggplants and use the Point to File icon to link it to eggplants_large.jpg.

4 Choose File > Save, and then File > Preview in Browser. Click on the thumbnails to see the large versions of each image. You’ll have to use your browser’s back button to get back to the products page.

Using image placeholders

Often, you will want to start building web pages before you have all the final content available. This happens regularly in professional situations where different people may be responsible for preparing images, writing copy, and creating the site. Next, you’ll build a second section in the products.html page that will eventually include a collection of chocolate pictures.

1 In Dreamweaver, on the products.html page, place your cursor to the right of the eggplants.jpg image, and press Enter (Windows) or Return (Mac OS) to create a new line.

2 Type Chocolate, then press the HTML button in the Property Inspector and choose Heading 2 from the Format drop-down menu. Place your cursor at the end of the word Chocolate and press Enter/Return to create a line below this new heading.

3 Choose Insert > Image Objects > Image Placeholder. When the Image Placeholder dialog box appears, type belgianchocolate in the Name text field, 300 in the Width text field, and 200 in the Height text field. Leave the Color set to the default and the Alternative text field blank. Press OK to exit the dialog box.

A gray box with the name belgianchocolate appears. This box is simply an <img> tag with an empty Src attribute. If you are new to web design, it’s important to note that placeholders are not required, but they are useful in allowing you to visualize a page when you don’t have images available. Now you’ll insert an image into the placeholder by setting the Src attribute in the Property Inspector.

4 With the belgianchocolate image placeholder selected, click and drag the Point to File icon to the right of the Src text field and locate the belgianchocolate.jpg image. The image of the Belgian chocolate replaces the gray box.

5 In the Property Inspector, use the Point to File icon of the Link text field to link belgianchocolate.jpg to belgianchocolate_large.jpg. Choose File > Save and leave this file open for the next part of this lesson.

Continue to the next Dreamweaver Tutorial: Working with Dreamweaver’s image editing tools >