Springer-Verlag Berlin Heidelberg GmbH

Transcription

1 Creative Web Design

2 Springer-Verlag Berlin Heidelberg GmbH

3 Michael Baumgardt CRERTIVE,.- TlP\ ""0 TRI(KS STEP OY SJ[P WEB DESIGN With CD-ROM RGB: HEX : CMYK: Springer

4 Michael Baumgardt Cataloging - in - Publication Data applied for Die Deutsche Bibliothek - CIP Einheitsaufnahme Creative Web Design: tips and tricks step by step / Michael Baumgardt. - Berlin; Heidelberg; New York; Barcelona; Budapest; Hong Kong; London; Milan; Paris; Santa Clara; Singapore; Tokyo: Springer. Dt. Ausg. u.d. T.: Web Design kreativ! Buch CD ROM ISBN DOI / ISBN (ebook) This work consists of a printed book and a CD ROM packaged with the book, and is subiect to copyright. AII rights are reserved, whether the whole or part of the material is concerned, specifically the rights of translation, reprinting, reuse of illustrations, recita tion, broadcasting, reproduction on microfilms or in any other way, and storage in data banks. Duplication of this publication or parts thereof is permitted only under the provisions of the German Copyright Law of September 9, 1965, in its current version, and permission for use must always be obtained from Springer Verlag. Violations are liable for prosecution under the German Copyright Law. Springer Veriag or the authors make no warranty for representation, either express or implied with respect to this CD ROM or book, including their quality, merchantibility, or fitness for a particular purpose. In no event will Springer or the authors be liable for direct, indirect, special, incidental, or ronsequential damages arising out of the use or inability to use the CD ROM or book, even if Springer Verlag or the authors have been advised of the possibility of such damages. Springer-Verlag Berlin Heidelberg 1998 The use of general descriptive names, registered names, trademarks, etc. in this publica tion does not imply, even in the absence of a specific statement, that such names are exempt from the relevant protective laws and regulations and therefore free for general use. Layout, design, typesetting: Michael Baumgardt Cover illustration: Michael Baumgardt Cover design: Kunkel.. Lopka, Heidelberg SPIN Printed on acid free paper 33/

5 For Steve Zierer and Vera Waldmann You both define the true meaning of friendship. Thanks for being in my life.

6

7 J:: U Ow C OJ..c: UJ => Q. '" o -0 J:: Q. The Web ist the best thing that could have happened to designers: it creates a huge demand for design and if you have been working in the desktop publishing or multimedia field, you can easily make the leap to the Web. But Web design is more than writing HTML code and designing nice images, it is the design of communication and information, and in this book you will often see the term Information Architecture. What this means and how some of the leading Web designers approach this challenge can be read in the interviews and seen in the many examples that I gathered for this book. These interviews offer insights into the design trends on the Internet, and I hope you have as much fun reading them as I had writing them. Because all these people I interviewed have one thing in common: they are very enthusiastic about the possibilities that arise through the World Wide Web and they have a deep passion for global communication - something that I share with them. The Information Highway brings us closer together, no question about it. When we are able to visit the home page of a buddhist monk in Kyushu, Japan, or read the online diary of a 21 year old boy, who lives with his grandfather on a farm in Arizona, we will be much more in touch with the global community than by zapping through the news channels. We can't foresee the effect the Web will have on society, but one thing is clear: the architect of the future will be an information architect. EditDriill?

8 CHAPTERS 1) CONCEPT 13 Getting an Internet Service Provider 14 Basic Information from Your ISP 15 The Basics About HTML Code 15 Browsers and the limitations of HTML 16 Web Design Programs 17 What You Should Know to Come Up with a Concept 19 Selling Up the Folders of a Mirror Site 20 Filenames 20 Checking Your Web Site in a Browser 20 The World Wide Web Consortium [W CI 3 25 LAYOUT 25 NetObjects Fusion 27 Adobe PageMill 28 Some Tips on Creating Your Web Layout 31 Basic HTML 32 Defining Colors in HTML 33 Positioning with the SPACER Tag or Invisible GIFs 34 Adobe Acrobat 34 Positioning with Frames 34 The Layout Solution 34 Changing the Font 35 Hypertext links 35 TheBUNKTag 37 Hori20ntal Rule 37 How to Work with Paths 45 IMAGES 45 The Difference Between JPEG and GIF 47 PNG: The Cool New Graphic Format 48 Raster and Vector Images 48 The Resolution 48 Color Depth 49 Color Table 50 Pantone Internet Color System Guide 50 Optimizing Your Images 50 Working with the WWWCoior Palette 51 Placing an Image 52 Step-by-Step: Preparing a GIF Image in Photos hop 53 Equilibrium DeBabelizer 54 Step-by-Step: USing Transparency in GIF Images

9 54 Step-by-Step; The 50% Transparency Trick 55 Imagemaps 55 MetaCreation Painter 56 How to Set Up Client Side Image Maps 57 Step-by-Step: How to Create Background Tiles i n Photoshop 59 How to Set up Server Side Image Maps 59 Backgrou nd Tiles 59 Special Effects with the Background 60 The Problem of the Browse r Offset 60 Preloading Images 65 TABLES 66 The Table Tags and Attributes 68 Background Color and Images 68 Imagetable 72 The Imagetable Pitfall 72 The NOBR Alternative 83 FRAMES 83 Frame Document 84 Defining Frame Sizes B4 The Three Ways to Define Frame Sizes B4 Defining the Margins of a Frame 8S Scrollbars in a Frame BS Disabling Resizing BS Invisible Frame Borders 8S Common Mistakes 86 Nesting Frames 86 Naming and Targeting Frames 87 Special Target Names B9 Controlling Two Frames with One Anchor 93 GI F ANIMATION 93 The GIF 89a History 93 What Programs Can You Use? 94 How to Use GIFBuilder for Macintosh Optimizing the Animation 9S 9S 96 Looping 96 Creating Animations with Director Transparency and Disposal Methods 96 A Simple Animation Using the META Tag Step-by-Step; 9B How the Rotating KATV Logo Was Created

10 109 CASCADING STYLE SHEETS 110 Combining Style Sheets 110 A Condensed Guide to the CSSt Syntax 112 Step-by-Step: Installing CSS with BBEdit 114 Backward Compatibility: Blending Two Worlds 117 SHOCKWAVE 117 How to Prepare a Streaming Shockwave Movie 118 Using Audio in Your Shockwave Movie 120 Embedding a Shockwave Application in Your HTML Page 125 JAVASCRIPT 125 lava and lavascript 125 How to Implement lava and lavascript 126 Interactive Buttons and Pop-Up Menus 127 Rotating Banner 128 Scrolling Status Bar 129 Opening a New Window 130 Loading Several Images with One Mouse Click 130 Changing the Color of a Page 131 Step-by-Step: Creating Buttons with Eye Candy 1)) MUSIC & AUDIO 133 Installing a Sound File 134 Some Tips on How to Record Audio 1.35 Optimizing Audio for the Internet 135 Audio Formats for the Web: MPEG Layer Using RealAudio 138 Audio Formats for the Web: RealAudio 139 Steinberg Cubase VST 140 Bias Peak 141 Step-by-Step: Optimizing CD Tracks for the Web 151 UPLOADING & REGISTERING 151 How to Be Top in the Search list 152 USing Many Images on Your Web Site 154 Use a Strong Title 154 The In tro Page 154 Submit-It 154 Updating Your Web Page 155 Step-by-Step: Uploading Your Pages to the Server via Fetch 156 Uploading via Netscape 156 Excite 156 Infoseek Cunlnts

11 156 lycos 157 WebCrawler 157 Yahoo 157 Famous Last Words I NTERVIEWS / SITES 21 Rocket Science, Robert Gagnon 38 Pixelpark. Rikus Hillmann 58 Persistence of the Spirit 62 Oaklawn 70 KATV 74 Studio Archetype, Clement Mok and Mark Crumpacker 90 Aristotle. Christopher Stashuk and Elton Pruitt 97 B Ava lanche. Peter Seidler 122 Blender. Greg Knoll 136 Warner Music latin 144 David Bowie Si te. N2K, Inc. Marlene Stoffers and Ben Clemens 153 FAO 158 Michael Simross, In ternet-artist 161 Thanks and Acknowledgement 162 URls 164 Index 168 About the Author 170 The CD ROM CDnlelts

12