* Dreamweaver CS3 in Simple Steps ir this chapter, we study how to add graphics to a webpage designed by using Dreamweaver CS3. Graphics play an important role in making a webpage attractive. It does not matter how interesting the text of your webpage may be, the graphics you use in it are what will get the attention of users first. This is because users visiting your webpage are not just looking for information—that they are, but they also want the information to be presented in a pleasing manner. Therefore, the first thing they will notice is the design of the page, and only if the page is well designed will they think about reading textual information. Thus, it is imperative that you make your webpage as attractive as possible by designing it in a way that it grabs the user's attention at once. One way of doing this is by adding a lot of images or graphics in your webpage. ~ You can easily download great looking graphics from the Internet. Just make sure that they match the design of your webpage. If you are familiar with graphics-editing software such as ‘Adobe Photoshop or Fireworks, you can use them to create graphics for the Web. In this chapter, we are specifically using Photoshop CS3 as our image-editing software. In this chapter, you learn to work with images. Specifically, the chapter tells you how to modify images in Photoshop, and insert, align and edit images in Dreamweaver. Last but not the least, i shows you how to insert a background color on a webpage. Selecting the Best Image Format In this section, you learn how to create and modify graphics on a webpage. The most important aspect to keep in mind when creating images for the Web is the need to optimize them. You cay optimize the images by using compression techniques or color reduction. How you optimize am image depends on how it is created, and in which format it is saved, such as Joint Photographis Expert Group (PEG), Graphics Interchange Format (GIF). You will learn how to optimize and |PEG images by using Photoshop later in the chapter. However, remember that it does matter what program, format or optimization technique you select, the main challenge is findi an ideal balance between the file size of an image and its quality. Essentially, the more col you reduce in an image or compress the size of an image, the worse it will look, How maintaining the correct balance between size and quality, and keeping the size as small possible has one advantage: such images can be quickly downloaded. While working with images on webpages, one of the most frequently questions is about format to use. To answer this question, we provide you a brief description of the various i formats. These are: Q. GIF: GIF or Graphics Interchange Format images are composed of 256 colors. GIF is suited for images with little color definition, for example images with blocks of similar col GIF supports color and various resolutions. GIF files allow you.to use graphics on a vari of webpages. GIF is used in line art, simple drawing, animations and any image wi slopes or blends. This format is best for those images, which you want to see with transparent background. BMP: Also called bitmap. BPM images are made of pixels in a grid. Pixels are tiny dots individual colors that make up whatever you see on a computer screen. The tiny dots color come together to form images. BPM is commonly used as a simple image file fo Many graphical user interfaces use bitmaps in their built-in graphics subsystems, such : Microsoft Windows. 112Chapter 5: Adding Graphics 2 JPEG: The most commonly used format for storing and transmitting photographs on the Internet. This image format uses up to 16 million colors and is best suited for photographic images. PNG: PNG or Portable Network Graphics are designed to work well when viewing images online, such as on the Internet. PNG graphics consume less memory space and offer various ransparency options. You can use these options to set the background of an image or a eerion of it as transparent. This image format was created to improve on and substitute the GF format. ‘TIFF: TIFF stands for Tagged Image File Format and this format is mainly used to store mages, including photographs and line art. It is a flexible and adaptable file format, very popular for high color images. This format is widely supported during image editing in Photoshop, layout designing in Corel DRAW and Word Processing in MS Word. ‘Out of these image formats, only a few, such as GIF, JPEG, and PNG, are generally used in a webpage. However, since GIF and JPEG images are compatible with and support by almost ait ‘Web browsers, these formats are popular among website designers. ing Photoshop to Save and Edit Images Peotoshop is widely used to edit images taken from digital cameras or other sources, such as sebile phones. The images taken from various sources are not used directly on the websites Secause of the poor quality of the images. To improve their quality, the images are edited by sng various image editing software. Photoshop is one such software, which is widely used for s purpose, because it is easy to use and gives good quality images. Photoshop is also a favorite =mong new users. All this accounts for the popularity of Photoshop as one of the best image =Sting software. A brief introduction on using Photoshop is provided later in this chapter. ing Images for the Web ‘Beore saving an image for the Web, you can convert images from one format to another. For “ecmple, images in TIFF or BMP formats can be converted into GIF, PNG and JPEG formats and ersa. In addition, images in GIF, PNG or JPEG format can be modified to reduce their file 2s and quickly‘download them from the Internet. sey programs are available to create Web graphics, but one of the earliest and easiest to use is stoshop. In this section, we explain how file conversion works, and describe how you can vert the format of Web graphics right away. Although the dialog boxes are different in ent programs, the option for compressing and reducing image size in all these programs is entially the same. s always a good idea to use good quality, high-resolution images when you are editing, so you can work on resizing them along with other editing work before optimizing them for sternet. In the Save for Web & Devices dialog box (which appears when you select the Save Web & Devices option from the File menu in the Photoshop window), you can preview your and select your optimization settings by selecting the format, amount of compression, rency and color. You can also view the same image in multiple panes to make it easy to re the original image with the optimized versions at different setting. 113Dreamweaver CS3 in Simple Steps Below the original image preview is the filename and file size of the original image. Below each of the optimized image previews, you see the effects of the optimization settings specified when that preview was selected, including the image format, the new file size and its estimated download time. When you use the Save for Web feature, Photoshop creates a new copy of your image by using your setting and leaves the original unchanged in the main Photoshop workspace. Modifying JPEG Images in Photoshop The JPEG format is one of the best choices for modifying images, such as photographs a images with many colors or gradients. When you modify a JPEG image, you must specify much compression you want to apply because this determines the size of the file. If you have image taken from a digital camera or a mobile that you want to prepare for the Web, follow steps given here to modify and save it in Photoshop. if you are using another image edi program, the process is similar, apart from a few specific steps: 1. Open, in Photoshop, the JPEG image that you want to modify. 2. Select File>Save for Web & Devices, from the main window of Photoshop, as shown Fig.DW-5.1, A Save for Web & Devices dialog box appears, as shown in Fig.DW-5.. ae Fig DW-5.1 3. To change the format of the image, select an image format from the Optimized file drop down, (Fig.DW-5.2). In this example, we have selected the JPEG format. 4, To change the compression quality, click the right arrow button beside the Quality and set a value (Fig.DW-5.2). 114Chapter 5: Adding Graphics Photoshop uses a compression scale of 0 to 100 for JPEG images in the Save for Web & Devices dialog box, with 0 denoting the lowest quality and 100 the highest. Low, Medium and High represent compression values of 10, 30 and 60 respectively. oa | To make the image focus softer, use the slider, which appears by clicking the right arrow button beside the Blur option (Fig. DW-5.2). Click the Save button. The Save Optimized As dialog box appears, as shown in Fig.DW-5.3. Select a location where you want to save the image and enter a name for the image in the text box beside the File name option (Fig.DW-5.3). 115the button (Fig.DW-5.3). Photoshop saves the modified image as a copy of the original image and leaves the image open in the main window of Photoshop. If you are working with a graphic, such as a logo, cartoon character or drawing that cam displayed in 256 colors or less, use the GIF format and reduce the number of colors used in image. This will help reduce the size of the file. However, if you want to convert a GIF i another format in Photoshop, you can do so by following these steps: , in Photoshop, the GIF image that you want to modify, as shown in Fig.DW-5.4. (Fig. DW-5.4). The appears on the screen, as shown in Fig.DW-5.5. moan ca the GIF format from the at drop down list (Fig-DW-5.5).Chapter 5: Adding Graphics Fig.DW-55 +. Next, se/ect the number of colors from the Colors drop down list (Fig.DW-5.5). The fewer the colors used, the smaller the size of the file. This, in turn, makes downloading it ‘aster. For making a file size smaller, reduce the number of colors to 6 or 12 colors. 5. If you want to maintain a transparent area in your image, select the Transparency check box. Any area of the image set as transparent (see-through) at the time of editing will also appear as Sansparent in the preview window. If you do not have a transparent area in your image, this setting will have no effect. ©. After making changes, click the Save button. 7 The Save Optimized As dialog box reappears. Enter a name for the image and save it on the desired location. ® the next section, we are going to learn how to insert images on webpages. ing Images on WebPages Oreamweaver provides a variety of ways to make the task of inserting images on a webpage smple and easy. Dreamweaver simplifies the process of placing images on webpages in a ~erety of ways, including selecting the image option from the Insert menu; clicking the Image ‘een in the Common Insert bar; selecting an image by using the Insert image dialog box; or =mply clicking an image name in the Files list panel and dragging it onto the page. Follow the ‘sees given here to insert an image on a webpage in Dreamweaver: Open the webpage in Dreamweaver where you want to insert the image. Otherwise, select File>New in the main window of Dreamweaver to create a new page. = Click the page where you want to insert the image, as shown in Fig. DW-5.6. 17Dreamweaver C$3 in Simple Steps 3. Select Insert-> Image (Fig, DW-5.6). The Select Image Source dialog box appears, a5 shown in Fig.DW-5.7. Fig.DW-5.6 | In the Select Image Source dialog box, select an image, which you want to insert on webpage (Fig. DW-5.7). In this case, we have selected LotusTempl. Fig DW-5.7 5. Click the OK button (Fig.DW-5.7). This closes the Select Image Source dialog box. Image Tag Accessibility “Attributes dialog box appears, as shown in Fig. DW-5.8. 118" = _Chapter 5: Adding Graphics +. Select from the drop down list beside the. Alternate text option (Fig.DW-5.8). As this option is optional, you can leave it blank. > Type the path of the image in the text box beside the Long description option or select the path of the image by using the Browse folder (Fig-DW-5.8.) As this option is optional, you can leave it blank. * Click the OK button (Fig.DW-5.8). The selected image is inserted in the webpage, as shown in Fig. DW-5.9. FigDW59 “Se same way, you can insert more images on the webpage according to your requirement. *e next section, we are going to discuss about aligning images on webpages. ing Images on WebPages you have inserted the images on your webpage, it is necessary to align them in a proper to make the webpage attractive. By aligning the images, you can set them at their exact sons on the webpage. Images have more flexibility than text in terms of alignment. Images be aligned in different ways on the webpage. For example, you can align image to the top, bottom, left, or right of the webpage. We discuss different types of alignment in the section. simes you may want to place an image so that it fills the screen or set the image in the Se of text, with the text coming either above or below it. Alternatively, you may want to = your image on one side of the text, and have the text wrap around the image. In this »n, we learn how to perform these actions. align an image to the right of a webpage, by following these steps: > oon a webpage with an image and some text in the Dreamweaver window. 119Dreamweaver CS3 in Simple Steps FigDW-510 2. Click the image to select it, as shown in Fig.DW-5.10. 3. Under the Properties inspector panel, click the down arrow button beside the Align and select an alignment. In our case, we have selected the Right alignment, as s| Fig.DW-5.11. . | eee In Fig.DW-5.11, the text below the image moves from the bottom of the image to its let can also seléct other Align options such as Left, Right or Middle and move the text accordi 120Chapter 5: Adding Graphics Positioning Images in an HTML Table The alignment option in HTML allows you to position images horizontally or vertically, but you cannot apply both the options simultaneously. When you insert an image in a HTML table, you can place it in any position in the table as per your requirement. Placing the image in this way allows you to use the free space of your webpage efficiently. However, the alignment option does not allow you to position images in relation to one another or in relation to the text with precision. For example, if you try to center an image positioned against a text block, the text is also centered. Fig.DW-5.12 shows image positioning in an HTML table. ‘Ore method to get around this limitation is to create HTML tables and then combine and merge e cells in the table to control positioning, as described in Chapter-4, “Working with HTML les and Frames” p the next section, we are going to learn how to edit an image in Dreamweaver. ig an Image in Dreamweaver ‘Dreamweaver provides basic image editing features that allow you to modify images without ng any external image editing application, such as Fireworks. Dreamweaver image editing are designed to simplify the work of the content designer responsible for creating image for your website. These image editing tools are present in the Properties inspector panel of Dreamweaver window, as shown in Fig. DW-5.13.Dreamweaver CS3 in Simple Steps You also find an Edit button in the Properties inspector panel that allow you to easily move a= image from Dreamweaver to Photoshop for editing. The Edit button launches Photoshop and opens the selected image in the main window of the program. When you save the changes to the image in Photoshop, all the changes are automatically reflected in the main window Dreamweaver. Another button, Optimize, located at the right of the Edit button allows you t= make the changes in an image quickly and easily. Remember that Dreamweaver is a webpage’ creation application and is not designed to edit graphics. Although the application has basic editing tools, they cannot take the place of those available in Fireworks and Photoshop. When you resize an image in Dreamweaver, you can rescale it to accommodate its dimensions. When a bitmap image is rescaled, pixels are added to or removed from the image increase or decrease its size. Resampling an image to a higher resolution causes little loss to quality. Resampling an image to a lower resolution, however, always causes a drop in quality of the image. When making changes in an image, remember that you are changing actual image. Therefore, be sure that you are satisfied with the changes before saving webpage. You can use the Undo feature in Dreamweaver to go back several steps, but after y save the page, you cannot undo the changes in the image. Therefore, before editing an i protect the original by saving a copy of it. In this section, we are going to learn how to use the cropping, brightness/contrast sharpening features in Dreamweaver. Cropping an Image Cropping is cutting or trimming the unnecessary portions of an image. Sometimes, an image have portions you do not want. You can remove these potions without loss to the purpose of image. For this, most image editing software have a tool, known as the crop tool, to trim unwanted portions. You can use the crop tool on an image by following the steps given here: 1. Select the image you want to crop from the webpage. 2. Inthe Properties inspector, click the Crop icon, as shown in Fig. DW-5.14. . Fig.DW-5.14 The Adobe Dreamweaver CS3 message box appears warning you that the action you are to perform will permanently alter the selected image, as shown in Fig.DW-5.15. 122Chapter 5: Adding Graphics Click the OK button (Fig, DW-5.15). A solid line with handlers appears around the selected image, as shown in Fig.DW-5.16. ce Fig.DW-5.16 Click and drag any handler on the outline of the image. The portion outside the outline will be cropped (Fig. DW-5.16). * Double-click inside the box to complete the cropping. ing Brightness and Contrast The brightness and contrast feature modifies the contrast or brightness of the pixels in an image. es affects the highlights, shadows and midtones of the image. Adjusting an image's brightness 123Dreamscaver C53 int Simple Steps allows you to change the amount of light in an image. Contrast controls the difference between the light and dark areas of an image. To adjust the brightness and contrast of an image, fol! the steps given here: |. Select the image from the webpage whose brightness or contrast you want to change, shown in Fig.DW-5.17. 2. In the Properties inspector, click the Brightness and Contrast icon (Fig.DW-5.17). Fig.DW-5.17 A Brightness/Contrast dialog box appears, as shown in Fig. DW-5.18. Fig. DW-5.18 3. Use the sliders below the Brightness option, to adjust the brightness setting of the i (Fig.DW-5.18). 4. Use“the slider below the Contrast option, to adjust the contrast setting of the i (Fig.DW-5.18). 5, Select the Preview check box present in the dialog box (Fig.DW-5.18), By selecting option, the changes you make appear in the main image as a preview. The changes appear in the image present in main window, as shown in Fig, DW-5.19. 124