Sams Teach Yourself Web Publishing with HTML and CSS in One Hour a Day (5th Edition) P37 docx

First, though, as you can see, I used CSS to set the background colors for my table cells and to handle the alignment tasks for the table.. I also turned off the top and left borders for

Trang 1

Modifying the Appearance of Tables

Modifying the Appearance of Tables

In Lesson 8, "Building Tables," I discussed the creation of tables In it, I touched on ways that you can use CSS to improve how your tables look Now I'm going to explain how you can use the CSS properties I've discussed to really spruce up your tables Ironically, the main goal of today's lesson is to show you that there are alternatives to using tables to lay out complex pages Right now, I'm going to also

demonstrate how to use CSS to improve the presentation of tabular data As a refresher, take a look at one of the tables I created in Lesson 8 in Figure 9.21

Figure 9.21 One of the tables from Lesson 8.

Now I'm going to replace many of the formatting changes made to the table using HTML with CSS The source code for the new page (see Figure 9.22 for the result) follows:

Input

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>Service Data</title>

td, th { padding: 5px;

border: 1px solid #c90;

background-color: #ffc;

text-align: center;

margin: 0px; }

th.emtpy { background-color: #fff;

file:///G|/1/0672328860/ch09lev1sec6.html (1 von 3) [19.12.2006 13:49:12]

Trang 2

border-left: none;

border-top: none; }

.left { text-align: left; }

table { border: 5px groove #c90; }

caption { font: bold 18px Verdana; margin: 10px; }

</style>

</head>

<body>

<caption>Drive Belt Deflection</caption>

<tr>

<th colspan="2">Used Belt Deflection</th>

deflection<br />

of new belt</th>

</tr>

<tr>

<th>Limit</th>

<th>Adjust<br />

Deflection</th>

</tr>

<tr>

<th rowspan="2" class="left">Alternator</th>

<td class="left">Models without AC</td>

</tr>

<tr>

<td class="left">Models with AC</td>

</tr>

<tr>

<th colspan="2" class="left">Power Steering Oil Pump</th>

</tr>

</table>

</body>

</html>

Output

Figure 9.22 The table from Figure 9.21 formatted using CSS.

Trang 3

Given the size of the style sheet, we haven't gained a whole lot in terms of efficiency by using CSS for formatting However, there are some things that can be accomplished using CSS that cannot be

accomplished using regular table formatting attributes First, though, as you can see, I used CSS to set the background colors for my table cells and to handle the alignment tasks for the table Because nearly everything in the table is centered, I made that the default for all <td> and <th> tags I put the cells that need to be left aligned in the class left and changed its alignment to left

One thing I could accomplish using CSS that isn't possible without it is to use a different border for the outside of the table than I used inside For the border between the cells, I used a thin 1-pixel border Around the table, I used a 5-pixel grooved border I also turned off the top and left borders for the

empty cell, along with setting its background color to white You should note that one thing I didn't

change was the cellspacing attribute of the <table> tag If you want to modify cell spacing, you must use this attribute because there's no CSS equivalent

Trang 4

The <body> Tag

The <body> Tag

I've already mentioned that you can adjust the margin, padding, and border of a page by applying styles

to the <body> tag More importantly, any styles that you want to apply on a pagewide basis can be

assigned to the page's body You already know about setting the background color for the page by using

style="background-color: black" in your <body> tag That's really just the beginning If you want the default font for all the text on your page to appear in the Georgia font, you can use the following style:

body { font-family: Georgia; }

A common <body> tag you often see looks something like

<body bgcolor="#000000" text="#ffffff" alink="blue" vlink="yellow" alink="purple">

You can modify the background and text colors like this:

body { color: white;

background-color: black; }

I'll explain how to alter the link colors shortly One of the main advantages of taking this approach,

aside from the fact that it's how the standard says you should do things, is that then you can put the style into a linked style sheet and set the background color for your whole site on one page

Many layouts require that elements be flush with the edge of the browser In these cases, you need to set the margin to 0 for your <body> tag Some browsers enabled you to do this with proprietary

attributes of the <body> tag, but they're not reliable To turn off margins, just use this rule:

body { margin: 0px; }

file:///G|/1/0672328860/ch09lev1sec7.html [19.12.2006 13:49:12]

Trang 5

Links

You already know how to adjust the colors of elements on a page, but links are a bit different They're more complicated than other types of elements because they can exist in multiple states: an unvisited link, a visited link, an active link, and a link that the user currently has the pointer over As you can see, there's one more state here than has been traditionally reflected in the <body> tag Using CSS, you can

change the color of a link when the user mouses over it (referred to as the hover state) as opposed to when he's currently clicking on it (the active state).

Another advantage of CSS is that you can change the color schemes for links on the same page, rather than being forced to use one scheme throughout Finally, you can turn off link underlining if you want For example, here's a style sheet that turns off link underlining for navigation links, renders them in boldface, and keeps the same color for visited and unvisited links

a:link { color: blue; }

a:active { color: red; }

a:visited { color: purple; }

a:hover { color: red; }

a.nav { font-weight: bold;

text-decoration: none; }

a.nav:hover, a.nav: active { background-color: yellow;

color: red; }

a.nav:link, a.nav:visited { color: green; }

From the style sheet, you can see that for all <a> tags in the class nav, the text-decoration property is set to none, which turns off underlining, and font-weight is set to bold For <a> tags on the rest of the page, the underlining remains on, but I've set it up so that when the mouse is over the links, they turn red For navigation links, when the mouse is over the links, the background of the element turns yellow and the text turns red

You can use pretty much any property you like with these selectors, and browsers that support them will dynamically reflow the page to accommodate the change However, changes that affect the size of the element (such as boldfacing the text dynamically or increasing the font size) can be very jarring to

users, so use them cautiously

Trang 6

Creating Layouts with Multiple Columns

Creating Layouts with Multiple Columns

Over the course of this lesson, you've seen how to modify many aspects of a page's design using

cascading style sheets Now let's look at an example that kind of ties everything together In this case, we're going to see the sort of effect that might normally be accomplished using a table that

encompasses the whole page implemented using CSS instead

This page uses a two-column layout with a header across the top One thing you'll be impressed by is the small amount of markup within the HTML All the formatting is contained in the style sheet Here's

Input

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<head>

body { font-family: Georgia;

margin: 0px;

background-color: #f90; }

#header { font: bold 48px Trebuchet MS;

padding-left: 30px;

border-bottom: 3px solid black;

background-color: #c00;

margin-bottom: 0px; }

#content { float: right;

padding: 1px 20px 1px 10px;

width: 70%;

margin: 0px;

border: none;

background-color: #fff; }

#nav { float: left;

width: 20%;

margin-top: 0px;

font-weight: bold;

padding: 10px;

border: none;

font-family: Trebuchet MS; }

#nav a { text-decoration: none;

color: #006; }

#nav a:hover { color: #c00; }

h2 { margin-top: 10px; }

</style>

</head>

<body>

Trang 7

<h2>Curly Bill</h2>

<h3>The Noted Desperado, Gets it in the Neck at Galeyville</h3>

<p>May 26, 1881 - The notorious Curly Bill, the man who murdered Marshal White at Tombstone last fall and who has been concerned in several other desperate and lawless affrays in South Eastern

Arizona, has at last been brought to grief and there is likely to

be a vacancy in the ranks of out border desperados The affair occurred at Galeyville Thursday A party of 8 or 9 cowboys, Curly Bill and his partner Jim Wallace among the number, were enjoying themselves in their usual manner, when deputy Sheriff Breakenridge

of Tombstone, who was at Galeyville on business, happened

along.</p>

<p>Wallace made some insulting remark to the deputy at the same time flourishing his revolver in an aggressive manner Breakenridge did not pay much attention to this "break" of Wallace but quietly turned around and left the party Shortly after this, Curly Bill, who it would seem had a friendly feeling for Breakenridge, insisted that Wallace should go and find him and apologize for the insult given This Wallace was induced to do after finding Breakenridge he made the apology and the latter accompanied him back to the saloon where the cowboys were drinking By this time Curly Bill who had drank just enough to make him quarrelsome, was in one of his most dangerous moods and evidently desirous of increasing his record as

a man killer He commenced to abuse Wallace, who, by the way, had some pretensions himself as a desperado and bad man generally and finally said, "You g-d Lincoln county s-of a b -, I'll kill you anyhow." Wallace immediately went outside the door of the saloon, Curly Bill following close behind him Just as the latter stepped outside, Wallace, who had meanwhile drawn his revolver, fired, the ball entering penetrating the left side of Curly Bill's neck and passing through, came out the right cheek, not breaking the

jawbone A scene of the wildest excitement ensued in the town.</p>

<p>The other members of the cowboy party surrounded Wallace and threats of lynching him were made The law abiding citizens were in doubt what course to pursue They did not wish any more blood shed but were in favor of allowing the lawless element to "have it out" among themselves But Deputy Breakenridge decided to arrest

Wallace, which he succeeded in doing without meeting any

resistance The prisoner was taken before Justice Ellinwood and after examination into the facts of the shooting he was

discharged.</p>

<p>The wounded and apparently dying desperado was taken into an adjoining building, and a doctor summoned to dress his wounds After examining the course of the bullet, the doctor pronounced the wound dangerous but not necessarily fatal, the chances for and against recovery being about equal Wallace and Curly Bill have been Partners and fast friends for the past 4 or 6 months and so far is known, there was no cause for the quarrel, it being simply a drunken brawl.</p>

</div>

Trang 8

<a href="">Sports</a><br />

<a href="">Weather</a><br />

<a href="">Business</a><br />

<a href="">Classified</a>

</div>

</body>

</html>

Output

Figure 9.23 A page laid out entirely using CSS.

[View full size image]

As you can see, the page I created uses a two-column layout with a header across the top If you take a look at the source code, you'll see that there are three <div>s that are used to lay out the page One contains the heading (with the ID "header"), one is for the main content (with the ID "content"), and one is for the navigation elements (with the ID "nav") Note that the navigation <div> actually comes after the content in the source file I didn't have to do it this way, but there are good reasons to do so,

as I'll describe in Lesson 17, "Designing for the Real World."

Let's go through the style sheet rule by rule First of all, I set the font for the document to Georgia in the

<body> tag I also set the margins for the page to 0px and set the page's background color to the same background color that I'm going to use in the navigation div I'll explain why in a bit

Trang 9

Next, I set up the header I set the font size to a nice, large, bold font, befitting the header for a page Then I add some padding to the left side of the <div> to give myself a margin because I turned off

margins for the page as a whole I add some accents to the header by putting a 3-pixel border across the bottom and setting the background of the header to a dark red color I also turn off the margin on the bottom to get things to fit together nicely

The next rule is for the content section This is the most important part of the page, so I set its width to 70% I turn off its margin completely, and give it some padding on the left and right to create some white space around the text and a 1-pixel margin on the top and bottom because there's plenty of white space there already The background color of this <div> is white and the borders are turned off

Now let's look at the rules for the navigation <div> I've this one set to float: left One thing you may

be wondering is why I have float turned on for both the content <div> and the navigation <div> Things are set up this way so that the <div>s run down opposite sides of the page no matter what I don't want one of them to wrap around the other, and I also wanted to be able to put the navigation <div> under the content <div> and have them both pushed all the way up against the header If there were some unfloated text content for this page that was extremely skinny, or I made both of these <div>s narrower,

I could run some content right down the middle of the page between them If I did want to put some content on the page below the two <div>s, I'd need to make sure to use clear: both to eliminate the floats

set the page background color to match the background of the smaller <div> That way, the background

of the space below the smaller <div> will match that <div>

The next two rules affect the links in the navigation bar The links are set to be navy blue and to turn red when the user passes the mouse over them I've also turned off underlining The links were set to boldface in the larger rule for the navigation <div> The last rule adjusts the white space for <h2> tags slightly to make it consistent between Netscape and Internet Explorer

Trang 10

Summary

In the earlier days of this book, I've given you a taste of how to use cascading style sheets You didn't get the full flavor because I used them only within the context of the style attribute of tags Today, I discussed how you can create actual style sheets either as part of a page or as a standalone file that can

be included by any page I also moved beyond properties that discuss text formatting to explain how to use CSS to lay out an entire page

CSS provides a better alternative to tables, transparent single-pixel GIFs, and other old techniques that have been relied on to gain control over how pages are laid out By understanding how browsers render pages and how you can affect that process using CSS, you can achieve the effects you want without writing loads of markup that's difficult to understand and maintain

As cool as cascading style sheets are, they're only half the fun In Lesson 15, "Creating Applications with Dynamic HTML and AJAX," you'll learn how to modify styles from within your pages using JavaScript, adding an amazing degree of flexibility to how you create your web pages Any styles you learned about today can be manipulated in the world of dynamic HTMLit's exciting stuff

Định dạng
Số trang	10
Dung lượng	213,09 KB