during lab

Images

When building your web page, you want to remember that many people still use slow dial-up modems. In order to make your pages download faster you want to use compressed picture files. The file types that you want to use are .jpg files or .gif files. These two file types are the most heavily compressed and are the images supported by the greatest number of web browsers. Where can you get these files?

On the Internet

- Here is a great link with many pictures as small icons
- Try some background images (this page uses slightly crass language. you can search the web for other sites showing background images)
- How about some cool lines
- How about pictures that move? Those are called "animated gifs"
- Create your own logo
- Create your own buttons
- Download popular pre-made buttons from the web
- Download free web page headers (you may have to resize since all are 800 by 200)

You could also use search engines to look for background images, line images and animated gifs

Use a scanner

- There are many scanners in the Tech center. In addition, there are scanners around campus in the majority of the computer labs. You can take ordinary photographs and scan them into a flash drive as a .jpg file.

Digital Cameras

- Digital cameras are another way to get an image for a web page. Although many cameras have become relatively cheap, do not go out and buy one just for this class! However, if you have a camera or can borrow a camera, you can very quickly create your own content for a site.

Inserting Images

Here are the steps to insert an image into your web page:

1 - Save your image files into your images folder which is located in your site folder

2 - Find the image you wish to insert in your files panel and drag the file from the files panel onto the web page in the exact spot you want your image to be viewed.

3 - Specify the alternate text

You have now inserted an image! It is that easy!

Modifying Images

Once the image is in your web page, it is possible to change the look and placement of the image. Click once on the image to select the image and expand the property inspector at the bottom of your screen. Using the property inspector you can change the alignment, vertical and horizontal spacing, image border, and even create a link for your image.

You lab instructor will give a demonstration in class.

Images as a Page Background

You can use an image (jpg or gif) as a background image for your web page. Usually a small picture is used and Dreamweaver tiles that image to make it look like one big image in the background of the page.

To use an image from your images folder as a background image:

1 - Click modify...page properties using your menu bar or use the keyboard combination of CRTL-J to open the page properties. In the appearance category, click on the browse button to find the image file you will use as a background.

2 - When you find your file (it should be in your images folder!), double click on it and then click on "OK" - You will then see your chosen image as the background of your page.

You have just created a background image for your web page!

Resizing and Optimizing Images Using Dreamweaver CS4

Training video showing how to edit images using Dreamweaver CS4

Older versions of Dreamweaver allowed users to resize images. However, while the image dimensions may have changed, the file size itself did not decrease. It was possible to have a 100 pixel by 100 pixel image with a file size of 2 megabytes! In addition to resizing, Dreamweaver CS4 was improved to take care of the following image tasks:

- optimizing images (lower the actual file size of an image)
- cropping images (crop an image)
- resample images (add or subtract pixels from an image - great if you make an image larger)
- changing brightness and contrast of images
- sharpening images (makes a blurry image less blurry)

To access the above options, simply insert an image onto your web page, click once to select the image, and look in the property inspector at the bottom of your screen. You should see the following tools:

property inspector image tools

1. Link to Photoshop (or whatever image editing software you specified in Dreamweaver's options.

2. Edit image settings. Use this to change the image dimensions or file type. For example, you can make a 600 by 400 image to 300 by 200. You can also change a .jpg into a transparent .png file. Changes such as dimensions, quality, cropping, brightness, and sharpness are permanent so be sure to make a backup of your original image.

3. Crop tool. This is used to crop your image.

4. Brightness and contrast button.

5. Sharpness button. You can sharpen soft or slightly blurred images with this button.