Tài liệu Creating Cool Web Sites with HTML, XHTML, and CSS- P4 pdf

THÔNG TIN TÀI LIỆU

Thông tin cơ bản

Định dạng
Số trang	50
Dung lượng	2,24 MB

Nội dung

557386 Ch07.qxd 4/2/04 9:54 AM Page 124 Ł 124 Creating Cool Web Sites with HTML, XHTML, and CSS <img src=”banner.gif” /> When you have a graphics file, the <img> tag is used to place that file in the text. Suppose that I have a file called black-box.gif that I want to use as the opening graphic in my Web page. The following example shows how this file might appear in an HTML document: <html> <head> <title>The Black Box</title> </head><body> <img src=”black-box.gff” alt=”black box logo” /> <h1>Welcome to the Black Box</h1> People are always trying to figure out how things work. From “How Things Work” to “Why Things Work”, it’s an obsession. But why? Why not just think of everything in life as a simple <i>Black Box?</i>. <br /><br /> Ready to change your perspective? <a href=”blackbox2.html”>yes</a> </body> </html> The <img> formatting tag has quite a variety of attributes, as this chapter illustrates. The two attributes that must appear in the <img> tag are a specification of the image source file itself, in the format src=”filename” , and a tag indicating the alternative text to display if the image cannot be loaded, the alt=”text” tag. Figure 7-1 shows how the preceding HTML appears when viewed in a browser. Figure 7-1: The Black Box page with graphics specified, but not loaded. Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. 557386 Ch07.qxd 4/2/04 9:54 AM Page 125 125 Ł Chapter 7: From Dull to Cool by Adding Graphics The small box at the top of Figure 7-1 with a small x inside is not the graphic I wanted to include; rather, it’s an indication from Internet Explorer that an inline graphic was specified with the <img> tag, but not loaded. In this case, the graphic was not loaded because I mistyped the name of the graphics file, specifying black-box.gff rather than black-box.gif . (Did you notice?) Instead, the text of the alt attribute is shown, but it’s definitely not what I want! To correct the problem, simply fix the spelling. Figure 7-2 shows what the resulting Web page looks like with all the information properly loaded (more attractive than with the unloaded graphic, eh?). Figure 7-2: The Black Box Web page with the fully loaded graphic. You may have a fast Internet connection, but remember that many people are trapped with slow dial-up connections at 28,800 baud or—horrors!—slower. Earthlink, America Online, and MSN users can access Web pages, but performance can be quite slow. Bigger graphics have more data to transfer to the user and, therefore, take longer to receive. Also keep in mind that, to speed up access, many users simply modify their Web browser preferences to skip loading the graphics unless they’re required to understand a page. A general guideline in gauging how long a graphic takes to download is to figure that each 1K of graphics size translates to one second of download time for dial-up users. So, when you create graphics, it’s a good idea to look at the file sizes and ask yourself whether the specific graphic is worth the wait. Sometimes it is, but often it isn’t and just creates a frustrat ing situation for the user. A popular use of graphics is a button that you can create by wrapping the <img> tag with an <a> anchor. If I have two button graphics— yes.jpg and no.jpg —here’s how I can spiff up the Black Box page: Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. 557386 Ch07.qxd 4/2/04 9:54 AM Page 126 Ł 126 Creating Cool Web Sites with HTML, XHTML, and CSS <html> <head> <title>The Black Box, Take III</title> </head><body> <img src=”black-box.gif” alt=”black box logo” /> <h1>Welcome to the Black Box</h1> People are always trying to figure out how things work. From “How Things Work” to “Why Things Work”, it’s an obsession. But why? Why not just think of everything in life as a simple <i>Black Box?</i>. <br /><br /> Ready to change your perspective? <a href=”blackbox2.html”> <img src=”yes.jpg” alt=”yes” /></a> <a href=”not-ready.html”><img src=”no.jpg” alt=”no” /></a> </body> </html> The graphics included in this page ( yes.jpg and no.jpg ) are separate files in the same directory as the Web page. Figure 7-3 shows the new Web page with all graphics included. Figure 7-3: The improved Black Box page displays the added graphics. Ł A critical question you might ask is the following: Where do the graphics files live? The answer to this question is that they are almost always on the same server, in tip the same directory, as the HTML files. If you upload your HTML file to a Web server, for example, you also need to upload the graphics used in those files. As you get more comfortable with Web site development, you might want to adopt the habit of automatically creating a Graphics folder to corral the graphics files in a single spot. Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. 557386 Ch07.qxd 4/2/04 9:54 AM Page 127 127 Ł Chapter 7: From Dull to Cool by Adding Graphics A page in which graphics are a vital part of the design, however, can look peculiar to some Web users because a small percentage of people on the Web still either cannot or opt not to download graphics when viewing Web pages. This creates a design dilemma: Should pages be designed to omit the graphics, to include them as critical, or just to add them as an afterthought? Some Web pundits tell you to just go wild with the graphics because “within a few months” everyone will have a fast, powerful computer and a high-speed connection. I don’t agree with that advice. Pundits make this claim year after year, yet a majority of Web users still don’t have high-speed connections. Because the various graphic formats, already compressed, still produce large files, you should ensure that people who omit the images still see a mean ingful page. The argument over whether or not to go wild with graphics breaks down like this. Some designers insist that you should be able to design for a specific browser and platform. Those sites say stuff like Enhanced for Internet Explorer 5.0 and Windows 2000. I think their design is unintentionally user-unfriendly: Why immediately tell users they’ve got the wrong tools to visit your site? Another group believes that specific browsers shouldn’t be required, but that no-graphics viewers are irrelevant to their online experience. They eschew alt attributes (as you see shortly) or any text alternatives for the graphical buttons and pictures. For some sites that’s cool, but for many, it’s just a sign of poor implementation. Finally, some think that every graphic should have a text alternate and that the pages should work wonderfully for all users. That’s the safest bet, but if you want to advertise your T-shirt designs online, clearly, text descriptions aren’t very useful! Which road you take definitely depends on the goal of your site and your vision of your target audience. Ł Notice in the previous example that the graphical buttons had a small rectangular border. If you look at the example on your own computer, you see it’s a blue border. note The browser adds the border for the same reason that hypertext links are blue and underlined, to let the user know the graphic is clickable. Don’t like it? You can elimi nate the blue border around a graphic image that’s serving as a hyperlink by adding another attribute to the <img> tag: border=”0” . If the preceding example contains <img src=”yes.jpg” alt=”yes” border=”0” /> , the blue border vanishes. Text Alternatives for Text-Based Web Browsers Although the most popular browsers—Netscape and Internet Explorer—offer support for a vari ety of graphic formats, an important Web browser called Lynx is designed for text-only display. Lynx is found most commonly on Unix systems where users have dial-up accounts. Even at a very slow connect speed, Lynx enables many users to navigate the Web and have fun. Graphics can’t be shown in Lynx, so an additional attribute is allowed in the <img> format tag for just that situation. The magic sequence is alt=”alternative-text” . Whatever replaces alternative-text is displayed if the user can’t view graphics or chooses to skip loading graphics to speed up surfing the Web (which roughly five to ten percent of Web users still do, according to most estimates I’ve seen). Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. 557386 Ch07.qxd 4/2/04 9:54 AM Page 128 Ł 128 Creating Cool Web Sites with HTML, XHTML, and CSS To understand why the alt= element is necessary, see Figure 7-4. For this example, I removed the alt tag included in the HTML and renamed the button graphics to be more like what is used in a typical Web site design. Figure 7-4: The Black Box looks much different in Lynx’s text-only display. The user faces a problem, obviously: How do you answer the question posed? That’s another great reason why you should always include some meaningful information in the alt attribute. Modern Web browsers show this alt text immediately upon loading a page and then gradu ally replace each placeholder with the actual graphic. Carefully planned alt text can enhance the user’s experience and even be fun. For example, the text alternative for my photograph on one page I designed is Weird picture of some random guy rather than simply My photo. Ł You don’t have to place brackets, parentheses, or anything else around the text in the alt= section of the <img> tag; but in my experience, brackets or parentheses tip help users figure out what’s on the page (and they make the text look better as well). Experimentation is the key for learning how to make this work best for your own page design. Image Alignment Options Go to the first section of this chapter and refer to Figure 7-3. Look carefully at the relative alignment of the text Ready to change your perspective? with the YES and NO icons. The text is aligned with the bottom of the icons, which looks good. But what if you want a different alignment? Or what if you use various alignments for multiple graphics? You can specify a third attribute in the <img> formatting tag, align , which gives you precise control over alignment. Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. 557386 Ch07.qxd 4/2/04 9:54 AM Page 129 129 Ł Chapter 7: From Dull to Cool by Adding Graphics Standard alignment The three standard alignments are align=”top” , align=”middle” , and align=”bottom” . By default, adjacent material is aligned with the bottom of the image, as you can see in Figure 7-3. The following HTML snippet demonstrates these three alignment options: <h1>More about Winter Birds</h1> <img src=”feeder.jpg” align=”top” border=”0” alt=”feeder” /> (align=”top”) There are many birds that can visit your feeder even in the middle of the coldest period, with snow many inches thick on the trees. Three common birds that we see here in Colorado during the winter months are Winter Wrens, Barrow’s Goldeneyes, and Yellow-Bellied Sapsuckers. <br clear=”all” /><hr /> <img src=”feeder.jpg” align=”middle” border=”0” alt=”feeder” /> (align=”middle”) There are many birds that can visit your feeder even in the middle of the coldest period, with snow many inches thick on the trees. Three common birds that we see here in Colorado during the winter months are Winter Wrens, Barrow’s Goldeneyes, and Yellow-Bellied Sapsuckers. <br clear=”all” /><hr /> <img src=”feeder.jpg” align=”bottom” border=”0” alt=”feeder” /> (align=”bottom”) There are many birds that can visit your feeder even in the middle of the coldest period, with snow many inches thick on the trees. Three common birds that we see here in Colorado during the winter months are Winter Wrens, Barrow’s Goldeneyes, and Yellow-Bellied Sapsuckers. Figure 7-5 shows this example in a Web browser. It demonstrates the options for a graphic surrounded by text. Notice that the text doesn’t gracefully wrap; instead, the alignment attrib utes affect only the first line of text subsequent to the image. All additional text moves down below the graphic. Ł A simple rule of thumb for images is the following: If you don’t want any material to note appear to the right of the graphic, add a <br /> tag to the end of the HTML sequence that specifies the graphic. The three basic image alignment options refer to the alignment of information that appears subsequent to the image itself. An additional set of image-alignment options refers to the alignment of the image relative to the window, rather than the adjacent material relative to the graphic. I discuss these additional options in the following section. Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. 557386 Ch07.qxd 4/2/04 9:54 AM Page 130 Ł 130 Creating Cool Web Sites with HTML, XHTML, and CSS Figure 7-5: Top, middle, and bottom image alignment options. More sophisticated alignment The three basic image-alignment options just discussed offer considerable control of graphic positioning, but they don’t enable you to wrap text around a graphic, either left or right, on the screen. To remedy this, some additional image alignment options offer much more control. But beware, they also make formatting more confusing because of the difference between alignment of the image and alignment of the adjacent material. These options are better demonstrated than discussed. The following example improves signifi cantly on Figure 7-5 by using both the alignment options, align=”left” and align=”right” : <h1>More about Winter Birds</h1> <img src=”feeder.jpg” align=”left” border=”0” alt=”feeder” /> (align=”left”) There are many birds that can visit your feeder even in the middle of the coldest period, with snow many inches thick on the trees. Three common birds that we see here in Colorado during the winter months are Winter Wrens, Barrow’s Goldeneyes, and Yellow-Bellied Sapsuckers. <br clear=”all” /><hr /> Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. 557386 Ch07.qxd 4/2/04 9:54 AM Page 131 Ł 131 Ł Chapter 7: From Dull to Cool by Adding Graphics <img src=”feeder.jpg” align=”right” border=”0” alt=”feeder” /> (align=”right”) There are many birds that can visit your feeder even in the middle of the coldest period, with snow many inches thick on the trees. Three common birds that we see here in Colorado during the winter months are Winter Wrens, Barrow’s Goldeneyes, and Yellow-Bellied Sapsuckers. <br clear=”all” /><hr /> Figure 7-6 shows how the preceding text is formatted using align=left and align=right — quite a step up from the primitive placement options shown earlier. Figure 7-6: Aligning graphics to the left and right makes text more presentable in Explorer. Not only can you specify alignment within the now complex <img> formatting tag, you can also specify the graphic’s width and height before it loads. By specifying these attributes, the document can be rendered on the screen faster, even before your browser receives the graphic. tip Specify height and width to have your Web pages load faster! Values are specified in pixels, as follows: <img src=”feeder.jpg” width=”67” height=”108” /> Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. 557386 Ch07.qxd 4/2/04 9:54 AM Page 132 Ł 132 Creating Cool Web Sites with HTML, XHTML, and CSS The preceding example reserves a 67 × 108-pixel box on the screen for the graphic, which enables the page to be displayed, including all text, even before your browser receives the graphic from the Web server. This functionality enables you to begin reading the text portion of the Web page immediately. Be careful with these attributes, however, because if you have a 100 × 200 graphic and specify height=“200” and width=“350”, Navigator and Explorer both stretch the image to fit the 200 × 350 space, making it look pretty weird and distorted. Another attribute that I mention earlier in this chapter is border , which you can use to great effect: The border attribute enables you to specify the exact width of the border around a linked image. The following code shows an example of the border attribute: <body style=’text-align: center’> <!— Tic-Tac-Toe —> <h2><b>Tic-Tac-Toe</b></h2> <p> It’s X’s Turn . (<span style=’color:blue’>This color</span> indicates a recommended move).</p> <div> <a href=”topleft”><img src=”Graphics/boxx.gif” border=”0” alt=”x” /></a> <a href=”topcntr”><img src=”Graphics/box.gif” border=”0” alt=” “ /></a> <a href=”topright”><img src=”Graphics/box.gif” border=”0” alt=” “ /></a> <br /> <a href=”left”><img src=”Graphics/boxo.gif” border=”0” alt=”o” /></a> <a href=”center”><img src=”Graphics/boxo.gif” border=”0” alt=”o” /></a> <a href=”right”><img src=”Graphics/box.gif” border=”2” alt=” “ /></a> <br /> <a href=”btmleft”><img src=”Graphics/boxx.gif” border=”0” alt=”x” /></a> <a href=”btmcenter”><img src=”Graphics/box.gif” border=”0” alt=” “ /></a> <a href=”btmright”><img src=”Graphics/box.gif” border=”0” alt=” “ /></a> </div> </body> Figure 7-7 displays the resulting graphic. Notice that the border specification enables you to indicate the recommended next move by simply placing a blue (or gray, for the figures in this book) border around the box. Earlier in this chapter, I used this same attribute to turn off the blue border on the YES and NO buttons. Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. 557386 Ch07.qxd 4/2/04 9:54 AM Page 133 133 Ł Chapter 7: From Dull to Cool by Adding Graphics Figure 7-7: A Tic-Tac-Toe game created using the border attribute. Two more useful image alignment and presentation attributes are vspace and hspace , which control the vertical and horizontal space around each graphic, respectively. Consider an example of a left-aligned graphic. When displayed, the text starts immediately adjacent to the edge of the graphic. By using hspace , I can fix this potential problem by specifying a par ticular number of pixels as a horizontal spacing between the graphic and the adjacent text, as the following HTML shows: <h1>More about Winter Birds</h1> <img src=”feeder.jpg” align=”left” border=”0” alt=”feeder” hspace=”40” /> There are many birds that can visit your feeder even in the middle of the coldest period, with snow many inches thick on the trees. Three common birds that we see here in Colorado during the winter months are Winter Wrens, Barrow’s Goldeneyes, and Yellow-Bellied Sapsuckers. <br clear=”all” /><hr /> <img src=”feeder.jpg” align=”left” border=”0” alt=”feeder” hspace=”4” /> There are many birds that can visit your feeder even in the middle of the coldest period, with snow many inches thick on the trees. Three common birds that we see here in Colorado during the winter months are Winter Wrens, Barrow’s Goldeneyes, and Yellow-Bellied Sapsuckers. <br clear=”all” /><hr /> Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. [...]... Pirelli”> Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark Ł 152 Creating Cool Web Sites with HTML, XHTML, and CSS This isn’t exactly XHTML, but it’s pretty close To convert Taco’s HTML output to XHTML, simply add an alt tag for the image, and replace the > ending of the and tags with the XHTML form of /> Make those changes, and the final image map is ready... of thousands of Web graphics, including tons of animated GIFs, bullets, backgrounds, buttons, themed images, rules, dividers, and icons To access the graphics, visit http://www.arttoday.com/ Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark Ł 142 Creating Cool Web Sites with HTML, XHTML, and CSS Scanned or digital photographs Another way to produce graphics for your Web site... Split-Merge on www.verypdf.com to remove this watermark Ł 140 Creating Cool Web Sites with HTML, XHTML, and CSS Where Can You Find Images? Considering that all graphics are specified with the same basic HTML tag, it’s remarkable how much variation exists among different sites on the Web Web designers create varied appearances for their pages through the types of graphics they use and their unique combi... which is shareware, but still quite inexpensive Go to http://www.coffeecup.com/ to learn more Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark Ł 150 Creating Cool Web Sites with HTML, XHTML, and CSS Building an image map After you install Taco HTML editor, launch it, and follow these steps: 1 Choose Insert ➪ Image Map The dialog box shown in Figure 7-18 appears Figure 7-18:... specified margin (possible values are left, right, all) Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark Ł 156 Creating Cool Web Sites with HTML, XHTML, and CSS Table 7-4: CSS Styles Covered in This Chapter CSS Style Definition background color Enables you to define the CSS container’s background color Use it with the body tag to change the background of the entire page Values...Ł 134 Creating Cool Web Sites with HTML, XHTML, and CSS Figure 7-8 demonstrates the result of this source code Figure 7-8: You can use the hspace attribute to adjust the space between text and an image A subtle thing to note in Figure 7-8 is that hspace adds the specified number of blank pixels on both sides of the graphic vspace does the same thing with vertical space If you specify... www.verypdf.com to remove this watermark Ł 144 Creating Cool Web Sites with HTML, XHTML, and CSS Working with digital photographs One of the easiest ways to add images to your Web site is use of your digital camera Whether it’s a picture of how messy your desk has become to photos of your kids doing cute things, if you have a digital camera and can transfer the images from your camera to your computer,... Sites with HTML, XHTML, and CSS Figure 7-16: Transparent graphics can add a cool element to your icons by letting the page’s background bleed through the edges of the image Figure 7-17: Creating a transparent graphic in Paint Shop Pro Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark Chapter 7: From Dull to Cool by Adding Graphics Animated GIF Images Ł 149 Another cool element... just black With CSS, you can also specify a specific style of border with the border style, as I discuss in Chapter 12 Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark Ł 146 Creating Cool Web Sites with HTML, XHTML, and CSS Grabbing images off the Net Another way to get images that doesn’t involve being artistic or using a camera or scanner is to find interesting, attractive... graphics and type-manipulation packages support transparent GIFs If yours doesn’t—check the documentation to make sure—it’s time to upgrade Ł tip For a comprehensive list of utilities and all sorts of goodies, zip over to Yahoo! (http://www.yahoo.com/) and look in Computers/World WideWeb/Programming Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark Ł 148 Creating Cool Web Sites . PDF Split-Merge on www.verypdf.com to remove this watermark. 557386 Ch07.qxd 4/2/04 9:54 AM Page 130 Ł 130 Creating Cool Web Sites with HTML, XHTML, and. PDF Split-Merge on www.verypdf.com to remove this watermark. 557386 Ch07.qxd 4/2/04 9:54 AM Page 132 Ł 132 Creating Cool Web Sites with HTML, XHTML, and

Ngày đăng: 15/12/2013, 01:16

Xem thêm