adobe dreamweaver cs5 on demand part 21 ppsx

ptg Working with Web Page Images Introduction Is it true that a picture is worth a thousand words? Is it also true that every time a writer begins talking about images they use that same timeworn phrase? Am I ever going to get to the point? To be honest, a picture can be worth much more than a thousand words; in fact, a well-placed image can artic- ulate more than words can ever convey. For example, ever try to verbally describe a sunset? Go ahead, I'll wait; give it a try. Communication comes in three forms: Visual, Vocal, and Verbal, and on a Web page the right visual image can be very powerful. On the other hand, placing images on a Web page can produce the opposite effect. I call it the why-did-they-use- that-image syndrome. Good designers don't use images just because they can, but because they are needed to convey a specific message. Images should be used to drive your message home; they should blend seamlessly with the Web page, and the text on the pages. Don't use images because you can, use them because you need them to convey your message. Dreamweaver makes the insertion of images a snap; in fact, it's as simple as a drag and a drop. In turn, Dreamweaver creates the compliant HTML tags within the document to make the image display correctly on a variety of browsers. Once the images have been inserted, Dreamweaver's graphical user interface allows you to modify the images in terms of size and position. You can even set up external editing applications, such as Adobe Photoshop and Fireworks, to revise the images on the fly. In addition to adding simple images to a Web page, you can use graphics for navigational aids, rollover buttons, and even image maps. 6 6 What You’ll Do Use Web Friendly Graphics Define an Image Folder Insert Images Insert Images from Photoshop Update Images from Photoshop Insert Images from Fireworks Optimize Images Using Fireworks Use Low Source Images Modify Images Align Images Edit Images Change Image Brightness and Contrast Change Image Sharpness Crop an Image Use an External Editor Set File Types/Editors Preferences Create Rollover Images Insert an Image Placeholder 129 From the Library of Wow! eBook ptg 130 Chapter 6 The Internet did not always support the use of graphics. As a matter of fact, its original use was for sharing of textual data among scien- tists and the U.S. Military. That was yester- day… Today, the Internet supports static graphics, animations, video, and audio, along with all that textual data. Preparing images for the Internet involves knowing what file formats are best to use for the Internet. Web friendly formats are designed to help the image appear good, load as quickly as possible, be compatible with all the major browsers on the market, and work seamlessly on any operating system (Macintosh, Windows, etc). The formats that meet those requirements are then submitted to the World Wide Web Consortium, the international organization that controls and organizes the Internet. If they put their blessing on the format, it becomes a Web standard, and then all the browser manufacturers scramble to make their browsers compatible with that format. Eventually, the new browsers find their way into the marketplace, and designers begin using the formats in their Web pages. The three major file formats that are con- sidered the standard for static images are: GIF, JPEG, and PNG. Depending on the type of image, and how you're using it, each one of these formats has their advantages and disadvantages. The GIF Format Short for Graphics Interchange Format, the GIF format (pronounced, jiff) is a unique Web compression technique that supports 8-bit images with a maximum of 256 colors. GIF is for images with distinct colors, such as line drawings, black and white images and small text groups that are only a few pixels high. With an animation editor, such as Adobe Fireworks, GIF images can be put together for animated images. GIF also supports trans- parency, where a color or colors can be set to transparent in order to let the color on the underlying Web page to show through. The compression algorithm used in the GIF format is called RLE (Run Length Encoding). This compression algorithm works best with solid colors, like you would encounter in clipart, or text; and since most clipart does not include many colors, the 256 maximum color restric- tion works just fine. The GIF format is also considered lossless. In other words, images saved in the GIF for- mat will be compressed without the removal of any color information. Therefore, when they're displayed on the visitor's browser, the image will be exactly what you saved, in terms of quality. The JPEG Format Short for Joint Photographic Experts Group, the JPEG (pronounced j-peg) is a Web format designed primarily for the compression and display of photographs. JPEGs allow for 24- bit images using millions of colors. To make JPEGs usable, the large amount of color infor- mation must be compressed, which is accom- plished by removing what the compression algorithm considers unneeded information. JPEG compression is "lossy," meaning that the compression scheme sacrifices some image quality, in exchange for a reduction in the file's size. JPEG files can range from small amounts of lossless compression to large amounts of lossy compression. This is a com- mon standard on the Web, but the data loss generated in its compression makes it unde- sirable for printing purposes. JPEG images do Using Web Friendly Graphics From the Library of Wow! eBook ptg Chapter 6 Working with Web Page Images 131 not support any level of transparency, and will fill transparent areas of the image with a user- defined matte color. Once an image has been compressed using the JPEG format and saved, the color information that was removed can never be recovered. Therefore, it's best when editing an image to save a copy as the JPEG, so as to retain the original image information. The PNG Format Short for Portable Network Graphic, (pro- nounced ping) the PNG format was designed to be a patent-free successor to the GIF for- mat. Though not designed specifically for the Web, PNG offers particular benefits in this environment such as improved image com- pression (10 to 30 percent smaller than the GIF format), two dimensional interlacing, stor- age of text with the image making it possible for search engines to gather information and offer subject searching for images in a stan- dard way. In addition, the PNG format is used for lossless compression and displaying images on the web. The PNG format comes in two sizes, the PNG-8 (used in place of the GIF format), and the PNG-24 (used in place of the JPEG for- mat). The advantages of PNG are that it sup- ports images with millions of colors and pro- duces background transparency without jagged edges. The disadvantages are that PNG images will not show up on older browsers (pre 4.0), and when using the full PNG-24 format with transparency, they can be comparatively larger in file size than JPEG images. One other interesting feature of the PNG format is its ability to adjust the gamma of an image across operating systems. Typically, an image will display differently on a Mac or Windows monitor. The PNG format adjusts the image so that it appears the same… regardless of operating system. Adobe Fireworks and Adobe Flash use the PNG as their native format, so that means all the power of the format, including trans- parency, and opacity settings are fully sup- ported. From the Library of Wow! eBook ptg 132 Chapter 6 It's important to set up a folder within your site folder that holds all of the images for a specific Web project. Creating this folder can be accomplished when you set up the site, or it can be made later. There are several advantages to setting up an image folder: it helps Dreamweaver in the organization of your site, and helps you locate images when you need to work on them. Since we're about to start adding images to our site, it's a good idea to stop and define this folder. Once the folder is created, you should copy all of your Web images into this folder. In addition, when you attempt to add an image to a Web page that is outside the site folder, Dreamweaver prompts you to copy the file to your site, and when you do, it adds the new images into the defined folder. All things considered, creating an image folder is a smart, efficient thing to do. Defining an Image Folder Define an Image Folder Open your site folder, and create a new folder. In this example, we'll use the obvious and call the new folder, Images. Click the Site menu, and then click Manage Sites. Select your site from the available options. Click Edit. Click the Advanced Settings category. Click the Local Info category. Click the Browse For Folder icon located to the right of the Default Images Folder Input box. 7 6 5 4 3 2 1 3 4 11 6 7 5 From the Library of Wow! eBook ptg Chapter 6 Working with Web Page Images 133 Navigate to the Local root folder, and then select the Images folder you want to use. Click Select (Win) or Choose (Mac) to record the folder's location, and exit the Search dialog box. Click Save to close the Site Setup dialog box, and then click OK, if necessary to recreate the cache. Click Done to save your changes. 11 10 9 8 8 9 10 From the Library of Wow! eBook ptg 134 Chapter 6 The three basic elements of any static Web page are text, images, and links. Adding a static image to a Web page can be as simple as a drag and a drop. By the way, the term "static" simply refers to any non-mov- ing Web image. A static image is not video; it does not dance, move, or sing… it just sits there. You can also add dynamic images, which are images that change. For example, an advertising banner cycles through different images. Images can be added directly to a Web page or they can be added within a section of text: called an inline image. Dreamweaver gives you several ways to add images to your Web pages. The method you choose to add images depends on how you like to work with Dreamweaver. Any time you add an image to a Web page, Dreamweaver (by default) asks you to type in a description, and alter- nate text. This information is used by screen reader applications (i.e. JAWS) for visually impaired users; therefore it's important that this information is added to the image. Inserting Images Insert an Image Open the Web page you want to insert an image. Click to place the insertion point where you want to place the image. Using one of the following methods to insert an image: ◆ Assets Panel. Open the Assets panel, select the image you want to add to the page, and then drag the thumbnail, or filename of the image into the Web page. ◆ Folder. Open a folder on your desktop that contains Web friendly images, and then click and drag from the folder directly into the Web page. ◆ Insert Panel. Click the Common tab on the Insert panel, click the Image button arrow, click Image, select the image from the available options, and then click OK. ◆ Insert Menu. Click the Insert menu, click Image, select the image from the available options, and then click OK. 3 2 1 Insert Menu option Select Image Source dialog box Select the image you want to insert. From the Library of Wow! eBook ptg Chapter 6 Working with Web Page Images 135 If the image you selected is not contained within the site folder, click Yes to the alert asking for permission to make a copy of the image, and place it within the site folder, and then click Save in the Copy File As dialog box. The Image Tag Accessibility Attributes dialog box opens. Click in the Alternate Text Input field and type a very short description for the image. For example, if the image is of a cell phone, you might enter the words, Image of a cell phone, or just, cell phone. NOTE If you prefer to leave this field blank, click the arrow to the right of the input box, and select the empty option. Click the file folder icon, located to the right of the Long Description input box, and then select the file that contains a longer description of the image. NOTE The Long Description option is a plain text document, which contains a longer description of the image. For example, if the image is of a sunset, you could describe the place and time the image was captured. Remember, the alternate text and long description are primarily used by the visually impaired. This file should be created in a text processor, saved as plain text, and placed inside the site folder. Click OK to add the image to the Web page. 7 6 5 4 5 7 6 Inserted image From the Library of Wow! eBook . option. Click the file folder icon, located to the right of the Long Description input box, and then select the file that contains a longer description of the image. NOTE The Long Description. infor- mation must be compressed, which is accom- plished by removing what the compression algorithm considers unneeded information. JPEG compression is "lossy," meaning that the compression. the Web page, and the text on the pages. Don't use images because you can, use them because you need them to convey your message. Dreamweaver makes the insertion of images a snap; in fact,