[ Pobierz całość w formacie PDF ]
.An Oak and a Reedwere arguing about their strength.Figure 9-12: Text wraps around images when they are aligned to the left or rightThe Tag and Its Attributes 161Web Design in a Nutshell, eMatter EditionCopyright © 2000 O Reilly & Associates, Inc.All rights reserved. The Tag and Its AttributesAdding space around aligned imagesWhen text flows around a graphic, it tends to bump right up against the graphic sedge.Usually, it is preferable to have a little space between the graphic and thesurrounding text.In HTML, this is provided by using the vspace and hspaceattributes within the tag.The vspace attribute holds a specified number of pixels space above and belowan aligned graphic.Space to the left and the right is added with hspace.Note thatspace is always added symmetrically (both top and bottom, or on both sides), andit is not possible to specify an amount of space along a particular side of thegraphic.Figure 9-13 shows an image aligned with the hspace attribute set to 12.An Oak and a Reed.Figure 9-13: Image alignment with horizontal spacingStopping text wrapText will automatically wrap to fill the space along the side of an aligned graphic.If you want to stop the wrap and have the text resume below the image, insert aline break tag () with a clear attribute.The clear attribute has three possible values: left, right, and all.It tells thebrowser to skip down on the page until the specified margin is clear (i.e., nographics) and begin flowing the text at that point.If your graphic is aligned right, insert to begin the text belowthe graphic.For left-aligned graphics, use.The tag starts the text after the graphics on both margins (seeFigure 9-14), so it may be the only value you ll ever need.Tips for Placing GraphicsThese are a few tips for graphics use that may not be obvious from simply lookingat HTML code.Link to large imagesRemember that when designing for the Web, you must always consider the time ittakes to download files.Images are particularly bandwidth-hungry, so you shoulduse them inline with care.One successful strategy for providing access to verylarge images (with correspondingly large file sizes) is to provide a postage-stamp-size preview graphic that links to the full-size graphic.162 Chapter 9 Adding Images and Other Page ElementsWeb Design in a Nutshell, eMatter EditionCopyright © 2000 O Reilly & Associates, Inc.All rights reserved. The Tag and Its AttributesAn Oak and a Reedwere arguing about their strength.When a strong.Figure 9-14: Effect of the clear=all attributeThe preview could be a reduction of the whole image or just an alluring frag-ment.Be sure to provide information necessary to help users decide whether theywant to spend the time clicking the link, such as a description of what they regoing to get and the file size of the image (so they can make an estimate of howlong they ll need to wait).Reuse images whenever possibleWhen a browser downloads a graphic, it stores it temporarily in the disk cache (aspace for temporarily storing files on the hard disk).That way, if it needs to redis-play the page, it can just pull up a local copy of the HTML and graphics fileswithout making a new trip out to the remote server.When you use the same graphic repetitively in a page or a site, the browser onlyneeds to download the graphic once.Every subsequent instance of the graphic isgrabbed from the local cache, which means less traffic for the server and fasterdisplay for the end user.The browser recognizes a graphic by its entire pathname, not just the file name, soif you want to take advantage of file caching, be sure that each instance of yourgraphic is pointing to the same graphic on the server (not multiple copies of thesame graphic in different directories).The lowsrc trickLarge graphics may take a long time to download via slow connection speeds,which means your viewers may spend moments staring at an empty space on thescreen [ Pobierz caÅ‚ość w formacie PDF ]