Table Of Content

01_783234 ffirs.qxd 3/20/06 3:43 PM Page i By Richard Wagner 02_783234 ftoc.qxd 3/20/06 3:44 PM Page viii 01_783234 ffirs.qxd 3/20/06 3:43 PM Page i By Richard Wagner 01_783234 ffirs.qxd 3/20/06 3:43 PM Page ii Web Design Before & After Makeovers™ Published by Wiley Publishing, Inc. 111 River Street Hoboken, NJ 07030-5774 www.wiley.com Copyright © 2006 by Wiley Publishing, Inc., Indianapolis, Indiana Published by Wiley Publishing, Inc., Indianapolis, Indiana Published simultaneously in Canada No part ofthis publication may be reproduced, stored in a retrieval system or transmitted in any form or by any means, electronic, mechanical, pho- tocopying, recording, scanning or otherwise, except as permitted under Sections 107 or 108 ofthe 1976 United States Copyright Act, without either the prior written permission ofthe Publisher, or authorization through payment ofthe appropriate per-copy fee to the Copyright Clearance Center, 222 Rosewood Drive, Danvers, MA 01923, (978) 750-8400, fax (978) 646-8600. Requests to the Publisher for permission should be addressed to the Legal Department, Wiley Publishing, Inc., 10475 Crosspoint Blvd., Indianapolis, IN 46256, (317) 572-3447, fax (317) 572-4355, or online at http://www.wiley.com/go/permissions. Trademarks:Wiley, the Wiley Publishing logo, and related trade dress are trademarks or registered trademarks ofJohn Wiley & Sons, Inc. and/or its affiliates in the United States and other countries, and may not be used without written permission. Photoshop is a registered trademark ofAdobe Systems Incorporated. All other trademarks are the property oftheir respective owners. Wiley Publishing, Inc., is not associated with any product or vendor mentioned in this book. LIMIT OF LIABILITY/DISCLAIMER OF WARRANTY:THE PUBLISHER AND THE AUTHOR MAKE NO REPRESENTATIONS OR WARRANTIES WITH RESPECT TO THE ACCURACY OR COMPLETENESS OF THE CONTENTS OF THIS WORK AND SPECIFICALLY DISCLAIM ALL WAR- RANTIES, INCLUDING WITHOUT LIMITATION WARRANTIES OF FITNESS FOR A PARTICULAR PURPOSE. NO WARRANTY MAY BE CRE- ATED OR EXTENDED BY SALES OR PROMOTIONAL MATERIALS. THE ADVICE AND STRATEGIES CONTAINED HEREIN MAY NOT BE SUITABLE FOR EVERY SITUATION. THIS WORK IS SOLD WITH THE UNDERSTANDING THAT THE PUBLISHER IS NOT ENGAGED IN REN- DERING LEGAL, ACCOUNTING, OR OTHER PROFESSIONAL SERVICES. IF PROFESSIONAL ASSISTANCE IS REQUIRED, THE SERVICES OF A COMPETENT PROFESSIONAL PERSON SHOULD BE SOUGHT. NEITHER THE PUBLISHER NOR THE AUTHOR SHALL BE LIABLE FOR DAMAGES ARISING HEREFROM. THE FACT THAT AN ORGANIZATION OR WEBSITE IS REFERRED TO IN THIS WORK AS A CITATION AND/OR A POTENTIAL SOURCE OF FURTHER INFORMATION DOES NOT MEAN THAT THE AUTHOR OR THE PUBLISHER ENDORSES THE INFORMATION THE ORGANIZATION OR WEBSITE MAY PROVIDE OR RECOMMENDATIONS IT MAY MAKE. FURTHER, READERS SHOULD BE AWARE THAT INTERNET WEBSITES LISTED IN THIS WORK MAY HAVE CHANGED OR DISAPPEARED BETWEEN WHEN THIS WORK WAS WRITTEN AND WHEN IT IS READ. For general information on our other products and services, please contact our Customer Care Department within the U.S. at 800-762-2974, outside the U.S. at 317-572-3993, or fax 317-572-4002. For technical support, please visit www.wiley.com/techsupport. Wiley also publishes its books in a variety ofelectronic formats. Some content that appears in print may not be available in electronic books. Library ofCongress Control Number: 2006920619 ISBN-13: 978-0-471-78323-7 ISBN-10: 0-471-78323-4 Manufactured in the United States ofAmerica 10 9 8 7 6 5 4 3 2 1 1K/RY/QU/QW/IN 01_783234 ffirs.qxd 3/20/06 3:43 PM Page iii Meet the Author Richard Wagneris an experienced Web designer and author of several Web technology books, including Yahoo SiteBuilder For Dummies, XSLT For Dummies, XML All-in-One Desk Reference For Dummies, andJavaScript Unleashed. He is the former Vice President of Product Development at NetObjects and inventor of the award-winning NetObjects ScriptBuilder Web tool. In his non-tech life, Richard is also author of C.S. Lewis & Narnia For Dummies, Christianity For Dummies, and The Gospel Unplugged. His online home is at Digitalwalk.com. Author’s Acknowledgments Special thanks go to Steve Hayes, for giving me the opportunity to work on this book project; Paul Levesque, for your direction and guidance throughout the process; Andy Hollandbeck, for your editing feedback and suggestions; and Dennis Cohen, for your keen attention to the technical details throughout the book. Dedication To Kimberly 01_783234 ffirs.qxd 3/20/06 3:43 PM Page iv Publisher’s Acknowledgments We’re proud of this book; please send us your comments at www.wiley.com/. Some of the people who helped bring this book to market include the following: Acquisitions, Editorial, and Media Development Composition Services Senior Project Editor: Paul Levesque Book Designer: LeAndra Hosier Acquisitions Editor: Steve Hayes Project Coordinator: Adrienne Martinez Copy Editor: Andy Hollandbeck Layout and Graphics: Lauren Goddard, Denny Hager, Heather Ryan Technical Editor: Dennis Cohen Proofreaders: Debbye Butler, Jessica Kramer Editorial Manager: Leah P. Cameron Indexer: Rebecca R. Plunkett Media Development Manager: Laura VanWinkle Media Development Supervisor: Richard Graves Editorial Assistant: Amanda Foxworth Publishing and Editorial for Technology Dummies Richard Swadley, Vice President and Executive Group Publisher Andy Cummings,Vice President and Publisher Mary Bednarek,Executive Acquisitions Director Mary C. Corder,Editorial Director Publishing for Consumer Dummies Diane Graves Steele,Vice President and Publisher Joyce Pepple,Acquisitions Director Composition Services Gerry Fahey,Vice President of Production Services Debbie Stailey, Director of Composition Services 02_783234 ftoc.qxd 3/20/06 3:44 PM Page v Table of Contents Introduction 1 1 MAKEOVER ESSENTIALS 5 Macromedia Dreamweaver: Your Command and Control Design Center 6 Adobe Photoshop: Your Visual Sidekick 7 Web Browsers: Your Test Suite 8 Web Developer Extension for Firefox: Your Interactive Debugging Environment 10 2 PAGE LAYOUT MAKEOVERS 13 Moving from Table Layout to DIVs 14 Boxing in Your Page’s Content 21 Adding a Page Heading 24 Centering Your Pages 27 Adding Curves to Your Edges 29 3 NAVIGATION MAKEOVERS 37 Reorganizing Your Site for Easier Navigation 38 Creating a Top-Level Menu Bar 41 Creating a Vertical Navigation List 49 Adding a Pathway to Your Pages 52 Adding a Quick Links Drop-Down Menu 54 4 PAGE ELEMENT MAKEOVERS 59 Enhancing the Look of Table Borders 60 Offsetting Page Elements to Avoid Eye Competition 63 Using iframes to Package Your Content 68 Bringing iframes to Life 71 02_783234 ftoc.qxd 3/20/06 3:44 PM Page vi vi Table of Contents 5 TEXT MAKEOVERS 75 Selecting Fonts that Complement Your Site 76 Replacing Normal Text with Anti-Aliased Text 81 Replacing Plain Bullets with Images 86 6 IMAGE MAKEOVERS 89 Creating an Image Rollover 90 Cropping Images to Shed the Useless Stuff 95 Thumbnailing Images 99 Displaying Multiple Images with an Image Scroller 106 Displaying a “Lightbox” Overlay Image 113 7 IMAGE PERFORMANCE MAKEOVERS 117 Resizing Images Yourself 118 Reducing Your Image’s File Size, Not Its Quality 121 Preloading Images 124 8 HOME PAGE MAKEOVERS 127 Messaging Your Home Page 128 Making Your Home Page Feel Alive 134 Adding a Splash Introduction 137 9 CONTENT MAKEOVERS 143 Writing Web-Savvy Text 144 Creating Intuitive and Usable Links 148 Adding an Alternate Print Version of Your Web Page 150 Adding an Alternate Print Version of Your Web Page, Technique II 157 Adding a Subject and Message to a mailto Link 159 02_783234 ftoc.qxd 3/20/06 3:44 PM Page vii Table of Contents vii 10 FORM MAKEOVERS 163 Validating Your Forms 164 Controlling Tab Order 172 Using CSS to Transform the Look of Form Elements 175 Creating Graphical Buttons 179 11 ADD-ON MAKEOVERS 187 Adding Maps and Directions 188 Adding a Site Search 192 Making Your Blog Part of Your Web Site 195 12 SITE MAKEOVERS 203 Linking to Other Sites without Losing Your Visitors 204 Creating Your Own Favorites Icon 206 Improving Your Search Engine Ranking 209 Converting Your Web Page to XHTML 212 13 EXTREME MAKEOVERS 215 Allowing Visitors to Adjust the Font Size 216 Scrambling Your E-mail Links to Avoid Spam 220 Displaying Different Content Based on the Frequency of the Visitor 224 Adding an RSS Feed to Your Web Site 227 INDEX 232