Taking Your Talent to the Web- P20 pot

By linking to an external style sheet from the HTML document 2.. By embedding a style sheet within each HTML document 3.. External style sheets Linking to an external style sheet enables

Trang 1

Leading on the Web serves exactly the same purpose as leading in print: it adds air to the “page” and enhances readability On the screen-based Web, with its low typographic resolution, anything we can do to encourage read-ability is all right by us By contrast, reading may be discouraged when we fail to apply leading and other CSS niceties to our text (see Figure 10.3)

Figure 10.3

The Adobe web column,

written by your humble

author, but laid out by

Adobe’s online design

team CSS is used to

control typography, but

the small text is tough on

the eyes CSS leading and

a larger font-size would

make the reading

experi-ence more pleasurable.

This typographic approach

works well for image

captions, a staple of the

Adobe site, but it is less

well-suited to longish

articles ( www.adobe.com ).

Now that we’ve taken a brief look at the rudiments of CSS, let’s see how web designers can make this work on a site

Types of Style Sheets There are three main ways to use style sheets on a website:

1 By linking to an external style sheet from the HTML document

2 By embedding a style sheet within each HTML document

3 By adding styles inline in an HTML document

Trang 2

Additionally, it is possible to import one style sheet into another Unfortu-nately, this technique is not supported by Netscape Navigator 4, so we will confine our discussion to the first three items If Netscape 4 has gone to its reward by the time you buy this book, you can read up on “CSS import”

at www.w3.org/Style/CSS/ External style sheets Linking to an external style sheet enables you control multiple web pages (or even an entire site) using a single CSS document The more pages con-trolled by the same CSS document, the easier it becomes to make design changes to that site It is literally possible to change the appearance of a 5,000-page website in under a minute, simply by editing one external Style sheet Trust us, this is one maintenance chore you will genuinely enjoy

Five steps to paradise: creating an external style sheet

1 Essentially, in BBEdit, PageSpinner, HomeSite, or any other HTML editor, the designer creates a style sheet For simplicity’s sake, here

is a basic one:

BODY {background: white; font-family: helvetica, arial, sans-serif;}

H1 {font-weight: bold; font-size: 24px; }

P, LI {font-size: 12px; line-height: 150%;}

2 The designer saves this document with a filename ending in css For instance, the name could be style.css, or clientname.css

3 This CSS file is then uploaded to the server via FTP, just like an HTML file

4 Next, in the website’s HTML files, the designer inserts one additional line of code within the <HEAD>tag:

<html>

<head>

<title>Welcome to Widgets.com</title>

</head>

<body>

…and so on

Trang 3

5 The <link>tag calls up the separate syle sheet file (style.css) and uses its contents as instructions for displaying the page

Note that it is possible to link to a CSS file using a relative path (“ /styles/ style.css”), a rooted URL (“/path/from/server/root/style.css”), or a full URL (http://www.widgets.com/styles/style.css) This style sheet will now control any web page that links to it via the additional line of code within the

<HEAD>tag An entire site can be controlled in this way

Embedding a style sheet Web designers who wish to affect only one page may do so by embedding

a style sheet within the <HEAD>tag of that web page

<html>

<head>

<title>Style Sheets Rule!</title>

<! BODY {background: #ffc; font-family: palatino, georgia, times new roman, serif;}

P {font-size: small; line-height: 125%;}

.sub {font: large bold arial, helvetica, sans-serif; margin-top: 25in;}

>

</head>

Note the use of commenting to prevent older, non-CSS-capable browsers from being confused by the code and to prevent search engines from point-lessly indexing your style sheet:

<! (Anything within comments will be ignored by browsers that do not under-stand the code, and ignored as well by search engines Have a nice day.) >

What else is new in this example? The CSS is preceded by a tag that tells the browser how to interpret it:

A more complete heading tells the browser not only that what follows is

an embedded CSS, but also tells what type of media the CSS is intended to support:

Trang 4

The idea is that a document can link to several style sheets For instance, one controls screen presentation (MEDIA=”screen”), another printing, and

a third audio browsers Not all browsers support this as of now, though it’s

a good idea to begin fully spec’ing your CSS anyway

In a Class by Itself All of the preceding is straightforward, but what does sub mean in this line?

.sub {font: large bold arial, helvetica, sans-serif; margin-top: 25in;}

The selector labeled sub is a unique class, created by the web designer for his or her own particular design needs on this page

That’s correct CSS not only gives web designers the power to style traditional HTML markup, it also enables them to create and style unique items to suit their needs

For instance, here, the web designer wished to create a special subhead class with a quarter-inch margin at the top She decided to call it sub because the name was easy to remember and indicated the purpose (subhead) for which the class was created The designer could have called this class unclecharlie

if she wished.

To make use of this special class, the web designer will refer to it in the HTML document in this way:

<div class=”sub”>Here is my subhead, with a quarter-inch margin at the top.</div>

In the web page, the line, Here is my subhead, with a quarter-inch margin at the top would be large, bold, Arial or Helvetica (or generic sans serif) with (surprise!) a quarter-inch margin at the top.

Style sheets rock.

Adding styles inline The inline method is used when the web designer wishes to change the appearance of a single tag or group of tags on one page, and not for chang-ing the entire page or site Addchang-ing styles inline does not offer web design-ers the true power of CSS because it forces them to restyle text one item

at a time Still, it can be very useful at times

Trang 5

For instance, an entire page or site may be set in medium-size Verdana (Helvetica, Arial, sans serif) But one line of text needs to stand out from the rest Perhaps this line of text represents a letter from a customer—or a message from the U.S Internal Revenue Service The web designer decides that this particular line of text should be set in 12px Monaco

She could create an entire class just for that line of text and include that class in the site’s global style sheet, but why create an entire class for one line of text on a single web page? Inline styling does the job better:

Greetings from the I.R.S.</p>

Inline styling seems like an oddity, but it is actually a wonderful supple-mental tool—much like a tube of touch-up paint that is used to correct a small detail

Inline styling is also quite effective for improving the appearance of

<FORM>elements:

<form>

<input type=”button” style=”font-size: 12px; font-family: geneva, arial; background-color:

#ff6600; color: #ffffff;”

value=”Previous Reports”

onClick=”window.location=’com0400d.html’;”

onMouseOver=”window.status=’More of same.’; return true;”

onMouseOut=”window.status=’’;return true;”>

</form>

</div>

Form elements also may be styled via DIV classes in a global style sheet If every <FORM>button on your site is supposed to be orange (#ff6600) and use 12px Geneva or Arial type, by all means create an orangebutton class for the site, declare it on the global style sheet, and then refer to it in individual HTML pages, like so:

<form>

<input type=”button”

class=”orangebutton”

Trang 6

value=”Previous Reports”

onClick=”window.location=’com0400d.html’;”

onMouseOver=”window.status=’More of same.’; return true;”

onMouseOut=”window.status=’’;return true;”>

</form>

</div>

The first web browser to attempt to support CSS was Microsoft Internet Explorer 3.0 (1997) It supported about 30% of the standard A year later, Netscape 4 came out with support that was marginally better than that of IE3 During three years of hell, while Netscape sought to rebuild its browser from the ground up, Navigator 4 sat rotting on the market—its once-proud CSS support looking more and more shoddy IE4 got more of it right and was soon replaced by IE5, which got still more of it right No browser got

it absolutely right, and baffled web users were often reluctant to upgrade

to incremental (4.52 anybody?) versions of these browsers

Thus support for CSS lagged, and problems abounded In 1998, The Web Standards Project (www.webstandards.org) was formed to advocate and

shore up support for CSS and other web standards, and A List Apart

(www.alistapart.com) began running the “Fear of Style Sheets” series

Fear of Style Sheets: CSS and Layout One of the great strengths of CSS is its ability to position elements on a web page Elements may be positioned by exact pixel coordinates (400 pix-els from the top, 32 pixpix-els from the left, for example) They may be posi-tioned relative to each other They may be posiposi-tioned via percentages, permitting web designers to easily set up liquid layouts, as previously discussed

Unfortunately, CSS positioning is not supported in IE3 and is poorly supported in Netscape Navigator 4 In fact, it can cause the browser to

crash, as detailed in A List Apart’s article, “The Day The Browser Died”

(www.alistapart.com/stories/died/)

Trang 7

So until IE3 and Netscape 4 leave the market, many of us will probably keep using HTML tables to create our web layouts Web pages laid out with HTML tables will work in Netscape 1, 2, 3, 4, and 6; in IE 2, 3, 4, 5 and beyond; and in all other graphical browsers, including Opera and iCab

If you’ve been following along, you’ll realize this means that web design-ers still cannot safely separate style from content on commercial projects and will continue to face difficulties in creating sites that work well out-side the traditional desktop computer-based browser But in the trenches, where work gets done, it also means that we can create sites that work for our clients and our clients’ audiences

By late 2001 or soon after, we should be free to truly harness the power of CSS Meanwhile, on personal, noncommercial projects, we can explore the full potential of CSS and other web standards without fear of hurting our clients’ customers (see Figure 10.4) It is hoped that these noncommercial usages of CSS and other web standards help widen interest in emerging technologies and encourage quicker adoption of newer, more standards-compliant browsers

Figure 10.4

Web Trumps, a card game

featuring well-known web

personalities, uses CSS to

control the positioning

and layering of every

image on the page and

JavaScript to reveal new

layers during game play.

Web Trumps is a

mini-masterpiece of graphic

design and web

program-ming—but one requiring

the use of a modern

browser Experiments like

this help hasten the day

web designers can apply

the same level of

sophisti-cation to commercial

designs without worrying

about browser

incompati-bilities ( http://

pixelflo.com/008/ )

Trang 8

Fear of Style Sheets: Leading and Image Overlap

As mentioned earlier in this chapter, CSS leading provides a standard means of improving the legibility and aesthetics of textual presentations

on the Web—something every site designer should care about And it does this while avoiding all the problems associated with transparent GIF hacks and other nonstandard visual workarounds

The CSS line-height property solves all the old problems, but it can lead to new ones, particularly in older browsers whose support for CSS is largely theoretical For instance, in the following example, if CSS line-height is specified for the <p>tag, the image will float on top of the text in both IE3 and early versions of Navigator 4:

<p><img src=”dog.gif” width=”100” height=”100” alt=”My dog, Pookie.” title=”Pookie is a friendly mutt.” align=”left”>My dog Pookie liked this text so much, he decided to sit on it

in IE3 and Navigator 4.</p>

This problem is more prevalent in Mac OS than in Windows, largely because big browser companies spend more time and resources developing browsers for Windows than for other operating systems (All the more miraculous then, that in the year 2000 the best browser on the market was IE5/Mac Arguably it is still the best.) The solution to image overlap is to keep images outside of paragraphs and <div>tags Unfortunately, doing so brings up yet another problem in Netscape Navigator 4:

<p>My dog Pookie liked this text so much, he decided to shove it to the right in its own little column in Navigator 4.</p>

With a left-aligned image placed outside the <p></p>, some versions of Netscape Navigator 4 will stick all the paragraph text in an imaginary col-umn to the right of the image, as if the web designer had desired to cre-ate such a column New paragraphs, in turn, will appear also in that unwanted column Many a simple layout has been ruined in this way

There is no solution to this problem No matter which approach is used, some Netscape 4 users are going to get an ugly layout Because an unwanted and mindlessly stupid column is preferable to text that is

Trang 9

hid-den behind an image, it is best to hope and pray that most Netscape 4.x users are equipped with a more recent version of the browser Alternately, the designer can create pages that use no images whatsoever—scarcely an attractive option Finally, the designer can wrap images inside table cells, given that doing so seems to solve most of these problems—at the terrible cost of adding needless, bandwidth-wasting and time-consuming code to every single web page

The good news of course is that Netscape 6 avoids all these problems, and Netscape 4, like other old browsers, will gradually wither away The bad news is it hasn’t withered away yet So proceed with caution

Fear of Style Sheets: CSS and Typography Guerrilla warfare pays little heed to niceties and neither can designers in the trenches Too much of CSS still does not work in millions of web users’ browsers To prepare you for battle, we will now pay little heed to the way things should work Instead, we will show you what does work in any CSS-capable browser, no matter how old, inadequate, or semi-standards-compatible it is In other words, the following is an interim strategy for use until nearly all web users are packing a CSS-compliant browser If you wish

to control your web typography with CSS (and why wouldn’t you wish to

do that?), there are only two things that always work:

1 Use pixels (not points, not ems, not percentages, not keywords) to specify your font sizes

2 Or use nothing Do not specify font sizes at all, and let the browser’s stylistic defaults and the visitor’s preferences take care of the rela-tive size relationships This approach is detailed in the “Dao of Web

Design” article at A List Apart (www.alistapart.com/stories/dao/) Promise and performance

By now you understand that CSS is an important standard It allows web designers to specify the font family, size, margins, and leading of type on the web; permits web designers to create advanced web layouts without abusing HTML; and enables web designers, web practitioners, and pro-grammers to separate design elements (presentation) from content

Trang 10

This ability to separate presentation from content theoretically empowers

us to create attractive sites without excluding visitors who cannot use graphical browsers—a highly desirable goal It also paves the way for the expansion of the Web beyond the desktop computer and onto a variety of hand-held and other Internet-enabled devices

Yet many times our best CSS efforts fail in one browser or another

Even though the CSS Level 1 standard was finalized in 1996, the first browser to meaningfully support it did not appear until the year 2000 (Internet Explorer 5, Macintosh Edition) Fortunately, Netscape 6 (multiple platforms), Opera 5 (multiple platforms), and Konqueror (Linux/UNIX) soon followed, with commendable CSS support of their own But each of these fine browsers enjoys only a relatively small market share as of this writing

At present, the market is dominated by IE for Windows—a browser that comes teasingly close but misses the mark in a few critical areas The Win-dows version of Microsoft’s browser did not fully support CSS-1 before the release of IE6—if then And Netscape Navigator 4, still used by tens of mil-lions, does such a poor job of handling style sheets that it has been known

to crash upon encountering them, as detailed in A List Apart’s “The Day the

Browser Died.”

Faced with these inconsistencies, many web designers have avoided using CSS altogether A few brave souls have leaped ahead to fully exploit the power of CSS in spite of the dangers posed to old browsers Other web designers and developers have followed the “No-Fault CSS” plan outlined

in A List Apart’s “Fear of Style Sheets” series, whether they picked it up at

ALA or figured it out on their own.

Still others—tricky devils—have created platform and browser detection scripts to serve a variety of “appropriate” style sheets to specific user agents—for instance, serving one style sheet to an IE4/Mac user and another to a Navigator 4 user on Windows NT This approach was always unpleasantly complicated, but at least it used to work As we’ll show you

in a moment, it no longer works

What works? Pixels or no sizing at all works How can we make this auda-cious claim? We’ll let an expert make it for us Take a sad look at Web Review’s Master List and see the inconsistencies for yourself:

Định dạng
Số trang	15
Dung lượng	321,56 KB