Building Websites All-in-One For Dummies®, 3rd Edition
Visit to view this book's cheat sheet.
Table of Contents
Building Websites All-in-One For Dummies®, 3rd Edition
Building Websites All-in-One For Dummies®, 3rd Edition
Published by
John Wiley & Sons, Inc.
111 River Street
Hoboken, NJ 07030-5774
Copyright © 2012 by John Wiley & Sons, Inc., Hoboken, New Jersey
Published by John Wiley & Sons, Inc., Hoboken, New Jersey
Published simultaneously in Canada
No part of this publication may be reproduced, stored in a retrieval system or transmitted in any form or by any means, electronic, mechanical, photocopying, recording, scanning or otherwise, except as permitted under Sections 107 or 108 of the 1976 United States Copyright Act, without either the prior written permission of the Publisher, or authorization through payment of the 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 Permissions Department, John Wiley & Sons, Inc., 111 River Street, Hoboken, NJ 07030, (201) 748-6011, fax (201) 748-6008, or online at .
Trademarks: Wiley, the Wiley logo, For Dummies, the Dummies Man logo, A Reference for the Rest of Us!, The Dummies Way, Dummies Daily, The Fun and Easy Way, Dummies.com, Making Everything Easier, and related trade dress are trademarks or registered trademarks of John Wiley & Sons, Inc. and/or its affiliates in the United States and other countries, and may not be used without written permission. All other trademarks are the property of their respective owners. John Wiley & Sons, 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 warranties, including without limitation warranties of fitness for a particular purpose. No warranty may be created 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 rendering 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 877-762-2974, outside the U.S. at 317-572-3993, or fax 317-572-4002.
For technical support, please visit .
Wiley publishes in a variety of print and electronic formats and by print-on-demand. Some material included with standard print versions of this book may not be included in e-books or in print-on-demand. If this book refers to media such as a CD or DVD that is not included in the version you purchased, you may download this material at . For more information about Wiley products, visit .
Library of Congress Control Number: 2012942059
ISBN 978-1-118-27003-5 (pbk); ISBN 978-1-118-28348-6 (ebk); ISBN 978-1-118-28482-7 (ebk); ISBN 978-1-118-28725-5 (ebk)
Manufactured in the United States of America
10 9 8 7 6 5 4 3 2 1
About the Authors
Doug Sahlin is an author and photographer living in Venice, Florida. He is a professional photographer specializing in fine art photography. He also photographs weddings and events and writes books about computer applications like Adobe Acrobat and Adobe Photoshop. Doug’s latest books have been about digital photography. In the past years, he’s written Digital Photography Workbook For Dummies, Digital Portrait Photography For Dummies, and Canon EOS 7D For Dummies. To find out more about Doug and see some of his work, check out .
David Karlins is a web design consultant, author, and teacher, addressing contemporary challenges in digital graphic and interactive design. Visit him at .
Dedication
From Doug: For my soul mate Roxanne and Niki, “The Queen of the Universe”
Authors’ Acknowledgments
From Doug Sahlin: Two authors wrote this book, but a cast of thousands — okay, maybe hundreds — are responsible for the finished product you hold in your hands. Many thanks to Executive Editor Steve Hayes for making the 3rd Edition of this book possible. Kudos to Senior Project Editor Nicole Sholly for making sure the authors did what they were supposed to do when they were supposed to do it. Thanks to Senior Copy Editor Teresa Artman for peppering the text with insightful comments designed to amuse and otherwise keep the authors on their toes. Thanks to the staff at Wiley for creating an awesome series of books. Thanks to Technical Editor John Chastain for making sure everything was technically accurate. Thanks to Margot Hutchison for ironing out the contractual issues and other such delights.
Thanks to my friends, fellow authors, and family for their continued encouragement and support. Special thanks to Ted, Colin, Karen, Niki the Cat, and her brother Micah.
From Dave Karlins: Bringing this book to life was a collaborative project, with the coauthors; Executive Editor Steven Hayes; Senior Project Editor Nicole Sholly; and literary agent Margot Mailey Hutchinson at the core. In addition, my “pieces of the puzzle” were enhanced by the contributions of a wide range of helpful designers, experts, and reviewers.
A number of creative content developers allowed me to use their inspiring material as models in the book, including: composer Inhyun Kim and Ear to Mind (); graphic designer Emily Strand (); and photographer Gary Wahl (). I did my best to minimize distorting their content while using it to illustrate techniques in the book, and appreciate their generosity in lending content for that purpose.
Presenting JavaScript and PHP in this comprehensive book posed particular challenges. I was determined to make that material accurate, accessible, and useful while fitting within the constraints and parameters of this book. To that end, I got great assistance from some of the most dynamic innovators in the worlds of JavaScript and PHP. Those who unselfishly shared expertise and advice include Bryn Austin Bellomy (); Jake Brumby (); Mary D. (); Alan Douglas (); Jonathan Grover (); Christopher Heng (); Torstein Hønsi (); and Orfeo Morello (). None of these experts is responsible for whatever shortcomings there might be in the coverage of JavaScript and PHP in this book, but in different ways they made that coverage much better.
I also appreciate the substantial and detailed responses to questions I posed to the PR and technical staffs at Adobe, Google, Microsoft, and Omni relating to their applications and online tools. It was clear to all involved that no quid pro quo was implied in their supplying software and technical support. One of the exciting things about this book is that the content here relating web-design applications is not “sponsored,” endorsed, edited, or framed by the providing software publishers.
Last, and far from least, several of my live and online web-design students reviewed the minibooks I wrote for this book, including Yvonne Strassmann, Ernie Crawford, Casey R. Mitchell, and Dawn Andersen. Their detailed, thoughtful, and refreshingly candid insights were always welcome and contributed greatly to my ability to know and speak to our audience. They will recognize their input in the final content.
Thanks, everyone!
Publisher’s Acknowledgments
We’re proud of this book; please send us your comments at . For other comments, please contact our Customer Care Department within the U.S. at 877-762-2974, outside the U.S. at 317-572-3993, or fax 317-572-4002.
Some of the people who helped bring this book to market include the following:
Acquisitions, Editorial
Senior Project Editor: Nicole Sholly
Executive Editor: Steven Hayes
Senior Copy Editor: Teresa Artman
Technical Editor: John Chastain
Editorial Manager: Kevin Kirschner
Editorial Assistant: Leslie Saxman
Sr. Editorial Assistant: Cherie Case
Cover Photo: iStock 11716379 © iStock / Marcello Bortolino
Cartoons: Rich Tennant ()
Composition Services
Project Coordinator: Sheree Montgomery
Layout and Graphics: Jennifer Creasey
Proofreaders: John Greenough, Jessica Kramer, Christine Sabooni
Indexer: BIM Indexing & Proofreading Services
Special Help: Blair Pottenger, Jennifer Riggs, Rebecca Senninger, Heidi Unger
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
Kathleen Nebenhaus, Vice President and Executive Publisher
Composition Services
Debbie Stailey, Director of Composition Services
Introduction
Websites can be very complex or very simple. When you’re building a site, you have many decisions to make, all dependent upon the needs of a particular project. Don’t become overwhelmed or fret, though, because you have Building Websites All-in-One For Dummies, 3rd Edition, to help you. This book is so comprehensive and so flexible that it will help you in all aspects of web design, from the initial planning phases to testing and publishing your masterpiece.
This book can help you take on the role of project manager, graphic designer, developer, or multimedia designer, and offers information about interacting with different specialists on larger or more complex projects. So whether you’re undertaking your first web design project or are a veteran taking on a web design team, this book is for you.
About This Book
Here are some of the things you can do using this book:
♦ Plan your website project.
♦ Assemble and manage a web team or draw on online resources.
♦ Create layouts, graphics, navigation menus, and web pages from scratch.
♦ Optimize graphic elements for your web pages.
♦ Work with HTML, HTML5, CSS, and CSS3 to create and maintain your pages.
♦ Add interactive animated menus, navigation elements, and other content with JavaScript and jQuery Mobile.
♦ Create forms and manage form input with PHP scripts or online data management tools.
♦ Generate and embed search tools for your site.
♦ Embed live and streaming data, including RSS feeds and blogs, in your site.
♦ Add multimedia content, such as audio and video.
♦ Integrate e-commerce into your website project.
♦ Maintain and promote a website.
♦ Explore JavaScript for animation and interactivity and PHP resources for server-side coding.
Foolish Assumptions
We have, perhaps foolishly, made a few assumptions about our readers. We expect that you have basic computer skills (Windows, Mac, or Linux) and a basic understanding of how to use a browser and the Internet. The authors and publisher of this book assume you’re a bright, intelligent person who wants to learn but doesn’t have the time to read a book from cover to cover. We assume you’ll find the information you need by perusing the index and then cutting to the chase to read that section.
If you don’t have any prior knowledge of HTML, CSS, JavaScript, PHP, or graphics software, that’s okay: We give you the basics here. We do assume that you have more than a passing interest in web design. In fact, this book is geared for web designers, or anyone with aspirations of becoming a web designer. If you don’t have any prior experience with web design or managing website projects, that’s okay, too. This book starts at the beginning before moving into more advanced topics.
Conventions Used in This Book
By conventions, we simply mean a set of rules we’ve employed in this book to present information to you consistently. When you see a term italicized, look for its definition, which we include so that you know what things mean in the context of website construction. Sometimes, we give you information to enter onscreen; in this case, we make bold what you need to type. We place website addresses and e-mail addresses in monofont so that they stand out from regular text. Code appears in its own font, set off from the rest of the text, like this:
Never mind the furthermore, the plea is self-defense.
Throughout the book, you’ll find icons such as Technical Stuff, Tips, Warnings, and Remember. These little tidbits are cold, hard facts we found out the hard way. We sprinkle this information liberally so you won’t fall into the same chuckholes we did — or worse, end up with egg on your face.
What You Don’t Have to Read
We structure this book modularly — that is, it’s designed so that you can easily find just the information you need — so you don’t have to read whatever doesn’t pertain to your task at hand. We include sidebars here and there throughout the book that contain interesting information that isn’t necessarily integral to the discussion at hand; feel free to skip over these. You also don’t have to read the paragraphs next to the Technical Stuff icons, which parse out über-techie tidbits (which might or might not be your cup of tea).
How This Book Is Organized
Building Websites All-in-One For Dummies, 3rd Edition, is split into 10 minibooks. You don’t have to read them sequentially, you don’t have to look at every minibook, you don’t have to review each chapter, and you don’t even have to read all the sections in any particular chapter. (Of course, you can if you want to; it’s a good read.) The Table of Contents and the index can help you quickly find whatever information you need. In this section, we briefly describe what each minibook contains.
Book I: Getting Ready
This minibook covers all the things you need to do before you start actually creating a website. The topics of planning, managing your project, flying solo on a project, and assembling and managing a web-design team are all covered here. We also include information about creating a site that portrays an organization in a flattering light while providing visitors with content that keeps them coming back for more.
Book II: Designing the Site
Site design is about the nuts and bolts of how a site works and about making the visual aspects work within the technical needs, and this minibook helps you make these two worlds come together. From sketches on the back of an envelope, to working with navigation flowcharts, to generating the perfect color scheme for your style and message, we explore a whole range of options and dimensions to web design. In short, if you’re looking for information about creating layouts and planning site structure, implementing appropriate design, and collecting and using feedback, you’ll want to read this minibook.
Book III: Building Pages with HTML
HTML is the basic language for designing web pages, and this minibook walks you through generating or coding the basic HTML you need to create pages. Plus, you’ll learn to take advantage of HTML5’s radically new approach to structuring page content as well as how to create and structure pages in Dreamweaver CS6.
Book IV: Designing Pages with CSS
Modern web pages are designed and formatted using external (linked) CSS style sheet files. This minibook teaches you to format text and images, design pages with columns and boxes, and to apply CSS3 tools to create effects that previously could only be achieved with images or Flash. This minibook also walks you through creating and applying style sheets in Dreamweaver CS6.
Book V: Incorporating Web Graphics and Multimedia
A website without graphics is text, which won’t keep a visitor interested for very long. Book V begins with an introduction to web media and the various formats you’ll use to incorporate images in your design. Then it’s off to the races with Fireworks, Photoshop, and (last but not least) Flash.
Book V also shows you how to add multimedia content to your designs. If you want music or other joyful noise on a website, read Chapter 3 of this minibook. If it’s full-motion video your client is after, we show you how to add it in Chapter 4 of this minibook. We wind up this trip down multimedia way with an introduction to Flash CS6 in Chapter 5 of this minibook.
Book VI: Creating Interactive Pages with JavaScript
JavaScript is how you add animation and interactivity to your website. Drop-down menus? Hover-over tooltips? How about a navigation jump menu? Or jQuery Mobile content for mobile sites? All covered. This minibook shows you what JavaScript is, and how to create the elements you need, with three alternatives: writing simple scripts yourself, availing yourself of online libraries of premade JavaScript, and generating JavaScript with Dreamweaver CS6 or online resources.
Book VII: Managing Forms with PHP
Build your e-newsletter list. Provide a helpful search box. Sign up volunteers for your cause. Or collect valuable feedback from happy (or not so happy) visitors. This minibook covers everything you need to design forms with “prompt” text and validation tests (to make sure the data looks right before being submitted). And, we’ll show you how to use a wide set of options for collecting form data, ranging from basic PHP scripting to professional (but free!) e-list managers. Bonus: See how to use Dreamweaver CS6 to create validation JavaScript and mobile-specific form elements, such as sliders and switches.
Book VIII: Social Media and Interactive Add-Ons
Social media is a hot topic these days. Businesses use social media such as Facebook and Twitter to get the word out. Social media can also be used to draw visitors to a website. In Chapter 1 of this minibook, we show you how to add a WordPress blog to a website. In Chapter 2, we show you how to incorporate social media with the website and vice versa. If the website you’re designing has something to sell, we show you how to integrate e-commerce with a website in Chapter 3.
Book IX: Deploying and Managing the Site
If you build it, they will come. Not. The only way to get people to flock to a website in droves is to promote it. We begin this minibook by showing you how to test the site and then upload it. If you’ve created a good design, visitors will come — and with any luck, the site will catch on. And if the site really catches on, you’ll probably need to revise or redesign the site. We show you how to maintain and expand a website in Chapters 3 and 4 of this minibook.
Book X: Case Studies
The final minibook of this lofty tome comprises four chapters of case studies. We learn a lot by surfing the web and dissecting what’s good, bad, and downright ugly about what’s out there. You can, too. To give you an idea of what goes into planning and then creating a site, we explore the needs of four different clients and the resulting websites, including one case study of a business that incorporated an online newsletter with its marketing efforts.
The companion website
The companion website contains downloadable code files from the book that you can use for practice.
Icons Used in This Book
For Dummies books are known for those helpful icons that point you in the direction of really great information. In this section, we briefly describe each icon used in this book.
The Tip icon points out helpful information that’s likely to make your job easier.
This icon marks an interesting and useful fact — something that you might want to remember for later use.
The Warning icon highlights lurking danger. With this icon, we’re telling you to pay attention and proceed with caution.
When you see this icon, you know that there’s techie stuff nearby. If you’re not feeling very techie, you can skip this info.
Where to Go from Here
Although the book is written so that more experienced web designers can skip around to the parts they need, novice users probably should start with Books I and II, which together provide a good foundation of building websites, before proceeding to the other books. If you’re one of those experienced designers, scour the index for the material you need and then read those sections.
Experience is the best teacher. After immersing yourself in those topics you want to know more about, launch your favorite code editor and begin noodling with designs you’ve created and tweak them, using the information from this book. And if — like the plumber with leaky faucets — your personal website was designed around the turn of the century, by all means spiff it up using the techniques we show you.
Please note that some special symbols used in this eBook may not display properly on all eReader devices. If you have trouble determining any symbol, please call Wiley Product Technical Support at 800-762-2974. Outside of the United States, please call 317-572-3993. You can also contact Wiley Product Technical Support at .
Book I
Getting Ready
Contents at a Glance