Professional Web Design: Techniques and Templates- P20

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

Thêm vào BST

Báo xấu

80
lượt xem 17
download

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

Professional Web Design: Techniques and Templates- P20: This is the must-have book for designers who want to expand their skills and improve the quality of their designs. Learning CSS technology and continually improving one's design and developer skills is essential for every Web designer in today's marketplace. The goal of Professional Web Design: Techniques and Templates is to educate beginning-to-intermediate Web designers on the various issues involved with Web design through general discussion, case studies, and specific tips and techniques....

Chủ đề:

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

Lưu

Nội dung Text: Professional Web Design: Techniques and Templates- P20

Index 883 I in naming directories, files, and images, icon, 452 477-479 ID class name, 417 research, 468-470 ideogram, 9-10 tag, 473 IFrames, 29 Keyword tool (Google), 466 image. See also graphics kilobits per second (Kbps), 26 absolute or relative positioning, 107-108 background, 32-33, 35 L bitmapped, 99 label, form, 372-373, 375 conversion rate optimization, 512-518 tag, 377378 flattened, 98-99 layer formats, misusing, 143-151 advantages of, 97 immersive imagery, 11 design consideration, 96-99 keywords, 477-479 as folder, 97 menu items as, 30-32 image made up of, 97 mortising, 104-113 mask, 99 normal spacing between, 106 merged, 98--99 over compressing, 147-149 parent, 97 placing text over, 110-113 Layers panel (Photoshop), 544, 547, 549 positioned in container, 108-109 layout seamlessly pieced together, 104-105 deciding on, 95--96 sense of motion or emotion, 107 header height considerations, 96 source files, 455-457 menu width consideration, 96 template customization, 537 round edges and corner placement thumbnail as smaller version of, 38-39 considerations, 96 uncompressed, 37-38 scrolling versus nonscrolling, 72 image button, 30-32 three-column image-mapping, 78 basic framework, 326-329 Images folder, 91 CSS container placement, 325 tag, 115 design structure, 322 import, 120 guide and slice placement, 323-324 impression, 9 header, footer, and column content, include files, 60-61, 84, 124 335-342 indentation, 461 requirements, 321 inline characters, 452 rows and columns, adding to framework, tag, 379 329-334 ISP usage, 49 second-level pages, 343 italics and bold tags, 476 usability enhancement, 72-74 vertical versus horizontal space J consideration, 95 JavaScript, 77, 448 left alignment, 329 JPG format tag, 115 compression, 138 line, 438-439 saving images as, 137-138 linear shapes, 452 solid colors saved as, 145-146 line-height property, 453-454 line-level tag, 118 link keyword, 479-480 K liquid design, 437-438 Kbps (kilobits per second), 26 listing keyword background-based design in ‘‘alt’’ and ‘‘title’’ properties, 477 footer, 360-366 link, 479-480 framework, 350-352 meta, 473-474 header area, 353-357
884 Index box model method, 172-174 search engine optimization CSS design, 168-170 A5design case study, 484-485, fixed-width design 487-491, 4865 basic framework and initial style Apricotpetal.com case study, 502-505 rule, 421 onepartart.com case study, 493-500 body and header rules, 423-424 style sheet, 120 centering, 433-436 three-column layout footer area, 428-430 basic framework, 327-328 left and right column rules, 425-427 header, footer, and column content, form 335-342 checkbox, 381 rows and columns, 331-334 comments row, 382 XHTML, 160-168 completed form, 384-389 log file, usage statistics, 22 drop-down menu, 380 logo initial code, 377 low-content XHTML template, 406 name row, 378-379 positioning, 73-74 options to select row, 383-384 look and feel requirements, 41 required row, 377 low content, 80 section title, 383-384 low-content CSS design style sheet, 374-375 basic description of, 179 submit and cancel button, 384 basic framework, 185-188 high-content CSS design center (right) column example, 201-207 basic framework, 273-274 container placement, 183-185 center column, 287-296 floating container example, 214-221 header row, 276-278 guide and slice placement, 180-183 left column, 281-285 header content, 92, 188-191 second-level pages, three column, 300-309 left column example, 194-200 second-level pages, two column, 311-319 nested left and right column, 192-194 image second-level page construction, 207-214 background image and text added to, understanding the design structure, 180 112-113 low-content XHTML template mortised, 109-110 advantages of, 392-393 line, 439 center column, adding image to, 401-402 low-content CSS design content area, 394, 402-408 basic framework, 185-187 disadvantages of, 393 center (right) column example, 201-206 download time, 392 floating container example, 214-221 footer information, 408-409 header content, 188-190 guides and slices, 394-395 left-column example, 195-198 menu bullets, 394-395 second-level page construction example, menu table, 390-392, 398 208-213 overview, 391 low-content XHTML template parent table, 394-396 content area, 404-406 style sheet, 396 footer information, 409 title and logo, 406 menu table, 399-401 Lycos search engine, 465 style sheet, 396 medium-content CSS design basic framework, 228-229 M bottom, center, and right content areas, margin, 352, 375, 420-421, 443 244-250 mask, layer, 99 left column example, 231-234 mathematics-based technology, 13 second-level page, three column, 253-258 Medcomgroup.com (CRO case study), 528-532 second-level page, two column, 260-264 medium content, 81 top-right image example, 238-242 medium-content CSS design
Index 885 basic framework, 228-230 rules and properties, 416-420 bottom, center, and right content areas, troubleshooting, 449 244-252 usability enhancement, 68-69 building the structure, 228 navigation container placement, 226-227 consistency in, 74-76 guide and slice placement, 224-226 horizontal, 458, 514 left column example, 230-235 smart navigation tips and techniques, 458-459 nested center and right column, 236-237 usability enhancement, 74-76 second-level pages, three column, 253-259 vertical, 458-459 second-level pages, two column, 260-265 nested table, 158, 402-403, 425 top-right images, 237-244 Notepad software, 541 understanding of design structure, 223 menu background image for, 33, 35 O consistency in, 74-75 objectives documentation, 44 CSS, 78 onepartart.com Flash, 77 CRO case study, 524-528 horizontal versus vertical structure, 76-77, 95 SEO case study, 491-502 HTML text with mouseover, 78 Optimizer (Google), 466 image-mapped graphic, 78 Organic results (Google), 466-467 JavaScript of Java applet, 77 length and width, 77 P limiting the number of, 75-76 padding, 229, 328, 352, 420-421, 443 moving the, 74-75 page visit statistics, 23 navigation, 63, 458 paragraph, 438-439 positioning, 73 parent layer, 97 width considerations, 96 parent table, 394-396 menu bullets, 394-395, 440-441 patience, 100 menu items Pay Per Click (PPC), 466-467 as images, 30-32 philosophy using text for, 76 mortising, 14-17 menu table, 390-392, 398 multimedia, 12-14 merged layer, 98-99 usability, 7-12 meta keyword and meta description, 473-474 phone line, 49 modular site, 60-61 photo. See also image; stock images monitor resolution, 50-55 replacement, 544-548 mortised site resizing, 549-551 general steps for building, 83-84 text, 142 images, 104-113 Photoshop (Adobe) philosophy of, 14-17 color changes in, 551-555 source directory creation, 90-92 Color Picker tool, 552 steps toward typical building of, 104 comp creation, 89-90 mouseover, 199, 395, 441-442, 460 Fill tool, 552-555 Move tool (Photoshop), 550 history state, 557 MSN search engine, 465 image and color customization, 537 multimedia, 12-14 image-compression, 152 Layers panel, 544, 547549 N Move tool, 550 naming convention opening main design file in, 536 consistency in, 68-69 redo actions, 556 folder system, 91-92 Replace Files window, 539 ID class, 417 replacing photo in, 544-548 keywords, 477-479 resizing photo in, 549-551
886 Index saving for web option, 536-537 800 Â 600, 51, 56 Slice Select tool, 539 1024 Â 768, 51-52, 56 undo actions, 556-557 1280 Â 800, 51-52 PNG format deciding on, 50-55 advantages over JPGs, 128-130 increased, 53 compression, 134-137 monitor, 50-55 image most likely saved as, 130-131 for relative site, 55-57 line drawing saved as, 132-133 site designed for lower, 53-54 resizable color palette allowance, 129-130 site designed for standard, 53-54 saving images as, 132 site requirements, 42 thumbnail saved as, 133-134 versions of site to satisfy differing, 57 transparent images and, 129 resource positioning color, 95 absolute, 107-108, 198, 206, 430 stock image, 93 body, 74 validation, 177 content, 73-74 reuse, graphic, 459-460 header, 73 rounded edges, 96 logo, 73-74 rows menu, 73 form relative, 107-108, 237, 278, 437 checkbox, 380-381 PPC (Pay Per Click), 466-467 comments, 382 prepared by documentation, 43 contact name, 379 previous design, 28 drop-down menu, 379 print style sheet, 121-122, 450-451 name row example, 377-379 property options to select, 383-384 background, 199 required row, 376 CSS, 116, 119-120 section title, 383-384 height, 251 three-column layout design, line-height, 453-454 329-332, 334 proper naming, 416-420 rule proposed solutions documentation, 45 CSS, 116 proper naming, 416-420 R rank value, search engine optimization, 480-481 S rebrandable site, 451-452 saving images redo actions, 556 gradations, 138-140 relative positioning, 107-108, 237, 278, 437 as JPG, 137-138 relative site, 55-57 as PNG or GIF, 132 requirements uncompressed, 143, 145 bandwidth, 42, 47-50 scalability collection, 43-45 designing for, 60 content, 42 editable site, 60 documentation, 43-45 flexible design importance, 62-64 example of how and what to collect, 85-86 modular site, 60 front-end, 46-47, 85 site requirements, 42 gathering and basing a site on, 85-88 Scalable Vector Graphics (SVG), 127 look and feel, 41 scope creep, 42 resolution, 42 scrolling as roadmap to build upon, 85 horizontal scrollbar avoidance, 449-450 scalability, 42 nonscrolling versus, 72 that lack detail, 43 search box, 510-511 resolution search engine hits, 23, 466 640 Â 480, 55 search engine optimization (SEO)
Index 887 A5design.com case study, 483-488, shorthand property, 116 490-491, 4879 Siegel, David (Creating Killer Web Sites), 14 algorithm, 467 sign-off documentation, 45 AltaVista, 465 site requirements. See requirements Apricotpetal.com case study, 502-505 site/client name documentation, 43 AskJeeves, 465 sitemap, 67, 481-482 Bing, 466 Slice Select tool, 539 bold and italics tags, 476 slices and guides combination Web sites, 465 background-based design, 347-349 evolution, 465-466 high-content CSS design, 268-271 Excite, 465 low-content CSS design, 180-183 Google low-content XHTML template, 394-395 Analytics, 23, 25, 466 medium-content CSS design, 224-226 building strong page rank value with, source directory 480-481 consistent filing and naming Keyword tool, 466 system, 90-91 market share, 466 Images folder, 91 Optimizer, 466 as organized folder system, 91 Organic results, 466-467 Source folder, 91 PPC (Pay Per Click), 466-467 stock photo, 91 sitemap, 481-482 Web project name, 91 to tag, 475-476 source image files Hotbot, 465 breaking out sections of, 457 keyword research, 468-470 easily customized and resaved, 455-456 keywords in ‘‘alt’’ and ‘‘title’’ properties, 477 spacer GIF, 357 keywords in naming directories, files, and spaces, 191-192, 462 images, 477-479 spacing, 420-421 link keywords, 479-480 tag, 105, 378 Lycos, 465 specification, 6 meta keywords and meta description, 473-474 split-complementary color, 95 MSN, 465 stock images onepartart case study, 491-502 bundled, 93 page rank value, 480-481 collecting and documenting, 92-94 sitemap, 481-482 cost, 92-93 strong content importance, 468 documentation, 93-94 title tag, 471-472 high resolution, 92 Web Crawler, 465 low resolution, 92 Yahoo, 465 resources, 93 second-level page source directory creation, 91 background-based design, 368-369 usage agreement, 93 high-level content design style, font, 229 three column, 300-310 style sheet. See also CSS two column, 310-320 form, 374-376 low-content CSS design example, 207-214 importing, 120 medium-level CSS design low-content XHTML template, 396 three columns, 253-259 print, 121-122, 450-451 two column, 260-265 submit and cancel buttons, 384 three-column layout, 343 SVG (Scalable Vector Graphics), 127 tag, 379 selector, CSS, 116 semicolon, 417 T SEO. See search engine optimization table seven rules of design, 5-6 cells, 407-408 shortcuts, CSS, 450 nested, 158, 402-403, 425
888 Index when to use, 176 template customization, 542-543 tag, 401 tips and techniques for, 455 tag text , 401 alignment, 352 block-level, 118 color, 401 , 421 ‘‘complete access,’’ 357 , 115 hyperlinked, 401 bold, 476 length, 367 tag, 438-439 for menu items, 76 comment, 352, 447-448 over image, 110-113 , 108, 110-111, 183, 185, 192-193, 200, photo, 142 423, 425, 438-439, 453 saving as GIF, 132-133 , 115 template customization, 542 , 115 tag, 382 , 371, 376 three-column layout to , 115, 475-476 basic framework, 326-329 , 115 CSS container placement, 325 , 421 design structure, 322 , 115 guide and slice placement, 323-324 , 115 header, footer, and column content, 335-342 , 379 requirements, 321 italics, 476 rows and columns, adding the framework, , 473 329-334 , 377-378 second-level pages, 343 , 115 thumbnail line-level, 118 correct use of, 40 list of, 115 mistake designers make using, 39 , 115 saving as PNG or GIF, 133-134 , 379 title area , 105, 378 flexible design importance, 64 , 115 low-content XHTML template, 406 , 115 ‘‘title’’ properties, 477 , 115, 401 title tag, 471-472 , 115 transparent images, 129 , 382 troubleshooting , 116 commenting out code for, 447-448 , 115, 473 naming conventions, 449 , 115 using border and background properties for, , 115 443-446 using limited number of, 114 XHTML, 113-114 Tantek Celik Hack, 117, 411-416 U technical aspect focus, 3 uncompressed images, 37-38, 143, 145 technological advancement, 1-2 underscore, 401 template customization undo actions, 556-557 images and color, 537 usability main design file, opening in Photoshop, 536 conservative side of design, 8 six-step process, 535-536 designer consideration for, 8-9 testing, 542-543 graphics as complication rather than text and code customization, 542 communication, 7 testimonial, 367-368 graphics increasing the, 9-11 testing how each philosophy addresses, 7 consistent, 455 philosophy of, 7-12 conversion rate optimization, 521-523 visual, 8 CSS design, 177-178
Index 889 usability enhancement vertical navigation, 458-459 accessibility design, 79 vertical verus horizontal menu structure, avoidance of linking user out of the 76-77, 95 section, 69-70 video, 512 cascading versus flat architecture, 71-72 visual usability, 8 click limits, 69 content design, 79-81 content positioning, 73-74 W horizontal versus vertical structure, 76 W3C (World Wide Web Consortium), 118, 178 layout, 72-74 Web analysis software, 23 naming convention consistency, 68-69 Web Crawler search engine, 465 navigation consistency, 74-76 Web design scrolling verus nonscrolling, 72 definition of, 2-3 simplifying architecture, 67 seven rules of, 5-6 text for menu items, 76 technological advancement, 1-2 width allowance, 77 Web site usage statistics aesthetic focused, 3-4 design decisions based on, 22-25 CSS Validation, 177 free online applications based, 23 mortised philosophy based, 16 Google Analytics, 23, 25 stock image related, 93 log file, 22 technical focused, 3 page visits, 23 W3C, 118 search engine hits, 23 Wikipedia, 481 Web analysis software, 23 white space, 329 Wikipedia, 481 V World Wide Web Consortium (W3C), 118, 178 validation WYSIWYG (What You See Is What You Get) CSS design, 176-177 editor, 14-15 resources, 177 XHTML, 176-177 value, CSS, 116 X vector graphic XHTML antialiasing, 126 CSS design versus, 155, 157-160 basic description, 125 listing, 160-168 circle representation of, 126 table, when to use, 176 SVG (Scalable Vector Graphics), 127 tags, 113-114 vector-based technology, 13 validation, 176-177 version documentation, 44 XHTML Markup Validation Service, 177
This page intentionally left blank
License Agreement/Notice of Limited Warranty By opening the sealed disc container in this book, you agree to the following terms and conditions. If, upon reading the following license agreement and notice of limited warranty, you cannot agree to the terms and conditions set forth, return the unused book with unopened disc to the place where you purchased it for a refund. License: The enclosed software is copyrighted by the copyright holder(s) indicated on the software disc. You are licensed to copy the software onto a single computer for use by a single user and to a backup disc. You may not reproduce, make copies, or distribute copies or rent or lease the software in whole or in part, except with written permission of the copyright holder(s). You may transfer the enclosed disc only together with this license, and only if you destroy all other copies of the software and the transferee agrees to the terms of the license. You may not decompile, reverse assemble, or reverse engineer the software. Notice of Limited Warranty: The enclosed disc is warranted by Course Technology to be free of physical defects in mate- rials and workmanship for a period of sixty (60) days from end user’s purchase of the book/ disc combination. During the sixty-day term of the limited warranty, Course Technology will provide a replacement disc upon the return of a defective disc. Limited Liability: THE SOLE REMEDY FOR BREACH OF THIS LIMITED WARRANTY SHALL CONSIST ENTIRELY OF REPLACEMENT OF THE DEFECTIVE DISC. IN NO EVENT SHALL COURSE TECHNOLOGY OR THE AUTHOR BE LIABLE FOR ANY OTHER DAMAGES, INCLUDING LOSS OR CORRUPTION OF DATA, CHANGES IN THE FUNCTIONAL CHARACTERISTICS OF THE HARDWARE OR OPERATING SYSTEM, DELETERIOUS INTERACTION WITH OTHER SOFTWARE, OR ANY OTHER SPE- CIAL, INCIDENTAL, OR CONSEQUENTIAL DAMAGES THAT MAY ARISE, EVEN IF COURSE TECHNOLOGY AND/OR THE AUTHOR HAS PREVIOUSLY BEEN NOTIFIED THAT THE POSSIBILITY OF SUCH DAMAGES EXISTS. Disclaimer of Warranties: COURSE TECHNOLOGY AND THE AUTHOR SPECIFICALLY DISCLAIM ANY AND ALL OTHER WARRANTIES, EITHER EXPRESS OR IMPLIED, INCLUDING WARRANTIES OF MERCHANTABILITY, SUITABILITY TO A PARTICULAR TASK OR PURPOSE, OR FREEDOM FROM ERRORS. SOME STATES DO NOT ALLOW FOR EXCLUSION OF IMPLIED WARRANTIES OR LIMITATION OF INCIDENTAL OR CONSEQUENTIAL DAMAGES, SO THESE LIMITATIONS MIGHT NOT APPLY TO YOU. Other: This Agreement is governed by the laws of the State of Massachusetts without regard to choice of law principles. The United Convention of Contracts for the International Sale of Goods is specifically disclaimed. This Agreement constitutes the entire agreement between you and Course Technology regarding use of the software.
This page intentionally left blank
Design 117 Photoshop Design Design 120 Photoshop Design Game Developing GWX
Design 131 Homepage Design 134 Homepage Game Developing GWX
Design 137 Homepage Design 141 Homepage Game Developing GWX
Design 142 Homepage Design 143 Homepage Game Developing GWX
Design 144 Homepage Design 145 Homepage Game Developing GWX
Design 146 Homepage Design 149 Homepage Game Developing GWX
Design 150 Homepage Design 155 Homepage Game Developing GWX
Design 158 Homepage Design 161 Homepage Game Developing GWX
Design 162 Homepage Design 163 Homepage Game Developing GWX
Design 165 Homepage Design 166 Homepage Game Developing GWX