Professional Web Design: Techniques and Templates- P1

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

Thêm vào BST

Báo xấu

119
lượt xem 25
download

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

Professional Web Design: Techniques and Templates- P1: 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- P1

Please purchase PDF Split-Merge on www.very
Professional Web Design: Techniques and Templates Fourth Edition Clint Eccher Course Technology PTR A part of Cengage Learning Australia • Brazil • Japan • Korea • Mexico • Singapore • Spain • United Kingdom • United States Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
Professional Web Design: † 2011 Course Technology, a part of Cengage Learning. Techniques and Templates ALL RIGHTS RESERVED. No part of this work covered by the copyright herein may Clint Eccher be reproduced, transmitted, stored, or used in any form or by any means graphic, electronic, or mechanical, including but not limited to photocopying, recording, Publisher and General Manager, scanning, digitizing, taping, Web distribution, information networks, or Course Technology PTR: information storage and retrieval systems, except as permitted under Section 107 Stacy L. Hiquet or 108 of the 1976 United States Copyright Act, without the prior written Associate Director of Marketing: permission of the publisher. Sarah Panella Manager of Editorial Services: For product information and technology assistance, contact us at Heather Talbot Cengage Learning Customer & Sales Support, 1-800-354-9706 Marketing Manager: Mark Hughes For permission to use material from this text or product, Acquisitions Editor: Heather Hurley submit all requests online at cengage.com/permissions Further permissions questions can be emailed to Project and Copy Editor: Marta permissionrequest@cengage.com Justak Technical Reviewer: Eric Hunley All trademarks are the property of their respective owners. Interior Layout Tech: MPS Limited, All images † Cengage Learning unless otherwise noted. A Macmillan Company Library of Congress Control Number: 2010928007 Cover Designer: Mike Tanamachi DVD-ROM Producer: Brandon ISBN-13: 978-1-4354-5715-7 Penticuff ISBN-10: 1-4354-5715-3 Indexer: Sharon Shock eISBN-10: 1-4354-5716-1 Proofreader: Heather Urschel Course Technology, a part of Cengage Learning 20 Channel Center Street Boston, MA 02210 USA Cengage Learning is a leading provider of customized learning solutions with office locations around the globe, including Singapore, the United Kingdom, Australia, Mexico, Brazil, and Japan. Locate your local office at: international.cengage.com/region Cengage Learning products are represented in Canada by Nelson Education, Ltd. For your lifelong learning solutions, visit courseptr.com Visit our corporate website at cengage.com Printed in the United States of America 1 2 3 4 5 6 7 12 11 10 Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
Christian, I never thought I would meet a woman like you. I am so grateful for having met someone who has traveled so many roads in search of self-awareness and self-improvement. Your heart, humor, and humanity are unparalleled. You have changed my life forever. Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
Acknowledgments Nancy Eccher—For all the photography that proves your father lives in you. Daniel Yu—To the guy who started me down the Web road so many years ago. It’s hard to believe this journey all started with the Lynx browser. Mark Celano—For being my Italian Yoda. Derrick Kuhn, Scott Grant, Megan Refner, and Michael Haynie—For helping bring back the fun to Web design. Chen Sun—For being a forward-thinking marketer who has been there since the first edition. Mikayla Eccher—To the girl whose creativity inspires and reminds me daily of how lucky I am to be an artist. Heather Hurley—To the editor whose professionalism and follow-through has made the writing and editing of this edition as painless as possible. Marta Justak—For editing my p’s and q’s and 1’s and 2’s. For all of A5design’s clients over the years—without you, none of this would have occurred. iv Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
About the Author Clint Eccher (Fort Collins, CO) is an award-winning Web designer with more than 15 years of experience designing and developing professional Web sites. He is the owner of A5design, a Web design company that not only subcontracts to various marketing, advertising, and IT organizations, but also is commissioned by Fortune 500 companies, local and national non-profit organizations, and small businesses for Web design and development. In addition to authoring Professional Web Design: Techniques and Templates (Third Edition), which has been published in five different languages, he is also the author of Advanced Professional Web Design: Techniques and Templates. v Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
Contents Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .xv Chapter 1 Overview of Web Development Today . . . . . . . . . . . . . . . . . . . 1 Defining Web Design . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2 Knowing the Seven Rules of Web Design . . . . . . . . . . . . . . . . . . . . . . . . . . 5 Understanding Three Web-Design Philosophies . . . . . . . . . . . . . . . . . . . . 6 Usability Philosophy . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7 Pros and Cons . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8 Multimedia Philosophy . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12 Pros and Cons . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13 Mortised Philosophy. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14 Pros and Cons . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15 Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17 Chapter 2 Designing for the Past, Present, and Future. . . . . . . . . . . . . . . 19 Feeling Browser Pains. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19 Incorporating Usage Statistics. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22 Branching Pages . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25 Understanding Bandwidth . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25 Building on Previous Design Weaknesses . . . . . . . . . . . . . . . . . . . . . . . . . 28 IFrames and Frames . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29 Image Buttons . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30 Background Images . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 32 Uncontrolled Color . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 36 vi Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
Contents vii Uncompressed Images . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 37 Thumbnails . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 38 Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 40 Chapter 3 Things to Consider Before Beginning . . . . . . . . . . . . . . . . . . . . 41 Using Requirements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 41 Collecting the Requirements. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 43 Obtaining Front-End Requirements . . . . . . . . . . . . . . . . . . . . . . . . . . . . 46 Creating a Flowchart . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 47 Knowing Bandwidth Requirements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 47 Deciding on Resolution . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 50 Designing Fixed versus Relative Sites . . . . . . . . . . . . . . . . . . . . . . . . . . . 55 Creating Versions of a Site to Satisfy Differing Resolutions . . . . . . . . 57 Deciding on Color Depth . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 57 Designing for Scalability . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 60 Using Include Files . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 60 Creating a Flexible Design . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 62 Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 65 Chapter 4 Enhancing Usability . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 67 Simplifying Architecture . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 67 Use a Consistent Naming Convention . . . . . . . . . . . . . . . . . . . . . . . . . . 68 Limit the Clicking . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 69 Avoid Linking the User Out of the Section . . . . . . . . . . . . . . . . . . . . . . 69 Create Cascading Architecture versus Flat Architecture . . . . . . . . . . . 71 Creating Layout. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 72 Scrolling versus Nonscrolling. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 72 Pros of Scrolling . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 72 Cons of Scrolling . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 72 Positioning Content . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 73 Developing Navigation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 74 Creating Consistency . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 74 Using Text for Menu Items. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 76 Deciding Whether to Use a Horizontal or Vertical Structure . . . . . . . 76 Allowing Enough Width . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 77 Understanding the Different Types of Menus . . . . . . . . . . . . . . . . . . . 77 Designing for Accessibility. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 79 Designing for Content . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 79 Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 82 Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
viii Contents Chapter 5 Gathering Requirements and Creating a Comp. . . . . . . . . . . . 83 Gathering and Basing a Site on Requirements . . . . . . . . . . . . . . . . . . . . . 85 Creating a Comp for the Client . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 89 Creating a Source Directory. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 90 Collecting and Documenting Stock Images. . . . . . . . . . . . . . . . . . . . . . 92 Selecting Colors. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 94 Deciding Layout . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 95 Developing Layers. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 96 Using Masks . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 99 Receiving a Decision on the Chosen Comp and Making Edits . . . . . . . 100 Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 101 Chapter 6 What Is Needed to Build Mortised Sites . . . . . . . . . . . . . . . . . 103 Understanding the Concept of Mortising Images . . . . . . . . . . . . . . . . . 104 Understanding XHTML. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 113 Using a Limited Number of Tags. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 114 Understanding Graphics . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 114 Understanding CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 114 Understanding CSS Terminology . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 116 CSS Used in This Book. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 117 Block- and Line-Level Tags. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 118 Understanding the DocType Declaration . . . . . . . . . . . . . . . . . . . . . . 118 Linking to CSS Style Sheets . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 118 Including Print Style Sheets . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 121 Understanding Include Files . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 123 Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 124 Chapter 7 Understanding Graphics . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 125 Learning about Vector and Bitmap Images. . . . . . . . . . . . . . . . . . . . . . . 125 Learning about JPGs, PNGs, and GIFs . . . . . . . . . . . . . . . . . . . . . . . . . . . . 128 Using PNGs and GIFs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 128 Knowing How PNG and GIF Compression Work. . . . . . . . . . . . . . . . . 134 Using JPGs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 137 Saving a Photograph . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .138 Saving an Image That Has Gradations . . . . . . . . . . . . . . . . . . . . . . .138 Saving Text on Top of a Photo . . . . . . . . . . . . . . . . . . . . . . . . . . . . .142 Misusing Image Formats . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 143 Understanding Graphics/Compression Software . . . . . . . . . . . . . . . . . . 151 Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 153 Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
Contents ix Chapter 8 Creating CSS Designs. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 155 CSS-Based Design Versus XHTML Table Design. . . . . . . . . . . . . . . . . . . . 155 Advantages of CSS Designs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 156 Disadvantages of CSS Designs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 156 The Basics of CSS-Based Design Works Versus XHTML Table-Based Design. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 157 Understanding the Box Model . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 170 When to Use Tables . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 176 Validating Code . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 176 Testing Designs in Various Browsers . . . . . . . . . . . . . . . . . . . . . . . . . . . . 177 Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 178 Chapter 9 Case Study: Low-Content CSS Design . . . . . . . . . . . . . . . . . . . 179 Understanding the Design’s Structure . . . . . . . . . . . . . . . . . . . . . . . . . . . 180 The Reasoning Behind Guides and Creating Slices in Photoshop Files . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 180 Understanding the Placement of CSS Containers . . . . . . . . . . . . . . . . 183 Building the Structure . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 185 Creating the XHTML and CSS Framework . . . . . . . . . . . . . . . . . . . . . . 185 Adding the Header Content . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 188 Adding in Which to Nest Left and Right Columns . . . . . . . . . 192 Creating the Left Column . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 194 Adding the Center (Right) Column. . . . . . . . . . . . . . . . . . . . . . . . . . . . 201 Constructing Second-Level Pages . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 207 Adding a Floating Container for Additional Content . . . . . . . . . . . . 214 Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 222 Chapter 10 Case Study: Medium-Content CSS Design . . . . . . . . . . . . . . . 223 Understanding the Design’s Structure . . . . . . . . . . . . . . . . . . . . . . . . . . . 223 Reasoning Behind Guides and Creating Slices in a Photoshop File. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 224 Understanding the Placement of CSS Containers . . . . . . . . . . . . . . . . 226 Building the Structure . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 228 Creating the XHTML and CSS Framework . . . . . . . . . . . . . . . . . . . . . . 228 Adding the Left Column . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 230 Adding to Nest Center and Inside-Right Columns. . . . . . . . . 236 Adding the Top-Right Images . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 237 Adding the Bottom, Center, and Right Content Areas . . . . . . . . . . . 244 Constructing Second-Level Pages . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 253 Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
x Contents Constructing a Second-Level Page with Three Columns . . . . . . . . . . 253 Constructing a Second-Level Page with Two Columns . . . . . . . . . . . 260 Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 265 Chapter 11 Case Study: High-Content CSS Design . . . . . . . . . . . . . . . . . . 267 Understanding the Design’s Structure . . . . . . . . . . . . . . . . . . . . . . . . . . . 267 Reasoning Behind Guides and Creating Slices in Photoshop Files . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 268 Understanding the Placement of CSS Containers . . . . . . . . . . . . . . . . 271 Building the Structure . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 272 Creating the XHTML and CSS Framework . . . . . . . . . . . . . . . . . . . . . . 273 Adding the Header Row . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 275 Creating the Left Column . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 280 Adding the Center Column . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 286 Constructing Second-Level Pages . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 299 Constructing a Second-Level Page with Three Columns . . . . . . . . . . 300 Constructing a Second-Level Page with Two Columns . . . . . . . . . . . 310 Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 320 Chapter 12 Case Study: Full-Height Three-Column Layout . . . . . . . . . . . 321 Understanding the Design’s Structure . . . . . . . . . . . . . . . . . . . . . . . . . . . 322 Reasoning Behind Guides and the Creating of Slices in Photoshop File. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 323 Understanding the Placement of CSS Containers . . . . . . . . . . . . . . . . 325 Building the Structure . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 326 Creating the XHTML and CSS Framework . . . . . . . . . . . . . . . . . . . . . . 326 Adding the Rows and Columns to the Framework. . . . . . . . . . . . . . . 329 Populating the Header, Footer, and Columns with Content . . . . . . 335 Constructing Second-Level Pages . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 343 Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 344 Chapter 13 Case Study: Background-Based Design. . . . . . . . . . . . . . . . . . 345 Understanding the Design’s Structure . . . . . . . . . . . . . . . . . . . . . . . . . . . 346 Reasoning Behind Guides and the Creating of Slices in the Photoshop File. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 347 Understanding the Placement of CSS Containers . . . . . . . . . . . . . . . . 349 Building the Structure . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 350 Creating the XHTML and CSS Framework . . . . . . . . . . . . . . . . . . . . . . 350 Adding the Header Area to the Framework . . . . . . . . . . . . . . . . . . . . 353 Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
Contents xi Adding the Body Content and Footer . . . . . . . . . . . . . . . . . . . . . . . . . 359 Constructing Second-Level Pages . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 368 Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 370 Chapter 14 Case Study: A CSS Form . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 371 Understanding the Form’s Structure . . . . . . . . . . . . . . . . . . . . . . . . . . . . 371 Explaining the Style Sheet Used for the Form. . . . . . . . . . . . . . . . . . . . . 374 Building the Form Row by Row . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 376 Adding the Tag and Required Row. . . . . . . . . . . . . . . . . . . 376 Adding the First Name Row. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 377 Adding the Last Name Row . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 378 Adding the Contact Name Row . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 379 Adding the Region and Language Rows . . . . . . . . . . . . . . . . . . . . . . . 379 Adding the Status and Unlimited Rows . . . . . . . . . . . . . . . . . . . . . . . . 380 Adding the Purchase Date Row . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 381 Adding the Comments Row . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 382 Adding the Options to Select Rows . . . . . . . . . . . . . . . . . . . . . . . . . . . 383 Adding the Submit and Cancel Buttons. . . . . . . . . . . . . . . . . . . . . . . . 384 The Final Product . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 384 Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 389 Chapter 15 Case Study: Low-Content XHTML Template . . . . . . . . . . . . . 391 Creating the Design for a Low Amount of Content . . . . . . . . . . . . . . . . 392 Understanding the Strengths and Weaknesses of the Chosen Design. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 392 Adding Guides and Slices. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 394 Creating the Parent Table . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 395 Creating and Linking the Style Sheet . . . . . . . . . . . . . . . . . . . . . . . . . . . . 396 Creating the Menu Table. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 398 Adding an Image to the Center Column . . . . . . . . . . . . . . . . . . . . . . . . . 401 Creating the Content (Right-Area) Table . . . . . . . . . . . . . . . . . . . . . . . . 402 Creating the Footer Information . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 408 Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 409 Chapter 16 Tips and Techniques . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 411 Tantek or Box Model Hack . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 411 Naming Rules and Properties Correctly . . . . . . . . . . . . . . . . . . . . . . . . . . 416 Removing Body Margins and Padding . . . . . . . . . . . . . . . . . . . . . . . . . . . 420 Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
xii Contents Creating the Framework for a Fixed-Width CSS Design . . . . . . . . . . . . 421 Taking into Account Increasing and Decreasing Column Heights . . . . 430 Centering a Fixed-Width Design . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 432 Creating a Liquid Design . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 437 Creating a Line . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 438 Using Background Images as Design Elements . . . . . . . . . . . . . . . . . . . . 440 Coding CSS Mouseovers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 441 Using JavaScript Drop-down Menus. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 443 Remembering the Order of Margin and Padding Shortcuts . . . . . . . . . 443 Using the Border and Background Properties for Troubleshooting . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 443 Commenting Out Code for Troubleshooting . . . . . . . . . . . . . . . . . . . . . 447 Using Unique Naming Conventions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 449 Avoiding Horizontal Scrollbars . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 449 Using CSS Shortcuts . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 450 Understanding Font Units . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 450 Using Globally Driven and Tags for Printing Purposes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 450 Using Non-Graphical Elements When Designing Rebrandable Sites. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 451 Including Hidden Tags for Future Use. . . . . . . . . . . . . . . . . . . . . 453 Positioning the Line-Height Property Correctly . . . . . . . . . . . . . . . . . . . 453 Testing Continually and Consistently . . . . . . . . . . . . . . . . . . . . . . . . . . . . 455 Creating Source Image Files That Can Be Easily Customized and Resaved . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 455 Breaking Out Sections of Source Image Files . . . . . . . . . . . . . . . . . . . . . 457 Creating Smart Navigation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 458 Reusing Images . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 459 Indenting and Commenting Code . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 461 Removing Spaces and Comments . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 462 Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 464 Chapter 17 Search Engine Optimization (SEO) . . . . . . . . . . . . . . . . . . . . . 465 Search Engines . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 465 Tips and Techniques . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 466 Content Is King . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 468 Keyword Research . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 468 Creating Strong Title Tags . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 471 Meta Keywords and Meta Description. . . . . . . . . . . . . . . . . . . . . . . . . 473 Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
Contents xiii Use to Tags . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 475 Use Bold and Italics Tags . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 476 Include Keywords in ‘‘alt’’ and ‘‘title’’ Properties in Images . . . . . . . 477 Use Keywords in Naming Directories, Files, and Images . . . . . . . . . . 477 Link Keywords . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 479 Building a Strong Page Rank Value with Google . . . . . . . . . . . . . . . . 480 Adding Sitemaps to Site. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 481 Case Studies . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 482 Case Study 1—A5design.com . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 483 Optimization Changes Made to Site . . . . . . . . . . . . . . . . . . . . . . . . . . 483 Optimized Code . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 484 Optimization Results . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 490 Case Study 2—Onepartart.com . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 491 Optimization Changes Made to Site . . . . . . . . . . . . . . . . . . . . . . . . . . 492 Optimized Code . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 492 Optimization Results . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 500 Case Study 3—Apricotpetal.com. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 502 Optimization Changes Made to Site . . . . . . . . . . . . . . . . . . . . . . . . . . 503 Optimized Code . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 503 Optimization Results . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 505 Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 505 Chapter 18 Conversion Rate Optimization (CRO) . . . . . . . . . . . . . . . . . . . 507 What Are the Variables Associated with CRO? . . . . . . . . . . . . . . . . . . . . 507 Functionality . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 509 Layout. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 512 Imagery . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 515 Color . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 518 Content . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 519 Testing . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 521 Case Studies . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 524 A/B Test 1—Onepartart.com . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 524 A/B Test 2—apricotpetal.com . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 528 Multivariate Test—medcomgroup.com . . . . . . . . . . . . . . . . . . . . . . . . 528 Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 532 Chapter 19 Customizing the Designs Included in This Book . . . . . . . . . . 535 Steps to Customizing a Template . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 535 Step 1: Open the Main Photoshop File . . . . . . . . . . . . . . . . . . . . . . . . 536 Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
xiv Contents Step 2: Customize Images and Colors. . . . . . . . . . . . . . . . . . . . . . . . . . 537 Step 3: Optimize and Save Necessary Images . . . . . . . . . . . . . . . . . . . 538 Step 4: Open an XHTML (HTML), CSS, or JavaScript File . . . . . . . . . . 541 Step 5: Customize Text and Code . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 542 Step 6: Test the Design . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 542 Photoshop Tutorials . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 544 Replacing Photos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 544 Resizing Photos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 549 Changing Colors . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 551 Undoing and Redoing Actions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 556 Undoing Actions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .556 Redoing Actions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .556 Configuring the Undo Actions (History States) Setting . . . . . . . . .557 Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 558 Chapter 20 Templates Included on DVD . . . . . . . . . . . . . . . . . . . . . . . . . . . 559 Designs—Fourth Edition Folder . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 562 Designs—Third Edition Folder. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 594 Designs—First Edition Folder . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 808 Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 876 Index. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 877 Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
Introduction The methods and processes in which professional Web sites are created have not changed much since the first edition of this book. Designers still need to under- stand requirements, realize the technical pros and cons of layouts, create comps, save images using the correct file types, and test sites similarly to how they have for more than a decade. Some of the technical ways in which these processes are accomplished, however, have changed. Probably the most significant change that has occurred since the original writing of this book is how the framework of sites is built. Table-based HTML (HyperText Markup Language), now XHTML (Extensible HyperText Markup Language), designs had been the staple for laying out Web sites for many years. However, this method started making a significant change after the second edition of this book, in favor of Cascading Style Sheet(CSS)-based designs. Such design involves using style sheets to style pages, instead of XHTML table structure, which require more code. This book fully explains the essentials of using style sheets to lay out sites. In this fourth edition, Search Engine Optimization (SEO) is explored, giving the reader a strong basic understanding of how to get sites to rank better in search engines. Conversion Rate Optimization (CRO) also is explained, hopefully, helping the designer create a more efficient site for the users who are already visiting them. The goal of this book is still to educate beginning to intermediate Web designers on the various issues involved with Web design. The way in which this is xv Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
xvi Introduction accomplished is through general discussion, case studies, and specific tips and techniques. There are many ways in which designers today create sites. What is included in this design is how A5design, the company owned by the author, has satisfied its clients since the late 1990s. The book is written in the least technical terms possible. While some technical terminology is always going to be necessary, a lot of it has been simplified or all out excluded to help the reader understand the general concepts and then apply them in an effective, quick manner. My premise is that learning is much easier once the reader gets some momentum going, which is accomplished by not tripping over technical terminology. This is not to say this book doesn’t deal with specific issues that designers will most likely run into, because it does. Many of the tips and techniques included in this book will be experienced by the reader eventually if he/she does enough Web design. The tips and techniques included in this book come from many years of trouble- shooting, pitfalls, and flat-out stupid mistakes. They have been fine-tuned, however, through creative solutions and technical common sense. After having read through this book, the reader will have a strong understanding of what it takes to create a highly professional Web site. DVD-ROM Contents Folder Contents Code Examples: This folder contains code examples included in Chapters 6, 8, 9, 10, 11, 12, 13, 14, 15, 16, 19. ■ Designs—First Edition: This folder contains the files for each design, which includes at least one Photoshop file, XHTML file, and a CSS file. Designs 1-50 ■ Designs—Third Edition: This folder contains the files for each design, which includes at least one Photoshop file, XHTML file, and, in most cases, a CSS file. 1-80-xhtml-web 81-90-enewsletters Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
DVD-ROM Downloads xvii 91-100-signatures 101-120-photoshop-web 121-160-css-web ■ Designs—Fourth Edition: This folder contains the files for each design, which includes at least one Photoshop file, XHTML file, and a CSS file. 161-180-xhtml-web DVD-ROM Downloads If you purchased an ebook version of this book, and the book had a companion DVD-ROM, we will mail you a copy of the disc. Please send ptrsupplements@ cengage.com the title of the book, the ISBN, your name, address, and phone number. Thank you. Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
This page intentionally left blank Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
chapter 1 Overview of Web Development Today Compared with other industries, the Web design industry is still relatively young. While it may be considerably more technologically advanced than it was more than a decade ago, the industry still has issues to address, such as browser functionality and consistency, high-bandwidth availability, search-engine com- patibility, and site aesthetics. Depending on which designer you ask, the industry will have reached Nirvana either when Web sites for all users are loaded with multimedia functionality or when they are stripped of all ‘‘excess’’ graphics and functionality. The industry is continually progressing, so it’s hard to know where it will be in the coming years. However, one thing’s certain: The majority of Web designers will still be working more with currently available technologies, rather than those that are experimental or overly progressive. Web designers also will be using various methods of Web design to best communicate the intended information. Oddly enough, as the industry has evolved since the mid-90s, the benchmark for aesthetic designs has not always taken steps forward. While there have been some fads that have required designers to create more aesthetically appealing designs, some of the latest have not pushed the abilities of many designers. The quality of Web design, in many cases, has actually taken a step backward. There are two main reasons for this. One, whether it’s because of the designer’s drive or the client’s wishes, there is a mentality of playing it safe and designing sites exactly how most of the other sites are designed, which makes everything look the same. 1 Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.