|
|
by Dick Oliver
Every time you sit down to design a Web page today, you're faced with an agonizing decision: Do you use lots of big graphics for maximum impact, or do you stick to plain old text that will convey information quickly and clearly? In this chapter, I show you how to get the best of both worlds by pushing Web page text to its creative limits.
I also take you step-by-step through creating graphical titles and buttons, which you can substitute for "real" text to give your pages a stylistic flair.
Some of the fancier stuff covered in this chapter currently shows up only in Netscape Navigator 3.0 and Microsoft Internet Explorer 3.0. However, because everything is in HTML, the same pages will still look great in most other popular browsers.
Face it, after a few hours of surfing, most of the pages on the Web all start to look the same-the logo, the heading, the too-wide single column of text with cute little iconic images to the left every once in a while. Then there are those all-one-big-graphic pages that take forever to download and contain only six words for you to read before you click yet another all-one-big-graphic page that takes forever to download…. It's enough to put you to sleep, even after that fifth cup of coffee.
But just when you're nodding off, you come across a page like the one in Figure 18.1 (which you can view online at http://www.iterated.com/). Most of the text is real text, so it pops up fast. But then those snappy little title graphics appear one by one, each in just the right place next to the text it refers to, and the whole thing is laid out in a distinctive, attractive way that just oozes "cool" without reeking of some artist's overripe ego.
Now, you might prefer a different aesthetic than what this page displays, but the tricks its designer used to make it stand out can be adapted to make your pages unique in a totally different direction. The key elements to notice, in any case, are the following:
In this chapter, you'll learn how to make highly expressive pages that meet all these criteria and more.
You'll notice the FONT tag used often in the examples throughout this chapter. Using this tag to set the size and color of text is pretty much a no-brainer: The SIZE attribute can take any value from 1 (tiny) to 7 (fairly big), and the COLOR attribute can take the standard English color names (black, white, red, green, blue, yellow, magenta, cyan, aqua, fuchsia, gray, lime, maroon, navy, olive, silver, and teal). The actual size and exact color of the fonts depend on the user's screen resolution and preference settings, but you can be assured that SIZE=6 will be a lot bigger than SIZE=2, and that COLOR="red" will certainly show its fire. Both Netscape Navigator and Microsoft Explorer now support FONT SIZE and COLOR, and most other browsers will soon support this tag, too.
Another font trick you should know about is the <TT> tag, which changes from the user's normal, proportionally spaced font to a monospaced "typewriter type" font. Theoretically, each user can choose any font he or she wants when configuring the browser, and the "monospaced" font may not even be monospaced for some crazy users. But most people just stick with the standard fonts their browser comes set up with, so you should design and test your pages with those default fonts, too. (The standard proportional font is usually Times New Roman, and the standard monospaced font is almost always Courier or Courier New.)
With the new 3.0 versions of both Navigator and Internet Explorer, Netscape and Microsoft have added another powerful form of font control: the FONT FACE attribute. It allows you to specify the actual typeface that should be used to display text-and has been the source of much rejoicing among Webmasters who are awfully sick of Times and Courier!
The site in Figure 18.2 uses these font controls (and another new feature, borderless frames) to present a warmly welcoming homestyle site.
The code to set the font used in Figure 18.2 (in the file examples/maple/main.htm on the CD-ROM) is this:
<FONT FACE="Lucida Handwriting, Brush Script, Brush Script MT" SIZE=5 COLOR="#800000">
If the browser can find a font named Lucida Handwriting on a user's system, that font is used. Otherwise, it checks for a font named Brush Script or Brush Script MT and uses whichever of those it can find. If the user doesn't have any of those fonts installed, the default font is used (this is usually Times New Roman).
| Tip |
Note that both TrueType and Postscript fonts installed on the user's system can be used in Web pages. TrueType fonts are more common, but it's always a good idea to include the name of a similar Postscript font (if you know one), because some people don't use TrueType at all. In this example, Brush Script is the customary name for the Postscript version of the font, but Brush Script MT is the most common name of the TrueType version of the same font. I included both names just to be on the safe side. |
Browsers other than Navigator 3.0 and Microsoft Explorer 3.0 will ignore the FONT FACE attribute and display the default fonts they always use. Figure 18.3 shows the same page as in Figure 18.2, displayed with Netscape Navigator 2.0.
Currently, only fonts that each user happens to have on his or her system will show up, and you have no control over which fonts are installed. Furthermore, the exact spelling of the font names is important, and many common fonts go by several slightly different names. Extensions to HTML will soon support a new, highly compact font format that can be automatically downloaded along with your pages to solve these problems. But for now, you just have to stick to the most common fonts and make sure your pages still look acceptable in Times New Roman.
Figure 18.4 shows the most common TrueType fonts, many of which are also available in Postscript format. Microsoft offers a number of these fonts available for free download from this site:
http://www.microsoft.com/truetype/
Microsoft has also included these fonts (and variations on them) in Windows and other popular software packages.
If you want to use a font on your Web page that isn't on this list, don't be afraid to do so! The user will never see an error message if the font can't be found-the worst thing that could happen is that the user won't see your special font, but will still see the text in the next best font that can be found. If one of the fonts in Figure 18.4 has a similar feel to the one you want, include it as a "second choice," as I did with Brush Script in the preceding example.
As you saw in Chapter 8 "Using Style Sheets," style sheets are without a doubt the Next Big Thing in the fast-paced world of the Web. The concept is simple: You create a single "style sheet" document that specifies the fonts, colors, backgrounds, and other characteristics that establish a unique "look." Then you link every page that should have that "look" to the style sheet, instead of specifying all those style elements over and over again in each document separately. When you decide to change your official corporate typeface or color scheme, you can modify all your Web pages at once just by changing one or two style sheets.
If style sheets accomplished this and nothing else, they'd save millions of dollars worth of Webmasters' time and become an integral part of most Web-publishing projects, but they aim to do this and much more. The proposed HTML style sheet standard enables Web authors to set many formatting characteristics that were never possible to modify before with any amount of effort. These include exacting typeface controls, letter and line spacing, margins and page borders, and expanded support for non-European languages and characters. They also let you specify sizes and other measurements in familiar units, such as inches, millimeters, and picas.
In short, style sheets bring the sophistication level of paper-oriented publishing to the Web. And they do so-you'll pardon the expression-"with style."
Despite their intimidating power, style sheets can be very simple to create. Take a look at the documents shown in Figures 18.5 and 18.6. They share several properties that could be put into a common style sheet:
Figure 18.5 : This page shares several characteristics in common with the page in Figure 18.6.
(Note that Figure 18.5 is the same document as Figure 18.2, displayed by Microsoft Explorer instead of Netscape Navigator.)
Here's how an HTML style sheet that specified these properties would look:
BODY {font: 12pt Lucida Handwriting;
color: #800000;
background: url(paper.JPG) #E0E080}
H1 {font: 18pt Lucida Handwriting}
H2 {font: 14pt Lucida Handwriting}
The first thing you'll undoubtedly notice about this style sheet is that it doesn't look anything like normal HTML. Style-sheet specifications are really a separate language in and of themselves.
Of course, there are some familiar HTML tags in there. As you might guess, BODY, H1, and H2 in the style sheet refer to the corresponding tags in the HTML documents to which the style sheet will be applied. The specifications for what all text within that tag should look like are in curly braces after each tag name.
In this case, all BODY text that isn't within some other tag should be rendering at a size of 12 points, in the Lucida Handwriting font, if possible, and with the color #800000. The BODY background should be the image found at the relative URL paper.JPG-or if no image of that name can be found, the background color should be set to #EOEO80. Any text within H1 or H2 tags should be rendered in Lucida Handwriting at a size of 18 points and 14 points, respectively.
| Note |
The "point sizes" used in the HTML <FONT> tag are not the same as the point sizes specified in style sheets. <FONT SIZE=3> corresponds to approximately 12-point text, <FONT SIZE=1> is about 6-point text, and <FONT SIZE=7> (the maximum size for the FONT tag) is about 24-point text. You can specify font sizes as large as you like with style sheets, although most display devices and printers won't correctly handle fonts over 200 points. |
All that remains is to link this style sheet to the HTML documents. You do this by including a <LINK> tag in the <HEAD> section of each document:
<HEAD>
<TITLE>A Very Stylish Page Indeed</TITLE>
<LINK REL=STYLESHEET TYPE="text/css" HREF="mystyle.css">
</HEAD>
This assumes the style sheet was saved under the name mystyle.css in the same directory folder as the document containing the preceding HTML. Internet Explorer then gives the body and heading text the properties specified in the style sheet, without the need for any FONT tags or BODY BACKGROUND attribute in the document itself.
In some situations, you might want to specify styles that will be used in only one Web page. You can then enclose a style sheet between <STYLE> and </STYLE> tags and include it in the beginning of an HTML document, between the </HEAD> and <BODY> tags. No <LINK> tag is needed, and you can't refer to that style sheet from any other page (unless you copy it into the beginning of that document, too).
If you want to specify a style for only a small part of a page, you can go one step further and put a STYLE attribute within a <P>, <DIV>, or <SPAN> tag. (<SPAN> and </SPAN> are "dummy" tags that do nothing in and of themselves, except specify a range of text to apply any STYLE attributes you add.)
Here's how a sample STYLE attribute might look:
<P STYLE="color: green">This text is green, but <SPAN STYLE="color: red"> this text is red.</SPAN> Back to green again, but...</P> <P>...now the green is over, and we're back to the default color for this page.
Although this example's effect could be achieved as easily with the <FONT COLOR> tag, many style specifications have no corresponding HTML tag. Generally, you should avoid inline styles except when there's no way to do what you're after in HTML and you feel that using an external style sheet would be too cumbersome.
| Tip |
Even when you use a separate style sheet document, you can specify any unique style changes you want for a particular document inline. The most local style specification overrides any conflicting styles previously specified. This principle is central to the style sheet concept and is why they're officially called Cascading Style Specifications (CSS). |
The style sheet standard is actively under development, and the implementation of style sheets in MS Internet Explorer 3.0 is by no means complete. The style specifications currently supported by Internet Explorer are explained in the following list, but be sure to check Microsoft's Web site (http://www.microsoft.com/) for any late-breaking enhancements and changes in the standard.
The ability to specify these few style properties for many documents at once-or any portion of a document-is already revolutionary. Expect the next versions of Internet Explorer and Netscape Navigator (and of other Web browsers) to take style sheets even further toward the ideal of online publishing with all the flexibility of traditional publishing tools.
In situations where you want to make sure all viewers see a special font, you can substitute graphics images for a few key words in the text of your pages. Figures 18.7 and 18.8 show two very simple but visually powerful examples of real text mixed with graphics images of text in a fancy font. These two-color graphics are quite large, but they compress tightly and load quickly because they're so simple.
Figure 18.7 : Powerful visual effects don't have to be complex.
Note that the image in Figure 18.8 doesn't use transparency, but appears to because the graphic's background color matches the page's background color. (See Chapter 16, "Bigger, Faster, Better Graphics," for details on how to set the text and background colors and which colors can be relied on to match a graphic on most computers.)
Figure 18.8 : Nontransparent images can look transparent if you match the page's background color.
The page in Figure 18.9 is a little trickier. Here, the text appears to "bleed" off the top of the page because it's actually a background tile. You can use background graphics for nonrepeating elements, as long as you make the image wider than about 1000 pixels and taller than 750 pixels, and put little enough text on the page so that it usually fits on a single screen without scrolling. (Very few people surf the Internet at screen resolutions greater than 1024¥768.)
| Tip |
You might think that a 1000¥750-pixel image would be too big to be practical as a background, but the black-and-white background graphic in Figure 18.9 is actually only 4 K and loads in less than two seconds over a 28.8 Kbps modem. Because gif and JPEG files are compressed efficiently, the size of the image always depends more on its visual complexity than on the actual resolution. In fact, blank space of any size takes up almost no space in the graphics file when compressed, so you could even use a 1000¥3000-pixel image with 2500 pixels worth of blank space at the bottom for your text to scroll over and still keep the file size under 5 K. The moral of the story: When you want to grab visitors' attention fast, don't be afraid to think big as long as you also think simple. |
Figure 18.10 illustrates yet another background-as-graphic-as-text stunt. Visitors to this page can scroll down through several copies of the background image, even though no text or foreground images appear on most of the page.
There are three ways to get this effect. The most common is to include a long, totally transparent gif image as a "spacer" to fill the empty region on the page where you want just the background to show. Another, which is even faster and more efficient, is to set the text color to match the background color and insert some "invisible" text down the page. The HTML code for Figure 18.10 appears in Listing 18.1. The third technique for getting the same result is to insert several blank lines between <PRE> and </PRE> tags, which specify preformatted text, including line breaks.
Listing 18.1. Inserting invisible text.
<HTML> <HEAD><TITLE>DOWN</TITLE></HEAD> <BODY BACKGROUND="down.gif" BGCOLOR="black" TEXT="black" VLINK="white" ALINK="white" LINK="white"> <H1><A HREF="looklook.htm">LOOK</A> i<P> n<P> v<P> i<P> s<P> i<P> b<P> l<P> e<P> -<P> t<P> e<P> x<P> t<P> !<P> <A HREF="looklook.htm">HERE.</A></H1> </BODY> </HTML>
Notice that no FONT COLOR commands need to be used because all the letters I wanted to be visible are within links, and the link color is set to white in the <BODY> tag.
The simplified demonstration pages in Figures 18.7 through 18.10 are just a warm-up to get you thinking about ways to do things differently while staying within the "letter of the law" of HTML. The page in Figure 18.11 takes creative text layout a bit further, to demonstrate the kind of creative freedom you have to put expressive and stylistic text on your Web pages.
Figure 18.11: Graphical text and creative layout can give your pages plenty of personality.
| Note |
The pages featured in the following section obviously involve some tricks that don't directly relate to type layout. For details on how to make seamless backgrounds, image maps, and multicolumn tables, refer to Chapter 20, "Backgrounds, Image Maps, and Creative Layouts." |
The most common situations where you should substitute graphics images for text are when you're using stylistic buttons and titles. Of course, you can always make links and headings with ordinary text, but using graphics gives you much more flexibility. It also ensures that every visitor to your page sees the same font and color scheme for the key design elements.
The rest of this chapter gives you detailed instructions and examples for creating graphical buttons and bars in Paint Shop Pro, the shareware graphics program most recommended for this type of work. Paint Shop Pro is introduced in Chapter 16, and many of the effects used in this chapter are discussed in Chapter 17, "Working with JPEG and gif Images."
A frightening number of people, when they notice that Paint Shop Pro has a Buttonize command on the Special Effects menu, start using it to create every button on their Web pages. And why not? It's quick, it's easy, and you can't argue with the fact that it makes something that looks an awful lot like a button.
This might, in fact, be a satisfactory approach if you're short on time and creativity-and if you don't mind your Web pages looking exactly like every other amateur Web page in the universe. However, chances are you're looking for something more than a quickie "me-too" page. Fortunately, it's almost as quick and easy to create truly unique buttons that communicate what your site is all about.
In this section, I outline a general formula you can follow to create an unlimited variety of professional-quality buttons without hiring (or becoming) a professional graphics artist. To illustrate the principles in action, I explain exactly how to create each of the four buttons shown in Figure 18.12, step by step.
Figure 18.12: Paint Shop Pro's special effects can help you produce a wide variety of button styles.
The first-and most important-step in designing a button takes place in your imagination. What colors, shapes, and textures best express the mood and message of your Web site? In the examples for this chapter, I use the same color scheme (electric blue and white) and text font (Parisian) throughout every example, to highlight the other differences between them. Naturally, you want to select a font (or, at most, two) and a color scheme that reflect the style you're after.
| Note |
Occasionally, a rectangular button with lots of gradually changing colors will save more efficiently and look better as a JPEG file. Be warned, though, that the JPEG compression algorithm can blur text if you're not careful with the amount of compression. |
By following these eight basic steps and adding your own choice of effects, you can create beautiful buttons that convey the unique flavor of your own Web pages.
A Webmaster does not live by buttons alone. You'll almost certainly want some other matching graphics for your pages. Since the title is probably the first thing that people will look at on your page, you might want to make it a fancy graphic instead of (or in addition to) a text heading. In fact, aside from graphical buttons, fancy titles are probably the most common use of graphics on the Web.
Almost as common are graphical bars, rules, or page dividers. If your page has a lot of text, a thematic bar or rule is a great way to offer a visual break to readers. Whether your pages are text intensive or not, bars can add flair and help remind people where they're at on the page.
Figures 18.13 through 18.16 are pages from a fictitious Web site I created for this chapter. For each of the four button styles you saw in Figure 18.12, I used similar shapes and effects to make matching titles and bars.
Figure 18.13: Rules don't have to follow the rules--and who says titles have to be just text?
Figure 18.13 demonstrates how a little creativity can go a long way toward giving a page its own identity. By applying the same button effects to larger words, I made a title that follows the same theme. Cutting and pasting one word over the other and using a slightly deeper shadow enhances the three-dimensional effect. Similarly, cutting and pasting a line of shaded and shadowed dots fits the page's theme better than simply drawing a horizontal line.
The title in Figure 18.14 was a no-brainer once the buttons were designed. It uses precisely the same fill and shadow settings-which Paint Shop Pro remembers until you change them, even if you close down the program and start it up again. The only change was that I saved the title as a 256-color image instead of a 16-color image. The color banding in the large region of gradient fill would have been too pronounced with only 16 colors. For a little visual variety, I used the Image | Special Effects | Cut Out command to drop the rules into the page, instead of the Drop Shadow command to elevate them above the page. The resulting Web page took only minutes to make, but looks sharp and loads fast.
Of course, titles don't have to look exactly the same as buttons to give a page visual consistency. In Figure 18.15, I used the same Emboss and Colorize filters on the title that I did on the buttons, but instead of adding a frame and drop shadow, I simply made the background color transparent. This is a popular (and very easy) trick, which makes the title seem to have been embossed onto the page. The horizontal rules above and below the title are actually separate graphics, which could be used anywhere on the page for dividers.
Figure 18.15: Embossing gives titles and rules that oh-so-chic stamped-paper look.
| Tip |
Notice that the text in Figure 18.15 stays neatly near the center of the page and lines up nicely with the title. Doing this is simple; just put the text in a one-cell table with the width you want. In this case, the HTML was this: <TABLE WIDTH=440><TR><TD> Please click on the vintage of your choice from our current selection of fine wines below. </TD></TR></TABLE> You'll find more details on making tables in Chapter 20. |
If you choose to use multiple effects in a graphic, it can be tedious and trying to exactly repeat all the steps you took when you go to make another matching image. To make the title in Figure 18.16, for example, I played around a bit with Hot Wax Coating, Negative Image, and other color replacements and adjustments. When I finally got a result I liked, I would have been hard put to remember just what I'd done to arrive at it.
How, then, did I make the matching horizontal bar? Easy. I just cut out the letter l from the word Electric and pasted copies of it together to form a long vertical bar. Then I rotated it and added a drop shadow in the same direction as I had for the title. I often copy the letter l or I from text quite often to make a horizontal rule. Dots from an i can make nice dotted bars, too.
This chapter has explored four ways to add flair to your pages while making your work as a Web author more efficient. Font controls and style sheets let you customize the mood of your text; special effects and creative layouts let you do the same with your graphics and overall page appearance.
I hope this chapter has inspired you to be more creative than you thought you could be with the words on your Web pages. Chapter 19, "Animating Graphical Images," tells you how to make your Web pages dynamic with moving images and icons.
