Using Images in a Web Page
Whatever type of website you are planning, images will undoubtedly play a big role in helping to get your ideas across.
It is important to remember that Dreamweaver isn’t an image editing program. This means that you will have to prepare some of your images beforehand, using another program like Adobe Photoshop, so that they can be inserted into your web pages. Making sure that your images are of the correct file type and size will help to ensure that your website functions correctly, that you stay within bandwidth requirements, and that your images look as good as possible.
It’s a very good idea to sit down with pen and paper beforehand, and make a list of all of the images that your website will need. As you start to consider banners, buttons, and other visual elements, you may realize that you will need to prepare more images than you originally thought. You can save yourself a lot of frustration by carefully planning and preparing your images. That way, when it comes time to build your site, you won’t have to stop again and again to create the image files that you will need. Planning your images beforehand also allows you to size them exactly to your needs, which helps to give your finished website a professional, polished look.
Image File Types
Although there are several different image file types that you can upload to your web pages, the two most common are GIF and jpeg images. GIF images were developed by CompuServe, and GIF stands for Graphics Interchange Format. GIF images contain a compression algorithm that reduces the size of a GIF file. GIF files, however, do not contain any dpi information for printers, and they can only display 256 colors. GIF images are best used for non-photo-based graphics, buttons, and rollover images.
Jpeg images are much better suited for displaying photos, as they can display millions of colors. Jpeg files tend to be somewhat larger than GIF files, but the size versus quality ratio is adjustable when you save a jpeg using image editing software like Adobe Photoshop. This means that, if you are trying to stay within a certain file size, you can save the image as a jpeg and adjust the quality of the image to suit your needs. Jpeg images also contain dpi information for printers.
One thing to keep in mind, especially if you use image-editing software a lot, is that “TIFF” files will not be displayed on most browsers. It is best to avoid the “TIFF” file format when designing your web page.
Commonly Used Web Images
In addition to the images that you plan to insert into your web pages as featured content, there are several other common images that you may have to prepare in order to build a functioning website with Dreamweaver. Here are a few of them:
Web Banners: Although web banners are usually associated with advertising, many people like to develop a banner design that appears on every page of a website. This technique of putting the same banner on every page gives website continuity, and the banner can also be used as a “Home Page” button.
Background Images: When designing your web pages, you have the option of having a solid-colored background, or you can use a background image. Certain image-editing software, such as Adobe Photoshop, can help you create seamless background images that will repeat endlessly.
Button Images: Buttons are small images that viewers use to navigate the different pages of your web site. They are often used in conjunction with rollover images to create “rollover effects.” There are a variety of free buttons available for download on the Internet, or you can use image editing software to create your own.
Rollover Images: Rollover images are the images that appear when your viewer moves the mouse above an image that has a rollover effect. In this case, you can see that when I hover the mouse over the different page buttons in Dreamweaver’s “Live View,” the mouse arrow changes into a pointing hand and the image of the button changes color. When designing rollover images, it is a good idea to keep them similar to the image that they replace.
Thumbnail Images: If you plan to include an image gallery in your website, you’ll need to prepare thumbnail images. Thumbnail images are the smaller images that a user clicks on to see a bigger version of the same image. Although it is possible to resize images within Dreamweaver, it is very easy to lose your original image by doing this. It is a much better idea to prepare your thumbnails as separate image files that you size and save using image-editing software before starting to build your website in Dreamweaver.
Inserting Images Into a Web Page
As you’ve heard several times now, Dreamweaver often gives you many different options for accomplishing the same task. This is also true when it comes to inserting images into a web page. For the next few lessons, we’re going to focus on using the “Insert” panel and the “Properties Inspector” panel to accomplish most of what we need to do with images.
Let’s insert an image into a web page. Start with a new, blank page. Dreamweaver will insert the photo wherever you place the blinking cursor. In this case, the photo is the first element of the page, so you don’t have to position the cursor.
Click on “Image” in the “Insert” panel. This will open up the “Select Image Source” dialog box. Use the downward-pointing arrow found to the right of the “Look In” text field and locate the image you want. Click on the image to highlight it, and then click “OK.” Depending on Dreamweaver’s preferences, a pop-up box may alert you about document-relevant paths. If you see this box, click “OK.”
The next thing you will see is the “Image Tag Accessibility Attributes” dialog box. You will see an “Alternate Text” text field. You don’t have to put any information in here, but it’s a good idea to use a few words to describe your photo. This description will be displayed if your image cannot be displayed by a web browser. The description is also read aloud when visually-impaired people use special software to “read” web pages. I’m going to just type “small carved turtle” here, and click “OK.” The dialog box will close, and the image is now on the web page.
