Dreamweaver: Working with Images
 |
Now that you have your writing and content complete, it is time to balance the writing in your web page using images and photographs.
There are only three types of images that can be viewed on the Internet. JPEGs (pronounced jay-pegs), GIFs (pronounced jiffs) and PNGs. Not all browsers can view PNGs, but it is gaining some popularity because of its smaller file size/higher compression ratio.
JPEGs
and GIFs are primarily the 2 leading web image formats. The major difference
in these 2 formats is in its capability to display transparency. GIFs
display transparency while JPEGs cannot. PNGs also maintain transparency.
*The basic rule of thumb for images and web design is: JPEGs are used for photo-realistic images (16-32 bit color) while GIFs are used for simple 3 color art (8 bit color: simple graphics, line art, cartoons and logos).
To insert an image into your web page, click on the Insert Menu and choose Image. Find/select your image and click Choose.
 |
Alternative: In the objects palette, click on the Insert Image icon (it has a picture of a tree on it.) Select your image and click Choose. |
To re-size an image, it is highly recommended that you do this in an image-editing program such as Adobe Photoshop or Photo Editor. Then, re-insert the image into Dreamweaver. If you re-size an image directly in Dreamweaver, a couple things can happen:
1. If you resize a large image to appear much smaller, the web page will take a long time to load. Why? The computer will still download the larger image, even though the user appears to be seeing the smaller image.
2. If you resize a small image to appear much larger, the image will become blurry.
|
|
|
|
| Actual Image Size | Image Resized in Adobe Photoshop | Image Resized within Dreamweaver |
However, if you do have the need to resize an image directly in Dreamweaver:
- Click once on the image to select it. Little black squares will appear on the corners of the image, as well as on the midpoints of each side.
- Click and drag any of the little black squares to re-size the image.
Note: To keep the picture in proportion, drag only on the squares in the 4 corners.
Click on the image once to select it. (Little black squares will appear on the 4 corners as well as on the midpoints of each side.)
Type the name of the link in the properties box.
Click on the image once to select it. Then, hit the delete or backspace key.