› Dreamweaver tutorial: Placing images in HTML in Dreamweaver

Dreamweaver tutorial: Placing images in HTML in Dreamweaver

What you’ll learn in this Dreamweaver Tutorial:

  • Placing images in your HTML document
  • Using colors
  • Case sensitivity and whitespace rules

This tutorial provides you with a foundation for working with Adobe Dreamweaver images. It is the first lesson in the Adobe Dreamweaver CS5 Digital Classroom book. For more Adobe Dreamweaver training options, visit AGI’s Dreamweaver Classes.

Adobe Dreamweaver Tutorial: Placing images in HTML in Dreamweaver

You use some tags in HTML to place items, such as pictures or media files, inside a web page. The <img> tag is the most common example; its job is to place and format an image on the page. To place an image and see the resulting code, follow these steps:

1 Choose File > Open. When the Open dialog box appears, navigate to the dw01lessons folder. Select the Images.html file and press Open to edit the file.

2 If necessary, click the Split button in the Document toolbar so that you’re viewing both the layout and the code for your page. In the Design view portion of the Split view, click below the line of text to place your cursor underneath it. This is where you’ll place a new image.

Enter the Split view before you insert the image onto your page.

3 From the Common category in the Insert panel on the right side of the screen, click on the Images element () and choose Image. When the Select Image Source dialog box appears, select the file named gears.jpg, located in the images folder within the dw01lessons folder.

Choose Image from the Common tab on
the Insert bar.

4 Press OK (Windows) or Choose (Mac OS); when the Image Tag Accessibility Attributes dialog box appears, type the words Gears Image in the Alternate text field, and press OK to place the image.

Attach alternate text to your image.

Note

The Image Tag Accessibility Attributes dialog box appears when you add images, to provide additional information for users with special needs (such as the visually impaired). You should always provide each image with alternative text, but you can disable this panel by choosing Edit > Preferences (Windows) or Dreamweaver > Preferences (Mac OS). In the Accessibility category, uncheck the Images option.

5 The code shows that the HTML <img> tag has been used to place the image. Click once on the image in the document window to select it. The Property Inspector at the bottom of the page displays and sets the properties for the image.

6 In the Border text field of the Property Inspector, type 3 to set a three-pixel border around the image, then press Enter (Windows) or Return (Mac OS). Click on the background of the page to deselect and note the appearance of the border. The <img> tag now contains the border attribute, which is set to a value of 3, just the way you typed it in the Property Inspector.

As you change or add options to a selected image, Dreamweaver changes code behind the scenes.

7 Choose File > Save to save your work, then choose File > Close.

Note that in HTML, images and media are not embedded, but placed. This means that the tags point to files in their exact locations relative to the page. The tags count on those files always being where they’re supposed to be in order to display them. This is why HTML pages are typically very lightweight in terms of file size.

Pages

These tutorials are created by and the team of expert instructors at American Graphics Institute.