Speaking in styles- P9

Chia sẻ: Thanh Cong | Ngày: | Loại File: PDF | Số trang:10

Thêm vào BST

Báo xấu

75
lượt xem 5
download

Download Vui lòng tải xuống để xem tài liệu đầy đủ

Speaking in styles- P9: I want you to think of a shape. It can be any shape you want a circle, a square, a triangle, an eight-pointed star, or an ameboid glob-but keep it to a single continuous shape. I want you to hold that shape in your mind, or, if you need to, scratch it out on a piece of paper (or, if you are really far gone) on a computer.

Chủ đề:

Bình luận(0) Đăng nhập để gửi bình luận!

Lưu

Nội dung Text: Speaking in styles- P9

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