wiley adobe dreamweaver cs5 bible phần 4 ppsx

368 Part II: Designing and Crafting Basic Pages 12. In the Property inspector, choose imageLeft from the Style drop-down list. 13. You can also simply drag images directly onto the page from the Files panel. In the panel, expand the images folder and drag under_contruction_02.jpg to the left of the third heading, Room to grow. 14. If the Image Tag Accessibility Attributes dialog box appears, enter Under construction in the Alternative Text field. 15. In the Property inspector, choose imageRight from the Style drop-down list. Each of the methods demonstrated works well; use the one you’re most comfortable with when adding graphics to a page. Optimizing and altering images It’s the rare graphic that integrates into the Web page design unaltered. Digital photographs often need to be cropped and almost always need to be reduced — either in dimensions, file size, or both. Other images may need to be sharpened to achieve an immediate effect or lightened to fit better into the page palette. Dreamweaver provides several pathways to the perfect Web image: Image editing within Dreamweaver: L Without even leaving Dreamweaver, you can crop, resample, sharpen, and alter brightness and contrast of any selected GIF or JPG graphic. You don’t even have to have a graphics editor such as Adobe Photoshop or Fireworks installed. You’ll see how shortly. continued 369 Chapter 8: Inserting Images Graphic optimization within Dreamweaver: L For more sophisticated image opera- tions — without full-scale editing — choose Edit Image Settings. A dialog box opens within Dreamweaver where you can compare different outcomes before committing to a scaling, resampling, or conversion operation. You explore this option a little later in the “Employing the Optimize Image Settings Command” section. Round-trip editing from Dreamweaver to your graphics editor: L For the most com- plex image modifications, use an external graphics editor such as Adobe Photoshop or Fireworks. Dreamweaver sends files to the editor of your choosing. Cross-Reference If you’ve inserted a Photoshop PSD file as your image, changes made in Photoshop are automatically updated in Dreamweaver. For more details, see Chapter 24. n The route you take depends on the depth of the modifications required. A key difference among these three different types of operations (one that you’ll want to factor into your image-editing decision) is that the tools within Dreamweaver work on the actual graphic exported for Web use. After the page containing the image is saved, changes cannot be reversed. If Fireworks is your graphics editor, both the Optimize and Graphics Editor options can utilize the source files and create the exported file. The main advantage to using source graphics is that you have much greater control and flexibility; many types of changes can be done and undone as many times as needed. The primary disadvantage is that not all Web designers have the option to alter the source graphics. Regardless of which route you choose, you’ll find it’s easy to get there. Dreamweaver has central- ized access to all of the graphic tools in the most appropriate place — the Image Property inspec- tor (see Figure 8-4). Figure8-4 Dreamweaver includes a range of image-editing tools right on the Image Property inspector. Edit Image SettingsEdit Crop Resam p le Bri g htness and Contrast Sharpen Begin your tour of Dreamweaver image altering options by looking at the built-in tools first. 370 Part II: Designing and Crafting Basic Pages Cropping graphics If you want to show only part of a photograph in the real world, you’d use a pair of scissors to crop off what you don’t want. With digital graphic tools, no scissors are needed. Images are cropped for two main reasons: to focus attention on a particular area or to reduce file size. Often these reasons work hand-in-glove because a cropped image is always smaller than the original in both physical dimensions and file size. Dreamweaver’s cropping tool is both powerful and easy to use. When you choose to crop a graphic, a shaded border appears within the graphic. The edges of the border can be dragged to determine how the image should be trimmed. The region outside the border is darkened, but you can still see the full image so you can be sure a vital part of the graphic is not inadvertently cut. To crop an image, follow these steps: 1. Select the image you want to crop. 2. In the Property inspector, click the Crop button. 3. Dreamweaver displays an alert to warn you that the cropping operation changes the selected image; click OK to clear the dialog. A shaded border appears within the selected image (see Figure 8-5). 4. Drag the selection handles that appear in the middle of each side to crop the image in a single direction; the cursor changes to a two-headed arrow when in the correct position to crop a side. 5. To move the entire cropping area, drag the highlighted rectangle into the desired posi- tion; you can move the cropping area when the cursor is shown as a four-headed arrow. Figure8-5 A repositionable, shaded border appears so that you can crop your images onscreen. 371 Chapter 8: Inserting Images 6. To cancel the cropping operation, click anywhere outside the graphic. 7. Complete the crop by double-clicking within the image. After cropping, you can reverse the effect by choosing Edit ➪ Undo — but only until the page is saved or sent to an external graphics editor. Resampling after resizing Finding the perfect size for an image is often a matter of trial and error: It’s important that a graphic work together with the entire page layout for maximum effect. Dreamweaver makes it easy to resize an image — just drag the sizing handles to the desired location. (You can find a complete discussion of Dreamweaver’s resizing features later in this chapter in the “Adjusting height and width” section.) However, resizing an image in Dreamweaver is not the same as rescaling it in a graphics program; Dreamweaver merely draws the image to fit the chosen dimen- sions, much as a browser would. It doesn’t actually re-create the graphic. To get the cleanest, clearest representation of a resized graphic, you must resample the image. Resampling refers to the process of adding or subtracting pixels when the image is resized. If a graphic’s dimensions are increased, pixels are formulaically added; make the image small and pixels are removed according to a similar algorithm. Dreamweaver includes a resampling option, which becomes available when an image is resized, either by dragging the sizing handles or changing the values in the Width and Height fields of the Property inspector. Resampling in Dreamweaver is a one-click affair — no parameters are set. Just choose the resized image and click the Resample button on the Property inspector. As with the other built-in tools, an alert informs you that the graphics file is being changed (unless you’ve selected the Don’t Show Me This Message Again option). How the image resamples really depends on the image itself and the difference between the origi- nal image size and the new size. Sometimes, resampling in either direction results in satisfactory images (see Figure 8-6). Typically, I find that small differences work far better than large ones; if you’re making a major change in image size, it’s often better to use a dedicated graphics editor such as Fireworks or Photoshop. Figure8-6 These three images demonstrate how an image can be resampled after it has been reduced or increased in size. Original Image Scaled Down Scaled Up 372 Part II: Designing and Crafting Basic Pages Affecting brightness and contrast Digital photography has opened the floodgates for posting images on the Web. Unfortunately, not all images look as good as they might. If you want to make the graphic lighter or darker or perhaps use a little more contrast, Dreamweaver has just the tool you need. The Brightness and Contrast command offers independent control over the two interlinked aspects of an image. Best of all, the Brightness/Contrast dialog box offers a Preview option, as shown in Figure 8-7, so that you can see the changes to the image in real time. Figure8-7 Preview the changes when using the Brightness and Contrast control to make sure you’re getting the effect you want. To alter the brightness and/or contrast of an image, follow these steps: 1. Select the image you want to modify. 2. Click the Brightness and Contrast button on the Property inspector. Dreamweaver dis- plays the Brightness/Contrast dialog box. 3. Make sure the Preview box is selected to see the changes applied as you move the controls. 4. Drag the Brightness slider to the left or right. Dragging the slider to the left lowers the brightness; dragging it to the right increases brightness. Alternatively, you can enter a value directly in the Brightness field. Acceptable values are from –100 to 100, with 0 being the default. 5. Move the Contrast slider to the right to increase the contrast or to the left to decrease it. Alternatively, you can enter a value between –100 and 100 in the Contrast field. 6. When you’re finished, click OK. Although Brightness and Contrast is most frequently associated with photographic JPEG images, it can also be used for GIFs. However, be careful if your GIF has a transparent area; altering the brightness and/or contrast too much could make the transparent area visible. Sharpening graphic lines In Web applications, fuzzy logic is generally sought after, but fuzzy photos are not. You can clear up blurry images with Dreamweaver’s Sharpen command found on the Property inspector. 373 Chapter 8: Inserting Images The Sharpen command examines the edges found within a graphic and programmatically increases the contrast of the related pixels. Flat areas of color are left unaffected. The Sharpen dialog (see Figure 8-8) offers a sliding scale from 0 to 10 where 10 represents the maximum amount of sharpening available in one operation. As with the Brightness/Contrast dialog, you can select the preview option. Figure8-8 Bring your images into focus with Dreamweaver’s Sharpen feature. Note If you’re using Fireworks and need more sharpening power than Dreamweaver offers, try applying the Unsharp Mask in Fireworks. Despite the name, this filter is terrific for sharpening blurry images and, when applied as a Live Filter from the Property inspector, is totally reversible in a Fireworks native PNG file. n Employing the Optimize Image command Not all images are Web-ready — especially those that are used in other media such as printing. To provide the best online experience, Web graphics must balance appearance and file size. You want your images to look as good as possible at the lowest possible file size because a small file is quicker to download. The process of achieving the balance between the image quality and file size is called optimizing. You can optimize your images without leaving Dreamweaver by run- ning the Optimize command. The Optimize command actually opens a dialog box that originated in Fireworks as the Image Preview dialog. Exporting from Fireworks is a major step and a lot of options are at your finger- tips during the process. Here’s just a little of what’s possible: Switch formats from GIF to JPEG or vice versa. Other formats include animated GIF L and PNG. Alter the palette depth (the number of colors) or transparency in GIF images. L Change the JPEG compression quality. L Rescale an image by an exact percentage or to a specific width or height. L 374 Part II: Designing and Crafting Basic Pages Crop a figure visually. L Control the frame rate for animated GIF as well as the looping options. L Visually compare up to four different optimized images at the same time (see L Figure 8-9). Figure8-9 Get the best Web image possible at the lowest file size through the Image Preview dialog box, opened by the Optimize Image command. If you choose an image imported from Fireworks, when you first launch Optimize Image — either by clicking the Edit Image Settings button on the Property inspector or choosing the Optimize Image command from the Commands menu — Dreamweaver presents a dialog that asks whether you’d like to edit the source PNG file or the current file. When you choose the source file, Dreamweaver automatically re-exports the file and stores the changes when you’re done. 375 Chapter 8: Inserting Images Cross-Reference For a full explanation of all that’s possible through the Optimize Image command, see Chapter 24. n Editing images Although Dreamweaver includes some tools for cropping, sharpening, and otherwise revising images in your Web pages, it is not a full-featured graphics editor. Certain tasks — such as slicing a larger graphic into sections or adding text to an image — are beyond Dreamweaver’s scope. You can, however, set up your graphics editor of choice to work hand-in-hand with Dreamweaver. Specify your primary graphics editor for each type of graphic in the File Types/Editors category of Preferences. ChangingGraphics Dreamweaver’s built-in graphics functions are perfect for low-level quick fixes when an image needs to be cropped or resampled. In this Dreamweaver Technique, you have an opportunity to adjust one picture in a number of ways. 1. Open the images_start.htm file worked on in the last Dreamweaver Technique. 2. Select the second image on the page, next to the “Big house, big garage” heading. As you see, this image has a few problems in the outer part of the picture; with Dreamweaver, you can crop those right out of view. 3. On the Property inspector, click Crop. continued 376 Part II: Designing and Crafting Basic Pages 4. Dreamweaver alerts you that taking this action will affect the selected image; click OK to continue. 5. Move the cropping handles on the top and left to exclude the white patches; move the cropping handles on the right and bottom to the outer edge of the images. 6. When you’ve moved the cropping handles to the correct position, double-click in the center of the image to confirm your changes. The image is still a bit too big; you can use the built-in Rescale tool to make a simple adjustment. 7. Select the image again and drag the lower-right sizing handle inward to reduce the image size; press the Shift key while dragging to constrain the width/height ratio. 8. Stop resizing the image when the Width attribute in the Property inspector is 215 pixels. While the image appears to be resized, it now needs to be resampled so that it is actually reduced in file size. 9. On the Property inspector, click Resample. You’ll notice that the image file size shown in the Property inspector is reduced from 14K to 10K. 10. Dreamweaver again alerts you that taking this action will affect the selected image; click OK to continue. 11. When you’re done, save your page. Although you will always need to work with a graphics editor such as Photoshop or Fireworks for major image modifications, Dreamweaver does a great job on last-minute fixes all by itself. After you’ve picked an image editor, clicking the Edit button in the Property inspector opens the application with the current image. After you’ve made the modifications, just save the file in your image editor and switch back to Dreamweaver. The new, modified graphic has already been included in the Web page. If you change the image size, you can click the Reset Size button on the Image Property inspector to see your changes. Cross-Reference If you are using either Photoshop or Fireworks as your image editor, here is some good news: Dreamweaver works very closely with both Photoshop and Fireworks, enabling you to create and modify images with round- trip ease. Find out more in Chapter 24. n Modifying image attributes When you insert an image in Dreamweaver, the image tag, <img>, is inserted into your HTML code. The <img> tag takes several attributes; the most commonly used can be entered through the Property inspector. Code for a basic image looks like the following: <img src=”images/myimage.gif” width=”172” height=”180”> Dreamweaver centralizes all its image functions in the Property inspector. The Image Property inspector, shown in Figure 8-10, displays a small thumbnail of the image as well as its file size. continued 377 Chapter 8: Inserting Images Dreamweaver automatically inserts the image filename in the Src text box (as the src attribute). To replace a currently selected image with another, click the folder icon next to the Src text box, or double-click the image itself. Either sequence opens the Select Image Source dialog box. When you’ve selected the file, Dreamweaver automatically refreshes the page and corrects the code. Figure8-10 The Image Property inspector gives you total control over the HTML code for every image. Filename Thumbnail File size Src folder icon If the Image Property inspector is open when you insert your image, you can begin to modify the image attributes immediately. Naming your image When you first insert a graphic into the page, the Image Property inspector displays a blank text box next to the thumbnail and file size. Fill in this box with a unique name for the image, to be used in JavaScript and other applications. Adjusting height and width The width and height attributes are important because browsers build Web pages faster when they know the size and shape of the included images. Dreamweaver reads these attributes when the image is first loaded. The width and height values are initially expressed in pixels and are automatically inserted as attributes in the HTML code. Browsers can dynamically resize an image if its height and width on the page are different from the original image’s dimensions. For example, you can load your primary logo on the home page and then use a smaller version of it on subsequent pages by inserting the same image with reduced height and width values. Because you’re only loading the image once and the browser is resizing it, download time for your Web page can be significantly reduced. Note Resizing an image just means changing its appearance onscreen; the file size stays exactly the same. To reduce a file size for an image, you need to scale it down in a graphics program such as Fireworks or, once you’ve resized it in Dreamweaver, click Resample in the Property inspector. n [...]... long, narrow background image In the following figure, the background image is 45 pixels high, 800 pixels wide, and only 6KB in size When the browser window is set at 640 × 48 0 or 800 × 600, the image is tiled down the page to create the vertical column effect You could just as easily create an image 1,000 pixels high by 40 pixels wide to create a horizontal column 386 Chapter 8: Inserting Images When... the latest HTML specification includes the longdesc attribute Although none of the major browsers currently support this attribute, Dreamweaver is anticipating the future by enabling you to specify a longdesc for your images In Dreamweaver, choose Edit ➪ Preferences (Dreamweaver ➪ Preferences), and, in the Accessibility category, select the Images checkbox When you add a new image to your page, the... logo, and you’ve incorporated an amazing 1,0 24 × 768 background that took you weeks to compose A user can’t see the fruits of your labor in the background ​  ​ nless he resizes his browser window to 1,0 24 × 768 —u On the other hand, if your background image is smaller than either the browser window or what the Web page content needs to display, the browser and Dreamweaver repeat (tile) your image to make... given banner ad Generally, banner ads are around 30 40 KB The lighter your banner ad, the faster it loads and ​  ​ s a direct —a result ​  ​ he more likely Web page visitors stick around to see it —t 389 Part II: Designing and Crafting Basic Pages Table 8-2 IAB Advertising Banner Sizes Dimensions Name 300 x 250 Medium Rectangle 250 x 250 Square Pop-up 240 x 40 0 Vertical Rectangle 336 x 280 Large Rectangle... Rectangle 250 x 250 Square Pop-up 240 x 40 0 Vertical Rectangle 336 x 280 Large Rectangle 180 x 150 Rectangle 300 x 100 3:1 Rectangle 720 x 300 Pop-Under 46 8 × 60 Full Banner 2 34 × 60 Half Banner 88 × 31 Micro Bar 120 × 90 Button 1 120 × 60 Button 2 120 × 240 Vertical Banner 125 × 125 Square Button 728 × 90 Leaderboard 160 × 600 Wide Skyscraper 120 × 600 Skyscraper 300 × 600 Half Page Ad Note Major sites... JavaScript Dreamweaver was among the first Web-authoring tools to automate the production of rollovers through its Swap Image and Swap Image Restore behaviors Later versions of Dreamweaver make rollovers even easier with the Rollover Image object With the Rollover Image object, you just pick two images to make a rollover Cross-Reference If you use Fireworks as your image-editing tool, refer to Chapter 24 to... in Dreamweaver Understanding how images are handled in HTML is an absolute necessity for the Web designer As you’re inserting images into your Web pages, keep these key points in mind: L Web pages are restricted to using specific graphic formats Virtually all current browsers support GIF, JPEG, and PNG files Dreamweaver can preview all three image types L Images are inserted in the foreground in Dreamweaver. .. hyperlinks in Dreamweaver 3 94 Establishing Web Links L inks are the Web Everything else about the medium can be replicated in another form, but without links, there would be no World Wide Web As your Web design work becomes more sophisticated, you’ll find additional uses for links: sending mail, connecting to an FTP site ​  ​ ven downloading software —e In this chapter, you learn how Dreamweaver helps... entire URL is generally 395 Dreamweaver Technique: Inserting anchors Targeting URLs Part II: Designing and Crafting Basic Pages enclosed within quotation marks to ensure that the address is read as one unit A generic URL using all the parts looks like this: scheme://server:port/path/file#anchor Here’s an example that uses every section: http://www.idest.com:80 /Dreamweaver/ index.htm #bible From left to right,... If you don’t see the Hyperlink dialog box when you insert a hyperlink, choose Edit ➪ Preferences (Dreamweaver ➪ Preferences) and, in the Common category, select the Show Dialog When Inserting Objects option n Regardless of how you create a link in Dreamweaver, a few restrictions exist for specifying URLs Dreamweaver does not support any letters from the extended character set (also known as High ASCII), . easy to get there. Dreamweaver has central- ized access to all of the graphic tools in the most appropriate place — the Image Property inspec- tor (see Figure 8 -4) . Figure8 -4 Dreamweaver includes. section. Round-trip editing from Dreamweaver to your graphics editor: L For the most com- plex image modifications, use an external graphics editor such as Adobe Photoshop or Fireworks. Dreamweaver sends files. fit better into the page palette. Dreamweaver provides several pathways to the perfect Web image: Image editing within Dreamweaver: L Without even leaving Dreamweaver, you can crop, resample,