Objectives of this Tutorial
Generally: To use graphics on a page and create image links.
Specifically: On completion of this section, you will be able to:
- Import an image into a web page
- Resize an image
- Inserting background images
- Use an image to create an image map
Most images displayed on web pages are bitmap-type graphics. This means that the image is made up of pixels.
Tip: Do not confuse bitmap-type with the Bitmap (.BMP) file type used in Windows. Graphics can be bitmap without being a Bitmap.
The colour of each pixel is determined by the balance of Red Green and Blue in the image (the RGB value). Each colour can have a value from 0 to 255. The file size of the image is nominally determined by the number of pixels (the height and width of the image) and the number of colours, but web file formats also use compression to reduce the file size.
Tip: RGB values are expressed in hexadecimal in Dreamweaver. Black is 000000 and white is FFFFFF. All colours can be selected from a palette however, so there is no need for you to learn different values!
You can create graphics by using a drawing or painting application, by scanning a picture or using a digital camera. Graphics can be edited in a variety of applications, most of which will be suitable for producing web page graphics.
When using graphics, you have to bear in mind that colours can be displayed differently on some systems. For maximum portability you need to ensure that your graphics only use colours from a web-safe palette. Most editors will have an option to dither an image to a web-safe palette.
You also need to save the file in an appropriate file format. Only two or three file formats will work with popular web browsers.
Graphics file formats for the web
Three file formats are used for web graphics. The choice of format depends on the type of graphic.
- GIF – Graphic Interchange Format
GIF files are suited to “artificial” graphics, where there are blocks of the same colour. The colours in a GIF are saved in a palette of 256 colours, which means the format can accommodate the web-safe palette of 216 colours. GIF uses a lossless compression system, which means that there is no change in quality in the image. However, effective compression depends on there being blocks of the same colour.
Special types of GIF can also be used to create transparent areas in the image or animations.
- JPEG – Joint Photographic Experts Group
JPEG uses an algorithm to work out the optimum way of storing colour information in an image. JPEG uses a lossy compression system, but you can set the trade-off between image quality and file size on a sliding scale.
JPEG is suitable for continuous-tone images, that is natural looking images where there are many subtle differences in colour, scanned photographs being the best example. JPEG is not suitable for block colour images, because the format will actually introduce new colours into the image.
- PNG – Portable Network Graphics
The PNG file format is a patent-free replacement for GIFs, but is only supported in browser versions 4.0 and up (and some features of the format remain unsupported in these).
PNG offers a large number of features for the web developer, but while support for it remains patchy it would be unwise to use it extensively. Check on the web for more information (for example,).
Inserting an Image
Images are not saved as part of the web page. Though you can view the image in the design window, the HTML file only stores a link to the image file. Consequently, you should copy any graphics files you require into an appropriate folder before using them.
Note: If you try to use a file from outside the site, Dreamweaver will prompt you to copy it into the root folder.
You can however set several image attributes in the HTML file, such as its alignment, spacing from text, border and so on.
To insert an image
- Position the insertion point in the document where you want the image to be displayed
- On the Objects panel, click the Image button
- From the Insert menu, select Image (SpeedKey: Ctrl + Alt + I)
The Select Image Source dialogue box is displayed.
Select Image Source dialogue box
- From the Look in: drop-down box, select the folder containing the image file
- Select the image
- Click Select
Note: Either create an images folder for your entire site or one for each section. Avoid scattering image files around random folders.