macromedia Dreamweaver MX Bible phần 4 pps

324 Part II ✦ Web Design and Layout With JPEGs, what is compressed for storage must be uncompressed for viewing. When a JPEG picture on your Web page is accessed by a visitor’s browser, the image must first be down- loaded to the browser and then uncompressed before it can be viewed. This dual process adds additional time to the Web-browsing process, but it is time well spent for photographic images. JPEGs, unlike GIFs, have neither transparency nor animation features. A newer strand of JPEG called Progressive JPEG gives you the interlacing option of the GIF format, however. Although not all browsers support the interlacing feature of Progressive JPEG, they render the image regardless. PNG The latest entry into the Web graphics arena is the Portable Network Graphics format, or PNG. Combining the best of both worlds, PNG has lossless compression, like GIF, and is capable of rendering millions of colors, like JPEG. Moreover, PNG offers an interlacing scheme that appears much more quickly than either GIF or JPEG, as well as superior transparency support. One valuable aspect of the PNG format enables the display of PNG pictures to appear more uniform across various computer platforms. Generally, graphics made on a PC look brighter on a Macintosh, and Mac-made images seem darker on a PC. PNG includes gamma correction capabilities that alter the image depending on the computer used by the viewer. Before the 4.0 versions, the various browsers supported PNG only through plugins. After PNG was endorsed as a new Web graphics format by the W3C, both 4.0 versions of Netscape and Microsoft browsers added native, inline support of the new format for Windows. On Macs, PNG format is supported in Internet Explorer 5.0 and up; Netscape browsers still require the plugin. Perhaps most important, however, Dreamweaver was among the first Web authoring tools to offer native PNG support. Inserted PNG images are previewed in the Document win- dow just like GIFs and JPEGs. Browser support for all PNG features is currently not widespread enough to warrant a total switch to the PNG format (image transparency is not fully supported in Internet Explorer for Windows, for example), but its growing acceptance certainly bears watching. If you’re excited about the potential of PNG, check out Macromedia’s Fireworks, the first Web graphics tool to use PNG as its native format. Fireworks takes full advantage of PNG’s alpha transparency features and enhanced palette. Excellent resources for more information about the PNG format are the PNG home page at www.libpng.org/pub/png/ and the W3C’s PNG page at www.w3.org/Graphics/PNG. Using Inline Images An inline image can appear directly next to text — literally in the same line. The capability to render inline images is one of the major innovations in the evolution of the World Wide Web. This section covers all the basics of inserting inline images and modifying their attributes using Dreamweaver. Inserting images Dreamweaver can open and preview any graphic in a GIF, JPEG, or PNG format. With Dreamweaver, you have many options for placing a graphic on your Web page. ✦ Position your cursor in the document, and from the Common category of the Insert bar, select the Image button. Tip 114931-6 ch08.F 7/18/02 6:58 AM Page 324 Simpo PDF Merge and Split Unregistered Version - http://www.simpopdf.com 325 Chapter 8 ✦ Inserting Images ✦ Position your cursor in the document, and from the menu bar, choose Insert ➪ Image. ✦ Position your cursor in the document, and from the keyboard, press Ctrl+Alt+I (Command+Option+I). ✦ Drag the Image button from the Insert bar onto your page. ✦ Drag an icon from your file manager (Explorer or Finder) or from the Site panel onto your page. ✦ Drag a thumbnail or filename from the Image category of the Assets panel onto your page. This capability is covered in detail in a subsequent section, “Dragging images from the Assets panel.” For all methods except those using the Assets panel or the file manager, Dreamweaver opens the Select Image Source dialog box (shown in Figure 8-3) and asks you for the path or address to your image file. Remember that in HTML, all graphics are stored in separate files linked from your Web page. Dreamweaver’s Select Image Source dialog box includes two main options at the top: Select File Name from File System or from Data Sources. This chapter covers inserting static images from the file system. For information about including dynamic images from data sources, see Chapter 16. Figure 8-3: In the Select Image Source dialog box, you can keep track of your image’s location relative to your current Web page. When you insert an image, you may also see the Image Tag Accessibility Attributes dialog box, depending on your preference settings. See the section, “Adding image descriptions,” for more information about this dialog box. Whether you are choosing from the file system or a data source, the image’s address can be a filename; a directory path and filename on your system; a directory path and filename on your remote system; or a full URL to a graphic on a completely separate Web server. The file doesn’t need to be immediately available in order for the code to be inserted into your HTML. Note Note 114931-6 ch08.F 7/18/02 6:58 AM Page 325 Simpo PDF Merge and Split Unregistered Version - http://www.simpopdf.com 326 Part II ✦ Web Design and Layout From the Select Image Source dialog box, you can browse to your image folder and preview images before you load them. If you are using Mac OSX, the image preview is automatically enabled. To enable this feature on Mac OS9, click the Show Preview button; on Windows, select the Preview Images option. In the lower portion of the dialog box, the URL text box displays the format of the address Dreamweaver inserts into your code. Below the URL text box is the Relative To list box. Here, you can choose to declare an image relative to the document you’re working on (the default) or relative to the site root. (After you’ve saved your document, you can see its name displayed beside the Relative To list box.) To take full advantage of Dreamweaver’s site management features, you must open a site, establish a local site root, and save the current Web page before beginning to insert images. For more information about how to begin a Dreamweaver project, see Chapter 5. Relative to Document Once you’ve saved your Web page and chosen Relative to Document, Dreamweaver displays the address in the URL text box. If the image is located in a folder on the same level as, or within, your current site root folder, the address is formatted with just a path and filename. For instance, if you’re inserting a graphic from the subfolder named images, Dreamweaver inserts an address like the following: images/logo.jpg If you try to insert an image currently stored outside of the local site root folder, Dreamweaver automatically copies the image file to your Default Images Folder, specified when you first created the site. To change the setting for your Default Images Folder, select Site ➪ Edit Sites, and in the Edit Sites dialog box, select the current site and click Edit. In the Local Info category of the Advanced tab of the Site Definition dialog box, you can specify the Default Images Folder. If your site does not include a Default Images Folder, you can see the prompt window shown in Figure 8-4, asking if you want to copy this image to your local site root folder. If you answer Yes, Dreamweaver gives you an opportunity to specify where the image should be saved within the local site. Whenever possible, keep all of your images within the local site root folder so that Dreamweaver can handle site management efficiently. Figure 8-4: Dreamweaver reminds you to keep all your graphics within the local site root folder for easy site management. If you attempt to drag an out-of-site image file from the Site panel or from your file manager, and you select No to the prompt asking to copy the file to your site, the file is not inserted. If you attempt to insert the file using the Select Image Source dialog box and answer No, the file Tip Cross- Reference 114931-6 ch08.F 7/18/02 6:58 AM Page 326 Simpo PDF Merge and Split Unregistered Version - http://www.simpopdf.com 327 Chapter 8 ✦ Inserting Images is inserted with the src attribute pointing to the path of the file. In this case, Dreamweaver appends a prefix that tells the browser to look on your local system for the file. For instance, the file listing would look like the following in Windows: file:///C|/Dreamweaver/images/logo.jpg whereas on the Macintosh, the same file is listed as follows: file:///Macintosh HD/Dreamweaver/images/logo.jpg If you upload Web pages with this file:///C| (file:///Macintosh HD) prefix in place, the links to your images will be broken. It is easy to miss this error during your testing. Because your local browser can find the referenced image on your system, even when you are browsing the remote site, the Web page appears perfect. However, anyone else browsing your Web site only sees placeholders for broken links. To avoid this error, always save your images within your local site. Dreamweaver also appends the file:///C| prefix (or file:///Macintosh HD in Macintosh) if you haven’t yet saved the document in which you are inserting the image. However, when you save the document, Dreamweaver automatically updates the image addresses to be document-relative. Relative to Site Root If you select Site Root in the Relative To field of the Select Image Source dialog box, and you are within your site root folder, Dreamweaver appends a leading forward slash to the directory in the path. The addition of this slash enables the browser to correctly read the address. Thus, the same logo.jpg file appears in both the URL text box and the HTML code as follows: /images/logo.jpg When you use site root–relative addressing and you select a file outside of the site root, the image file will automatically be copied to your Default Images Folder, if one exists. If your site does not have a Default Images Folder, you get the same reminder from Dreamweaver about copying the file into your local site root folder — just as with document-relative addressing. For more details about using dynamic sources for your images, see Chapter 16. Dragging images from the Assets panel Web designers often work from a collection of images, much as a painter uses a palette of colors. Re-using images builds consistency in the site, making it easier for a visitor to navi- gate through it. However, trying to remember the differences between two versions of a logo — one named logo03.gif and another named logo03b.gif — used to require inserting them both to find the desired image. Dreamweaver eliminates the visual guesswork and simplifies the re-use of graphics with the Assets panel. The Images category is key to the Assets panel. Not only does the Assets panel list all the GIF, JPEG, and PNG files found in your site — whether or not they are embedded in a Web page — selecting any graphic from the list instantly displays a thumbnail. Previewing the images makes it easy to select the proper one. Moreover, once you’ve found the correct image, all you need to do is drag it from the Assets panel onto the page. Before you can use graphics from the Assets panel, you must inventory the site by choosing the Refresh Site List button, as shown in Figure 8-5. When you click the Refresh button (or Cross- Reference Caution 114931-6 ch08.F 7/18/02 6:58 AM Page 327 Simpo PDF Merge and Split Unregistered Version - http://www.simpopdf.com 328 Part II ✦ Web Design and Layout Making Images Dynamic Once you’re familiar with creating data source connections and establishing recordsets in Dreamweaver, you can display images dynamically. Dreamweaver doesn’t actually insert images from a database, but rather inserts the path and filenames of the images — right into the src attribute of the <img> tag. The data contained in the field can consist of either just a filename, like logo.gif, or a path and filename, like /images/logo.gif. Under most circumstances, it’s better to have just the file- name; this structure provides the most flexibility, as the path to the file can be prepended by Dreamweaver. Follow these steps to include an image dynamically: 1. Choose Edit ➪ Preferences; in the Accessibility category, clear the Images check box. Caution: Dreamweaver does not correctly insert the code for a dynamic image if this Accessibility option is enabled. 2. Make sure you have defined a recordset with at least one field consisting of paths to graphics. 3. Position your cursor where you want your dynamic image to appear. 4. From the Common category of the Insert bar, select Image. Alternatively, you can drag the Image button to the proper place on the page. In either case, the Select Image Source dialog box appears. 5. Navigate to any folder within your Local Root directory. Dreamweaver mishandles the insertion of the image from a data source if the dialog attempts to reference an image outside the site. 6. From the Select Image Source dialog box, Windows users should choose the Select File Name From Data Sources option at the top of the page. Macintosh users should select the Data Source button found just above the URL field. 7. If necessary, expand the data source to locate and select the desired image field. Dreamweaver places the code for inserting the dynamic image into the URL field. 8. If your image data (the paths to the images) contains spaces, tildes, or other nonstandard characters, the data must be encoded in order to be read properly by the server. From the Format list, select one of the following: Encode – Server.HTMLEncode (ASP JavaScript or Visual Basic) Encode – HTMLEncodedFormat (ASP C#) Encode – URLEncoded Format (ColdFusion) Encode – Response.EncodeURL (JSP) 9. If your data is stored as filenames only, enter any required path in the URL field before the existing code. The path information may be document-relative, site-root–relative, or absolute. 10. Click OK when you’re done. 114931-6 ch08.F 7/18/02 6:58 AM Page 328 Simpo PDF Merge and Split Unregistered Version - http://www.simpopdf.com 329 Chapter 8 ✦ Inserting Images choose Refresh Site List from the context menu on the Assets panel), Dreamweaver examines the current site and creates a list of the graphics, including their sizes, file types, and full paths. To see an image, just click its name, and a thumbnail appears in the preview area of the panel. Figure 8-5: Re-use any graphic in your site or from your Favorites collection by dragging it from the Assets panel. To increase the size of the thumbnail, make the preview area larger by dragging open the border between the preview and list areas and/or the size of the entire panel. Dreamweaver increases the size of the thumbnail while maintaining the width:height ratio, so if you just move the border or resize the panel a little bit, you may not see a significant change. Thumbnails are never displayed larger than their actual size. You can insert an image from the Assets panel onto your Web page in two ways: ✦ Drag the image or the file listing onto the page. ✦ Place your cursor where you’d like the image to appear. Select the desired image in the Assets panel, and then click the Insert button. Tip Click to view Favorites list Add to Favorites Edit Refresh Site ListClick to insert image 114931-6 ch08.F 7/18/02 6:58 AM Page 329 Simpo PDF Merge and Split Unregistered Version - http://www.simpopdf.com 330 Part II ✦ Web Design and Layout Do not double-click the image or listing in the Assets panel to insert it onto the page; double- clicking invokes the designated graphics editor, be it Macromedia Fireworks, Adobe Photoshop, or another program, and opens that graphic for editing. From the Document window, Ctrl+double-clicking (Command+double-clicking) accomplishes the same thing. The Dreamweaver Assets panel is designed to help you work efficiently with sites that contain many images. For example, in large sites, it’s often difficult to scroll through all the names look- ing for a particular image. To aid your search, Dreamweaver enables you to sort the Images category by any of the columns displayed in the Assets panel: Name, Size, Type, or Full Path. Clicking once on the column heading sorts the assets in an ascending order by that criterion; click the column again to sort by that same criterion, but in a descending order. You can also use the Favorites list to separately display your most frequently used images, giving you quicker access to them. To add an image to the Favorites list, select the image in the Assets panel, and then click the Add to Favorites button or select Add to Favorites from the Assets panel context menu. To retrieve an image from Favorites, first select the Favorites option at the top of the Assets panel. To switch back to the current site, choose the Site option. Dreamweaver makes it easy to organize your favorite images by enabling you to create fold- ers in the Favorites list. To create a folder, with the Favorites list displayed, click the New Favorites Folder button in the Assets panel. Add images to the folder by dragging the image names in the Favorites list to the folder. Moving an image to a folder in your Favorites list does not change the physical location of the image file in your site. You can organize your Favorites list however you choose without disrupting the organization of files in your site. If one or more objects are selected on the page, the inserted image is placed after the selection; Dreamweaver does not permit you to replace a selected image with another from the Assets panel. To change one image into another, double-click the graphic on the page to display the Select Image Source dialog box. Note one final point about adding images from the Assets panel: If you reference a graphic from a location outside of the site, Dreamweaver asks that you copy the file from its current location. You must select the Refresh Site Files button to display this new image in the Assets panel. When you select the Refresh button, Dreamweaver adds new images (and other assets) to the cache of current assets. If you add assets from outside of Dreamweaver — using, for example, a file manager — you might need to completely reload the Assets panel by Ctrl+clicking (Command+clicking) the Refresh button, or by selecting Recreate Site List from the Assets panel context menu. Modifying images 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”> Tip Note Caution 114931-6 ch08.F 7/18/02 6:58 AM Page 330 Simpo PDF Merge and Split Unregistered Version - http://www.simpopdf.com 331 Chapter 8 ✦ Inserting Images Dreamweaver centralizes all of its image functions in the Property inspector. The Image Property inspector, shown in Figure 8-6, displays a small thumbnail of the image as well as its file size. 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. This sequence opens the Select Image Source dia- log box. When you’ve selected the desired file, Dreamweaver automatically refreshes the page and corrects the code. Figure 8-6: The Image Property inspector gives you total control over the HTML code for every image. With the Image Property inspector open when you insert your image, you can begin to modify the image attributes immediately. Editing images Dreamweaver is a terrific Web authoring tool, but it’s not a graphics editor. After inserting an image into your Web page, you often find that the picture needs to be altered in some way. Perhaps you need to crop part of the image or make the background transparent. Dreamweaver enables you to specify your primary graphics editor for each type of graphic in the File Types/Editors category of Preferences. Once 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 may need to click the Reset Size button on the Image Property inspector to see your changes. 114931-6 ch08.F 7/18/02 6:58 AM Page 331 Simpo PDF Merge and Split Unregistered Version - http://www.simpopdf.com 332 Part II ✦ Web Design and Layout If you are using Macromedia Fireworks as your image editor, here is some good news: Dreamweaver and Fireworks are closely integrated, enabling you to modify and optimize images with ease. Find out more in Chapter 24. 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. 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. To resize an image in Dreamweaver, select the image and type the desired number of pixels in the Property inspector H (height) and W (width) fields. With Dreamweaver, you can also visually resize your graphics by using the click-and-drag method. A selected image has three sizing handles located on the right, bottom, and lower-right corners of its bounding box. Click any of these handles and drag it out to a new location — when you release the mouse, Dreamweaver resizes the image. To maintain the current height/width aspect ratio, hold down the Shift key after dragging the corner sizing handle. If you alter either the height or the width of an image, Dreamweaver displays the Property inspector values in bold in their respective fields. You can restore an image’s default measure- ments by clicking the H or the W independently — or you can choose the Reset Size button to restore both values. If you elect to enable your viewer’s browser to resize your image on the fly using the height/width values you specify, keep in mind that the browser is not a graphics-editing pro- gram and that its resizing algorithms are not sophisticated. View your resized images through several browsers to ensure acceptable results. Using margins You can offset images with surrounding whitespace by using the margin attributes. The amount of whitespace around your image can be designated both vertically and horizontally through the vspace and hspace attributes, respectively. These margin values are entered, in pixels, into the V Space and H Space text boxes in the Image Property inspector. The V Space value adds the same amount of whitespace along the top and bottom of your image; the H Space value increases the whitespace along the left and right sides of the image. These values must be positive; HTML doesn’t allow images to overlap text or other images (outside of layers). Unlike in page layout, “negative whitespace” does not exist. The hspace and vspace attributes are deprecated in HTML 4.0. This means that, although the attributes are currently still supported, there is another, preferred method to achieve the same effect in newer browsers. In this case, the margins can also be implemented using Cascading Style Sheets, described in Chapter 20. Note Caution Note Cross- Reference 114931-6 ch08.F 7/18/02 6:58 AM Page 332 Simpo PDF Merge and Split Unregistered Version - http://www.simpopdf.com 333 Chapter 8 ✦ Inserting Images 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. Adding image descriptions It’s easy for Web designers to get caught up in the visual design of their Web pages; after all, designers can devote hours to creating a single graphic, or to perfectly positioning a graphic on the page relative to other information. Remember, however, that graphics aren’t the most effective communication method in every circumstance. Luckily, the <img> tag includes two attributes that enable you to describe your image using plain text: the alt attribute and the longdesc attribute. The alt attribute gives you a way to include a short description of a graphic. The alt attribute is used in many ways: ✦ As a page is loading over the Web, the image is first displayed as an empty rectangle if the <img> tag contains width and height information. Some browsers display the alt description in this rectangle while the image is loading, offering the waiting user a preview of the forthcoming image. ✦ In many browsers, the alt text displays as a ToolTip when the user’s pointer passes over the graphic. ✦ A real benefit of alt text is providing input for browsers not displaying graphics. Remember that text-only browsers are still in use, and some users, interested only in content, turn off the graphics to speed up the text display. ✦ The W3C is working toward standards for browsers for the visually impaired, and the alt text can be used to describe the image. For all these reasons, it’s good coding practice to associate an alt description with all of your graphics. In Dreamweaver, you can enter this alternative text in the Alt text box of the Image Property inspector. If the <img> tag does not contain an alt attribute, some screen readers read the filename when they encounter the image, which slows down how quickly visually impaired users can get to the real information on your page. For images that are purely visual and don’t con- tribute to the meaning of your content, such as bullets or spacer images, include a blank alt attribute. To do this, open the Image Property inspector and select <empty> from the Alt drop-down list. Currently, the alt attribute is the most valuable tool you have for providing a textual description of your images. However, some images are just too complicated to describe in a few words, and are too important to gloss over. For these situations, 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, and in the Accessibility category, select the Images option. When you add a new image to your page, the Image Tag Accessibility Attributes dia- log box appears, as shown in Figure 8-7. In the Long Description text box, click the folder icon to navigate to an HTML file that contains a textual description of the image. Tip 114931-6 ch08.F 7/18/02 6:58 AM Page 333 Simpo PDF Merge and Split Unregistered Version - http://www.simpopdf.com [...]... Although numerous variations exist, a banner ad is typically an animated GIF of a particular width and height, and within a specified file size 343 1 149 31-6 ch08.F 7/18/02 6:58 AM Page 344 Simpo PDF Merge and Split Unregistered Version - http://www.simpopdf.com 344 Part II ✦ Web Design and Layout The Standards and Practices Committee of the Interactive Advertising Bureau (IAB) established a series of standard... navigation bar simplifies getting around a site — even for a first-time user 347 1 149 31-6 ch08.F 7/18/02 6:58 AM Page 348 Simpo PDF Merge and Split Unregistered Version - http://www.simpopdf.com 348 Part II ✦ Web Design and Layout Some designers build their navigation bars in a separate graphics program and then import them into Dreamweaver Macromedia Fireworks, with its capability to export both images and... moves away 345 1 149 31-6 ch08.F 7/18/02 6:58 AM Page 346 Simpo PDF Merge and Split Unregistered Version - http://www.simpopdf.com 346 Part II ✦ Web Design and Layout from the graphic, the image returns to its original form The rollover indicates interactivity, and attempts to engage the user with a little bit of flair Rollovers are usually accomplished with a combination of HTML and JavaScript Dreamweaver. .. You can also drag the Rollover Image button to any existing location on the Web page Dreamweaver opens the Insert Rollover Image dialog box shown in Figure 8- 14 1 149 31-6 ch08.F 7/18/02 6:58 AM Page 347 Simpo PDF Merge and Split Unregistered Version - http://www.simpopdf.com Chapter 8 ✦ Inserting Images Figure 8- 14: The Rollover Image object makes rollover graphics quick and easy 2 If desired, you... percent sign (%) in the drop-down list 4 To change the height of the horizontal rule, type a pixel measurement in the height (H) text box 5 To change the alignment from the default (centered), open the Align drop-down list and choose another alignment 341 1 149 31-6 ch08.F 7/18/02 6:58 AM Page 342 Simpo PDF Merge and Split Unregistered Version - http://www.simpopdf.com 342 Part II ✦ Web Design and Layout... the actual image is 1 149 31-6 ch08.F 7/18/02 6:58 AM Page 345 Simpo PDF Merge and Split Unregistered Version - http://www.simpopdf.com Chapter 8 ✦ Inserting Images ready In Dreamweaver, placeholder ads can easily be maintained as Library items and placed as needed from the Assets panel, as shown in Figure 8-13 CrossReference See Chapter 29 for information on creating and using Dreamweaver Library items... long, narrow background image In the following figure, the background image is 45 pixels high, 800 pixels wide, and only 6K 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 If you are using Cascading Style Sheets... border attribute exists Dreamweaver adds border=”0” to all image links, as a default The second, newer method uses Cascading Style Sheets Although this is an excellent one-stop solution for 4. 0 and later browsers, the links still appear with underlines on earlier browser versions Refer to the Dreamweaver Technique for eliminating the underlines in links in Chapter 20 355 1 249 31-6 ch09.F 7/18/02 6:58... 8-1; additional banner guidelines are available at the IAB Web site (www.iab.net) Table 8-1: IAB Advertising Banner Sizes Dimensions Name 46 8 × 60 Full Banner 2 34 × 60 Half Banner 125 × 125 Square Button 88 × 31 Micro Bar 120 × 90 Button 1 120 × 60 Button 2 120 × 240 Vertical Banner 160 × 600 Wide Skyscraper 120 × 600 Skyscraper Acceptable file size for a banner ad is not as clearly specified, but it’s... should remain stationary while the foreground text scrolls over the background These options are not available with the Page Properties method 339 1 149 31-6 ch08.F 7/18/02 6:58 AM Page 340 Simpo PDF Merge and Split Unregistered Version - http://www.simpopdf.com 340 Part II ✦ Web Design and Layout Tiling Images Web designers use the tiling property of background images to create a variety of effects with . images and modifying their attributes using Dreamweaver. Inserting images Dreamweaver can open and preview any graphic in a GIF, JPEG, or PNG format. With Dreamweaver, you have many options for placing. keep all of your images within the local site root folder so that Dreamweaver can handle site management efficiently. Figure 8 -4: Dreamweaver reminds you to keep all your graphics within the local. image. In the following figure, the background image is 45 pixels high, 800 pixels wide, and only 6K in size. When the browser window is set at 640 × 48 0 or 800 × 600, the image is tiled down the page