CONTENTS

Laura Lemay's Web Workshop

GRAPHICS & WEB PAGE DESIGN

by Jon M. Duff and James L. Mohler

C  O  N  T  E  N  T  S

Introduction

Chapter 1   Making Effective Browser-Independent Graphics

Chapter 2   Designing an Effective Web Site

Chapter 3   Creating Cool Graphics for the Web

Chapter 4   Making Effective Web Graphics

Chapter 5   Using Multimedia and Special Effects on the Web

Chapter 6   Presenting Effective Web Graphics

Chapter 7   Designing Graphical Pages Anyone Can Download

Chapter 8   Creating a Map of Your Web Site

Chapter 9   Providing Visual Cues to Web Navigation Through Page Design

Chapter 10   Understanding Form and Substance: The Dilemma of Web Style

Chapter 11   How to Avoid the Ten Most Common Web Mistakes

Chapter 12   Using Text in Design

Chapter 13   Designing Buttons That Work

Chapter 14   Making Image Maps and HTML Frames

Chapter 15   Designing Backgrounds That Make Sense

Chapter 16   Utilizing Inline Graphics to Your Advantage

Chapter 17   A Portfolio of Graphics from the Web

Chapter 18   Delivering Animations at Your Web Site

Chapter 19   Understanding Advanced Graphic File Types

Chapter 20   Converting Graphics for Use on the Web

Appendix A   Directory of Grphic Resources on the Web

Appendix B   Textures, Backgrounds, and Buttons

Credits

Copyright © 1996 by Sams.net Publishing

FIRST EDITION

All rights reserved. No part of this book shall be reproduced, stored in a retrieval system, or transmitted by any means, electronic, mechanical, photocopying, recording, or otherwise, without written permission from the publisher. No patent liability is assumed with respect to the use of the information contained herein. Although every precaution has been taken in the preparation of this book, the publisher and author assume no responsibility for errors or omissions. Neither is any liability assumed for damages resulting from the use of the information contained herein. For information, address Sams.net Publishing, 201 W. 103rd St., Indianapolis, IN 46290.

International Standard Book Number: 1-57521-125-4

HTML conversion by :
    M/s. LeafWriters (India) Pvt. Ltd.
    Website : http://leaf.stpn.soft.net
    e-mail : leafwriters@leaf.stpn.soft.net

President, Sams Publishing: Richard K. Swadley
Publishing Team Leader: Dean Miller
Managing Editor: Cindy Morrow
Director of Marketing: John Pierce
Assistant Marketing Managers: Kristina Perry, Rachel Wolfe

Acquisitions Editor Cari Skaggs Development Editor Brian-Kent Proffitt
Software Development Specialist Cari Skaggs Production Editors Colleen Williams, Kitty Wilson
IndexersTim Griffin, John Hulse Technical Reviewer Sue Charlesworth
Editorial Coordinator Bill Whitmer Technical Edit Coordinator Lynette Quinn
Editorial Assistants Carol Ackerman, Andi Richter, Rhonda Tinch-Mize Cover Designer Alyssa Yesh
Book Designer Alyssa YeshCopy Writer Peter Fuller
Production Team Supervisor Brad Chinn
ProductionMichael Dietsch, Michael Henry, Louisa Klucznik, Paula Lowell, Ian Smith, Laura A. Smith
There are many people to thank in a project this large. The editors at Sams.net-Cari Skaggs and Brian Proffitt-were super supportive of our efforts. Can't wait to work for them again! Thanks also goes to Purdue University and its School of Technology for encouraging teaching technical graphics as it's practiced this month (constant curriculum change is a necessity) in industry and for providing the resources to get the job done. Before acknowledging individual contributors, we must thank our wives and families for putting up with odd hours and frazzled nerves for the duration of this project.

Special thanks go to

About the Authors

Jon M. Duff

Jon M. Duff is Professor of Technical Graphics at Purdue University. He is the author of over a dozen books on various graphics topics and serves as a consultant to government and industry clients such as Westinghouse and the United States Navy. He operates the WestHighland Press, where he develops a full range of traditional and electronic publications. Jon can be reached at jmduff@tech.purdue.edu.

James L. Mohler

James L. Mohler is Assistant Professor of Technical Graphics at Purdue University. He has produced interactive titles for national and international publishers and provides technical training and media services to industry through Sunrise Productions. James can be reached at jlmohler@tech.purdue.edu.

Technical Graphics at Purdue University prepares graphics professionals for electronic publication, illustration, modeling and animation, and engineering documentation specialties. You can visit the department at http://www.tech.purdue.edu/tg/main.html.

Tell Us What You Think!

As a reader, you are the most important critic and commentator of our books. We value your opinion and want to know what we're doing right, what we could do better, what areas you'd like to see us publish in, and any other words of wisdom you're willing to pass our way. You can help us make strong books that meet your needs and give you the computer guidance you require.

Do you have access to CompuServe or the World Wide Web? Then check out our CompuServe forum by typing GO SAMS at any prompt. If you prefer the World Wide Web, check out our site at http://www.mcp.com.

Note
If you have a technical question about this book, call the technical support line at 800-571-5840, ext. 3668.

As the team leader of the group that created this book, I welcome your comments. You can fax, e-mail, or write me directly to let me know what you did or didn't like about this book-as well as what we can do to make our books stronger. Here's the information:

Fax:317.581-4669
E-mail:opsys_msr@sams.mcp.com
Mail:Dean Miller
Comments Department
Sams Publishing
201 W, 103rd Street
Indianapolis, IN46290

Introduction

If you're the kind of person I think you are, you've been hanging ten toes off the edge of your Web surfboard for some time now. You've been dazzled by the diversity of information-intellectual and practical, visual and auditory, technical and entertaining-all available in this virtual information space called the World Wide Web.

Or, you may be new to the Web and all its possibilities. After digging deep into funds that could have (and probably should have) been used for more mundane purposes like food, shelter, or retirement, you matched computer, software, and a service provider and now have access to the largest combination of flea market and junk mail consortium ever assembled.

At some point you become a discriminating Web browser. You know what you like, and you vote with your mouse. You start bookmark files of Web site uniform resource locators (URLs) that are so interesting, so informative, and so visually stimulating that you return to them regularly. This is sort of like me rereading my favorite John D. MacDonald novel or my wife popping Pretty Woman in the VCR for the fiftieth time.

But as you spend more time on the Web, you also learn what you don't like, what irritates you, and what causes you to decide in ten seconds…whoa, I'm outta here!

As you consider the topics covered in this book, you may find yourself in a position where you know Hypertext Markup Language (HTML), you understand your browser, you mentally have a good picture of the World Wide Web landscape, but the graphics you see both intrigue and confuse you. If so, this book is for you.

Who Should Read This Book

The Web without graphics is like pretzels without salt or Madonna without controversy. It's not that you haven't been exposed to graphics over the years; it has been most intense since your telephone bill's Internet charges began to approach your mortgage payment. Unless you are a designer by training or study, you are much like a person who has been exposed to food for most of your life but still know next to nothing about food, biochemistry, or nutrition. Your idea of nutrition may be Spam on Wonderspun with Hawaiian Punch. A power lunch is a Snickers bar and a Diet Coke. Just being exposed to food doesn't give you food knowledge. Just being exposed to graphics doesn't give you graphics knowledge.

This book takes your love of Spam and shows you how to fix lean, healthy, appealing graphical meals that you'll be proud to show your friends. This book is directed to

  • Anyone who has an interest in how graphic images are used in electronic publications. Much of what is discussed in this book is applicable to multimedia, portable documents, and traditional page and publication layout and design.
  • Casual authors of Web materials. You want to try your hand at making your own Web site because, gee, the technology is just so darned interesting.
  • Serious Webmasters, mongers, meisters, and wireheads who know they're visually challenged, they but also realize that great graphics are an integral part of great Web pages.
  • Managers who have to review and evaluate the effectiveness of Web graphics.
  • Artists and designers who create resources for Web publishing. Although you probably don't need to be a Webmaster yourself, understanding the peculiarities of Web graphics will make you a more valuable member of the Web publishing team.

What This Book Contains

This book isn't a tutorial. Instead, it is a resource of visual examples you can use for inspiration. It's written so that you can jump into whichever topics are of immediate interest, or spend a little more time in dialogue with the authors.

You'll find many of the topics presented as tasks-instructions you can follow to gain a greater understanding of the role graphics play in effective Web pages.

  • In Part I, "Fast Track to Web Site Design," you get a quick overview of the issues that will concern you when making Web graphics. You'll learn a technique for analyzing Web function, the relationship of graphic images and HTML code, and how good design enhances communication. You'll be bombarded with examples and techniques. Finally, you'll be able to review the examples in Chapter 6, "Presenting Effective Web Graphics," and learn why they work.
  • Part II, "Survival Skills for Web Design," presents much of the technical information found in this book. This section shows techniques for planning the structure of your Web site and shows how to enhance intrasite navigation.
  • Survival skills are presented in Part III, "Survival Guides for Web Graphics." The chapters in this section should answer your "how did they do that?" questions. If you ever wanted to make your own graphics, this is your ticket. If you find yourself having to hire artists to work on a team, these chapters give you portfolio-evaluation ammunition.
  • Part IV, "Additional Graphic Topics," presents the high gloss of Web graphics. You'll want animation-both 2D and 3D, movies, and high resolution images. You know virtual graphic worlds are just over the horizon. And you know that there is no way you can create all these yourself, so you need to know what resources are available.
  • Tools to assist you in creating Web pages and graphics on the enclosed CD-ROM. These tools include software utilities that you can use right away to make your job easier. Also included are files of graphic elements that can be used directly or as examples for your own inspirations.

What You Need to Make Effective Graphics

Software and hardware people would like you to think that you need to constantly upgrade to the latest and greatest. Of course, their survival is based on convincing you that you can't live without upgrading to version 2.1.3 or to that extra 50MHz or 16MB. Who wants to be left behind?

Here's the most important point that will be made in this book:

All the really important and significant activities concerning a Web site occur off the computer. By this I mean that without the planning, analysis, and evaluation; without effective graphics and intelligent use of typography; and without pointed and cogent writing, you're simply playing around.

What equipment do you need to make effective Web graphics? Not much!

I guarantee that exciting, effective, award-winning Web pages can be created on a 386/25 computer with Word 3 and Photoshop 2. You can spend tens of thousands of dollars and still produce ugly pages that don't communicate well and leave your users lost in a link with no idea where they are or how they can get back. There is no substitute for talent. A candidate to become an effective Web designer will probably have most of the following traits:

  • First, you need an interest in graphics. That isn't really hard. You drew, painted, and scribbled in kindergarten, and here you are, years later, wanting to make graphics again.
  • You need to develop a good eye. You need to be able to recognize effective colors, good page design, appropriate fonts, and graphic elements with both impact and good communication.
  • If you're going to be making graphics yourself, you must become adept at some raster imaging application. For me, it's Photoshop. For you, it might be Fractal Painter or any of a dozen other programs. Vector graphics will, and are, finding their way into Web sites via PICT (QuickDraw) and WMF plug-ins. Still, raster formats will continue to be the Web's mainstay because they are, for the most part, platform and operating system independent.
  • Most of all, you need to bring flexibility and a keen interest in learning. You'll never know everything about the Web or graphics. All you can hope is to know more today than you did yesterday.

The Changing Landscape of the World Wide Web

As authors, we have made every attempt to provide you with the most current examples from the Web. However, the landscape of the Web changes daily and in the several months between original writing, editing, and production there have been, as you might expect, changes in sites and locations. In Chapter 17, "A Portfolio of Graphics from the Web," you'll find a discussion of the reasons why you might not be able to find a particular site that's referenced within these pages. Consider the examples we've included as a starting point for your own graphical adventures on the World Wide Web.

You are about to enter an exciting and challenging field where change is an integral part of everyday life. This book should serve you well in becoming an effective Web artist and designer or as a better user and consumer of Web graphics. But more than that, its instructions, suggestions, and examples should change the very way that you look at Web publication. If we have done our job well, this book will rest, dog-eared and tattered, beside your computer and not on a book shelf. And now, sit back, relax, enjoy, and get graphical!