Second-level template for less content.Photoshop source file names: Designs—First Edition/design_32/design_32.psd HTML Pages: index.htm, menu_item_2.htm, menu_item_3.htm Photo credits: C
Trang 1Second-level template for less content.
Photoshop source file names: Designs—First Edition/design_32/design_32.psd HTML Pages: index.htm, menu_item_2.htm, menu_item_3.htm
Photo credits: Cameracaptured
Additional Designs Available on the DVD
Second-level template for more content
Trang 2Design 31 (First Edition)
Homepage design
Second-level template for less content
Photoshop source file names: Designs—First Edition/design_31/design_31.psd,
title_curve.psd
HTML Pages: index.htm, menu_item_2.htm, menu_item_3.htm
Photo credits: Cameracaptured
Trang 3Additional Designs Available on the DVD
Second-level template for more content
Design 30 (First Edition)
Homepage design
Trang 4Second-level template for less content.
Photoshop source file names: Designs—First Edition/design_30/design_30.psd,
bullets.psd, bg_menu.psd
HTML Pages: index.htm, menu_item_2.htm, menu_item_3.htm,
menu_i-tem_4.htm (second-level page for full content)
Photo credits: Cameracaptured, A5Design
Additional Designs Available on the DVD
Second-level template for more content
Trang 5Second-level template for more content.
Design 29 (First Edition)
Homepage design
Trang 6Second-level template for less content.
Photoshop source file names: Designs—First Edition/design_29/design_29.psd,
design_29_sl.psd, bg_menu.psd
HTML Pages: index.htm, menu_item_2.htm, menu_item_3.htm
Photo credits: A5Design
Additional Designs Available on the DVD
Second-level template for more content
Trang 7Design 28 (First Edition)
Trang 8Design 27 (First Edition)
Homepage design
Second-level template for less content
Photoshop source file names: Designs—First Edition/design_27/design_27.psd
HTML Pages: index.htm, menu_item_2.htm, menu_item_3.htm
Photo credits: Cameracaptured
Trang 9Additional Designs Available on the DVD
Second-level template for more content
Design 26 (First Edition)
Homepage design
Trang 10Second-level template.
Photoshop source file names: Designs—First Edition/design_26/design_26.psd
HTML Pages: index.htm, menu_item_2.htm
Photo credits: Cameracaptured
Design 25 (First Edition)
Homepage design
Trang 11Second-level template.
Photoshop source file names: Designs—First Edition/design_25/design_25.psd HTML Pages: index.htm, menu_item_2.htm
Photo credits: Cameracaptured, A5design
Design 24 (First Edition)
Homepage design
Trang 12Second-level template for less content.
Photoshop source file names: Designs—First Edition/design_24/design_24.psd
HTML Pages: index.htm, menu_item_2.htm, menu_item_3.htm
Photo credits: Onepartart, Cameracaptured
Additional Designs Available on the DVD
Second-level template for more content
Trang 13Design 23 (First Edition)
Homepage design
Second-level template for less content
Photoshop source file names: Designs—First Edition/design_23/design_23.psd HTML Pages: index.htm, menu_item_2.htm, menu_item_3.htm
Photo credits: A5design
Trang 14Additional Designs Available on the DVD
Second-level template for more content
Design 22 (First Edition)
Homepage design
Trang 15Second-level template for less content.
Photoshop source file names: Designs—First Edition/design_22/design_22.psd HTML Pages: index.htm, menu_item_2.htm, menu_item_3.htm
Photo credits: Cameracaptured
Additional Designs Available on the DVD
Second-level template for more content
Trang 16Design 21 (First Edition)
Homepage design
Second-level template for less content
Photoshop source file names: Designs—First Edition/design_21/design_21.psd
HTML Pages: index.htm, menu_item_2.htm, menu_item_3.htm
Photo credits: Cameracaptured, A5design
Trang 17Additional Designs Available on the DVD
Second-level template for more content
Design 20 (First Edition)
Homepage design
Trang 18Second-level template for less content.
Photoshop source file names: Designs—First Edition/design_20/design_20.psd
HTML Pages: index.htm, menu_item_2.htm, menu_item_3.htm,
menu_i-tem_4.htm (second-level page for full content)
Additional Designs Available on the DVD
Second-level template for more content
Trang 19Second-level template for more content.
Design 19 (First Edition)
Homepage design
Trang 20Second-level template for less content.
Photoshop source file names: Designs—First Edition/design_19/design_19.psd
HTML Pages: index.htm, menu_item_2.htm, menu_item_3.htm
Photo credits: J&N Photography
Additional Designs Available on the DVD
Second-level template for more content
Trang 21Design 18 (First Edition)
Homepage design
Second-level template for less content
Photoshop source file names: Designs—First Edition/design_18/design_design_
screenshot_psd
HTML Pages: index.htm, menu_item_2.htm, menu_item_3.htm,
menu_i-tem_4.htm (second-level page for full content)
Photo credits: J&N Photography
Trang 22Additional Designs Available on the DVD
Second-level template for more content
Second-level template for more content
Trang 23Design 17 (First Edition)
Homepage design
Second-level template
Photoshop source file names: Designs—First Edition/design_17/design_17.psd,
menu_item_text.psd
HTML Pages: index.htm, menu_item_2.htm
Photo credits: J&N Photography
Trang 24Design 16 (First Edition)
Homepage design
Second-level template for less content
Photoshop source file names: Designs—First Edition/design_16/design_16.psd
HTML Pages: index.htm, menu_item_2.htm, menu_item_3.htm
Photo credits: Cameracaptured
Trang 25Additional Designs Available on the DVD
Second-level template for more content
Design 15 (First Edition)
Homepage design
Trang 26Second-level template for less content.
Photoshop source file names: Designs—First Edition/design_15/design_15.psd
HTML Pages: index.htm, menu_item_2.htm, menu_item_3.htm
Photo credits: A5design
Additional Designs Available on the DVD
Second-level template for more content
Trang 27Design 14 (First Edition)
Homepage design
Second-level template for less content
Photoshop source file names: Designs—First Edition/design_14/design_14.psd HTML Pages: index.htm, menu_item_2.htm, menu_item_3.htm
Photo credits: A5design
Trang 28Additional Designs Available on the DVD
Second-level template for more content
Design 13 (First Edition)
Homepage design
Trang 29Second-level template for less content.
Photoshop source file names: Designs—First Edition/design_13/design_13.psd,
design_13_sl.psd
HTML Pages: index.htm, menu_item_2.htm, menu_item_3.htm
Photo credits: Cameracaptured, A5design
Additional Designs Available on the DVD
Second-level template for more content
Trang 30Design 12 (First Edition)
Homepage design
Second-level template for less content
Photoshop source file names: Designs—First Edition/design_12/design_12.psd,
design_12_sl.psd, photo_on.psd
HTML Pages: index.htm, menu_item_2.htm, menu_item_3.htm
Photo credits: J&N Photography, Onepartart, A5design
Trang 31Additional Designs Available on the DVD
Second-level template for more content
Design 11 (First Edition)
Homepage design
Trang 32Second-level template.
Photoshop source file names: Designs—First Edition/design_11/design_11.psd
HTML Pages: index.htm, menu_item_2.htm
Photo credits: Cameracaptured
Design 10 (First Edition)
Homepage design
Trang 33Second-level template for less content.
Photoshop source file names: Designs—First Edition/design_10/design_10.psd HTML Pages: index.htm, menu_item_2.htm, menu_item_3.htm
Photo credits: Onepartart
Additional Designs Available on the DVD
Second-level template for more content
Trang 34Design 9 (First Edition)
Homepage design
Second-level template
Photoshop source file names: Designs—First Edition/design_9/design_9.psd,
design_9_sl.psd
HTML Pages: index.htm, menu_item_2.htm
Photo credits: Onepartart
Trang 35Design 8 (First Edition)
Homepage design
Second-level template for less content
Photoshop source file names: Designs—First Edition/design_8/design_8.psd HTML Pages: index.htm, menu_item_2.htm, menu_item_3.htm
Photo credits: Cameracaptured
Trang 36Additional Designs Available on the DVD
Second-level template for more content
Design 7 (First Edition)
Homepage design
Trang 37Second-level template for less content.
Photoshop source file names: Designs—First Edition/design_7/design_7.psd HTML Pages: index.htm, menu_item_2.htm, menu_item_3.htm
Photo credits: Cameracaptured, A5design
Additional Designs Available on the DVD
Second-level template for more content
Trang 38Design 6 (First Edition)
Homepage design
Second-level template
Photoshop source file names: Designs—First Edition/design_6/design_6.psd
HTML Pages: index.htm, menu_item_2.htm
Photo credits: Onepartart, A5design
Trang 39Design 5 (First Edition)
Homepage design
Second-level template for less content
Photoshop source file names: Designs—First Edition/design_5/design_5.psd HTML Pages: index.htm, menu_item_2.htm, menu_item_3.htm
Photo credits: A5design
Trang 40Additional Designs Available on the DVD
Second-level template for more content
Design 4 (First Edition)
Homepage design
Trang 41Second-level template for less content.
Photoshop source file names: Designs—First Edition/design_4/design_4.psd HTML Pages: index.htm, menu_item_2.htm, menu_item_3.htm
Photo credits: Cameracaptured, A5design
Additional Designs Available on the DVD
Second-level template for more content
Trang 42Design 3 (First Edition)
Homepage design
Second-level template for less content
Photoshop source file names: Designs—First Edition/design_3/design_3.psd
HTML Pages: index.htm, menu_item_2.htm, menu_item_3.htm
Photo credits: Cameracaptured
Trang 43Additional Designs Available on the DVD
Second-level template for more content
Design 2 (First Edition)
Homepage design
Trang 44Second-level template.
Photoshop source file names: Designs—First Edition/design_2/design_2.psd
HTML Pages: index.htm, menu_item_2.htm
Photo credits: Onepartart, A5design
Design 1 (First Edition)
Homepage design
Trang 468-bit color depth, 57-58
16-bit color depth, 58-59
32-bit color depth, 58-59
<a href> tag, 401
A5design.com (SEO case study), 483-491
cascading versus flat, 71
navigation tips and techniques, 458site map as visual representation of, 67usability enhancement, 67
Ask search engine, 466
advantages/disadvantages, 345body content, 359-368color, 348
container placement, 349-350design structure, 346-347footer, 359-368
framework basics, 350-352guides and slices, 347-349header area, 353-358second-level pages, 368-369structure, 350
banding effect, 132 bandwidth
basic description of, 25compression and, 27determining speed of site, 26
high-bandwidth functionality versus
content-driven instance, 50Internet usage consideration, 49site requirements, 42, 47-50today’s standards, 26
banner ad, 511 Bing search engine, 466 bitmap graphic
advantages over vector, 127basic description of, 125circle representation of, 126
as image of choice, 128
bitmapped image, 99
877
Trang 47bits per second (bps), 26
box model hack, 411
box model method, 170-176
bps (bits per second), 26
testing CSS design in, 177-178testing pages in, 84
C
caching, 459
cancel and submit buttons, 387
carriage returns, 191
Cascading Style Sheet See CSS
cascading versus flat architecture, 71
case study
background-based designadvantages/disadvantages, 345body content, 359-368color, 348
container placement, 349-350design structure, 346-347footer, 359-368
framework basics, 350-352guides and slices, 347-349header area, 353 358
second-level pages, 368-369structure of, 350
conversion rate optimizationMedcomgroup.com, 528-532onepartart.com, 524-528form
button, 387cancel and submit button, 387checkbox, 380-381
color, 371, 373, 375comments row, 382contact name row, 379disabled form elements, 381drop-down menu, 379dynamic, 379form fields, 372label, 372-373, 375margin, 375name row, 377-379options to select row, 383-384required row, 376
section title, 383-384high-content CSS designbasic framework, 273-275center column, 286-299container placement, 271-272guide and slice placement, 268-271header row, 275-280
left column, 280-286understanding the design structure, 267low-content CSS design
basic description of, 179basic framework, 185-188center (right) column example, 201-207container placement, 183-185
download time, 392floating container example, 214-221guide and slice placement, 180-183header content, 92, 188-191left column example, 194-200nested left and right column, 192-194second-level page construction, 207-214understanding the design structure, 180low-content XHTML template
advantages of, 392-393center column, adding image to, 401-402content area, 394, 402-408
disadvantages of, 393footer information, 408-409guides and slices, 394-395menu bullets, 394-395menu table, 390-392, 398overview, 391
parent table, 394-396
Trang 48style sheet, 396title and logo, 406medium-content CSS designbasic framework, 228-230bottom, center, and right content areas,244-248, 251-252
building the structure, 228container placement, 226-227guide and slice placement, 224-226left column example, 230-235nested center and right column, 236-237second-level pages, three column, 253-259second-level pages, two column, 260-265top-right images, 237-244
understanding of design structure, 223search engine optimization
A5design, 483-491Apricotpetal.com, 502-505onepartart, 491-502three-column layoutbasic framework, 326-329CSS container placement, 325design structure, 322header, footer, and column content, 335-342requirements, 321
rows and columns, adding to framework,329-334
centering fixed-width design, 432-437
change, limiting number of, 101
checkbox, 380-381
Chijiiwa, Hideako (Color Harmony: A Guide to
Creative Color Combinations), 95
circular flow problem, 69-70
click, 69
client
contact documentation, 44offering alternatives to, 100-101
code See listing
ColdFusion Studio HTML editing
software, 541 color
background-based design, 348blending, 348
border, 200color blindness, 94color theory knowledge, 94color wheel, 95
complementary, 95conversion rate optimization, 518-519
font, 229, 328, 352form, 371, 373, 375how to select, 94-95mood and feel of site and, 94Photoshop file, 551-555resources for, 95split-complementary, 95template customization, 537text, 401
uncontrolled, 36
Color Bytes: Blending the Art and Science of Color
(Bourges), 95 color depth, 57-59
Color Harmony: A Guide to Creative Color Combinations (Chijiiwa), 95
Color Picker tool (Photoshop), 552 column
fixed-width design, 424-427high-content CSS designcenter column, 286-299left column, 280-286increasing and decreasing heightconsiderations, 430-432low-content CSS designcenter (right) column example, 201-207left column example, 194-200
medium-content CSS design exampleleft column, 230-235
nested center and right column, 236-237three-column layout design, 329-342
comment tags, 352, 447-448 comment tips and techniques, 462 commenting code, 461
commenting out code, 447-448 comments row, 382
communication, 100 comp
approval process, 89, 100-101description, 46
feeling and appearance of, 90importance of, 83
layer development consideration, 96-99Photoshop developed, 89-90
sliced into different images, 84slicing technology, 90
complementary color, 95
‘‘complete access’’ text, 357 compression
bandwidth and, 27GIF, 134-137, 392graphic, 151-152JPG, 138over compressing, 147-149PNG, 134-137
Trang 49saving uncompressed images, 143, 145uncompressed images, 37-38
content
conversion rate optimization, 519-521flexible design importance, 64high, 81
low, 80low-content XHTML template, 402-408medium, 81
medium-content CSS design, 244-252positioning, 73-74
site requirements, 42usability enhancement, 73-74, 79-81
conversion rate optimization (CRO)
banner ad, 511color, 518-519content, 519-521Flash movie, 512flyouts, 511functionality, 509-512imagery, 515-518layout, 512-515Medcomgroup.com case study, 528-532onepartart.com case study, 524-528search box, 510-511
testing, 521-523variables associated with, 507-509video, 512
corner, 96, 460
cost
excessive changes, 101stock images, 92-93
Creating Killer Web Sites (Siegel), 14
CRO See conversion rate optimization
crossover experience, 6
CSS (Cascading Style Sheet) See also CSS design
basic description of, 114linking to, 118, 120properties, 116, 119-120rule, 116
selectors, 116shortcuts, 450shorthand properties, 116Tantek Celik Hack, 117
values, 116visual reference of, 116
CSS design
advantages of, 156box model method, 170-176disadvantages of, 156-157high-content
basic framework, 273-275center column, 286-299container placement, 271-272guide and slice placement, 268-271header row, 275-280
left column, 280-286second-level pages, three column,300-310, 320
second-level pages, two column,310-319
understanding the design structure, 267listing, 168-170
low-contentbasic description of, 179basic framework, 185-188center (right) column example, 201-207container placement, 183-185
floating container example, 214-221guide and slice placement, 180-183header content, 92, 188-191left column example, 194-200nested left and right column, 192-194second-level page construction, 207-214understanding the design structure, 180medium-content
basic framework, 228-230bottom, center, and right content areas,244-252
building the structure, 228container placement, 226-227guide and slice placement, 224-226left column example, 230-235nested center and right column, 236-237second-level pages, three column, 253-259second-level pages, two column,
260-265top-right images, 237-244understanding of design structure, 223testing, 177-178
validation, 176-177
XHTML table design versus, 155-160
CSS form See form
CSS menu system, 78 CSS Validation Web site, 177 CSS Validator, 177
curvilinear shape, 517
customization See template customization