Images in Dreamweaver

• Goal for today
• Review from last time
• Information about your image
• Using images as links
• Image maps
• Using tables to arrange pictures
• Using image editing software with Dreamweaver

Goal for today

Learn about some techniques for controlling how images are displayed. Learn how to use image editing software with Dreamweaver.

Back to the top.

Review from last time

How to copy an image from the 'net:

• Right click on the image (or, on a Mac, control-click or hold down mouse button)
• Pop-up menu includes "Save this image as...."
• "Save as..". dialog box opens; browse to the correct folder (if you're going to use the image in a Dreamweaver web page, put the image in the Local Root Folder of your site or in a subdirectory of the Local Root Folder (such as "img" or "images")
• make sure image has appropriate extension (.jpg or .gif). Usually you can just let the computer determine the right extension.
• REMEMBER where you put it.
• TRY THESE INSTRUCTIONS ON THIS IMAGE:

(NOTE: this page has two "hot spots." Can you find them?)

To insert image into web page:

• Use Insert|Image.
• Browse to the image (do you remember where you put it), click OK
• image is inserted at cursor
• To alter displayed size, change "W" and/or "H" in property inspector. NOTE: if you change both, you might alter the proportions. To avoid this, delete one measurement and change only the other. Changed sizes are displayed in BOLD, like here:

• You can also resize the display of an image by clicking on the image and dragging one of the handles that appears. If you don't want to distort the proportions of the image, hold down the SHIFT key while you drag a corner handle. This keeps the original proportions.
• NOTE: When you alter the display size of an image, you don't actually change the size of the image; only its display. To change the actual size of the image, you'll have to "edit" it in an image or photo editor such as Photoshop, Paint Shop Pro, or Paint.
• Enter text into "Alt" for those with images turned off while browsing.

Back to the top.

Information about your image

Once you've placed an image into your page, there are a couple of ways that you can get information about the image's size and how it affects the loading time of the page.

Open a new file and save it as "imagetest.htm." Right now the page should be empty.

Look at the status bar of the page editing window. (This is the bar at the bottom of the window.) It should look something like this:

The leftmost information represents the HTML tags that apply to the current context.

The next piece of information is the size of the editing window. This is useful if you are designing your page for a certain size or resolution of monitor. (The example here is 689 pixels by 331 pixels, which will fit onto an 800 x 600 monitor resolution but not 640 x 480.) You can click the down-arrow here and choose from a number of preset sizes to see how your page is likely to format at each of these resolutions.

The next information is what we're interested in now. You will see two numbers: the first represents the TOTAL size of the page including all images. 1K means less than 1024 bytes of information. (This is the smallest possible size for a web page.) The next number represents how long it would take the page to download over a modem. The speed can be set in preferences. (Click Edit|Preferences|Status Bar.) This is important because you don't want your users to have to wait too long for a given page.

Now, insert this image into your web page:

This image is much less than 1K in size. When you add it into your web page, it adds an insignificant amount of size and time to the page loading.

However, if you add in this image:

the size of the page increases to 34K, and takes about 10 seconds to download over a 28.8 Kbit/sec modem connection.

As you build your web pages, think about the overall size of your page and try to keep the page under about 30 seconds or, for a long page with lots of images, no more than 120 seconds. (The current page should take about 86 seconds at 28.8 Kb/sec or about 20 seconds through a T-1 line as on the U of C campus.)

Back to the top.

You can also get information about the size of your image by clicking on it and looking at the Property inspector:

Notice that the size of the image file is given in the upper left corner of the property inspector. You also see the original size of the image in pixels (W is across, H is top to bottom), unless the image display size has been changed, in which case one or the other of these numbers will be in bold.

Here it is worth mentioning that you can put a "Low resolution source" file into the Low Src field. This would be the version that would load if someone is using a very low resolution monitor with certain kinds of browsers. You can also add some space around the image (v space and h space) add a border (enter a number greater than 0), align the image, and also access an image editor to change the image (see below).

Back to the top.

Using images as links

Images can be linked to other images or pages.

Simply click on an image after you have placed it in your page.

On the property inspector, use the folder icon to select a file to link the image to, or type a URL into the link field. If you want the link to open into a new window, choose "_blank" in the Target field.

A lot of web designers use small images, or icons, to indicate links to different areas of your web site. You can find lots of icons to use for this purpose at http://www.iconbazaar.com.

Back to the top.

Image maps

Dreamweaver allows you easily to create image maps, with different links for different sections of the picture, and behaviors assigned to these areas.

Activity:

For example, say you want to use a picture of two people and you want to create a page about each person. By clicking on the person, you want the user to be able to access information about that person.

Let's use this picture for the exercise. (This is Craig Cunningham and daughter Rowan Cunningham). Notice what happens when you click your mouse on the face of one or the other.

Download it to your Local Root Folder or subdirectory of your local root folder. (To do this, right-click or control-click on the image and choose Save Image As...)

Now insert this picture into a new file. (Click File|New Window.) Then choose "Insert|Image" and select the file.

Let's say we want to link Craig's face to a page called craig.htm and Rowan's face to a page called rowan.htm. Create these new files. For now, just put descriptive comments in these two files, such as "This file will contain information about Craig" and "This file will contain information about Rowan." Save and close these two files.

Click on the picture. In the Property Inspector, you'll notice some tools on the left-hand side:

Type a name into the Map field. It can be something like "map1". It just has to be unique within the page.

The three buttons with light-blue shapes on them are the tools you use for creating a "hot spot" in the image that can be linked to another page. You can make a rectangle, circle, or polygon using these tools.

The arrow tool is used to move or resize a hot spot after it is created.

Experiment with these tools. If you make a mistake, press Ctrl-Z (or Command-Z on the Mac) or click Edit|Undo.

Create two "hot spots" on the image: one over Craig's face and the other over Rowan's face, like this:

You'll notice a little yellow thingy appears next to the image. This indicates a "hidden" tag, in this case the tag "map". Don't delete it or you'll loose the image map you just created.

The green areas do not show up on the finished page, but represent the area of the image that is "hot" for a specific link or behavior.

Each hotspot can be linked to a different page, or can have a different behavior attached to it. (Behaviors include things like making a layer visible, or setting the text of a layer to some predefined text. These are discussed in more detail in the lesson on behaviors.)

For now, let's link the two hotspots on the photo of Craig and Rowan to the files you made just above, craig.htm and rowan.htm. To do this, click on a hotspot. The property inspector should say "hotspot." Use the folder icon to find and select the appropriate file to link to:

You could also enter a target (the window in which the link will load) and some "alt" text to display when the cursor is over the link (for example "click here to see more info about Craig.")

Back to the top.

Using Tables to arrange pictures on a page

You can use a table to place a photo and its caption, thus:

Craig and Cheryl were delighted to welcome Thomas Liam Cunningham to their family on June 5, 2001!

Tables are good ways to arrange multiple pictures on a page, as this page containing photos from the spring 2001 mentor training workshop.

If you don't use tables, then each image must be on a separate line, or else they run into each other like this:

Without tables, the only spacing you could do would be one space between each image. (Dreamweaver only allows you to insert one space between any two objects). This is the result:

(You could also use the v space and h space properties on the property inspector for each image; for example, here I've put "10" into both of these field on each image in the group:

This works well, but doesn't allow you to automatically adjust the spacing to fit different browser resolutions. )

Back to the top.

Activity:

Use the following images, and arrange them on a page using tables. If you set your table size to a percentage of the window of the browser, the images will always space themselves evenly across the page.

You should be able to do this on your own. However, if you need help, refer to these instructions.

Copy the images to your Local Root Folder or a subdirectory (such as "img" or "images").

Create a new page (click File|New). Save it as "tableimages.htm".

Insert a table by clicking Insert|Table. Set the table to 3 rows, 2 columns, 80% of window, and border=0.

Place the cursor each each cell, and click Insert|Image and select each image in turn.

You can then add coloring to the table cells if you desire.

Back to the top.

Using Image Editing Software with Dreamweaver

You can always edit an image outside of Dreamweaver using an image editing package such as Photoshop or Paint Shop Pro. If you right-click (control-click on a Mac) a file in the Site View, one of the choices on the pop-up menu is "Open With...". If you choose this, you are allowed to browse your hard disk and look for the program you want to use (for example, in C:\Program Files\Adobe\Photoshop you'll find photoshop.exe. If you click on this, your image will be opened into Photoshop (assuming that this program has been installed on your machine). Once you open a file with a program, the program will show up in the list of programs to open with, and you won't have to browse to find it again.

Let's say you want to edit an image after you have already placed it into a page. For example, let's say I want to crop this image to make it more of a close-up of the people:

If I right-click the image in its place in my web page (or control-click in on a Mac), I get a pop-up menu that includes the choice "Edit With...". Again, I can browse to the program I want to use the edit the file.

Once I'm finished, and I save the image, and return to Dreamweaver, the image is now cropped:

However, it is distorted, because the SIZE of the image still reflects the size that it was before I cropped it. To fix this, I can delete the size entries in the property inspector or right-click (control-click on a Mac) and choose Refresh Size, which will set the size to what it actually is.

Back to the top.