HTML 4_01 Weekend Crash Course - G. Perry
.pdf
Session 15—Transparent Imaging |
205 |
Listing 15-1
You can use a transparent pixel image to indent a group of text.
<h1>To do this:</h1> 1. Fly
<br>2. Drive <br>3. Take a train <br>4. Walk <br><br>
<!-- Without the align=left, the image would appear between the two lists. -->
<img src=”images/trans.gif” width=45 height=250 align=left> <h1>You must do this:</h1>
1. Buy a plane ticket (expensive) <br>2. Buy a car
<br>3. Buy a ticket (cheap) <br>4. Get exercise
Specifying a Low-Resolution Prototype
High-resolution images are graphic image files that are large, contain lots of colors, and show high detail of picture clarity. Many modern digital cameras shoot highresolution photographs. Generally, a monitor is limited to 72 dpi (dots per inch), whereas most high-resolution images take much more than 72 dpi of resolution. Therefore, such an image is much larger than needed for a Web page; the extra resolution goes unused.
If you absolutely must use a large graphic image, consider making two images: one the regular image and the other a scaled-down version with a much lower resolution and fewer colors. The <img> tag supports a special lowsrc= attribute that will bring in a lower-resolution image that you supply and, once that image is loaded, will begin loading the higher-resolution image.
The low-resolution image might contain just enough detail for the user to see what is being loaded next. Perhaps you use a black-and-white version of the larger, colorful image as the low-resolution picture that takes the place of a higher-resolution photo. The low-resolution attribute works something like a
dithered image in that the user sees a portion of the real image immediately and then the high-resolution becomes visible once the full image loads.
Afternoon Saturday—III Part
15 Session
206 |
Saturday Afternoon |
Note
Your low-resolution image must match the high-resolution image in pixel size or the second image will not replace the first one properly.
Once you create a scaled-down version of a high-resolution, slow-loading image, you can specify the low-resolution image with the use of the <img> tag, as follows:
<img src=”images/company.jpg” lowsrc=”images/companyLight.gif” width=350 height=350 border=3 alt=”Company Personnel”>
The lowsrc= attribute displays the low-resolution version of the image. That lowresolution image displays while the higher-resolution image, specified by the src= attribute, loads in the background. When the browser finishes loading the highresolution image, the browser replaces the low-resolution image with the better graphic.
Session 10 explains how thumbnail images are used.
Cross-Ref
A low-resolution image, specified with the lowsrc= attribute, is not the same thing as a thumbnail image. With a thumbnail image, you have to take action to see the larger and higher-resolution image. With the low-resolution image specified with the lowsrc= attribute, the Web browser automatically loads the lowerresolution image first and then replaces that low-resolution image with the high-resolution image as soon as the larger image finishes arriving from the Web server.
REVIEW
Transparency creates a see-through effect for GIF image backgrounds.
You need to use a graphics program to convert a GIF image to a transparent GIF image.
Anti-aliasing can cause extra colors to interfere with transparency.
Keep a transparent one-pixel image handy to act as a filler when you need exact spacing between text and graphics on your Web page. The image gives you more precise control than tables do.
A low-resolution image can load much faster so that your users can view something until the higher-resolution equivalent image loads and appears.
Session 15—Transparent Imaging |
207 |
QUIZ YOURSELF
1.How many colors can be transparent at one time in a typical transparent GIF image? (See “About Transparent Images.”)
2.True or False: You can make an image transparent with HTML. (See “Making Images Transparent.”)
3.What does an alpha channel do? (See “Transparency Problems Caused by Anti-Aliasing.”)
4.When might a halo effect appear? (See “Transparency Problems Caused by
Anti-Aliasing.”)
5.Why are images that are specified with the lowres= attribute not considered thumbnails? (See “Specifying a Low-Resolution Prototype.”)
Afternoon Saturday—III Part
15 Session
S E S S I O N
16
Advanced Color and
Imaging Techniques
Session Checklist
Understand that Web-safe black-and white-colors may be safe but do not always produce great results
Keep your site less crowded by utilizing whitespace
Create navigation bars to give your users a familiar way to traverse your site
Create banners to divide your site so that users can easily distinguish between common areas
Master graphics tips and shortcuts to make eye-catching Web pages
As Session 8 explained, you should use only the 216 Web-safe colors if you want to maintain consistency across the range of browsers used today, and you should use colors that work well together, which is not always easy
given the 216 Web-safe color limits. In this session, you learn some additional color issues and tips to consider when designing Web sites. You also learn some additional graphics techniques, namely creating navigation bars and banners.
210 |
Saturday Afternoon |
A Problem with Displaying Black-and-White Photos
The problem with using only Web-safe colors is the low number of Web-safe colors available: 216. If you do not want a user’s browser to substitute another color for a color you desired, stick with the Web-safe colors. Although the user’s resolution might make your Web site look different, at least the colors are safe and will come across to the end browser properly.
A problem occurs when you limit your Web page design to 216 colors but you attempt to display black-and-white photos on your page. As the artist Ansel Adams proved, black-and-white photography can be beautiful and can convey tones and feelings that get lost in color photography. Perhaps you have black-and- white photos of relatives from long ago that you want to put on your site. Your site may be a historical site that shows Old West pictures or mobster bosses from the roaring twenties.
If you put the pictures on your Web page, you’ll soon see that they have a color problem. The black-and-white pictures can appear grainy. At first, this makes no sense because the colors black and white are a part of the 216 Web-safe colors. Black uses the hexadecimal color #000000, and white uses #FFFFFF. Black and white are even among the 16 named colors that you can assign to backgrounds and text. The following code, which changes the color of specific text, is allowed and should work in all browsers your users use:
<font color=black> <font color=white>
Nevertheless, a black-and-white photo contains many more colors than black and white. It may contain hundreds of shades of grays, working as black-and-white transitional colors. Table 16-1 lists the only four shades of gray that the 216 Websafe colors include.
Table 16-1
Browser-Safe Shades of Gray
Decimal |
Hexadecimal Equivalents |
51-51-51 #333333
102-102-102 #666666
153-153-153 #999999
204-204-204 #CCCCCC
Session 16—Advanced Color and Imaging Techniques |
211 |
The answer is, no good answer exists. If you must use black-and-white photography, you are stuck with lousy pictures due to the limited color rendition, or you must increase the number of colors you use and hope for the best when the user browses your page. Use JPEG images and not GIFs, as JPEG grays render better than GIFs.
|
Never make assumptions about color substitution. If you offer a |
|
picture with multiple shades of gray on your site, browsers are |
Never |
free to turn your light grays into pink if the browser should deem |
it necessary. |
Design Tip: White Works Well
Your Web page design could benefit from whitespace, also called negative space, which, basically, is blank space between elements. Ample whitespace in your Web page is crucial so that your pages don’t take on a too-busy appearance. (However, keeping your Web page free of clutter isn’t always possible due to the lack of screen real estate for which you must design.) White is a tremendous design tool that is underutilized by many Web masters. But don’t limit whitespace just to the color white, because whitespace is more of a concept than a color. Use whitespace to group items together or to keep items spaced apart. For example, instead of keeping borders around every cell of every table you create, and instead of overusing the horizontal rule, consider doing nothing but separating your Web page elements with blank space.
Consider the simple Web page shown in Figure 16-1. The message is simple, the page is simple, but the page contains too much of something. What can it be?
The answer is that the page contains too much of everything. Too much non- whitespace exists. The page is overly busy. Even with the browser’s toolbars and status bar turned off, the page doesn’t completely fit the browser window in spite of the small amount of information presented. Obviously, this is an extreme example, but consider what happens when one does away with the fluff while still keeping the message. Figure 16-2 shows a much simpler example, yet it works very well. The graphics are spaced better, the background doesn’t consume the message, the design and layout are slightly underdeveloped but far less busy, and the page is hands-down a better Web page. Even with the status bar and toolbar on, the page fits well.
Afternoon Saturday—III Part
16 Session
212 |
Saturday Afternoon |
Figure 16-1
Does a design problem exist with this Web page?
Figure 16-2
Separating elements with nothing more than whitespace improves this Web page.
Session 16—Advanced Color and Imaging Techniques |
213 |
Creating Navigation Bars
One of the most useful places for GIF-based icons is in navigation bars. An icon is a small image that represents something else, such as the images you see next to the Windows Start menu options. A navigation bar works like a menu for your Web page, containing a series of icons that appears across the top of the screen or along the edge of the screen.
Figure 16-3 shows a navigation bar that can appear at the top of a Web page. The user clicks an icon, and that icon’s page, represented by a hyperlink, loads and displays on the user’s screen. The nice thing about navigation bars is that you will probably use the same navigation bar or parts of the same navigation bar in several of your site’s pages. You’ll insert the navigation bar code at the top of each page on the site so that the user can easily traverse the site with the familiar bar.
|
Navigation bars can help reduce your site’s page-loading time |
|
if you put the navigation icons in your images folder. Don’t be |
Tip |
afraid to use the same image twice on your Web site. Many of |
your site’s pages, for example, may share the same navigation |
|
|
bar or parts of the navigation bar. By using the same GIF image, |
|
and by putting all your images inside the site’s images folder (as |
|
discussed in Session 7), you ensure that the user’s browser only |
|
has to download your graphic images once even if the images |
|
appear multiple times throughout your site. |
Here is the code that produced the navigation bar in Figure 16-3:
<!-- Navigation bar follows --> <a href=Breads.html>
<img src=”MaryBread.gif” border=0 hspace=35 alt=Breads></a> <a href=Fruits.html>
<img src=”MaryFruit.gif” border=0 hspace=35 alt=Fruits width=87 height=87></a>
<a href=Desserts.html>
<img src=”MaryDessert.gif” border=0 hspace=35 alt=Desserts></a>
<a href=Coffees.html>
<img src=”MaryCoffee.gif” border=0 hspace=35 alt=Coffees width=70 height=73></a>
<a href=Coffees.html>
<img src=”MaryToGo.gif” border=0 hspace=35 alt=”ToGo Information” width=70 height=73></a>
Afternoon Saturday—III Part
16 Session
214 |
Saturday Afternoon |
Figure 16-3
Navigation bars offer the user a method to traverse the site.
Never create a navigation bar without adding alternative text titles with the alt= attribute. If you were to supply a navigation bar without the alternative text, any user who has turned off the
Never display of graphics will not be able to use your navigation bar unless they know beyond a shadow of a doubt what Web pages your icons are supposed to represent.
Web pages that use frames often contain navigation bars across the top frame or along the left side of the page. The remaining frames hold the remaining contents of the page.
See Session 18 for a discussion of navigation bars in frames.
Cross-Ref