Teach Yourself VISUALLY Web Design E-Book

Rob Huddleston

• Herausgeber: John Wiley & Sons
• Kategorie: Wissenschaft und neue Technologien
• Serie: Teach Yourself VISUALLY (Tech)
• Sprache: Englisch
• Veröffentlichungsjahr: 2010

Seitenzahl: 281

Beschreibung

The mechanics of Web design made easy for visual learners An effective Web site combines good graphic design principles with a functional user interface. This colorful, step-by-step guide shows visual learners how to plan, develop, and publish a site, all with easy-to-follow lessons. Each task is illustrated with screen shots accompanied by numbered steps. You'll learn all the tools and techniques for creating great-looking Web sites that users will love. * Good Web design incorporates basic graphic design principles as well as the techniques required to make a site easy to navigate and user-friendly * Those who learn best when someone shows them how will quickly get up to speed with the full-color screen shots and step-by-step illustrations in this visual guide * Covers planning a site, creating eye-popping content with popular Adobe tools, building in functionality with HTML and CSS, testing the site, taking it live, and keeping it up to date * Companion Web site features code and design examples for experimentation If you find learning easier when someone shows you how to do something, you'll quickly learn to build Web sites with Teach Yourself VISUALLY Web Design.

Leseprobe

Teach Yourself VISUALLY™ Web Design

Table of Contents

Chapter 1: The Tools of Web Design and Planning Your Site

A Brief History of the Web

Understanding Browsers

Visual Design Tools

Code-based Tools

Graphics Programs

Understanding the Importance of Planning Your Site

Understanding Your Audience

Gather Your Materials

Plan Your Navigation Structure

Plan Your File Structure

Chapter 2: Getting Started with HTML

Introduction to HTML

Create Your First Web Page

Save Your Web Page

Preview a Page in a Browser

Declare Your Document Type

Add Headings

Add Paragraphs

Apply Logical Formatting

Understanding URLs and File Paths

Link to Other Pages in Your Site

Link to Pages on the Web

Link within a Page

Link to an E-mail Address

Link to Other Document Types

Show Tool Tips for Links

Chapter 3: Creating Images

Understanding Image Formats

Legally Acquiring Stock Images

Understanding Image Optimization

Download a Stock Image from the Web

Get to Know the Photoshop Interface

Get to Know the Photoshop Elements Interface

Use Photoshop to Fix Colors

Crop and Resize an Image in Photoshop

Save an Image for the Web in Photoshop

Open an Image for Editing in Photoshop Elements

Use Photoshop Elements to Fix Colors

Rotate an Image in Photoshop Elements

Crop an Image in Photoshop Elements

Resize an Image in Photoshop Elements

Save an Image for the Web in Photoshop Elements

Get to Know the Fireworks Interface

Create a Button in Fireworks

Save an Image for the Web in Fireworks

Create a Logo in Illustrator

Save an Illustrator Image for the Web

Add an Image to Your Web Page

Make Your Images Accessible

Use Images as Links

Chapter 4: Formatting Your Pages

Introduction to CSS

Create an Embedded Style Sheet

Understanding Units of Measurement

Set the Font and Text Size on Your Page

Understanding Color on the Web

Determine a Color Scheme Using Kuler

Set Text Color

Set a Background Color

Add a Background Image

Control Background Image Tiling

Position Background Images

Apply Additional Text Formatting

Indent and Align Text

Apply Spacing with Padding

Control Whitespace with Margins

Specify Widths

Add Borders

Chapter 5: Advanced CSS

Style Multiple Elements

Format Text with Spans

Group Elements with Divs

Apply Styles with Classes

Apply Styles with IDs

Use Contextual Selectors

Use Pseudo-Elements

Use Pseudo-Classes

Create an External Style Sheet

Link a Style Sheet to a Page

Use the Cascade

Chapter 6: Laying Out Pages

Set Up Your Page for CSS Layouts

Float Elements

Use Margins and Padding to Fix Float Problems

Work with Overflow

Chapter 7: Adding Tables and Lists

Add Data Tables

Format Tables with CSS

Create Complex Tables

Add a Header Row

Add Table Sections

Add an Unordered List

Add an Ordered List

Style Lists

Chapter 8: Creating a Page Visually in Dreamweaver

Introduction to Dreamweaver’s Interface

Define a Site in Dreamweaver

Create a New Document

Replace the Logo Placeholder

Replace the Main Content

Replace the Content in the Sidebar and Footer

Add Navigation

Add Images

Insert a Photoshop Image

Edit a Photoshop Image in Dreamweaver

Modify CSS

Add New Styles

Preview the Page Using Live View

Preview the Page in a Browser

Preview the Page in Other Browsers Using BrowserLab

Chapter 9: Adding Interactivity and Multimedia

Introduction to JavaScript and Ajax

Embed JavaScript in HTML

Write a Function

Change the Visibility of an Object

Create a Menu Using Spry

Create a Calendar Control with YUI

Create an Image Gallery with jQuery

Create Animation Using Flash Professional

Publish a Flash Movie

Add a Flash Movie to Your Page in Dreamweaver

Convert a Video to Flash Video

Add Flash Video Using Flash Professional

Add Video with HTML5

Chapter 10: Making Sites Accessible

Understanding Web Standards

Understanding Web Accessibility

Add Captions and Summaries to Tables

Create Accessible Table Headings

Create Accessible Navigation

Chapter 11: Adding Forms to Your Site

Create a Form

Add a Text Field

Add a Label

Add Check Boxes

Add Radio Buttons

Create a Drop-Down List

Insert a Text Area

Add a Button to Your Form

Group Related Form Elements

Chapter 12: Creating Dynamic Pages

Understanding Dynamic Web Applications

Download and Install WAMP on Windows

Download and Install MAMP on a Mac

Create a Basic PHP Page

Save and Test a PHP Page

Process Form Data

Send E-mail with PHP

Include External Files

Create Your Own PHP Function

Chapter 13: Adding Information from a Database

Understanding Relational Databases

Create a Database

Create a Table

Populate the Table with Data

Connect PHP to the Database

Display the Contents of a Table on a Web Page

Search the Database

Insert New Data into a Table with PHP

Chapter 14: Publishing Your Site and Getting Noticed

Find a Web Host

Buy a Domain Name

Publish Your Web Site Using FTP

Set Up Remote Server Information in Dreamweaver

Upload Your Files Using Dreamweaver

Understanding Search Engine Optimization

Use Meta Tags

Use Google Webmaster Tools

Create a Sitemap

Prevent Pages from Being Listed on Search Engines

Appendix

Teach Yourself VISUALLY™ Web Design

Rob Huddleston

Teach Yourself VISUALLY™ Web Design

Published by Wiley Publishing, Inc.10475 Crosspoint BoulevardIndianapolis, IN 46256

www.wiley.com

Published simultaneously in Canada

Copyright © 2011 by Wiley Publishing, Inc., Indianapolis, Indiana

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 [phone]. 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 [phone], or online at www.wiley.com/go/permissions.

Library of Congress Control Number: 2010935578

ISBN: 978-0-470-88101-9

Manufactured in the United States of America

10 9 8 7 6 5 4 3 2 1

Trademark Acknowledgments

Wiley, the Wiley Publishing logo, Visual, the Visual logo, Teach Yourself VISUALLY, Read Less - Learn More and related trade dress are trademarks or registered trademarks of John Wiley & Sons, Inc. and/or its affiliates. All other trademarks are the property of their 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 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 PURPOSES OF ILLUSTRATING THE CONCEPTS AND TECHNIQUES DESCRIBED IN THIS BOOK, THE AUTHOR HAS CREATED VARIOUS NAMES, COMPANY NAMES, MAILING, E-MAIL AND INTERNET ADDRESSES, PHONE AND FAX NUMBERS AND SIMILAR INFORMATION, ALL OF WHICH ARE FICTITIOUS. ANY RESEMBLANCE OF THESE FICTITIOUS NAMES, ADDRESSES, PHONE AND FAX NUMBERS AND SIMILAR INFORMATION TO ANY ACTUAL PERSON, COMPANY AND/OR ORGANIZATION IS UNINTENTIONAL AND PURELY COINCIDENTAL.

Contact Us

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 [phone].

For technical support please visit www.wiley.com/techsupport.

Sales | Contact Wiley at [phone] or fax [phone].

Credits

Acquisitions Editor

Aaron Black

Sr. Project Editor

Sarah Hellert

Technical Editor

Dennis R. Cohen

Copy Editor

Scott Tullis

Editorial Director

Robyn Siesky

Editorial Manager

Rosemarie Graham

Business Manager

Amy Knies

Sr. Marketing Manager

Sandy Smith

Vice President and Executive Group Publisher

Richard Swadley

Vice President and Executive Publisher

Barry Pruett

Project Coordinator

Patrick Redmond

Graphics and Production Specialists

Carrie CesaviceAndrea HornbergerJennifer Mayberry

Quality Control Technician

Rebecca Denoncour

Proofreader

Jacqueline Brownstein

Indexer

Valerie Haynes Perry

Media Development Project Manager

Laura Moss

Media Development Assistant Project Manager

Jenny Swisher

Media Development Associate Producer

Shawn Patrick

Artists

Ana CarrilloRonda David-BurroughsCheryl GrubbsMark Pinto Jill A. Proll

About the Author

Rob Huddleston has been developing Web pages and applications since 1994, and has been an instructor since 1999, teaching Web and graphic design to thousands of students. His clients have included the United States Bureau of Land Management, the United States Patent and Trademark Office, the States of California and Nevada and many other federal, city, and county agencies; the United States Army and Air Force; Fortune 500 companies such as AT&T, Bank of America, Wells Fargo, Safeway, and Coca-Cola; software companies including Adobe, Oracle, Intuit, and Autodesk; the University of California, San Francisco State University, and the University of Southern California; and hundreds of small businesses and nonprofit agencies, both in the United States and abroad. Rob is an Adjunct Professor in the Interactive Media program at the Art Institute of California, Sacramento. He is an Adobe Certified Instructor, Certified Expert, and Certified Developer, serves as an Adobe User Group Manager, and has been named as an Adobe Community Professional for his volunteer work answering user questions in online forums. He also helps users as an expert moderator on Adobe’s Community Help system. Rob lives in Northern California with his wife and two children.

Rob is the author of XML: Your visual blueprint for building expert Web sites with XML, CSS, XHTML, and XSLT; HTML, XHTML, and CSS: Your visual blueprint for designing effective Web pages; Master VISUALLY: Dreamweaver CS4 and Flash CS4 Professional; ActionScript: Your visual blueprint for creating interactive projects in Flash CS4 Professional; and the Flash Catalyst CS5 Bible. You can visit Rob’s blog at www.robhuddleston.com, or follow him on Twitter at twitter.com/robhuddles.

Author’s Acknowledgments

Writing is mostly a solitary pursuit, but I wouldn’t be able to continue doing it without the unwavering love and support from my wife and best friend, Kelley, and our two beautiful children, Jessica and Xander. I hope you kids enjoy seeing your pictures in the book.

The people at Wiley continue to be a wonderful group with whom to work. Acquisitions editor Aaron Black, who first approached me about this project, provided invaluable insight in getting started and then through some of the project’s more trying moments. I was pleased and thankful to work again with project editor Sarah Hellert. Many thanks to tech editor Dennis Cohen and copy editor Scott Tullis for adding their expertise.

Bill Mead introduced me to an exciting new opportunity teaching at the Art Institute, and helped with this book by pointing me to the example used in the section on jQuery. Ted Fitzpatrick and Nolan Erck both helped explain some of the intricacies of the Mac to me. Thank you to each of you for your help and your friendship.

How to Use This Book

Who This Book Is For

This book is for the reader who has never used this particular technology or software application. It is also for readers who want to expand their knowledge.

The Conventions in This Book

Steps

This book uses a step-by-step format to guide you easily through each task. Numbered steps are actions you must do; bulleted steps clarify a point, step, or optional feature; and indented steps give you the result.

Notes

Notes give additional information — special conditions that may occur during an operation, a situation that you want to avoid, or a cross reference to a related area of the book.

Icons and Buttons

Icons and buttons show you exactly what you need to click to perform a step.

Tips

Tips offer additional information, including warnings and shortcuts.

Bold

Bold type shows command names, options, and text or numbers you must type.

Italics

Italic type introduces and defines a new term.

Chapter 1: The Tools of Web Design and Planning Your Site

Before you can dive into creating Web sites, you need to understand the tools that you need. This chapter shows you the software you need to create Web pages, add images to them, and preview the finished products. However, software alone cannot make a good Web site. You need to carefully plan your site’s content, design and overall structure in order to create a site. Therefore, this chapter also details those steps you should undertake to plan your site before you begin building it.

A Brief History of the Web

Understanding Browsers

Visual Design Tools

Code-based Tools

Graphics Programs

Understanding the Importance of Planning Your Site

Understanding Your Audience

Gather Your Materials

Plan Your Navigation Structure

Plan Your File Structure

A Brief History of the Web

Only twenty years after its invention, the World Wide Web has become commonplace and has fundamentally changed the way we work, live, and interact with others. However, the medium is in many ways still in its infancy, and as you progress in learning about designing Web pages, you will encounter many significant limitations primarily because the Web was not created as a place to sell books or keep in touch with friends from high school. Understanding why the Web was invented and what its original goals were will help you better understand these issues.

The Invention of the Web

The Web was invented in 1990 by Tim Berners-Lee. Berners-Lee was a physicist at CERN, the European laboratory for particle physics, located in Geneva, Switzerland. Berners-Lee noted that visiting scientists, while working on experiments that could have come straight from Star Trek, had to exchange most of their information with one another on paper because their computer systems were incompatible. He therefore created the Web as a way to allow these scientists to share their findings, regardless of what kind of computer system they used.