Tài liệu Speaking in styles- P8 ppt
Bạn đang xem bản rút gọn của tài liệu. Xem và tải ngay bản đầy đủ của tài liệu tại đây (620.98 KB, 11 trang )
328
drop shadows, 172, 190
Dynamic HTML, 12
dynamic pseudo-classes, 80, 84, 170, 323
dynamic styles, 80
E
element boxes, 140, 141. See also boxes
Em Calculator, 285
Emastic, 278
embedded styles, 90–91, 94–95, 283
emphasis tag, 76, 78
ems, 236, 285
European mobile devices, 21
Exljbris Font Foundry, 237
external style sheets, 96–103
creating, 98–99
and CSS best practices, 282
importing, 102–103
linking to, 100–101
modular approach to adding, 214
purpose of, 96
strategies for combining, 202
external styles, 90–91, 96
F
feedback
and beta launches, 204
and dynamic pseudo-classes, 84, 170
and link pseudo-classes, 80
making changes based on, 180
and mood boards, 188
fi lter:alpha property, 144, 145
Firebug, 24, 25
Firefox
add-ons, 24–27
and border-radius property, 254
and CSS, 20
as development browser, 24
and downloadable fonts, 230
layout engine, 23
market share, 20
and rounded corners, 174
and shadows, 172
Fireworks, 32, 258
fi x e d position type, 160, 161
fi xed vs. fl uid layouts, 184–185, 186, 218
.fl a fi les, 4
Flash
as core Web technology, 4
and CSS, 14
delivering video with, 14
and embedded fonts, 230
fl oat property, 146, 147
fl oating elements, 146–147, 322
Flock, 23
fl ourishes, 270
fl uid typography, 232–237
fl uid vs. fi xed layouts, 184–185, 186, 218
focus, 84, 170
fold line, 186
font families, 32, 126, 128. See also fonts
font-family property, 128, 129, 198, 226
<font-name> variable, 125
font properties, 126–129
font property, 126–127
font-size property, 128, 129
font-style property, 128, 129
font-variant property, 128, 129
font-weight property, 128, 129
fonts. See also font families; typography
browser-synthesized, 126
choosing, 234–235
core Web, 226–227
creating faux versions of, 126
downloadable, 230–231, 237
vs. font family or typeface, 228
iLife, 228
importance of, 225
Microsoft Offi ce, 228
operating system, 228
setting sizes for, 236, 281, 285
testing, 234
Web-safe, 32, 228–229, 234, 306–308
footers, 160, 268, 281
forms, 266
frameworks, 212–213, 278–279
FTP, 28
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
329
G
Gecko, 23
gel effect, 252
Georgia font, 226, 227
GIF image format, 168, 258
global navigation menus, 248, 252
Good magazine, 272, 274
Google Chrome, 23
gradients, 136, 260, 264, 266
graph paper, 182
greek text, 196
grid-based layouts, 40, 209, 218–223. See
also grids
Grid System, The, 208, 210
grid.css, 219, 221, 223
grids, 190, 209, 210, 218–223, 262–265
guides, 190
H
handheld devices, 118, 282
hard launch, 204
hash mark, 68
<head> tag, 210, 283, 292
header cap image, 268
header tags, 6
headers
basic style rule for, 54–55
combining style rules for, 58–59
creating with fi xed elements, 160
declaring multiple styles for, 56–57
for sidebars vs. main body, 70
tips for styling, 238–239
headlines, 234
height, fl uid vs. fi xed, 184–185, 186
height property, 148–151
Helvetica font, 226
hex color values, 24, 54, 194, 310–315
hiding elements, 144–145
hip hop magazine, 50
horizontal menus, 248, 250
hover state, 80, 81, 82, 170, 244, 298
HTML
code, for voxLibris, 291–301
as core Web technology, 1, 2
and CSS, 6–9
developer of, 8
and DOM, 4
dynamic, 12
meaning of acronym, 6
purpose of, 2, 6
tags. See HTML tags
validating, 275
HTML framework, 212–213
HTML selector, 60–61
HTML tables, 40
HTML tags
adding multiple classes to, 66–67
binding styles to, 50
creating basic style for, 50
how CSS acts on, 50
inline styles for, 92–93
purpose of, 6, 50
styling, 60–61
weight of, 114
hypertext links
creating, 243
purpose of, 243
styling, 80, 243, 246
underlining, 246
Hypertext Markup Language, 6. See also HTML
I
i love typography, 224, 226
iCab, 23
ID names, 4, 66, 270, 283, 286
ID selector, 68–69, 114
IE. See Internet Explorer
ie6.css, 320
iLife fonts, 228
Illustrator, 32
ilovetypography.com, 224, 226
image editors, 32, 258
image fl ashing, 244, 284
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
330
image position, 138–139
image sw
apping, 244
image tiling, 136–137, 190
ImageReady, 192
images
background. See background images
embedding directly in page, 257
fl oating, 146–147
transparent, 192, 258–261
<img> tag, 257, 284
Impact font, 226, 227
import rule. See @import rule
importance, 120
indents, 130, 132, 200
index.html, 213, 292–294
inherit display type, 142
inherit keyword, 124
inherit position type, 160
inheritance, 106–109
how it works, 106–107
overriding, 108–109
inline-block display type, 142
inline boxes, 140
inline display type, 142
inline elements, 6
inline styles, 90, 91, 92–93, 120, 283
Internet Channel, 23
Internet Explorer (IE). See also specifi c IE
versions
and CSS, 20
and downloadable fonts, 230
and font sizes, 236
and @import rule, 203, 295
layout engine, 23
market share, 18, 20
and opacity, 144
quirks/fi xes, 317–323
version considerations, 19
and Web standards, 44, 317
Internet Explorer 5 (IE5), 318
Internet Explorer 6 (IE6)
and caption-side property, 166
and child/sibling selectors, 76, 86
and conditional styles, 320, 323
and CSS, 20
and CSS box model, 158–159, 222, 318,
322
and Doctype switching, 319, 322
and dynamic pseudo-classes, 84, 323
and fi xed elements, 160
fl aws, 20
and inline-block display type, 142
and max/min-height properties, 150, 323
and max/min-width properties, 150, 323
and padding/borders, 158
and PNG image format, 260, 323
and pseudo-elements, 86
and quirks mode, 318, 319, 321
and stair-stepped elements, 322
testing on Macintosh, 22–23
and underscore hack, 158, 260, 321, 323
and Web standards, 44, 317
Internet Explorer 7 (IE7), 20, 44, 76, 84, 166,
317
Internet Explorer 8 (IE8), 20, 44, 166, 254, 317
invisible elements, 144
italic font, 128
italics tags, 8
iteration, 206–207
J
Java, 23
JavaScript
as core Web technology, 1, 2
and CSS, 10–13
and DOM, 4, 10
libraries, 12
purpose of, 2
JavaScript Object Notation, 12
jigsaw.w3.org/css-validator, 274, 276
josbuivenga.demon.nl, 237
JPEGs, 168, 192
jQuery, 12
JSON, 12
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
331
K
keywords, 124, 310
KHTML, 23
Koch, Peter-Paul, 318
Konquerer, 23
Krista’s Creations, 13
Kuler, 30, 31
L
launch, site, 204
layout engines, 23
layout grids, 209, 218–223, 297. See also
grids
layout.css, 214, 297
layouts, 209–223
adding CSS to, 214–215
default styles for, 216–217
grid-based, 40, 209, 218–223
structure for, 210–215
left position property, 138, 162, 163, 220
legacy browsers, 18
<length> value, 125, 138
Letter-Photo, 13
letter-spacing property, 130, 131
<li> tag, 248
libraries, JavaScript, 12
Lie, Håkon Wium, 8
line-height property, 130, 131
link actions, 82–83
link colors, 82–83
link pseudo-classes, 80, 82
link states, 80–83, 244–245, 246, 298
<link> tag, 90, 96, 100, 102, 282
links
creating, 243
in printed Web pages, 281
purpose of, 243
styling, 80, 243, 246
underlining, 246
Linux, 20
lipsum.com, 196
list element tags, 6
list-item display type, 142
list-style-image property, 168, 169
list-style-position property, 168, 169
list-style property, 168, 169
list-style-type property, 168, 169
list tags, 248
lists, 168–169, 240
Lobo, 23
logos, 214, 260, 266–267, 270, 284
Lorem Ipsum text, 196
M
Macintosh
code editors, 28, 29
core Web fonts, 226
operating system fonts, 228
testing IE6 on, 22–23
text editor, 98
Web browsers, 18, 20–21
Web-safe fonts, 306
MacRabbit, 29
main.css, 215, 295
margin-bottom property, 156
margin-left property, 156
margin property, 156, 157
margin-right property, 156
margin-top property, 156
margins, 154, 156–157, 186, 322
max-height property, 150, 151, 323
max-width property, 150, 151, 323
media types, 94, 118–119, 120
menus, 160, 240, 248–251
meta information, 210
Microsoft
Internet Explorer. See Internet Explorer
Offi ce, 228
Visio, 182
and Web standards, 44
Word, 98
min-height property, 150, 151, 323
min-width property, 150, 151, 323
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
332
mobile devices, 21, 280
modules, 222, 268
mood boards, 188–189
MooTools, 12
Mosaic, 8
mouse pointer, 170
-moz-border-radius property, 174, 175
-moz-box-shadow property, 172, 173
Mozilla
and CSS standards, 44
Firefox add-ons, 24–27
MSN Explorer, 23
myths, CSS, 35–45
N
navigation, 243–255
and anchor tags, 244
buttons, 252–254
and CSS sprites, 244, 284
hiding in printed Web page, 281
links, 246–247
menus, 248–251
navigation.css, 214, 298–299
Netscape, 23
NewsGator, 28
Nintendo DS Browser, 23
no-repeat property, 136, 137
none display type, 142
normal keyword, 124
NotePad, 98
notes, 104–105
<number> variable, 125
numbered lists, 168
O
object IDs, 4
OmniGraffl e, 182
OmniWeb, 23
opacity, color, 310
opacity value, 144, 145
Open Type fonts, 230
Opera
and CSS, 21
and downloadable fonts, 230
layout engine, 23
popularity of, 21
and Web standards, 44
Opera Mini, 23
operating system fonts, 228
optimizing, 286
order, style, 110, 120
ordered lists, 168
outline-color property, 174
outline property, 174, 175
outline-style property, 174
outline-width property, 174
outlines, 174, 175, 223
overfl ow property, 148, 149
P
padding, 154–155, 186, 218, 284
padding-bottom property, 154
padding-left property, 154
padding property, 154, 155
padding-right property, 154
padding-top property, 154
page fl ow, 184–185
page framework, 212
page header tags, 6. See also headers
Palette Grabber, 26
Panic Software, 16, 18, 28
paragraph tags, 6
paragraphs, styling, 86–87, 240
parent-inherited styles, 106, 120
<percentage-box-width+padding> value, 138
<percentage> variable, 125
Photoshop
and chrome, 192
color considerations, 190
creating color palette for, 26
low-cost alternative to, 32
Proof Setup options, 190
and transparent PNGs, 192, 258
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
333
and Web design process, 180
pixels, 285
placeholder content, 196
planning process, 182–191
mood boards, 188–189
page fl ow, 184–185
sketches, 182–183
visual comps, 190–191
wire frames, 186–187
PlayStation, 21
PNG image format, 168, 192, 258–261, 323
point sizes, 281
Portfolio CSS Gallery, 38
position properties, 138, 220
position type, 160–161
Presto, 23
print, adapting designs for, 118, 281, 282
print process, 36
printer-friendly Web pages, 118
programming languages, 36
properties, style rule, 52
property shortcuts, 200, 286
prototypes, 180, 196–203
pseudo-classes, 80, 82, 170, 323
pseudo-elements, 80, 86
public domain books, 292
pull quotes, 146
Q
quirks mode, 318, 319, 321
Quirks Mode site, 318
quotes, 78–79, 146, 240
R
readmore class, 246
RealPlayer, 23
relative position type, 160, 161
relative URLs, 309
rendering engines, 23
repeat property, 136, 137
repeat-x property, 136, 137, 264
repeat-y property, 136, 137
RGB Alpha color format, 310
RGB proof setup, 190
RGB values, 24, 54, 194, 285, 310–315
right position property, 138, 220
right property, 162, 163
Rijksmuseum Web site, 242, 244
rounded corners, 174, 175, 190, 254, 258
rows, 212, 218–219, 264–265, 297
rules of style, 50–59
basic style rules, 54–55
combining rules, 58–59
declaring styles, 56–57
how they work, 50
limiting scope of, 285
parts of style rules, 52–53
S
Safari
and CSS, 21
and design enhancements, 254
as development tool, 21
and downloadable fonts, 230
layout engine, 23
and rounded corners, 174
and shadows, 172
and Web standards, 44
screen media type, 118
scroll lines, 186
search engine optimization, 283. See also SEO
sections, 212, 222–223, 268–271, 297
selector declarations, 54
selectors, 60–75
adjacent, 78
child, 76
class, 62–67
defi ned, 52
descendent, 72–75
HTML, 60–61
sibling, 76, 78
semantics, 89–121. See also CSS vocabulary
adding notes to CSS, 104–105
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
334
cascade, 120–121
determining CSS rule’s weight, 114–115
embedding styles in Web page, 94–95
external styles in Web site, 96–103
importance, 116–117
inheritance, 106–109
inline styles for HTML tag, 92–93
media types, 118–119
order of style rules, 110–111
specifi city in style rules, 112–113
where to put style rules, 90–103
semicolon, in selector declarations, 56, 92,
285
SEO, 283, 284
server-side technologies, 2
shadows, 172–173, 190
Shiira, 23
shorthand properties, 200, 286
sibling selectors, 76, 78
sidebars, 70, 146
site navigation, 243–255
and anchor tags, 244
buttons, 252–254
and CSS sprites, 244, 284
hiding in printed Web page, 281
links, 246–247
menus, 248–251
site-planning process, 182–191
mood boards, 188–189
page fl ow, 184–185
sketches, 182–183
visual comps, 190–191
wire frames, 186–187
site plans, 180. See also site-planning process
sketches, 182–183
soft launches, 204
Sony PlayStation, 21
Speaking In Styles Web site, 2, 172, 228, 291
specifi city, 112–113, 120
sprites, CSS, 168, 192, 244–245, 284
stacking order, 164
stair-stepped elements, 322
states, link, 80–83, 244–245, 246
static position type, 160, 161
strike-through effect, 130
style attribute, 90
style guides, 194–195
style rules, 50–59
basic, 54–55
combining, 58–59
determining weight of, 114–115
how they work, 50
parts of, 52–53
specifi city in, 112–113
where to put, 90–103
style sheet languages, 36
style sheets. See also CSS
combining, 202–203
creating, 98–99
external. See external style sheets
genesis of, 8
importing, 102–103
linking to, 100–101
for mobile devices, 280
tailoring for specifi c media types, 118–119
<style> tag, 90, 94
styles
applying to entire Web site, 96
based on where something is, 72–73
browser-default, 106, 110, 120, 216–217,
296
browser-inherent, 6
for children, 76–77
conditional, 320, 323
in context, 70–79
declaring, 56–57
default, 106, 110, 120, 194, 216–217
dynamic, 80, 84–85
embedded, 90–91, 94–95, 283
external, 90–91, 96–103
forcing application of, 116
framework, 279
inherited, 106
inline, 90, 91, 92–93, 120, 283
for link actions, 82–83
order of priority for, 120–121
organizing, 200–201
overriding, 108, 110, 116
parent-inherited, 106, 120
for parts of paragraph, 86–87
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
335
reusing, 270
for siblings, 78–79
for special cases, 80–87
text, 130–133
SUMO Paint, 32
syntax, 49. See also CSS syntax
T
T-shirt company, 88, 90
table-based layouts, 40
table tags, 6
tables, 166–167
tags
adding multiple classes to, 66–67
binding styles to, 50
creating basic style for, 50
how CSS acts on, 50
inline styles for, 92–93
purpose of, 6, 50
styling, 60–61
weight of, 114
text
aligning, 130, 132, 133
capitalizing, 130
editing, 98
replacement, 266
sizing, 236
styling, 130–133, 238–241
underlining, 8, 130, 133, 216, 246
using placeholder, 196
text-align property, 132, 133
text-decoration property, 132, 133
text editors, 98
text-indent property, 132, 133
text replacement, 266
text-shadow property, 172, 173
text-spacing properties, 130
text styles, 130–133, 238–241
text-transform property, 132, 133
TextEdit, 98
thegridsystem.org, 210
Threadless, 88, 90
tiling, image, 136–137, 190
Times font, 226
Times New Roman font, 226, 227
top-level navigation menus, 248, 280
top position property, 138, 162, 163, 220
TopStyle, 28
transparent images, 192, 258–261
transparent keyword, 124
Trebuchet MS font, 226, 227
Trident, 23
True Type fonts, 230
tutorials, Web design, 34
Twistori, 251
typefaces, 228, 234–235. See also fonts;
typography
TypeTester, 32, 33
Typographic Desk Reference, The, 224
typography, 225–241
as component of style guide, 194
core Web fonts, 226–227
downloadable fonts, 230–231
fl uid, 232–237
improvements in Web, 32
previewing, 32
styling text, 238–241
Web-safe fonts, 32, 228–229, 234, 306–
308
Typogridphy, 278
U
UGSMAG, 50, 71
underlining, 8, 130, 133, 216, 246
underscore hack, 158, 260, 276, 321, 323
Uniform Resource Locators, 309. See also
URLs
Unix, 20, 21
unordered lists, 168
Urban Dictionary, 122, 124
<url> variable, 125
URLs, 125, 281, 309. See also links
usability reviews, 250
user feedback
and beta launches, 204
and dynamic pseudo-classes, 84, 170
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
336
and link pseudo-classes, 80
making changes based on, 180
and mood boards, 188
user interface, 192
UXBooth, 250
V
Validation Service, W3C CSS, 274, 276, 277,
321
validator.w3.org, 275
values
as component of style rules, 52
types of, 124–125
variables, 125
Verdana font, 226, 227
vertical-align property, 132, 133
vertical menus, 248, 251
video, 14
visibility, 144–145
visibility value, 144, 145
visited state, 80, 81, 82, 244, 298
visual comps
adjusting margins/padding in, 186
comparing with actual Web site, 26
cutting chrome from, 192
and fl uid typography, 232
purpose of, 190
and site-planning process, 180
static vs. dynamic, 82
tips for creating, 190
voxLibris
code for, 291–301
inspiration for, 292
as model for design process, 180
W
W3C
and CSS, 44
CSS Validation Service, 274, 276, 277, 321
CSS Work Group, 158
jargon, 255
meaning of acronym, 44
Web applications, 30–33
Web browsers, 18–23. See also specifi c
browsers
alternatives to leading, 22, 23
and CSS, 18, 20–21, 44, 317
and design enhancements, 172, 254
and downloadable fonts, 230
and font sizes, 236
graphics-based, 8
layout engines for, 23
legacy, 18
Macintosh, 18, 20–21
most commonly used, 18
and outlines, 174
and rounded corners, 174
and shadows, 172
viewing Web page on different, 19
Windows, 20–21
Web design, 179–207
adapting for print, 281
best practices, 284
and browser viewport, 150
building site, 192–203
choosing tools for, 17
deploying site, 204–205
vs. designing for other media, 150, 180
dynamic nature of, 180
as iterative process, 180, 206–207
making CSS central part of, 179
overview of process, 180–181
page-fl ow considerations, 184–185
planning phase, 182–191
source of news and updates on, 2
standards, 275
testing, 196
tools. See Web designer’s toolbox
Web Designer Wall, 34, 36
Web designer’s toolbox, 17–34
code editors, 28–29
design ideas, 34
Firefox add-ons, 24–27
online tools, 30–33
tutorials, 34
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
337
Web browsers, 18–23
Web pages. See also Web sites
adding structure to, 50
core components of, 1–3
creating printer-friendly version of, 118
embedding styles in, 94–95
fl uid vs. fi xed, 184–185, 218
meta information for, 210
planning structure of, 186
setting default styles for, 210, 216–217
“skin” of, 257. See also chrome
structural elements, 210
tailoring for specifi c media, 118–119
viewing on different browsers, 19
viewing on mobile devices, 280
viewing printed, 281
Web-safe fonts, 32, 228–229, 234, 306–308
Web sites. See also Web pages
analyzing CSS for, 29
applying styles to entire, 96
choosing color palette for, 30
choosing fonts for, 225, 234–235. See also
fonts
deploying, 180
designing. See Web design
getting user feedback on. See feedback
navigation for. See navigation
planning, 180, 182–191
testing, 180, 196
vs. Web applications, 30
Web standards, 275
Web technologies, 2, 4
Web typography, 225–241
as component of style guide, 194
core Web fonts, 226–227
downloadable fonts, 230–231
fl uid, 232–237
improvements in, 32
previewing, 32
styling text, 238–241
Web-safe fonts, 32, 228–229, 234, 306–
308
Webdings font, 226, 227
WebKit, 23
-webkit-border-radius property, 174, 175
-webkit-box-shadow property, 172, 173
weight, rule, 112, 114–115
white-space property, 130, 131
width, fl uid vs. fi xed, 184–185, 186, 218
width property, 148–151
Wii, 23
Windows
code editors, 28, 29
core Web fonts, 226
operating system fonts, 228
text editor, 98
Web browsers, 20–21
Web-safe fonts, 306
wire frames, 182, 186–187
Word, Microsoft, 98
word processors, 98
word-spacing property, 130, 131
WordPress, 39
World Wide Web Consortium, 44. See also W3C
X
XML, 12, 14
Y
YAML, 278
YUI Grids, 278
Z
z-index property, 164–165
Zen Garden, CSS, 40, 42–43
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
Simply visit www.peachpit.com/safarienabled and
enter code JNZJSAA to try it today.
Get free online access
to this book for 45 days!
And get access to thousands more by signing
up for a free trial to Safari Books Online!
With the purchase of this book you have instant online,
searchable access to it for 45 days on Safari Books Online!
And while you’re there, be sure to check out Safari Books
Online’s on-demand digital library and their free trial offer
(a separate sign-up process). Safari Books Online subscribers
have access to thousands of technical, creative and business
books, instructional videos, and articles from the world’s
leading publishers.
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
