Tài liệu Speaking in styles- P2 doc

28
A WEB PRIMER
WEB DESIGNER’S TOOLBOX
Code Editors
Just as you have a word processor for writing or an illustration
program for drawing, you need a Web development program for
coding. A good code editor will:
» Organize and edit documents, providing suggestions where
needed.
» Preview documents without having to jump between mul-
tiple browsers.
» Download and upload documents as you work on them.
» Analyze and optimize your code.
Coda
Mac
panic.com/coda/
Coda is my program of choice whenever I edit code. Coda
(Panic So ware) includes integrated FTP, making uploading and
downloading  les a breeze. Its CSS editing tools allow you to
get straight at the code or to use a more designer-friendly visual
interface.
TopStyle
Windows
newsgator.com/individuals/topstyle
Although I generally recommend designing on a Mac, if you are
using a PC running Windows, TopStyle is similar to Coda.
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
29
CSSEdit
Mac
macrabbit.com/cssedit/

If you are a designer who is only interested in working with CSS
code (and not HTML or JavaScript), CSSEdit has everything
you need. It includes some impressive tools for analyzing the CSS
of an existing Web site.
Dreamweaver
Windows and Mac
adobe.com/dreamweaver
Dreamweaver, which comes with many Adobe so ware packages,
is o en the default choice for designers. Of all of the code edi-
tors, Dreamweaver is possibly the most feature rich, but it is also
the most expensive, and more features also means it’s harder to
learn to use.
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
30
A WEB PRIMER
WEB DESIGNER’S TOOLBOX
Online Tools
We typically think of an application as something that you get
on a disk or download and then install onto your computer.
Increasingly, applications are being delivered through the Web,
without requiring you to install or download the speci c applica-
tion. Some of the best tools in my arsenal aren’t on my desktop;
they’re online.  e line between Web site and Web application (or
just Web app) is gradually being blurred. Like you do with a Web
site, you get to a Web app by using a Web browser and URL, but
Web apps provide functionality like you would expect from
a traditional application.
ColorJack Adobe Kuler
colorjack.com kuler.adobe.com
Every designer has to deal with color. It can be di cult to de ne

a palette of colors that work well together but provide the spec-
trum needed. ColorJack and Adobe Kuler are Web apps that
allow you to put together a color palette, helping you choose
the best combinations based on color theory. You can then save
the results for use in common image editing so ware such as
Photoshop and Illustrator.
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
31
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
32
A WEB PRIMER
WEB DESIGNER’S TOOLBOX
Typetester
typetester.org
Good typography on the Web seems like an oxymoron, but it’s
getting better. Typetester allows you to preview how di erent
font families will look at various sizes, weights, and styles. Just
choose from an extensive list of Web-safe fonts or from a list of
fonts installed on your computer, and the results are instantly
displayed underneath.
SUMO Paint
sumopaint.com
If you are a designer, you likely already have an image editor of
choice like Photoshop, Fireworks, or Illustrator.  ese applica-
tions can be costly, but free alternatives are available on the Web.
SUMO Paint allows you to create and edit layered bitmap images
in a familiar Photoshop-like interface. If you are strapped for
cash, it may just be what youare looking for. Although limited in
its feature set, it has all of the basic tools you would need to put
together simple Web graphics.

Online Tools
continued
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
33
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
C
HAPTER
3
The Myths of CSS
Over the years, many di erent myths and misconceptions have grown
up around Cascading Style Sheets—some good and some bad. You may
have heard some of these myths and may still believe them: CSS is com-
puter code; CSS is buggy; CSS is only for styling type and color. Some
of these myths were never true, others are no longer true, and some have
a grain of truth. Before we go any further into learning how to speak in
styles, let’s clear the air about three of the most persistent CSS myths.
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
36
A WEB PRIMER
THE MYTHS OF CSS
False: Many designers coming to CSS for the  rst time think
that it’s just for the “coders” and not for “real” designers. I hear
this a lot from designers: “I don’t want to learn to program a
computer.” Designers who buy this line of reasoning have three
basic arguments:
Argument 1: If the developers understand it, then I don’t need
to. I started my design life as a print designer, and I had to under-
stand the print process from beginning to end. I had to know
about CMYK, paper weights, register marks, and how to create

 les for output. I had to understand these things, not because
I was going to run one of those massive Koenig & Bauer print-
ing presses, but because I wanted to get the best results from my
designs in my selected medium. At the very least, even if you
never plan to touch the code yourself, understanding how CSS
works will make you a better Web designer.
Argument 2: CSS is too hard to learn. CSS was actually devel-
oped with designers in mind. Natural language terms are used
wherever possible to make it easy to understand and remember.
Argument 3: I’m a designer, damn it, not a programmer. CSS
is a style sheet language, not a programming language. What’s
the di erence? Style sheet languages are used to simply tell the
computer how the di erent objects in a document should be pre-
sented, using simple style rules that humans can easily understand
rather than logic-based functions. CSS is
used to describe how the content should
appear, not how it should work.
Myth 1:
CSS Is for Developers, Not Designers
WebDesignerWall
webdesignerwall.com
If you are looking for innovative Web design
ideas from designers, using CSS, take a look at
the Web Designer Wall.
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
37
CSS is for Web Developers, Not Web Designers
CSS is a
style language
anyone can learn to

read and write.
TRUTH
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
38
A WEB PRIMER
THE MYTHS OF CSS
Design Shack’s CSS Gallery
designshack.co.uk/gallery/
Numerous Web sites highlight great designer
portfolios created using CSS.
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
39
Web Designer Michela Chiucini
colazionedamichy.it
Designer Michela Chiucini uses CSS with
WordPress to create her own portfolio and gives
away a few templates for you to start using.
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
40
A WEB PRIMER
THE MYTHS OF CSS
False: Design is about overcoming the limits of your medium. All
media have di erent strengths and weaknesses, and Web design
with CSS is no di erent. CSS can handle a wide variety of dif-
ferent designs, and the more you know about its limitations, the
better you can design to its strengths.
Most designers who believe the myth that CSS can’t handle a
variety of layouts are usually from the old school of Web design,
when the only option for creating a grid-based layout was by
using HTML tables. Yes, tables can do some things that CSS still

cannot do—like creating balanced column heights, although that
will be possible in the future— but the advantages of designing
with CSS far outweigh the advantages of table-based layout.  e
techniques that designers use today are vastly di erent from those
we used just a few years ago. As we’ve had a chance to explore the
capabilities of CSS, new ideas and new methods are constantly
being explored.
 ere is no better example of the versatility of CSS than the CSS
Zen Garden.  is simple site is a single Web page, which you can
download the HTML code for and create your own CSS design
solution. Over 200 designers have taken the challenge, with more
coming all the time. Each design is completely di erent from
the others, but all use the exact same HTML code as their basis.
With tables, which lock the structure directly into the HTML,
this versatility is lost.
Myth 2:
CSS Can’t Handle the Designs I Need
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
41
CSS Can’t Handle the Designs I NeedC ’t H dld e tl ht Dese ig I Ngggggggns I Nnnnss IIIIII NNNNNNNgggggg eeeeeeeeeeeeNNNhhhhhhhhhh DeDDDDDDHHHHHHHandannnndddddddHHHCSCCCCCCSSSSSSS CS CCCCCCSSS anaannnnnnCCCCCCCC ee eeeeeeeC eDDC DDDDD eeeeeeeeeegggggggggggg IIIIIIIII NNNNNNNNNNhhhhhhhhhhhhheeeeeeeee DDDDDDDDDDDDD iiiHHHHHHHHHHHH nnnnnnnddddddddddlllldddddCCCCCCCCCCSSSSSSSS CCCCCCCCCCCCC nnnnn’’’’’’’’tt
TRUTH
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
42
A WEB PRIMER
THE MYTHS OF CSS
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
43
CSS Zen Garden
csszengarden.com
CSS Zen Garden has a simple mission: Prove that CSS can

handle any layout. Each of these designs was created from the
same HTML code but with different CSS styling it.
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
44
A WEB PRIMER
THE MYTHS OF CSS
Mostly False: OK, so there’s some truth to this particular myth,
but it’s not as bad as you might think. CSS is a standard, which
means that an organization—the World Wide Web Consortium
(W3C)—has set up some very speci c instructions on how it
should work.  e problem is, like all human communication,
instructions are open to interpretation (or can just be ignored) by
the browser makers. Mozilla, Opera, Apple, and Microso are the
main players in the  eld.
Every browser has its own quirks when it comes to CSS, but it’s
Microso ’s Internet Explorer that deviates the most from the
straight and narrow path of Web standards.
For many years, most of the problems were with Internet
Explorer—speci cally IE6.  e issues with IE6 are legendary,
and I will highlight them throughout this book with tips on
overcoming them. While it used to be that a good quarter of your
development time would be spent just trying to get your Web
pages to look roughly the same in IE6 as in other browsers, most
of the inconsistencies are now gone or easily circumvented. IE7,
while far from perfect, is much closer to standards compliance
than previous versions, and on the horizon is IE8, which prom-
ises even closer CSS adoption. IE 7 is now the most popular Web
browser in use, while IE6 quickly evaporates in popularity.
 at doesn’t mean you can ignore the older versions, but you do
not always have to provide the same experience. Instead, designers

will create a usable but stripped-down design for IE6.  e design
still works just  ne; it just may not have all of the design bells
and whistles.
Myth 3:
CSS Has Too Many Browser Inconsistencies
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
45
CSS Still Has Too Many Browser Inconsistancies
6
7
ll Hlllllll HHHHaaaaaaaHHHHH s Tssss TooTTT o Moooooo y Bror r InI nsiMMMMMMManaaaanMMMMMMMMMMM y yyyyyyynn wsewwwwwwseeeeeetit cccccccoonnnnnnn isiiiiisssttaaaaaaaatttc ayya aaaaaaaaaannniiiiiiillllllllll aaaaaaaaaaaaasssssss ooooooo MMMMMMMMMMMMaaaaMMMMMMMMMM yyyyyyyyyyyyy wwwwwwwwwseeeeeeeeerrrrrrr nnnnnnncccccccconnnnnnnnnnnsssssssssiiiiiiiiiiiiisssstiiiisstn taty
77777777777777
6666666666666666666666666666666666666666666666666666666666666
TRUTH
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
In which the reader learns the syntax (how the language is put together),
semantics (how the language is understood), and vocabulary (the words
used in the language) that make up the grammar of CSS.
PART 2
49 Syntax
89 Semantics
123 Vocabulary
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
CSS Grammar
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.