Tài liệu hạn chế xem trước, để xem đầy đủ mời bạn chọn Tải xuống
1
/ 50 trang
THÔNG TIN TÀI LIỆU
Thông tin cơ bản
Định dạng
Số trang
50
Dung lượng
1,53 MB
Nội dung
.urhc { color: black; vertical-align: top; }
A:active { color: black; font-weight: bold; }
.menubar a:hover { color: white; }
body { font-family: Garamond, Georgia, Times,
“Times New Roman”, serif; }
.inter { }
.lhs { color: black; }
h1, h2, h3, h4. h5, h6, dt, .heading
{ color: black; font-variant: small-caps; }
.lhrc a:link, .lrhc a:visited {
text-decoration: none; font-weight: bolder;
color: black; }
.urhc H1 { color: white; text-align: center;
border: none; padding: 0% 5%;
margin: 0px; line-height: 75px; }
A:link { font-weight: bold; color: #000066;
text-decoration: none; }
.lrhc { color: black; }
.ulhc img { border: 2px solid white; padding-left: 15px;
padding-right: 15px; }
.llhc { color: black; }
h1, h2, h3, h4, h5, h6, .heading
{ border-bottom: 1px solid white; }
body { background-color: #cca580;
background-image:
url(“/photos/feb2002/arizona/painted-desert_sm.jpg”);
background-position: top right;
background-repeat: no-repeat; }
.vert { }
A:visited { font-weight: bold; color: #006600;
text-decoration: none; }
If that was a bit hard to follow, don’t feel bad; that was intentional. On the Kynn.com
site, I use tables to divide the page into six content cells that can each be styled indepen-
dently. Vertical and horizontal bars separate these cells, and the bars, as well as their
intersections, can also have styles applied to them.
The layout is shown in Figure 18.1, which indicates the
class attribute for each cell. The
classes have names like
urhc for “upper right hand corner” and lhs for “left hand side.”
332 Hour 18
LISTING 18.1 Continued
23 0672324091 ch18 6/13/02 10:31 AM Page 332
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
The current style sheet, as given in Listing 18.1, actually eliminates the bars between the
content cells by not giving them a distinct background color, but you can’t tell that by
skimming the style sheet.
The style sheet in Listing 18.2 is really the same as before; both produce the same results
when applied to the Web page, but the second one is easier to understand. Comments
make clearer what each section of the style sheet does, and the order is much easier to
understand.
LISTING 18.2 A Better-organized Style Sheet
/* k-orderly-18.2.css */
/* For kynn.com */
/* By Kynn, 6-22-1999 */
/* Last tweaked 02-20-2002 */
/* Default styles */
body { background-color: #cca580;
background-image:
url(“/photos/feb2002/arizona/painted-desert_sm.jpg”);
background-position: top right;
background-repeat: no-repeat; }
/* Styled cells */
.ulhc { color: black; vertical-align: top; }
.urhc { color: black; vertical-align: top; }
Web Design with CSS 333
18
FIGURE 18.1
The layout of
cssin24hours.com,
done with tables.
continues
23 0672324091 ch18 6/13/02 10:31 AM Page 333
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
.vert { }
.horiz { }
.inter { }
.lhs { color: black; }
.rhs { color: black; }
.llhc { color: black; }
.lrhc { color: black; }
/* lower right hand corner */
.lhrc a:link, .lrhc a:visited {
text-decoration: none; font-weight: bolder;
color: black; }
/* upper right hand corner */
.urhc h1 { color: white; text-align: center;
border: none; padding: 0% 5%;
margin: 0px; line-height: 75px; }
/* upper left hand corner */
.ulhc img { border: 2px solid white; padding-left: 15px;
padding-right: 15px; }
/* fonts */
body { font-family: Garamond, Georgia, Times,
“Times New Roman”, serif; }
/* Distinct headings */
h1, h2, h3, h4. h5, h6, dt, .heading
{ color: black; font-variant: small-caps; }
h1, h2, h3, h4, h5, h6, .heading
{ border-bottom: 1px solid white; }
/* Link styles */
a:link { font-weight: bold; color: #000066;
text-decoration: none; }
a:visited { font-weight: bold; color: #006600;
text-decoration: none; }
a:active { color: black; font-weight: bold; }
/* Menu bar */
.menubar { border: 2px solid white; }
.menubar a:hover { color: white; }
/* Primary content */
.content { position: relative; border: 2px solid white;
padding: 1em 5% 1em; }
334 Hour 18
LISTING 18.2 Continued
23 0672324091 ch18 6/13/02 10:31 AM Page 334
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
Site-wide Style Sheets
The style sheet given in Listing 18.2 was created to be used on the entire site, not
just on one page. The ability to link in an external style sheet makes this an easy
choice to apply styles over your entire site by setting each page to use the style
sheet with the <link> tag. An example of a Web page on the Kynn.com site,
which uses this style sheet, is shown in Figure 18.2; the original page is at
http://kynn.com/nav/causes.html.
Web Design with CSS 335
18
FIGURE 18.2
The Kynn.com style
sheet applied to a
Web page.
A style sheet that is referenced from all pages on a site makes it a very simple task
to change the appearance of the entire Web site. For example, Figure 18.3 shows
the same page as in Figure 18.2, but with a different style sheet. Changing the sin-
gle external file altered the look of the whole Web site instantly. If you’re curious,
you can view this other style sheet at http://www.cssin24hours.com/18/
k-alt.css.
A site-wide style sheet can be used to enforce a consistent appearance on the Web site,
even if you have multiple Web developers working on the same site. Additional styles
can be added in embedded style sheets or in additional linked CSS files that are created
for each department or business unit. For example, the City of Fullerton’s Web site
(
http://www.ci.fullerton.ca.us/) uses style sheets to give a consistent appearance
to the whole site but different colors to each city department’s subsite, as shown in
Figure 18.4.
23 0672324091 ch18 6/13/02 10:31 AM Page 335
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
336 Hour 18
FIGURE 18.3
A different style sheet
applied to the
Kynn.com site.
FIGURE 18.4
Style sheets set the
appearance of the city
Web site in Fullerton,
California.
23 0672324091 ch18 6/13/02 10:31 AM Page 336
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
Validating Your CSS
Everyone makes mistakes, even you and me. Mistakes in writing CSS can be benign,
producing a minor effect such as putting a block of text in the wrong font, or they can be
much more serious and prevent people from using your page at all.
As you learned in Hour 4, you can validate your HTML using the World Wide Web
Consortium’s HTML validator at
http://validator.w3.org. The W3C provides a free
CSS validation service, as well, for checking your CSS syntax. This is located at
http://jigsaw.w3.org/css-validator/.
Web Design with CSS 337
18
Another CSS validator from the Web Design Group can be found at
http://www.htmlhelp.com/tools/csscheck/.
To use the W3C CSS validator, you can specify a Web page that contains CSS code,
give the direct URL of a style sheet, or paste your style rules directly into a text box.
The validator will analyze your CSS rules and notify you of errors. It will also give
useful warnings.
An example of CSS validation is shown in Figure 18.5, which shows the results of
validating the style sheet in Listing 18.2. As you can see, it caught an error and gave
a warning about some possible errors.
FIGURE 18.5
The results of validat-
ing Listing 18.2.
23 0672324091 ch18 6/13/02 10:31 AM Page 337
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
Why Validate?
Validation is a useful strategy for a number of reasons. The biggest benefit is that it
allows you to spot errors in your style sheet syntax. For example, in Figure 18.5, the CSS
validator noticed a problem with the style sheet. The following line can be found in both
Listing 18.1 and Listing 18.2:
h1, h2, h3, h4. h5, h6, dt, .heading
The error is the punctuation after the h4; it should be a comma, but here I’ve put a
period. That kind of error is hard to spot when you’re just skimming the page. In fact, it
was there for months before I noticed it! Did you spot it earlier?
The warnings issued by the CSS validator are quite useful for spotting accidental omis-
sions, such as setting a foreground color without a contrasting background color.
However, you have to interpret those results carefully. The CSS validator can’t fully
account for inheritance and transparency in your Web page, and so you’ll need to deter-
mine for yourself if a warning is an actual problem.
A validator is like a spell-checker or grammar-checker in a word processor. They can
spot potential problems and you wouldn’t think of submitting a document without check-
ing it first, but blind reliance on an automated checker without using human judgment is
just as bad.
Summary
When creating any Web pages, whether using CSS or not, it’s important to keep the
needs of your users in mind. Providing them with an attractive Web site is not in conflict
with giving them an easy-to-use site. In fact, the two approaches are both complementary
and necessary for making a truly great site.
Testing plays a major role in any CSS design, and you can’t rely on your own judgment
when catching possible mistakes. Three important resources are other Web developers
who can give advice about your design efforts, users in informal tests who point out unex-
pected errors, and CSS validation services that check your syntax and warn of omissions.
Web development using CSS is a balancing act, and the factors you’ll have to weigh
include using CSS for layout, supporting older browsers, and accounting for browser
quirks. As each site is unique, there’s no universal answer; you’ll need to use your own
judgment to figure out what works for you.
Organizing your style sheets in a sensible manner will make life easier for you and any-
one else who has to read your style sheet. Use comments whenever you think of it, and
group your styles together in natural groupings. You’ll thank yourself later; believe me.
338 Hour 18
23 0672324091 ch18 6/13/02 10:31 AM Page 338
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
Browser Support Report Card
There’s no report card in this hour because no new CSS features were introduced. The
strategies for Web development you learned in this hour can be applied to all style sheets.
Q&A
QYour personal Web site doesn’t use CSS for layout. What gives?
A It’s a pretty old design, and when I created it, there were even fewer browsers that
understood positioning CSS. If I were doing it from scratch today, Kynn.com
would be done using CSS for layout, using the
@import trick described in Hours
16, “Page Layout in CSS,” and 17, “Advanced CSS Layout,” to avoid Netscape 4
problems. This is much easier to do on a new site than on an existing one, espe-
cially if you’re spending your time writing a book! The CSSin24hours.com site
does use CSS for layout because that’s a new site.
Workshop
The workshop contains quiz questions and activities to help reinforce what you’ve
learned in this hour. If you get stuck, the answers to the quiz can be found after the ques-
tions.
Quiz
1. Colors and fonts should be used to
(a.) Make the page harder to read, so people spend more time on your site.
(b.) Hide content from the real users while tricking search engine spiders.
(c.) Present the content in an attractive, usable manner.
(d.) Make you seem really cool to all your friends.
2. What do you need for effective user testing?
(a.) Nothing. Just follow your own instincts because you are a user too.
(b.) Five people, five tasks, and five lattes.
(c.) A usability lab with one-way mirrors, video cameras, and a million-dollar
budget.
3. If you submit the following style sheet to the W3C’s CSS validator, which errors or
warnings will it give?
p, td. th, li { color: black;
bakground-color: white; }
Web Design with CSS 339
18
23 0672324091 ch18 6/13/02 10:31 AM Page 339
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
Answers
1. The correct answer, of course, is (c.), unless you’re making a site to show your
friends how cool you are.
2. The answer is (b.), but the lattes are optional. I prefer a nice cold cherry cola,
myself.
3. The validator will point out two errors: the period instead of the comma after the
td and the unknown property name bakground-color. Also, because there is no
background-color value given to contrast with the color value, a warning will be
generated.
Activity
Here’s a list of projects you can undertake to reinforce what you’ve learned this hour:
•Write up five tasks that could be accomplished by a user of a specific Web site.
Make sure you have a few you think are easy and a few you think are hard; you
might find yourself surprised in an actual test.
•In fact, if you’ve got the time and the inclination, do an informal user test as
described earlier this hour. The results are always educational, even if they just tell
you that you’re on the right track.
• Subscribe to the HWG-Critique mailing list at the HTML Writers Guild, and post a
site for review. Then, give your own critique in response to someone else’s request.
Remember to be both polite and constructive, of course!
• Look at some of the style sheets you’ve worked on, and see if you can reorganize
them to be easier to understand. Comments, comments, comments!
•Validate your style sheets, and if they don’t pass, fix them until they do. Consider
each warning; is it a valid potential problem, or can you safely ignore it?
340 Hour 18
23 0672324091 ch18 6/13/02 10:31 AM Page 340
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
Hour
19 Advanced Selectors
20 CSS for Printing
21 Accessibility and Internationalization
22 User Interface and Generated Content
23 CSS and JavaScript
24 CSS and XML
PART IV
Advanced Cascading
Style Sheets
24 0672324091 PartIV 6/13/02 10:31 AM Page 341
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
[...]... :first { margin: 4in 2in 4in 3in; } @page :right { margin: 0. 5in 1in 0. 5in 2in; } @page :left { margin: 0. 5in 2in 0. 5in 1in; } 20 364 Hour 20 The margins are set up this way so that if the page is printed on a double-sided printer— or printed on a single-sided printer and photocopied onto alternate sides of sheets of paper—there will be an extra inch on the “inside” margin to punch holes Warning for All... Appropriate for Printing Unit Measurement cm Centimeters in Inches ( 1in = 2.54cm) mm Millimeters (1mm = 0.1cm) pc Picas (1pc = 12pt) pt Points (72pt = 1in) These units can be used with any CSS property that requires a measurement value For example, the following rule sets a padding value in centimeters: @media print { h1 { padding: 1cm 2cm 1cm 1cm; } } Defining the Page with @page The size of a printed page... and Printing Printing a Web page is often a risky proposition The combination of text, tables, style rules, frames, and low-resolution GIF images often results in a poor-looking printed document Most of the time, browsers don’t print nearly as well as they display onscreen You can overcome some of these problems with a print style sheet To link in a style sheet for printing, simply use the HTML ... attribute is screen > Measurements for Printing When you’re creating a style sheet for printing, you can use additional units of measurement that would be inappropriate or meaningless on a computer monitor These units correspond to real-world units of measurement used in printing and are listed in Table 20.2 20 362 Hour 20 TABLE 20.2... Designing CSS for Print When creating style rules or style sheets for the print medium, it’s important to remember how the medium differs from the computer screen The point of using a different style sheet for print is to make the resulting hardcopy easier to read and use Many printers out there will be black-and-white, although color printers are often used However, many users will avoid printing in. .. @media rule in the main style sheet with the appropriate media type Multiple tags let you provide one style sheet for rules common to all media types—one for screen display and one for printing, like the following: Such a link would load only the style sheet if the browser were currently printing to a standard or Braille printer Warning for Netscape 4 The Netscape 4 browser simply does not support... background-color: white; } } CSS for Printing 361 Warning for Internet Explorer (Mac) Internet Explorer on the Macintosh platform does not support @media rules To use media-specific style sheet rules with IE for Mac, put those rules in a separate file and apply them with or @import CSS Properties for the print Medium By far the most common medium you’ll be concerned with—besides screen—is print Nearly all... up to the CSS specification Fortunately, none of these is harmful, so you can use them without fear of something unexpectedly breaking Summary Alternate style sheets for different access devices are classified by the media types they apply to You can set the media type of a CSS rule in several ways: by linking to a style sheet containing the rule with the element in HTML; by importing a style... style sheet with that rule using @import; or by wrapping the CSS rule in a @media rule Visual browsers support the screen media type, and nearly all of them also support the print media type The print medium uses page boxes, which are defined by @page rules The size, margins, and other properties can be set on pages Page breaks can also be set using CSS rules Designing for the print medium requires a different . watermark.
Validating Your CSS
Everyone makes mistakes, even you and me. Mistakes in writing CSS can be benign,
producing a minor effect such as putting a block. you think are easy and a few you think are hard; you
might find yourself surprised in an actual test.
In fact, if you’ve got the time and the inclination,