8 You can use pretty much any property you like with the pseudo-selectors for links, and browsers that support them will dynami-cally reflow the page to accommodate the change.. In Lesso
Trang 1Many layouts require that elements be flush with the edge of the browser In these cases,
you need to set the margin to 0for 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; }
Links
You already know how to adjust the colors of elements on a page, but links are a bit
dif-ferent 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 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-decora-tionproperty is set to none, which turns off underlining, and font-weightis 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
Download from www.wowebook.com
Trang 28
You can use pretty much any property you like with the pseudo-selectors for links, and browsers that support them will dynami-cally 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 jarring to users, so use them cautiously.
Summary
In the preceding lessons, I’ve given you a taste of how to use CSS You didn’t get the full
flavor because I used them only within the context of the styleattribute of tags In this
lesson, I discussed how you can create style sheets either as part of a page or as a
stand-alone 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
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
diffi-cult to understand and maintain
You’ll continue to be introduced to new CSS properties in the lessons that follow In
Lesson 9, I explain how to use CSS to change colors on the page, and provide all the
details on using CSS to define the backgrounds of pages and specific elements
Les-son 13 takes a deeper look at CSS selectors and explains how to create entire page
layouts using CSS
Workshop
In this lesson, you learned about Cascading Style Sheets, the wonderful supplement to
HTML that makes formatting your pages less painful Throughout the rest of this book, I
use CSS where appropriate, so please review this workshop material before continuing
Q&A
Q My CSS isn’t working like I’d expect What should I do?
A CSS probably doesn’t seem that clear in the first place, and things can only get
messier when you actually start applying styles to your pages You should be sure
to test your pages in every browser you can find, and don’t be afraid to experiment
Just because something seems like it should work doesn’t mean it will The W3C
CAUTION
Trang 3should adhere to them
Q What are the relevant CSS standards?
A There are three CSS recommendations from the W3C: CSS1, CSS2, and CSS3.
Most modern browsers support a large part of CSS1 and CSS2, as well as parts of
CSS3 You can find out more at http://www.w3.org/Style/CSS/ If you’re curious
about how well your browser supports CSS or the effect that properties have in real
browsers, you can check out the CSS test suites at
http://www.w3.org/Style/CSS/Test/ CSS2 and CSS3 include a number of
addi-tional selectors They are discussed in Lesson 13
Quiz
1 Why can’t absolute units be used reliably in CSS?
2 True or false: Including style sheets on your page requires features provided by a
web server
3 How do the absolute and relative positioning schemes differ?
4 Is the margin or padding of an element inside the border?
5 How do you lay out your page so that elements positioned statically appear above
elements that are positioned absolutely?
Quiz Answers
1 Absolute units have problems in CSS because there’s no way to know exactly what
sort of display medium the user has An inch on one monitor might be completely
different than an inch on another
2 The answer is false; you can use the <link>tag to load external style sheets
with-out involving the web server in any way
3 The relative positioning scheme places elements relative to the previous element on
the page, whereas the absolute positioning scheme places the element exactly
where you tell it to on the page
4 The padding of an element is inside the border of an element, and the margin is
outside
Download from www.wowebook.com
Trang 45 This is a trick question You cannot put statically positioned elements above
absolutely positioned elements However, if you change the statically positioned
elements so that they use the relative positioning scheme, you can alter their
stack-ing layer usstack-ing the z-indexproperty
Exercises
1 If you’ve already created some web pages, go back and try to figure out how you
could apply CSS to them
2 Examine the style sheets used by some websites that you admire Take a look at
how they use classes and IDs in their markup
3 Create a web page that includes a sidebar on the left, with text wrapped around it
Create a navigation menu at the bottom that is positioned below the sidebar
8
Trang 5Download from www.wowebook.com
Trang 6LESSON 9
Adding Images, Color,
and Backgrounds
Few things can do more to make a Web page more interesting than a
strategically placed image or an attractive color scheme Effective use of
images and color is one of the key things that separates professionally
designed sites from those designed by novices The process of selecting
images, resizing them and saving them in the proper format, and
integrat-ing them into a page can be intimidatintegrat-ing, but this lesson explains how it’s
done
This lesson covers the following topics:
n The kinds of images you can use in web pages
n How to include images on your web page, either alone or
along-side text
n How to use images as clickable links
n How to set up and assign links to regions of images using
client-side imagemaps
n How to provide alternatives for browsers that can’t view images
n How to change the font and background colors on your web page
n How to use images for tiled page backgrounds
n How and when to use images on your web pages
n A few tips on image etiquette
Trang 7graphical browser supports them PNG is a newer image format that was created in
response to some patent issues with the GIF format and is widely used, too Many other
image formats are supported by some browsers and not others You should avoid them
Let’s assume that you already have an image you want to put on your web page
How do you get it into GIF or JPEG format so it can be viewed on your page? Most
image editing programs, such as Adobe Photoshop (http://www.adobe.com/), iPhoto
(http://apple.com/), Picasa (http://picasa.google.com/) and GIMP (http://gimp.org/),
convert images to most of the popular formats You might have to look under the
option for Save As or Export to find the conversion option There are also freeware
and shareware programs for most platforms that do nothing but convert between image
formats Many shareware and demo versions of image-editing programs are available
at http://www.download.com/ Look under Image Editing Software in the Digital Photo
Software section There are also online photo editors available at http://pixlr.com
andhttp://picnik.com
If you’re a Windows user, you can download IrfanView, which enables you to view images and convert them to various formats,
at http://www.infanview.com/ It also provides a number of other image-manipulation features that are useful for working with images for the Web Best of all, it’s free for noncommercial use.
Remember how your HTML files need an .htmlor.htmextension to work properly?
Image files have extensions, too For PNG files, the extension is .png For GIF files, the
extension is .gif For JPEG files, the extensions are .jpgand.jpeg
TIP
Some image editors try to save files with extensions in all caps ( GIF or JPEG ) Although they’re the correct extensions, image names are case-sensitive, so GIF isn’t the same extension as gif The case of the extension might not be important when you’re testing on your local system, but it can be when you move your files to the server So, use lowercase if you can.
CAUTION
Download from www.wowebook.com
Trang 8Image Formats
As I just mentioned, three image formats are supported by every major web browser:
GIF, JPEG, and PNG JPEG and GIF are the old standbys, each useful for different
pur-poses PNG was designed as a replacement for the GIF format, which was necessary
after Unisys invoked its patent rights on the GIF format (The patent has since expired.)
To design web pages, you must understand and apply both image formats and decide
which is appropriate to use in each case
GIF
Graphics Interchange Format, also known as GIF or CompuServe GIF, was once the
most widely used image format It was developed by CompuServe to fill the need for a
cross-platform image format
9
GIF is pronounced jiff, like the peanut butter, not with a hard G as
in gift Really—the early documentation of GIF tools says so.
The GIF format is actually two similar image formats: GIF87, the original format, and
GIF89a, which has enhancements for transparency, interlacing, and multiframe GIF
images that you can use for simple animations
The GIF format is okay for logos, icons, line art, and other simple images It doesn’t
work as well for highly detailed images because it’s limited to only 256 colors For
example, photographs in GIF format tend to look grainy and blotchy The problem is
that with the limited color palette, it’s hard to create smooth color transitions
JPEG
JPEG, which stands for Joint Photographic Experts Group (the group that developed it),
is the other popular format for images on the Web JPEG (pronounced jay-peg) is
actu-ally a compression type that other file formats can use The file format for which it’s
known is also commonly called JPEG
JPEG was designed for the storage of photographic images Unlike GIF images, JPEG
images can include any number of colors The style of compression that JPEG uses (the
compression algorithm) works especially well for photographs, so files compressed using
the JPEG algorithm are considerably smaller than those compressed using GIF JPEG
uses a lossy compression algorithm, which means that some of the data used in the image
NOTE
Trang 9If you’re working with photos to display on the web, you should save them in the JPEG
format
PNG
PNG, pronounced “ping,” was originally designed as a replacement for GIFs It stands
for Portable Network Graphics Only the oldest browsers don’t support PNG natively.
Current browsers all support PNG, and it has some important advantages over GIF (and
to a lesser extent over JPEG) Like GIF, it is a nonlossy image format No information
about the image is lost when it is compressed
It has better support for transparency than GIF and supports palette-based images (like
GIF) and true-color and grayscale images (like JPEG) In other words, you don’t have to
worry about color usage with PNG, although limiting color usage can result in smaller
files
More and more sites use the PNG format for images, but due mainly to inertia, GIF and
JPEG are still the most common formats The good news is that nearly all graphics tools
these days support PNG If you’re creating new images that aren’t photographs, PNG is
the format to use
After you have an image ready to go, you can include it on your web page Inline images
are placed in HTML documents using the <img>tag This tag, like the <hr>and<br>
tags, has no closing tag in HTML For XHTML and HTML5, you must add an extra
space and forward slash to the end of the tag to indicate that it has no closing tag
The<img>tag has many attributes that enable you to control how the image is presented on
the page Some attributes have been deprecated in favor of Cascading Style Sheets (CSS).
To use the <img> tag in an XHTML-compliant fashion, you need to close it, like this:
<img />
NOTE
Download from www.wowebook.com
Trang 10The most important attribute of the <img>tag is src, which is the URL of the image you
want to include Paths to images are specified in the same way as the paths in the href
attribute of links So, to point to a GIF file named image.gifin the same directory as the
HTML document, you can use the following XHTML tag:
<img src=“image.gif” />
For an image file one directory up from the current directory, use this XHTML tag:
<img src=“ /image.gif” />
And so on, using the same rules as for page names in the hrefpart of the <a>tag
You can also point to images on remote servers from the srcattribute of an <img>tag,
just as you can from the hrefattribute of a link If you want to include the image
exam-ple.giffromwww.example.comon your web page, you could use the following tag:
<img src=“http://www.example.com/example.gif” />
Inline Images in HTML: The <img>Tag 215
9
Just because you can use images stored on other servers for your own web pages doesn’t mean that you should A lot of legal, ethi-cal, and technical issues are involved with using images on other sites I discuss them later in this lesson.
Adding Alternative Text to Images
Images can turn a simple text-only web page into a glorious visual feast But what
hap-pens if someone is reading your web page using a text-only browser? What if she has
image loading turned off so that all your carefully crafted graphics appear as generic
icons? All of a sudden, that visual feast doesn’t look quite as glorious
There’s a simple solution to this problem By using the altattribute of the <img>tag,
you can substitute something meaningful in place of the image on browsers that cannot
display it
In text-only browsers, such as Lynx, graphics that are specified using the <img>tag in the
original file usually are displayed as the word IMAGEwith square brackets around it, like
this:[IMAGE] If the image itself is a link to something else, that link is preserved
Thealtattribute in the <img>tag provides a more meaningful text alternative to the
blank[IMAGE]for your visitors who are using text-only web browsers or who have
graphics turned off on their browsers The altattribute contains a string with the text
CAUTION