Click to Show Lecture Notes

Dreamweaver MX Inserting Images and Rules

Hyperlinking       Style Sheets    Practice La Honda Bistro

Inserting Images from the Common Panel

To insert images on a page, you can use the Insert Image icon on the Common Objects panel. You can also insert an image by selecting image from the Insert menu or by using the shortcut key sequence, Ctrl+Alt+I. Each option allows you to browse your local drive and select an image via the Select Image Source dialog box. This helps avoid errors when you type file names and directory locations. A preview of the image appears on the right side of the dialog box to ensure that you select the correct file.

As with hyperlinks, you can provide absolute or relative names for image files. Using a relative address usually makes more sense. In any Web page file, you could use this command to insert a graphic image: <img src="images/image-name.gif">

Using the Insert Image option generates code that does this for you. Then, you can change attributes of the image in two ways. First, you can select the image by clicking it. Tiny black squares, called handles, appear around the image. You can resize the image by holding the mouse button down on the squares and dragging it to the desired size. The image skews (becomes tall and thin or short and wide) unless you also hold down the Shift key. Holding down the Shift key allows you to resize the image and maintain its proportions.

The image Property inspector displays the image size in kilobytes (KB) and in terms of width and height. Use the blank text box for adding a name identifier to the image, useful if you create an image map.

Gain a little practice with the La Honda Bistro Project by inserting a few images into the table that holds them in the practice session below.

View or Print Hands-On Exercise in View in PDF.PDF format.

Click for Practice Session...La Honda Bistro Images in TablesLa Honda Bistro Images in Tables

Images used in the practice session can be found here if you are not in the college lab.

Copy these images lhblogo.gif | lhbabout.gif | lhbmenus.gif | lhbcatering.gif | lhbdirections.gif and place into the bistro\images folder.

La Honda Bistro Images in Tables

  1. Open the lhbistro.htm Web page from the previous exercise. Save the page as lhbistro2.htm in the same directory to prevent overwriting your previous work.


  2. Place the insertion point to the left of the title “La Honda Bistro” on the page. On the Common Objects panel, click the Insert Image icon, click to select the image lhblogo.gif in the bistro\images folder, then click Select. (Notice that the image appears to the left of the title.
    3. )

  3. Place the insertion point in the blank line beneath the address for La Honda Bistro. Then click the Insert Table icon on the Common Objects panel, and enter 2 in Rows, 4 in Columns, 90 percent for Width, and a Border value of 0. Leave CellPad and CellSpace blank. Click OK. You will insert images in the first row and then cut and paste your hyperlinks for the La Honda Bistro site in the second row in their appropriate table cells.


  4. If necessary, click to select the table, then click Center in the Align list arrow in the Property inspector for the table. (Hint:To select the entire table, click on its border, then click on the < table> tag on the status bar.)


  5. Move the insertion point to the upper left cell of the table, and click the Insert Image icon on the Common Objects panel. Select the file lhbabout.gif in the bistro\images folder. Click Select. Click the Align Center icon to center the image in the table cell. Select the hyperlinked text [about us] below the address line, and cut and paste it in the table cell directly below the lhbistro.gif image. (Notice that the text, the text formatting, and the hyperlink all move.) Use the Property inspector to center the hyperlink within the table cell.


  6. Move the insertion point to the second column of the first row, follow the directions in Step 6 to insert the image lhbmenus.gif, and cut, paste, and center the text [menus] in the cell below it.


  7. Repeat Step 7 for catering and directions, using the images lhbcatering.gif and lhbdirections.gif, respectively, and the appropriate hyperlinked text in the cells on the row below.


  8. Save the page and preview it in your Web browser.


    9. La honda Bistro with Images

    La honda Bistro with Images
    Hide Practice Session

Horizontal Rules

To insert a horizontal rule or line on a Web page, you can use the Insert Horizontal Rule icon on the Common Objects panel. You can also insert a rule using the Horizontal Rule command on the Insert menu. A horizontal rule is inserted automatically on the Web page at the insertion point. To change the attributes of the rule, click to select it and examine the rule Property inspector. Here are the settings I used to make the Horizontal Rule shown above.

Inserting a Horizontal Rule

Unlike images and tables, rules cannot be resized by dragging your mouse. You must change the attributes in the Property inspector if you want the rule’s appearance to differ from the default. The attributes you can control are the rule name, the width (either as a percentage of the browser window or in pixels), the height in pixels, rule alignment, and shading.

Hyperlinking    Back to Contents    Style Sheets    Top

Page Updated on June 4, 2004