Dreamweaver: Inserting Images

Getting Started: Placing images On The Page

Inserting images

Web pages are usually a combination of text and images, and Dreamweaver allows you to place, adjust and to a limited extent, set the layout of images on the page. Keep in mind that HTML is a page MARKUP language, not a page LAYOUT language, so you may find yourself being frustrated at your lack of ability to position images exactly on the page.

A quick way to get images for use in making test web pages is to “borrow” the images from other web pages. This approach is only for learning purposes, and you must not use this method for commercial purposes since this would violate the rights of the copyright owner of the image.

To copy an image from a web page, place the cursor over the image, and right-click (pc) or control-click (Mac). A menu will pop-up, and you can select “Save Image As…”. Browse to the location on your disk where the web page is, and save the file in the same location as the web page. Here are some images to use for this exercise, one is a JPEG, and one is a GIF file.

Once you have an image to work with, these are the steps for putting an image in a web page.

Placing an image. To place an image on a page, first, place your cursor and CLICK in the location on the page where you want the image to show up. Then, click on the image icon in the Insert palette. It will request the name of the image, whichyou can use the open dialog to set. Once the image is displayed on the page, you can set it’s characteristics in the Property Inspector.

Adjusting the size of the image. Click on the image to select it. Then you can change the displayed size by clicking and dragging the small black squares that appear on the edges of the image when you select it.

Making an image a link. Click on the image to select it. In the Property Inspector put the link in the Link section. You may also want to put a zero in the Border section to prevent the blue line that will appear around an image to indicate it is a link.

Flowing text around an image. By default, text does not flow nicely around images. To enable text flowing, select the image, and then set the Align setting to Left or Right. This will place the image on the left or right of the browser screen, and text will flow around it. You may need to reposition the image to get text to flow around the image at the point you want.

Adjusting the margins around an image. When text flows around the image, it “hugs” the image very closely by default. You can increase the margin around the image by adjusting the horizontal and vertical spacing. Select the image, and then put the number of pixels of space you want in the Vspace and Hspace sections of the Property Inspector.

Note that the inspector is taller than in the text example above. You make this happen by clicking on the small triangle in the

lower right hand corner of the palette. Experiment with the following:

Change the height and width of the image

Reset the size of the image to its natural size by clicking on the “W” and “H“. When the width or height number is bold, the dimension is different from the natural size.

Change the alignment so text wraps around the image

Set the alt attribute of an image

Make the image a link

Change the VSpace and Hspace to change the margin around an image when text if flowing around it

Image maps

Image maps are links created inside of images.

Image maps allow you specify multiple links inside of a single image. The links are tied to shapes overlaid on the image, which can be rectangles, circles, or polygons.

This is especially useful when mocking up a website. Rather than taking time to create many separate images (by slicing or other means), you can quickly create your complete web pages in Illustrator or Photoshop and export them as complete pages. Then use image maps for any links on the page.

In Dreamweaver, create an image map by clicking on the image, then naming the imagemap in the lower left corner of the property inspector. Once the map is named, you can create multiple links by drawing a shape, and then associating the URL with the link, using the tools in the property inspector.

The following image has four links, one over the logo and over each navigational “button”.

Making an image map:

Click on the image

Set the name of the map in the lower left of the property inspector (lowercase, no spaces, no special characters!)

Select a shape (rectangle, circle, or polygon) from the lower left

Draw a shape with the drawing tool

Dreamweaver will create a translucent shape for your hotspot

Enter a URL or local web page file name in the Link section

If you want a link to open in a new browser window, set the “Target” selection to “_blank”

Set the “ALT” section to the desired alternate text

Create additional hotspots by repeating steps 3-8

When you’ve finished, click on the arrow in the lower left of the property inspector to turn off the map drawing.