Web Publishers Design Guide for Macintosh 2nd Edition 1997 guide for
·Macintosh
2nd Edition
mary jo fahey
CORIOLIS GROUP BOOKS
What's on the CD-ROM
The companion CD-ROM includes artwork elements used in the sample exercises throughout the book, software, plug-ins, Shockwave movies, and completed GIF animations created by professional new-media artists.
~ Art files from artists and Web specialists Frank DeCrescenzo, CurtisEberhardt,Kleber
Santos, Peju Alawusa,Jane Greenbaum,AlexShamson, Greg Hess, and John Scott. (Note: For adetailed inventory of files, see the readme fileon the CD-ROM.)
~ Journalist Peter Chowka's interview with Nobel prizewinner Linus Pauling,
styled with Microsoft's cascading style sheets (as defined by the World Wide Web Consortium).
~ Scans of nineteenth century photographs of Coney Island Amusement Park for
use as atexture map when creating a Coney Island VRML attraction.
~ Shockwave movies and GIF an imations from artists Larry Rosenthal and
Curtis Eberhardt.
~ Software applications , browsers , and plug-i ns for creating and viewing
Web artwork.
See the readme fi les in each folder for acknowledgments, d escriptions, copyrigh ts, insrallation insnuccions, limita tions, and other imponam info rmation.
Requirements
Software:
Macintosh OS, version 7.1 or later Browser-Netscape Navigator,
''crsion 3 .0 or la ter; or Microsoft Internet Explorer, version 3.0 or later Photoshop, r;ersi011 3.0 or later Vir/us Wali~ Through Pro, version 2.6 or later
Ha rdware: 68K Macintosh or Power Macintosh
web publisher's
design guide
we b publisher's
design guide
E~~- for Macintosh
2nd Edition
Mary Jo Fahey
~ CORIOLIS GROUP BOOKS
Publisher: Managing Editor: Production Manager: Production:
Keith Weiskamp Paula Kmetz Nomi Schalit Nicole Colon
Web Publi sher's Design Guide For Macintosh, 2nd Edition Copyright © 1997 by T he Coriolis Group, Inc.
All rights reserved. This book may not be duplicated in a ny way witho ut the expressed written consent of the publishe r, except in the form of brief excerpts or quotations fo r the purposes o f review. T he information contai ned herein is for the personal use of the reader and may not be incorporated in any commercial programs, other books, databases, or any kind of software wi thout written consent of the publisher. M aki ng copies of this book or any portion fo r any purpose other than your ow n is a violati on of U ni ted States copyright laws.
Li mits o f Liability and Disclaimer of WaiTanty
T he author and publishe r of th is book have used their best efforts in preparing the book and the programs contained in it. T hese e fforts include the development, research, and testing of the theories a nd programs to determine their effectiveness. T he author and publisher make no warranty of any kind, expressed or implied, with regard to these programs or the documentation contained in this book.
The author and publ ishe r shall not be liable in the event of inc ide nta l or consequenti al damages in connection with, or ari sing out of, the furni shing, performance, or use of the progra ms, assoc ia ted instructions, and/or claims of productivity gains.
Trademarks
Trademarked names appear throughou t this book. Rather than list the names and ent ities that own the trademarks or insert a trademark sy mbol with each mention of the trademarked name, the publisher states that it is using the names fo r editorial pu rposes only and to the benefit of the trademark owner, with no intention of infringing upon that trademark.
The Corio)is Group, I nc. An Internati onal Thomson Publishing Company 14455 N. Hayden Road , Suite 220 Scottsdale, Arizona 85260 602/483-0 192 FAX 602/483-0 193 http ://www.corio lis.com
Printed in the United States of America 1098765432 1
Preface
Author: Mary Jo Fahey
This is an exciting time for digital artists. Many new tools are available for creating digital artwork, and several are related to creating Web pages: HTML style sheets that ma ke text formatting easier; NetObjects Fusion, a hot new Web page layout tool for artists who don't like HTML tags; client-side image maps, a superior way to create image maps that frees you from image map scri pts on the server; frames; forms; VRML, the language that describes 3D space on the Web; shortcuts for creating art with Fractal Design Painter; GIF animation; background sound for Web pages; a nd streaming video. Even as thi s second edition of Web Publisher's Design Guide For Macintosh goes to press, numerous new trends and developments are cominuing to e merge. Because the new trends are so numerous, Chapter l is now called Web Watching And Planning. Included in that chapter is information about resources that enable digital artists to follow these changes as they occur.
Thj s second edition is mo re interactive than the first. Many of the artists who have contributed samples have also generous ly provided art files , which can be found on the companion CD-ROM.
l hope you like the second edition of Web Publisher's Design Guide. Send me an email message and let me know how you like the book!
Ma ry Jo Fahey
mj fahey@ interport.net
http://www.echonyc.com/-rut
Preface ) v.
Contents
Chapter 1
Web Watching And Planning 1
Web watching: Internet magazines (online and print) and user group SIGs 3
Web watching: Windows 95 and Webtv 4 Options for running Windows 95 software on your
Macintosh 5 New trend to watc h: CO-ROMs that augment a print publi-
cation or a Web site 7 The Net magaz ine 's director of CD-ROM developme nt,
Tom Hale, shares tips o n c reating a hybrid CD-ROM 8 New trend to watch: offline browser software th at auto-
mati cally down loads Web content 9 New trend to watch: Web site analysis software I0 The Reuters Web sites 1I David Reinfurt's tips on planning a Web site 16 Wayfinding principles in Web site desig n 22
Chapter 2
Navigation 27
The Mobius Ga llery 29 Principles of Web site navigation 33 Information design and Web site " map making" 4 1 Create a table with HTML to ho ld navigation buttons and
tex t links 42 Internet cafe owner John Scott shares tips on creating
frames 54
Chapter 3
NetObjects Fusion 69
A new Web page layout tool for designe rs 7 1
I Contents vii.
viii. , Contents
Chapter4
Style Sheets And New HTML TextTags 95
Microsoft style sheets o ffer formatt ing features such as po int size, page margins, and leadi ng 97
Formatting text in co lumns with Ne tscape's ne w <MULTICOL> tag I 19
Controlling font color a nd family with the <FONT> tag (Ne tscape Nav igator or Internet Explorer) 122
Microsoft 's plan to add fo nts to the Web: Free T rueType now and Web page font embedding in the future 124
ChapterS
Online Tools 127
Convert a Pan tone RO B value to a We b page color code with the BBS Color Ed itor 129
Searching the Web on Yahoo ! searc h 137 Extending your Yahoo! search to other search engi nes 139 NctS itc assistance from Netscape 140 Add information abo ut your site to Yahoo! and other search
engines 142 Locating, down loading, and decompressing shareware from
the Web 144
Chapter&
Photography 147
Mark Elbert's notes on Web graphics 149 Pi xe l de pth 155 Saving your image: OfF or JPEO? 158 OIF and the LZW compression patent 16 1 HTML rags and page markup 162 The moveable grid for pictures and text 165 Using HT ML to move page e lements horizontally 166 Using HTML to move page elements vertically 173 Creating a banne r graphic o r splash screen 178 Linking a thumbnail O lF to a n external JP EO 188 Wrapping text around a photo 192
Controlling text wrap with HTML 198 Fading an image into the browser background 202 Create a til ed background 204 C reate a full -bleed photo background with larger ti les 206 Creating a silhouette on an image background 207 Creating a drop shadow in Photoshop 2 13 Jane Greenbaum 's tips on creating a drop shadow in
Painte r 4.0 22 1 Creating a blue duotone with Photoshop 232 Creating a Super Palette with DeBabelizer 236
Chapter 7
Client.Side Image Maps 239
A virtual walki ng tour ofNY 's World Financial Center 24 1
Findi ng coord inates for clickab le regions with Photoshop 244
Creating a clie nt-side image map HTML file 248 Use PhotoGlF with Photoshop to create a transparent
GIF 258
Use Fetch to upload tiles to a provider's server 262
ChapterS
Video 265
Marc Thorner's tips on using VivoActive Producer to c re ate streaming video 267
Ex periment wi th Apple's QuickTime P lug-in, and embed a QT movie on a Web page 269
Use Pre miere's Movie Analys is Tool to learn about da ta rate and compression settings 273
Steven McGrew's tips on caplllring and compress ing 276 Creating a link to a movie on your Web page 278 Pick the best pale tte for an 8-bit color QuickTime movie
using DeBabeli zer 's Super Palette, and create a script to remap your movie 284 File conversion: Converting QuickTime Iiles to AVI 294
I Contents ix.
x. J Comems
File co nvers ion: Converting AVl movies to QuickTi me movies 297
File conversion: Preparing QuickTime Ii les for Windows 293
Chapter9
Sound 299
Web sites with sound 30 I The compact MIDI file format 3 10 Set Netscape's Preferences to download mu sic files 311 Greg Hess' ti ps on adding a backgrou nd sound to a Web
page 3 13 Creating a lin k to sound fil es on your Web page 31 8 Creating sound effects w ith clip media 324 Fi le conversion: AU to AIFF or WAV to AIFF 326 Mixing clip music with sound effec ts in SoundEffects 327 Recording and mi xing sound in SoundEffects 330 File opti mization: Resample and downsamp le sound files for
playback on the Web 333 File conversion: Preparing sound Iiles for other
platforms 336
Chapter 10
GIF Animation And Shockwave 337
Curtis Eberhardt's G IF an imation 339 An imation and interacti ve Web games that use Shockwave,
Java. live video, and QTVR 34 1 Cu rti s Eberhardt 's Li ps on creating GIF animation frames in
Photoshop 349 Curti s Eberhard t's ti ps on assembling a GIF animati on in
GIFBui lcler 355 Curti s Eberhardt's tips on creating an HTML fi le to test your
GrF animation 358 GlF Wi zard at Raspberry Hi ll 360 Create an interacti ve animation w ith Macromedia
Director 364 Creating a Director mov ie for use with the Shoc kwave
Director Internet Player 38 1 Compressing a Director movie with A fterburner 390
Chapter11
VRML World Building 391
YRML on Lhe Internet 393
The NYYRMLSIG 's Coney Island Project 406
Alex Shamson's tips on c reating a VRML mode l in Yirtus WalkThrough Pro 4 18
Open your WRL file in a YRML browser 452
Open a VRM L fi le in a word processor and alter the
Perspecti veCamera
454
Embed a VRML window in a Web page 458
Chapter12
Forms 461
T he Slappers Web site 463 Using NetObjects Fusion to create a client-side image
map 466 Before you design a form for your Web site... 473
Using NctObjcctsFusion to design a fo rm (with a MATLTO for routing data) 476
Index 485
I Contents xi.
Acknowledgments
The Web Publisher's Design Guide, Second Edition was made possible thanks to a large number of people who contributed their time and thei r talents. Special thanks to:
Keilh Weiskamp, president of the Coriolis Group and other members ofThe Coriolis Group, including Paula Kmetz, Project Editor; Nomi Schalit. Book Production Manager; Nicole Colon, Typesetter; and Michael Peel, Production Assistant.
Peju Alawusa, Antonio Antiochia, Antonio Arenas, Elaine Arsenault, Don Barlow, Brian Behlendorf, Gavin Bell, Nick Bodor. Travis at BoxTop, Richard Boyd, Cat11erine Bums. Peggy Burton, Teri Campbell, Mel issa Caruso, Harry Chesley, Peter Chowka, Tom Cipolla, Michael Clemens, Tom Cunniff, Frank DeCrescenzo, Diana DeLucia, Chris Dolan, Matt Dominianni, Juan ita Dugdale, Curt is Eberhardt, Frauke Ebinger, Mark Elbert, Ron Elbert, Kevin Ellis, Michael Erde, Merry Espana, Guillenno Esparm, John Fanar, David Filo, David Fry, Frank Gadegast, Gail Garcia, Steven Garson, Beth Gilbrech, Aaron Giles, Andrew Green, Jane Greenbaum, Lauren Guzak, OJ Hacker. Tom Hale, Maynard Handley, Patrick Hennessey, Stacy Hom, Tim Hunter, Grant Hurlbert, Regi na Joseph, Trevor Kaufman, Rod Kennedy. Priti Khare, Iva Kravitz, Fred Krughoff, Ken Krupka, Shirley Lew, Robert Liu, Robert Lord, Charles Marelli, Steve Margolis, Paul Marino, Greg Marr, Pete r Marx, J imMatlhews, Steve McGrew, Kevin Mitchell, John Nardone, OkeyNestor, Pauline Neuwirth, Dan O' Donnell, Matt O' Donnell, John Olinyk, Patricia Pane, Tony Parisi, Jeff Patterson, Mark Pesce, Dave Pola, Berta Ponzo. David Reinfurt, Alberto Ricci, Alicia Rockmore, Larry Rosenthal, Barry and Jackie Ryan, Kleber Santos, John Scott, Bill Scott, Brandee Amber Selck, Alex Shamson, Ashley Sharp, Alex Sherman, Chuck Shotton, David Smith. Christina Sun, Barbara Tan is. John Tariot, David Theurer, Marc Thorner, Jack Waldemaier, Robert Weideman. Heini Wilhagen, Jerry Yang, and Jon Zilber.
Acknowledgemems 1 xiii.
Cha ·~
Digital media specialist featured in this chapter: Tom Hale is director of CD-ROM de11elopment at Imagine Publishing located in Brisbane, CA. Im agine publishes The Net, PC Gamer. Boot, Ultra Game Players, Next Generation, and Mac Addict magrdnes. cdrom@net-usa.com
Artist featured in this chapter: David Reinf u rt is a multid i sc ip li n m ) ·g r a p h ic designer with a B.A. in Visual Communications from the Uni11ersity of North Carolina. David specializes in interaction design. reinjitrr @ideo.com
Web Watching And Planning
Offl ine We b browsing facilitated by CO-ROMs is one of many new trends for Web designers to watch. This chapte r highlights important resources f01· Web trend watching and includes several examples o f new trends.
The most significant new Web development that wi ll affect planning is the impending browser war between Netscape and Microsoft. Regard less of which company wins the browser war, Macintosh Web artists cannot ignore the software development that is taking place on the Windows platform. Because some software may never be developed for the Macintosh platform, thi s c hapter includes tips on how to run Windows 95 software on Macintos h hardware.
Although it's tempting to begin your Web page creations with graphics, in thi s chapter David Reinfurt makes us aware o f key project eleme nts to have in place before the graphics begin.
Web watching: Internet magazines (online and print) and user group SIGs
Summary: Graphic designers who keep up with changes on the Web will be better equipped to create content fo r their clients.
_____..._.._.............. 'th' J\4 ,,..
<)-. . . . ,
·ll't":a ··~),( h Jlnr·..,.~
--~:...
~
.;:·~
___ _ .."...'._..-.-,=.,.,.-.,.-_....,......._..,....._ l.&'J:" L'l1,_....,_L_,.,_ IUl'IC...f
... ..- . - " 1 " .,...,~.. ~-...---~
A bove: Interactive Week, published by Ziff-Davis, is both a print and online publication (http://www.zdnet. com/ intweek). A bove right: Web Week, published by Mecklermedia, is both a prim and online publication (ht!p:l!www . webweek.com).
......... , ··""' ...., u.....,,,
(
)
r.~
~
A bove: Internet World, published by Mecklermedia, is both a print and online publication (http://www .iworld. com).
J0tal· .,
BEST CREATE the
catalogMsIJ.r,.d
Web Weet's In[~ Search Sarv·ee for Web llusiDess Information
Web Wcet S!oU P·llll l Web Week Wednosdox 1Al1!Wui!!g..&J.ll!1
-~ I SJWwptaon JolorJMtion I Ast Dr Website
E!!JtO[Jt!l Cblymlv I Copqct lbo EdiJon I Onlino Bopder Seryjco
IC~cour Connoctioru; 1
B y investigating new tre nds , gra phic designers can assist th e ir c lie nts in p lanning co nte nt strategy for their Web site. Resources include:
1. Online publications. a. Webweek and Interactive World, published by
Mecklermedia. b. Interactive Week, published by Zi ff-Davis.
2. Print publications.
Magazi nes that provide in-depth product reviews and identify e merging u·ends on the [nternet include:
a. Th e Net , published by Imagine Publishing , includes a
hybrid CD-ROM with Web tools, software de mos, movies, an imation, and otJ1er large files which are difficult to download (http://www. thenet-usa.com). b. WebTeclmiques, a Miller Freeman publication, conta ins an excellent HTML column written by Laura Le may, author of Teach Yourself Web Publishing and HTML in a Week, published by Sams.net. c. PC Novice , by Peed Corporation, contai ns a plain-language introduction to PCs.
3. User group SIGs (special interest groups).
User groups re present a trad ition that has existed for two decades. Ca ll a loca l computer store or univers ity computer center for information about local user group meetings.
Jl. Web Watchi11g And Planning
Web watching: Windows95 andWebtv
Summary: Macintosh artists shor.t!d be aware ojWeb-relared trends 011the Macintosh, PC, and the new Webtv boxes.
Above: ActiveX animation on Spike Lee's sire available rhrough Microsoft's 111/emet Explorer browser window.
Above: New Webtv boxes are now availablef rom Philips Magnavox ond Sony Electronics are pricedfrom $329 to $349. The Webtv lntemet provider service is $ 19.95 per month.for unlimited access.
G raphi c des ig ners cannot assume that Macin tosh Web pages are tbe same as PC Web pages. For exa mpl e, Spike Lee's Web site (hllp://blackame ri cao nline.com/bus/index. html) opens with ActiveX animation that can not be see n on the Maci n tosh platform a t t his time. Rather th an wait fo r Maci ntos h software to be developed, graphic designers shou ld co nsider adding Windows 95 hardware to their studio. (Note: See "Options for 1'1/lllling Wi11dows 95 .wjiware 011 your Macintosh" in this chaptu)
Webtv is an inex pe ns ive portable Web-v iew ing box, which makes Web viewin g and email possible on a TV set. The small , li g htweight boxes are availab le from Philips Magna vox a nd Sony Elec tronics. (Nore: Local access phone nu1nbers are listed 011 rhe Webtv sire ar http://www. webtv.11et.) The $330-$350 unit uses a proprietary browser, and Web viewing is made possible through Webtv Internet provider service. A 33.6 Kbps modem is built in, and an optional cordless keyboard is available at the e lectroni cs re tailers ror $50-60. T he un it also contains a PS/2 keyboard socket, a smartcard slot, and a 96-pi n UO port wh ich Webtv plans to enable for a printer (800-469-3288).
Although the Webtv browser cannot see frames or VRML at this time, updates to the Web browser are expected. Graphic designers who create Web content for the home market should consult the HTML g uidelines on the Webtv site (http://www. webtv.net).
4. j Choprer 1
Options for running Windows95 software on your Macintosh
Summary: Running Windows 95 software on a Macintosh computer can get you acquainted with PCs and keep you up-to-date on important deve/oprnents.
INS!GNIJ\
.S 0 L U 1· I 0 .~ S ,
B y addin g a board with a Pentium processor to your Mac intosh, your computer becomes a dual processor that can run software for both platforms. The fiip be tween operating sys te ms is contro lled with keys on the keyboard. In additi o n to a processor, the card must co ntain its own me mory a nd its own so und. A port that hooks to a modem is opti o nal on some cards because the PC card may sha re the Mac modem. Although a second compute r is an o ption that should be considered. a dual processor sol uti on is a bout half the price o f new 166 MHz Pe ntium machines. A PC card is also several hundred dollars cheape r th an reconditioned Pe ntiums that are now being sold through outl et stores for major hardware manu fac ture rs, such as Dell and Micron. The companies that sell Wi ndows 95 e na bling hardware a nd software for Macintosh include:
1. Apple Computer.
Apple's Powe r Macintosh 7200/120 PC compatible compute r is equipped with a pre-installed Pen tium 586/100 MHz card. Industry benchmarks compare the speed of the 586/100 MH z card to that of a Pentium 75 MHz. The card may a lso be installed in any PCI-based Power Macintosh system. 1 & R Computer World in New York City sells this syste m for $2,295 .
2. Orange Micro.
Ora nge M icro makes two varieties of O ra nge PC cards: o ne for NuB us-based Macintos h computers and anothe r for PCI-based mac hines. The cards come with one paralle l port and two seri al ports for adding PC pe ripherals. Windows 95 must be purc hased separate ly for $ 142.
js. Web Watching And Planning
Tip: PC cards built f or Macs have the following features: They do not require rebooting, PC-type CD-ROM disks may be readj i-om the Macintosh CD-ROM drive, files may be shared by both environme/lls, the Macintosh SuperDrive is used as Drive A:, there is read/write capability to Macintosh or PC diskelles, and there is a shared Clipboard between Macimosh and PC environments for cutting and pasting.
David Lemer, who owns Tekserve, a well-known Macintosh repairfacility in New York Cit)\ uses a dual-pmcessor solution to run Federal Express tracking software (help@tekserve.com).
Card Model 320 (Nu Bus)
Model 340 (PCI)
Speed 8MB 16MB 133 MHz $738 $852 133 MHz $ 1,040 $ 1, 128
32MB $ 1,080 $1,356
Orange Mic ro cards are available from Orange Micro at 7 14-779-2772 a nd Mac Powerhaus at800-615-3 J83. (Note: Lookfor Orange Micro's home page at http://www. orangemicro. in.te1:net. )
3. Reply Corporation. Reply Corporation (800-955-5295) manufactures the PC cards that Apple adds to the 7200/120 MHz Power Mac. The card is s lightly less expensive than Orange Micro's. Windows 95 and sound are bundled, but the cards do not come with the ports necessary to hook up PC peripherals. A port adapter can be purchased separately. (Note: Look.for Reply
Corporation's home page at http://www.reply.com.)
Card NuB us PCJ
Speed I OOMHz 166MHz
40MB $700 $ 1, 11 5
(Note: Smaller memory configurations at lower prices are also availablefor Reply Corporation's PC cards. A 40 MB memO!)' configuratiOil is lisred to give readers a1z approximate idea o.f price. A cardfor the 6 /00, 7100, and 8100 Power Macs is approximarely $800 to $900.)
4. Insignia Solutions. Insignia has created a software emulation program that is the least expensive altern ative for mnning Windows 95 soft\'lare. Speed is entirely dependent on the Macintosh machine's processor. J & R Computing in New York C ity sells Insignia 's SoftWindows software for approximately $400. (No re: Look for Insignia Solutions' home page ar htIp:I!w1v1v. i11signia. com.)
6.,Chapter 1
New trend to watch: CD-ROMs that augment a print publication or a Website
Summary: CD-ROM is a convenient m edia for high-bandwidth content. Publishers at The Net magazine assume that anyone who is buying an Internet magazine also has a CD-ROM drive. The magazine editors have copied simple HTMLfiles to the CD-ROM, which can be op ened in a reader 's Web browse1:
Internet Explor e,· lc.
loi"11Dhl
linpllfl .. l t:pQI I ._
l' (l go \ r t up ... l'rln t
Otlll
XI
ld.
!<:) Nf1POWf A ·I
0 ~POUJU
~:lllfUh R U I I " 1l . 1 MI Jpoll..,
.t CJE:Q
I D·,ttoo I
: _L('...,._.I O~(3~ut·,t,·c~..J..uU.~.rt.ai,.:s.=.·=.·~·;-·
lboW:I tm
·I
le.
W ho said HTML files need to be "served" from a fi le server? Dig ital media experts at The Net magazine have created a clever CD-ROM disk that gets di stributed w ith thei r magazine a nd allows HTML files to be viewed online or offline (http://www.thenet-usa.com).
1 . Steps t o open The Net's CD-ROM. a . Connect to the Web with your PPP connection.
b. Open The Net 's CD-ROM.
NETPO\V ER 1a.
IIQ f i 12 tltml
N(TPOLIIEn 1 2' 5 . ' ! t " ' J Y I Ci P.:
"' Ut'o K·v·11
CJ
S;~«~wr t
-CJ
' i CJ Nt tTOCIIJ
1 h r l .h tm
CJ
"'~ bet
CJ
D"""''
,.,
~ ttt<n 7 5.5~1h MS(
·
lb.
c. If you do not have a We b browser software program, launc h or insta ll Microsoft 's Interne t Explorer browser, which is included on The Net's CD-ROM.
d . Select Open File from the File pull-down menu.
e . In the dialog box that follows, select Start.htm, and click
on Open.
f . The Net magazine's CD-ROM interface will open in the browser window.
lf.
)1. Web Watching And Planning
The Net magazine's director of CD-ROM development, Tom Hale, shares tips on creating a hybrid CD-ROM
Summary: The Net magazine's CD-ROM disk is a valuable supplem e11t to the magazine, providing tools and helpful Iinks for readers.
start.htm
H ybrid CD-ROMs can be pl ayed on both Macin tos h and PC hardware. Although Tom Hale at The Net magazine admits that it 's challenging to create content that is identical for both platforms, one CD-ROM is more efficient than two separate disks. In this section, Tom has identified tips for Web deve lopers who are considerin g a CD-ROM supplement for their Web site.
1. HTML files work cross-platform. HTML Iiles are perfect for a hybrid CD-ROM because the Web is a cross-p latform digita l medium. However, it 's still challenging to create con tent that will be useful for a variety of PCs and Macintosh computers.
2. Put all large files on the CD-ROM. The Net magazine puts all art, movies, animation, and demo software on the CD-ROM and puts tex t on the Web site. This shift so lves all bandwidth problems, and the Web site becomes a vehicle to distribute fres h conten t that's easy to download.
3. Web tools are a valuable addition. Web tools are distri buted each month, so readers do not need to download the software themselves. Shareware and demo software programs are usually large, and downloading is time consuming. Tools are valuable, and readers will want to keep the CD-ROM near their computer.
4. Future add-ons to the CD will include chat. As The Net magazine's Web site and CD-ROM evolve. live interactive chat between ed itors and readers is an interesting addition that's planned.
s. jChapter 1
New trend to watch: offline browser software that automatically downloads Web content
Summary: Offline browsers act as spiders or Web age/1/s that awomatica/ly de/iverfresll Web pages to your hard drive by topic.
SulfsoT
WEB
The Doorstep
Kltmm OELI'IHI hulinll
~1 -.·_Afil/-v
Several ne\v Internet utiliti es help co llect, o rga ni ze, a nd save Web pages o r e nti re s ites fo r o ffline viewing or CD-ROM maste ring.
1. Macintosh offline browsers. a. Web Buddy , by Datav iz, PowerMac and 68 K versions, $50 (http://www.darav iz.com). b. Freeloader, by Freeloader, Inc., free (http://www. freeloader.com). c. Web Whacker, by Fore front, requ ires System 7.1 or g reater, $69.95. d. BackWeb , by BackWeb, Inc., Macintosh OS, free (http: //www. backweb.co m).
2. PC Offline browsers. a. Web B uddy, by Dataviz, Windows 3.x, Windows 95 , a nd Windows NT versions, $50 (http:l/www .datav iz.com). b. Freeloader, by Freeloader, Inc., Windows 3.x, Windows 95, and Windows fo r Workgroups versions, free (http://www.freeloader.com). c. Web Whacker , by Forefront, requi res Windows 95, $69.95 (http:l/www.Ffg.com). d. Surjbot 3.0, by Surflogic LLC, Windows 95 and Windows NT versions (http:l/www.surfl ogic.com). e. WSmart Bookmarks, by First Floor, Windows 3.x, Windows 95, and Windows NT versions, $24.95 ( http ://www.firs ttl oor.co m). f. NetAttaclze Light, by Tym pani Software, Wi ndows 3.x, Windows 95, and Windows NT versions, free for noncommercial, personal use (http:l/www.tympani.com). g. Milktruck, by Trave ling Soft ware, Windows 95 a nd Windows NT versions, free for noncommercial, personal use (http://www.lravsoft.com). h. BackWeb, by BackWe b, Inc., Windows 3.x,Windows 95, and Windows NT versions, free. A BackWeb server is availa ble for Unix, NT, and proxy servers ( http :l/www. ba c k w e b.co m).
/9. Web Watching And Planning
New trend to watch: Web site analysis software
Summary: Broke/! li11ks a11d image references are easier to 1//allage with Web site analysis tools.
10. Chapter 1
-II!!!!!!!- Adobe
SITEmiL[
W eb site analyzers le t you see what's working on any We b site and solve the problems associated with res truc turin g a We b site, mov ing files, updatin g a Web site, re naming pages, or deletin g fil es that are sti ll in use.
1. Adobe SiteMill for Macintosh.
Adobe SiteMill reads an ex isting Web site and automatically finds and summari zes the enors fo und. T he software includes Web page authoring features found in Adobe's HTML editor, Adobe Page Mill. SiteMill can be run on any Macintosh running System 7 or hi gher with at least 3MB of free memory and a color display. Price is $ 199.95 (http://www.adobe.com). Features include:
a. automat ically fixes all lin ks throughout a site when folders are renamed, moved, or deleted.
b. shows warnings for unreachable or unused resources. c. displays all resources, page titl es, and folders.
2. lnContext WebAnalyzer for Windows.
Like Adobe's Site Mi ll, lnContext WebAnalyzer identifies broken links and proble m resources. However, un like Adobe SiteMill , which fixes broke n lin ks automaticall y, WebAnalyzer must be integrated with a n external 1-ITML editor to repair links. The software requires W in dows 95 and at least 8 MB of RAM. Price is $ 129.95 (http://www. incontext.com). Features inc lude:
a. ide ntifies broke n links and images. b. is compatible with popular Web browsers.
c. can be integrated wi th popular 1-ITML ed itors for Web
page repair.
The Reuters Web sites
Summary: In this chapter on planning, the Reuters sires provide an e.;rcellent Web site development model. Built by a prof essional g raphic designerf or a client who understands online information technology, these sites represent pe1ject " Web craftsmanship."
Note: Two Twelve Associates is a multidisciplinmy designfinn specializing in environmental graphics, print, and interactive design. The.finn is located at: 596 Broadway, Suite 1212 New York, NY 10012-3234 212-925-6885.
I News(Z)Machine]
'111111111-A
F ew people wander around the Web without a purpose. Travelers usua lly search and navigate with the he lp of sig ns, j ust as they do on the stree t
For several decades, sig ns in archi tectural spaces have been desig ned by a group of graphic desig ners known as environmental designers. Just as g raphi c design has evolved in the pri nt medium, so have the visual aesthe tics and formul as used in environme ntal gra ph ics. For example, environ me ntal designers have adopted the architect's phased approach to project developme nt, which inc ludes planning, sche matics, design, and production .
Environme nta l g raphic desig ners now know a great deal about effec tive organi zation of space and use of environmental elements. In fact, o ne graphic design firm specializing in e nvironmental graphics is uniq uely positioned to offer advice on " pla nning a Web site." The underly ing principles of he lping people "find the ir way" are as a ppropriate fo r virtual spaces as they are fo r real s paces.
Two Twelve Associates.
Using the principles of "wayfi nding," the graphic designers at 1\yo Twe lve Associates have been designing spaces for a lmost 20 years. Wayfinding is the s tudy of peoples' movements and the ir re lationship to space. It's also the process of reac hi ng a destination, which involves problem solving. Two Twe lve Assoc iates has used wayfindi ng design to plan spaces fo r clients such as the Sou th Street Seaport, the Cent ral Park Zoo, the Ba ltimore Light Rail S ubway, the Baltimore Waterfront Promenade, the C ity of New York Department of Parks and Recreati o n, and the Metropoli tan Transportation A uthority.
Recently, David Reinfurt, a graphic desig ner w ith Two Twelve, designed and bu il t the two We b sites for Re uters, shown in th is chapter. David's skill as an environmental
111. Web Watching And Planning
1a.
12. ,Chapter 1
[ NewsQ)Machine]
'IIIIIIIIIA
)news]
u>
[IJualneas)
~_j;p
(sports] [alt.news)
[news.aearch] [my.news ) [ news.talk]
1.
graphic desig ner and his insig ht into how to plan a project wi ll help Web des igne rs organize the ir own sites.
1. Reuters News Machine.
For busi ness people suffer ing from " in fo rmatio n overl oad," Re uters News Mac hine offers what mig ht be ca lled an e lectro nic clipping service call ed my.ne ws. For a fi xed month ly fee, a computer user ca n predefine the categories of news they wish to receive, and Reuters w ill deliver a ll re lated stories. The service also o ffe rs general news, s ports news, business news, o ffbeat news (alt.news), a nd an area called news.talk, dedicated to onli ne discussio ns about current event s .
a. News content groups. Up-to- the-minute re ports from
the Reuters bureaus around the world are organized into four "content" gro ups. Users can cl ick on a category and then review a list of headline/sy nopsis items. Each news headline is a link to the full story. Content groups inc lude: · news, whi ch contains general news ite ms from
around the worl d. · business, whi ch includes stories shaping the eco-
nomic and business news. · sports, which conta ins the latest spmt s stories. · a lt.news, whic h inc ludes "offbeat" news.
~~
[news.aearchl Llt!J.ne,.,s(
(news.lalkj
lb.
forlf>OIIf l"W'. · <~tnJ:Y. O..: ~~l!Jihu boor~t> Ct.lh: L"'!XJ:'Mor. ( IIC-Jil.Ntlwn:ttll! 9(1ril
t'c· ""' Ullwlll tlJOI!.I lu\o;'=>p
2.
Tip: The Reuters Business Information Products site has full-bleed images, which have been ghosted to a light gray and white and used to cover the background. This effect is achieved with the <Body Background= "filename.gif"> tag at the top ofthe HTML document:
<body ba c kgrou nd" filename.gif" ><lbody>
b. News functions. This consists of two unique "news tools" and a news ctiscussion area where you can pmticipate in news discussions wit11 people around the world.
· News.search is a powerful search tool that responds to a keyword search, gathering news items on any topic you choose.
· My.news is the Web equivalent of an e lectronic clipping service allowing you to predefine news categories of interest. The news stories are automatically delivered to your computer several times a day.
· News.talk is an area containing news "threads," whi ch m·e followed by people all over the world. Users exchange their views by posting messages to a particulm thread in response to a news item.
2. Reuters business information products. Reuters Business Information site was created to support two new Reuter's online business services : Reuters Business Briefing and Reuters Business Alert. These two online, userdefinable news retrieval services offer news gathered from more than 2,000 sources and delivered up to 15 times a day to a subscri ber's PC or server.
Reuters Business Briefing is a server-based product that can assemble news in one central location and distribute it on an enterprise-wide basis via Lotus Notes.
Reuters Business Alert is a smaller, workstation or LANbased news-gathering service designed for PCs running Microsoft Windows.
a. Products. A mouse click on the Products button will
take visitors to pages that descri be both of the Reuters business information products.
(Pr oducts)
Introducing Reuters Business Bnef~a?ui'Reuters Bwiness
Alert SeiVer-·-two ne'>r ways til llelp your company gain 1he
competiti}'e edge
\ .....
2a.
113. Web Watching And Planning
Tip: Notice tha t the outline around buttolls has been turned off Netscape ordinarily displays a heavy blue line around an image that 's a link (called
an "active link" )and a purple line if
the link has been clicked (called a "visited link"). To turn offth e otillin e, ente r:
<img s r c-"f i l ena me . gi f" border- 0>
b. Sales Contacts. The Sales Contacts butto n (Figu re
2b I) will branch to a map of the U nited States. Clicking on a state (Figure 2b2) will bring up a sil houette image of the sales rep for tha t state (Figure 2 b3), and, if the browser has a built-in sound player, the re p's "hello" will be heard.
(S. fes C o n u ' c lS )
Con1aet a Reulll!B, sales representative near you 2 b1.
2b2.
14. / Chapter 1
2 b3.
c. Sources. If visitors are interested in knowi ng the
sources for news, a Sources button will branch to a section that will di splay the information onscreen.
(S o u roe os)
'I1ie R~ute:rs globe! nen,-ork, plus more than 2 ,000 addilionel sources 2c.
d. Feedback. The Feedback button (Figure 2d L) branches to a questionnaire. A multiple-choice format with checkboxes makes the fo rm (Figure 2d2) easy to use.
2d1.
n... ...... "'~'~.--, :J* ·............... .
8 S:::..00~=~:-o~t~~co""'
2d2.
e. The Network. The Network butto n takes visitors to an area that changes most frequently. It includes product announcements and a " faq"-or freq uently asked quest i o n s - s e c tio n.
(T he Ne twork)
Chat with us about the latest new;,, technll:el developmtlnts. database enhancements and other helpful items l:l ~~:et the JOOst from Heutel3 Business lnfonn.e.tion produc~ 2e.
jts. Web Watching And Planning
David Reinfurt's tips on planning a Website
Summary: The essential early steps in the Web site development process do not involve graphics; they require the creation ofan underlying stmcture.
~tJ_g;J~~~_ru~u
l.ooiht-f'l.!http://'ww'W ."'ttrpOr"t r:·1/ mtdl.a.Jrts/v09/N'PNMoh.html
[NewsQ)Machine]
'.111111111.4
[news] [buslneas) [sports] (elt.news)
[news.search] [my.news] [news.talk)
16. [ Chapter 1
1. Assemble the team.
For a graphic design firm , the Web development te am includes c lient members as well as me mbe rs from Lhe graphic design firm , including:
a. A manager, client. This person bas the authority to
make decisions and is most likely a member of the firm 's marketing team. Idea lly, thi s team member is very ramiliar with the Web and can be re lied upon for contelll ideas.
b. Writer/mat·keting specialist, client. [n Reute rs' World Wide Web terminology, this person is known as an editor. Analogous in some ways to a managing editor, this member contributes content ideas and has an on-going role in the life of the Web project. Ideally, this team member is very familiar wit11 the Web.
c. A technical specialist, client. This member is responsi-
ble for making the Web pages and the server work. The team might look to an Inte rnet provider to li ll this role. Ideally, this person is fami liar with the Macintosh. PC, and U nix platforms.
d. Graphic designers, graphic design firm. Depend ing on the size of the proj ect, two designers may be involved. A senior designer directs in artistic areas, a nd a j unior designer is involved in production.
e . Information Designer, graphic design firm. This
member has a writing background and will review the marketing content to see if it is appropriate for the Web. For example, marketing content created for print is often too wordy; an info rmation designer wi ll know how to edit the content for Web pages. This member s hould be very familiar with the Web.
2. Develop a concept.
Developing a concept usua lly involves a brainstorming ses· sion, which may last an e ntire week. At thi s stage, a rough content list consisting of bull ets should be developed. This in fo rmation will be refi ned and organi zed in a schematic process, as outlined nex t. To help facil itate th e fl ow o f ideas in brainstorming sessions:
a. Tour the Web. Analyze what's possible, and examine well-implemented sites. Because the Web is large and changes frequently, each team member should have a connectio n and be able to search the Web independently.
b. Consider sources for content. Although a firm 's existing collateral materi als may be repurposed for a Web site, ideall y the site should have new content.
c. Develop an underlying paradigm or metaphor. One of the most imp01tant ele me nts to consider during initial brainstorming sessions is the underlying paradigm: · Is it a bookstore? · Is it a record store? · Is it a catalog? · Is it a public re lati ons vehicle? The Reuters developme nt team decided the News Machine site would be an online news source, somewhere between newspaper and te levision, and the Business Information Products site wou ld be a public relations vehicle.
l 11. Web Watching And Planning
Level 1 Level 2
3. Develop a schematic (on paper).
W hile the write rs develo p copy, the graphic designers develop a minimal schematic. Copy. in the form o f di agram labe ls, is used to ide ntify the co mpo ne nts o f the Web site (Fig ure 3a).
Functi onal Schematic ReutersNews Machine WebSite
4.3.95
Front Page
Busine s s [ : ]
Level 3
3a.
~~
(nows.March] ,...,..ncm]
(neNs.llllk(
3b.
18. 1Chapter I
Related
Story
Story
8 /
Encyclopedia
Level I conta ins the site's compo nents as described in wayfi nding desig n. (See Wayfinding principles in Web site design later in this chapter.) In th is model. the components are the fo ur news conte nt areas and three news functions. Although these are not shown on the mini ma l schematic, they show up as tex t in the schematic pro totype and as glyphs, or identify ing icons, in the graphic desig n phase (Figure 3b).
Level 2 conta ins the destinations described in wayfinding desig n. rn th is model, desti nations include types of news. (News, sporL<;. business, and othe r fie lds arc page names, which we re modified and rearranged later in the proj ect.)
Mental Map+ Structure Reuters Business Information Products Web Site
4.3.95
Home
I
IProduct Info
If I
Questionaire
+Feedback
t
F
I Sales t Force
I
Reuters Business
.... t Briefing
Reuters Business Alert
.... t
t =Home Button .... =Back Button · =ImageMap F =Form
US Map
+- t ·
I I Photo/Sounds
... t Sales Rep
I
I
I Sources
t
Help
t
I
I
Full Source Info
t
I US Map
.... t ·
I
Telephone #s
.... t
I
FAQ
....t
4a.
4. Plan navigation. The arrows o n the schematic diagrams roug hly describe navigation. Later, sets of glyphs arc developed to help users navigate (represented schematically in Figure 4a and impleme nted in Figure 4b). Other navigation aids include links to a help screen and a site map.
[News0Machine]
~ .:;P
.....,,........ , ....,... , ·· ~·.. ·1
Rellkra NewaMacbia.t.. l"t_.,...._
"""'~.:'-- ~llf((~CUIAJt(.lltfJ...S(w. l _...,
*-'""' n. boa:RIUrr'll7· .."
l1it
...:k ~ ll.t)/tn
'"a..'u3 c.
- . ,...~ -~ ~yt:,,.,......,, lhttrJ
1._. T"'-.
... U:D; ~· . . . ~r:c.1:t ,..IJ """ ""~.,.., ..,.II
tJi..-...;.nr.~ll·1i)lj~·ter-·· ··' Mt'.r<tu ,.,.,
LP!L1 ..:.IC.klf': l ~~·
t.Ufi!lo.u.......-nu ·.~fll t-·
!i!:!Ut
&f"''Wt t."'Cdt·"" ), "'="tl*r:...WN J~...)"I'It_,IWJJU~
t1~ · ~1flitr.tf·Ddn~~ -.. , . ....... ....~
4b.
j19. Web Watching And Planning
Tip: Make sure text copy is proofread carefully. Fun, "amateur " Web pages are 110t harmed nwch by typos, but prof essional business sites riddled with typos can have an w lpro.fessional appearance.
5. Create a schematic prototype (no graphics). A schematic prototype consists of text-only Web pages. Although text is boring to look at, it focuses a team's attention on conte nt before graphics enter the pic ture. For the graphic design fi nn. a schematic prototype can be used to get client approval before moving on to the next phase. The prototype shOLIId follow the earlier schematic and contain easy-to-read copy developed for quick consumption.
a. Easy-to-read chu nks. The content should consist of plain language organized into chun ks of four to five items. For example, in the News Machine project, the graphic des ign elements on the Reuters " front page" evolved much later in the project. Early in the project, the front page was represented with text items, suc h as:
· News
· Sports
· Business
· Other
b. Analyze the information. Carefully plan how information is presented. Web visitors should:
· Understand where they are at all times. At the prototype stage, locations were ident ified with text labels. Much later, matchjng graphic design clements were created as location identifiers on every page. In the Business Information pages, the page backgrounds identi fy a visitor's location.
· Understand the "destinations" built into a site. Although the decision to provide visitors with some facility to see all destinations at all times was made at the prototype stage, the toolbar did not take shape until later in U1e graphic design stage. In the News Machine site, a toolbar on every page includes all the destinations available to a visitor.
· Understand what action will take them to a destination. At the prototype stage, text li nks were used as navigation links. Buttons and other graphic design elements were added later. For example, in the News
20.1 Chapter I
M achine site, a cl ic k on a small icon will give a larger icon at the top of the next page. This reinforces that the action is correct.
c. Streamline the copy. Because it is likely that Web visi-
tors will do more scanning and glancing than reading from left to right, the content should be refined to contai n essentia l informati on, conveyed in keywords. 6. Begin the graphic design process. If planning is phase one, then graph ic design is phase two. During this second phase, the de ve.lopment team meets regularly to review the design directi on. As in print, the design cycle is an interactive process. During this phase, the graphic designers carefull y review the visual elements and constantly ask themselves, How can I improve th is? Does this work? Are the visual elements easy to understand? The work that goes into the pla nning phase does not end when graphic design begins. During the graphic design phase, the designer must constantly look back at the plann ing work accomplished in phase one and ask, Does the project's design matc h the original project plan? Is it clear? Are the ideas easy to unde rsta nd ?
121. Web Watching And Planning
Wayfinding principles in Web site design
Summary: Wayfinding principles, used to help people "find their wa)~" offer importall/ guidelines/ o r Web site developers. These ideas will become even more valuable as Web sites develop imo 3D spaces.
Por more tMn e century, our bU5U\e3.5 tw betn 10 cather Womu.aon from arou:M the wo:rld llov ""dellvtr It 1D >"ur de, kiDp
(Producta)
l ntroil~>:lllC Reuter:~ Busmess Bndtll(aM Reuer:1 Busme:ss Alen Semr·~IW r.ev voys Ill lld p ,.,ur eompllly(eln tho
m {.compoli~1~ t<lce lea Conta«a) COntoct a Reut.el)o.~s "P~"'ntabvoneM you
·
(Soutus)
The Reuter:l ClaMIMtwr~··Jl]us more tbon Z.OOO odd lllOnal
so=eo
~ {P~ dblck) Tell us about yourselt
(The NDIWOI · )
Ch·t wllh us oboutllle IAttot "'"'. tee~ devtlopmon"· dolO.b.,. enlw>:emen" and other help ful h;ms 10 cet ~oe most fmm Reutt" Bwlntos lnforrru.tion pl<ldt>:"
22. JChapter I
1. What is wayfinding?
Introduced to envi ronmenta l des ig n in the late 70s, the term wayfinding describes spatial behavio r. It inc ludes the decision making, decisio n executio n, and info rmati on processing involved in reaching a destination. Althoug h the renn initia lly re fe rred to the process of reaching a physical destination , waylinding princ iples may also be used for navigating Web sites. At the most basic level, wayfind ing consists of cognitive mapping and spatial problem solving, defined next.
a. Cognitive mapping. T he process of forming a mental
image of a physical layout.
;J~JJ ~l:Jl;J.:~l&l _j
,_... . ..,,,_,_ .....,._.....~...._...1-ot~,.-·
~.,., _, ~··~!!---' I or.1._~ 1~--.tl ··:z..,..t
-...... ,..~ ....__, .... 1'"'-1 ....1
0
2a.
:tu·· T :lhlfu
I~IL .,~~ · ···
2b.
b. Spatial problem solving. Behavior, usually decis ion maki ng, needed to make a journey or reach a destination.
2. Wayfinding decisions. Wayfinding decisions are hierarchically structured in a decision plan, which consists o f one or more wayfinding decisions broken down into smalle r decisions. For example:
a. Decision to use Reuters news.search. If the
news.search page in the Reuters News Machine site is a destination, smaller waytinding decis ions required would include: · Get on the Web.
· Use a bookmark or open the URL associated with the Reuters News Machine site.
· Select news.search from the Reuters home page. You woul d then see the screen shown in Figure 2a.
If news.search were no t an option available on the Reuters home page, the list of decisio ns would include whatever actions wou ld be necessary to get to the destination o r the news.search page. b. Decision to contact a Reuters Sales Representative. If the Sales Contacts page in the Reuters Business Information Products site is the destination, the smaller wayfinding decisions wou ld be: · Get on the Web.
· Use a bookmark or open the URL associated with the Reuters Business Information Products site.
· Select Sales Contacts from the Reuters home page. · Scro ll to the map of the U nited States. · Click on a state. · Record the name and phone number of the Reuters
salesperson, as shown in Figure 2b.
3. Wayfinding conditions. Wayfinding conditions result in a Web visitor's arrival at your site. Diffe rent visitors wi ll have different reasons for viewing your site.
123. Web Watchi11g A11d Pla11ning
( n e w o} [oo..s .. . .rcft]
(apot'tsJ [alt ne-.·.·J
.._.
(my.OQ¥.5( (MNUGIM)
4a.
[eporta)
hh·~IWhl. . . '111\olthU.II'tlta.tt '
WAflOIVTNI. ~ .?a:,-. ,.., ,..._ t f
c~v,:.::.c~.
r ~J«rwlft,pllf....O. · r;~':';:"~_....., ._,.._~~'"
·
.._ "IIJt:r.r. u:;o...-e rao, ,,Jil_.,.,_t-
._,.-~.-..r~~.__,.,...,
1·1.c0,n,.!.-...,..._....'.W. e, ),tt1.,
kl(·.-Mu..,aw·'-lk ...-trc~
0
4b.
cv J
4c.
a. The Web visitor is exploring. The visitor has no particular goal or desti nation in mind.
b. The Web visitor has an objective. The Web visitor is seeking spec ific informati on.
4. The wayfinding design process. Although wayfinding principles are applied throughout the entire planni ng and graphic design process, it is interesting to examine the details of the wayfinding design process.
a. Identification of' components. In the News Machine project, identifying components was an essential part of the design process because it meant namjng the fo ur content areas and three functions. Identifying the types of news (news, business, sports, and alt news) took place in the planning phase and agrun in the design phase. Notice the change in the names from the schematic to the graphic design phase.
b. Grouping of components into destinations. In the News Machine site, Web visitors move from a front page to a destination page with news headlines and a news synopsis under each headline. Although it may contain further links, a page that contains news is considered a destination.
c. Linking of components. A toolbar with elements small enough to fit on every page means a Web visitor can branch to every section from every page.
5. Wayfinding design. Wayfinding design involves themes that can be adapted and applied to Web site deve lopment.
a. Decision diagram. A decision diagram is a Iist of decisions a visitor has to make Lo navigate a site. A ltho ugh this step was not used in the two Reuters projects, there was a conscious effort to rev iew the number of steps a visitor needs to take to get to a destinati on. As in space planning for physical sites, visitors should take as few steps as possible to get to Web destinations.
I 24. Chapter 1
b. Graphics as landmarks. Web site pages should have related g raphi cs that act as a masthead, but multiple mastheads shou ld not be identical. In the Reuters Bus iness Information site, t11e masthead graphic varies slightly from page to page. The backgl·ounds also act as visual landmarks.
~~~~~~~~~ ~~~~~~ ~~~~~~~~
_____ ..,,
.,.-.,..,._
--·lo!·. . . . . . -- .-... ..._.., .-.~ 1.- .._-~-..
'"""""-_,_.,,.
Sb.
(newa(
Sc.
[bualneuJ
(aportal
lalt.nev.~)
(aportaJ
,........,.~tl»~im..l~"u ·f!n_.,J7 '.VA:ttn~oe.t ·..-caatn>.,."~ · Air ~e-.::rc . ·l -...tciiNC·JIJ:l.q,nt,
tlro.: t:.~JLNc·fl~l.ll·~J-lYYii:..~n~af'»at..JG>&:.d.~.,...,
tltodl!~~~....c
Sc.
USA !:X-BASEBALL STAR BUltlllHC SAYS BASEBALL A WO IIOPOLV
O.tt ,.. 11. lt96
·.:.·AAC:.r.ol·,Mil~·P.J :v&Bwa:ac ·tJ.Vf~~1t~
. .rw.r.rd !"kD t..sc·lh·MI·~P.>b ~ ,,.."'" ,.fr:···t. uto;d!
~~. .,,wau"'~
llu:t~C. P.J.n\.. talHol»..l.'bo: tptM'll. ,_.,..,......,.., r- Ctflll"tllmn l:ODO.."':.( bwfb&I~U»nE'111:1flCLI'!Ir~O.no:yk.fb lllr.eOT.IIl.WJ'y
'C\'Ibc~U1 ~·~··'ll~.-1 lwbO.I·"""
~:.c-::·z.:aer:=.~r~.~.';!':)~=~::!.,Jr~Pd
.rl.. D~lau..,_\C~illcb:W:I·~>~dW·Jr..JI't..oo
)ll.lrtlkki:Jtit~
Ot'VltrlUk,_ab.JIMfl<tM:i04W..1)r·tnltltW.C· ~'tftt.~ccc-..a:H:y
\f\AirUUL.k:IM lfiS A/:.~~1'..-t
Sc.
Sb,Sc.
c. Redundancy. In the Reuters News Machine site, the glyphs, or identifyi ng icons, are repeated to remind Web visitors where they are at all times. Although th e size varies, this reoccurring graphi c assures that a Web visitor is not los t. In the Re uters Business Information Product exampl e, notice how David re peated the ide ntify ing button image in the background graphic.
d. Color. Although color was not used as a landmark in either Reuters site, it can be used as an effective ide ntifier to help a Web visitor navigate.
e . Iteration. Web designe rs should anLicipate from 5 to 20
cycles of c hange in the developme m of a Web site. Focus groups. alpha testers. beta testers, and a questi on naire on the We b site are all vehi cles for gathering feedback from the people who travel the site.
125. Web Watching And Planning
6. Conclusion. Although n planning phase can be rigorous, it represents a time-tested model that adds a solid foundation to a project. Experience has shown that the projectmodel lhnt includes thorough planning wi thstands change much more than a project with little planning.
26.j Chapter I
Artist featured in this chapter: Merry Esparza is a11 illustrator and pai11ter who specializes i11JD computer illustration and interactil'e compilfer graphics. merry@interport.net llttp:II·VIV\\(1/Sers .illteqJort. ll e t l - m e n J I mobius.lltml
Internet cafe owner: Jolm L Scott is Webmaster and co-owner ofalt. co.ffee, an l11tem et cafe in New York City's East Village. jetsam@.f1otsam.com http:llw·vmaltdotco.ffee
.COlli
Navigation
[n th is c hapte r on navigation, Merry Esparza introduces us to both 20 and 30 navigation on lhe Web. Although 3D "worlds" are relatively new, the technology does exist, and it's changing the way Web visitors move around. For example, text links and inline li nks on a Web page are re placed hy new nav igation controls in 30 space. The new 30 browsers include network anchors, rubber bands, a nd node pointers that help We b travelers move by hyperlinldng through 30 worlds.
John Scott, an I nternet cafe owner, demonstrates how frames can be used to navigate a Web site. Follow step-by-step instructions on
how to assemble a frame document using art from the cafe's Web
site. (Note: Lookfor John Scott 's images in an alt.coffeefolderon the CD-ROM in the back ofthis book.)
The Mobius Gallery
Summary: An art galle1y in cyberspace provides a mode/for learning how to plan and develop navigation conrrols for your Web site.
1. The Mobius Gallery site.
Designed by computer arti s t Me rry Es par za (merry@ inte rpo rt.net), the Mobius Gallery site (http://www.users.interport.nell-meny/mobius.html.) prov ides a showcase for Me rry's artwork and Guillermo Esparza's paintings and sculpture. A We b site is a un ique and advantageous space for arti sts to set up their own exhibit-it's international, art does not need to be physically transported, and the site can be easil y updated.
a . Sculpture. To display Guillermo 's work, Merry photog raphed his paintings and sculpture and scanned the images into Photoshop. La Magdalena, shown o n this page, is a cast stone high-relief fi gure, created by Guillenno in 1994. The origina l is in The National Museum of Catholic Art and History in New York C ity.
b. Painting. Although images of Guillermo Esparza's paintings can be seen on the Web, e lectronic duplicates can never totally render his mi g inal work, which c~m be fo und inside many New York City churches. His projects have included wall murals, domes, sanctuary paintings, and sanctuary statues. Geographically s pread out, they can be easil y bro ught toge ther in one place-a Web site.
J29. Navigation
Above: Meny E.1parza's splash screenfor the Mobius Gallery site.
Above: Men y created a 3D cubefor her logo.
Above: Three-dimensiollalmrtral created for Empyrean. till interactive compwer strategy game.
30. ,Chapter 2
c. Graphics is the section oft11e Web site containing Merry's computer illustration. One of her specialties is optical illusion art, reflected in tlle site's splash screen. Merry explains that the Mobius Gallery's opening screen is designed to "reflect the relationship between the viewer and tlle work of ru1." In the image, Merry superimposes inverted perspective on linear perspective. Linear perspective establishes dept11 by using actual or suggested lines that intersect in the background. This creates a space where objects diminish in size relative to distance from the viewer's eye. Combined are elements of inverted perspective, a concept used in Byzantine art. In inverted perspecti ve, objects mat are farthest away appear larger than elements in tlle foreground.
MerTy's work in three-dimensional art has also led to a series of mural s she created for Empyrean, her computer strategy game. Merry built a prototype game in Macromedia Director and is currently talking with game developers about building an interactive game for tlle Web. As Merry explains, ''by 1996, cable modems wiII provide enough bandwidth for game developers to by-pass CD-ROMs and develop exclusively for t11e Web."
2. Future 3D graphics on the Mobius site. Merry's work in 30 graphics overlaps new developments in Web technology. As a result, she sees the Mobius Gallery as a test site for interesting new software programs. Examples include:
a. VRML and 3DMF. Merry plans to develop a 3D version of the Mobius Gallery, which Web visitors could navigate with 3D browsers such as tlle Duet Development Corporation's Walkabout 3D World Browser (Figure 2a). TI1ree-dimensional spaces also have the potential for typed conversation between visitors or between Guillem1o, Men·y and visitors. In June I996, Black Sun Lnteractive (hllp://www.blacksun.com) announced Cyberi-Iub, a server software program tllat adds multiuser capabilities to any Web site. The software is highly scalable and can support virtual communities ranging from I0 to thousands of simultaneous users.
2a.
A bove: Duet Development Cmporation 's 3D World browser and Model is a QuickDraw 3D sojiware application that allows you to navigate and walk about in 3D worlds. Below: Realtime voice commwrication is available over the Inte rnet from Electric Magic (/rllp:llwww .emagic. com). A mouse click on a virtual phone fin k inside a 3D space could place a realtim e (voice) phone call over the lntem etfrom anywhere in the world.
NetPhone 1 .2 .1 t
For more djrect c hat with sound, realtime voice communicati on over the Internet is available from Electric magic (http://www.emagic.com). With a mouse click on a "vi11ual" phone link inside the Mobius Gallery, a reallime phone call could be placed to e ithe r Guillermo or Merry Esparza fro m anywhere in the world. Although still relati ve ly c rude compared to telephone teclmology, parties can converse by alternately talking over the compute r's micropho ne. (Note: On th e IBM PC, a product ca/fed lntcmct Phone from Vocaltec works in a similar way.)
30 "walkthrough" e nvironments can be built with Strata's new Strata Studi o Pro and Virtus Corporation's Virtus Walkthrough Pro. The developments that make walkthrough worlds on the Web possible are two new cross-plarform 30 fi le formats with built-in features designed for We b travel. VRML (Virtual Rea li ty Modeling Language), sponsored by Silicon Graphics, and 3DMF (30 Meta File), from Apple Computer, w ill soon become as fam iliar to Web artists as GlF and JPEG.
Software application program s that are VRML- and 30MF-savvy will have a selection on the File menu for saving a 30 image as a VRML or 3DMF file. Applications wi ll also have built-in features that enable artists to speciry the location of a network andror or hotspot. Network anc hors are c lickable spots in a 30 world that hold URL informatjon. When clicked, the Web visitor hyperlin ks or travels to a related Web site.
b. Apple's QuickTime VR. For Web visito rs to see gallery rooms from a 360-degree perspective, Merry is planning QuickTime VR (virtual reality) movies for the Mobius site. 30 panels can be rendered for a 360-degree panoramic image and stitched toge ther using Apple 's Qu ickTi me VR Authoring Tools Sui te. Using Apple's QuickTime VR Player, visitors can twist, turn. tw irl , zoom, and pick up 30 objects in a 3D e nvironmenl. In the future, the QuickTime VR experie nce will include
131. Navigation
Tip: Image maps, with clickable regions in all inline image, may also be thought ofas a Web navigation device. Client-side image maps, covered in the C lient-Side Image Maps chapte1; are easier to build than server-dependent image maps.
music and hyperlinks to other Web sites; Apple has only j ust begun to develop the QuickTime VR fonnat.
c. Animated 3D graphics for the Director Internet Player. Merry sees potential for animated tours with music, sound e ffects, and interactivity using shockwave, Macromedia's Director Internet Player technology.
32. ,Chapter 2
Principles of Website navigation
Summary: For the pastfew decades, print. radio, and tele vision have been considered th e three mass market media. Recently, the Web has been described as thefou rth mass market111edium. This vel)' different new medium a/lows viewers to interact and "navigate."
rJ
Notscupe: Mobius Goller
_j ~~ .:J~~1fJ~ ~
·lfili' Loc411on
IllAPS~20Drwi"''9152091231 I\T·b'li520Book96:2~2FEspvu/mtf'r1J2.html
t:....-'> 1 I I I I 'WMt's
"'(t,.tt ·, Coot? ! Hlndtloo..
N·t S.W'dl Ntt OlrtC\1try ,.,t'lrr'IQI"OUp:J
WI
II
Graphic designers who have starred to design Web pages have the privil ege of shaping the newest media-the media predicted to innuence the way we work, pl ay, thin k, and learn. Because of its rapid growth, the Web w ill evol ve in ways we cannot anticipate. A lthough many changes are ex pected to occur in the nex t few year s, several underlying principles are likel y to remain.
1. Hypermedia.
The Web is a hypermedia system developed in 1989 by Tim Berners-L ee, a software engineer at the Center for European Particle Physics. H ypermedia is i nteractive in formation that has no beginning and no end. A lthough home pages are starting points, Web pages should be thought of as non-linear. Links found on each page jump to other Web pages, providing a random sequencing or infonnation . V iewers can navigate through an i nformation base in a vari ety o f ways, depending on the links they follow- and the informati on base can be spread out all over the world.
133. Navigation
34. JChapter 2
Hypermedia is a term invented in the 1970s, but the concept dates back to 1945. Read on for a bit of history.
a. Vanoevar Bush and the Memex system. Jn 1945, 30 years before anyone thought of a pe rsonal computer, computer scie ntist Vannevar Bush described a Memex-a system that provided associative indexing, or the ability to string together information mean ingful to a n individual user. Bush e nvis ioned a system with text and graphics that could be viewed either sequentia ll y or by following a user's trail of associative thinking.
b. Ted Nelson and the word hyperm edia. ln the 1970s, Ted Nelson, author of Dream Mach ines, in troduced the term hypermedia. He saw hype rmedia as a two-way medium in whic h compu te r users are creators as much as they are consumers. Apple Computer has promoted this idea since their 1987 introduction of HyperCard , a user-friendly hypermedia "authoring" toolkit.
c. 1\\·o-way communication is attracting b ig business.
Although CO-ROMs a nd kiosks have hypermedia characte ristics, most are read-only. The potential for twoway communication is much stronger on the World Wide Web. As a result, commerc ial interests are focused on the Web's marketing pote ntial. From a marketing point of view, tomorrow's vin ual worlds can attract the curious Web ex plorers, and dynamic database engines can measure a nd track a visitor's every response.
2. Active explorer vs. passive observer.
An underly ing theme in every form o f hypermedia is the viewer as an act ive explorer. As a travel ing participant in the media, the viewer is given the option of deciding where to go a nd how to get there. Viewers move a round to navigate and interact with an information base.
a. 1\vo-dimensional HTML. The two-dimensional Web page form ed from HTML tags is becoming less of a page and more of a background for multimedia player windows and new animation technologies built into the
browser's page. Examples include the Director Internet Player, the new 3D browsers, and Hot Java, an interactive 3D an imation technology that can enhance a browser page wid1 multimedia presentations or launch small applers in the form of interactive floating windows. All of these new developments have been built with viewe r participati on in mind. b. Three-dimensional VRML and 3DMF. In VRML and 3DMF worlds, there are no passive observers. Navigation in 3D imp lies moving through a space or handling objects. Software e ngineers involved in the development of 3D worlds have invented built-in anc hors, or hotspots. This means a c lick on an object in a 3D world will hyperli nk a Web visitor to another world .
3. The home page.
Regardless of how a Web site is organized or how many pages a site has, the starting point is referred to as the home page. Although Web visitors can travel d irectly to a ny page o n a Web site, it's the home page address th at usually gets published or promoted.
4. Navigating with URLs.
URLs , or Uniform Resource Locators, are addresses used to locate information o n the Web. URLs can be used to locate Web documents, FfP fi les, Gopher fi les, news Iiles, o r other Web resources as they 're developed. Navigation on the Web means opening a link that contains a URL. This can be accomplished by using a browser's Open command a nd typing in the URL or by cl icki ng on a link that contains a URL. A URL stores information in three ways.
a. Protocol information is the fu·st part of the URL. For
example, Stanford Uni versity's Sumex-aim M acintosh software archive has two public mirror sites at Apple Computer. Accessing one requires the FfP protocol
Navigation l 3s.
Tip: Browser software prog rams can download a file ftvm an FTP site with a click on an FTP link on a Web page. However, browser software cannot "upload." Fetch, by Jim Matthews, is a popular Macintosh shareware FTP wility that can upload and download .files over the Internet. (Note: Fetch ca11 be found on the CD-ROM in the back of this book.)
typed into the Open Command's dialog box, and the o ther requires an http protocol, as follows:
ftp: //miiTOr.apple.com/ mirrors/Tnfo-Mac.A rchive/ http ://m irror.app le . c om
In Italy, the Sumex-aim Macintosh software archive is mirrored on a Gophe r site, as follows:
gopher://gopher.cnuce.cnr.i t/ I 1/pub/info-mac
The protocol prov ides a clue concerning what type of information request is sent fTomthe client (browser software) to a server (any computer on the Internet). HTTP (H.ypertext Transfer Protocol) is the most common protocol found on the Web because it is used to request Web documents from HTTP servers. FTP (File Transfe r Protocol) is used to access fi les on an FTP server, and a Gopher protocol is used to access a Gopher server.
b. Domain name information is the part of the URL that fo llows the protocol. For examp le, the Yahoo! search engine created by Dav id Filo and Jerry Yang can be found at http://www.yahoo.com, where www.yahoo .com is the domain na me.
Early Inte rnet addressi ng assigned addresses to machines, or hosts. Later, Domain Name Service (DNS) addressing was imple mented, and addresses now refer to domains and not physical machines. A domain is conside red to be an enti ty that can be a person or an organization.
Although it's implied that the domain name reflects the name of the organizati on managing the physical Web server, or host, many Inte rnet providers allow their clients to use their own domain names on server space they lease. On beha lf o f a client, a provider can apply to lnterNIC, an organization that registers and maintains a database of doma in names used on the Internet (hnp://www.i nternic. net/ds). InterN IC is the result o f a cooperative agreement with the National Science Foundation. AT&T, and Network Solutions, Inc. The registration process takes about a week, and the
36. j Chapter 2
application procedure is handled through email (http://www.internic.net/ds). Once lnterNIC approves a domain name, the provider receives a notification via emai l.
c:. Directory and file name information follows the
domain name and provides additiona l information about the location of a file or directory. Ir a fi le name is present in an URL, it has a three or four letter extension and will occur in the positi on furth est to the right. The names to the left of the file name, separated by slashes, are directmy names. For example, the Arizona Macintosh Users Group in Phoenix Arizona runs a Sumex-aim Macintosh mirror arc hive at: ftp://ftp.amug.org/pub/ mirrors/info- mac Info-mac is the name of a directory. The User's Group has an index document to the mirror site avail able at http://www.amug.org/index.html lndex.htm l is the name of a docume nt.
5. 2D navigational structures. a . Linea1· slide shows. The simplest Web s ites are
developed as linear slide shows in which one page is
Sa.
equivalent to the next, without a top-down structure. For examp le, small sites with o ne or two dozen pages can be arranged with simple navigation buttons to move ahead or back.
137. Navigation
b. Hierarchical tree. Large sites should be organized into branches, or grouped areas. Visitors can c hoose to follow a branch that interests them, which may bring them to a fork and then to a related group of pages. However, hypermedia experts have known for some Lime that when a llowed to cross from one branch to another without first goi ng back " up the tree," viewers get lost. In Figure 5b, notice there are no interconnecting lines between branches. In order to navigate from one major branch to another, a visitor mu st follow a branch back to the starting point.
D I
r:.::::..~------------------r..::...~-------------------r..::...~
I I
0---0--0---0 ---------,---j-----T--------~
I I
0---0--0---0 ---------,---J-----T--------,
Sb.
~--------,----~----T--------1
0---0--0---0
6a.
38. ,Chapter 2
6. 2D navigation controls. a. Text links . Text links are the most common form of
links on a browser page. The color of the text link indicates the type of link.
Link text is blue by de fault in the Netscape browser, indicating that a diffe rent Web page can be accessed with a click on the highlighted text. Link text is not necessarily underlined because viewers may tum underlining on or off in the Preferences dialog box.
Meny Esparza's button link with a border.
6b1.
The same g raphic with the borde r turned off.
6b2.
The color of text links can be changed by Web page designers by using a hexadecimal RGB value added to the <BODY> tag. (Note: See Convert a Pan lone RGB value to a Web page co lor code with the BBS Color Editor in the Online Tools chapte1:) · Visited link text is purple by default in the Netscape browser, indicating that the link has been followed. · Active link text is red by default in the Netscape browser, indicating that the link is open. b. lnline graphics as links (buttons or arrows).lnline graphi cs are graphics that are loaded on the browser page along with text. When in line images are defined as links, the Netscape browser outlines the graphic with a border coded with the same colors as text links (Figure 6b I). By default, a blue border indicates the link has not been followed, purple indicates the link has been followed, and red indicates the link is open. This border can be rumed off with a BORDER=O attribute added to the image <lMG> tag (Figure 6b2). For example:
<IMG SRC-"buttonl.gif" BORDER-0>
7. Creating 2D navigation controls with HTML.
HTML text links a nd inline graphic links are both c reated with the HTML link tag <A>...<JA>.lnside the link tag, you' ll need:
a. The name of a file or URL to link, which will be specified with the HREF attribute inside the link. For example:
<A HREF- "toc.html">
b. The text or graphic that will act as the hotspot. Examp les:
<A HREF-"toc.html ">Sculpture <A HREF-"toc.html"><IHG SRC-"optica.gif"> c. An ending link tag. Following are some examples o f completed links:
<A HREF- "toc.html" >Sculpture<IA> <A HREF-" toc.html " ><IMG SRC-"optica.gif"><IA>
j 39. Nav ig ation
Sa.
Sb.
Scl.
8c2.
8. 3D navigation controls. a. VRML's network anchors are encountered in a VRML 3D browser window when the viewer's mouse passes over a link which, when clicked, will hyper!ink the viewer to another Web site.
b. Wall{about rubber bands were invented by the Duet Development Corporation when they built the Walkabout 3D World Browser. The mbber bands provide a means to move forward and control navigation speed. Stretching the rubber band a small amount provides slow navigatio n; stretching it a large amount provides greater speed.
c. QuickTime VR'snode pointers are encountered in a QuickTime VR movie pl ayer window when the viewer's mouse passes over a link which, when clicked, will move the viewer to another mov ie node.
9. Creating 3D navigation controls with VRML and 3DMF. Because VRML and 3DMF are both fil e formats, 3D software applications that support VRML and 3DMF export or save 3D rendered images as VRML or 3DMF Iiles.
An extra feature that will be important for creating 3D worlds is the ability to add network anchors in a VR.MLor 3DMF file. These are in the form ofURLs, which, when clicked, will hyperlink a Web visitor to another part of the Web.
40. jChapter 2
Information design and Website "map making"
S ummary: PreliminaJ)' structural sketches are 011 imporiC/nt part ofthe hypermedia development process.
. - . ;".'.~
EMPYr.-l'~',,._
~.
.· .._
.~ ,'~
.··i
OFFICIAL GAME STRATEGY GUIDE
·~
1·~'
' ~
1. Flowcharting.
Flowcharts, or prog ram m aps, are essential to the hypermed ia design process. Merry used a sketchbook to create ideas for her interactive computer game. Sketches can lead to new ideas, w hich the infom1ati on designer or illustrator can refer to in the schematic.
2. Interactive storyboarding.
For large projects with production teams, storyboards provide a convenie nt means to communicate development ideas to an enti re team. Some companies find it helpfu l to create wa ll maps, which show the funct ion and approxi mate layout of al l the graphic components.
Above: 3D murals createdfor Empyrean, Men )l Esparza 's interactive computer strat egy game.
r/.:-- )h~
v~)~~\·~\tr.0~.str
-">
.... .. ·""'." ""'' ._., _..,._ li'U(OI'I "'"T<'" oH14'V oC'C. - ~-, , ~., ..,~ _ .., ~, ... 5- ..1£-~
... .... .. · · ·· .~ .. .
:::.... .......· - -· ··· e-.... ,...., . .. . :::..c:~-; ~;;;
,..... a .. 4 , .... .......... ( . Oil ,_. ..,...
2.
Navigation 1 41.
Create a table with HTML to hold navigation buttons and text links
Summary: Tables created with HTML tags canform an invisible grid that can hold text or graphics.
Which tour would you like to take first?
42. ,Chapter 2
11111!11 £di1 Mode
New...
lllN
l'lece... "'\"
\aue lls: ...
\nue t1 Copy ...
neoert
R'qulre
[IIJlOrt
fiii· IMo ...
t·agc \e tutL.. l'tlut ...
Preference' .,
Qull
lllQ
la.
G o.mtnt.Oont
T able tags are a n important part of Netscape's extensions to HTML. Table cells can be used to form columns of text, which are otherwise impossible to create wi th HTML. For the Mobius Ga llery ho me page, Men·y discovered that a table offers a convenient way to line up button graphics and text links-each is in a separate table cell with the borders tumedoff.
1. Use Photoshop to crop button graphics.
Because the button graphics will occupy table cells, crop them into ide ntical-sized rectang les, using Photoshop's Info pale tte.
a. Open Photoshop. and select Open from the File pull-
down menu.
....
I ~ UJt l> uank l h perzo ·I
~ 1\P\ Of l·tf~ ..,
~ ~
~
c:::EE:'J flll l~l:~ ronnol: PUI IU"
0 \how lhumbnell 0 Sho w
1b.
" " Polc ttc Options ... II "/, ~
1d.
b. Select a graphic in the dialog box that appears, and click on Open.
c . Select Show Info from the WindowiPale ttes pull-down menu.
Nf'U· IlhndOIII
l uom In
luom Ou t :r--
/uom Fur1 o r·...
Sl\ou· Orus hes Sllow Options
r- - - - show Plck:er Show Swa tch es Show Scr otc ll
llil1e l D!JCf$ Slloto Ch hnncl s Shorn Pat hs
I
Show Comm o Hlf
1c.
d. The Info Palette will appear as a floating palette in the Photoshop work area. C lick on the Info Palette's pop-up menu to select Palette Options.
e . Click on the Mouse Coordinates Ruler Units pop-up
menu to select Pixels. C lick on OK.
Info Options
r- rlrst Co lor Re a dout
18] Show firs t Color Oeodout
I · I Mode: nctunl Col or
II OK 1
( Concel )
1 Setond Co l or Readout
[8} Show Secon d Col or nc odout
· I Mode: ] AGO Color
,-Mouse CoonJinnt cs ~ S ho w M ouse Co or din a t es
1o.
l nch c' Cc n llrnctcrs Poi nts Plcn s
1-
143. Navigation
f. Select t.he rectangle marquee in the Photoshop Too lbox.
g. D rag a selection rectangle around your graphic.
u. h. Note t.he Width and He ig ht measurements in the Info Palelle-you'Il need these measuremems to crop your other bu tton g raphics.
;,
1g.
Info
R:
/ , G: 8:
C:
, 11: g ·· Y:
K:
Uil1ll Modo Im age
Undo Marquee liZ
Cut Copy r11H I [' flos tr lnln I'll~ tr tolJt·r ... Cle nr Fill...
Stroko ...
I IIH
XC
"'"
"
( n·uh· Publisher ... fltJIJil sller OptiOn\. ...
Ueflnc l'o Hem Take Snnpshol
11.
118 89
1h.
i. When you' re satisfied with the selection rectangle, select C rop from the Edit pull-down menu.
j. You wi ll need to repeat t.hese steps for a ll of your butto n g r aphi cs .
1j.
44. ,Chapter 2
llprn. .
"'.'II
f'oge t e htp... f>fUI1 .. .
2a.
l oplice .gll
I f ormal : f'I CJ f ile 2b.
c::::) IU"S ()k.-.e- · 1
~ ~ I l Nttll.l CJ
·I
Simplt?Tex t
5.
2 . Save the graphic. a. Select Save As from the F ile pull-down menu.
b. Type in a fi le name and add GIF as an extension. c . Press on the Format pop-up box, and select CompuServe
GIF. Click on Save.
Photoshop 2.5 Phot othop 2.0 Rmlgn 1rr DMr
EI'S I illll~lril·
.wn .
Koc lllk CM\ Photn [II M aCPC'Ihll PC II
c:::::J nPS Dr~.~e···s: J
l ( I lcct l ( Desktop
Nom CJ )
Concel
Snuc
PI CIIlc so urcc
1' 11 10 11
2c.
PilteiP nln t
RDIIJ
Scttcu (1 Tnrgo
Tlrr
3. Open SimpleText.
Use Simp leText or a word processor. If you use a word processor, be sure to save the document as Text Only.
4. Create a new HTML document.
Start a new document with the fo llowing markup tags:
<HTI1L> <HEA D> <TITLE>Hobi us Gall ery </ TI TLE> <! HEAD>
5. Add a BODY BACKGROUND tag.
Merry used a small tile with a pa per texture for the Mobius Ga llery background. Whe n you list a GIF or JPEG image in the BODY tag with a BACKGROUND attri bute, Ne tscape a nd Interne t Explorer will automatica ll y tile it to fi lithe background .
<HTML> <HEAD > <TIT LE>Mobi us Gal lery </ TITL E> <! HEA D> <BODY BAC KGROUND-"paper. j peg"> <!BODY > <I HTML>
145. Navigation
6.
46. /Chapter 2
6. Add an image tag. The IMG tag contains a source, or SRC parameter, which contains the name of an image fil e. In this example, the image is the splash screen that Merry designed for the Mobius Gallery (Figure 6) .
<HTt1L> <HEAD> <TI TLE>Mob ius Gal l ery<ITITLE> <!HEAD> <BODY BACKGROUND- "paper. j peg'' > <JMG SRC-"Gallery3 . jpeg"> <!BODY> <IHT ML >
7. Add a table tag. The <TABLE>.. .<!TABLE> tag is the principle tag used to begin and end a table.
<HTML > <HEAD> <TITLE>I·1obi us Gall ery<IT ITLE> </ HEAD> <BODY BAC KGROUND- "pape r. j peg"> <l MG SRC- "Gal le ry3 . jpeg "> <TABLE> </TABL E> <!BODY> <I HTML>
8. Add a table row tag.
Use a table row tag <TR> each time you define a new row. (Note: Merry used this tag twice in her HTML document because her table has two rows.)
<HTI1 L> <HEAD> <TI TLE>Mobi us Gal l ery</TIT LE> </ HEAD > <BODY BAC KGROUND- "pa per . j peg "> <I MG SRC-"Gal l ery3 .jpeg"> <TAB LE> <TR> <!TABL E> <!BODY> <IHTM L>
Tip: An HTML specification is currently under development that will add typographic controls to HTML IVitlr style sheets. For more information, stay tuned to http:!!IVIVW. w3.orglltypertext/ WWW IArena!wy/e.htm/.
9. Add table header tags.
The table header tag <TH>. ..<fl'H> is used to define text or graphics that will appear in data cells. In this sample, Merry used the tab le header tag to define a row of images fo llowed by a row of text. (Note: The table header tag <TH>... <ITH > is ve1y similar to the table data tag <TD>... <lTD >. Although both function the same, the table header tag has a default BOLD FONTand a default
ALIGN=CENTER, which was useful in this sample.)
<IHI-1L> <HEA D> <TITLE>Mobius Gal l ery</T ITLE> <I HEAD> <BODY BACKGROUND-"pape r . j peg"> <It-IG SRC-"Gallery3.jpeg"> <TABLE> <TR> <TH><A HREF-"toc .html ">< IMG SRC-"optical.gif"><IA><ITH> <TH ><A HREF-"toc2. html ">
<IMG SRC-"optica2.gif" ><IA><ITH> <TH><A HREF-"toc3. html"l >< HIG
SRC-" opt i c a 3 . g i f " > <IA><ITH> <ITR> <TR> <TH ><A HREF-"t oc . ht ml" >Sc ul ptur e<IA><ITH> <TH><A HREF-"toc2. html ">Painti ngs</A></TH> <TH><A HREF-"toc3. ht ml" >Graphi cs<IA><ITH> <ITAB LE> </BODY> <IIHM L>
\47. Navigation
Which tour would you like to ak~ flrR? l Oa .
Which tour would you llkt to ake fll'll? lOb.
10. Use the WIDTH attribute to widen cells. The default width ofeach of the table cells caused the entire table to look too nan ow (Figure JOa). By experimenting with the WIDTH attTibute in the table header tag, Merry was able to widen the table across Lhe page (Figure lOb).
<HTML> <HEAD> <TITLE>Mobius Galle r y<ITITLE> </HEAD> <BODY BACKGROU ND- " pa pe r. j peg " > <I MG SRC- " Ga l leryJ . jpeg" > <TABLE> <TR> <H I WIOTH-160><A HREF- "toc . html " >
<IMG SRC- "optical.gif" ><IA></TH> <TH WI DTH- 160><A HREF- " toc2. html " >
<IMG SRC- "opti ca2 . gi f " ><l A><I TH> <TH WI DTH- 160><A HREF- " tocJ. ht ml ">
<IMG SRC- "opticaJ.gif" ><IA><I TH> </ TR> <TR> <TH WTDTH- 160><A liREF- " toe. html">Scu1pture</ A><ITH> <TH WIDTH- 160><A HREF- " toc2 . html ">Pa i ntings</A><I TH> <TH WI DTH- 160><A HREF- " toc3. html ">Graphi cs<l A><ITH> </TR> <!TABLE> <!BODY> <I HTML>
48. 1Chapter 2
Which tour would you lite to !:Ike first?
! ~~ ~ ~
= ·· · : wul.ll
- ~~
1 - ntttAka -- - j
11a.
11b.
11. Use the BORDER attribute to turn borders off.
By default, the tab le header tag and the image tag add borders that Merry needed to turn off (Figure I Ia). Use the
BORDER attribute in both tags to make the borders disa ppea r (Figure II b).
<HTM L> <11EAD> <TlTLE>Mobius Gall ery</TITLE> </ HEAD> <BODY BAC KGROUND-"paper.j peg"> <lMG SRC- "Ga1 1ery3 . jpeg"> <TAB LE BORDER- 0> <TR> <TH IHDTH- 150><A HREF-" toc .html" >
<HIG SRC- "optic al. gif" BORDE R-O><IA><ITH > <TH WIDTH-150><A HREF-"toc2 .h tm1">
<l MG SRC-"optica2 . gif " BORDER- O><IA></TH> <TH WIDTH-1 50><A HR EF- "toc3.htm1">
<l MG SRC- "opt i ca3.gif" BORDER-O><IA></TH> <!TR> <T R> <THWIDTH-150><A HREF- " toc.html ">Sc ulpture<IA><ITH> <THWI OTH- 150><A HREF- " toc2 . html" >Paintings<IA><ITH> <T HW!DTH- 150><A HREF- "toc3.html" >Gr aphics<IA><ITH> <ITR> <!TAB LE> <I BODY> <IHTML>
J49. Navigation
12. Add line breaks. The line break tag <BR> adds space below the table.
<HTML> <HEAD> <T ITLE>Mobius Gal l ery</TI TLE> </ HEAD> <BODY BACKGROUND· "pa per . j peg">
<Jt.1G SRC·"Ga11 ery3. j peg'' ) <TABLE BORDER·O> <TR> <TH WI DTH·l50><A II REF· "toe . html "> <IMG SRC·"optical.gif" BORDER· O><IA> <ITH> <THWIDTH· l50> <A HREF·"toc2 .ht ml" >
<IMG SRC·"opti ca2 .gif" BORDER·O></A><ITH> <THWIOTH· l50 ><A HREF·"toc3. html ">
<IMG SRC·"optica3 . gif" BORDER·O><IA><ITH> <ITR> <TR> <TH WI DTH·150><A HRE F· "toc.html ">Scul ptu re<IA><ITH> <TH WIDTH·l50><A HREF· "toc2 .ht ml">Paintings<IA><ITH> <TH WIDTH-150><A HREF· "toc3. ht ml "> Graphics<IA><ITH> <ITR> <!TABLE> <BR> <BR> <! BODY > <I HH1 L>
50.,Chapter 2
Tip: Providing a signature area aids in interactive design by encoumging viewers to send commems, questions, or suggestions about your Web site.
13. Add the signature area.
IL's customary to add a signature area at the bottom of each
Web page. This area contains contact information separated from the rest of the page with a horizontal rule <1-ffi>.
<HH1L> <HEAD> <TITLE>Mobius Gal l ery</TITLE> </HEAD> <BODYBACKGROU tlD- "paper. jpeg">
<IMG SRC-''Gallery3 .jpeg"> <TABLE BORDER-0> <TR> <TH WIDTH- lSO><A HREF- "toc . html"> <IMG SRC-"optical.gif" BORDER-O><IA><IT11> <Tit WI DTH-lSO><A HREF-"toc2. html">
<It~G SRC-"op tica2.gi f" BORDER-O><IA><ITH> <TH WIDTH-lSO><A HREF-"toc3.html">
<IMG SRC-"optica3 . gif" BORDER-O><IA><ITH> <ITR> <TR> <TH WIOTH-lSO><A HREF- "toc.html ">Sculpture<IA><ITH> <TH WIDTH-lSO><A HREF-"toc2.html">Paintings< / A><ITH> <TH WIDTH-l SO><A HREF-"toc3 .html ">G raphics<IA><ITH> <ITR> </TABLE> <BR> <BR> CIIR> <A DDRESS> Merry Esparza ca n be co ntacted at:<BR> Merry Esparza Design<BR> <!A DDRESS> <A HREF- "mail to: webma s ter@ref . com">
webma ste r@ref. com< IA> <!BODY> C/ HTHL>
151. Navigation
52. 1Chapter 2
14. Summary of HTML tags used in this section. The tags you sec in this list (in alphabetical order) reflect the HTML3.2 specificmion.
<A> . . . <IA> Refe1Ted to as ananchor, this tag uses the HREF atuibutc to link to an external fi le. For example:
<A HREF· "toc. ht ml" >Scul pture<IA>
(Note: The HTML.file name must include the path name ({ the.fi/e is located in another directory. )
<ADDRESS> . . . </ADDRESS> The address tag provides a means of signjng your Web page. The information inside is specially formalled and provides Web visitors with information about who created the page and who they can contact. This tag occurs at the borrom of a Web page, in a section known as the signature.
(Note: It is Cttstomal)' to add em email address to the signalllre and to use a MAILTO URL. By building a/ink with an email address and by adding the MA ILTO URL to the HREF attribute, viewers get an empty emailfo nn 111itli the address alreadyfilled out whenever they click on the link.)
<BODY>. ..<!BODY> A tag used to open and close the body of a documelll.
<BR> A tag used to break a line. This tag does not require an ending tag.
<HEAD>...<!HEAD> A tag used to open and close the header portion of a document.
<HTML>...<IHTML> A tag used to open and close an HTML document.
<HR> A tag used to create a horizontal rule. Thi s tag does not require an ending tag.
Tip: Derrick Smith, a Visual Basic programmer/ rom Provo, Utah, collaborated with artist Frank Decrescenzo and built a popup navigation menuf or the Slappers Web site using Microsoft's ActiveX. Look fo r details about Slappers, a new,.flat drumstick in the Fonns chapte1:
<IMG> Used to refe r to an image, this tag uses the SRC=" .. ." all.ribute, which represents the the URL (location) of the image. For example:
<IMG SRC- "optica3 . gif"> This tag also uses the BORDER attribute, whic h can be used to turn off the border around a graphic used in a link. For example: <IMGSRC-"opt ica3 . gi f BOROER-0>
<TABLE>.. .<ITABLE>
A tag used to describes the beginning and end of a table. This tag uses the BORDER attribute to control the width of the border. For example: <TABLE BOROER-0> or <TABLE BOROER-1>
<TD>.. .<ITD>
A tag used to describe the contents ofa table cell . (Note: In Netscape, the contenls oj1he Table Data cell are ALIGN=LEFT. )
<TH>. . . <ITH>
A tag used to describe the contents of a table header cell. (Note: The contel/Is ofthe table header cell are bold and center-aligned by default.) Both the table data <TO> and the table header <TH> lags accept the WIDTH attribute. For example: <TO WIDTH-160> <THWIDTH- 160>
<TITLE> ...<!TITLE>
A tag used to describe the title o f a document, which shows up inside a browser's title bar.
<TR>...<ITR>
A tag used to describe a table row.
Navigation I53.
Internet cafe owner John Scott shares tips on creating frames
S ummary: Use a two-frame layout to create a table ofcontents window and a window to display linked documents. By organizing a Web site's content in this way, frames become a navigation device.
54. , 2 Chapter
T he frame layout has become very popu lar o n the Web. Much like panes in a w indow, th is layou t a llows you to di vide a page in to rec tangular frames . You can:
· specify a unique HTML docum e nt to fi ll eac h frame · c reate indepe nde nt links in a frame
· create links in o ne frame to change content in another frame
John Scott, who own s a n Internet cafe in New York's East Vil lage, used a two- frame layout on the cafe's Web s ite. The first frame acts as a n index or tab le of contents co ntai ning links to conte nt that is disp layed in th e second frame.
1. Overview.
To create his document, Jo hn created three separate 1-JTML documents.
a. Defining frame document, o r compound document b. First frame document c. Second frame document
The nextthree sections provide step-by-step examples of how
each of these component documents are assembled. (Note: If
you wish tof ollol\lthe steps in this section, you may use the images pmvided in the alt.cojfeefolder on the CD-ROM in the back of 1his book.)
First frame
Above: Jolm Scott used small JPEG images as links in thefirst.frame. With irs OW/I scmll bar and links to content in the secondfram e, this frame acts as an index or table ofcontents.
1a,lb, 1c.
Second frame
Defining frame document
2. Create the defining frame document.
The defining document, or compo und document, uses the <FRAMESET> tag to open and close a set of frames. This tag replaces the <BODY> tag in an HTML document and defines the number and s ize of frame s on a page. Web designers will notice that a frame document never has a <BODY> tag.
Ins ide the <FRAMESET> tag, John used the <FRAME> tag to define each frame. Following the < FRAMESET> tag, he added the <NO FRAMES> tag to disp lay content viewable by browsers that do not support fra mes.
a. Open SimpleText. Use SimpleText or your word
processor. If you use a word processor. be sure to save the doc ument as Text Only.
Jss. Navigat ion
Above: The "Links" graphic inside the alt. coffee table ofcontentsframe. B elow: A click on the Links graphic displays a " Links" content page. Designed for Web newbies, "Links" contains a sampling ofinteresting places to visit.
b. C r eate a new HTML document. Start a new docume nt with the following markup tags:
<HTH L> <I·IEA D>
<TI TLE>alt . coffee ... coffee . computers. comfy chairs .
</TITLE> </ HEA D>
c. Add a <FRAlVillSET> tag. Inside a <FRAMESET>
tag, a COLS attribute may be used to create columns, or a ROWS attribute may be used to create rows. Although both can be used in the same <FRAMESET>, it is best to keep the number of frames to a minimum. (Note: Frame documents IVith too manyframes have a histOI)' ofmaking broiVsers crash.) In this example, John used the COLS attri bute to create a two-frame layout.
Colum n width may be set with an equal sign followed by an absolute pixel va lue, percentage values between I and I00, or a relative scaling value where an asterisk represents the remaining space.
Examples:
<FRAHESET CD LS-"3D'.t .70%> <FRAHESET COLS-"120.*"> In the following source code, John Scott used an absol ut e pixel value fo r the first frame followed by an asteri sk that causes the second frame to fi ll the re maining space. (Note: There is no space after the comma. )
<ftni L> <HEAD>
<T ITLE>alt . coffee ... coffee. compu te r s . comfy chairs .
</TITLE>
</ HEAD> <F RAMESET COLS-"120,*">
56. , Chapter 2
Rrst frame (and other content frames) contains an <A HREF='"doc.htm' BASE TARGET = "name"><IMG SRC= "image.jpg"> </A> tag
d. Add a <FRAME> tag. A <FRAME> tag defines a single frame. For his two-column frame layout, John needed two <FRAME> tags. Inside a <FRAME> tag, he added: · NAME attribute, whic h lets you assign a unique name to a frame. Name a frame and then refer to it by name with the BASE tag and TARGET attribute in conte nt frame documents. This direc ts content into a frame. (Nore: See C reate the fi rst frame document for an example ofhow the BA SE tag and TARGET auribLile are used.) · SRC att ribute, whic h refe rs to the source HTML document. · NORES lZ E attribute, which prevents visitors from dragging the divider bar ro resize a fra me. · MARG lNWIDTH and MARGlNHEIGHT attributes, which allow you to specify the di stance from the edge o f a frame to the conte nt inside the frame. · SC ROLL attribute allows you to control whether the scro ll har appears in a frame. Set thi s to either auto. yes, or no. The default for this attribute is auto. This means the scroll bar appears if the content extends beyo nd the edge of the frame.
Second frame
Defining frame document con tains a <FRAME NAME="name"' SRC="doc.htm"> tag
js7. Navigarion
·
Above: The Info graphic inside the alt.coffee table ofcontentsframe. Below: A click on the Info graphic displays all llljonnatioll content page. This page is desig11ed to hold detailed information about the cafe.
Notice John 's two <FR AME> tags reside within the <FRAMESET> tag:
<HTM L> <HEAD>
<T ITL E>a l t .coffee . . . coffee . compute rs . comfy chairs .
</ TI TL E>
</ HEAD>
<FRAMESET COLS·"l20.*">
<FRAME NAME· "menu " SRC· "menu.h tm" UORES IZE MARGUIWIDTH-"0" MARGINHEIGHT· "O" SCROLL· "yes">
<FRAME NAME· "main" SRC· "home .html- ssi" NORES I ZE MARGINWIDTH· "O" MARGINH EIGHT- "0" SCROLL· "yes ">
</ FRAMESET>
e. Add a <NOFRAJ\IIES> tag. For " frames-challenged" browsers, John added a <NO FRAMES> tag. His message inside this tag directs visitors to the Netscape site for a Nav igator down load.
<tm1 L>
<HEAD >
<TI TLE>al t. coffee . .. coffee . computer s . comfy chairs .
<!TI TLE>
</ HEAD>
<FRAHESET CDLS·"l 20 ,*">
<FRAt~ E tiAME· "menu" SRC·"menu. ht m" NDRESIZ E MARGINWIDTH- "0" MARG INilEIGIH· "O " SCROLL· "ye s">
<FRAH E NAME· "main" SRC· "home .ht ml " UORESIZE MARG lfiW IDTH· "O" MARGIUHEI GHT·"O" SCROLL· "yes ">
<I F RAt~E SET>
<tlOF RAM ES >
58. Chapter 2
Above: The Flotsam graphic inside the alt. co.ffee table ofcontentsjrame. Below: A click on the Flotsam graphic displays a list of/in ks to Shockwave and other entertainment pages created by Lan)' Rosenthal, owner ofCube Productions, Inc.
<Hl ALIGN-CENTER<BL INK>F rame ALERT! <I BLINK> <IHl>
<P>
This document is designed to be viewed using <B>Netsca pe 2.0 </ B> ' s
Frame feature. If you are see in g t hi s messa ge, you are us ing a frame <I>c hallenged<II > browser.
<P>
Please. try our <A HREF- "http: //www . a1tdotcof fee .com/ home.html-ssi ">un-framed<IA> page or . ..
<P>
a <B>Frame -capab l e<IB> browser ca n be downloaded from
<A HREF- "http:// home. netscape . com/ ">Uetscape Communications <IA> . <IP>
<I NO FRAMES> f. Add a n ending tag. Comple te the HTML document by
adding an e nding tag.
<I IHM L>
g. Save the file. Save the documen t in SimpleText or your
word processor. If you're using a word processor, save the text as Text Only. Give the fi le an .HTM extension.
3. Create the first frame document. The fi rst frame docume nt or table of contents page may comain either text or graphic links to conte nt on the rest of the site. John used small images as links.
a. Open SimpleText Use SimpleTex t or your word
processor. If you use a word processor, be sure to save the document as Text Only. b. C reate a new HTML document. Start a new docume nt with lhe following markup tags:
Navigation I 59.
l · W 0 R l D " - · ,...,.,. q"'"'"·l· · · ~
Above: Premiere World is the cosp01tsor o.fCyberc!till, a monthly flll em et social evemt!tat meets at aft.coj}"ee. alt.coffee is also a sponsor and tlte event isf ree to interested cafe-goers. For details about upcoming Cyberclti/1 meetings, check tlte Premiere Word link on tlte alt.coffee home page at Itttp:IIIVW\11.a/tdotcoff'ee.COlli.
<HTHL> <HEA D>
<T ITLE>ico n menu for alt.coffee<I TITLE> </ HEAD>
c. Add background color and text color. (Note: See the Online Tools chapter.for details concerning color codes.)
<HHIL> <HEAD>
<TI TLE>icon menu f or alt. coff ee</TIT LE>
</ HEAD> <BODY BGCOLOR·"#OOOOOO" TEXT·"OOB27F"
VLlllK· "i/008 27 F" All tl K· "IIFF006E"> d. Add a center tag. To make sure the links in the table of
contents column are centered, use a <CENTER> tag.
<HTH L> <II EAD>
<T JTL E>icon menu fo r alt. coffee</TI TLE>
<I HEAD>
<BODY BGCOLOR· "i/00000 0" TEXT· "00827F" VLI NK·"IIO OB27 F" All tlK· "iiFF006E">
<CENTER>
e . Add an anchor tag. In this example, John's fi rst image in the first frame is a link to the alt.coffee home page. Whenever there's any other content di splayed in the second frame, a click on this link will display the home page content. To create th is link, add:
· an 1-1 REF attribute and the name of the external lile.
· BASE and TARGET attributes to direct content in to a named frame. (Note: See Creating a defi ning frame documentfor an example ofnaming aframe. )
· an image Lag with a SRC attribute referencing an icon, a BORDER=Oattribute to turn off the border around the icon, and an ALT attribu te referencing text for browsers that cannot see images.
60., Chapter 2
l;:l"~.t...a.~CL::L.(.~.I
U..<' L.6..ll .L:.:-I.J1Y..J.D1.11,·~l
~1"-C'··-·
tcro~ · - tt t:.~4-
...- ·A:J~-· .._....,~
.......,...,_ _ ··. I .JUSV
..... _ _ _ c..,,.._.. .,..._._...~f10"'
(",),_Oo hll!l..,..&,- ~ 19ft.l- Alii
._,· ..._..,_,. w. _ _..,.,_._.._.,,...,.,. _ ...-,..._, .....,...... ..,.... .
,.._,. ... C'Mo,.-·..... ·-
Above: !HUNK, a digi1al enterwinment sile on !he Web, is produced by Cube Productions, Inc., a New York-based new media finn. Cube owner Larry Rosenthal is a 3D world builder and new media designer who also chairs the NYVRMLSIG, which meels a! all. coffee. For details about !he NYVRMLSIG, check th e tHUNK link 011 the alt.coffee home page.
<Hm L>
<HEAO><T ITLE>icon menu for alt . coffee</ TI TLE>
</HEA D>
<BODY BGCOLOR- "11000000" TEXT- "IF00827F" VLI~K-"IF00827F" ALIHK-"IFFF006E" >
<CE NT ER><A HR EF- "home .h t ml" BASE TARGET- "ma in" >< IMG SRC-"home_icon.j pg" BORDER-0 ALT- " HOHE " ><IA><ICENTER>
f. Add line breaks.
<HH1L> <HEAO><TITLE>icon menu for al t.coffee</TI TLE>
<! HEAD>
<BODY BGCOLOR- "#000000" TEXT-"#00827F" VLI NK-"II00827F " ALINK- "f/FF006E" >
<CE NTER>< A HREF-"home .html " BASE TARGET-"main">< IHG SRC-"home_i con .jpg" BOROER-0 ALT- "HOHE"><I A> </CENTER>
<BR >< BR >
g. Add centered, decriptive text beneath the icon. (Note:
Add more line breaks beneath the new text.)
<HT11 L> <HEAO><TIT LE >i con menu for alt. coffee< / TITLE>
<! I·IEAO>
<BODY BGCOLOR-"#000000 " TEXT-"II00827F" VLl NK- "I/00827 F" ALI NK-"fiFF006E" >
<CENTER>< A HREF-"home.html" BASE TARGET- "main">< IHG SRC- "home_i con.jpg" BOROER-0 ALT- "HOHE"><IA></CENTER>
<BR>< BR> <CE NTER >h o m e< / CENTER>< BR><BR><BR>
161. Naviga1ion
Above: 3D world builder Lany Rosemhal crea1ed lhe 3D scenes for alt.coffee's Palace site at toulouse.jlotsam.com. In addition to virlual scenes ofthe real cafe, a back door leadsfrom the alt.coffee back room to an elaborate underground lounge accessible through a door 011 a virtual subway platform (lookfordragons).
h. Add more images and text to the first frame. By con-
tinu ing to add small image links with line breaks to the fi rst frame document, the docume nt will form a vertical ta ble of contems. (No te: Due to space constraints, only
two oflhe seven alt. coffee ico11links are listed. Ifyou
are creating your own frame document with the images provided 011 the CD-ROM in the back ofthis book, you mayfollow these sample links to create the remaining links in the table ofcontentsframe. Notice that the HTML in each new li11k is the same, except for the ico11 .file name and the descriptive le.xt.)
<HT ML > <HEAD><TITLE>icon menu for alt.coffee</TITLE>
<! HEAD>
<BODY BGCOLOR-"1/DOOOOO" TEXT-"I/00827F" VLI NK-"I/00827F" AL!tiK-"I/FF006E" >
<CENTER><A HR EF-"home. html" BASE TARGET-"main" >< IMG SRC-"home_icon.jpg " BORDER-0 A LT-"HO~\ E " ><I A><ICENTE R>
<BR><BR>
<CENTE R>h o me</CENTER><BR><BR><BR>
<CENTER ><A HRE F-"ta l k. htm" BASE TARGET- "main"><I MG SRC-"ta l k.j pg " BORDER-0 ALT-"ALT. COFFEE TALK"> </A><ICE NTER>
<BR>< BR> <CE ~TE R>alt.co ffee talk </CENTER><BR>< BR><BR> i. Add the e nding tag. <!HTML> j. Save the file. Save the document in Si mpleText or your word processor. If you're usi ng a word processor, save the text as Text Only. Give the fil e an .HTM ex tension.
62., Chapter2
Above: Ln1e in 1996, a11.coffee was the .fir.st stop on Blar.kSw1 lnte ma1iona/'s virrual scavenger hum. 8/ackSun built VRML versions ofsevera/ Jn1eme1cafes ac ross the country and contesta fll s were asked to search for "cyberium c1ystals" hidden in each ofthe caf es. The.first contes1ant 10 find crys1als at alithe cafes won a trip 10 Spain.
4. Create documents for the second frame. A conte nt document is similar to any ordinary HTML document. The document described below is the all.coffee home page, which links to the icon at the top of the table of contents frame. (Note: This documefll is saved as ASCi! text on the
CD-ROM in the back ofthis book. )
a . Open SimpleText. Use SimpleText or your word
processor. If yo u use a word processor, be sure to save the doc ume m as Text Only. b. Create a new HTML document. Start a new document with the followi ng markup tags:
<HHIL> <HEAD>
<TITLE>a l t . coffee ... coffee. computers. comfy chairs .
<!TITL E>
<! HEAD> c. Add a background color and a text color to the
document.
<HTH L> <HEA D>
<T ITLE>alt.coffee ... coffee. compu ters. comfy chairs .
<!TITL E>
(/ HEAD>
<BODY BGCOLOR-"(IDDOOOO " TEXT- "IIFFFFFF" >
d. Add text and images. ln this example, John used the fo llowing elements: · Font tag to change tex t size using the SIZE attribute, setting the font size relative to the base font size. Example:
<FONT SIZE-+1 >
This sets the font one size larger than the base fonl.
163. Navigation
Above: 3D world builderAlex Shamson has been creating VRML models since 1994. His Virtual Reality Mall at http://www.vrmill. com/Shopping.htm resides on the alt.coffee sen1e1:
· Anchor tag with a BASE TARGET="-TOP" attribute to make a lin ked page open in a new browser window. Alternati vely, you can make a browser open a new window if you make the TARGET the name of a frame that does n't ex ist. Examples:
<A HREF-"h ttp://www.bl acksun . com/cybe rrout e96 . h tml '' BASE TARGET-" _ TOP">
or
<A UREF-"h ttp:// www.bla cksun . com/cybe r route9 6 . html" BASE TARGET-"n ew" >
A new window will open in front of the current page, which will be left on the screen. o Paragraph Lag with an ALIGN=CENTER attribute making text centered on a page. Options are LEFT, CENTER, and RfGHT. o MAfLTO URL, which is used in an email link and usually placed at the bottom of a page. Viewers who click on a link contai ning a MAILTO URL will get an empty email fo1m with the address filled out.
<HHI L> <HEAD>
<T I TLE>alt.coffee ... coffee. compu te r s . comf y chairs.
<!TITLE>
</HEAD>
<BODY BGCOLOR- " fJOOOOOO " TEXT-"f/F FFFFF">
<P ALIGN-CENTER>
< ING SRC-"wor ds. jpg" BORDER-0>
<P ALIGN-CE tiTER>
< IHG SRC-"dan ce. gif" BORDER-0>
<P ALI GN-CENTER>
<FONT SIZE-+l> Are you <I>SHOCKED<II >?
I 64. Chapter 2
Above: 3D world builder Lany Rosemhal is chairman ofNew York's VRMLSIG, which mee1s at alt. coffee. His 1H UNKWORLD VRML may be accessed tluv ugh links onlhe alt.co.lfee serve~:
Play alt . coffee ' s <A HREF- "http://www .altdo t coffee .com/shock .htm">a nimated homepage<J A>... </ FONT> <P ALIGN- CE NTER> <FONT SIZE-+l>There's a lo t go ing on t his mon th . .. hit our <A HREF-" /CALEIWE R.HTM" >c a1ender of events<IA> for a comp l ete l isting.
<P ALIGN-CE NTER> <FONT SIZE-+l>Get wi red wi th the regulars at our <AHREF-" http://www. al tdotcoffee .com/palace . htm" >
Palace<JA> site i</FONT>
<A HREF- "http://www.blacksun.com/cyberrouteg6 .html " BAS E TARG ET-"_TOP" >< IMG SRC-"l ogo.gif"
ALT-"cyberroute 96" BOROER-O><IA> <P ALIGN- CENTER> <FONT SIZE-+2>Enter t his <A HREF- " http://www.blacksun .com/cyberroute96 .ht ml" BASE TARGET- "_TO P" >vi r tual scavenger hunt<JA> and <FOIIT COLOR-"UFFFFOO ">IH N</FONT> a t rip SPAIN ! </FONT>
<P AL IGN- CENTER> <A HREF-" /altcoffe .wrl">vrml . coffee<IA> <AHREF-" /pa1ace.htm" >Pa1ace< IA>
<A HREF-" /1inks .htm">L inks<IA> I
<A HREF - "/rea 1ity. htm">Rea 1ity</A>
<A HR EF- " /info.htm">Info< /A>
<P All GN-CE NTE R> <A HREF - "http:/ / www. f lo tsam.com" BASE
TARGET-"_TOP">Visit flotsam.com<IA> I
jss. Navigation
Above: An anchor tag with a BASE TARGET= "_TOP" attribute, created in an HTML document intended to beframe content, makes a linked page open a new windou1. An example is the link shown above, which opens a page containing information about 8/ackSun '.1· Scavenger Hunt.
<A HREF- "http: //www.premi ereworld.com" BASE TARGET-"_TOP">Go to Premi ereWor l d<IA>
<A HREF-"ht tp://www.th un k.com" BASE TARGET-"_TOP">Tune into tHUIIK !WORLD<IA>
<P ALI Gti-CENTER>
You are vict i m number 45 today and numbe r 25408 since Tuesday , Octobe r 29 . 1996 11: 52 : 23 !
<P ALIGII-CEIHER>
Any questions? Comments? E-mail me ... <A HREF-"MAl LTO: j etsam@fl ots am. com">webmaster @altdotcoffee.com</A>
<P All Gti-CEtH ER> <FOIIT SIZE-·2>All Rights Reserved . llo commercial
usage of any part of this Website permitted without the wri tten permi ssion of al t . coffee. Inc. © ; l995</FONT>
e. Add the ending tags.
<!BODY> <IHT ML>
f. Save the file. Save the document in SimpleText or your word processor. If you're using a word processor, save the text as Text Only. Gi ve the file an .HTM extension.
g. Test the frame document. Open Netscape or
Microsoft 's Internet Explorer browser. Open your document by selection Open File from the File pu lldown menu.
66. \ Chapter 2
:.,......._...,~ " '"
Above: A link to the Word. com site accessed on the alt. coffee "Links"ji-ame.
5. Summary of HTML tags used in this section. The tags you see in this list (i n alphabetical order) reflect the HTML 3.2 specification:
<A>...<lA> Referred to as an anchor, this tag uses lheHREF attribute to link to an external file. For example:
<A HREF- "ht tp://www.blacksun.com/cy be r route96 .html " BASE TARGET-·'_TOP '' >< IMG SRC-"logo.gi f " ALT-"cyberroute 96" BORDER-O><IA> (Note: The HTML.file name must include the path name (( the file is located in another directory. See Create the first frame documentfor details concerning the a/tributes used in John's anchor tag.)
<BODY>... <!BODY> A tag used to ope n and close the body of a document. This tag uses the BGCOLOR auri bute to add color to the browser background, using standard color names and hexadecimal RGB triplet information in the forn1:
<BODY BGCOLOR-Blue> <BO DY BGCOLOR- "#fffff f" >
<BR> A tag used to break a line. T his tag does not require an ending tag.
<FONT SIZE=VALUE>.. .<IFONT> A tag uecl to change the default fo nt size. Values range fro m 1 to 7. T he tag can also be written wi th a preceding +or- to indicate a size that is relative to the basefo nt.
<FRAME>...<lFRAME> A tag used to de line a single frame. For example:
<FRAME NAHE- "menu" SRC-"menu.htm" NORES IZ E 11ARG INWIDTH- "O" HARGJ NHEIGH T-"0" SCROL L- "yes "> (Note: See Create the de li ning frame document/or details concerning the attribmes Jolm used inside the <FRAME> tag.)
Navigation j s7.
Above: A link to the Seattle CAM accessed 011 the all.coffee Li11ksjrame. This view ofSeattle is live a11d is updated eve1y minllle.
<FRAMESET> .. .</FRAMESET>
A tag used to de fine a set of frames. For example:
<FRAMESET COLS-"1 20 , * " >
(Note: See Create the defining frame document for details CO/lcem illg the attribwes Jolmused i11side the <FRAMESET> tag.)
<H2> ... </H2> <H3> ...<1H3>
Tags used to enlarge text, as to indicate a heading. Lower nu mbers indi cate larger type, and the optio ns range from <H I> through <H6>.
<HEAD> ... <IHEAD>
A tag used to open and c lose the header portion of an HTML docu ment.
<HTML>...</HTML>
A tag used to open and close an HTML docume nt.
<IMG>
Used to re ferto an image, this tag uses the SRC= " ... " attribute. wh ich re presents the URL (locatio n) of the image. This tag also uses the BORDER attribute, whi ch can be used to turn o fTthe border around a g raphic used in a link. For example:
<H1G SRC-"home_icon. j pg" BORDER-0>
<NOFRAMES>. ..<INOFRAMES>
A tag used to add text that viewers can see if they are using a browser that can't read frame code.
<P>...<P>
A tag used to indicate a new paragraph. U nl ike the <BR> tag, this tag adds line spacing. A n e nd ing tag is optional.
<TITLE> ... <ITITLE>
A tag used to descri be the title of a document, wh ic h shows up inside a browser's tiLie bar.
68. 1Chapter 2
Cha
Artist featured in this chapter:
Peju Alawusa is a graphic designer at Simon & Schuster in Ne w York City and has a degree in Advertising and Design f rom the Fashionlnstiwte of Technology.
peju_alawusa@ prenhal/. com
ltttp:/l!nembers.aol.conll alawttsalintro.hrntl
NetObjects Fusion
NetObjects Fusio n is a new Web page design tool for graphic designers who wish to avoid HTML tags. Page ele ments may be imported and placed on a page much like they're placed in a page layout software program.
NetObjects Fusion builds HTML tags in the background (tables). The so ftware is particularly useful for creating large sites because it provides centralized contro l over links as they 're updated.
In this c hapter, new media artist Peju Alawusa bui lds her own site and demonstrates NetObjects Fusion features by creati ng her resume. Additional NetObjects Fusion features may be found in Chapter 12. Artist Frank DeCrescenzo uses NetObjects Fusion to bui ld a site with image maps and a form.
A new Web page layout tool for designers
Summary: A Web page layout tool is now availablefor artists who really don't /ike HTML tags. It 's called NetObjects Fusion, created by NetObjects, Inc. (hup/lwlvllwetubjects.com).
NetObjects
FUSION~
Version 1.0
~ 1 996 N et Objec ts, Inc. Al l Hlght s Heserved NIY~
N etObjects, Inc. was founded in November 1995 by Rae Technology and Studio Arc hetype (formerl y Clement Mok Design). NetObjects Fusion is a unique new Web page layout tool that provides the ability to create Web pages wi thout HTML tagg ing.
1. 30-day software trial.
Download a 30-day lTial versio n ofNetObjects Fusion from http://www.netobj ects.com. Docume ntation is available as an optional download. The software is only available for one 30-day tri al and cannot be reinstalled.
2. Hardware and software requirements.
NetObjects Fusion is available fo r Power Macintosh or Windows 95/NT. To run the software on a Mac intosh, you must have: · A Power Macintosh with a CD-ROM dri ve. · LOMB of d isk space for a minimum installati on, or 60MB
of disk space for a complete installati on. · 16MB or RAM (24MB is recommended). · System 7. 1.2 or greater (System 7.5 is recommended). · Web browser software (an HTML 3.x complient browser).
NetObjects Fusion I 71.
Peju Alawusa's tips on creating Web pages with NetObjects Fusion
Nel scape: resume
~"ei ll (
1231.ofayetle avenue.113d brooklyn ny 11211 118·6Z5·6819
Above: Peju Alawusa 's home page colltaills a11 image map .l'he created in NetObjects Fusion To see her site on the Web, visit http:1/members. aol. com/alawusa/intro .html.
NetObjects Fusion
1a.
Objective To farther obtain profusional expmence mthe. fieldofmulwntdle. and othtc related vtsu.61 ens medJa
Expoience S1mon & Sc.husttr Oraplue dwiiJitt 1230Avenut ohht Al'E\uieas, Ne"' York ttl: 212 691H29:l Auguot 1995 ·Pre se.~t
Scholastic, lnC'. Graphic dtSIIIJitr 400 Lafaytne Strttt, New York Mar<h,199S·Jol-t1995
Amistad. Pren, Inc:. Grapluc Dts1gnu 1271 Avwue of the Americas, New Yolk ttl 212 5225270 JaniW)' 1994·Januezy 1995
Peju's resume is one of the pages she created for her Web site at http://members.aol.com/alawusa!illtro.html. ln much the sa me way a designer creates a page in a page layout program, Pej u positioned the page elements as draggable elements, and NetObjects created the HT ML tags. (Note: ({you wish to follow this example step-by-step, lookfor Peju'.1· art files 011 the compa11ion CD-ROM.)
1. Start NetObjects Fusion. a. Start NetObjects Fusion.
72. 1Chapter 3
b. A New site dialog box will appear on your screen.
(Note: If rhe New Sire d ialog box did not appeQJ; select
... ,
New Sitefrom the File pull-down menu.)
c. C lick on Lhe Select bullon.
d. In the dialog box thnL follows, select a folder whe re you
would like to save your site, and c lick on Save. (Note: If
you do nor selecl your own folder; NerObjecrs Fusion
will srore rhe site in a User Siresfolder inside the
1 b.
NerObjects Fusion folde l:)
1c.
\lll fl f111 11.11lle r.
0 1ll l i 0{J
~ ~
1d.
e. The path name to the folder you selected will be dis-
played in the Save Site fie ld on the New Site di alog box, as shown in Fig ure I e. A set o f Autosites and Page Te mplates accompany the N etObjects Fusion software. A list of AutoSites, Tutoria ls, and Page Te mplates are di splayed on the New S ite di alog box.
f. Type a name for your site in the field labeled Site Na me
at the top of Lhe New S ite di alog box, and click on OK. The site name wiII serve as a file name, which is given a .NOD extension. T he site name will also be used as the subfolde r name Lh at stores the NOD file and the site's a s s ets .
....... ",.,
...
1 e ,1f.
NerObjects Fusion 13.
--
g. A NetObjects Fusion Site screen will be displayed.
1 -·
(Note: The Site view will be where you create pages and
a structure.for your site.)
2. Review the default preferences. A review of the NetObjects Fusion default preferences will help you understand how the software works.
a. Select Preferences from the Edit pull-down menu.
1g.
b. A Preferences dialog box will appear, with the General
Preferences tab selected at the top of the dialog box.
lUI
··
[OJ"
fl
r·''"'
.,
\f'lt\1 ..1
·II
Nrwr.~
.. Oooleh, ro,.- ·· "
2a.
2b.
c. The default settings on this tab section include: · Autosave. Your site will be saved automatically. · Window maximized at Startup. Your opening screen will be a consistent size when you launch the software. · Preview Entire site. Pressing the Preview button will launch your selected Web browser and display the entire site. · WYSIWYG layout in Netscape browser: This optimizes your site in the Netscape browser.
d. Click on the Layout Preferences tab at the top of the Preferences dialog box.
74. ,Chapter 3
2e.
3a. Select Browser
3b.
e. The Layout Pre ferences page will be displayed. The
default settings on thi s tab section include:
· Times. The defau lt proportional font.
· Courier. The default monospace fo nt.
· Background Image Offset. Although this is not selected at startup, setting the background image offset in pixels wi ll add a border to the page di splay. Leave this unchecked.
· Snap to Grid. The defau lt setting is off. C lick to add a check.mark, and page elements wi ll align with the page grid.
3. Select a browser for Web page previews.
Select your Web browser in the Prefere nces dia log box. With a browser selected on your hard drive, NetObjects Fusion will be able to preview your page.
a. Cl ick on the Ge ne ral Preferences tab at the top of the
Preferences dialog box. b. Click on the Select Browser button.
c. In the dia log box that follows, locate the folder that
conta ins your browser software, and click on Open. d. In the dialog box that foll ows, select your browser soft-
ware, and click on Open.
c::::) uu·.:' "''
~ ( Drdctop I
Pufereun
3c.
3d.
e . The browser will be li sted below Current Browser in the Preferences di alog box.
Onvser Current OrG.,..,.r:
3e.
NetObjects Fusion 75.
4. Create Web pages and label them. a. Jn NetObjects Fusion's Site view, locate the New Page
bullon at the top of the screen. Notice that the home page icon is highlighted. indicating that it is selected.
Highlighted home page icon New Page button
L
4a.
b. C lick on the New Page button four times.
c. This wi ll create four "child" pages beneath the home
4b.
page, as s hown in Figure 4c. (Note: A triangle will
appear a t the bollom ofthe home page icon, indicating
rhat it is n parent. Triangles on the side ofa page icon
indicate the page is a sibling. Pages may be repositioned
at any time by dragging them.)
LJ ....... .......I...- ....- ...- ....- triangle
Unlitled
Unl ded
Ur lded
Un':ll'e d
4c.
76. Chapter 3
-.......
EJ ....... ~T0:::::0 UriUed
4d.
-Home
............ i....._....._
resume
poltl~llo
ln!eresl
Inu
4e.
d. Click on the word Untitled in the first child page you created, and type:
resume
Press the Tab key to move the highlighted outline to the second child page you created, and type:
portfol io
Press the Tab key to move the highlighted outline to the third c hild page you c reated, and type:
interest
Press the Tab key to move the highlighted outline to the fourth page you created, and type:
1inks
e. Click to select the page labeled portfolio, and click on the New Page button twice. Peju labeled the two new child pages advertising and misc.
f . Click to select the page labeled interest, and click on the New Page button three times. Peju labeled the three new child pages muzik, poet!)', and literature.
-Homo
T
........... ...... _ fHU:nt
pOif'Oikl
aOVI!Itl t!..
rr u c
rmr1t..
poetry
4f.
!11. NetObjects Fusion
g. Peju changed the label on the home page to Intm . (Note:
When you're building a large site, the display ofpage icons may be collapsed by clicking on the small triangles beneath the parent page icons.)
_.... .......
rasumo
po rllollo
.............
Interest
links
-lfl lro
- -lrterest
Urt.s
4g.
5. Change views, and add art to a page. The NetObjects Fusion Page view is the layout area where Web pages are created.
a. In the Site view, double-click on the page labeled
resume.
b. NetObjects Fusion's Page view will be disp layed. Notice
that the screen contains a defau lt page banner labeled
Sa.
resume.
Sb.
78. ,Chapter 3
c. Select the Selection Tool.
d. Click to select the page banner, and press the Delete key
Sc.
to delete it.
e. C lick to select the set ofdefault navigation bars, and
press the Delete key to delete the row.
Sd.
se.
f. Drag the page divider that separates the header from the body, and move it up to make more room.
g. Select the Picture Tool. h. Draw a picture box at the top of the page, as shown in
Figure5h.
sg.
Sf.
Sh.
J79. NetObjects Fusion
l humbnlll: Q SI!ow lbumbneil
~
IQ:,~;,~::~:~~eod2.glf
B lllOIIde ·ohoadl.glf.glf Q rnt;nu1Jar. Jf19 floelil UI IIII!!l.tJII D · uotnne.!Jif ;Ottllp/ ·uoh. 1r
I l.JtOlJ':
till Ulf!t
51, 5j.
oZlti i OO
C!I!!C) ~
· ,_,~ ·
. J· I ~ .
.
.
6k.
c-- o- o- ·C:i:J
f l . -- . . . _ ;
G':ll ·.:"1G:J
~
i. W hen you release the mouse button, an Open Fi le dialog box wi ll appear.
j. Use the File List window in the Open File d ialog box to locate your art or Peju' s image called resname.gij: C lick on Open. Interesting features related to how NetObjects Fusion handles images include:
· The software supports a wide variety of image formats, incl udi ng BMP, PICT, PCX, Photoshop, TGA, and Uncompressed TIFF. NetObjects Fusion will convert these alternative formats to GIF or JPEG. The software wi ll present a dialog box where you may select JPEG or GIF.
· P ictures may be cropped by changing the shape of the bound ing box.
· GIF images may be converted to tranparent GIFs inside the NetObjects Fusion software. The software's Transparency Tool may be used to select the color to make transparent.
k. The att wi ll lill the p icture box you've drawn, as shown in Figure 5k.
I. Repeat Steps 5g through 5k to impo1t Pej u's other image, called fiml.:y3.jpg, as shown in Figure 51.
51.
80. ,Chapter 3
6. Use the Draw Tool to create a rule. a. Select the Draw Too l. b. Draw a vertica l rule a long the length of Peju's second
&a.
image, as shown in F igure 6b. c. (Option) Use the Prope rties dialog box to alter the color
or weight of the rule.
6b.
7. Add text to a page. a. Select the Text Tool. b. Draw a text box, as shown in Figure 7b.
7a.
c. When you release the mouse button, you wil l see a blink-
ing cursor in the upper-left corner of the text box. Type: Obj ective
7c. 7b.
181. NetObjects Fusion
Tb r~:~h.ll~t;llltlcmno- :a 'h>t.»or c-r.JIIIII!(Io
. . . ...:~b l llr.ltl yV_.
-.~.
7f.
Qo ~~ T>~C.Mo:ll llitkUWitiU . .!kkiU.O.~~d~.~ . lo
lllll!~ka.._1~··_, ·
o ,.111w.
t._At<Wiiltl O~l«.:.m.tl
l lXl A'ftl'llld,..AMtltU , )'-Yor~\
·L l i HIJ&.I nJ A.t(Uil'WS·i>n-urrt ldo )U\k, h e . Or.f~l1t~r.u ,o)l.t!f).U t s--t,lltVYOo/1; rwcll l97.1-1'119 197.5 A·li ... . IU t , I W
cf~~'"tz:.·o'rf:-.u..~.:ltvYOfl
,ll.l_l l,l.$:,,2.S.,l.?,\.1_,,y,os
W4b· P·'U.ILifCO IU I , IIC . NAnuol4.11(~~-'¥1 ll ·hJ'P"f !liXltw.lllc·......_ , tltvYc.Q. · t 112W~
7g. through 7n.
82. JChapter 3
d. Drag-selec t the word Objective.
e . Click on the bo ld button in the Properties dialog box.
7e.
1-
7d.
f . Press Return, and type:
To f urther obta in profes si onal experi ence in the fie l d of mult i medi a and other r el ated vi sual ar t s med i a .
g. Press Relllrn, and type:
Expe r ience Notice a Return adds a line break and line spacing. h. Drag-se lect this word, and add boldfacing. i. Hold down the Shi ft key, press Return, and type:
Si mon &Schus ter Notice that a Shift + Return adds a line break without line spac ing . j. Hold down the S hift key, press Re turn , and type:
Grap hic des i gner
k. Hold down the Shift key, press Re turn, and type:
1230 Av enue of the Amer icas . New Yo r k I. Hold down the Shift key, press Retum , and type:
t el: 212-698· 1293
m. Hold down the Shi ft key, press Return , and type:
August 1995 - Present
n. Peju added the re maining text.
Sa.
·10\i
Sb.
'!t~ ,H~tM."IJr( lun :·:lolu~ rno.x· :.:hlttli~IT·.t:rAuh
..r.4~tb:a!ott t v,ntl&r-'lflt4: ·
t xpm.:.cr
s~ · s~.w..., Oto~~:lo'-f1t.t 1nDA·I'C.' .,t'thkM.'I~U t:1wV·I\
···=·:: ~ 129)
~.....
O:qb:ll&pU
4.Jtt.·'YJ<t11~Ut:.~Jc-'ir.\ 1>4u~11'SJdr:Hl
9a.
8. Preview the Web page. a. Click on the Preview bullon.
b. A preview status bar wi ll be displayed.
c. NetObjects Fusion will launch your selected browser
and display your page. (Note: For de tails on how to select a browser in the NetObjects Fusion Preferences, see Steps 3a through 3e.)
d. Select Quit from the Nctscape File pull-down menu to put the browser away. (Note: Leave the browser open (f you have p/enry ofRAM memOI)'. )
Be.
Totwe.M o\o_,,..,....,.~ ,,.-..c· a do. t&.l ol.....,.o:.O oll4n..r..W:o.J,.,n-.tw<o ..,.,
:),-.,... ........
1 1XJ AI.-~~ ......l><ol l :o.. 'I'N\. ·W~Hst-I::YJ lo~rm1ti~·P'I-. . c.·
~. r.... 3t~loo....,.
... v·. acc~...,.-s-.-::
W..:t, I WH.;)I~i
... :.,.... , . . . .... 1 \ _ l . w .
,,,....y...., ),-.,
w·~a-·a.~
to.!:.!!O!l4-,
r., ,_.,,..VQt~~~·J
IJml" I ell ! Ulf'lit Ga
New 11/eiiiJ mw''' K N N .,W M nll ,..II!U8!JP. Ml't
' 'I!UI DOtiiiTil'RI.
Open toult on ... XL
IIPM IIIe ..,
)tO
Cl int
~Ol'l' n1 .. tlpl_,· ., ,, ...
XUJ
P·ge Se lup ...
'"''' ·~
Sd.
9. Edit the text.
Remove the line spaci ng beneath the word Objective.
a. Click before the le tter Tin the li ne of text below the
word Objective. This wi ll insert your c ursor in the text.
183. NetObjects Fusion
P~ctMt·~o~;rrAtU~ ·I:J~tnc·lllth. ScJ· rAIII'lbcc.t!l·
.....,_. ""_.,U.unU·dV\ntl.:u··~·
Sr.w:~ dc S~IIu Or~.!.tupu l n::IMu:M .r~A.":M3:U I :rvYitl (o.J 21~M-1~:J Mpn~~~- ~uuot
...............
t;,.pc£.·pu
J.XILtl.,tU· Stn~:k· 'ler..
.,tm t.WU.!~s....
9b.
b. Press the Dele te key to close up the space.
c. Hold down the Shi ft key, and press Return.
d . A line break will be added with no extra line spacing.
c oTr k:tt.ulllu·rrtl····ca"u'uw:IOI·Oa&d"tt~. u!riurdlla·'IU·uJu""'···· ,.,....,., S..."liOilllS~f!U Ortr!li:&t.nptl 12lCAHil\lt.tlCAAI:w:i:··. U1li'Yt:k U:Z:2~~:<t:Sl
Gtfjk:kllljjllll
4COL..'· · n u S v u1 . l l r · V n ' \ Mt..·tM91';~Jq IS'Jl
9c, 9d.
e . Repeat Steps 8a through 8d to re-preview the page.
~~
~~-:::
""" .=::. -1.._....._....,_:6::&-.l-._'f
10c,10d.
84. 1Chapter 3
........~............
::~";..'":!.,..~-\Wro
----wo:-t.-.-........__ ..._,~
·_li"iU".u_:':..""
9o.
10. Remove the default links in the footer. a. Scroll to the bottom of the page.
lOb.
b. Select the Selecti on Tool.
c. Click on the default text links in the Footer, as shown in
Figure LOc. d. Press the Delete key to de lete the text lin ks.
__::-:.
::-:=- _...
10e, 10f.
~ ·- -::·-=-~ -- -· ~ .c.,_- · -~- L.::::...:: =---==-== r'~ I --;->
e. C lick on the default NetObjects Fusion button link in the
Footer, as shown in Figure 1Oe. f. Press the Delete key to delete the button link.
11. Lengthen the page. a. Click on the Layout tab at the top of the Properties
dialog box. b. The Layout page of the Properties dialog box wi ll be
displayed.
c. Click on the up anow next to the field labeled Height.
Add 100 pixels to the height of the page by clicking on the up arrow.
11a.
"'""' e:J (nt·xt" H~~rot~[ltovtb
ea-. ...... a.~
OwlWtcl.rC:J ~
OP\c....,.
~
I I . . . O . r/ h e h r
I ,..,.,., I
' '"~" '
11b.
.... c:;;]
·· ~
12. Add a text link to the body.
a. Select the Text Tool.
12a.
b. Drag a text box inside the body of the page, as shown in
Figure 12b.
c. When you let go of the mouse, you ' ll see a cursor inside
the text box.
Iss. NetObjects Fusion
d. (Option) Select the Zoom Tool.
e. (Option) Click on the new text box with the Zoom Tool
12d.
to zoom in.
f. Type:
Top Page
I·~ ::=:: I
12g.
12f.
g. Click on the Text tab at the top of the Properties dia log
box. h. The Text page of the Properties dialog box will be
d is played . i. Click on the Center button in the Prope1ties dialog box.
121 .
.,.v.,._.l ILal!w!l
..- !
111.1'1111 ""'
....
-.~ c.w
o · " "-·~~> :!!!l ~
l' llll).wlfl'. . . .
@!··· oO (co.... l
12h.
j. The text will be centered in the text box.
?I
12j.
13. Create a link.
Text and pic tures can be linked to any other point on the Web or any point within your site. Link segments of text, elements you draw, pictures, or areas inside pictures in the form of an image map. NetObjects Fusion has three types of links.
86.1Chapter 3
These include:
· Page Links. This type of lin k leads to pages \vithin your site. If you move the page within the site or change the name of the page, the link follows. Peju created this type of link at the bottom of her resume to link to the top of the page.
· Smart Links. This type o f link is based o n the re lative position of a page, not a name. Use this type of link whe n there are many layers o r branches in your site . Entire branches may be moved a nd the links wi ll be maintained.
· External Links. Thi s type of link points to other pages on the Web. A URL is required in this type o f link.
a. Drag-select the words Top Page.
;:J Unlc .
13b.
I B
13a.
b. Click on the Link button in the lower-le ft corner of the Properties d ia log box.
c. A Link dialog box w ill be displayed. d. Click in the fie ld labe led Page Name, and ty pe:
res ume
llat.
13c1 13d.
181. NetObjects Fusio11
Hltlb ll.h rutlon
13e.
88. ,Chapter3
e. A status dialog box will be displayed, notifying you of a
successful link. f. The words Top Page wi ll have an underline, indicating
the text is now a link.
Tl
13f.
14. Peju's Web site.
Pejuused the techniques described in this section to complete the remaining pages on her site. Using NetObjects Fusio n's built-in commands for building the site's structure and links, Peju found that her site was easy to construct.
When the pages were comple te, Peju staged the site, or tested the pages, on her local hard drive.When she was satisfied with the results, she published the site by using NetObjects Fusion's built-in FTP software to transfer the files to he r provider's server. The steps to stage and publish a site are described in the next section s. Look for Peju's complete We b site on the companion CD-ROM and at http://members.ao/ .com/ala wusa/i11 tro. html.
15. Stage your site.
When you have completed your Web site, you 're ready to publish it or create the HTML pages you' ll need for the Web. Staging is conside red to be a step prior to final publishing. Preview displays a page in HTML fonnat. Although staging or publishing is similar to previewi ng a page, an FTP client built into NetObjects Fusion may be used to upload your fi les to any remote server.
During staging, NetObjects Fusion collects all the Iiles associated wi th your sire-both external and those generated by NetObjects Fusion. NetObjects Fusion refers to these Iiles as assets, which may include the following elements:
· images
· sou nds
· video
· applets
· plug-ins
a. Before you stage your site, bui ld a folder for the site
somewhere on your hard drive or locate the host name, the directory name, your user name, and the password fo r the remote server whe re you'd like to stage your site.
b. C lick on the Publish button.
c. The Publish site will be displayed.
15b.
d. C lick on Seu ings.
"'"""'"'
15c,15d.
e. A Configure Publish dialog box wi ll be d isplayed . The
Local radio di al is the default selec tion in the Locati on section of the dialog box. In this sample, Peju used the local hard drive to stage a We b site. f. Click on the Select button in the Location section of the dialog box.
ronn uuruatlhll
, ....ttt.
----~
I [S~l~ct... 1j
15f.
15o.
189. NetObjects Fusion
\lltc l lllfol. .r:
15g.
CJMIIIC: 2
~ ~
g. [n the dialog box that follows, select the folder o n your
hard drive where you would like to stage your site, and click on Open.
h. C lick on the OK button at the base of the Configure Publish dialog box.
i. Click on Stage button on the Publish site.
~
pacH with u ndel"£owe~
( -l)- j 1-ii-i'-IC-~-l----.
OK
15h.
Nt?tscapt? Navigatorn-1
16a.
151.
j. A status bar will be dis played. k. Whe n the staging is complete, a Staging Is Complete
dialog box wi ll be displayed. Click on OK.
Sta· In· Silo 15J.
15k.
Staging Is ComtJio tc. OK
16. Test your site with your browser. a. Launch Netscapc or the Internet Explorer browser.
90. jChapter 3
~~IIMIIIf lk·"' ~t\11.~11 "11!UIV·
"1a ii Oonlfll· lll ··· h rnl tluot lon ~.
- ~~
:icl
''·''n··l'-.1.1·-0M
16b.
(= Moc 2 ·J
C) MOC 2
C]Microsort
12
D Mitrosofl Olllt e
J:]NciObjects fusion
CJ "chrapc f'rrW.IIgnl or'" Fol11er
I ( l jl'tf I ( Ocokl op
CJ PowerniP 3. 1
CJ Qu a rk HPreufi 3.31
( Cnucel )
II ) ~
0 1)0 11
16c.
b . Select Ope n File from the File pull-down menu.
c. In the dialog box that follows, locate the folder where
your files have been staged, and click on Open.
d. In the dialog box that fo llows, se lect your site's home page, and click on Open.
I~ Pe!u ·I
(] asse ls D hlml
~ Mnc 2
I I ¥
£)1·<1
( ll es ktop )
----
I ( Cancel ~ ) 0110 11
18d.
e. Your home page will be displayed in a browser wi ndow.
f . Test your site.
g. Select Quit from the File pul l-down menu to put away
the browser.
m l.'.::l .:::.l~l l..~ l !. l .e l.~ lftl rn
....,.... ,,... ,,"'-"-'02""'ro,..,....""·--
I
1~··"-, ll ....... ·. c...~, f!t-m ..,.._.. ll - a-.- l c:s::::::J! -..n...... I
Clou ''U.I. kt -.
Uo·I~MIIII . . .
r el)t!hl up. '"~'~'
16g.
ObJK""'
T~ f'..tbtr<.tAiir. ;r:!- r.a..«J;ll~1.'1U·hHJ« r.r.!~o:r»~:.n .X · t.Yfni~\1~UU0'11-l
[%pen eDCe a:na-;.ue-e. .kqW ,, ·r
;llOA<'tt-tiNuco.lfoovTo~~ot ..: .:tl . , l l t ) A~:995·Jn"'r.l
~ t.nlu tk-, 1 . .·, On ;>b:CW'tftl «::I W~"'J ht \,lltV T'll;' t".r.'''· · m·~.1m
16e.
W"·IJ'- 1' · '-lblll· c Oro.t, l.r
N.:l:...:r;.,.nciCli , DI«~·,.~~~~~~ lOCKoe:..x,U·vTxt. .:.::!115::!1'1')
rtlnlo7 :·'l;·.-., I'U
191. NetObjects Fusion
17. Publish your site. When you m·e satisfi ed llull everything in your site functions properly, you're ready to publish it.
a. Before you publish your si te, locate the host name, the directoty name, your user name, and the password for the remote server where you'd like to publi sh your site.
b. Click on the Publish button.
c. The Publish site wi ll be displayed.
17b.
d. Click on Setti ngs.
92. 1Chapter3
17c,17d.
e . A Configure Publish dialog box will be displayed. f. Click on the Remote radio button, and click on the
Configure buuon .
~LVII ...llllllllllllllllllllil GEJ
(11 ..
~,..,..,. ,,..,.,I &;.p.,.. ,h,... · I
17e, 17f.
--
rooo wt ra.~:~u~~~
17g.
g. A Re mote dialog box will be displayed. (Note: Ifyou do
not know the following information to add to the Remote dialog box, contact the Internet service provider who manages your Web server.)
h. In the field labeled Remote Host, type the name of your server.
i. In the field labeled Base Directory, type the path name of the re mote HTML folder where you wish to transfer your files.
j. In the field labeled CG/ Directmy, type the path name of the CGJ directory.
k. In the field labeled User Name, type your user identification.
I. Click on Reme mber Password.
m. In the field labeled Password, type your password, and click on OK.
nemotc
Rtme~ ft Host ' - - - - - - - - - _ _ J
CG I Drtc.ton, ' - - - - - - - - ----'
IUstr
""",----------,
Pr6t~~1l rTP
· I
17h through 17m.
193. NetObjects Fusion
n. Click on the Publish button in the Site view. o. A s tatus bar will be displayed with a message that reads:
opening anftp connection trmlsferring files p. When the publishi ng is complete, a Publishing Is Comple te dialog box wi ll be displayed. Click on OK.
1 7n.
rr.'l Publishing Is Cum111oto.
lj,;;,j
17p.
I OK "
(Note: You may also move your newly published pages ro your Web site wirh Jim Mathew's Fetch. Fetch is a Macintosh FTP shareware wilily. Publish to your hard drive and then move the collie/lis ofthe Previewfolde r to your directory 011 your provide r 's Web serve1: Forfurther derails on how to use Fetch, see Use Fetch to upload your files to a provider's server in the C lient-S ide Image Map chapter).
94. 1Chapter 3
r
Writer and media specialist featured in this chapter:
Peter Barry Chowka is a journalist, medicalpolitical analyst, lecturer, and consultant. For over two decades, his work in print, broadcasting, still photograph)\ nonfiction films, and now the Internet has documented the promise ofnomoxic, innovarive, and rraditional approaches to healing. Chowka has been a consultcmt to network television andthe U.S. Congress and was appointed to thefirst advisory panels ojrhe NIH Office ofAltemative Medicine.
pbc@usa.net
http://members.aoLcoJJII mediwncool
Style Sheets And
New HTML Text Tags
In this chapter, writer Peter Barry Chowka shares information on how to use style sheets to simplify HTML tagging in text-heavy documents. Peter's 1994 interview with Linus Pauling is formatted for viewing in Microsoft's Internet Explorer browser, the first browser to include cascading style sheets (CSS 1) as defined by the World Wide Web Consortium. The Internet Explorer browser broke ground with this powerful new feature, which is expected to be added to Netscape's Navigator in version 4.0. (Note: The World Wide Web Consortium, or W3C, is a standards organization that oversees the evolution ofHTML.)
Also covered in this chapter are Netscape's new <MULTICOL> tag, which formats text in newspaper-like colu mns, and the <FONT> tag's new attributes, which can control a fon t's color and typeface.
In less than a year, Microsoft plans to introduce a new form of embedded font technology they've codeveloped with Adobe Systems. Pages with embedded fonts will include font data that travels with a page-freeing a Web viewer from the need to preinstall fonts. The technology will be implemented in the Internet Explorer browser, and the two firms will present an OpenType proposal to the World Wide Web Consortium.
Microsoft style sheets offer formatting features such as point size, page margins, and leading
Summary: By the Spring of 1997, both Microsoft 's Internet Explorer browser and Netscape 's Navigator version 4.0 will provide extensive style sheets. With desktop publishing- like controls. Web authors will no longer need workarounds like the <BLOCKQUOTE> tagfor margin indents.
J]
linu ' Paulin . Ph.D.: The Lu1 t lnterumm bl l'e l ...
II
-4 er en ea "' ..
·
I? G:1 ltt! ~
~ ""-
.,..,.....~..,.
'··Of'·'"
A' ...
1¥...1!!._ ~r.w
CIJ;IW _
i ·-»ut · li ._lt ltWO!t>fd.t!(~'bt-IFtt'"'h~· '~_.to,..lr:tT
4u.rt.t·J~V.t \)tcJ~·s a·~ · <I,.,·.. G..r..,_ ~ , ,,,::;-4. Kf'"~"' ''
Di11logue nillt flt e Experts
L inus Paulin g, Ph.D.: The Last Interview
t.y~;~
<*t996 »" pelltt b.an'j'ChOvb l.t ttlW ~:o.'tj
L,1979, w/1211 tl12 respec!ed
Bnl!sl! ;oum al Ne w Sc!el!l!st !nc!ud2d Linus Pa uling. Ph.D., 0 1! lis izst ofthe t>·.>ellty most InlpO!tant sc·e·1Nsts ofall tim2, it was fo r Pauling ano ther in a lo11g sen es of ad uevenum!s that uu;/uded a.J! W!precedel!ledpair ofunshared Nobel ?nu s and some sta rtlmgly o riginal conmbut·ons 111 biology. chemistry a!Jd physics.
By the t:m! of tcs: d~th tn Au;ust 1994 at ait 93, Paulq v.oas probab:.y better kn:·Nn for tts more re~cnt w.::rk on r..utnluJml s ci::nee an;S V1tt::.ln
rn C. be~-sel:ng b: oks on '-T..amm C. th! cr;;mmon coli! and canea-,
fte;ue:u talk sho·..- e.ppe.uan~es. and nume:-ous pubhshed pa~ers aru1 sc1e:nlifk pre$mtalaons abou: a nutnttonll ~.Cllt:.g specnlty he n.ltned ·o:·shcmoltc';lar mecbc:.ne,· Pauhll&was anunp.ll'8lleled. udquely credenual.ed ;poltesrr.an for the emerging Jcien: e of ruet ami he3lth.
l'"'·-"""""'"~ ·-\1..-N-···-_..............L-.
,..~... l ~ ll tallt""Of~II ....."'J'=-''"'~-~·r..,..rJC·r_.o ~
.. .. ._~I'OIIIIoc~l o lloo(fl..,,f~... ~IOI(')~. . .
-..-,u«-llollotl_oa.1_""-'~M11:-
-·....,,.-"'""*I)...,___. ·, 'bo _ .. a........,.......... .}lotOfop ... ,......_...bolq·~-
l lt..,.,..141""C;Ct _ _, ,.~~._ . _.._e:.
- - - - · -c:.t.o.--rw..,.c.:co.r .,.._.,.
.__.,._.. ...-..... .....· ._.... ........
_
.
.
.
...a
.
..
. ~~~
...:~~·-
·a.")~-.t··-- -::n.o:
::::;;:..~._'!f::!.M.-.';10~..._,-...
~
......,. . . . . ~,......, .W~J>I(lf~~~ - ~...... ..-.-
..,~..,...-·~r
ll(-llOCDtt-=-"C"'··----hl
~~0) ............ . ~ . . .- . . . l<: ........ ~,... o-u~
. . 11WHI·'"tl +o:o i ....) ~-~-U N "t......,,.,_......, 'llt ... I\'Klio .... ~""'' !,o"- ... U
..- .s_...__.. l..:t. ..
_ . - r o'bf ....,·-t·I."I.W4rWI·I.C-""'-II. -
1- < f t l o . . , _
-, ...,.,..,. _.._.._..u.. k.:..CJia. ... ,.......
~-- ----..!-,(t .,... ,......,..
,.,.r·. - - . , ""'~.,. ...~~-~~~~~~b..
Above right: Pete r Barry Chowka 's inten1iew with Linus Pauling fo rma/led with style sh eets built into M icrosoft 's Internet Explorer browse!: A bove: Peter'sfile opened up in Netscape Navigator version 3.0. Netscape will not have style sheets added until version 4.0.
F or type to look good on a page, text line length should not extend across tht: t:nlirt: width of a document. With a shorter li ne le ngth, the reader does not have to \.vork to visually keep track o f type as he/she reads from left to right.
Until now, designe rs who wanted to apply this principle to a Web page had to use tags that were never intended to indent text. Examples include the <BLOCKQUOTE> and <DL>tags.
Style sheets built imo Microsoft's Internet Explorer browser now offer a designer powerful controls over formatting characteristics such as margins, point size, and leading. Netscape's Navigator wi ll soon have simil ar controls built into version 4.0 of the software.
In this sect ion, Peter BaiTY Chowka- journal ist, medicalpolitical analyst, and consul tant--demonstrates how to format a page with style sheets built for Microsoft's Internet Explorer browser. The steps he uses to format his interview with the late Dr. Linus Pauling offer an ideal model for
Style Sheets And New HTML Text Tags j 97.
Above: Peter's photograph ofLinus Pauling during his.first inten 1iew with the Nobel laureate, who was then 79, in his office at the Linus Pauling Institute for Science a11d Medici11e in Menlo
Park, California, i11 1980. Peter recalls,
" It's always humbli11g to spend time with an individual ofPauling's stature. But / came awayfrom that first ofmany encounters with Pauling enjoying a new respectfor the man, based not only on his intellect but his highly engaging, accessible, down-to-earthJeisty, enthusiastic, and energetic reaction to meeting me and to my many questions. The bright twinkle in his eye on that swmner day is, I hope, captured in the photo above."
designers to fo llow. (Note: Lookfor the Linus Pauling interview 011the CD-ROM i11 the back ofthis book and at II ttp:1/members.aol. com/mediu mcool.)
1. What is a style sheet? A style sheet is a system that lets you define formatting characteristics such as fo nt size, fo nt sty le, font color, font weight, leading, margins, and indents in summary form at the top of an HTML document or in a separate style sheet file. This eliminates the need for complex tagging throughout a document and provides an efficient method to make changes, because the formatting information is organized in one place.
Although Microso ft is the first to build style sheets into its browser, the concept is not unique to Microsoft. Style sheets for Web browsers have been deli ned by the World Wide Web Consortium (W3C), and M icrosoft's implementation fo llows the cascading style sheet (CSS L) mechanism found in the W3C proposal. (Note: For details about the WJC style sheet proposal, see hllp:!lwww .w3.org/pub!WWW!TRIWD-cssl.hllnl.)
2. Frequently asked questions. Although style sheets o ffer a greater amount of control over page layout, many designers may be concerned about using HTML features that are new. Here are a nswers to popu lar questions:
a. Are style sheets appropriate for every HTML
document? As in print, style sheets make sense when documents have a large amount of text. The mechanism req uires fewer tags in the text and greater control over changes. However, designers may also be interested in style sheets for smaller documen ts because of the point size and leading controls.
b. IfI use style sheets designed for the Internet Explorer browser, what will the p age look like in Netscape's Navigator? Handan Selamoh lu, who wrote A User's Guide to Style Sheets for Microsoft's Developer Network (http://www.microsoft.com/workshop/author/
9s. JChapter4
Above: A photo Peter lOok during a videotaped documental)' htterview he produced in 1989 with Pauling and Ewan Camemn (right), th e Scottish physician whose prom ising work in the early 1970s with vitamin C and terminal cancer patients inspired Pauling to become more involved in the field of vitamin C, antioxidant nutrients, and nontoxic cancer therapies. Peter remembers D1: Cameron, who before his death was medical d irector ofthe Linus Pauling lnstitllle, as an iwelfectualfy impressive and highly engaging clinician. In 1979, the two doctors coawhored the popular book, Vitamin C and Cancer.
howto/css-f.htm) has invented a trick for designers who are creati ng pages for multiple browsers. Until Netscape implements style sheets, embed your sty le de fini tions within a comment tag. (Note: Fordetails on how to implememthis step, see Creating the Linus Pauli ng interview in this chapta)
c. WiU style sheets support the Postscript screen fonts
popular among graphic designers ? For in formation concerning the Adobe/Microsoft OpenType initiative incorporating Type I and TrueType data for Web pages, see Microsoft's plan to addfonts to the Web: Free TrueT)pe now and Web pagefon t embedding in the fillt.lre at the end of this c hapter.
d. If a Web viewer does not download and instaU a font s pecified by a style s heet, what will the browser display? A browser that cannot read sty le sheets or the <FONT FACE> tag will display the default typeface.
e. Are there any tags that will override formatting cre-
ated b y a style sheet? Yes. [nline style tags override style sheet surrunaries atTanged at the lop of a document or in a separate sty le sheet file.
The style sheet summary block arranged a t the top of a docume nt is referred to as an ernbedded style sheet and a style sheet organized in a separate life is called a linked style sheet. Tn total, the re are three forms of sty le sheets that follow precedence ru les:
· inline style tags override e mbedded style definitions. (Note: For an example oflww an inline style IC/g can be used to override an embedded style tag. see Creating the Linus Pauling interview in this chapter.)
· inline style tags override linked style definiti ons.
· embedded style defi nitions override linked style defi nitions.
f. Where can I learn more about Microsoft style sheets? See Microsoft's Style Sheet Sholl"case at http : / / w w w . microso ft.com/ g a ll e ry!files/s ty les/default .htm, Style Sheets: A BriefOverviewfor Designers
Iss. Style Sheets And New HTML Text Tags
A bove: In 1983, Pauling invited Peter to his remote ranch overlooking the Pacific Ocean near Big Sw ; Ca/({omia, for a day-long visit and another extensive recorded interview. Peter writes, " /was honored to be able to observe Pauling in hisfm·orite place, inspired by the maj esty ofthe Pacific, sltrrounded by books and scientffic papers represeming the many high-level projects he ll'as involved in. Pauling g raciously accommodated my many requests to photograph him, and one of m y favo rites (above) was taken thai afternoon on his deck with Ihe stormy ocean just yards away."
at hllp://www.microsoft.com /workshop/design/desgen/ss/css-des. htm, and A User's Guide to Style Sheets at http://www.mjcrosoft.com/workshop/ author / howLO/css- f.htm .
g. Can style sheets be transferred to another HTML
document? A style sheet may be saved as a .CSS document and then linked to any number of Web pages on your Web site. (Note: Microsoft 's implementation of style sheets is nen1, and at the lime ofthis writing, I could not get style sheet/inking to work, As a result, this topic will no/ be included in this chapte1:)
3. Style sheet properties. The style sheets built into Mi crosoft's Internet Explorer browser offer a wonderfu l shift away from awkward workarounds such as the <BLOCKQUOTE> tag for margins. In this system, style sheet properties such as marginleft and margin-right get added to famjJjar HTML tags. (Note: For details on style sheet tag syntax, see Adding style sheet properties to a tag in the next section.) The style sheet properties th at have been implemented in version 3.0 of the Microsoft Internet Explorer browser include:
a. font-size may be set in points, inches, centimeters, pixels, or a percentage value that is evaluated based on the default point size (pt, in, em, px, or %).
b. font-family sets a typeface name. Alternative family na mes or generic family names may be specified for systems that don't support a designer's choice of typeface names. Generic f"~unily names include serif, sa ns serif, cursive, fantasy, and monospaced.
c . font-weight sets the thickness of type. Examples include extra lig ht , light, de mi- lig ht, medium, demi bold, bold, ancl extra bold. Weights depend on the weights allowed in a user's system.
d. font-style sets italic text. Although the W3C draft also includes small caps. fnternet Explorer only supports normal and italic.
e . line-height sets leading or the distance between the baselines of type. Leading may be specified in points,
100. 1Chapter 4
Above: Included in Mic rosoft's Web Galle1y at http://ww HJ.microsoft. com/ galle1y are links to pages containing useful information abow style sheets.
inches, centimeters, pixels, or a percentage value (pt, in, em, px, or %).Internet Explorer adds spacing before lines and not after lines.
f. color may be specified as a named color or as a hexadecimal red-green-blue triplet.
g. text-decoration allows you to use underl ined and
strike-through text. W3C also supports overline and blink, which have not been added to the Internet Explorer browser.
h. margins may be specified in points, inches, centimeters, or pi xels (pts, in, em, or px). Internet Explorer 3.0 allows negative values for margin-left, margin-right, and margin-top for special effects or "outdents."
i. text-align sets text as left, right, or center-aligned.
j. text-indent sets, indentation in points, inches, centimeters, or pixels (pts, in, em, or px). Internet Explorer 3.0 allows negative values for text-indent, providing for special effects or "outdents."
k. background (color or images) may be used on any elements by specifying a co lor name, an RGB triplet, or an image's URL.
4. Adding style sheet properties to a tag. There are two methods for placing style information within a document.
a. Inline style tags are adaptations of familiar HTML tags. Style definitions get added to an HTML tag by using the STYLE attribute.
Examples:
<Hl STYLE-"margin -l eft : 0.5 in ; ma r gin- right: 0. 5 in">
or
<P STYLE- "m arg in - l ef t: 0.5 in; ma r gin- r ig ht : 0 . 5 in">
Style Sheets A nd New HTML Text Tags 101.
tMyk:topsclto· graphy ~~~=
www.micto.oft.conVtru01)lltJ/
::':::.::::RPt'"""' ... -.-~·--~~ @ =:,:::.:-~===.:.~~~~~~1--:n.......,. . .Wt~l__. _ _ .._ """"""":tfo ... ....._.v.1t- ~ u
........... . . ... . _ _ . .... ~-IN.'C·M
- ~.:J.:.I,M.!.l)ot<~a a..
toU · -)'H-OU.-I'IIf?t.OI>,._P ..
..,...... .... e._...... ~......~.....,..~:a-..
Mt , . . . . . . .~ ...
~-::_, ,:::a~~-=-~~,~~..:..~
!11'!'11 Trebuchet MS, Trcbuchct M5 Bold. TrE'bUChE'! MS Italic. Bold Italic =='~':~~:.",ll'JU ...- - - . -.OI &J1fr
!11'!'11 Gcorwn. Gem·gift Bold , Georg1a
Italic, Geargicr Bold // alie
~=~~~~:~:II M&I ,a'l·l--..a:W..I,.,Y:;;r,
Verdana, Verdana Bold,
Verdana Italic. Bol d I talic
e;:.,.;~~.,;:: ~~~~.:."';~~~-
Impact
Ar llll Black
A1lal. Arial Bold. 1/a/ic, Bold Italic
f=:..,..:a.:~~- J'l'nCt tol onwvt...-.IOCNTIIJS~'
11mell )low Roman. Tlmu K~w l~o nuw Jlold.ltalic. Hold ! Iuiie
:;-~~~~~=-·~::.r·'"'J"w..,.,.... , ar
Cout..o.er- New. Courier Nev Dol <l Ite 1 i c, Bold Italic
·., ~ H~~~ ,.,·. -f,:. >t.~.~.4,t.U_I.J....auj ~· · ·::t··-·-··a."t.t
_______ ........,...... ,-......-.~..--·Mhfo:_....,.,..
"· · · _ ._ ooodtlte to th·jagge(/ rort to-ok ........ --~~..., ..,_ .--~
Above: Microsoft is offering f ree TrueTypefonts on their site at http://www.m icrosoft.com/ t ru e t y p e / fontpack/defauft.htm.for both Macintosh and Windows computers. (Note: For details conceming Microsoft'sfree TrueType ojfe1; see Microsoft's plan Lo add fo nts to the Web: Free TrueType now and Web page font embedding in the future in this c!tapte1:)
b. An embedded style sheet gets added to the top of a document using the <STYLE>.. .<!STYLE> tag. Use this tag between the <HTML> tag and the <BODY> tag. The <STYLE> tag's TYPE attribute specifies the Internet Media type as "text/css." TI1is allows browsers that do not support this Media type to ignore style sheets. Use the comment tag to enclose the style defi nitions d1at get added inside the <STYLE>.. .</STYLE> tag as plain text. By enclosing the style definitions in a comment tag, browsers that do not support style sheets will not read style defi nitions as plain text. Example:
<STY LE TYPE- " text/css " >
<!- -
Hl (co l or : ftFF5200 : f ont-size : 40 pt; font-fa mily: Ve r dana. Ari al, Helvetica , sans·serif)
P (co l or: /tDlOlO l : fon t -size : 13 px; font-family: Verdana , Arial , Helvetica . sans - se ri f)
-- >
</STYLE>
5. Option: Grouped formatting. a . If the formatting specifications are the same for several tags, group the tags into one tag. In the following example, H I, H2, and H3 all have the same style defi nitions: Example:
<STYLE TYPE-"tex t/ c ss">
<! - -
Hl, H2 . H3 (col or: IFF5200; fon t -s i ze: 40 pt ; fon t -fami ly : Verdana. Arial, Helvetica. sans-s er if)
-- >
</STYLE>
102. , C!tapter4
-. , IW~-nl rCo l_.,._,_ .·...ar-w~ "'
... '· ,. "'"' tl · .., tfT"'LI~··_,.b~ ~· I to U I I· ·· ·
Above: Check hrtp:/!www.microsoft .com/truetype/ie;.p/or!quick. htmfor a useful three-step guide to adding typography to your Web pages.
b. Fom1aning specifications may also be abbreviated. Notice in the following example that the word font occurs only once. Example:
<STYLE TY PE-"tex t /css " >
<! --
Hl {font: 40 pt Verdana. Ari al . Hel veti ca . sans-seri f} --> <!STYLE>
6. Option: Classes. a. Use classes to create variations for a sing le HTML tag.
Follow a rag name with a period and a class name. Any number of classes are allowed . (Note: See Creating the Linus Pauling interviewfor details on ho w to create tags with classes.) E xa mpl e : <STY LE TYPE- "text /css ">
<!--
BODY (ma rgin - left: O. Si n: ma rg i n-top: O. Si n} BODY. main (font -s i ze: 12pt ; f ont -wei ght: l i ght : l i ne -hei ght: 14pt : margin-left: li n: marg i n-r igh t: lin: ma rg i n-top : l i n} BODY.callout (font-si ze : 18pt ; font -weight : l ight: line-height: 22pt ; marg i n-left : 2in : margi n-right: 2i n}
BODY.references (fon t -size : l Op t : font-weight: lig ht; l i ne- heigh t: 12pt ; margin- left: l i n: ma r gin · right: l i n} --> <!STYLE>
Style Sheets And New HTML Text Tags 1103.
NORMAL
~'::':;..~..-~·,:::::--.....:.:=-~
:SUP>----~~=~:~~~~@~J[~ ~t-~ g;:~;~ ~ ~ ~ ~
__._.._____..... _ _._____.,.,_, ..._ .... I
=·~.i:~i§:~:g_4?.:;::
_ _ _1 . . -
.......__
-_-_·_ ----. -- .. -..·.·-- _ ._...~t.- ..,.·,-_ ·---_ .~.~.-...._ ......,..,...,.._ . ..,._......
____,_._ ___ =._,~,...-,,,_=£...~. :.:....:...~.......:. .=...n....o...
-______ ________. =::;~~:-g#,;1f~;
__ §§_~.,,.~. ~..,-~..,....... $~%
...._......,._,_,_.,.. .. ......_ ..__ =--=~,~-~...:!.,::~
, .. ...... u""'~
(.,,..
,.,.
__,
.. ..-
....
\
r,... ·.·.·_·"
==·.:=.-. ..,.._,. ._..,._ .. :::=.'"':..:!.:"~"!".'!.':'\!.:'"..,:!..-.:~·~
=::..::....-::~,"'!~.=::-: ~..:=-.:;,
·-------- --_-___-____.. _ ...-.. -.....-.-........."....".·..........-....._·....-.- .,.~ ....--,
----- __ .. ____ <H4>~---,:_=· .!,..". - ~:.·..:.". .".E'.-.:'"-·-:=-:..-.t:,·..:_-,...·~_--~
~·
·--· ----·---- ·----·· .. ·::::.·:--:- ... ..... · ~~~---·
·-··,.,- ~
..
,....
...
'"
._ -- ,_
........
... . ,.,
~
~
....·
--.-...·.·,·...·,"..'·..
'-·""·'""'- u····
7a.
b. It is not necessary to repeal d1e tag name. Classes may be abbreviated wi th a period and a class name. Example:
<STYLE TYPE- " text/css">
<I -.
BODY (marg i n-left: 0.5i n; margi n·top: O. Sin}
.main (font-size : 12pt; font -wei gh t : l igh t ; l i neheight: 14pt; margin -le ft: lin; margin · right: lin ; margin-top: lin)
.callout (font-size: 18pt ; font-weigh t : light; line height: 22pt; margin·left: 2in; margin-right: 2in}
.references {font-size: lOpt; font · we ig ht : light ; l ine·height: 12pt; margin · l eft : lin ; margin-ri ght: li n)
· ->
</STYLE>
7. Creating the Linus Pauling interview. a. Use a manuscript or create thumbnails to mark up text with tags you thin k you' ll need. In this example, Peter used: · H l , H2, H3, and H4 to mark the subheads in his manuscript. This provides an oppor1unity for quick changes in the style sheet header after the style block is in place at the top of the HTML document. · Two <BR> tags between paragraphs because the <P> tag adds too much leading. (Note: There
should be no more than what appears to be a single line space between paragraphs.) · To create variations in body text, Peter used classes in the <BODY> tag using the words .normal and .opener. He Lhen used the <DfV> tag to djvide the document according to class.
I 1 04. Chapter 4
. .~.
~.a ~!~.~ !;. ·· ~.
r;::!.~·:;·-.. :-;:.·:·:,::...... ~~-
. I , . " : ' F i h . . .IOtl
,4_....,.. ·c-. .-.-..........
'ttl~ ,. · ----·
.... .,_......,_"'·' ·' 1"''" ""''·'.... h···· _ _.....,.,..,,. ·.a:.·. ~-,.,--,
, . , .~ __ "'u _·llt :.r- <JmJ<."'.'·- .,r.A..,.~*10'.a/ll
. , . ,. .
u-A.I~·H..--!..n··~·ll-.1
-
-
Above: Check hup:!!www.micmsojt
.com/truetype!faq!faqS.htmfor a list of
}i"equently asked questions (FAQ) con-
cerning Microsoft 'sft-ee TrueTypefonts.
Exampl e: <DIV class-normal> and <DIV class-opene r > Peter could then contro l the properties o f norma l and opener tex t in lhe sty le block at the top o f the page to make cha nges in ty pe style and we ight. b. Open SimpleText. Use SimpleText or your word processor. ff you use a word processor, be sure to save the document as Text Onl y.
c. Create a new HTML document. Start a new docu-
ment with the following markup tags: <HTI-1L >
<HEAD> <T ITLE>Li nus Pau l ing, Ph.D. : The last In te rview by Peter Barry Chowka
</TITLE>
<!HEAD>
d. Create a style block at the top of the document. Use the <STYLE> ...</STYLE> tag between the <l-ITML> tag and the < BODY> tag . Use the <STYLE> tag's TYPE attribute to specify the Interne t Media type as " tex llcss" .
<HTML> <HEAD> <TI TLE>li nu s Pauli ng , Ph . D. : The last Inte r view by Peter Barry Chowka
<!TI TL E> <!HEAD> <STYLE TYPE- "text/css ">
e. Add a comment tag. Until Ne tscape implements style sheets, e mbed your sty le definitions in a comment tag. (Note: See Style sheet prope rties and Adding sty le sheet prope11ies to a tagfor details on style definitions.)
<HTML> <HEAD >
Style Sheets And New HTML Text Tags 1105.
Tip: In May 1996, Microsoft announced news oftheir OpenType Initiative. Also known as TrueType Open Version 2, OpenType is a11 extension ofMicrosoft 's TmeType Open fo rmat, adding supportfor Adobe Type Idata. Thisfoil/ technology represents a merger ofAdobe's and Microsoft's follt tech11ologies, offering a unified systemfor.font handling across platf orms.
106. , Chapter 4
<TITLE> Linus Pauling, Ph . D. : The Last In ter view by Peter Ba r ry Chowka
<!TITLE> </HEAD> <STYLE TYPE-" text/css "> <! ..
f . Add tags and style properties to the style block.
<HH1L> <HEAD> <TITLE>Linus Pauling . Ph.D.: The Last I nt erview by Peter Barry Chowka
<IT ITLE> </ HEAD> <STYLE TYPE-" text/css " > <!-BODY (marg i n-left : l i n; margi n- ri ght : 1. 5i n) .opene r ( fon t -size : 20 pt; fo nt- weight: extra l i ght ; font-style: ita li c ; line - hei ght: 22pt : font-family: Times New Roman; margin- l eft : lin ; margin-right: .Bin) . normal (font-wei gh t: extra light ; fo nt - sty l e: normal ; font -size : 14 pt : l i ne-height : 16pt ; fontfamily: Ti mes New Roman) .references (font-wei gh t: ext ra light ; fo nt-style: normal ; font-size: 14 pt ; l i ne-height : 15pt ; font-family: Times New Roman; margin-left: 1.2in; margi n- r i ght : .Si n] B (font- weight : ext ra bold ; font-sty l e : normal ; font-size : 14 pt ; line-height: 16pt ; font-fami l y: Arial) Hl !fon t -weight : ex t ra ligh t ; font-style : italic; font-size : 20 pt; l i ne- hei ght: 22pt ; fo nt- fa mi l y: Times New Roman) H2 (font-weight: extra bol d; font-style: norma l ; font-size : 24 pt ; line -height: 26pt ; fon t -family: Times New Roman)
Tip: Adobe and Microsoft will submit a proposalfor Web pagefollt embedding using OpenType to the World Wide Web Consortium committee on style sheets. The proposal suggests that f ont data should travel with a do cument,freeing the user from the need to download and install f o n t s.
H3 [fo nt -wei ght : extr a bold; font -sty l e : normal ; fo nt-s i ze : 12 pt ; l i ne-heig ht : 14pt : fon t -family : Times New Roman) H4 {fon t -weig ht : ext r a bold ; font-style : normal ; f ont -size : 12 pt : line- height : 14p t: fon t- family : Times New Roman}
g. Close the comment tag.
<Hlf1L> <HEAD> <TITLE>Linus Pauling , Ph.D .: Th e Las t I nterview by Pete r Barry Chowka <!TITLE> </HEAD> <STYLE TYPE- "text/css" > <! -BODY {margin- lef t : l i n: ma r gi n- righ t : 1.5in) . opener {f ont -s i ze : 20 pt : f ont -weight : extr a ligh t : font - sty le : ita l i c ; lin e- hei ght: 22 pt : font - family: Ti me s New Roman: margi n-le f t : lin; margin-ri ght: . Bin ) .normal [f ont- we i ght : ext r a l i gh t; font-style : norma l: fon t-size : 14 pt : li ne- height: 16pt; font-fam il y: Times New Roman) . refe r ences {font- weigh t : ex t ra l ight ; f ont- style: norma l: fo nt-size : 14 pt ; li ne- height: 15pt: f ont - fami l y : Ti me s New Roma n: ma r gi n-l ef t : 1. 2in : margin - ri ght: . Bin ) B {font -wei gh t : extr a bol d : fo nt -sty l e : no rmal; f ont -s i ze : 14 pt : line - heig ht: 16pt : font -family: Ari al] Hl {font-weigh t: ext r a ligh t: f ont -s t yl e: ital ic : f ont-s i ze : 20 pt : li ne- heigh t: 22pt : fo nt-fami ly : Ti mes New Roman } H2 (font-we ight: extra bold : font-s t yl e : no rmal : f on t -size : 24 pt : line- height: 26pt : fo nt-f amily : Times New Roman )
Style Sheets And Ne w HTML Text Tags [ 107.
Tip: The TrueType f onls Microsoft distributes on their site may be used in applications other than HTMLawlwring programs. (!Vote: The foms have been optimized for on-screen d isplay.)
HJ (font-weight : ex tr a bold: font -style : normal; font -si ze: 12 pt ; line -hei ght : 14pt ; font-fam il y : Times ~ ew Roman] H4 (font- weight : ex tr a bol d; fo nt-s tyle : normal : fon t -s i ze : 12 pt ; l i ne- hei ght : 14pt ; fo nt- fami ly : Ti mes New Roman] -- > h. Close the style block. <Hft.1 L> <HEAD> <TITLE> Linu s Pau l i ng , Ph. D.: The Las t Inter view by
Pete r Ba rry Chowka <!T ITLE> <!li EAD> <STYLE TYPE-" text/css "> <!-BODY (mar gin-left : lin; marg in - r ig ht : 1. 5in ] .opener (font - s iz e : 20 pt; f ont -wei gh t : extra lig ht; f on t-style : ita l i c : l ine -height : 22 pt ; fo nt- f am il y: Times New Roman : ma rg i n- l ef t : l in; ma rg i n-r i ght: . Bi nl .no rmal {font-wei ght : ext ra l i ght ; font-sty l e : no rmal ; font-size : 14 pt ; li ne-height: 16pt ; fontfami l y: Times New Roman} . re ferences [font- wei ght : extra l i ght ; font -style : no rmal ; fo nt-size : 14 pt ; 1i ne-heigh t : 15pt; fo nt-fami ly : Times New Roman; margin-left: 1. 2i n ; ma r gin - right: .Bin } B (font-weight : ext ra bol d; font-style : normal ; fo nt-size : 14 pt ; line-heigh t: 16pt ; fo nt - fami ly : Ar i al l HI (fon t- weig ht : ext ra li ght ; fo nt-styl e : ital ic : font-size : 20 pt ; line-heig ht: 22pt ; fo nt -fa mi l y: Ti mes New Roman i
I 108. Chapter 4
Tip: The TrueType fonts available on Microsoft's site have enlarged character sets due to multi-language suppo rt. The character sets contain 652 characters covering Western, Central, and Eastern European writing systems.
H2 (font-we ight : ex tra bo ld; font-style: no rmal ; font -size : 24 pt; line -height : 26pt ; font-family: Times New Roman) H3 (font-weigh t : extra bol d ; font-style: normal ; fo nt-size: 12 p t; 1ine - he igh t : 14pt: font-family: Times New Roman ) H4 {font-weight: extra bold ; font-style: normal; font-size : 12 pt ; 1 in e-height : 14pt ; fo nt - family: Ti mes New Roman)
-->
<!STYL E>
i. Add a back~:,...-ound color to the document.
<HT ML> <HEA D> <TITLE>Linus Pauling , Ph . D.: The Last I nterview by
Pete r Barry Chowka
</TI TLE> </ HEAD > <STYLE TYPE- " text/css "> <!-BODY {margin- l eft : lin; margin-r ig ht : 1.5in ) . opener (font-size: 20 pt; font - weight: extra light ; font - style: italic : line-height: 22pt ; f ont-family: Times New Roman ; margin -l eft : lin ; ma r gin-right: . Bin ) . normal ( f ont-weight: extra l ight ; fo nt -s tyle : no r ma l; fo nt-size : 14 pt; l in e-hei ght: 16pt ; f ont-fami l y : Ti mes Ne w Roman ) .refe rences (font-weight : extra l i ght; font - style : normal ; fo n t -size : 14 pt : line-height : 15pt; font-family: Ti mes New Roman; margi n-left : 1.2in; margin - right : . Bin] B (font-weight: ext r a bold; font - style: norma l: fo nt-size : 14 pt; line- height: 16pt ; font -family: Aria 1)
Style Sheets And New HTMLText Tags 1109.
Tip: The Ttmes New Roman and Courier Newfonts Microsoft is supplying for Macintosh computers have different character owlines and metrics than Apple's TrueType versions. Microsoft 's versions offer crossplatform compatibility.
110. Chapter 4
Hl {font·weight: extra lig ht: font-style: italic: font·size: 20 pt: line-height: 22pt : font- family: Times New Roman]
H2 {font · weight: extra bold: font-style: normal: font -s ize: 24 pt: line-height: 26pt: fon t -family : Times Hew Roman]
H3 [font -weight: extra bold: fo nt-sty l e: norma l : font-size: 12 pt : line · height : 14pt: fon t- f ami l y: Times New Roman)
H4 (font-weigh t: ext ra bold: font·s t yl e: normal : f ont-size : 12 pt: line· heigh t : 14pt: font -fa mily : Ti mes New Roman]
·->
<ISYYLE>
<BOOY BGCOLOR-"i/ffffff">
j. Add text, an image, and HTML tags. (Note: The tex t slrown in this section is for demonstration pwposes only. Readers mayfind Peter Chowka 's full inten1iew in an HTML file 011the CD-ROM at the back ~ftlris book.)
<IHM L>
<HEAO>
<T ITLE>Linus Pauling . Ph.O.: The Last Interview by
Peter Barry Chowka
</T ITLE>
<! HEAD>
<STYLE TYPE-" text/css" >
<I-BODY (margin · left: lin; margin-rig ht: l . Sin )
.opener (font·size : 20 pt ; font·weight : extra l ight : fo nt-styl e: ita l ic; line-height: 22pt; font-family: Times New Roman : mar gin-left : lin: ma rgin · righ t : . Bi nl
.no rmal (font· weigh t : extra light: font-sty l e: normal: font · size: 14 pt ; l ine -he i ght: 16pt: font·family: Times New Roman)
Tip: The free TrueTypefonts available from Microsoft's Web site may befreely distributed. Howeve1; a Web.follt registrationform is required and may be found on the site. Designers may not supply the font outlines in a form that adds value to a commercial CD-ROM disk, a disk-based multimedia program, an application program, or a utility program.
. references (font-weight: extra light ; font-style: normal ; font-size: 14 pt; line-height: 15pt; font-family: Times New Roman; margin-left: 1 .2in; marg in - ri ght: .Bin) B (font - weight: extra bol d; font -styl e: norma l; fo nt-s i ze : 14 pt ; 1ine - height: 16pt ; fo nt-famil y: Arial) Hl (font- 1~eight: extra l ig ht ; font-style : ita l ic; font-s i ze: 20 pt; l i ne-height: 22pt ; f ont-fam il y: Times New Roman) H2 ( font-weight: extra bold ; font-style: normal; font-size: 24 pt ; l ine-height: 26pt ; font-family : Times New Roman) H3 (font-weight: ext ra bold ; font-style: normal ; font-size: 12 pt ; line-height: 14pt ; font·family : Times New Roman) H4 [font-weight: extra bold ; font-style: norma l ; fo nt-size: 12 pt; line-heig ht: 14pt ; font-family: Times New Roman) - -> <!STYL E> <BODY BGCOLOR- "#ffffff" > <Hl> Dialogue with the Exper t s <IH1><BR><BR> <H2>Linus Pauling, Ph. D.: The Last Interview <I H2> <BR> by <A HREF- " http://members . ao l . com/realmedia">Peter Barry Chowka</A><BR> © ;1996 by peter bar ry chowka. all ri ghts reserved. <B R><BR> <BR><DI V CLASS-OPENER> <IMG SRC-" Pauling_2a.jpg" AL! Gil- LEFT><IMG SRC - · ca p5.gif" STYLE- "background: white">n 1979, when the respected British journal <I>Ilew Scientist
Style Sheets And New HTML Text Tags 1111.
Tip: Ifyou have problems do wnload-
ing the TrueTypef ontsfrom M icrosoft 's Web site, t1y ftp://ftp.microsoft. com/ develop r / d rg/tru etyp e.
</ I> i ncluded Lin us Pa ul i ng, Ph. D.. on its list of the twen ty mos t import ant scien t ists of al l time , it was f or Pauling ano t her in a l ong seri es of achievements tha t i ncluded an unp recede nted pai r of uns ha red Nobel Prizes and some startl ing l y ori ginal con t ribu t ions in bio l ogy, chemist ry and phys i cs . </DIV ><BR>< BR> <DIV CLASS-NORMAL>
By t he time of his dea t h in August 1994 at age 93 , Pauling was probably bette r known for his mo r e rece nt work on nutritional science and vitamin C. In bestselling books on vi ta mi n C. t he common col d and cancer . f r equent ta l k s how ap pear ances , and nume rou s publis hed pape r s and sci ent i fi c pr esentatio ns about a nutri ti onal heal i ng s pecialty he named "ort homolecul ar medi cine ," Pauli ng was an unpa ralle l ed, uniquel y cr eden t ia l ed sp okesman f or the emerging sc i ence of die t an d health .
<BR><BR>
Accord ing to Pauli ng, hi s high- profi l e i nvol vement in un popul ar political con trovers i es of t he 1950s and ' 60s ( in cludi ng or gan i zing t he successful intern ational campai gn t o ban nu cl ea r bomb t est ing, fo r whi ch he was awar ded t he 1962 Nobel Peace Pr ize) prepa r ed him fo r t he eq ually ranco r ous deba t es of th e 1970s and ' 80s when he became t he de fac t o leader of nutr i tional medicine at a time whe n ma i ns t reammedici ne denigrated suc h i nter ests. Duri ng t he l ast t wo decades of hi s l ife , Pa ul i ng ' s foc us on the sc i entific ba sis of nu t r i t ion and hi s un stinti ng advocacy of megavita mi n su ppl ements regular ly made hi m t he cente r of controversy .
<BR><BR>
Even after hi s death, t he controver sies contin ued. Journal ist Lee Dembar t . r eviewing two new biog r aph ies of Pa uling, ca l l s t he scient i st an "emba rrassment" and an "eccent ri c crank" for his inte res t in vitamin C.
112. I Chapter 4
Tip: Adobe and Microsoft's OpenType technology represents a merging ofType 1 and TrueTypefollltechnologies that offers Web designers a cJvss-platform f ont standard.
k. Add a superscript tag. (Note: Peter's style block containing style definitions has nol been repeated here. )
<HI>
Dia l ogue with the Experts
<IIH ><BR><BR>
<H2> Linus Pau l ing . Ph. D.: The Last Interview
<IH2>
<B R>
by <A HREF-" http: //memb er s .aol . com/realmedia">Pe ter Barry Chow ka <IA><BR>
<SUP>© : </SUP>1996 by peter bar ry chowka . all ri ghts r ese rved. <BR> <BR><BR>
<DIV CLASS-OPE ~ E R>
<II1G SRC-" Pau l ing_2a .jpg" ALIGN- LEFT> <IMG SRC - " cap5.gif" STY LE- "background: whi t e" >n 1979 . when the respecte d Br it i s h journal <!> New Sc ienti st <! !>i nclud ed Linus Pau l i ng . Ph . D.. on its li s t of t he twenty most important scien tis ts of all time . it wa s fo r Pau ling anothe r in a l ong series of ac hi evements that i nc luded an unp recedented pa i r of uns hared Nobel Pr izes and some sta rtl i ngly origina l cont ri bution s i n biol ogy , chemist ry and physics.</D IV><BR><BR> <D IV CLASS- NORMAL>
By the t i me of his death in Aug ust 1994 at age 93 , Pau ling was proba bly better known for his more re cent work on nutritional science and vitami n C. In bes t sel ling books on vita min C. th e common cold an d ca nce r . fr equent talk s how appeara nces . and numerous publis hed pape r s and scientific presentat i ons about a nut ritional heal ing specia lty he named "or thomole cul ar medicine . " Pauli ng was an un paral l eled . uniq uely crede ntialed s pokesman for the emerging science of diet and health.
<BR>< BR >
According t o Pau l ing , hi s hi gh-profi le i nvo lvement in un popu lar poli tical cont r ove rs i es of the 1950s and
Style Sheets And Ne w HTML Text Tags J113.
Linus Punling. Ph.D.: T he LnM lt& ler\'lcw
.,~_.._
·~ ~~~~··~·loG·~ .ane._..,...._
l o: /9,9. "'lic11 t~.t r~;'Yetr~
B rll!lhJOUm':ll li.!I'P :;.;/"rJ:S! :ncludcd Lmus A'illir'IZ· Ph.D., on Jt.r
tw aftfo...: !wen.ty mOJf 1mpormo:t
r.:tf!~l.ll.rcfcll !!"oJ. :r W!lsjo· F.Jul:'!l ~!J!I:.Ilr 111.: !C'!,Z x r:e3of a.clt.;o:w'1'rt:U r:r..:ttnf'.'L.ic.J :u. Wl.O'· a!Us'llOJdpJ~r ofw:fl<.nred NoUI Pn=:llJa.nd. W~r.i! nc,ll:·:gly ongm..-:1 cx;,..Jrzbutlc.rJ 11'1 t'fclo.;;:;. ~Nm:utry ur.d p/1)'~!:'4.
Above: Because the opener te.xf is italic, the New Scientist should beformatfed in a Roman or Normal style, emphasizing that it is the name ofa publication.
Li n us Pa uli ng. Ph. D.: The La!,1 lul r n ·iew
"~ · t'i'lo11ryyw ...,.,~ ..::~~
l 'l /979. wf"-"1! the n:I]Xcrca' Bntt:l,
.'Ourr:.t/ HrwSc~.r.IJJt l'l.tlu::kti llrllLf P.::~ltr.g. Ph.D., m: :t:r l:s! oft lw
h~"IIJ flt:>;t f' '".fX)IIdr.J SCll1P111SfZ0}
<:1: loi'N, J! MU:for P~itn.g ~c!o:.:r :r. a /oltgNne: cf.u~~ll!r.tl th.i.l u:c/Jui.-du ·t :ntpr;;o;;C"icmcd.c.c/1 c.r oorul.a · ~d Job~: hzus an.1 S?m... .rt<utii11$1J ongmol cort! r:butwi!S tr.
bl~!og:;. cJo,m~nry<Z!'.d.p:,js:.tz
Above: The only inline tag that worked to transform the type style ofthe words New Scientist at this time was <B STYLE= "font-style: nonnal">.
' 60s (incl uding organ i zi ng the s uccessful in ternational campaign to ban nuc lea r bomb testing, fo r which he wa s awarded the 1962 Nobel Pea ce Pri ze) pre pa red hi m fo r t he equally rancorous debate s of the 197 0s and '80s wh en he beca me the de facto leader of nutrit i onal medicine at a time when ma inst r eam medi ci ne denigrated s uch i nt erests . During the l as t two decades of his l i f e . Paul i ng's f oc us on the sc i ent if i c bas i s of nu t rit i on and his unsti nt i ng advocacy of megavitamin supplement s regula rly made him the cen t er of controver sy .
<BR>< BR>
Even after his death, the cont rove r sies conti nued. Journ ali s t Lee Dembart, r ev iew ing t wo new biogra phies of Pauling, cal ls the scientist an "emba r ra ss men t" and an "eccent ric crank" for his i nterest i n vitamin C.<SUP>l <I SUP>
I. Add the ending tags.
<!BODY>
<IHTML >
m. Save the file. Save the document in SimpleText or your word processor. If you're using a word processor, save the tex t as Tex t Onl y. Give the file an .1-ITM extension.
n. Test the style sheet document. Open Netscape or Microsoft 's In ternet Explorer browser. Open your doc ument by selecting Open File from the F ile pull down me nu.
8. Style change: Override a style. In the opener text, the type sty le of the British jou rnal New Scientist s ho uld be norma l tex t to emphasize that it is a
publication. T his can be accompl ished with a n inline tag that will override the embedded style.
114. \ Chapter 4
<H2> <H3>
BODY
BODY
.NORMAL <SUP>
B
_......... ..... ........-..'"' ... I ,, . ..!<1. ·· ,, ..1 .4·~.::...!.:;~;..:~~~: , .,,,... ._. .... ...,..........v
.................. . ......,,, ......... .... rt-0·'1,l.. 0 01~1 ~,.,.,,,.. ~.-""""" ~,...
..
MJ,,··· ...
ft.~~~·· '<ct.
·'~·-'I·'·~-.~..·t,···.
···",'
_ ---·- ---- . . ....... ..-··---··-··.,- .........r- 1
~?:Bf~~§~~-
--- -----·-- - ·-· -·--·- ····-- ·-- ___...___... ·-· -._..._-__.._·..."-_.,"_.-,.._-._·..-..-._~-.......,.....-·.·...~.o-.l- .-.-~ ....· ......· ....- ...
Sa.
a. Locate the words Ne w Scientist in the opener text.
<HI> Dialogue with the Experts <!Hl><BR><B R> <H2>Linus Pauling . Ph.D.: The Last Interv i ew <IH2> <BR> by <A HRE F- " http : //membe rs .aol . com/realmedia">Peter Ba rry Chowka<IA><BR> <SUP>&#l69 ; </SUP>l996 by peter ba r ry chowka . all rights reserved. <BR> <BR><BR> <DIV CLASS-OPE~ER> <I MG SRC-"Pauling_2a.jpg " AL IG~-LE FT><IMG SRC - "capS.gif" STYLE- " backgro und: white">n 1979, when t he respected British journa l New Scientist included Linus Pa uling . Ph.D .. on its l i st of the twen ty most important scient is t s of all time . it was for Pauling another in a long series of ach i evements that includ· ed an unpreceden ted pai r of unshared Nobe l Prizes and some sta rt l ingly origina l contributions i n biology , chemi stry and physics . </D IV > b. Add an inline tag. <Hl> Dialogue with the Experts <!Hl><BR><BR> <H2>Linus Pauling. Ph.D.: The Last Intervi ew <I H2> <BR> by <A HREF-"http://members.aol .com/rea l media" >Peter Barry Chowk a<IA><BR> <S UP >&I/169 ; <ISUP>l996 by peter barry cho~1 ka . all r ights rese rved. <BR> <BR><BR>
Style Sheets And New HTML Text Tags 1115.
Tip: For derails concerning Microsoft's .free TrueType ojfer, see Microsoft's plan
to add fo nts to the Web: Free TrueType now and Web page fo nt embedding in
the futu re in this chapte1:
<DIV CLASS- OPENER> <IMG SRC- " Paul i ng_2a . j pg" ALIGN- LEFT>< IMG SRC - "cap5 . gif" STYL E- "bac kg rou nd: whi te ">n 1979 , wh en t he respec ted Bri t i s h j ourna l <B STYLE- "font -style : normal" >New Sci entist <IB >includ ed Li nus Pauling , Ph.D .. on its l i st of t he twenty most i mport an t sci entist s of all time . it wa s f or Pa ul i ng anot he r in a l ong se r ies of achi evement s t hat i ncl ud ed an unprece · dent ed pai r of uns hared Nobel Prizes and some s ta r t l ingl y ori gin al co nt ri but ions in biol ogy , chemi s t ry and phys i cs . </ DIV>
9. Style change: A font change in a headline.
Changes in the sty le de finitio ns inside your style block are easy to make. In th is exampl e, try c hanging T imes New Ro man to a sans serif face in the <H2> tag. Start by locating the < H2> tag in the style block.
a. Locate the tag and style definition you'd like to
change in the style block. <HTML >
<HEA D>
<TITLE>Li nus Paul i ng , Ph. D. : Th e Las t In te r vi ew by
Peter Ba rry Chowka
<!TIT LE>
<! HEAD>
<STYLE TYPE- "text/ css " >
<! .-
BODY (margin-l eft : lin : mar gi n-righ t : 1. 5in ) .open e r (fo nt ·s i ze : 20 pt ; font- weig ht : ex tra li ght; f ont-s tyle : itali c ; l ine · height : 22pt ; f ont- f amily : Times ~ew Roman: margi n- l e ft : l i n; margin - right : .8i n}
.normal (f ont · weight : ext ra l i gh t; f ont- s ty l e : normal; f on t -s ize: 14 pt ; l i ne- hei ght : 16pt ; font · fami l y: Ti mes New Roman ]
116., Chapter 4
Tip: Microsoft's OpenType initia tive will include Adobe's CFC compression technology and Microsoft's AGFA compression schemes, allowingforfaster font downloading to Web pages.
.references {font -weight: extra light; fon t-style: normal : font- size : 14 pt ; line- height: 15pt ; font-family: Times Ne w Roman: margin-left: 1.2i n ; margin-right: .Sin}
B {font-weight: ext ra bold ; font-style: norma l; font-size: 14 pt ; line - height: 16pt; f ont-family: Ari all H1 {fon t-we igh t: extra light; font-sty l e: italic; font -size : 20 pt; l i ne - height: 22pt ; fon t - family: Ti mes New Roman}
H2 (font- weight: extra bold ; font -style: normal; font-s ize: 24 pt ; line - he i ght: 26pt ; font-family: Verdana .Aria l.Helvetica}
H3 {f ont-weight: ext ra bold; font-style: normal ; font-size: 12 pt ; line -height: 14pt ; font- family: Times New Roman}
H4 ( f on t -weight: extra bold ; font-s tyle : normal ; font-size : 12 pt; 1 ine - hei ght: 14pt; font -family: Times New Roman}
- ->
</STYLE>
b. Make a change in a style definition. Add sans serif font alternatives to the <H2> tag. For example, add the words Aria/, Helvetica, and sans serif Helvetica or some other sans serirrace wi ll be added if AriaJ is not avai lable on the e nd-user's system.
<HTHL>
<HEAD >
<TI TLE>Linus Pauling . Ph.D.: The La st Interview by Pete r Oarry Chowko <! TITLE>
<I HEAO> <STYLE TYPE- " textlcss '' >
<!--
Style Sheets And New HTMLText Tags 117.
118. , Chapter4
BODY [margin-left: lin; margin-right: 1.5in)
. opener [fo nt-size: 20 pt; font-weight: extra l ig ht ; font-style: italic ; line-height: 22pt; font-family: Ti mes New Roman ; marg i n-left : lin; ma rgi n-rig ht: .Bin )
.norma l [fon t-weight : ex tra light; fo nt-s tyle: normal ; font -s i ze: 14 pt; line-height: 16pt; fon t fa mil y: Ti mes New Roman)
.references [font -weig ht: ext ra light ; font -style: normal; font -s i ze : 14 pt; line- heig ht : 15p t ; font -family: Time s New Roman; margin- l eft: 1.2i n ; ma rgin-right : .Bin}
B [font-weight: extra bold ; font-style: normal; f ont-size: 14 pt; line-height: 16pt ; fon t -family : Ariall
Hl [f ont- weight : ex tra ligh t; font-style: i ta l ic ; fon t-si ze: 20 pt; line- hei ght : 22pt; fo nt -fami l y : Times New Roman)
H2 [font- weigh t : extra bold ; f ont-style: norma l; font -size: 24 pt; line- height : 26pt; font-family: Verdana ,Ar ia l,H elve t ica)
H3 [fon t- we i ght: extra bold; font - style: normal; font-siz e : 12 pt; lin e-height : 14pt ; font- f ami ly : Ti mes ~ew Roman]
H4 [font-weight: extra bol d ; font -style : normal ; font-size: 12 pt ; line -hei ght : 14pt ; font-fami l y : Ti mes New Roman)
-->
</S TYLE>
Formatting text in columns with Netscape's new <MULTICOL> tag
Summary: Use Netscape's 11ew <MULTICOL> tag to.formatlarge amounts oftext imo multiple column format.
1.¢. I II.. l.!.l ! I I Iw :J
Hctscnpc: Llnu' Paulin · Ph.D.: The Last lnl crutcw b Peter Barn Chowlca
~x:. .1~ ~
~ ~
Ill
~~- !m. //hOI'Dtst..!lt~cldw·'ht,.,AnaiJXII'ao.!na~ti"11W'n
Di:Uoruo with lh~ Ezp.-ru
rr:aou.::ad ttndr-.t.l, 'Vhilll Ca:r·ror.'J
or f )"i(t.t~ Uvt<. l<lwttqt ·»".n ~u:
'""'
d.cccrlvu~u-.,.raJtn:tnSt f
'tt'»."'tbCper J ,yQ!t.t:,;J,'Wt:J, tlGt VO!I'ti:.Cit~CC.. Ooe.~!ll! l!y:c.
' 'U.It) 11rr;o)tl.t1"'..'011.'t1.)t.ey
roo..t B<tt r! y.;u wt.::l11) 1!1i n. co L'lltJoi ' ·
Lima Pauling, Ph.D.: The Lasl lolcrview
by~~
· 1996!>1Jot1tt burycU>vb all,_hts
~I\"'(1 .
n..nNt~ttr-tfpt.QtMJ vhodMll't
fol10v lloflet'.s rttltlen t:Mia 1'1l1Ytnl t~m~ofo:l!ya.bo'JtJbcmor.!N BUJihe
onu vhO fellovtd. Hofftr'' 11\tr:t;-y r..~ dor.o 1\"tl\ httet lhltiC~Io:l's
paPltnU Onltitt.vttl(&tt'A)'llvt t
lboln 12 )CID a.~: t..lle ('tO:IO'JXt.J
~tmlnll,,..ttau;:nw.t..»~r
C IIOWXA; Whal'' (O:III on I.!.W:Iyt.l
lhe LIAU Ptulinlln.su-Jl~ of S<:~nct tM MeJicl:lt In Ptlo All:), C&W' , vh:;:h:.:~tn.t1yctlebnM tt1201h
UU."W f~
Ll97'9.vtr..U:tt)t(~Br.u.'l
Per 1:at !tl:'lt CU'wto:. aM I sO! dJo·
pu.W He· Scleatbl !n:b!ed LtnJ Pa·.tuc. P~ D , Otlltl Uto!Tlle tvY.:I'.Y a..:.11 tm;o."'::il'.l xient.n of all amc, ~~ ~ for f'ttt1C: )..''CI.t.e: b akq :e:-n o! ~dUt'lt."tt-rtU ~t lr.::o:it:d Ill ID~U'ld ptit Of n.!blnc!. No'XI
Prt..I>Sar.Suur.e rtvttt lYon inti
t.,r)' lJ:at:lotVIt!Cata:t,bt(u'J.bcu JOOI\U'Ib ccuxof lbdi.JC'.,. u W'r.Ue·,!rw:r.ut bot "-l..."C IOcn.-,u 0!'
v.te.t'Ul c u u .t:unc·t3 arrrorru~
ccn.Ya:~uotlll.Utti·Y l rov~U:Ir~ vt!:.J IOfftctUtt'll'ti'J)5'i!tJv.Ca
N etscape's new <MULTICOL> tag adds newspaper-like columns to a Web page, whic h is a practical method of formatting very long articles. ln this example, Peter Chowka's Linus Pauling in terview fills tl1ree columns, as defined by the tag's COLS attribute.
1. Add <MULTICOL> after <BODY>.
Decide how many columns you need, and add a column number to the tag in the form of an attribute. Example:
<MULTICOL COLS-3>
a. Insert the <MULTICOL> tag.
< HTt~L > <HEAD>
<TITLE> Linus Pauling, Ph . D.: The Last Interview by Peter Barry Chowka <!T ITL E> <! HEAD>
Style Sheets And Ne w HTML Text Tags J119.
Above: Peter Chowka 's Linus Pauling inten 1iew. Notice that the opening initial cap causes leading difficulties in the second column.
<BODY BGCOLOR- "Iffff ff "> < ~I U LTICOL COLS-3> b. Add two line breaks after the image. Linus Pauling's image now needs two line breaks inserted after the im age tags and the ALIGN=LEFf attribute deleted. Recalllhatlhe image ali gned o n the left side of the tex t in Lhe sty le sheet example. <HH1L> <HEAD > <TITLE>Linus Pa ulin g, Ph. D. : The Last Inter vi ew by Peter Barry Chowka <!TIT LE> <! HEAD> <BODY BGCOLOR- "Uffff ff" > <I·IULTI CO L CO LS-3> <HI> Di alogue with the Experts <IHl><B R>< BR> <H2 >Linus Pau l i ng. Ph.D .: The Last Intervi ew <! H2> <BR> by <A HREF-"h ttp : // members .aol .com/ rea l medi a">Peter Barry Chowka<IA><B R> ©:1996 by peter barry chowka. all r ig hts reserved . <BR>< BR>< BR> <IMG SRC- "Pa ul1ng_2a.jpg"> <BR><BR>
120. , Chapter 4
Above: The <MULTICOL> tag makes all columns the same width unless you set the overall width with the WIDTH attribute. Use a pixel value ora percemage. In this example, the WIDTH attribute is set to 300pixels: <MULTICOL COLS=3 WIDTH=300>
c. Add a closing <MULTICOL> tag.
<I MULTICOL>
d. Add the ending tags.
<I BODY>
<IHTML>
e. Save the file. Save the document in SimpleText or
your word processor. If you're using a word processor. save the text as Text Only. G ive the fi le a n .HTM extension. f. Test the three-column document. Launch Netscape, and open your docume nt by selecting Open File from the File pull-down menu.
l ,hun l'·uli·J, l'h. U.: Ttle l .ut lm·M··
.. ,._ . . ,..h,.....I..,.I~............., "
Above: In this example, the WIDTH attribute is set to 85%: <MULTICOL COL5=3 WIDTH=85%>
Style Sheets And New H TML Text Tags 121.
Controlling font color and family with the <FONT> tag {Netscape Navigator or Internet Explorer)
S u mm ary: Use the <FONT> tag's new attributes ro control type color and type.family.
Dialogue with Ihe Experts
Li nus Pa uling, Ph.D.: The Last In ter view
t.y~~~ ·a996 t.:~~·er u...,.,.dJ:I~·~.a ~,_hUrtJtr.ot t
I, /979. w!:tzll tlw respected British
;ouma/ ucw Scientist mcluded Lmus Pauhng, ?h. D., Ollils list ofthe /11\Znty II:DSI II!If.'Orlant SC!21111SIS of all tu,e, 11 wasfor Pauluzg a1:other Ill a lo·:g senes ofacluevemen!s that mcludedaJl unprecedet:led paz r of wv;harr!d Nooel Pn::es and some stan !zngly or:gmal comrzb:l!IOIIS 111 bzo!ogy, clzenustry andphyszcs.
122. I Chapre r4
T he <FONT> tags recent COLOR and FACE attributes may be used to control typography on your Web pages. In the Linus Pauli ng interview, the tag and its attributes may be used to alter the font color and family in the ar1icle's headllnes. (Note: The <FONT> tag and a ttributes may be applied to any part of a line.)
1. Alter the headline color. To change the color of the headli ne Dialogue with the Experts, an RGB hexadecimal triplet is needed for the <FONT COLOR=> tag.
The Linus Pauli ng image is a Photoshop duotone that adds a violet shade to what was originally a black and white scan. The Photoshop eyedropper revealed that the shade corresponds to Pantone 667 CV, which the Best Business Solution Online Color editor translates into a hexadecimal triplet value of#584886 using the R=88, G=72, and B= 134 data taken from Photoshop. (Note: See Convert a Pantone RGB value to a Web page color with the BBS Color Editor in the Online Tools chapte1:)
<HHIL>
<HEA D>
<TITL E> Linus Pauling . Ph .D . : The La s t In t e rv i ew by
Pe ter Ba rry Chowka
Tip: For RGB hexadecimallriplelvaluesfor your <FONTCOLOR=> lag, visif Besl Business Solulion 's Online Color Editor at hllp:!!IV\1'\V.bbsinc
.COI/I.
<!TITLE> <! HEAD> <BODY BGCOLOR-"#ff ffff"> <Hl> <FONT COLOR-"/1 584886"> Dialogue wit h t he Expert s <I FONT></Hl ><BR>< BR> <HZ>Linus Pau l i ng, Ph.D.: The Las t I nterview </ HZ> <BR> by <A HREF-"h ttp://members.aol .com/ real media" >Peter Barry Chowka</A><BR>  69 ;1996 by peter barry chowka. al l rights re se rved.<BR><BR><BR>
2. Alter the headline face.
<HTML> <HEAD> <T ITLE>Linus Pau li ng, Ph. D.: The Last Inte rview by Pete r Barry Chowka <!T ITLE> </ HEAD> <BODY BGCOLOR-"Uffffff"> <Hl><FONT FACE-" VERDANA,ARIAL .HELVETICA SIZE-"5" COLOR-/1584886 " > Dialogue with the Expe rts <! FONT><! Hl ><BR><BR> <HZ>Linus Pau l ing, Ph.D.: The Las t In terview <! HZ> <BR> by <A HREF-"http : // membe r s. ao l . com/ realmedi a">Peter Barry Chowka<IA><BR>
S1yle Slteels And New HTML Text Tags 123.
Microsoft's plan to add fonts to the Web: Free TrueType now and Web page font embedding in the future
Summary: The Microsoft/Adobe font technology 111erger represent.\· a unique contribution to Web-based typography.
124. Chapter 4
~
'llE'bfonts .sit.1
A re you sick ofdesignjng wilh Times Roman? Typographic enhancements to HTML are on the way. To solve the Web's font problems, Microsoft has developed a new font file format with Adobe Systems.
1. Solution requires downloading (for now). Although Microsoft and Adobe have developed a publicly available font specification that promises to improve Lhe quality of type on Lhe Web, their solution requi res developers and end-users to have screen fonts installed in their computers. Microsoft is dist1ibuting free fonts from their Web site. These include the fonts cun·ently supplied with Windows 95 (Times New Roman, Courier New, and Aria!) and a set of fonts cun·ently supplied with the Windows version oflntemet Explorer 3.0 (Aria! Black, Impact, Comic Sans MS, and Verdana). Other fonts ava ilab le on the site include Trebuchet and Georgia.
The OpenType format supports bothType I and Truel'ypc fonts, and the format is backwardly compali ble with all existing TrueType and Postscript fonts.
2. Designing with fonts. Although there is a Truel'ype rasterizer built into Windows 95. Windows NT, and the Macintosh, for now, screen fo nts must be installed in an individual user's computer in order for lhe fonts to be displayed. Macintosh and Windows Web designers interested in using fonts need to distribute any fonts they use for Web viewers to download. Microsoft's free Truel'ype foms have been designed for this purpose and fo nt downloads are provided on the Microsoft site for bolh platforms.
Using fonts already bundled with Windows 95 and the Windows version oflnternet Explorer version 3.0 increases the likelihood that the fonts wj ll be displayed because the fonts are already installed.
·.· ., ..?.. ~- ~- ~ !1, .E·'. !;. ~:. q
.., - - ~.~.:~1~::::: :,:::.~·;:~::~~
DieJo~ue wth lht Experh
Linus P:1uli n{:. Ph.D.: The L:1s1 lnlenirw ····,~ ..~,.....,..,Jro;......... ........l
A bove: In this example, the headline
Dialogue with the Experts was
fo rmatted with :
<FONT FACE- " VERDONA, ARIAL, HELVETI CA" S I ZE- "S " >Dialogue wi t h the Exper t s</FOIIT>
Web page developers on both platforms may use fo nt alternatives in the <FONT> tag . Netscape's Navigato r and the Internet Explorer browser will search through the fonts avai lable on ru1 e nd-user's syste m ru~d load what is available. If none of the fon ts m·e available, the browser loads the defau lt typeface . (Note: The <FONT> tag requires an ending <./FONT> tag.)
Example:
< FONT FACE- "VERDONA . ARIAL,HELVETI CA" SIZE- " 4" >
3. Embedded fonts (the future).
Microsoft is currently developing an embedded fo nt technology that will free Web viewers from needin g to install fonts on the ir compute r. Font information will travel with a documenl. Microsoft and Adobe have plans to s ubmit a proposal for font e mbedding (us ing OpenType) to the World Wide Web Consortium. If the proposal is endorsed by W3C, the iniLiative wi ll become a standard method to use fonts on the Web. Even if the proposal is not endorsed by W3C, M ic rosoft plans to add this font compression technology to the Internet Explorer browser.
Style Sheets And New HTML Text Tags 125.
Online Tools
This chapter introduces valuable resources for lhe Web artist who uses lhe Web as a CUITent and convenient source of information. The chapter begins wilh a color editor tool from a company in Houston called Best Business Solutions (BBS). Web artists who need hexadecimal codes for d1eir HTML tags to color a background or text can use lhis editor in conj unction wilh Photoshop as a translation tool.
Also covered in this chapter are search engines, which have become popular online tools for fmding information on the Web. Yahoo! search, originally created by David Filo and Jerry Yang from Stanford University, not only provides an easy-to-use search engine but it facilitates a way to extend the search to olher search engines. To promote your site, you' ll want to submit information about your pages to all of the search engines, and this chapter shows you how to begin lhe submission process atYahoo!.
Convert a PantoneRGB value to a Web page color code with the BBS Color Editor
Summary: Visit Best Business Solutions' Web page, enter the RGB value ofa desired Pan/one shade (gath ered from Photoshop), and IVatch the BBS Color Editor display the color and generate the required HTML code for your Web page.
reopyriglt 1995 BBS, Jr.:
-.[]
' 1 ·:
Net s cope: llt Ml Color'( lllt or for CGI
Lounon: IMt> /l-to::o1...-~lotat·cst-l~n/u'...C:df"..cr..c)l
l 'wt 1t's·_..,., j Jv"'tt "·Cotl1 l)o.s~...·~ IJ HttS·.ant- ~~ ~ 'Seft~n I
_z..
m:
!Ill
r!AA»L ,-. , fR!! u;mc e.;oc 11
Sec U-Q du-..t l.ov to p·t · ti1Jtr llAl.iD BUS Adnrd.Jlnc 80614 . ColurUJ~r lor Wi:Mo'W':I Vl . l
1.:1 relc..,.,<l ·U avt.Ua\k e.t ou ·~~ till~
.. · ...
_ 11
T.lu:l b lbo JlT'H.l. co._e of ,oaz c:nJur .nlr1;1io.a·
·l' ColorEdltor ror CGI VI.O I
tf:llrq: oz tcuta.u to llTMJ. 3.0 apttafit1ldoa 4rnlope4 Netx·pe:
r: Cl'P."-''hl1.~ '-'f."tlm..·Atc ,\blli?;w.:.f.Qe"t
Seltc:1 A Dlnron-
S.liK:t A COlor
~ B ut.&:roau Colot: Dr-f11llt
.\l1e.El~
.V.t.io;; u n h. .
Usc Dactcrout Pk11lrc: 0 Tu ® No
lb*,tp II
I !Q Tc~ :,lk.ldflh
ro LIU tut: &toulll
Q VbJu-;;;;1Ut: 1Att01Vt
f0 A<:rl~ UJ\1 1UI : J>tliilllh
IAr.t.J.q c.~'Mt.et &r.U.q u.C'hit-.2' o\nt..t .q: ..,..Q'hit..)
o\ntlq .wO'hlhl
~U.III II"'l.I..
th.et
tlh.r.:t.Mftla;M.
Dl ~
Blw · iol·t
...~
C...4et l l l u e
l C·4tt.Bl,
lo tap·"
_l
non
.. uv.e
<O·6~"S>
R: io: [ nr
r -
, T"'""""l
1'lWI Jac· tJ ,runt&~. ·ytU,t».u.Lnett..1Rl!lJi9J.1 ClHlJO
V Cop yrtr;b.l 1995 llrllJ!.5Y.ln~(JUl3) AU RJ&)lu n.lln'red
Adobe Photos:hopn.1
B est Business Solutions' Web page is an essential tool for graphic desig ners who want to add color to a Web page. You can access the tool, called the BBS Color Editor, at htLp://www.bbsinc.com/ bbs-cgi-bin/colorEditor.cgi. Adding color to a Netscape backg round or text requires placing a hexadecimal red-green-blue triplet in an HTML document tag. For example, to color a background white, the tag would appear li ke this:
<BODY BGCO LOR-" f/ffffff">
The BBS Color Ed itor has an extensive list of color names that were created by BBS. When I wrote and asked them if RGB colo r infonnar.ion (Photos hop, 0-255) could be translated into the HTML hexadecimal triplets needed for the HTML tags, they wrote back and said they had added an RGB fie ld to the ir Color Editor! Graphic designers can obtain an RGB value for any shade they use in Photoshop
Online Tools 1129.
1a.
1b.
I Oook:
1d. 1o.
C· lerPk tu
· "crrJ I Cenu l) ( tu\ IOIII"'t ··otEJ·
Q\oEJ:. ooD
o ooEJ:. "D
o o:@::J col!!]:.
.. o oo@::]
0"~
",'!~ ill""
K:~t.
Custom Colors
~
I Concc l ) I f'lct er J
Ke y" ' 3935
0~ c
O~ M 69 ~ y
o ":o K
Tyj;··h'l JU"')tf' to JflKt ·· ., ' "' «»r' hl't
Celot Pkltet
D
Q!:)
I ( CeMel
( rm tom)
(Pantone, Toyo, Trumatch), type the R08 values into the Color Editor, and the Editor displays the desired shade on screen and generates t11e hex code for an HTML document, as shown in the following table.
The Pantone shades used in this example are:
Item
Pantone # RGBValuc Hex Code
Background
3935CY
R=255 0=248 8=84
# fff854
Text
302
R=O
#003850
0=56
8=80
Linked text
1685CV
R= ll 4 0=41 8 =22
#722916
Visited link text 172CY
R=246 0=37 B=O
# f62500
Active link text 355
R=O 0= 140 8=60
#008c3c
1. Find desired shade(s) in Photoshop. Decide which Pantone you'd like to use for the background , text, link text, visited link text, and active link text. Locate the ROB va lues of these shades:
a. Click on the Foreground color swatch in the Toolbox.
b. Click on Custom. c. Click on the pop-up box in the
Custom Color dialog box to select a color model.
d. Scroll to select a shade. e. Click on Picker.
RNP A Co lor DIC Co lor Guide FDCDLTDNE
~I
PRNTDNE Process PRNTDNE ProSim PRNTDNE Un coat ed TDYO Co l or Fi nd er TRUMA TCH
1c.
130. 1Chapter 5
0 R: !2551 0 G: j2481 o s: l84 1
2.
I@ Backgrowtd Color: DeJaub.
3a.
I 0 Input RGB \li\lue (0-2SS)
3b.
R:0G:0 B:0
3c.
3d1.
Hn!J informotlon you submll Is Insecure and coultJ be ohscruell h!J o third pnrtu while In l rn nslt.
H !JOU ore s ubmltllll!J poss words, crudlt to nJ numbers, 01 uther lntunnatiun you would like to keep ru1uote. It 111nuhl be sorer for you to ca ncel the submissi on.
OCl} (oon'l Show lignin ) ( Concel J
3d2.
'This is the HTML cotle of ) 'OW' color selection:
<:bcXIy b;Jcolor="Jifff854">
3&.
joo Tnt: DeJaub.
4a.
This is th11 HThtL code of your nlor stlection:
4&.
I®Link tu1. : Defcwh
Sa.
2. Record the RGB value of your color(s). The Color Pi cker dialog box will display RGB values of the color you c hoose. Record thi s information.
3. Find the hex code for background color. a. On the BBS Color Editor Web page, make sure the rad io button next to Background Color is selected. b. Click to enter an "X" in the Input RGB value field. c. Enter the RGB values you recorded from Photoshop. d. Click on the Test It Now button (Note: The BBS Color Edito r is illleractive, so you 'II see a warning dialog box conceming security. Click 011 Don't Show A gai11.) e. The BBS Color Editor wi ll c hange the background to your· desired color, and the hexadecimal HTML code wi ll be displayed at the top of the Editor (in this example, body bgcolor="#fff854").
4. Find the hex code for text.
a. On the BBS Color Editor Web page, make sure the radio
button next to Text is selected. b. C lick to enter an "X" in the Input RGB value field.
c. Enter the RGB values you recorded from Photoshop. d. Click on the Test I t Now button. e. The BBS Color Editor wi ll change the text to your
desired color, and tl1e hexadecimal HTML code will be displayed at the top of the Ed itor (in th is example, TEXT="#003850").
5. Find the hex code for link text. (Note: Link text refers to highlighted hypertext that is activated with a mouse click.)
a. On the BBS Color Editor Web page, make sure the radi o bunon next to Link Text is selected.
b. C lick to enter an "X" in the Input RGB value field. c. Enter the RGB values you recorded from Photoshop. d. Cl ick o n the Test It Now button.
011line Tools 131.
I® Visited linktext: Default
6a.
@ Act:iw linktext: DeJcwk
7a.
132. 1Chapter 5
e. The BBS Color Editor will c hange the text to your
desired color, and the hexadecimal HTML code will be displayed at the top of the Editor (i n this example, LINK="#722916").
I'This is the HTML code ofyour color selection:
<body .bgcolor:"#fff854" t.ext.·"#003850" linlr-"11?229 16">
5e.
6. Find the hex code for visited link text. (Note: Visited link text refers to a link that has already been f ollowed.)
a. On the BBS Color Editor Web page, make sure the radio bullon next to Visi ted Link Tex t is selected.
b. Click to enter an "X" in the Input RGB va lue field. c. Enter the RGB values you recorded from Photoshop. d. C lick on the Test lt Now button.
e. The BBS Color Editor will change the text to your
desired color, and the hexadecimal HTML code will be displayed at the top of the Editor (in this example, V LlNK="#f62500").
'This is the HTML code ofyour color stlection:
<body bgcolor·"#fff854" text·"#003850 " linl:="#?22916" vlinl:·"#f62500" alini:·"#008c3c">
6e.
7. Find the hex code for active link text. (Note: Active link text refers to a link that's currently active or a link with a mouse button held clown. )
a. On the BBS Color Ed itor Web page, make sure the radio
button next to Active Link Text is se lected. b. Click to enter an "X' in the Input RGB value field.
c. Enter the RGB values you recorded from Photoshop.
d. Click on the Test It Now button. e. The BBS Color Editor will change the text to your
desired color, and the hexadecimal HTML code will be di splayed at the top of the Editor (in this example, A L I N K = " # 0 0 8 c 3 c" ) .
<''4").p_/
Simplt?Tt?xt
8. Try creating a new HTML document using color tags.
To test your color tags, create an HTML document on your hard drive, and open it in Netscape.
a. Open S impleText.
b. Create a new document.
c. Begin a new document with the following markup tags
<HTML> <HEAD> <T IT LE>New Colors</TITL E> </ HEA D>
9. Add the color tags.
<HTML> <HEAD> <T IT LE>Hew Co lors</TIT LE> </HEAD> <BODY BGCOLOR- "#fff854 " TEXT- "#003850"
LI NK- " (/722916 " VLI tlK- "(/f62500" All t~K"-II008c3c" > <!BODY>
10. Test a background picture.
The Color Edi tor can test any picture availab le on any server as a background image. All you need is the correct URL (Uniform Resource Locator) . If the image is smalle r than the Netscape wi ndow, Netscape wi ll tile, o r repeat, the image to form a wallpaper effect.
Netscape's server has background samples (Figure I Oa) available to you for download (http://home.netscape.com/assist /net_sites/bg/backgrounds.html). The Color Editor can display a swatch as a test background.
a. Go to Netscape's Background Samples page at
http://home.netscape.com/ assistlnet_s ites/bg/backgrounds. html. b. Record the fi le names of any samples you 'd like to test.
1133. Online Tools
D
Netsca
¢o l ~ 1 ~ I ® I '® I -
~~~~~0
Loe>otion. http :/ /wvw.infocom.not rbbs/cgi-bin/colorE
I I I What's tlov? What's Cool? Handbook
lltt Su
10c.
Tip: To replace a file name in the URL field, click in the text and use the right arrow key to move the c ursor all tire way to the right. Press the Delete key lllltiltlrefile name is deleted, then retype another name.
134. 1Chapter 5
c. C lick on Yes in the Use Background Picture field on the
Color Editor page.
d. Enter:
http://home.netscape.com/assist/ne t_sites/bg/fabric/ ye ll ow_fabric.gif
e. Try a few of your selections by substituting another li le
name in place of fabric/yellow_fabric.gif.
11. Create a new HTML document.
To test your background picture, create an HTM L document on your hard drive, and open it in Netscape.
a. Open S impleText.
b. Create a new document.
c. Add the following markup tags:
<HTHL> <HEAD> <TITLE>Background Picture</TITLE> </HEAD>
12. Add the BODY tag.
(Note: Step 12 requires that your PPP connection be open; howeve1; you can test step 14 0 11 your hard drive.)
<HTHL> <HEAD> <TITLE>New Colors</TITLE> </HEAD> <BODY BACKGROUND- "http://home.netscape
.com/assistlnet_sftes/bg/fabric/yellow_fabric.gif"> <!BODY>
_ Nct scop e: New Colors
~~~~_J;J~~~ _j f
J H:m-· R·lea.d h\.t9f'J' Optn Print fhf
I ~tion tilt ·IIIHDI't>.skto"9!20roldtrlh·t ~r;.'95201U1
I
-t'· <lovl l llho t'·Cootl l HIOOi>~ I '"t S.oroll I Nt tD...<t<"rl r~o..<;rooos l
"~
II
Q
Tip: Try using 1he URLfora Nelscape background sample in 1he < fMC> wg. Inslead ofriling rile swatch as a backg round, only one .nvarch will appear on the page.
G-
<:>
f<;)
1L"!ll o......,..t. o.n..
l!i
13. Copy a background sample (optional). Copy a sample to your hard drive, and use the file name in your < BODY> tag.
a. Go to Netscapc's Background Samples page aL
hUp:l/ho me.nelscape.com/ ass ist/net_s ites/bg /backgrounds.ht ml .
b. Press and hold down the mouse pointer on a sample.
c. Select Save This Image As.
d. Use the de fault name, or type in a file name.
e. Cli ck on Save.
14. Create a new <BODY> tag (optional).
(Note: the.fi/e na1ne you createfor your tag may vwy depending 011 where the image is located. This example assumes rhefile ye/low_Jabric.gifis is in the same directOJ}' as the HTM L document. The file /Iaiiie together with o11e or more directo ry names is referred ro as rhe pat h.)
<HHIL > <HEAD > <TI TLE>New Colo r s </TI TLE > <! HEAD> <BODY BACKGROUIW· "ye l l ow_fabric.gif" > </ BODY>
Online Tools 1135.
136. 1Chapter 5
15. Summary of HTML tags used in this section. The tags you see in this list (in alphabetical order) re flect the HTML 3.2 specification.
<BODY> .·. <IBODY> A tag used to open and close the body of a document. This tag uses the following attri butes:
BACKGROUND specifies a URL to point to a background image that will tile to the full document image area. For example: <BODY BACKGROUND- "yellow_fabric.gif"> BGCOLOR controls the color of the background. For example: <BODY BGCO LOR- "ilfff854" > TEXT controls the color of normal text. For example: <BODY TEXT- "/1003850" > LINK conu·ols the color of link text. For example: <BODY Ll ti K-"11722916 "> VLINK controls the color of visited link text <BO DY VL!NK- "iff62500"> ALINK controls the color of active link text. <BODY ALINK-"il008c3c" >
<HEAD>...<IHEAD> A tag used to open and close the header portion of a docume n t
<HT!'YlL> . . . < I H T M L > A tag used to open and close an HTML document
<TITLE>...<!TITLE> Used inside the head, this tag describes the title of a document, which shows up inside a documem's title bar.
Searching the Web on Yahoo! search
S ummary: Lookingfor links thar complimem yow·page? Doing research? Just broiVsing the Web? T1y using the search engine at http://IVIVIV.yahoo.com.
IJ
Netscape: Yahoo
gj
~~~~~_ru~~~ Ill ft'lf'..,rd Horrw R..1o·d lmiiJI"# Optn Print
f' W\d
:, top
Loo1t1on·lhttp //..,...,..,,t.J thoo.eom/
I
I I I I lfh·l 's tl~w? \lhot 's Cool? Hondbo<l<
ll+t Suroh ( fU.t rr.r~torta J N··J~upJ
..... e-.:,.·y. h,.. r A~ ~ @
@)
~ lloadliaes Popular
E)
=
~ uo~
=-o
!J
~rlt~ u,
0
Random
~
lafo
·
Bit ~: H"~im:
~
Tn!:!211JVJ.tWl_
l ( Sean:h ""-llllll.
· An· b!U!U£!. tl- 14XV?iV. ~ -. · IL~!>W..ll!lll.llmPoJIJ.YflllWI
~. li:lUlA..u. ~ · !d!l~P.lllta ··~-!!IlUI!!
(>!_..... lJ:!l' " "' 'I· ~~ · ~ !Qi!I:W: tJ. .- .....
e ~J\IDJP.Jftj ~r·.!J
1:!.. ~ 1$1£." .~ <:.W.-
e lll!!U:niDO.I\\ ~ (lfuAI], Aru,·i·.;.. W!L tllll!Lv, ~
e f!.t.\IIJII !:!:!!m!. ~-~Jim:.:.:, ill<:i. -
· ~_n[l!IG)J l&llll!.!..tJJ. fltll,,~_
· ~llll ~l'lll!r[l!n!J, 1w.!. lmlJ. ~ -
· B.tltrUtt t.~ 'l ~ Pl;M '\;u.Mt"r
· B!&i.!!l!l! ~.1.~~-.... !!.~ JWl. ~
· <~ :!J.I!J.<)W, &!W< ·u, ~- ~
· ll!!£1·UIJ:J~·~t 11iil2!1:.~191lY,I.l~~ · :T9£:1.·&··"~111~
-f1:;211. U!m;w!.!Wm:!.-
n ..,w, oo ~tl''N'i.~.lllllll!fC"llll.J fotlwll""" om notworn '"''"""..
31\lloth!r~
.;,J
----:if ~ll tlttD:I/wvv.uatoucLt«tt/v·bhl.lf.C.h html
..
of) I;
I fyou've never used a search engine, you' ll be amazed at the power of th is tool , w hich w ill search the Web for a topic of your choice. There are several such search engines or robots on the Web. and Yahoo! (hllp://www.yahoo.com) is o ne o f the most popular.
Yahoo ! was created by David Fil o and Jerry Yang, both Electrical Engineering students at Stm1ford University, w here th is tool was housed for the first nine months of operation. Yahoo! is now off-campus. It's an independent company, and the robot runs on three Si Iicon Graphics [ndy machines. For speed reasons, complex searches are not al lowed. However, the engine supports a si mple boolean and search, and an opti onal fill -in form allows a visitor to specify a number of matches through a popup box on the form.
1. Select a topic from Yahoo!'s top-level.
T he simplest way to use Yahoo! is to select f rom am ong the categories organized on the ho me page. Each category has l inks that w ill lead you to related home pages.
Online Tools 1137.
138. Chapter 5
a. Select one o f the topics organized into top-level
categories o n the Yahoo ! home page.
b. C lick on a link.
o IJJ:IItUJ tJI( ~<11.1!"!17 Jl!t!JI tJ::· .1 ~~ ll:....·;:k 1 ~
· R'PrH'..l.f.IQD
'"' l&lm!L~ l"!m:. 6Jm.
a Rtlllr.AC.J. IJ!:B:.~~
lb.
c. The l ink wi ll take you to pages of other links to related
Web pages.
Compuwrs and lnwrnot · MJo. e CJIIIIPllttl ~I·AH0.
· ILIII!Il·~nl·tP. · CIIIIIP.JlllDK _Qu·l ii'Lil;l e !<!tJl(tJOD<;j!~ · Qt#llUP ~tbl13hJ-c
lc.
2. Use the Yahoo! search form.
a. Type in any topic on the Yahoo! home page.
b. Click on the Search bullon.
c. A page of related links will be displayed for you to
ex p lore.
2a,2b.
;:.
Netscape: Ynho o Search
~~jJ.JJ~lj~_ru _j 1«..· I He.,.
"'*' ~"'.o·J ~~
~\
fhJ
\..~t··. It tl;t ll··"e-" ~at..oom/tn/s.·ch?pn-i->...S..t-w&~c-.n.l.s-d....-s&I· I OO
..,,,.,,·· , ........ c.., l -""""" r ...,...... , .... ~~~~ ·...,.! ~
Yahoo Sca.-ch
llil""" lhiN··lll\IS.II&lM 1£\Mlllllpl
\\'ami·; ~' ''U rtt.:ftfd Ot~lbi; 1lm IOOo! ..!:t: tt&U'I"-'ftk"'P.
tC-orntl VtAf t Jcorlw-4.ttlel\t>pt'.t~g(-dt)
At !".£u Iii'* Oucurd IU1Jlu
· lt::.ml.I:JI ~.n W !ot U d-:.p kv I ccC:In uG v:vd Lollfi.l.t. 'IIIO'.a
~
·
2c.
Iii
Ill
I
· -
·
r'
Extending your Yahoo! search to other search engines
Summary: The Yahoo! search engine provides links to other search engines at the bottom ofthe pages that are retumed. Use these links to extend your search without retyping your keyworr/(.1)
.::1 '. .2.] 2.1.~.1.:.1~1 ~] :.:J
- 6:£!.~·-·- _._..._ ....,......
......~ -~-~ " . . . - :na. ._
--- a--~-:.W...zl&l;.;;&. ..............
-·- Wf' ·I'll , ...!'· ..-........, ···
__ ..... - ,__ ..... '--
~
,......,_ ...... ..... -·L U.l.... ..,.,
- - - - '"'_, ___ ....- J..0-··4~ - .
lb.
lc.
..
Ltortllon ~11 111/..,..,v ;atoe;o(._,/
l'itlti'·N·'W1 j(Vh.at'ICool?jJDrt·INik-n· ll ~t lnrth 1 ~1 $~t...,.· )
' 1..!:
· f·t
:s:raxli).MM...
1~
_ .. ·~J:.:.I
~ ·~...-. ~ · ·f..-~
· 6.f'9_t11t IJQIUit'lca. ~I) ·t\Y,I.It.:
· ltJ,Ul\UL.PIUtULPIJitYI~rA!l C~·t.''~'. b tl·Jt\.(l- t1d
· COt~P.Jl!t'f1 · ·II lat'"lllel!IIf·'l tlta!,":)."Y..fl.l. r'!..ti:'···i,l
· ~~
~- .· -·.
~
· ~tau.t
· tf'-~ aD'l f"ftCltiP"''
~~ttU:....Jtr<.!D.· ~ti.UPi'JJli'Jtr·'-
ftt-: ··-<'·,...~ t ··xr:. ,. · .w·-~
· R4':htun
~~l"QC.~.
· RnUl.A&l
:.:..sau..·n - 'l.L.f' · kltla
T he page that returns the results of your Yahoo! search w ill have a group o f links to other search engines at the bou om of the page. T hese links allow you to extend your search to one or more of the search engines lisred without retyping your search topic. (Note: The search topic you ~vped is referred to as a keyword.)
1. Steps to extend a search. a. Follow the steps in the prev ious section to conduct a
search on Yahoo!.
b. A t the conclusion of your search, scrol l to the bollom o f
the page that i s returned.
c. Click on a link to another search engine. d. A page o f related links o n the search engine you chose
wi ll be displayed in your browser window.
__ '·' ::._... ,_ ....... ..,.._ .. ..............';.~.....
..,.._,,o.. ._..,. ___ .....,, ""··-·· ~
,..,.1'1 . . ~1111&··
· " " - " - 14(~.>-\,1 · ,lf·ttrl It'" J" lht IW
· - · t o r.·11~f""'"l
t ' -·...., "'"'·'-'-· A.-oL- Io ~..,...,..,
·~ ·· ·~ · ~::~, .....u ...· · ........ uN..,.
- · -- - - - . J __:!-:::...
ld.
Online Tools 1139.
NetSite assistance from Netscape
Summary: Visit Netscape's home page to download Netscape plug-ins and updated reference material on changes in HTML. Tip: if you're not currenrly online. it is possible to load Netscap e on your hard drive and compose HTML documents locally. Create the HTMLdocuments using TeachText, SimpleText, o r your favorite word processor (be sure ro save the document in your word processor as Text Only).
1a.
,~..=..,-~.-:-%¥~~~;:;::- rrm.;
tt· ...::e-.tnatn
--~~:.:."..-.:,"!.""!!::::. ·.; u. -c.r._~.,d.,-._lf~ ··- - · YJIOPt*.t-...t
1 b.
w·N~~.'~Ct\PE· j .}_/ . ·
, YO. If CUibl 10 H4WIC.AI1Nt. I HI\ "II ~·'!..:
' = : "'~~
I I =~ ·~ I '~;:' AJUUUQ =T=
NETSCAPt: DELIVERS 1997 V ISION
DOVJri.OU Oil 11U"RCIU8t Tilt I. Ann ) IU I CA.PI:
3onv.un
I Sdect~6M clkkbtl.:IY
I
h ..aMtthol ..t
~.~·;,~I '1'~~1 ~l:'l
·
Netscape's Web site (http://home. ne tscape.com) is a valuable resource for down loading a c urrent version of Netscape Navigator, plug-i ns, and current reference mate rials on HTML.
1. Locating Navigator software and plug-ins. a. Click o n the Home bunon at the top of your Netscapc
browser window to go to the Netscape home page. b. Scroll down the page to locate links to current
Netscapc Navigator software downloads and plug-ins. (Nore: Plug-ins addfunct ionality to the Netscape Navigator software.)
2. Steps to find Netscape's Web resources. a. Clic k on the Assistance button in the Netscape splash
screen at the lop o f Lhe Netscape home page.
Link to download Netscape Navigator software and plug·lns
2a.
140. Chapter 5
.~1 .:.1 ~1 12-1.::. 1~1 £ 1 ~I II
- - Eil.S:- -·-...--.
N. ,
. -
.· .
· _ AS~IS"I:\l':CI :
·.
··otOitfi.,IJ ltii'HI
r....... ...... ·""''"''~ -:;,~~ 1 ·~'"' ,:~,...,'.".,-I uo.O..·."'· u ·.:.;,., ·
I :~:\\:,\ :
........... IUUtC.II'IYJ....II-n A'ft-t.....-.
, _...... t . .......(J.,&.J--""'~ ........ , .~,.,IUt.IO.IL,:""!of
;.;:::.:·,.........,............... .,~..,.
' "':\.,........
lt,.._..r.oa ... _.,..
...-...:...4-IIIJi-
u..... ..s. .....
·-·s _,,...,. :r... -
l-o . .t. i.
---~ ~ ·..·..-",.· '.-.-_·,·.- .~_·..._ .~._ . .ljorO.CrJ4,1.
.
r_4
-
.
.
.
.,
...,.
...
-. c
_...t_,..__, _ .....a..;~. ·
b. The Netscape Assistance and C ustomer Service page wi ll appear.
c. Scroll down the page to view: Help for Users Help for Developers, Authors and Publishers
d. Jn the section labeled Help for Developers, Authors and Publishers, click on li nks in the How to Begin Building Web Sites section.
e. A Creating Net Sites page w iII be displayed, whi ch incl udes the following sections:
Authoring Documents
Look for the latest reference materi als on HTML. For e xample, this section provides A Beginner's Guide to HTML, Composing Good HTML, Extensions to HTML, and Guides to Writing HTML Documents. Adding Functionality
Look for O.ffthe Web, a monthly newsletter a nd add itional directory listings of mai ling lists and newsgroups to assist Web developers.
2b,2c,2d.
Help for Users
Help for Developers
Link to Creating Net Sites page
C R£ATI NO N I?T SrTI! S
...- ..... ... __,, _ "··~--...
~
-'- · -r·· ··~· .,,.,..,
· · · - n. t::r....,. · u · o...,_~~ o,..wr-M·>··L-·· "" .......,.~···
.....,..,.we,.,,.,_. __ ....,, Jl · · -.. k:W P'llloWt- ..-.... . - _. ~. .e ,. .. _. ~_ .;-·U - I-~Of -b -- ~C ,_..A ._ O_
-·-,..4-- _
. , _ , _ _ _ _ ;-c-. . _ ~~----........
-- Mo: ,,...-.... . . . ~ .._-._,~b'4'J)t;·' .....,,_......_""..
· e.o. . . ....-..-~ ·-'"111 -
t~~!: Buy.1 Re.J!Audio Sunr, Gfi :a ·C:.,,... h,
""'"'"
UrdtonOurSitc.". S-495. ,
, ,
AUTftOR IH O UOCIIWf H fS
2e.
Online Tools 1141.
Add information about your site to Yahoo! and other search engines
Summary: Promote your home page by adding your URL to one or more search engines.
B y adding your URL to a search engi ne, you're providing Web viewers with a way to find your page. Information may be added to each search engine individually or to several search engines at once by visiting the Submit It page at http://www. submit-it.com. (Note: Changes to any o.fthe search engine Web pages may affect the multiple submission.functions on Submit It.)
1. Steps to add your URL to Yahoo!. a. Go to the Yahoo ! home page at http://www.yahoo.com .
b. Use the Yahoo! search function to see if your page is already listed.
c. After you've run a search and you know your site is not listed, retu rn to the Yahoo! home page at http ://www.ya hoo.com.
N t h C:b o: YllhUOI
IJC:JI
,,..,.,. c.J
'!l'bf.'t"r @"~ft.,- ~ M1; :d<Ulcll<U
l··~o :t.t; 'LL t .. t
I SWeh )u·H
Nt:..'Y ?~,
.l.·O.ot..l:kl - h·,~JJD: ·I' -U ., ·It ,.a...c:
· 1\m. ~"U1J~1Utt ...-~. ~ ~,th,t,
· Hln.t.lt..Mt4JI IIgn !. ~~tt.UI:"~
· brtJif.1LJ.ttlf\I~?:J8u!J
r
1.; - ·
)!r
· RuJUJI!QLUU,.J,V.I::l'il"' brz..~1!r.':11.UU.
· aoaau.inW:=...I.&· Iil.la&..ttl.-l-lItJl&~ Ibt..u
· Rl.(rJ~kt :.JtCL~~
· IIP"Ilall<
~:J,.;I\.l"
· "'&ct.>c~.tr.l ... v -".w
· takl...,l lli.J[JW.!I
· ":P"<t
·
1a,1b,1c.
d. On the Yahoo! home page, click on the catego ry where you'd like your s ite to appear.
1d.
142. , Chapter 5
1e.
1f.
~~~-~=!m~~.:~~'j?::~ ~.':'" ,..., 1\a» W....., ,!IIo;tc·· .... ,...,. ....,,,..._,,,lo ll ~ r..-,,......,...,. a. ~
· ·.-..... '""_, ,,..,..,,_...,. .......t;l_lf,.....l"llr:'·~'""'"'
· =.~~~~::..r=::~;..";,.~'::,~~ ;:'.!~"';:;~:=
. .......... .... ... =~~-::~.:.=.~=~~t!::;.r"'""~·"""'' ,.r.......Tb' 111i".WC!Io·,...·· .II~JI!'oJ-·M~lilt t.. U.llllll:<~JIIIIii'U!I!Cf1·...... PIIMWtt<llaoi ~W .. ':Zu~t:=~=~ 1'\lll)f'Oirlp!'lfJM·~.,.~~~~~-""'
.. Tl(lo·~·--,..-:::~-·'( ~
,...,,_ll:<'a<I_.,..,...,.,OMQoW..,.,... aUIIL.
-v...;. .-~'-'t.._,x.
.
-....~
.
,.,..llll;f
·IIH~'t'¥tlfl~ O'I.. . MP
.......... . ,,."...... ~ ...~l-- ~ ~V,ft,.n...~.),t...W.r..Q:
c:::,·'.._, 'J1 i' 1"11 ' ,,
e . A page will be displayed that corresponds to thecate-
gory you selected. f. C lick on the Add URL icon at the top of the page in the
Yahoo! banner.
g. The Add to Yahoo! page will be displayed.
h. Scroll to the form at the bottom of the page and type your page title, your URL, and 20 words that describe your site.
i. Adding the following form information is optional: · Geographic location of your site · Your name and email address
j. When you have comple ted the form , cl ick on the Submit button.
Please ( Submit Jit...
1j.
k. In the dialog box that follows, click on OK.
nnylnfonnollon you sullmlt Is Insecure ond could b e observed b!J ,, third porty w hile In trunslt.
If you ore submitting pass word s, credit cord numbers , or other lnformotlon you would like to keep prtuote, 11 wou ld be t o fe r tor you to canc el the submis sion .
(Don' t Show Rgoin)
1k.
1g, 1h,11.
Online Tools 114 3.
Locating, downloading, and decompressing shareware from the Web
Summary: clnet's Shareware.com site is an excellent resourcefor shareware.
W ondeting if your ~oftware is o~tdated? ~heck d net's Shareware.com stte. The archive contams a very large collection of freeware and shareware program s that you can download.
1 . Steps for locating and downloading software.
a. Go to the S hareware.com site at http:// www .shareware.com.
b. Click on the Selections link.
c. A Selections page will be displayed.
I !>Hl-Wi:M!.o'?(t.ll) I ( 3C!:ah
[ ~I"..fall
Selections
~~~:~p~b ror
Highlights ~oo~~~~cMIU_.dU(Z8Jlb,m11rupJVI!h
t)'J'<»I.J32 t01 YXMo- 1-S. two'w
gg "~~~ f'o~Yun~!i~ttoMJ WWcrw;, $Oi tvl:e
= ) :.up )Oct :til'' cret.bve juke' llavirc foi hEMs
la.
l b.
lc.
144. 1Chapter 5
!:.Jor Ill The so~~oIrnthteehronnesettbrowsers, viewers
and players.
1d.
d. Click on a Mac or PC icon in a desi red category. e. A list of software in the category you chose will be
displayed. f. C lick on a link to a desired softwar e program.
g. A page displayi ng a down load lin k w ill appear.
h. Click on a download link to beg in downloading.
QulckSurch
I
- ~-
1e,1f.
<~9
~i~
Stufflt E>~pandeor-n·1
2.
"'"' ..·· ,un:.,.~I. ·...,.'."..·..,,..MW-l
1g,1h.
2. Notes on decompression.
Software availab le for clown.loading wi ll often be encoded in a Bini-lex format with an .HQX fi le extension. If you have Stufflt Expander installed as a Netscape helper application, Netscape will automaticall y decompress the file at the conclusi on o f the down load.
If you do not have Stufflt Expander installed as a Netscape he lpe r app lication, you will be asked if you want to save the ti le on your hard dri ve at the conc lusion of the file down load. Save the file, locate Stuff1t Expander on the CD-ROM in the back of this book, and decompress the fi le manually.
Stufi"It Expander will a lso expand fi les that have been e ncoded in MacB inary (.BIN) fo rmat. lf you have a lso insta lled DropStuff wi th Expander Enhancer, you will be able to expand fi les that were compressed or encoded on PCs and Unix syste ms with Stufflt Expander. These include: ZIP (.ZIP), ARC (.A RC) a rc hi ves, gzip (.GZ), Unix Compress (.Z), UUencoded (.UU), and Tar (.TAR).
Online Tools J145.
Arrisrfealllred in rhis chaprer: Mark Elbert is a g raphic arrisr and mu.1·ician who graduated from Prafl lnsti1111e IIIith a degree in industrial design. mothe r@inte q m rt.net
Artisrfeatured in this ciiCipter: Jane Greenbaum is vice president ofNew York·~· Graphic Arlists' Guild and a new media artist speciali:ing in 3D animation. I Forll·mrl@aol.com http:/111/eiJJben·.ao/. com/ ifonvcml/imnge l.html
Photography
Images are the most popular multimedia elements on the Web. However, until browser software behaves like Quark XPress, there arc ma ny subtle details involved in placing images on a Web page. Because o f bandwidth limitations-the objective is to keep graphics Iiles to a mjnimum- image manipulation has more in common with the computer game industry than it does with print.
To intwduce readers to these new concepts, Mark Elbert's notes on Web graphics s ummarize details such as Web page size, color scanning, bit depth , fil e naming conventions, and advice on testing a Web page be fore it's launched into cyberspace.
New media artist Jane Greenbaum introduces readers to Painter's Create Drop Shadow command, which provides a quick method of creating drop shadows. The command can be used fo r crealing a drop shadow around text or an image. (Note: Creating a dmp shadow around type involves veryfew steps.) In remaining sections, Mark Elbert's Web projects will give readers clues abou t how to assemb le their own pages, plus a section on c reating a Super Palette with DeBabe lizer, whic h offers color palette manipulalion tticks from DeBabelizer's author and game industry expert, Dav id Theurer.
Mark Elbert's notes on Web graphics
Summary: Mark Elbert relays tips on Web page size. color palettes, dithering, andfile formats.
Graphic designers can leverage everything they know about print and often reuse g raphics that have been c reated for print. In this secti on, Mark Elbert's no tes o n graphics will help g raphic designers make a transiti on from print to We b graphics.
1. Plan the size of your images.
Because most microcomputer color monitors are 14-inc h color screens, you should plan your graphics to fit this average-sized window. When Netscape launches, the browser window does not fil l a 14-inch screen, but the Web visitor can resize the window to see wider images. The available space in a single Ne tscape window (resized to fill the screen) on an average monitor is as follows:
Dimension
Pixels (or pts)
Horizontal measure 604
Vertical measure
304
Picas
50.33 25.33
Inches
8.38 4.22
Although Netscape 's defaul t window has an inside horizontal dimension of486 pixels on a Macintosh monitor, images are always offset 8 pixels from the edge of the browser window by default. As a result, the banner graphic should be no more than 604 pixels. (Note: Pi xels are dots, or screen elements.)
When planning the height of your graphic, decide whether you'd like the average visitor to experience the graphic in "pages," or if you wa nt the graphic to fit within the first viewable window. Set a graphic's height to 304 pixels to limit the graphic to one screen. Although Netscape's default window has an inside vertical dimension of 320 pixels, there wiJ I be an offset of8 pixels a long the top of the browser window by default.
Photography I 149.
Tip: Before resampling or changing the bit depth in your image, make a duplicate ofthe image. Select Duplicate.from the Image pull-down menu in Photoshop, and give thefile an altemate name.
E J Oulpul Lcueli::
~
,__ _11ECt£::o:·cii':.;.:ii.s;r;;.===:::;ll
6
II OK I
~ ~ ~ ~
llZlZIZll
0 Prculcm
3a.
leuels
· I I 1 Cluwnol: AGO au lnpu lle uels: il!lllll ~ ~
t. ,.jj"""""IIJ.
EJ Out put l euels:
~
1
iSi~·-..-.. il
;!.
t:E:J
~ ~
~ (() nuto )
[ZJZIJ]
O f'nml cw
3b.
2. Color scanning: The transition from print.
The 24- and 30-bit scanners that graphic designers use for print provide information for the printed page, far in excess of what you' II need or want fo r Web graphics.
The 24-bit linage you ed it in Photoshop should be reduced to a second, smaller image of 8 bits or fewer. Hal f of your image manipulation steps will be to reduce file size because fi le size is critical on a We b page. Look for examples in this c hapter that demonstrate how to reduce bit depth in Photoshop or DeBabelizer.
a. Scan to a particular size. Most scanning software
programs a llow you to scan to a particu lar size. Rather than resiz ing the image in Photoshop, it's best to scan to your desired size on the scanner, as resizing in Photoshop causes bl urriness.
b. Scan to a larger resolution. In s pite of the fact that you wi ll ultimately not need more than 72 pixels per inc h, graphic designers generally agree that the best images are those that are oversamplecl, or scanned at a higher resolution and then resampled.
3. Correct the color of your image.
Improve the color of an image by redistributing the color tones. This can be accomplished by setting the whi te point and black point or by manually selecting the lightest and darkest areas in a scanned photo. (Note: See Creating a banner graphic or s plash screen in this chapterfor steps on how to set the white point and black point.)
a. Histogram before color correction. A histogram from
Photoshop reflects the tonal di stibution in an image or tl1e brightness and darkness values. Note that the x-ax is rctl ccts the colors from darkest (left) to brightest (right). They-axis reOects the number of pixe ls with each value.
b. Histogram after color correction. After setting the while point and black point to color-correct the image, the color is more eve nly distri buted.
150. 1Chapter 6
Tip: Set your monitor to 256 color.':.· when you 're working on imagesforthe Web. Most computers on the Web have an 8-bit color depth, so this will give you a close idea ofhow your images will look.
Ifyou have a 24-bit monitor andyou 'd
like to switch to 8-bit col01; select Comrol PcmelslMonitorsfromthe Apple pu/1downmeml, and choose 256 colors (in System 7.5x, the Apple pull-downmenu has a cascading pop-up menu that allows you to see and select any Contml Panel). Tip: Figure 5a, 5b, 5c, and 7 are available on the CD-ROM in the back ofthis book. Open the photos on a Macintosh with a color monito r to see the diff.e. rences in bit depths.
5a.
4. Changing the bit depth.
By reducing bit depth, you reduce fi le size. Conversion to a smaller bit depth is accomplished through a mode change in Photoshop. When converting from RGB Mode to Indexed Color Mode, a dialog box will appear and allow you to select a bit depth and a dithering option.
By reducing the bit deplh in an image, you a lso reduce lhe number of colors. When you convert an RGB image to Indexed color in Photoshop, the program builds a color table or palette for the image. Although a n RGB image can conta in 16.7 million colors, an indexed color image comains 256 colors. Photoshop simulates a larger RGB palette using lhe available 256 colors. (Note: For more information and examples, see the secton on bit depth in this chapte1:)
Photoshop al lows you to control the fo Uowing palette types when you convert to Indexed Color Mode:
· Exact Palelle. Photoshop uses the sa me 256 co lors present in the original RGB image.
· System Paleue. Photoshop uses the system 's default color table. Dithering is an option.
· Adaptive Palelle. Photoshop creates a color table ofcolors more com monly used in the image. (Note: Wh en converting to Indexed Color Mode in Photoshop, the Adaptive Palelle is the best option.)
· Custom Palette. Photoshop displays a Color Table dialog box , aJiow ing you to edit the color table using the Color Picker. The palette can be saved for later use.
· Previous Paleue. Photoshop makes thi s option avai lable when you have already converted an image usi ng the C ustom or Adaptive Palette option.
5. Dithering.
Dithering adjusts the color of adj acent pixels to fool the eye into thi nking there is a third color present Greg MarT, a color manipulation expert at Equilibrium, recommends selecting dithering whenever it is an option.
a. 24 bits, millions of colors, no dithering. A 24-bit image on an 8-bit mon itor has some dithering due to Color QuickDraw's intepretation of the color palette.
Photography 1151.
Sb.
Sc. 7.
152. j Chapter 6
b. 4 bits, 16 colors, dithering. Photoshop 's dithering applied in a mode change from RGB to Index Color Mode camouflages a reduction in the number of colors.
c. 4 bits, 16 colors, no djthering. Without dithering, there
are too few colors in a 4-bit image to approximate skin co loring.
6. Add type after reducing the bit depth.
Don't subject the type in your image to dithering. Add type after you have settled on a bit depth you like.
7. Color duotone and grayscale options.
Color duotone and grayscale images look bette r at smaller bit de pths than do full color images. For instructions on how to create a duotone, see Creating a duotonefi·om a grayscale image later in this chapter.
Image
Color
8 bit, GlF J60K
8 bit, JPEG (med.)
60 K
4 bit, GIF - --4 bit, JPEG
( med. )
92K 32 K
Duotone 148 K
44K
Grayscale 144 K
52K
100 K 15248 K
80 K 52 K
8. File naming conventions.
Your Web documents should have proper extensions, to help the Web server identify the fil e type.
Format
Extension
HTML
.html (Unix) .htm (DOS)
- - --
GlF
.gif
- - -- ------------------------
JPEG
.jpg .jpeg
Tip: Shonening afile name 10 eight characters can be a challengefor Macimosh users. Jiy removing the vowelsfivm the file name. Thefile name can often be detenninedfivm the remaining consonallts.
Tip: B!Vw.l'e1:1· are constantly evolving like other .I'Ojiware p1vgrams. Jiy to stay familiar with new developments by downloading new venions occasionally. Curre/11 infor711mion about updates to HTML can be obtained 1vithin Netscape's own system ofWeb pages athttp://www .netscape.com.
Tip: Even though many users now have modems that operate at 28.8 Kbps or highe1; it 's o.fien the case that use1:1· cannot connect to their Web sites at these optimwn speeds. Always asswne that average connection speeds are about 14.4 Kbps.
Use very short ftle names without spaces (eig ht characters or less). and avoid using the following c haracters in ftle na mes:
Character <>
[]
= I +
Name a ngle brackets back s lash vertical bar brackets colon comma eq ual sign forward slash plus sign quotat ion mark sem icolon
9. Test the download speed of your Web page.
HTML docume nts may be built o n your hard drive using a text editor suc h as SimpleText or Teac hText. Use Netscape off line to check your work. However. the download speed you' ll experience whe n you load a fil e fro m you r hard drive will be muc h faste r than the average Web visitor's 14.4 or 28.8 Kbps modem.
As soon as you've developed a large graphic for your We b page. you should test the dow nload speed over a 14.4 Kbps modem. If the graph ics are slow to load, you'll have trouble attracting Web visitors. We b visitors wil l be re luctant to retum if they have to wait several seconds for downloads.
10. Test your Web page on other browsers.
Images deve loped on a Macintosh may appear slightly stretched on an IBM PC browser window due to a d ifference in the aspect rati o. Pixels on a n ffiM PC are taller than pixels on a Macintosh.
Photography 1153.
In addition, different systems use diiTerent melhods for ending a line. The text you've formatted wilh the <PRE>, or preformaned, tag on a Macintosh may change if you move your files to a Unix or IBM server. ff your finn does not own an IBM PC, consider getting on the Web through another platform at a public computer rental facility, which rents time on the Internet by the hour.
154. JChapter 6
Pixel depth
Summary: Learn how pixel depth or bit depth, a critical color characteristic, will affect the pe1jormance ofyour Web pages with graphics.
T;p: Equilibrium, the company that created DeBabeliz.e1; is continually addingfimctionality to their software. A recent addition includes a Windows edition ofthe DeBabeli~er software. Lookfo r .further information m Equilibrium 's Web site located at http://www.equil. com.
G raphic desig ners who have worked with Photoshop to produce mtwork for print may not be acquainted wilh pixel depth or bit depth. Bit depth is defined as the number of bits used to make up a color pixel.
Bit Depth
Number of Colors
2 bits
4 colors
3 bits
8 colors
4 bits 5 bits
16 colors 32 colors
--- -
6 bits 7 bits 8 bits 16 bits 24 bits
64colors 128 colors 256 colors 65,536 colors 16 mi llion colors
-------
For pri nt graphics, the objective is to increase the bit depth ; for Web graphics, as in game software development, the objective is to reduce bit depth.
The critical objective for a Web page artist is the same objecti ve shared by game developers: combine what looks like the largest amount of color and the smallest possi ble file size. Web pages have a critical performance issue. Web visitors will grow impatie nt and won' t want to return to a Web page if the re's a long de lay while images download.
1. Plan "target" size and physical dimensions. Spend time traveli ng the Web. and get acquainted with the file sizes and physical dimensions o f the graphics you see.
Photography 1155.
Ollen th is link Alid IJoo kmn rk for thi s lin k Nc.m UJimlom mlth thh link SGIJ C lhh link 0~ .. · Copy th is link locatlo11
Ulew lhlt Image
Copy lhh Image Cop'-' IIIIi lmnge lo ca tion l oo<l U1h lmD4Je
l b.
Iii Oe\tlop ... 1
~~ rntfaheiJ.'tl ~h··w Uulllne
CJ Prouldc1s: / Mklg Tools
4!}1 t tiO\lJiH('IIUj CJ tt! od/7 f t 9
Soul! Image os: Jtrorne .JIIU
1c:.
c=» HO
I Now LJ J
r C u n~n l ~lze: ~28K - - - - - - - - , UIUI1h : ·ISO polnh Ml!lgl·t : ~no potnh
Aeulullon: 72 piKeh/ hth
r- ""fUI \Ill!:S28K=::::;-;=:::::;:=::;--,
J· UlicUh: ~ I poluh ... f
Hei!Jhl: IOUI·-11 polnh · I
Rfl\Oiullu n: ~I Jllttt·h /tuc:h ..,,
CoMtl oln: EPropottlcns O l lleSize
ld.
T he images you see that download quickly wi ll be the ones
you' ll want to examine closely. You can d iscover a fil e's form at, the fi le size, and the physical di mensions by downloading the image to your hard drive, as follows:
a. Position you r mouse pointer on a Web page graphic.
b. Hold down the mouse button, and select Save Th is I mage A s.
c. Let go of the mouse button, select a
folder or you r desktop for saving, enter the name o f your fi le, and cl ick on Save. T he fi le name extension wi ll
· DeBabelizer '
~~1~1!1 I
tell you if the image is a G1F or a
hom· .jpg
JPEG fi le.
d. Open the image in Photoshop, and select Image Si ze from the I mage pull-down menu. Note the image resol ution and the physical dimensions.
e. DeBabeli zer w ill display the number
Qr;gW>al Clrrftlt Yide :450 450 Hi : 400 400 Color : 17Mil 17Mil DP 1: 72 72
RGB : liS Y:
X~V--I:-----------... .,
~- -- ------- ---*-~
of colors beneath the tool box.
le.
2. Compare image file sizes. a. 40 K, JPEG. At40 K, the Conde Nast image downloads
very quickly.
b. 108 K, GIF. A t I 08 K , the Disney M oviePiex image downloads rather slowly.
2a. 2b.
156. , Chapter 6
3. Browsers have a 256 color per page total.
The palette you plan for one image may affect d1e palettes of other images o n the page because browsers limit the tota l number of co lors to 256 per page.
DeBabelizer's Su per Palette feature selects the best 8-bit palette for a group of images by " po lli ng" the images and determining the best colors for the images as a group. For instructions on how to create a Super Palette for a group of images, see Creating a Super Palette with De Rnhelizer in thi s c hapter.
4a.
4. Experiment with lower bit depths.
Images respond differe nt ly whe n you lower the bit de pth .
For example. an image with a large variety of colors will
not respond well to a lower bit de pth because palette colors
get " used up" qui ckly.
a. 8 bits, 256 colors, dithered GIF. This image of chil-
dren wai ting to c limb into a sc hool bus has a wide varie ty ofcolors. This image begi ns to look patchy even a t 8 bits. (Note the little g irl's back pack a nd the headlights of the bus.) As a 200 K GIF fi le, this image will download slowly.
b. 7 bits, 128 colors, dithered GIF. The image of a teacher and stude nt starts to look patchy at 7 bits. As a
4b.
11 2 K GIF file, this image will download slowly.
c. 4 bits, 16 colors, dithered GIF. The image of the
teacher and student holds up well in grayscale at a lower bitdepd1. As a 28 K GIF file, this image will down load faster than the full -color versio n.
Both images look superior and down load faster when saved as JPEG . However, there are tradeoff's. For a comparison of GIF versus JPEG, see the next section in thi s chapter. (Note: Figure 4a, 4b, and 4c are available on the CD-ROM in the back ofthis book. Open the photos on a Macintosh with a color monitor to see the differences in bit depths.)
4c:.
Photography 1157.
Saving your image: GIForJPEG?
Summary: Learn about the differe!lces betwee11 G/ F a11d JPEG, two popular graphicsfileformatsfound on the Web.
Tip: Most HTML tags work in the Netscape brvwser as weff as Microsoft 's lntemet Explorer browset: Howeve1; both brvwsers use afew unique HTML tags. Micmsoft's Web Caffery a t lrllp://www .micrvsoft.comlgaffery conrains notes abow !memet £1plorer-~pecijic tags and Netscape-speciflc tags.
T he decision to save an image as GIF or JPEG may depend on the image. Although GrF images are popular because of the special effects that can be used, detailed images and flesh tones oft en look better when saved as JPEGs.
1. GIFs are read by more browsers. GTF is the predominant image fi le fonnat used by Web page designers because it can be read by more browser programs as an in line image. lnline images appear on the browser page with text. Extemal images are those that must be loaded and displayed with an add-on viewer program, referred to as a helper
application .
Netscape and Internet Explorer can read JPEG images as inline graphics, but some other browser programs will ignore JPEGs tagged as inline images. AJPEG image referenced with a link will be displayed in a viewer application's floating window when the link launches the viewer software.
2. GIFs can be used for special effects. GIF images are 8-bit images that may also be stored as transparent G!Fs. This type ofGrF is popular for special effects such as fading and siJhouettes. Interfaced G/Fs are anod1er popular option because they appe.'lr to download faster d1an non-interlaced GrFs. The image is quickly drawn in low resolution and thengradually fills in with pixels as the image is downloaded.
3. GIF images sometimes have banding.
Because GLF images are 8 bit, the image may contain banding, or look posterized. This is due to the way the browser reads the image and usually occurs with blends and flesh tones.An image with a large amount of detail will look better if saved as a JPEG image. Banding, which will often be seen in an 8-bit
158. 1Chapter 6
Tip: Equilibrium, the company that created DeBabelizet;also makes a DeBabelizer "Lite" pmduct. Unlike the .fit/1package, which supports scripting and batch pmcessing, DeBabelizer Lite is a translation too/that contains a large number of"readers and write1:1·." (Note: Animationfilefonnats, such as Quicklime, FLC, and FLI, are not supported in the Lite version of DeBabelizer:)
GJF, wi ll be smoothed in the JPEG formal with some dithering. A summary of file format characteri sti cs fo ll ows :
Format Plus/Minus GIF Plus GIF files can be read by a majority of
browsers as an inline image.
Plus GIF images can be saved as interlaced GJFs, a fo rmat th at appears to download fas ter than non- interlaced GIFs. T he image is quickly drawn in low resolution and is gradually filled in with pixe ls.
Plus GfF images can be saved as transpare nt G[Fs. Th is GfF drops out whatever color is assigned as tnmsparenl. This may be accomplished with Aaron G ile's Transpare ncy software and DeBabe li ze r. Minus GJF images may appear posteri zed in some browsers. (See next page.)
JPEG Plus Photographs do not appear posteri zed. Minus .IPEG ti les look somewhat dithered and are not read as inline images by many browsers.
4. JPEG was designed for 24-bit color.
The JPEG compression algorithm (invented by the Joint Photographic Experts Group) is really intended for 24- or 32bitcolor. When an image is compressed, thi s " lossy" algorithm throws information away.
Should a Web designer reduce an image to 8 bits and then save
it as JPEG? Because most of the color monitors used on the
Web are 8-bit color, 24-bit color images on We b pages are unnecessaril y large and a waste of color information. An 8-bit JPEG image stores what appears to be a lot more than 8 bits of information and although the loss of data may be visible on a printed page, it is not visible on screen. (Note: Do not save a JPEG image twice as JPEG, or your image will be noticeably pixelated.) Reduce your Web graphic to 8 bit, save it as a JPEG, but store an original 24-bit RGB image for future editing.
Photography 159.
Tip: Posterization is a tenn that refers to a jlallening ofthe brighmess values in an image (Note: The image 011 this page is from the Pacific Coast Software collection ofstock photography at http://www .pac(fic-coast.com.)
The differences between GIF and JPEG images is most obvious in sk in tones, where the poste rization that occurs is very pronounced. Notice the difference in the two photos on this page. The top photo is a JPEG image, and the photo below is a GIF image.
160. , Chapter 6
GIF and the LZW compression patent
S ummary: Eventlrouglr there have been rumors that the GlFfile format may disappear due 10 the legal dispute between Unis.vs and CompuSe1ve, the 8-bit.file form m, which may someday be upgraded to 24-bit, is not going away any time soon.
G raphic designers who develop Web pages appreciate the GIF file format for the transparent GIF, which makes silhoueLtes possible, and the interlaced GJF, whi ch appear to download quickly to the browser screen in waves. Although the JPEG fi le format is su peri or to GfF for display ing color deta il , a JPEG image ca n't be saved wilh a transparent background, nor ca n it be interlaced.
1. Unisys and the compression patent.
The GfF file format, owned by CompuServe, uses LZW compression. LZW (Lempel, Z iv, We lch) is a lossless, 8-bit compression-decompression sche me that was originall y developed by the Lempe i-Ziv team. but later improved by Terry We lch when he worked fo r the Sperry Corpora tion. Unisys took over d1e LZW patent when Sperry became part of Unisys in 1986. The LZW sche me. unlike a "lossy" compression schme. doesn ' tlhrow away information when it compresses. Ever since Unisys took over the patent. they have bee n licensing the compression al gorithm to onli ne services and modem manufacturers. T hey have also been quietly e nforcing the patent in d1e soft ware market. as the sche me is popular among companies who make image editing software programs.
2. Grandfathering the license. In pursuing the ir right to the patent, Unisys grandfathered
the license to any software product that used LZW compression prior to Ja nuary 1995. However. as of January I I,996, a ny new produc t. or any software product update. requires a li cense.
Photography j1s1.
HTML tags and page markup
Summary: Understanding HTML, or the Hypertext Markup Language, is essentiaf.!or Web page developm ent.
Netscnpe: Color
III
Newcm~tle
Prod1ll«:tl©rrns
T he term markup is a publishing term used to refer LOa tradition in print. When pages are produced in publishing, typesetting instructions, known as rags, are added to a typewriuen manuscript. In print, tags tell typesetting software how to d isplay a page.
Unless a graphic designer works in book publishing, he or she may not be aware that Quark XPress, PageMaker, and other page layout programs can read and interpret plain text or ASCU text with tags containing style infmmation. Quark's system of text tags are simil ar to HTML, the tagging system used on the Web.
Although Quark XPress is a powerful page layout program, its system of tags is not ideal. For example, Quark's tags can describe text very accurately, but the tagging system does not offer rags that describe images. Publishers who use XPress tags to assemble books or newsletters with pictures. use supplementary tagging software such as Xtags from Em Software.
In contrast to Quark's sophisticated text tagging system, the HTML tagging system has very crude tags for describing text. However, unlike XPress tags, HTML includes image tags as well as powerful tags that can create hypertext links across computer platforms and to multimedia resources such as sound, animation, and video.
162. 1Chapter 6
Tip: The best way to team how to use HTML tags is to visir pages on the Web andselect Sourcefrom the Edit pull-down menu. (In lntem et Explorer. this command is View Source. ) The HTML tags used to compose the Web page will be displayed. The source code you'll see can either be saved orprinted.
The following c hart shows how the Quark XPress tag syste m is simjl ar to the HTML tag system. Xpress tags have been wide ly adopted in the book publishing industry.
HTML
X J>rCSS
Meaning
< B> ... <IB>
< b>
Turn bold on/off
< I> .. .</1>
< i>
Tum ital ic on/off
<U>...<IU>
< u>
Turn underline
on/o ff
< P>
<\n>
New paragraph
< BR>
<\d>
New li ne
<CENTER> ... </CENTER>
</Center><*C> Ce nte r a p<u·agra ph
<BODY1EXT="#rrggbb"><c"color "> Change tex t color ... </BODY>
<FO NT SIZE=value> <z###.##> Change font size
<NOBR>
<\!s>
No break
1. Special characters.
HTML and Xpress tags both have a set of special c haracte rs. For example, both need a method of indicating c haracters that would otherwise be interpre ted as part o f a tag, suc h as an ang le bracket. In HTML. spec ia l c haracters are referred to as cltaracrer entities or numbered entities.
HTML & It; > & "
X press <\<> <\>> n/a n/a
Meaning < > &
Besides providing a means to generate characters that wou ld otherwise be inte rpre ted by a browser as a tag symbol, character entities also exist to generate characters from the ISO Latin- I alphabet, wh ic h do not exist in the ASCU set of characters. These characters a re generated with different key sequences on different computer platfonns; making them special characters in HTML so lves translation problems.
Pltowgraphy 1163.
Tip: Although the <PRE>...<JPRE> tag preserves pref omwtted text, a browser changes thefont of prefonnatted text.
2 . Starting tags and ending tags in HTML.
Most HTML mark up tags require that a set o f tags be used. The starting tag acts much like an on swi tch, and the end ing tag acts like an off switch. Together, the set of ma rkup tags act on the tex t that lies between the tags. (Note: You can mix uppe r and lower case leu ering when you create tags.)
Meaning An c h o r Bold style
Starting Tag <A> < B>
Ending Tag <lA> <IB>
3. FormaHing inside <PRE>...</PRE> in HTML.
Although browsers usuall y ignore re turn characte rs and spacing, line breaks and blank spaces are le ft undisturbed inside the pre formatted text tag.
4. Nesting tags in HTML.
Nested tags are tags inside of other lags. Most lags can be nested, except for anc hors inside of other anc hors or headings inside of pre formatted text.
164. , Chapter6
The moveable grid for pictures and text
Summary: Can a graphic designer develop a gridfor a Web page? Not really. HTML tags describe how elem ents should b e placed in relationship to each othet: Placem em is not described in relationship to the page, because the page size can vwy.
MM !.1 ('·.l!n!ntl)' :r: ~'W' pi"'O""".;.13 of ~ooi~ ~ 'Vbolt re,- t.,s:t., o! rot~nal vllli:b Vlll too .....u.~lo tn u.r Poll or '95
W hen a graphic designe r uses Quark XPress for page layout, he or she has a 1001 that offe rs very precise page geometry for a printed page.
0
Nel\cape: New Side UamJ :::::;::__Ji)
_{_j ~ ~ ~ ]iJ ~~~
L<Y..-1-.:n·ln· //llroP$ti'1CDrfvt-f'Wt0·10Bo*'l521 \'b.tt's'"""' ' ~·t·, c.,t~ ! H~ !~
!-IMLsan-=o(.;·lt"M-t~Jot :_.. ·ttcaQiemYl..o~of
mawrW ~h Ylll be ..,,rl,~le lJl m.r\lloi'9S
Because a Web page can
·~
be resized, page e le ments
nee d to be described in
relationship to each other, and not the page. In the sample shown on this page, the Mesh Records image
Cl t-e tnepe: New Std o Btu II
~~~ "~II
lcutbr. :l rl\t ///APS'II'100f' tYt j
'\lt'Nt'slu·' l '~lt'· CoetJ J~
has been tagged witJ1 an ALIGN=RJGHT au ribute, whic h wi ll align the image o n the rig ht side of the text regard less of how
~·-·~ ~ " u"htr~Jof
rt~rt~# 't'haltt~Y'h!!:l. otmue~J-...hlot.
c. ?1lltt~&~
tt. Ptnct 'S5
leciM"ds
the browser window gets resized.
Note there is a sma ll a mount of ho r-
izontal s pacing o n e ithe r side o f the 1-<'J
')
image to push the text away from
·'
the edge, whic h is the res ult of an
HTML attri bute called HSPACE shown later in thi s c hapter.
If ho rizonta l s pace gets added, you will on ly be able to control the space on both sides o f the image, but not on one side or the otl1er. This page offset around the edge appe ars to be 8 points or pi xels.
Photography 1165.
UsingHTML to move page elements horizontally
Summary: In the absence ofa grid, ir 's valuable to understand how HTML can be used to move elements horizonta fly or verticafly. In Quark XPress or Microsoft Word, these commands would be referred to as paragraph-based.
Tip: MosrHTMLrags place images in relarionship to the left margin. Veiyfew tags are available that place images on the right or any where in between. The examples on the nextfewpages demonstrate afew tags rhea can be used like tabs ro move elements varying distances aCIVSSthe page.
I mages and text that are "tagged" into place horizontally on a Web page maintain their position relati ve to other elements when the page is resized.
1. Open SimpleText.
Use SimpleText or a word processor. If you use a word processor, be sure to save the document as Text Only.
2. Create a new HTML document. Start a new document with the following markup tags:
< IH~IL>
<HEAD> <TITLE> ~ ew Side Band </TITLE> <!HEAD> <BODY>
3. Add the name of a GIF file to the <BODY> tag. Background images can be used in Netscape. Add the name of the GIF lile that you'd Iike to use as the background image to the <BODY> tag.
<HTML> <HEAD> <TITLE> New Side BandC/TIT LE> <lfiEAD> <BODY BACKGROU IID - "tlew_Band. gi f" >
1 66. , Chapter 6
J::J
_ Netscape: Netu Side Oand
_rj ~_:j ~~~EJ~ _gj
~.oun.:.n .(i 11t :IIIAPS$2Cl0t-w ·'"f'llftb<i11209Q0166'2:52fM tbtf'1 / B.a.n43 .Mrn\
'What'srtt.,, l ~t'tCOGl" l Hw.:lbo<o5; I ,..,Stuoh I Htt i>Y'K tery l Utv~ I
II
4.
4. Add an image tag.
The <IrviG> tag contains a source, or SRC parameter, which contains the name of the image file.
<HTH L> <HEAD> <T I TLE > ~ ew Side Band</TITLE> <! HEAD> <BODY BACKGROUND - "New_Ba nd. gi f "> <I MG S~C-" Mes h Wave . gif"> </ BODY> <I HHIL>
The result is shown in Figure 4 .
5. Add text after the image.
Unless the browser is instructed ho·v to handle text, it will flow the text immedi ate ly after the image.
<HTML> <HEAD> <TIT LE> ~ew Si de Band </ TI TLE> <! HEAD> <BODY BACKGROUtW- "New_Band . gi f" > <HIG SRC- "Hes h Wave . gi f" >MM i s cur r ent ly in the process of rec ording a wh ol e new batc h of mate r i al wh ic h will be avai l able i n t he Fall of ' 95 . <!BODY> <I HTHL>
Photography 1167.
168. 1Clwpter6
IJ" - -
=:! Ncl scope: New Sldo Oond r - - -
~~_;j ~~L;u~~ _j f
I H<~'ht
Rtklll tluc;*J ~n
PrWit
Ftnd
Lo.Mhcn lfilf·///~1'Yt..IYtb~20eool.~~fl1.£1ttr1/8and6htrn1
I
I f V'Nt#sl6t.,... l wNt'sto:l1 H - H>< St¥<11 I rtotDir«~ l 'iew<fS:> I
I"I
~·--···~-"-"'·-··-,. . .,-. '11111beav.ilobio11\l!lllPllllor'95
":'Zf;!j]
+
"
·I ~
l!l
5.
6. Add a paragraph tag after the image (optional). A paragraph tag <P> will flow the text on the line below the image and open up paragraph spacing.
<HTML > <HEAD > <TI TLE >"ew Side Band </TI TLE> <! HEAD> <BODY BAC KGROUND- "New_Band.gif"> <I MG SRC-"Mesh Wave. gif"><P>MM is currently i n the process of reco rdi ng_ </ BODY>
</ HH1L>
- Net scope: New Slllo Dnnd
~~_gj~~~EJ~ _j f
- . "''-'' _ . . 0,.. ,.,..,, Fnd
·
Loe1h~.1filt / // ~'20Drh'tat/Vft)c.i1208~~252rM..£btr1/Swd6.html
I
'olll·l'< lltw1 1 ,.,,·., C.oll l H><-
I I I H· l s...oh lloi D,..otor~ N·w·~ l
H
II
Q
MJ.I I! C"t~mudytn tho pmm· olrteonlmr a ·Jllo~ nev IJM::Ito r nat!rill vi'O:h Yl1l b...vWiw.
"'U..l'ollof 95.
J)
~
¢
.r·!ll
Ill
6.
Tip: Although the definition list <DL> tag is intendedforglossaty text, it can be
used to indenttexr or images incremenrally aCIVSS a page.
7. Use the ALIGN attribute to move an image.
The ALIGN attri bute, whic h is part of the <IMG> tag, is the simplest way to move an image across the page. Use the ALIGN=RIGHT attribute in an < fMG> Lag.
<HHIL> <li EAD> <T ITLE>New Si de Band</T ITLE> <! HEAD> <BODY BACKGROUND _.. New_Ba nd . gif ,. > CIMG SRC-,. Mesh Wave.gif,.A LIGN-RIGHT> <!BODY> C/ HTML>
13
Netsccpc: New Side Band
~ ~ ~~ J;j~_rul;j~ ~
Looahon: Jfilf. :Ill ;.osji2'00rwt1"1'w'~~200ookl!252rM Elbtrt/BM'd3.Mm1
I
'o'h·t's llov? ( -..'l>··'sc..l> ( -
'"tS...-c.' ( r,.,o..tcrory( N....,~ f
7.
8. Use the <DL> tag to move an image or text.
Because the <DL> tag formats an indented list, nesting several <DL> Lags works to fu11her indent pictures, text, or both across the page.
a. Nest two < DL> tags with text and the ALIGN=LEFT attribute in the <IMG> tag. (Nore: The <DL> rag
works to move m1 image.) <HHIL> <HE AD> <T ITLE>New Side Band </T TTLE> <! HE AD> <BODY BACKGROUIW _.. New_Band .gi f .. > <OL><DL><IMG SRC-" Me s h Wave.gif,.A LIGN-LE FT><!DL><IDL> MM is currently in the pr ocess of reco rding a whole new batch of material which wi l l be available i n the Fa ll of ' 95. </BODY> <IHHIL>
Photography 1169.
170. , Chapter 6
"1)1"'"" ''""'-" I~M ·· o.m
cr r<a>rdl:tp 'llt<ll!- ntVllo>:l. of ma~rW
wl.;<!. Vlll ~ <V!llob., 111 :II! PaD c f 95
s
Sa.
b. Nest f(mr <DL> tags with text and the ALIGN=LEFT attribute in the IMG tag.
<HH1 L> <UEAD> <TITLE>New Side Band</T ITLE> <!HEAD> <BODY BACKGROUND - "llew_Band .gi f "> <DL><DL><DL><DL>< Ir1G SRC-"Hes h Wave.gif"ALIGN-LEFT><IDL><IDL><IDL></DL> MH is cur· rently in the process of recording a whole new batch of materia l_ <! BODY> <I HTML>
c:r--
NotscorJe: Now Side Oond
li!J
~LJ_g;j.:J~~~ ~~ ·f tlofr.t Rttoad lrmatJ ap.n Pr'Yil Find
.lt.op
I I Lout~or~· l fitt ///APS9l200rivt"'/Wtb~ZOSookSJ5.~2fl1 E'hr-t/B&nd3.html
I
I I I ~t~s htw? ( '-M··s Cool? ( H.,_, t.otSureh Notl>roolonj l ,........,..,...
~r'-. ·--·-·-- I! ~.-.:hof,,,.,.fhlVllxllVIIIbe.-rulflblt 111111tPaDor'95
.)
·<:
I:D.>!ll
!!l
Bb.
9. Add space around an image with HSPACE.
The HSPACE auribute added to the Image tag w i ll push the
text away from the image but it will add space on both sides of the image at once.
Using the HSPACE attribute may be a problem if you're uying to l ine up the left edge of the image with text further down
rr the page. this is the case, tex t offset may be created w ith
extra Canvas in Photoshop which you can then make transparent wiU1Transparency or D eBabelizer.
Tip: HSPACE adds space on both sides of an image, and VSPACE adds space above and below.
:0
· ...;~. Nc l scnpe: Nnw Sld o Dun d
.WI
~~~J;J~lfJEJ~~ r,.- -.-;:~ ~~ R'·~ ..,.s Op·., Pr\1\t
ftr\d
J'·it
11
I l~tb'l: fiW;I II AP~200rl·t..l'l'·b91l20&ol'll!~:rr"l [lt:fr't/Bif\Cllltml
I
o\'Mf'sfl·w? ! 'ft:tu\'s:C.C.C.I:t ! tkn~~ I NttSt.,.c.h Jr,Httth'tctQJ"'I I ~
~
M!-111 C'l.ltBf·fiy .!11 tLt J,ot~~(lU'OD1~ tJ.
t~""''Wiu:bot nv..."'ttYll'W'.h.k:h vtll blli"Nl.!Wt
~loGo'!~ m w
~
P$11 o!'95
Etl:~ Oocl.tt.al ~
~
<:' 1<1
9.
Nest four <DL> tags (w ith text) and add I-ISPACE.
<HTHL> <HEAD> <TITLE>New Side Band<ITITLE> <!HEAD> <BODY BACKGROUND - " New_Band . gi f " > <DL><OL><DL> <DL> <IMG SRC- "Mesh Wave.gi f"ALIGN-LEFT HSPACE-20 > <IDL></DL></DL><I DL>MM is currently_ </BODY> <I HHI L>
10. Use <BLOCKQUOTE> to move page elements. T he <BLOCKQUOTE> tag will inde nt an image or text the same amount as two nested <DL> tags.
Use the <BLOCKQUOTE> tag.
<HTI1 L> <HEAD> <TI TLE>New Side Band</TITLE> </ HEAD> <BODY BACKGROUND - " New_Band . gif" > <BLOCKOUOTE> <fi.IG SRC- "1·\esh Wave .gif''ALIGN- LEFT> MH is currently in the process of r ecording a whole new batch of material which will be available in the Fall of ' 95. <IBLOCKOUOTE> <!BODY> <IHHIL>
/'ooc stope: New c rm
~~.:J ;;J~~~Jtl ..:J
U:altc.n l !l'lJ.//I »>S~~ . . .-N.~~2((lo)l!li!2Slf"1(._.1 /fl.....,lt1 TI
vr..tll-, N....,tl Vhatr,~n ! It~ I Htl 6urw I Hfl fh"~·~J t'-1/(fll.lt' I
11blbi!Ubtirtt:YQ~.tp:tl(~UOfU~I.i.C'vl..W M\r~'&h.OfW~ vtikL vtn'ot .wJblllo.b ('tfl'~nct ogs
II
lf
ordS
Ill
10.
Photography 1171.
Tip: The <CENTER>...<ICENTER> tag can be used to move page elements horizomal/y. See the lmage Map chapterfor an example ofhow to use this tag.
::J1'
Nehco e: 1\ew Side nand
_;J~~~~~~~ _l
~,.tt:'llo)l" f«,. ///~l·t..!Ytt.,~2ft1Cibtntl·t......£.--a ttnl
~ "n·''fCHil l ~~~~
II
Clubs, Nuw York
ful:'lll
!1.1 Wc.u;ttHltrMI
?n·~
172. 1Chapter 6
11.
11. Use <BLOCKQUOTE> to move a column. Depending on whe re you place the lag, the <BLOCKQUOTE> tag will indent an image and several paragraphs.
Use the <BLOC KQUOTE> tag.
<HTML> <HE AD> <TITL E> New Side Band</T ITLE> <! HEAD> <BODY BACKGROU tW- "New_Ban d. gi f"> <BLOCKO UOTE> <IMGSRC-"Mes h Wave.gif "><P> <FONT SIZE-+2>Clubs , New Yo r k</ FONT><P> <B>C helsea<IB>< P> Tra mps< BR> 51 West 21st St reet<BR> 727 . 7788 <BR> <P> <B>East Village<IB><P> Brownles<BR> 169 Avenue A<BR> 420.8392<BR> CBGBs<BR> 315 Bowery<BR> 9B2.4052<P><IBLOCKOUOTE> </BODY > <IHTML>
2. Use the <BR> tag to add line breaks. In the exa mple in Step II , notice how the <BR> tag adds a line break.
UsingHTML to move page elements vertically
Summary: HTlvJL tags that 111ove page elements vertically are ve1yjew in number: (Note: For new developments in style sheets designed for the Web, see the Style Sheets And New HTML Text Tags chapte1:)
t:J
Ne tscope: New Side onnd
¢o 1 ~ ~ I ~ I @ I 'illl I ~ I ~ I ~ I \') I
~~_§J~~~~~~
lfil·:/// Lo~ttor..
APS%20 0 rn· t"1 1Wt09ili203ook%252FM.Eibtf'"lltH-.....JhndJitm1
I
I I I 'lt~l's Ht\11' ., ( "Y.',.t"1' Coo1? ( li.w'tdbool(
rlttSur'Ct\ NttD~torv ( "'ftvsoroups
+
~Lb. N·w Ymk
Chebca
$-· 1\wnpo
51 We31 ?to· Tl? 'n88
Bu1VWate
Bro...,.,
·1r6o9
.;..,..'""A 1!392
CBOB> 315Bo""l)' 982.40Sll
1.
I ntegratjng inline pictures and text is challengi ng. For examp le, align does not refer to text ali gnmenL, as in word processing. H ere, align refers to the position of an image.
1. ALIGN=BOnOM.
In th is example, AUGN=BOTTOM lines the text up with the bottom of the image.
Use theALIGN=BOTTOM attribute in an < IMG> tag. (Note: The <FONT SIZ£=+2> Lag has been used ro make the words C lu bs, New York slightly larger Llwn the body type. The value can be a numberjro111 1 through 7. Th e number 3 is considered the basefont, or the default size).
<HH1 L> <HEAD> <T !TLE> New Side Ba nd </T!T LE> <! HEAD > <BODY BACKGROUtW - "N ew_Band. g i f " ) <BLOCKO UOTE> < lt-1G SRC- " Hesh Wave . gif " AL!Gti- BOTTOM> <FOtiT SIZE-+2>Clubs. tle1v York</FO NT><P> <B>Chelsea<IB><P> Tramps <BR> 51 West 21st Street <BR> 727.7788 <P>
Photography 1173.
174. , Chapter6
<B>East Vi llage<IB>< P> Browni es<BR> 169 Avenue A<BR> 420. B392<P> CBGBs<BR> 315 Bowery<BR> 982.4052<P><I BLOCKQUOTE>
UC!ubs,New York
c
CheiHa
'l'rlmjJI 51 Wtlll!JIS~e· 727 7?66
But VIlle&·
Bm.,., l o9 Ave~ut A 420.11392
CBOBI 315llo..,ry
II
2.
2. AUGN=TOP. In this example, ALIGN=TOP really doesn' t line up the image with the top of the text.
Use the ALIGN=TOP attribute in an <ilvlG> tag.
<ltn1 L> <HEAD> <TITLE >New Side Band</T ITLE> <! HEAD> <BODY BACKGROUND- "New_Ba nd. gi f" > <BR> <B LO CKQU OTE> <IMG SRC- "Mesh Wave. gi f" AL IGN- TOP> <FONT SIZE-+2>C1ubs. New Yor k</ FOIH><P> <B>Chelsea<IB>< P> Tramps <BR> 51 West 21st Street <BR> 727. 778B<P>
<?o i ~ I J f0 1
~~~
Handbook
Clubs, New York
Cbebea
4.
<B>East Vil l age<IB><P> Bro~m i es< BR> 169 Avenue A<BR> 420.8392<P> CBGBs<BR> 3 15 Bowery<BR> 982.4052<P></ BLOCKQUOTE>
3 . The <BR> and <P> tags. ln the previous example, the break li ne tag, or <B R> , breaks
the li ne but does not add ex tra line s pacing.
The pmagraph tag, or <P>, also breaks the line but adds paragraph or line spacing.
4. The VSPACE attribute.
The YSPACE allribute wi ll immediate ly push the text further from the im age but will add space on both sides of the image at o nce.
<HTML> <HEAO> <T ITLE>New Side Band</TI TLE> <!HEAD> <BODY BACKGROUND - " New_ Ba nd . gi f " > <BR> <BLOC KQUOTE> < HIG SRC- " Mes h Wave . gif" ALIGN- BOTTOM VS PACE-25>
Photography 1175.
Tip: For information and instructions on how lo uploadjile.\· to your lntem et provider's serve 1; see the Image Map chapte1:
5. HTML tags used in the two previous sections.
The tags you see in this list (in alphabetical order) reflect the HTML 3.2 specification.
<B> .. .<IB> A tag used to apply boldfaci ng to text.
<BLOCKQUOTE>...<IBLOCKQUOTE> A tag used to create a paragraph indent on one or more paragraphs.
<BODY>...<IBODY> A tag used to open and close the body of a document. This Lag can be used to refer to a background image in the form:
<BOOY BACKGROUNO- New_Band.gif">
<BR> A tag used to insert a line break.
<DL>...<IDL> The defin ition list tag is usua ll y used for definitions or short paragraphs with no bullets or numbering. In this section, this tag is nested several times to indent the Mesh Records logo. For example: <DL>< DL><DL><DL>< DL><DL><DL>< IMG SRC- "t1esh Wave . gif"><IDL> </DL><IDL></DL><IDL><IDL></D L>
<FONT SIZE=VALUE>...<IFONT> A tag used to change the default font size. The value can be any number fTom I through 7 or it can be represented +-any value from I through 7. The value 3 is considered the basefont, or t11e default font size.
<HTML>.. .<IHT!VIL> A tag used to open and close an HTML document.
<HEAD>...<!HEAD> A tag used to open and close the header portion of a document.
176. , Chapter 6
Tip: The SimpleText text pmcessor supplied with System 7.5x is morejlexible than the older TeachText supplied with previous versions ofthe Syste111.
For example, SimpleText allows you to have multiple documen/s open. at one time.
<IMG> Used to refer to an inline image, this tag uses the SRC attribute, which represents the the URL (locatio n) of the image. For example:
<IMG SRC- "Mes h Wave .gif" >
Th is tag use s the AUGN attribut e (or parameter) to indicate the placement of an inline image. Options include TOP, BOTTOM, LEFT, and RIGHT. For example:
<IMG SRC- "Mesh Wave . gi f " ALI GN- LEFT>
This Lag a lso uses the HSPACE attribute, which adds space on both s ides of an image. For example:
<IMG SRC- "Mesh Wave . gi f" ALIGN-LE FT HSPACE-20>
<P> A tag used to indicate a new p<u<tgraph. This tag does not require an ending tag.
<TITLE> . . . <!TITLE> A tag used to describes the title of a document, wh ich shows up inside a document's title bar.
Photography 1177.
Creating a banner graphic or splash screen
Summary: Learn how to create a banller graphic or splash screen- thefirst image Web visitors will see when they visit your Web page.
Tip: Wlten you capture a screen image with Conunand+Sh(ft+3, the SimpleText file can be opened as a PICT image in Photoshop. Thefile size ofthis image will
be small ifthe monitor is serro 256 colors and large ifthe monitor is set to millions
ofcolors.
:JJ
:=-. Ne1scope: Color
:W
l:J~~_:j~]U~_@j ~ IIJj
Newcal~tt~e
ProdUt«:tlco.nms
{\
W ith the preparation of a banne r graph ic, Mark Elbe rt de mon strates how to size , scan, ed it, and adjust the palette of a banner image. (Note: See Convert a Pantone RGB value to a Web page color with the BBS Color Edi to r in the Online Tools chapterfor steps 011 how to assign color to the browser background and text.)
1. Plan the size of your banner.
To calculate the maxim um width available fo r a banner g raphic, Mark opened Netscape on a 14-inc h monitor, resized the browser w indow to the w idt h of the monito r, and captured the conte nts of the screen wi th Command+ Shift+3 . This command create d a TeachTex t fi le, w hic h c ould then be o pe ned as a PICT document in Photosho p.
In Photoshop, Mark selected WindowiPaleuesiShow Info and dragged a rectangular marquee to select the inside browser area. The Show Info palette gave Mark a width measurement of 620 pi xels and a he ight measurement of 320 pixels. Using the same technique, he al so measured the offset distance between the edge of the browser window and the art o n screens he captured as TeachTex t images. Mark di scovered this off set is 8 pixels. These c lues he lped him determine the max imum width available for artwork.
Rather than fill the entire sc reen, Mark c hose 504 pixels for the w idth o f hi s banner, I 00 pi xe ls less than the maxim um measu re ment. T he he ig ht he chose was 144 p ixels .
178.1 Chapter 6
Tip: Browser software reads one palelte ~{256 colors per page. lfyou 'rebuilding a page with more !han one image, consider creating a Super Palellc, or a palelle thai consists of/he best 256 colorsfor a group ofimages.
lfyouneed ro transfer the image with !his pale11e infonn(lfion via modem, always tran\fer i1 as binmy infomrmion so this information is not los/. (No1e: For informalion on/row 10 crea/e a Super Pale11e, see Creating a Super Palette wi th DeBabelizer in this chapter).
Imote Size
1 cunout Size: 2 13 K - - - -- - - , IUid th: ·12 pita\ !Ieight: 12 pltM
Re \olu lfon: 72 piMeh/ ,nth
] I 1 NewISUiizdteh:: 2~ 1Jl K~~Dlc~rts~~·~I l.~
ll elgll t:~ J plloi ... )
llo\otullon: !P
Jl piHeiJ/ Inch ·I
(OII\tr e ln: [!J I'r oportlon~ O l lie Sllft
2b,2c.
IUIII!III ~ e1ect wmauw
Lus 1 f oileo !t'F
----
Blur
~
Distort
~
Noise
~
Phoeta te
~
Rende r
~
'.
Sho q1 en
Styli ze Uld eo Other
:I I Shorpen toyu> Sha rp en Mor ~
~
' '
2d.
· Loucb
r Channel: I RGB xo ·)
lnpulleateh: -
~~
l... I>J ;lr'htt
..,
Output let·eh: ~ ~
.! a
:z=.. lEi
~
~
~ ~ ~
( () nuoo J
1020
O rreuicw
3a.
2. Scan your artwork.
Using a 24-bit flatbed scanner, Mark scanne d more information than he needed (higher resolutio n) but to the exact dimensions. After opening the image in Photoshop, he resampled the image to 72 pixels per inch and used the Unsharp Mask Iiller to correct the slig ht fuzzi ness that res ults when Photoshop inte rpolates p ixel information. To dup licate Mark's methods, follow these steps:
a. Select Image Size from the Image
pull-down menu. b. Type 72 in the pi xels per inch
Unshorp Mosie
CE:J
~
fie ld.
~ Preulew
c. Click on OK. d. Select FiltcriSharpeniU nsharp
Mask.
e. With Preview selected,
(!)11(!)
n rnounl:~ '1.
0 nndlus:
ph1 o1s
D Threshold:
~
l cue lt
Photoshop will d isplay w hat the 2e.
filter wi ll do to your image. Choose
25%, a Radius value o f 1.0 pi xels, and a Threshold
value oro.
Click on OK; the result is shown be low.
3. Correct the color.
After color scanni ng, Mark checked to sec how the brightness :mel darkness tones were di stributed. By mapping the li ghtest and darkest parts of the image to a white target and a black target, Mark corrected the color, which made a significant visible d iffere nce in the image.
a. SelectAdjustiLcvels from the Image pu ll-down me nu .
Photography 1179.
D
100
~ I ( U\10 11\
®II:@:]· ~: EJ
0 \: @:J':.
o u:EJ':.
.-=,DD
o n: 8
O t:B
o o:§)
"!ill:"
M: ( O ' : .
''[0"
' '@:]"
b. Set a wh ite target by double clicking on the white eye dropper and typing 5, 3, 3 in the C, M, Y boxes. (Note: Use 7, 3, 3for irnages that have more dark values than light. ) Then click o n OK.
c. Set a black target by double c licking on the black eye
dropper and typing in 95, 85, 85, and 80 in the C , M, Y, K boxes. C li ck on OK.
3b.
d. Investigate which area of your image is the lightest.
Remove the "X" from Preview in the Levels d ia log
Catot Pltt1r
CD
~ I Cu\ tam )
L:EJ o:EJ h:EJ
box, hold down the Opt.ion key, and slowly drag the white triangle on the top slider to the left. The area that turns wh ite fi rst is the lightest portion of your image. Remember this locatio n.
3c.
3d.
e. Investigate which area of your image is the darkest.
Make sure the "X" is removed fro m Preview, hold down the Opti on key, and slowly drag the black u·iangle on the top slider to the ri g ht. The area that turns black first is the darkest area.
r oslle lnfiO, I: II
'f IIJ'9.c-i lii l
II Btushl Eye Point Sampie
-·-·--·-·-·--··-·-···-! 5 bu 5 Averaqe IL.......
3e.
f. Set the eyedropper tool at a 3-pixel sample. Doubleclick the eyedropper, and select 3 by 3 Average from the pop-up menu.
3f.
180. 1Chapter6
Lcuell
I r- Channel: RGO KD ,.. ,
lnput l eueh: -
~ ~
.L~~..MJt
. L Uulpul hwelt: ·-
~
~
~
~ ~ ~ ~
ILZI21il
D f1reu tew
311.
g. Map the white target on the area that appeared as the
lightest portion o f your image by selecting the white eye dropper and clic king on that area.
h. Map the black target on the area that a ppeared as the darkest portion o f your image by selecting the black eye dropper and cl ic king on tha t area.
i. You' II notice a c hange in most scanned images immed iately. You' ll a lso notice a change in the histogra m (Figure 3i I). T he x-axis reflects colors from darkest (le ft) to brightest (right), and they-ax is reflects the nu mber of pixels wiU1 each value. The castle photo that resul ts is shown in Figure 3i2.
312.
4. Create your type in Adobe Illustrator.
Type that originates in TIIustrator and gets " rasterized" in Photoshop has neater, less jagged edges than type c reated in Photoshop. Whe n you open an EPS fil e in Photoshop, you' II need to enter a desired resolution. Rasterized type will still look jagged un le ss this resolution is sufficie ntly high. For best res ults, ope n your EPS fi le at a resolution that is three to four times the screen resolution (288 ppi or 360 ppi).
Rather than place Illustrator type, open the type as an EPS image into another fil e, copy it, and paste it into your banner
artwork. (Note: If the resolution ofthe source artwork [type1 and destinationfile I banner artwork] are not the same, the
type will change si:e.) Eithe r work at high resolution for both your image and your type, or rasteri ze a type size that is in proportion to the changes that you wi ll know will occur \.vhen you paste the type into the image. If your ban ner artwork is already created, the size type you crea te in illustrator will be a function of the
Photography 1181.
Tip: In this example, Mark reduced pixel depth after he created typefor his ban11e1:
Ifyou use black type or some other solid
color, add the type to your image after you reduce the pixel depth ofyour graphic. (Note: See Steps 9 and 10for instm ctions 0 11 how to reduce pixel depth.)
All\le.r1ze Adobe lllu\lfalor ronna t -Image Size: 2lK - -- -- - - - ,
Wid th:~ I plcos ... 1
ll elg hl: ~ I ptcu · I
Ac\o lullon: ~I phtl!lt./ lnth ..-)
I Mode: GrtUJ\tnlc .... )
Sa.
Sb.
Window
XR
None
XD
Sc.
Sd.
resolution you choose for rasterizing the type. In the foll owing example, I0 point (Illustrator) type is opened as an EPS image in Photoshop at 360 ppi, or 5 times the resolution of the banner artwork fi le where it wi ll be pasted . Whe n the type gets pasted into the banner artwork, it will be five times as large.
Desired Type Size (Finish ed Graphic) 32 40
----
48 40 60 70
Size To Create
E PS
M ultiplication in Illustrator
Resolution} (or Division) (To P~e into a
Photoshop Factor
72 ppi Banner)
288 ppi
4
8 pt
288 ppi
4
--
288 ppi
4
I Opt 12pt
360 ppi
5
8 pt
360 ppi
5
12 pt
360 ppi
5
14 pt
a. Mark's banner artwork was a 72 ppi image. He
created I0 point type in Illustrator in order to open it into Photoshop (or rasterize) at five Limes the the resolution of his banner artwork. He did this to demonstrate how the type size would change if the type's resolution was different than the artwork's resolution.
b. After creati ng his type in nlust:rator, Mark Elbert saved the type as an Illustrator fi le.
5. Rasterize the EPS type, then copy and paste it.
a. In Photoshop, Mark opened the Lllustrator document and typed in 360 ppi as a resolution in the EPS rasterize dialog box.
b. To select the type for copying, Mark selected the white background with the Magic Wand tool.
c. He then selected Inverse from the Select pull-down menu. d. Mark copied the type and pasted it into his banner
a rtwo rk .
182. 1Chapter 6
Tip: When you place typefrom an EPSfile on a Photoshop page, it gets rasterized at the same resolution as your Photoshop
image. Ifyou're working on a 72 ppifile
andyou don 't want "jaggies," rasterize the lllustratorfile by opening the entire Illustrator document into Photoshop and typing in a resollllion that is three tofour times the screen resolution. Copy and paste your type into your Photoslwp artwork, but plan ahead on a change in size (see chart 0 11 the previous page) ({the resolutions are differellt.
Newcastle Productions
~~,c.~-
8.
l.!lllll!lli!ll
New Wi ndow
7:22PM Ill i!!!
Zoom I n
II ·
Z oom Out
II-
Zoom ro ctor ...
Sh ow Rulers
..
xn
Show Brushes
,., Castle {RGO, I : I )
- - -- Show Optmrn
I Op l type (Lo~er I. 1:1) Show Picter
Show Swatchei
Show Scra tth
I·
Sho' w Chennel..
8a.
.fiwL ~
·!~~
li
Polette Options ..·
~
Ou plitalc Chnnnel..':" Oel o>l t> Chnnnel
Channel Uplto ns ...
ll ldeo Alpha ...
-
~ Spill Chann el s
~
M C III C C h il lln e l ~ ...
8c.
6. Create a channel.
Mar k wanted a c hanne l to have a record of the type 's selection, because he planned to paste an image into the type selectio n and the n add a stroke to o utline the type. Before creating a channel, the opacity needed to be set to ze ro so the type's black pi xe ls wou ld no t become part of the background.
a. With the type s till selected , Mark selected PaletleslShow
Layers from the Window pu ll-down menu.
b. Whe n the pale tte appeared, he dragged the opacity sl ider to zero before c reating a c hanne l.
c. Mark clicked on the channels tab and
selected New Channel from the o ptions pu ll-down me nu.
d. He labeled this channe l type.
"L· ·n'\.O.WWll
j Po)f'rflll
· I Opa.cll
1
Qf'r·r~u Tr~d~tr. ~
1 - e11'1~,. ('oilfln2_1l'fl'flfon 'iiii=:::J Bllrl(qrnund
In
I"
8b.
e. To return to the RGB layer, he clicked on the
RGB c hannel.
Channel Options
Nam e: Llt~y_p_e____________________~
Co l or Indica tes:--------------, @ Masked Areas
0 Se lected Areas
[CJf~)
( Ca ncel J
8d.
rIP I
·-''':r:·::::r
I L·ILtrs''f Channels_"
~ RGB A
~ R ed
~ Green
~ Blu e
tl i- Jype
' .., __r.;:-,
IiiI
...
31: 0 {)-
31: 1
31: 2
31:3
8C4
In
0 .
lSi]
1iEil ~
8o.
Photography 1183.
mmJIWindow
011
11@ 0
None
36 11
lnuer se
1- ----
flo ,lt
:1".1
Color Aongc..·
Ft·u tloer ... "1o d1 f y
M~ tt on g
· ·
Gt OUI
:le G
S1m tl <lr
lllde (dges OCII
. . I
I
Snue Selerlton ...
7b, 8a.
III!IIII Mode lmoge
Undo load Sel e c li on X Z
Cut
1111
Copu
ICC
ll nt; IC
IIIJ
P1nt e Loyer ... Clear fill ... Strok e ···
( tnu
( It' ll I~ I'Uhll\hN.. Ptthlhlle · Op l ton\ ··.
0(1 tlnr l'n I let n fnke Snap,hot
7d.
Lood Sele ction
1 Source II OCIIIIHW I :~ Chan ne l: ~
O lnuer l
r Dprrattnn ® New Selec lion Q flti (J l o ~l)h~t..I IOII
0\ubtr alluoru \ell'C i mn
0 l nlr r \ f'ct Utl1h \~h·r llon
7c, 8b.
CEJ
I I CtUilCI
7e1.
7. Copy an image and paste it into the type. a. Leaving the banner art open, Mark opened another
image of filmstrip art and copied the entire image to the clipboard.
7a.
b. Mark returned to the banner artwork, then loaded the selection of the type from the channel he had created by selecting Load Selection from the Select pull-down menu.
c. He chose Type from the pop-up menu that followed, and clicked on OK.
d. Next, he chose Paste Into from the Edit pull-down menu.
e. Mark positioned the filmstrip art inside the type by draggi ng the selection with the mouse.The filmstrip art moved inside the type each time he dragged the mouse. To drop the selection, he selected None from the Select pul l-down menu (Command+D).
8. Add an outline to the type. a. Mark reloaded the type selection by choosing Load Selection from the Select pull-down menu.
b. He chose Type from the pop-up menu that followed.
c. He selected Stroke from the Edit pull-down menu.
Window 88R
· I
lnuersc
7e2.
~Mode Im ag e IJndo Load Sel ection X Z
ru t
··
'=OP!J
liC
Pn~tn
I!II
l'ns t c Int o
Pos t c Latter··.
rtPnf'
fill ...
I rl'ult· P u hll, hPr l'uhlf SII (>I 00 11011\· ..
UJ'hnra Pn l l 1·rn TA"" ' ""' <Ill
Sc.
184. , Chapter 6
&mm~ rma ge OtlohtP
.. .. .. Groyscate
Ouotooe
./ AGB Col or CM YK Color lab Color Multichann el
Colot Tabll" ...
CM YK Pre uiew Gamu t Wa rni nq~ 9a.
--
l ndeHed Color
, llcsotu tion
0 l blts/ piHCI
0 4 b it s/ pl uet 0 ~ bits/ phccl
@ 6 bit s/ tJI IIOI
0 1 bits/ plucl
0 0 bits/ piucl
CJ 0 Other:
colors
t OK 1]
( Concct J
. - Palette -
0 luMI
O llnilorm
® Adnptiue 0 Cu st om ... 0 Preuious
.- Dither -
@ None QPnttPrn
0 Oillusl ou
9b.
--J· ~ S troke Width:
=
Jp iHels
st roke
[ Loco lio n
0 Inside
® Cen t er
0 Ou t sid e
(( OK JJ
[ Concel )
. - Olending - - - -- -- - - - - - - - - - ,
I Opaci t y: ~ '1. Mode: Nor mal
I....
0 Pre\et t·P Tt ilO\Ptl< ency
8d.
d. With black selected as a roreground color. he selec ted a width of I pixel, to be centered on the type selection at I00% Opacity and Normal Mode.
e. Mark found the combination or Stroke settings through trial and error. By selecting Undo fro m the Edit pulldown menu, he was able to u·y alternate paint colors in the outline and vary the location.
9. Reduce pixel depth (using Photoshop). When Mark fi nished editing the image in RGB Mode, he ex perimented with Photoshop's Indexed Color Mode to see how far he could reduce the pixel depth without altering the color. (Note: See the next sectionfor instructions on ho iV to reduce the bit depth in De Babelizu )
a. Se lect Indexed Color from the Mode pull-down menu.
b. Experiment by selecting smaller bit depths with and without dithe ring to sec how the color in your image holds up. Each time you try a selection, select EditlUndo or press Command+Z if you do not li ke the color.
Mark was able to reduce the image to a 6-bit color depth (Figure 9b) wilhout a noticeable change in the color. This made a significant change in the fi le size.
Bit Depth 24 bil
8 bit 6 bi t 6 bil
File Size 203 K
7 1K 44K 33K (Dc Babelizer)
Photography l tss.
lllliJDI Mlu:
Op llo n' l'nlnlle Into Putette
Strlph
( OII IHH 1 lo Ofl'IIJ I GrGyscnle ,.
Rcmoue Unuu~d G' Oupllcnt e.:
Reduce Colon...
.,
Set Pete lieD' ftemep PINth ...
Battgr·oumt llrmoua l... Macln11ze l1o le lt f! Sor t Pe ii!I IU \upt~r Po l etto
UIJ'IJJ Ordlli Oll Ol lller Merge Pote u u ...
£qu·llze r ele t h!
,.
Hhtogrom...
HSU Control...
lnue rl Caton
Gun Control ,··
Nl\C llot PlMt l riMer...
,.
lnten1ity & Contru t ...
\hnvn ~ Out llue
~
10b,10c.
1 bll · 2 rolan dllhered I bll · 2 colon
2 blh · -t colon ounena 2 bll\ · 'I c-olon
l blh · 8 tOIOil dll h CI II!O l blh · 8 cot.... ·I blh · 16 COIOI\ lllllltlllHI ·1 bilt · 16 COhu 1 ~ bll \ · J2 colon (IIIIICI'IHl
5 blh · l2 catort 6 hlh · 6·1ulan ounerec
I hrh 118 cOhol\ tt IJJPI\"d ll·lh 120 Lot.....
U f tl \t ' 0ob lUinl J UIOII...I '-'I
8 blh · 256 cot... ·
ltrlllh \/t: llftO '-'"'"" uuu+
16 hlh · 321C nr.o colrn·
2·tlllh · 17 M IIIIu nmmcowt , l2lllh · 17 Million IIGO · AI(H,
Tip: See the Online Tools chapterfor more information about how to download Macintosh shareware programs.
Tip: The cost ofthis book doesn't include the use ofthe shareware programs on the
CD-ROM. Ifyou continue to use the soft-
ware programs provided, please register those that you use.
11c.
10. Reduce pixel depth (using DeBabelizer). a. Open your RGB image in DeBabelizer.
b. Select Change Pixel Depth from the Palette pul l-down menu. Equilibrium Technologies recommends that you always select dithering when you reduce the number of colors. Although you can change the amount of dithering by selecting OptionsiDithering Options & Background Color from the Palette pull-down menu, DeBabelizer's default setting is the amount Equilibrium has determined to be the best amount.
c. Start by reducing your image to 128 colors and look at the image. If you don' t like the change, select Undo from d1e Edit pull-down menu or press Command+Z. Keep stepping down to fewer colors to determine when Lhe color change becomes visible. Mark was able to reduce the palelle to 64 colors without a noticeable change in the image.
11. Save the image. a. Select Save As from the File pull-down menu (in Photoshop or DcBabclizcr).
b. Select CompuServe GIF or JPEG from the pop-up menu. (Note: Photoshop 3.0 does not add interlacin g to GIF images. Interlacing gives the Web visitor the impression ofafaster download by quickly painting the image in low resolution and graduallyfilling ir in.)
To add interlacing to a Photoshop GIF image, you' ll need GTFConverter by Kevin Mitchell. DeBabelizer has an option to save a ri le as an Interlaced GTF. (Note: GIFConverter is available on the CD-ROM in the back ofth is book).
c. Give your image a name. Try to keep your file name to a minimum of eight characters (no spaces) wi th a file extension such as .GlF, .JPG or .JPEG. (Note: File extensions must be limited to three characters on the Windows J.X pla({orm.) Removing vowels from the file name helps to reduce the number of characters. Mark used DeBabelizer and chose Interlaced GIF as the lilc format for saving.
186.j Chapter 6
12. Create an HTML file to test your image.
a. Open SimpleText. Use SimpleText or yow· word
processor. If you use a word processor, be sure to save the docume nt as Text Only.
b. C reate a new HTML document. Start a new document
with the following markup tags: <HTML> <HEAD> <TIT LE >Newcastle Productions</TITLE> <!H EAD> <BOD Y>
c. Add the image tag. Reference your G!F (or JPEG)
image wi th the addit ion of an <lMG> tag. <HTML> <HEAD> <TI TL E>Newcastle Productions</TITLE> <! HEAD> <BODY> <lNG SRC - "tlewcst l e .gif" >
d. Close with an ending <!BODY> and <IHTML> tag
and save the file. Save the document. If you're usi ng a word processor, save the text as ASCII or Text Only. Give the lile a name, and add an .HTML exte nsion (. HTM if the Web server you're using is a DOS mac hin e).
e. Test the HTML document in Netscape. Open
Nctscape, a nd then open your doc ume nt by selecting Open File from the File pull-down me nu. Make sure your GIF im age and your HTML document are in the same directory. To test a number of altemate images, create several HTML files and save them under diffe rent file names or open SimpleTex t a nd Netscape at the same time and vary between the two applications. Each time you edit your HTML document, save it, a nd click on Reload in Netscape's Toolbar to retesL
Photography 1187.
Linking a thumbnail GIF to an external JPEG
Summary: By creating a small G IF thumbnail 011 your Web page, your image can be viewed with most bmwsers. The thumbnail loads quickly. and a large1; JPEG image download can be optional (a .!PEG vie wer helper application will be required with bmwsers other than Netscape).
1.
188. 1Chapter 6
0
Nel scop e: Toronto
__Qjl~ «> I~ ~ I ~ ~ ~ I tl£ li l . ~ 1 I 8~1 ~ ~ l _j-
W.at~ lfi1· ·///APS·200r"ivt ... /Vtti'J520B«*~252n·t£1Wf't/6~2f2~2S:r95no,.ntol
I 'Wh·t't H·w? ( WhU'f' Cool" Han:lbOt'k
I I Utt StVC"h Ut l D_.tctCN"\1 ( U·w·2foups
IIWI
\J
B y reducing an image to a thumbnai l-si ze GIF and making the thumbn ail a link to a larger, JPEG version of the same i mage, Mark El bert created a Web page that can be v iewed by mos t browsers. At the same time. he also provided an opti onal image format for a detai led photo.
1. Save an original image in Photoshop. a. When you have finished editing your image in RGB
Mode, select Indexed Color from the M ode pull -down menu. Select Adaptive Pal ette and D i ffusion D ither. Try selecting smaller bit depths unril you noti ce an unsati sfactory change in the image. (Select Undo from the Edit pull -down menu if you're unhappy with a selecti on.)
b. Select Save As from the Fi le pull -down menu . c. Choose JPEG from the Format pop-up box. d. Choose an image quality. e . Name the fi le using ei ght characters and no spaces.
Add .JPG as a file ex tension at the end of the name.
2. Reduce your photo to thumbnail size. a. Open yo ur origi nal RGB image (without the .JPEG
extension) in Photoshop.
b. Select Image Size from the i mage pull -down menu. c. Type in a small number for the width va lue (such as 2
inches). and Photoshop will proportiona lly size the height for you. (Note: Record what the height and width values are in pixels as you will need this infonnation.for your <IMG > tag.) C lick on OK.
Tip: For injor111ation and i11structions on holV to uploadfiles to your Internet provider's servet; see the Image Map chapte1:
d. Select Fi lte riSharpe niUnSh arp Mask to correct the fuzziness that resul ts when you resize an image. Use 25%, 1.0 Radius value, and a Threshold of 0.
3. Save the thumbnail.
a . Se lect Save As from the File pull-down menu .
b. C hoose CompuServe GIF from the Format pop-up box.
c. Name the file using eight characters and no spaces. Add .GIF as a file extension at the e nd of the name.
4. Create an HTML document. a. Open SimpleText. Use SimpleText o r your word processor. If you use a word p rocessor, be sure to save
the docume nt as Text Onl y.
b. C reate a new HTML document. Stan a new document with the fo llowing markup tags : <HHIL> <HEAD> <TITLE> To ronto</TIT LE> <BODY>
c. Add an I mage tag. In thi s example, the thumbna il GfF
image as well as the text, Toronto, 1995, will be a li nk to the exte rn al JPEG image li sted inside the anc hor tag <A HREF><IA>: <HTML> <HEAD > <TI TLE>Toronto</TI TLE> <I HEAD> <BODY> <A HREF- "toronto.jpg">< It1G SRC-"Tor_sm. gif" > Toronto . 1995</ A> </BODY> <IHHIL>
Photography j189.
4d.
4h.
190. , Chapter 6
d. Add image sizing to your image tag (optional). rmage sizing is a Netscape feature that adds speed to the downloading of images. When Netscape encounters an inline image, it builds a bounding box to display the image. With the he ight and width information in the <IMG> tag, the bounding box can be built without delay.
The height and width in pixels can be obtained from the lmage Size dialog box in Photoshop. In this example, the width is 144 pi xels, and the height is 123 pixels: <A HREF- "toron to .jpg">< IMG SRC-"Tor_sm.gif" WIDHI- 144 HEIGHT- 123> Toronto , 1995<1 A>
e. Control the width of the image border (optional). When you make an image an anchor, or a link, the browser wi ll display a colored border to act as a clue for visitors. For menu buuons that are obvious links, the border can be turned off by add ing BORDER=O to your <IMG> tag. Tn thi s example, this would be wriuen:
<A HREF- "toronto.j pg">< IMG SRC- "Tor_s m. gi f" WI DTH- 144 ll EIGHT-123 BORDER- 0> Toronto , 1995 </ A>
(Note: For the formatting ofthis book, the lines are broken.) f . Save the file. Save the document in Simpl eText, TeachText, or your word processor. If you ' re usi ng a word processor, save the text as ASC IT or Tex t Only. Give the file a name and add a n .HTML extension (.HTM if the Web server you're using is a DOS machine).
g. Test the HTML document in Netscap e. Open
Netscape, and then open your document by selecting Open File from the File pull-down me nu. Make sure your G lF image , your JPEG image, and your HTML docume nt are in the same directory.
h. Test the HTML document in other browsers. In
browsers other than Netscape, a JPEG viewer will be launched when you click on either the thumbnai l or the text link. The JPEG image 'vvill be di splayed in a separme floating window.
5. Summary of HTML tags used in this section. T he tags you see in this list (in alphabetical order) reflect the HTML 3.2 specification. <A>.· .<IA>
Referred to as an anchor, this tag uses the HREF attri bute to li nk to an external fi le or anchor. For example: <A HREF-"Toronto.jpg">Toronto. 1985<1A>
(Note: The file name must include the path name ifthefi le
is located in a nother directmy.) <BODY>.. .<IBODY>
A tag used to open and close the body of a document.
<HTML>.. .<IHTML> A tag used to open and close an HTML document.
<HEAD>. ..<!HEAD> A tag used to open and close the header portion ofa doc um ent.
<IMG> Used to refer to an inline image, this tag uses the SRC attri bute th at represents the the URL (location) of the image. For exa mple: <I MGSRC-"To r_sm. gi f "> In this section, image sizing was added to the image tag wi th the WIDTH and HEIGHT attributes. For example: <IMG SRC- "Tor_sm.g if" WIDTH-144 HEIGHT-12> To tum off the image border, the BORDER=Oatttibute can be used in the image tag. For example: <IMG SRC-"Tor_sm.gif" WI DTH-14 4 HEIG HT-123 BORDER-0>
<TITLE>...<ITITLE> A tag used to describe the tit le o f a docume nt that shows up inside a document's title bar.
Photography 1191.
Wrapping text around a photo
Summary: Prepare a Photoshop image with extra background to simulate a text offset for a text "ru/laro1111d." Use a11. <IMG> tag in an HTMLdocume11t with a11 ALIGN allribute to get the text to wrap.
Transparency
Mark Elbert
lla..5lol
Mut.. co·folll¥i!r of Moo her Mar/, lui!$OfllliMlly fmm
eo...... MoryWd H111 u...,..,. incl1ldo ·~·
tl\lVI!lhr'4;. oompuuw, mwi..Xj>"'1$1Qn (I>I..,oe, no cob)
and of tOUZ.JO Jnllllic (tO MillO JW1 A few) Muk f")$ 0
munulo ofso"""' h.M. inspued him mhilo musi:ol
WJDn through time. JI.M1 Heodr>c. ~n. Ztpand the
Wloo hM Jt.h hu" Ylh · Cl'll'llllg for povet tbf canb.
t..wln hi;-~ boos lwt. So his otbnol:illo ontbe
""'""'"""'""ood· best m
be's qwck10 adms 'hero,.
..,.n · Also ottoli<y ""
··d Whon Mm. ·PI",..hes lw p~ m Motl.et Moly,
tempn·mtn b4Wa .........t!WI&sl.t f..ts wry
"ro~l:febott Ast. .xpm, 'lbtroWibeSllCha
chilo"'"'' m U.. dm<tionof ntryor.o (mtt.. bond), ths I
f·eltloi-.<S a....,te""'10"" andopen mind 10 1:o<ptho
po::b!gemg.,bet· 'Tog<1lrf m'flJ b· on und!ml!l·mor< co.,ldormc bovQgl<and yet
numoniw ht ieelo hupllylr,.;"' Dtrobuon loth· othermembots'!"'rfOaniiiiCO!<lllthobond H"
ebou llw- fuure?. 'To be
and ldrtou
-nh· kugll
rllp no tete
rrr~tl<
Imago Sit e ...
llb to gr om...
la.
{::;~:'~:~~:-..- - - , CE:J
...., .1: 1 1 .' 1 · « "
, , ...... 1
.........,~
lb.
192. 1 Chapter 6
A lthough space can be c reated around an image with the HSPACE attribute, wh ic h is used in the <TMG> tag, Mark didn ' t want the browser to add horizontal spacing on both sides of the image he planned for his Web page.
Mark cre ated additional background and filled it with a gray that matc hes most browse r backg rounds. He then used software that assigned the background a transpare nt value.
1. Create a text offset. Text offset is the distance between an image and the text. Add
a background equal to your des ired offse t dis tance with the ImageiCanvas S ize command in Photoshop. This "extra" edge around the photo can be assigned a transpare nt value using Tra11 sparency, by Aaron Giles (available on the CDROM in the back of this book), or DeBabelizer, a sophis ticated color pale lle manipul ation and file convers ion tool li·om Equ ili brium Techno logies.
a. Worki ng in RGB Mode, select Canvas Size fro m the
Image pull-down me nu.
b. In the Canvas size d ia log box , c lic k on the box-map to indicate where your image should go when you add canvas. Add bac kg round by increasing the values in the wid th or height box.
2b1.
2b2. Pa l e tte :: I
Open Ch annel s ... Rc uirP 3a.
Tip: See the Page Layout Tools chapter for instructions on using PhotoG/F, a Photoshop plug -inthatll'ill make CIF flies transparent.
c. Before you save, select Indexed Color from the Mode
pull-down me nu. Experiment to see how muc h you can reduce the bit depth without altering the image. Ah vays select Adaptive Palette, and Diffusion Dither.
W hen you're satisfied with the dime n ions of the backg round, choose Save As fro m the File menu, and select CompuServe G IF from the Format pop-up box.
d. Be fore you open your fi le in a program that can write a transpare nt GIF file. co lor the background a shade that is not in the photo.
Mark chose a blue-gray (Note: Pick a shade that has a color and tonal value close to the background because both Transparency and DeBabelizer leave a tiny trail of pixels around the edge ofthe image.)
2. Make the background transparent
(Using Transparency).
a . Use the Fi lelOpen GIF
command in the T ransparency
'i11
software to open the GIF fi le.
b. Press and hold the mouse pointer on the background shade. When you let go of the mouse, the background wi ll change to a g ray colo r. This shade is now transparent.
c. C hoose Save As from the File
menu, and select GIF89.
2a.
IDillll
Open GIF . .·
~0
Cl o s e
~w
i
:twrtl:l: ·
Quit 2c.
·t
~Q
3. Make the background transpare nt (using DeBabelizer).
a. Use the FileiOpen comma nd in DeBabilizer software to open the GrF file .
b. Select OptionslDithering & Background Color from the Palette pu ll-down men u.
3b.
Photography 193.
1
Dither Optio n\ () Back· rounll Color
O.t~Jh
Oilher '1.: 0 0 0 0 0 0 0 ® 0
0........ 25.......50.......75...... 100
Oilher Melho!l: l Oltrus lon
yl
0 Don I dither Background Co lor
E ) ORPmop 9a(tqround (olor to lnlor lndru:
Deckgruun d Colo r:
0 Uockuro und Rcmo uu l's · r111 Color ·
II ,1· 11612-11 0 Mos t populer color 0 Color inlieu:~
@ OGII IInluc:
~ - ~or or rrcw...)
OK
I ) Concel
( nerr1 ...
I
3c.
3d.
c. Click the RGB radio button at the bottom of the screen. d. Use the Eyedropper tool to select the background shade
you'd like to be transparent. e. Choose Save As from the File pulJ-down menu. f. SelectGIFI(nterlaced & Transparency from the pop-up box.
Non- interlaced Interlaced No n- Int erlace d 0' Transparency
' I 'I
le ·
3f.
Dr. llalo CUT IMG JPEG, JFIF
g. DeBabelizer wi lJ give your file name a .GIF extension. Save the lile.
4. Use SimpleText to create an HTML file. SimpleTex t from Apple Computer is a useful tool for creating HTML files. fl's smalJ (77 K), it's distri buted with System 7.5, and it saves HTML text Iiles in the ASCII form that's required by browser programs. Microso ft Word users can save a text lile as Text Only or as ASCII.
a. Open SimpleText. Use SimpleText or a you r word
processor. If you use a word processor, be sure to save the document as Text Only.
b. Ct·cate a new HTML document. Start a new document with the fo lJowing markup tags:
<IHNL> <HEAD > <T ITL E>Wra ppi ng Text<IT ITLE> </H EAD> <BODY >
194. , Chapter 6
Tip: An AOL account is now ve1y similar to an Internet PPP account with an /ntem et provide1: Any Internet client software may be mn over an America Online connection. Launch your AOL sojiware, and then launch an lntem et client. (Note: Windows users should minimize their AOL software before launching Internet client software.)
c. Add an image tag.
<HTML > <HEAD> <TITLE>Wra pping Text</TITLE> </HEAD> <BOOY> <IMG SRC - "MarkT.gif">
d. Add an ALIGN attribute to your <IMG> tag.
The ALIGN attribute in an <JMG> Lag controls the way the image aligns with text. Tn thi s next example, ALIGN=LEFf moves the image to the left edge of the page and the text wraps arou nd on the rig ht. <IMG SRC - "Mar kT . gif" ALIGN- LEFT>
e. Add headlines and HTML headline tags. The HTML
tugs for headlines range from <H 1> ...<IH L> through
<1-16>...<IH6>. < I-I I> is the largest headline size avai lable , and <H6> is the smallest. The actual size of this type wi ll be relative to whatever the Web visitor has set as a default font size in his or her browser. For example, if a Web visitor has never altere d the font size in Netscape 's Pre ferences dialog box, the de fault size for body text wi ll be 12 poi.nts.
Al l of the headline or tit le sizes will be re lative to thi s basefont size. l n this example, Mark Elbert and Bassist have been tagged with headline tags <H2> and <H 3>. <HTM L> <HEAO> <TITLE> Wr apping Text</TITLE > <!HEAD> <BOOY> <IMG SRC- "MarkT.gi f" ALIGN-LEFT> <H 2>Mark El ber t >< IH2><P> <H3>Bas s i s t </ H3 >< P>
Photography j 195.
Mark Elbert
Bassist
2f1.
lVIark Elbert
Bassist
2f2.
19&. j Chapter 6
f. Use the font size tag (optiona l). Font size can be
controlled with the <FONT SIZE=value> tag where values range fro m I throug h 7. ln thi s syste m, the base fo nt has a va lue of 3.
T hi s tag can also be written with a preced ing+ or - to indicate a size that is re lative to the basefont. T he enti re headline o r just the initial capita l can be con trolled, depending on the placement of the tags.
Notice the tag is placed inside the head line tag and the ending </Font> tag is requ ired.
<H2>< FOIH SIZE-+3> Mark El bert </ FONT> <I H2><P> <H3><FOtH SIZE-+3>Bassi st</FO NT></H3><P>
l n this exa mpl e, the fo nt size tag is used to make the in itia l capital larger:
<H2>< FOIH SIZE-+3>M</FOIH >a rk <FO NT S!ZE-+3>E</FONT>l bert</ H2><P> <H3><FONT SIZE-+3>B</FONT>assist</H3><P>
g. Add comment lines to your document (optional).
Com ment li nes are ignored by the browser and will never show up on your Web page. T hey provide a means of documenting the details of how the document was constructed. Use<! ....--> to create comment s. For example:
<! ··Thi s tex t changes the first week of ea ch mon th . - -> (Note: Avoid using special characters such as<, >, &.and ! in COI11111entlines.)
h. Add the body text and ending tags.
<HTM L> <HEAD > CTI TLE>Wrappi ng TextC/T ITLE> <BODY> C/ HEAO> <IMG SRC- "MarkT.gi f" ALI GN-LEFT> CH2> Mar k Elber t>C/ 11 2><P> <H3>Bassist C/H3><P> Mar k. co -founder of t1oth er Ma ry. hail s originall y fr om Bowie . Mary land_ <!Body>
</IITHL>
--
M !l h Ut e: Wr-t p In l U I f
~cJ ~ ~ ~liJ.!JLJ _j
........ ~- If~ lll"'fW::teo ....~,.....e.·~~
~tw. -1
I
~ ~ ~ ~~ ~
a
II
Mark Elbm
3f.
i. Test the HTML document in Netscape. Open your document in Netscape to test the appearance of your Web page.
3. Flip the image, and try an ALIGN attribute. Text can wrap differen tl y if you use the AL IGN attribute in the dMG> tag. In this example, to get text to wrap on the lefL side of the image, Mark used the ALIGN=RfGHT in the <lMG> tag.
a. Open the image in Photoshop. If the image needs to be
reversed, ni p it in Photoshop (or DeBabeli zer).
b. Flip the image. Select Fl ipiHorizonLal from the Image
pull-down men u.
c. Resave as a GIF image. Se lect Save As from the File
pull-down menu, and g ive the image another name.
d. Make the background transparent. Use Transparency
or DeBabelizer to make the image transparent. (Nore: Because Pl!otoshop cannot write the rransparent GIF information into the document header; this i11jormation is
lost ifyou edit and save your docwnem in Phoroshop.)
e. Add the ALIGN attribute to the HTML file.
<HTM L> <HEAD> <T ITLE> Wra pping Tex t </T ITLE> <!H EAD> <BODY> <IMG SRC- "MarkT. gif"AL IGN- RIGHT> <H2>Mar k El bert ><IH2><P> <H3>Bassist</ H3><P> Mark. co- found er of Mo t he r Mary . ha i l s ori ginal l y f rom
Bowi e . Ma rylan d_ <!BODY > <I HTML>
f. Resave the document, and test it in Netscape. Although
the other ALIGN attributes (RIGHT, TOP, BOTTOM, and MIDDLE) are not appro priate for Mark's image, you may want to test others with s maller images.
Photography 1197.
Controlling text wrap with HTML
Summary : Use HTML <IMG> tag attributes VSPACE and HSPACE as a way to control text wrap around an image.
1a.
- ~.
-;::;::_Ne t scope: M esh
~
~~~~~~EJ_t;j _j II ,
ttc.m.
Rtloa~ 1'1'\tqtl <>p.t~
Prttt
fnd
p
I Loct,lon f1~ Ill APS'91!1200r t vt"1/Wtb~208ook"M2~2FM Ebrt/m.st12.html
I
I I ,..,.,..,,,,. 1 ._-ntt's t~"'? Vhll's Cool' H.,..,ooi< I lltt St,vch I IItt l>lroct·:J!I
~ -...._~····~~···-~""'"" '··~- r! f.lolller Low Bone's App.. Inf.rt, u's beenInJnYV<blcle's »po ployer more
ollrn tlWl not Vocohst Jmnw OU.'\lQUt YOIU qed vtlllacel10U\ "I · don't
"'""''Y · unde'"W>4 ·this· wrld · but·lllat· oeV<r· sopped· · · mod.m:m" q~ty
llla11ully dro...., allstenor In Tho iultm,
Stow Urortce, luclt ma):>r
blln, Yldl..,rioU>ly llt·vyvoJa:h> i:mes, ond stoc~.!d tine.! reml:nis<:ent of.Ia:~
dotllbs·era Atnumllll (03pechly ·s-amve· vhi:h rem!ros me of
"Comblnloon'). Banist Mot~ l!lbettard diUlllll:tr Pa1ll JoyCIOOVt qelller
VJUl10taholilanty ond ebanllon Lotsadtlf·rent mooils and ""'11-:<:ulpteil
dynomlo:>l:eep l!unis from boco~ bo~. alloVUII: J.uen 10 reolly shine
l'O.IIler than jtl.5t shout Arul tl " piOd uctionl OreM mix, perfett drum ·oun4 (tlllly ocnlllllysound lll'.b
c...., "'.td"""'l), nice f&t b.., .,,., Md iullllr ~emenli tJUcl'., a side of beef, yetspar>e eno~h
"'let tbo VllCals thru 1'hl> excollent rrordilll bear.~ llle label of Me.la Raco!l!J, but my
b liW
(I'Ciup wn't be 4\.UI) for!!)'- · Ple830 .sent your full leD(dt bpe vhen U':J n:ad.yaJ\1 let me knOV
vhen you m pbytnz here By llle ny, llle b11171pttstXl\tris tu!e , but we llle cotluc fonHf· · h:llt
>JO Spinal Tap·bh.
IC>I Gr!.!.W
-Cake Magozine
.o-
1<0
e!
I n this example, Mark used attributes HSPACE and VS PACE with an <IMG> tag. By assign ing each a value in the HTML document, a text offset cou ld be controlled.
1. An image with no extra background.
a. Open th e image in Photoshop. Crop any extra back-
ground off the image Lhal wi ll have a Lex tmnaround.
b. Save as a GIF image. Select Save As from the File pull -down menu, and save the image as a CompuServe GJF fil e.
2. Use SimpleText to create an HTML file.
a. Open Simpletcxt. Use SimpleText or yo ur word
processor. If you use a word processor, be sure to save the document as Text Only.
b. Create a new HTML document. Start a new document wi th the fo llowing markup tags:
<HTHL> <HEAD> <T IT LE>Wr app ing Text </TITLE> <!HEAD> <B ODY >
198. , Chapter 6
Tip: With Netscape and SimpleTe.xt both open, tl)l varying the numbers assigned to VSPACE and HSPACE, re save your text file, switch to Netscape, and reload the SimpleTextfile to see the results.
_:j~~ ;;J~J;j];J_ru _j 1i
~ ,,. ,,,.,..~.....,.~.~;n..~: t W
I
"~·-..l ~·.. :..a:r! ~ I.,.. ,._. ,~~
2f.
c. Add an image tag.
<HTM L> <HEAD > <TITLE>Wrappi ng Text</TITLE> <! HEAD > <BODY> <IMG SRC- "Mesh Wave .gi f">
d. Add the alignment tags.
<H H1L > <HEAD> <T ITLE>Wrapping Text </T ITLE> <! HEAD> <BODY > <IMG SRC- "Mesh Wave.gif " ALIG~-LEFT VSPACE-5
HSPACE-10>
e. Add the body text and ending tags.
<HTML> <H EA D> <TITLE>Wra ppi ng Text</TI TLE > <! HEAD > <BODY > <IMG SRC- "Mes h Wave .g if" ALIGN-L EFT VSPACE-5
HSPACE-10 > This four - song tape is one of the bes t new hard rock
offerings I ' ve heard s inc e Mother Love Bo ne' s Apple... <! BODY> <I HH1 L>
f. Test the HTML document in Netscape. Open
Netscape, and d1en open your documenL by selecting Open File from d1e File pull-down menu. Make sure your HTML document and your image are in the same directory.
Photography 1199.
Tip: For information and instructions on how to uploadfiles l'O your Internet provider's serve1; see the fmage Map clwpte1:
3. Summary of HTML tags used in this section. The tags you see in this list (in alphabetical order) renect the HTML 3.2 specification.
<BODY>...<IBODY> A tag used to open and close the body of a document.
<FONT SIZE=VALUE>. ..<!FONT> A tag used to change the default font size. Values range from I lhrough 7. The tag can also be written with a preceding+ or- to indicate a size that is relative to the base fo nt.
<H2>.. .<1H2> <H3>.. .<1H3>
Tags used to enlarge text, as to indicate a heading. Lower numbers indicate larger type. The options range from <H I> through <H6>.
<HTML> .. .<IHTML> A tag used to open and close an HTML document.
<HEAD>. ..<!HEAD> A tag used to open and close the header portion of a document.
<IlVIG> Used to refer to an inli ne image, this tag uses the SRC atu·ibu te that represents the URL (location) of the image. For example:
<IHG SRC- ""clear.gif"">
This tag uses the ALIGN attribute (or parameter) to indicate the placement of an in line image. Options include TOP, BOTTOM, LEFT, and RIGHT. For example:
<IHG SRC- ""Mesh Wav e .gif"" ALJGN·LEFT>
200. , Chapter 6
Tip: C/arisWorks includes an HTML i111port and e.1portjeature that is built into !he sojill'are 's XTND f unctions. The software also includes lelllp fales.for creating Web docu111enls. (htlp:!!www.cfaris .co111/produc/sicfa risic/arispage20/cfarispage20.htlllf)
The <IMG> tag also uses the HS PACE allri bute, which adds s pace on both sides o f an image. For example:
CIMG SRC- "Mes h Wave.gif" ALIGN-LEFT HS PACE-20>
<P> A Lag used to indicate a new paragraph. This tag does not requ ire an e nding tag.
<TITLE>. ..<!TITLE> A tag used to describe the title of a document that shows up inside a document 's ti tle bar.
Pho10graphy 1 201.
Fading an image into the browser background
Summary: Photoshop 's gradient tool and Quick Mask option can be used to "fade" an image to the gray that matches most browser backgmunds.
0
Netscope: ens ile
JilL
l.ooahon ltat. ///A~200rNt"'/VtbW.20~2~2JM[lbtf"t/e.uU·.html
I I -.,.lt's Htv' ~Mils Cool? Ha.nd>otV I ,.., s ....eh I HttOrtctory l I Nh'J j'Gu;S
1a.
go ···:" "' · ··mm;;;mE'ili!!;;· · ....m!!.,::m'!!!'!!!m'" :mggru .
I Bru~ Gradient Tool Options~ ""-T~
. '. . .r:~~.~~:.~. . . . . . .:J. ..~~.~~.~~~. :. .~. . . . . . ~~~. ..
I l Stylf? : Forf?ground to Background ""
..................................................................................................
Midpoint : 50 % Radial Offs~?t : 5 0%
.ji:jrJI . i®liw~ .........~...[gj.~;·~·~~·~
1a, 1b, 1c, 1d.
!:Color I ndicates: ® Mndted Areas 0 Seler t ed nr eos
L~~o~l oCr Opacity: [gj "J. I
2b.
2c.
Photoshop's strength is image editing. In th is exa mple, Mark Elbert di scovered a method to fade an image into the browser background. A similar tec hnique can also be used to create a " fu zzy" drop shadow.
1. Adjust Photoshop's gradient tool.
Open your image in Photoshop, a nd adjust Photoshop's grad ielll tool setting.
a. Double click on the g radient tool (Fig ure Ia), and select
Rad ial from the Type pop-up menu. b. Drag the Opac ity slider to 50%.
c. Drag the Rad ia l Offset slider to 50%.
d. Drag the fvtidpoint slider to 50%.
2. Work in Quick Mask Mode.
a. Double click on the Quick Mask icon
at the base of the Toolbox.
2a.
b. Select Color Indicates Masked Areas, and type 50 % in the Color, Opacity field.
c. With the Quick Mask icon still selected, use the crosshair pointer provided in this mode. and draw a radius line from the center of your image outward and re lease the mouse button.
d. Switch to Selecti on Mode by c licking the icon to the left of the Qu ickMask 2d. Mode icon at the base of the Toolbox.
I 202. Chapter 6
3a.
O R:~ Q G: ~ Q B:~
3b.
3. Set the background color. a. Double click on the background color swatch at the base
of the Toolbox. b. Type 201 into the R, G, and B fields. C lick on OK.
4. Subtract the "unmasked" part of the image.
When you mask the middle of your image with a rad ial gradient mask, you protect the shaded area from further image man ipulation in the Selection Mode.
WitJ1 a background shade equivalent to the gray you find in most browser backgrounds, press the Delete key. The image will appear to fade in to the gray co lor. By varying the M idpoint setting in the Gradient Tool Options paleuc, you can make the mask stronger or weaker in the midd le.
5. Create an HTML file to test your image.
a. Create an HTML document with a n <IMG> tag.
<HTNL>
<HEAD>
<TIT LE>Castle</TITLE>
</ HEA D>
4.
<BODY>
<ING SRC - "Castle.gif">
<!BO DY >
</ HTML>
b. Save the file. Save the document in Simp leText,
TcachTex t, or your word processor. If you 're using a word processor, save the text as ASCII or Text Only. Give IJ1e [i lea name and add an .HTML extension.
c. Test the HTML document in Netscape. Open
Netscape, and IJ1e n open your docume nt by selecti ng Open File from Lhe Fi le pu ll-down men u. Make sure your HTML document and your image are in the same d ire c to ry.
Photography 1203.
Create a tiled background
Summary: Using Netscape extensions to HTML, an image cmr be tiled in the browser windom
:;r
Netscape: Mesh
_j~ lfJ _j ~lJ _j_j_j
l c.c·ti· )htt ·///APSii100rrvt-I'Wttnl208oc.~2rH £btrt/6~25V'22;&252f'95/rr.tJh hfl
' I I I ,.,, I I tl·· 'rlo·l's
'o'h1L Co<>I' -~
s.....· l t.,ll>rtc i'"J 14tw'f'OUI'"
la.
j
fill
~Cont ent s
- "'"' I tUhlt"
u OK d
·II ~
, otc nolng
Opacity: § J-t I · I Mod": NOiflli11
Qf'ri'\Pitl{' llrtO\IhUPilfiJ
2a, 2b, 2c, 2d, 2o.
2f.
T o create a wallpaper effect, Mark used a small photo and ghosted it with a white fill at an opacity level of 85%. By keepi ng the background very light, rypc can be loaded on top and sti ll be readable. Using the Netscape extensions to HTML, he created an HTM L docu ment that tiled the image across the browser's background.
1. Create a tile. When you're planning a tile pattern , any size image may be used. Nctscape wi ll repeat the image to fill the background. Working in RGB Mode, reduce the size of your image to the desired size of your tile.
2. Ghost the image. a. Choose Select All from the Select pull-down menu. b. Select Fill from the Edit pull-down menu. c. Select White from the Use pop-up menu. d. Type 85% in the Opacity field. e. Select Normal from the Mode pop-up menu. Click on OK. f. The resulti ng image is shown in Figure 2f.
204. Chapter 6
r-----'==~~~M;:·;:'";',';:r:::·':::"·:::r:::·:::!.l_---=> c::;)nrs Orluc···
~------------=~ ~
Save this document os: I Mesh.gi f
rormo1;! Conw uSerue Glr ..,.I
~
ILELJI
4.
3. Reduce the bit depth. Before you save, select [ndexed Color from the Mode pulldown menu. Experiment to see how muc h you can reduce the bit depth without a ltering the image. Always select Adaptive Palelle, and Diffusio n Dither.
4. Save this image as a GIF file. Choose Save As from the File pull-down menu, and select CompuServe GIF from among the choices on the Format pop-up box.
5. Create an HTML file to test your image.
a. Create an HTl\IIL document with an <lMG> tag.
<HTML > <HEAD> <TI TLE>Mes h< /T ITLE> </ HEAD > <BODY > <IMG SRC - "Mesh.gif"> <!BODY > <I HTML>
b. Save the lile. Suvt: the document in SimpleText, TeachText, or your word processor. If you' re using a word processor, save the text as ASCH or Text Only. Give the fi le a name, and add an .HTML extension
c. Test the HTML document in Netscape. Open
Netscape, and then ope n your document by selecting Open File from the F ile pull-down menu. Make sure your HTML document and your image are in the same d irectory.
Sc.
Photography I 205.
Create a full-bleed photo background with larger tiles
Summary: Netscape will tile any size image. Larger images will appear to be full-bleed images.
Motb<rMary JAn:tl,C'!-.k.ir.m.dft.....Sk-MI.Jocc:b.. pll.u, ¥QA._
P.au l Jar, dnww
T o create a full-bleed photo background, Mark filled in a black-and-white photo with white, in order to ghost the image. Using the Netscape extensions to HTML, he c reated an 1-ITML document, whi ch causes the full image to fi ll the browser's background .
1. Follow steps for creating a tiled background. Whe n you' re planning a tile pattern , any size image may be used. Netscape wi ll repeat the image to fi lllhe background. Follow the steps for creating a tiled background, presented earl ier in this chapter and show n here:
a. Create a tile.
b. Ghost the image. c. Reduce the bit depth. d. Save the image as a GIF fi le.
e. Create an 1-ITML file to test your image.
2. The background tiles as you add content. You will not be able to scroll a nd look at the tiled background until you've added content to your HTML fi le.
206. j Chapter 6
Creating a silhouette on an image background
Summary: Silhouettes are created using a transparent GIF image. In this example, the background loadsfirst when the Web page opens, and the silhouelle can be loaded on top as an interlaced or non-interlaced image.
Paul Jny, drum'l
Tip: See th e Page Layout Tools chapter f or instructions on how to use PlwtoGIF. a Photoshop plug-i111hat will make GlF files transparent.
I n this example, the positioning of the s ilhouette images was a greater cha lle nge than the creation o f the transpare nt GIF images. To position the trans pare nt GIF images down the page, Mark Elbert ex perimented with the YSPACE attri bute in the second image tag.
1. Make your image background transparent (using Transparency). a. Use the FilelOpen GIF command in the Transparency
software to open the GIF file. b. Press and hold the mouse pointer on the background
shade. W hen you let go of the mouse, the background will change to a gray color. This shade is now transparent.
c. Choose Save As from the File menu, and select GIF89.
2. Make your image background transparent (using
DeBabe lizer). a. Use the FileiOpen command in DeBabelizer software to
open the GIF file. b. Select Optio nsiDithering & Background Color from the
Palette pull-down menu. c. C lic k the RGB radi o button at the bottom of the screen .
Photog raphy I 207.
Tip: MacLink!P/us, a well-known translation utilityfrom Dataviz now converts Mac and Windowsformats to andfrom HTML (http:l!lvlvHJ.dataviz.com/Upgrade/upgmlp_home.html).
d. Use the Eyedropper tool to select the background shade you 'd like to be transpare nt.
e. Choose Save As from the File pull-down menu.
f. Select GIFIInterlaced Transparent from th e pop-up box.
g. DeBabelizer will g ive your fi le name a GIF extension.
Save the file.
3. Use SimpleText to create an HTML file.
a. Open SimpleText. Use SimpleTex t or your word
processor. If you use a word processor, be sure to save the docume nt as Text On ly.
b. Create a new HTML document. Start a new document with the following markup tags: <HTM L> <HEA D> <TITLE>Wrapping Text</T ITLE> <!HEA D>
c. Add a body background tag.
<Hlf1L> <HEAD> <T ITLE>Wrappi ng Text</T ITLE> <!HEAD> <IMG SRC- "Mar kT . gi f "> <B ODY BACKGROUN D- "Toron t o_Lg.gi f ">
d. Add an image tag. <HH1L> <HEA D> <TIT LE>Wrapp ing te xt </T ITLE> <BO DY BACKGROUND- "To ront o_Lg. gi f "> <IMG SRC-"MarkT.gif">
e. Add a headline tag.
<IHI1L> <HEAD > <TJTLE>Wrapping Text</T ITLE> <! HEAD> <BODY BACKGROUNO-"Toronto_Lg.gif"> <I MGSRC- "Mar kT.g i f "> <H2> Hoth er Mary <IH2>
208. I Chapter 6
Tip: Microsoft providesfree copie.1· of their lmem et Assistant soft ware for Microso.fi Won/ and Micoso.fi Excel users. The Assistant tools convert Word and Excel docwnents into HTM L-equiva/ent documeltls. Visit f! I Ip ://WIV IV./11iCrosoft. COI II/ I vord/.fs_ wd .h/111 and hllp:llwww.microsoft. com /lnsexcel/ inten letlia.
f . Add a group of nested definition List tags.
<HTI1 L> <HEAD> <T ITLE> Wrapping Text</ TITLE> <! HEAD > <BODY BACKGROUN D-"Toronto_Lg .gif"> <I HG SRC- "Har kT . gif"> <H2> Mother Mary</ H2> <DL><DL><DL><DL><OL>< IMG SRC-"Hand50_bbT . gi f "><IDL><ID L><I DL><IDL><IOL>
g . Insert the ALIGN=RIGHT attl'ibute in the image tag.
<HTN L> <HEAD> <T ITLE>Wrappi ng Te xtC/TITLE> </ HEAD> <BODY BACKGROUND- "Toron to_Lg.gi f "> <IMG SRC- "MarkT.g if"> <H2>Moth er Hary</ H2> <DL>< DL>< DL>< DL><DL>< IHG SRC-"Hand50_bbT .gi f"AL IGN-R IGHT><J DL>< IDL><IDL> <I DL></ DL>
h. Add four more headlines.
<fiHI L> <HEAD> <T ITLE>Wra ppi ng Text<ITIT LE> <lfiEAD> <BODY BACKGROUND- "Toronto_Lg . gif" > <IHG SRC- "MarkT. gif"> <H2>Mot her Mary</ H2> <DL>< DL >< DL> <DL ><DL>< ING SRC-"Ha nd 50_bbT . gi f "AL!GN- RI GHT><JDL> C/ DL ><I DL><I DL><J DL> <H3>Jaret t . guita r. mai n vox</ H3> <H3>Steve Licori ce . gu i ta r. vox</H3> <H3>Mark El be r t , bass , occas i onal keys<I H3> <H3>Pa ul Jay , dr ums</ H3>
Photography II 209.
Tip: NetObjects Fusio11 is a hor new page layout software too/for graphic designers who wantro create Web documents. Founded in November 1995 by Rae Technology Inc. and Studio Archerype (formerly Clement Mok Design), NetObjects, Inc, has introduced NetObjects Fusionf or Windows 95/NTand the Power Macintosh.
Tip: Download a 30-day trial version of NetObjects Fusion from http://www .netobjects.com
i. Add a second image tag.
<HH1L > <HEAD> <T ITLE>Wrapping Text</TITLE> <! HEAD> <BODY BACKGRDUND-"To r on to_Lg. gi f"> <IMG SRC- "MarkT .gi f"> <H2 >Mot her Mary</ H2> <DL><DL><DL>< DL><DL> <IMG
SRC-"HandS O_bbT. gi f "ALI GN- RIGHT></ DL> <IDL><IDL><I DL><IDL> <H3>Ja r et t, guitar , ma in vo x</H3> <H3>Ste ve Li co ri ce. guitar . vox</ H3> <H3 >Mark Elbert . bass . occasional keys</ H3> <H3>Paul Jay, drum s</ H3> <IMG SRC-"Ba ckT2 .gif">
j. Add the VSPACE attribute to the second image tag.
<lt TM L> <HEA D> <TITLE> Wr apping Text</T ITLE> <! HEAD> <BODY BACKGROUND-"Toronto_Lg .gif"> <IMG SRC- "~1arkT. gif"> <H2> Mot her Mary</ H2> <DL><DL><DL><OL>< DL><IMG
SRC-"HandSO_bbT .gi f "ALI GU-R IGHT></ DL> </ DL ><! DL ><I DL><IDL> <H3>J aret t , guitar. mai n vox</H3> <H3 >Steve Lico ri ce, gui t ar . vox</H3> <H3>Mar k El bert, bass, occasional keys </ H3> <H3> Paul Jay. drums</ H3> <I MG SRC-"BackT2 . gi f " VSPACE- 120>
k. Add ending tags. <!Body> </HTML>
210. I Chapter 6
Tip: For informa/ion and ills/rue/ions on how to upload.files /o your flll emet provider's se1Ve1:see rite Image Map cltapte1:
4. HTML tags used in this section.
The tags you see in this list (in alphabetical order) reflect the I-ITML 3.2 specification. <BODY> ...<!BODY>
A tag used to open and close the body of a document. This tag can be used to refer to a background image in the form:
<Body BACKGROUtW· "Toronto_Lg. gi f">
<DL>...<IDL> The de finition list tag is usua lly used for defin itions or shon paragraphs with no bullets or numbering. In this section, this tag is nested seven times in order to inde nt the Mesh Records logo. For example:
<DL><DL><D L><DL>< DL><DL ><DL>< IHG SRC· "Ha nd 50_bbT. gi f "><ID L> <IDL><IDL><ID L><IDL><IDL><I DL>
<H2> . . . <1H2> <H3>...<1H3>
Tags used to enla rge tex t, as to indicate a heading. Lowe r numbers indicate larger type, and the options range from <1-l I> through <1-16>. <HEAD> . . . <IHEAD> A tag used to open and close the header portion o f a document. <HTML> . . . <IHTML> A tag used to open and close an HTML document. <IMG> Used to refer to an in line image, this tag uses the S RC allribu te that represents the URL (location) of the image. For example:
<IHG SRC·"Hes h Wave . gi f ">
T his tag uses the ALIGN attribute (or parameter) to indicate Lhe placement of an in line image. Options include TOP, BOTTOM, LEFT, a nd RIGHT. For example:
<IMG SRC· "Hand 50_bbT.g i f" ALI GN· RIGHT>
Photography 1 211.
This tag also uses the VSPACE attribute, which adds space above and below an image. For example:
<lf-1G SRC- " I~esh Wa ve.g i f " VSPACE-120>
<TITLE>. .. </TITLE>
A tag used to describe the title of a document whkh shows up inside a document's tit le bm·.
212. , Chapter 6
Creating a drop shadow in Photoshop
Summary: Use Photoshop's selection tools and channels to record the outline ofan image. Next, create a dmp slwdow by blurring the edge ofthe shadow's channel image with tile Gaussian Blur filter andfilling the selection with 50% black.
~
Netscope: Wnllpnper ~
Lc.r tt;t~, .lfta. ///APS'a~·--I'Vtb"&~252fH [ 'tlft"1/'SNd.;,-.,.hl'.nl
'wN:#s t..v" l 'ln':·t·s ccou l ~.· I I I ti·t S.W"'Coh ,,., E>'nt-~ 1 l\tvr~OI.J9'
Mother Mary Jar<tt, ~tnltor, ololln ><>X s~ uoor~o<. ~· ...., 11-.lark Elbert. u..... o>OCIUi>ll41lt.e7·
·1a.
1c.
® n:~ .:.) G:~ ...; u:~
1b.
I n this example, Mark created " fuzzy" drop shadows for photo silhouettes in Photoshop by using channels. Because he planned to make the background of each silhouette transparent, Mark minimized the amount of"fringe" from the fuzzy drop shadow by starting with a gray background that was very similar to the gray in the browser background.
1. Set the image background color to gray. a. WiLh the Magic Wand tool, select the background of the
object that will have a drop shadow.
b. Double cl ick the background color sample i n the Toolbox and type 20I, 20 I , 201 as an RGB value. This gray is very
close to the browser background.
c. W ilh the background sti ll se lected, press the Select key
to fill the background wi th the speci fied shade of gray.
Photography j 213.
Wind ow
2b.
llllllil!l!l!ll
New Wi ndow
··-· Zoom In
Zoo m Out Zoom Focl or·..
Sh ow Ruler~ ICR
./Bock .P ICT 11 : 11
Sho tu Orushcs Show Op t mns
!. hOW J'I[kt:l Show Sw a t ch es Show Scrn trh
Show l otten
Sho w P ft lh\
l llldo ln ru ShoiU Commnnd s
2c.
·
I·P Pale tte Options...
~
..
Oupll,o te t honnrl·.. Oel l1tc Ch a n nel
Cha nnel Option\..·
9·'' - - - - - - Uldt>O Olp hD··· Split Ch nnn el s Men te Ch atul el 'l .··
j
[] @
2d.
[:" il
1-'-L Pale tt e Up lio ns ··.
NeUJ Chnnnc l...
Oele l o Channel
Channe l Op11ons ...
Ulde o Alph a ·..
-
Spill Channeh
· "'1 e1ge Chonneh ...
2f.
214. I Chapter 6
2. Create two channels. a. If it is not sti II selected, select the backg round of the
object that will be shadowed.
b. Choose Inverse from the Select pull-down menu .
c. With the object selected, se lec t Pale ttesiShow Channe ls
from the Window pull-down menu.
d . Press on the Channels pop-up menu, and select New C hann e l
e. Give the channel the same name as your object.
Cllonnel Options
Nome:J~h_a_n~q~---------------
Color lndlco t os: - - - - - - - - - - , ®Masked Rreos
0 Sel ect ed nreos
0 01
( Concel ]
Opoclty: ~ '7.
2e·
f. To create the second channel, whjch wi ll be the shadow c hannel, select Duplicate Channel fro m the Channel popup menu.
g. Name this c ha nnel shadow.
Oupllco te Channel
Duplica t e: hond As: rJs_h_o_d_o_w____________________
,- lleslinollon --- - - - - - - - - - - - - - ,
I ,.. I llocum ent: BockT2.gtr Name: IL-________________,1
D lnuert
2g.
3a.
lli1IJII Select Win!low
Lest Filter :!Cf
Olur Distort Noise l'iuel ote Re nder Sharpen Styli ze Uid eo
I
~ ~ ~ ~ ~ ~ ~ ~
Custom
I lligh Puss .. Mammum M ini111um .
3b.
lli1IJII Selec t
Offset X F I
I
lllur
Distort ~ Blur More
Noise
~
;
:
Phrel a te ~ Motion Olur...
Render ~ Radi al Blur ...
Sharpen ~
Styli ze ~
Uid eo
~
Oth er
~
I
4a.
Gaussian Blur ~~-
~ OK JJ
Ca n c e l
!8J Preulew
Radius: ~ phrels
4b.
3. Use the Offset filter. The shadow will need to be offset to the right and down at least 20 pixels in each direction. The offset filler will make this change.
a. Select the Shadow channel in the Channels palette.
b. Select OtherlOffset fro m the Filter pull-down menu. c. Select Repeat Edge Pixels. Fill in 20 for Horizontal Pixels
Right and Vertical Pixe ls Down.
d. Click on OK.
-
Offset
Hor iz ontal: ~ phcels righ t
Ucrticol: ~ phcels d own
r- Unde fin ed Areas -
0 Se t to Decl<ground
® Re pea t Edg e Pluels
0 llJrep nround
fl OK JJ
Ca n c el
!81 Preuiew
3c, 3d.
4. Gaussian Blur creates the "fuzziness." a. With the Shadow channel still selected, choose BluriGaussian Blu r from the Filter pull-down menu.
b. Type in 6 pixels, and click on OK.
4.
Photography /215.
~WindOIU
Rll
ICR
Color Rnnge...
r···u..., ..
I
Mmiii!J
~
~n!J _ _~
G~ttOmI·IlItu
""j
1---· - - -
l~~fli~·'U
5a,5a, 7a.
-= Lo ad ~e let lion
r - ~ourc c
, Document: I Boct.PJCI .., ) Channel: ( h and ...
O lnuerl
CEJ)
( Cnncc t j
1 llt·e· ntlon @ N f>IU ~C IUI l iOn
Q Add to Selecllon Q Sublroc t from Selection
0 l n le netl with Sclecllon
Sb,7b.
Lood Selection
r- Source
I I Ducumco l : n nck.P ICT .., Ummli!J. ~..~. tu·sInd·HI· I:
r- 01JCf OtiOII @ NCIU Sclet lion
0 IHid 10 \l'll·r Unn O \ ulltrutt lrom \Nerllnn
Q lntrn('CI Wtlh \iPIP(\1110
CEJ
( Cancel )
6b.
Ua ckB.I' ICT l lnliOII, I: I t
5. Copy the hand to the Clipboard.
Usc the Hand channel to select the hand and copy it to the Clipboard.
a. Choose Load Selection from the Select pull-down menu.
b. Select Hand from the pop-up menu that foll ows. c. Select Copy from the Edit pull-down menu.
6. Load the Shadow selection and do a fill. a. Choose Load Selection from the Select pull-down menu.
b. Select Shadow from the pop-up menu that follows.
c. Choose Fill from the Edit pull-down menu. d. Select Black from the Use pop-up box on the Fill
dialog box .
e. Type 50% in the Opacity box, select Normal in the Mode
pop-up, and click on OK.
-~ Fill ---
I Contents I -,1 Usc: 'l"""o'""t'-oc-:k-- - - - -...
H OK D
( Concet )
r- Blendi ng - - - - -- --,
0 % Opocily:
Mode: r1--.N.~or=m=a"t -:-,---=..=. -1
0 Pr e~erue lransrro rentrJ
6c,6d,6o.
7. Paste an original of the hand on-top. a. Reload the Hand c hannel by choosing Load Selectio n
from the Select pull-down menu.
b. Select Hand fro m the pop-up men u that follows.
c. Choose Past from the Edit pull-dow n menu. The result is s hown in Figure 7c.
7c.
216.j Chapter 6
8. Reduce the pixel depth (in Photoshop). When Mark finished editing the image in RGB Mode, he
experimented with Photoshop's Indexed Color Mode to see how far he could reduce the pixel depth without altering the color. (Note: See the 11ext sectionfo r instructions on how to reduce the bit depth in DeBabeli:e1:)
l§@tj Image
Bitm ap
..1 RGB Co l o r CMYK Co l or l ab Color Multichannel
I ____,l _ Lolo_r l a ble-...
CMYK Preuiew Gamu t Warniu y So.
a. Select Indexed Color from the Mode pull-down menu.
b. Experiment by selecting smaller bit depths with and witho ut dithering to see how the color in your image holds up. If you don' t like the color, select Edi t!Undo or press Command+Z.
Mark was able to reduce Lhe image to a 6-bit color depth without a noticeable change in the color. This made a signifi cant c hange in the file size.
l ndeHed Color
- Reso l ution
0 3 bits/ p iHe l 0 4 bits/ piHel 0 5 blts/ piHel
® 6 bits/ piHel
0 7 bits/ pi He l
0 B bit s/ pi Hel
r=J 0 Other:
colors
([ OK n
( Cancel J
- Pa l ette
0 Eu act 0 Uniform
® Adapti ue
0 Cu s tom ... 0 Preuio us
- Dither
ONone
0 Pa tte rn
® Diffu si on
Sb.
9. Reduce pixel depth (using DeBabelizer). a. Open your RGB image in Dc Babe lizcr.
b. Select Change Pi xel Depth from the Palette pull-down me nu. Equilibrium Technologies recommends that you always select dithering whe n you reduce the number of colors. Although you can change the amount of dithering by se lecting Opti onsiDi thering Options & Background Color from the Palette pull-down menu, DeBabelizer's default setting is the amount Equilibrium has de te rmined is best.
Photography j 211.
~Mht Option\ P&letl e Info Pole lie
Sulph
Conucr t to BOUUGruy\Cele ·
Remo11tt unu1t>d o Dupllte lu
Reduut Colors...
Ml
~el Pnlelle 0 Remep Phteh ...
Bac t:gJountl Remoun t... Moc:lnii.ZO l'nle l lc Sort l'olc lt e Super f'nlet l t
BOW Ordered 0111111!1
Mef'ge flale lles ...
EttuDIIZt' Pnletl e
,.
llh i Oflltllll...
HSU Con h oi.··
tnuell Colon
Gun Control ···
'fS( Hot Pltcel riNer···
Chenuch
)>
tnten\l ltJ I) Contro,t, ..
Sheue - Outllne
,.
9b.
I bit · 2 CIUIII\ Clltllll!red I bit · 2 rolnl\ 2 bl11 · I (Ofan 011hllfPO
2 hlh · ·I t olou:
3 bit~ · 0 I n101 S llilhCIIlll 3 lllh · 0 cui.,,.
-t blh · 16 tOIOI'\ Ulll ll'l ti'U 4 blh · 16 colu o' S bltl · 32 colon ounrrro 5 blh ·l2 toluu
6 hlh · 6 1l fO ifi1S llllhCIUII
11·11\ I'~ 1 ol·lt\ ~ lhlllf! 1
r.,., lfuh ·h
i;Jf .,
8 blh · 25C.IOiuu
Ito nth ~n: Ht.B ro"u .... ,,,
16 hll\ · l2K RGO coluo'
24 b lh · I 7 Million R(jll I OHJI
l2 blh · 17 Million AGB · niD
Non - lntertored
Non - lnt erl ace ll O· Tran 1par~nt ln tertn r ed I) Trnni tln r ent 11
10b.
O!.llalo CUI IM(i JPCG , ,Jr If
So ue As GIFU9..· Jt~
Quit
I30
11a.
11b.
Stan by reduci ng your image to 128 colors and look at the image. Tf you don't l ike the change, select Undo from the Edit pull-down menu or press Command+Z. Keep stepping down to fewer colors to determine w hen the color change becomes vi sible. Mark was able to reduce the palette to 64 colors (as shown in Figure 9b) withou t a noticeable change in the image.
10. Save the Image.
a. Select Save As from the Fi lc pull-down menu (in Photoshop or DeBabelizcr).
b. Select CompuServe GI F or JPEG from the pop-up menu. (Note: Photoshop 3.0 does 110t add i11terlacing to GIF images. fllterlaci11g gives the Web visitor the impressio11 ofafasrer doiVIlload by quickly paillfing the image in low resolutio11 a11d gradually filling it i11.)
To add interlacing to a Photoshop GIF i mage, you' ll need GIFConve1ter by Kev in Mitchell. DeBabelizer al so
has an option to save a ti le as an Interlaced GIF. (Note: GIFCom·erter is available on the CD-ROM in the back ofthis book.)
c. Give your image a name, and try to keep your fi le name
to a minimum of eight characters (no spaces) with a file
extension such as .GIF. .JPG. or .JPEG. (Note: File exrensio11s IIIllSI be limited to three characters on the DOS/IBM platform.) Removing vowels from the fi le
name helps reduce the number of characters. M ark used DcBabel izer and chose Interlaced GTF as the file format for saving.
11. Make the background transparent {using Transparency).
a. Usc the Fi lciOpen GJF command in the Transparency softwar e to open t11e G IF fi le.
b. Press and hold the mouse pointer on the background
shade. W hen you let go of the mouse, the background wi ll change to a gray color. This shade is now transparent.
c. Choose Snvc As from the File menu, and select GlF89.
218. J Chapter 6
Open Gl F...
:l0
Clo se
:l W
Quit 11c.
Edit Pal ette :lN :.:r
Open Cha nne ls ... Ac uire 12a.
12. Make Ihe background transparent (using D eBabel izer). a. Use the FileiOpen command i n DeBabcli zer software to
open the G I F fi le. b. Select OptionslD ithering & Background Color from the
Palette pull -clown menu.
Sc r i p t s
Dit her Orltlons 0' UoctgruuncJ Color
Otf·Jit
®1 Ollhcr 1.: 0 0 0 0 0 0 0 0 0........25.......50.......75...... 00
I Dither Method: Olffu\IOn
·I
D 0 Don't dither llnr:kground Co lor 0 Remtlp nctr·ljiOUnd tolut I O r olor lflll(·ll
Dnckground Color:
0 llnckground ne rno uol's "fill Color·
0 Mos t popul nr col or
0 Color lndeH:{!!J
1· ® AGO ualue: 116 lz·nj-:co1or Pl!ker ...)
II OK ~
l ( Contcl
l ( ltclp ...
12c.
12d.
12b.
c. C lick the RGB radio button al the bottom of the screen.
d . Use the Eyedropper tool ro select the background shade you 'd like to be transparent.
e. Choose Save As from the File pull-down menu.
f. Select GIFITnterlaced & Transparency from the pop-up
JalJ········· box.
Non-int erl oc~e'dd_______
Interlaced
Or. Ha lo CUT
Non - inte rl oce d ll' Transparency I MG
· ·· i ·
· ··
JPEG, JF IF
12f.
g. DeBabelizer will give your file name a G IF extension.
Save the fi le.
Photography j 219.
Tip: VisiJthe Submit It site andfill out a fonn Jhat is part ofa free service to list your sile with 17 online directoriessimultaneously (lltfp://submit-it.penualink.cmlvsubmit-it).
13. Use SimpleText to create an HTML file.
SimpleText from Apple Computer is a useful tool for c reating HTML fil es. Tt's small (77 K), it's di stributed wi th System 7.5, and it saves HTML text files in the ASCIT form that's required by browser programs. Microsoft Word users can save a text fi le as Text Only or ASCll.
a. Open Simpletext. Use SimpleText or a your word
processor. If you use a word processor, be sure to save the document as Text Only.
b. C reate a new HTML document with an <lMG> tag.
Start a new document with the following markup tags:
<HTHL > <I·IEAD> <T ITLE>Wr applng Tex t </TITLE> <! HEAD> <BODY > <1116 SRC-"Back. gi f" > <! BODY > </HTHL>
c. Add an image tag.
<HTHL> <HEAD> <TITLE>Wrapping Text</T ITLE>
d. Save the tile. Save the document in Simple Text,
TeachText, or your word processor. If you're us ing a word processo r, save the text as ASCH or Text Only. Give the file a name and add an .HTML extension .
<BODY>
e. Test the HTML document in Netscape. Open
Netscape, and the n ope n your document by selecting Open File from the File Pull down menu. Make sure your HTM L document and your image aare in the same directory.
220. , Chapter 6
Jane Greenbaum's tips on creating a drop shadow in Painter 4.0
Summary: Use the Create Drop Shadow command in Painter to create an a11tomatic drop shadow.
-~
NOIHO o: Mftrlll n
t.oc.. tlo» , ,... ://1\.t~ :t~H.."ii~"''/IJIJ/~ ,...10wt w~ ·'t7W'Jin¥t),111'1'rtl
II lc:.:sE:J I l I 'W'h··'· ttt~, fl...-~ut'·t."'II ., J io.,,..,.,~o~~, ""'84111'('1
$.)1\-.t.....
D rop shadows arc a one-step procedure in Painte r if an image is a floater. Floaters are elemems created in a Painter document that be have li ke objects. They are d iscreet images that will not interfere with other design e leme nts. Tex t e le ments c reated in Painte r are considered to be vector-based objects or shapes and are therefore considered to be a type o f floater. Image floaters behave like objects, but unlike shapes, they have pixel information stored as a mask instead o f vector-based stroke and fill informatio n. In this section, Jane creates text with a drop shadow and the n uses similar ste ps to create a drop shadow around an image that has been saved in a Photoshop layer. An image saved in a Photoshop layer w ill automaticall y be treated as a fl oater in Painter. (Note: lfyoll wish to follow the steps in this section, lookfor Jane 's image on the companion CD-ROM.)
Photography J221.
Painter 4 .0 .3 1a.
1d.
1. Create text with a drop shadow.
a. Open Painter.
b. Select New from the File pull-down men u.
c. In the dialog box that follows, type 600 (pixels) in the
fi eld labe led Width, 600 (pixels) in the field labe led Height, and 12. o (p ixels per inch) in the field labeled Resolution. Cli ck on OK.
...( lOIII!!
· .i.·
'""""'"" :1
Sauf' ··Rhul
&eii iiiO... ~ ~
1c.
'·te\"I·P·· ruat...
Qull
1b.
c,.,.., c~
I
d. An untilled document wi ll open. e. Select the Text tool. f. Select Controls from U1e Window pull-down menu.
g. fn the Controls Text dialog box that follows, select
Ot her Font from the Font pop-up menu.
1e.
IIIIJe ,1111111111
:Mit
n.,uupP·ttll"
loam In
M·
zoo1n a.t
/eo~n Ioiii ~, · .,.
.;' I IIOh
.,x
Nl
IJIIUIIfl l
.... 1\rtMolffMII ... ob t>rh
totor\et
..··N>
M··· \uun
toggle X"
(111'11. &11 . 1011. .I Uttlltled·l · IUI1.
1 f.
1g.
222. , Chapter 6
lfiiJIIHt i GIII
(( lro~urnloolhk hlr&Cond
,...,,,... Jr· nk:UI£ollllt
NctueiMa ll·ld ·
l!'~ll'OII IIU ·
Mt rr.nl ltn hlhk tt.·u!IO!IIiqu~ I f ranllr · looll1k looUtDIIQUe llellerf.oiiHr \ldn11d
lh.
Untlllelt· l · 101':.
Marilyn!
1k.
h. [n the C hoose Font dialog box that follows, select a font,
a nd click on OK.
i. Once you have selected a fon t in the Controls Text
dialog box, use your mouse to move the Font Size slide r to set the fon t size to 24 points.
j. Put the Contro ls Text dialog box away by clicking on
the close box with your poin ter arrm.v.
11 .
1).
k. With the Text too l still selected, c lick on the untitled
document, and type Hari lyn.
I. As Painter c reates ind ividua l text shapes in the untitle d
documen t, each letter will be represented as a separate fl oater in the Objec ts Floate r List as shown.
m. Click o n the Group button in the Objects Floater List. n. The list will colla pse to one·Obj ect Floater labeled
Group I. The object should be shaded, indicating that it is selected.
o. Jf the Group I object in the O bjec t Floater List is not
selected, click to the right of the object's name to select it in the list.
1m.
11 .
ln.
Photography 1 223.
[ l . .l t DI OJI ~lilldiW - X/
t!NIII j \Ofi_.IP It· hiiOt
". .... (lmh l l
h tlfiCelllltiOI
r.u,
..
' '
hol·tk·
""!!:!!''"" 1p.
p. Select ObjectsiCreate Drop Shadow from the Erfccts
pull-down me nu.
q. In the dialog box that fo llows, type 10 in the fie ld
labeled X-Offset, 15 in the field labeled Y-Offset, and 45 in the field labe led Opacity. Click on OK.
0 (011111\fl 10 OIUI II )Ier
fllllna: ~ PIHI!h Allgii!: ~ Tai'IMU ~ 't
lt·nui ; ( I J
1q.
r. A drop shadow will appear.
Marilyn
I 224. Chapter 6
ldll £11111h
,,,,. ·"·" ."'ew...
Oprn._·._
Clou t
""
[II I lii
U o·u~ ~ourte ·
S.UI
X\
fl iiU I!I I C. l l nlo.- K l
PIQ!l~flhiP-·
....Print···
··
2a.
1r.
2. Save your image.
a. Select Save As from the File pu ll -down menu.
b. In the dialog box that follows, se lect GIF fro m the Type
pop-up menu.
c. Type a name in the fi eld labe led Save Image As, and
click on Save.
C l11"111K tl~~~====~--~ ~
I '*'ttop I ~
2c. 2b.
01· f1111lrn II ltta IITUUJII l i lt ratrgedwllhta ecMVItlage r Wh l n t iUI19 1111 U\1 ' h H m e t . 1111* &I IUH t o \ OLII I h i
tahiiOllllld noet·n at lnclf'l··ndeat objec h ,
2d.
I~
Adobo? Photoshorn3a.
d. In the din log box that follow s, click on OK.
e. In the Save As GIF Options dialog box that follows,
accept the defau lt settings by clicking on OK.
'It \1118 IJh f}ptJO A\
"1\IITi bCIUI [OIOI·:
0 " Lolon O ltolen C t 6{11;1H 0 J2 CIIDft @'"fllllll Q Utl l tlllll\
01~h t o lo n
Hlu Cplllnt:
@Quanuze t o N·orut Ca to· C DIIIu:rC·t···
"'"''1..-elly:
0 Oulput hnn\perrncu
@ IIOt ~IJII;IU!IIJ h II llHlJ ~lliU
·-·- If' 0 .,.. '-1Jtn111111 II {rltl
O NC\1 "1111' file
O CII,......,op lile
2e.
3. Create an image with a drop shadow. ]mages saved in a Photoshop layer are automatically treated as a floater in Painter. Although Painter has selection tools that may be used to create a floater, the selection tools are not as easy to use as the comparable tools in Photoshop.
a. Open Photoshop
b. Select Open from the Fi le pull-down menu.
c. Select a graphic in the dialog box that follows. and click
on Open.
,l.i,O..S,.P
u
''w" .. .I ~~~
\tw e u liiiJI,
R~ll('l I
Acquir e lHJ)OII
ru (' ln1u...
.,. Pcllj(' \(0 \111· ·.
Prml
· Pre f··rcnle\
Qull
-~
3b.
~ 3c.
Photography j22s.
d. Your image will open in a Photoshop window.
e. Select the Magic Wand tool.
f. Click on the solid background.
g. The background wi II be enclosed with "marching ants,"
indicaling that it is selected.
3d ·
·3e.
[01"'1,111 IIUil, l:ll
II
226., Clwp1er6
.......
Ill
X
"'OID
XI
f ulorlllolll"
f U HI I!r ... Mlllflly M " tlltl
. .
3f.
3g.
h. Select Inverse from the Select pull-down menu. i. The image will be selected instead of the background.
3h.
,,, ., ll'ili:.Moda lfuQ· ·1 VnCio l nutru
ttur"
.,.
,... , , 1ntrt
l" u lr t e·t"'' Clear
1111... \t11to: e ...
[ IIIII
,. t ~o·· ll 1111· ··· ~·
r11lll h h PI fl(tlie n ·
(h·IIIU· J'.-tlt'lll l i te \aDptht l
3).
3 1.
j. Select Copy from the Edit pull-dow n menu. k. Select Paste Layer from the Edit pull-down menu.
I~'1 1CM imo;e l
v · uO Cepy
Xl
hi
··
Copy
XC
' '"'I! Po tltlnto
xu
ut.,.,,._.,"'lr
r\10 ' LI ~ ' "''
3k.
"i()tet·l er
P.. nlnt: lcatn
Op11111: ~.f1 Modr! P.,Oultl l
·I
QGr··up W.llt P'rrl'lotl\ I I'll!'
t:::!!:J
( I IDU~I )
31.
IIIIIJIIthl MoGI
.. ."O".l'l"t.'A.'·.·..·..,. ·"·
(11\f'
·
\"llnll[ll py ..... NPI·t·tl
fll l' lflfiM.
'''"'··· ., 1"1111\t iU;t....
I. In the dialog box that follows, type a name for the new layer, and click on OK.
4. Save your image.
a. Select Save As from the File pull-down menu.
b. In the dia log box Lhat foll ows. select Photoshop from the Format pop-up menu.
c. Type a name for your image. and cli ck on Save.
d. In the dialog box that follows, click on Replace.
~ ·w
QED
~ I·.., DI
4b.
["""'
ill@;·.,\ IIOit m t ll l t\!
ronn111:! r ho l n hoi· \ .0 ..., I
C) L II M~u iU.....
~ ~ ~ ( .... D I
~
r:E:J
4c.
llt-phiii'Uih iiii!J t ~(O INI , IH~
4d.
5. Quit Photoshop.
a. Select Quit from Lhe File pul l-down menu.
. IIIJ:I-rnu "''"1t!
rhu··
lit
P l~ntt.M
l "' .h...u...e ac··u.·
..... :
Ur In to_
"ainter· 4 .0 .3 6a.
Sa.
6. Open your image in Painter. a. Open Painter
Photography 1227.
l dll llltll
I
b. Select Open from the File pull-down menu.
i::.. ·
~:·::..... .I I
c. Select your graphic i n the dialog box that follows, and
cl ick on Open.
. . . ., , \QI,IP
\
:::~::· :1
illfHlll
·
.:·:""" .:
I
I
d. Your image w ill open in a Painter wi ndow.
D l!! . r=--;;1f"J:;;C~ot~..~.;1-~-:co::lo:::,=._:,':'.,:_-,-;i=::~~~~ ,
~ ISO bij 4~01'1Meh
~ 1t2 K fiiiiU\hDp
6c.
228. I Chapter 6
6d.
MU:I! MOUir .· . . . dk t · l t H PIIIIOit wet r e;nl T,.,utuj l'llll"l l(f ~~~ PftiU!I Colo t
Rnnntallon\
7a.
7. Enlarge the canvas size in Painter.
a. Select Canvas Size from the Canvas pull-down menu.
b. In the dialog box that follows, ty pe 100 following the
word Add in each of the fields used to increase the
canvas size.
r. .. ,, n \ lu
(U IIt lll ~li fO
Ulldtll: ~s· ptaeh
l1!·lyhl : <1~11 rh· t~ h
I
I
I II
ClhU h 11 11 11
p i:Hih loDIItum JMMt'h IOII!Jtll
II
CKJI l<oowot l
7b.
8. Zoom out.
a. Select the Magnifying Tool.
Sa.
..
COI ...,I .IIJ · !lOS
b. Hold down the Option key, and click on the image.
c. The image will be reduced from LOO percent to 50
percent.
9. Select the image in the Floater List.
a. If the Objects Floater List is not in view, select Objects
from the Windows pull-down menu.
b. In the Objects Floater List, click on the image as shown. c. A rectangu lar selectio n will nppear around the image.
Sb.
tlti!I PIIt ltt' ·
aM
( le altttpPI..IIP \
( ll\1110 111 / a omOut
,.,.. ,.. r~· '''"',
.I IOih l r u1he \
....lilt MGI IItloh
...,.,
"'Cenlrah h ler"t
·"·'
9a.
9b.
(OIH I,IIr · ~
·
Apptg \ 1u1e u ll'flure.·. x t
GlaU Dh i Ot U DII. ..
·:
'"'-l oa·I Ce nlr ul
\ urfotfi ( OI\1r al r oun
l\olerh e
······ ,,,___
lOa.
9c.
10. Create a drop shadow.
a. Select ObjecLsiCreate Drop Shadow from the EtTects
pull-down menu.
Photography 1 229.
0 [ l~ ll j!Ut t o o n& 11111'!1
H1dh11:D~ .I II~Hilh
...gfr. . ..... .
INnne u : ~ ~
~~
1 0 b.
b. Tn lhe dialog box that follows, type 10 in the fie ld
labe led X-Offset, 15 in the field labe led Y-Offse t, and 45 in the field labe led Opacity. Click on OK.
c. A drop shadow will appear.
u rhr.ru · ~us
, ____ 1
I
I .L..._..................____::
·
10c.
11. Deselect the selection rectangle. a. Select Dese lect from the Edit pull-down menu.
b. The selection rectangle will disappear.
IIEJIIItii H h ( OUO\ \Upu
Ut1da l rral r Oro' Uoct.w X l
'"'' r. ·llu
.,.,
rut
"' ·
(OP!I
JI C
P(n l e
t
llrtlf
\ eltl l All
K ft
lltlo-itff IIDI'I I lllllll
l'tiii PI IlriCCil
11a.
11b.
230. , Chapter 6
lett! llf~th
hue
IIU
....... ..I Rewftl
f-
-
Al q ult ll
·
[MpOtl
·
P· 'J·\etu··-
h l at - .
··
Ou tt
-., J
12a.
let rotn. ·I
!~"" ' "'
c: t eMM!tll - .
~ ~ ~ ~
III H
~
rn r Pill
~ lt":E:J
.fPhDIO\h op ].1 ·
....f'nOIOt hl p1.0
~:'ott'
hu~ "'1nk ._.,.,
let qll
...Jl'l "
Pt ranld
12b.
12. Save your image.
a. Select Save As from the File pull-down menu.
b. In the dia log box that follows, select GIF fro m the Type
pop-up menu.
c. Type a name in the fie ld labe led Save Image As, and
cl ick on Save.
d. In the dialog box that follows. c lick on OK.
e. In the Save As GrF Option s dialog box that follows,
accept the default settings by c licking on OK.
IMatlhJa,gll
ttP«t
'"
·I
12c.
···to·· \ave Jh 1011
,.~tit bi t 1111 Ca ton: IIUIII'I ing "11'tltod :
O ·ll ttiU"
Q u IOIOn Q t6Colon OU I O'on
® ·· cnton
O t 11 Cotort O:»~· rol ar\
(Jlauaoll u t tONil nl1\l [ 1)1(11 0 Oilher l oton
h .n·····nc·: ;) luiJUI lrarnpnrt!'ftf·
@n·llltO·u·di\IJ'·J·III,rll·l Q t· "·ltquum.I"II·IH··u
M t U OIIIIOA$;
lto. ..;'c l
Q lntetlttf'Gtr lllf'
I "'
t·upO~ II. .I\: 0-KU"'1l l'llle
12e.
ltiP ROlli I I'!" In tl'li \ lllt·q~ lfe
f'ftCHglti iL'Itl'l ! be (IP"I\ IIIJir
,.ut"IJ ti'llfn
I I i t'll' t ~ r mat ··
Ullfiii\AIH I OUUI! IIIft
UftUIII\ftA ci iJOGf t'I \ IU lntl~p,ndut oll)el l \ .
12d.
Photography j 231.
Creating a blue duotone with Photoshop
Summary: Use Photoslwp 's duotone presets to create a blue duotone.
Em!IlJIImoge Bitmdp
lluot one In deHed Col or... ./ RGD Color CMYK Color Lab Color Multich annel
LOIOI filbl e ...
CMYK Prcuiew Gamut w arning
lb.
Discord col or lnlormotlon?
U OK J)
Conce l
lc.
Em!IlJII IIII'I!JC
.Ulllllllll ..·
.; Grouse ol e
I '
I ndeued Color RGU Color CMYK COIOI l8b COIUI MU I I I Ci l 8 n n e l
-- ---
LOIOI l uble ...
lMVK l' l e LHeW b iiiiiUl llldrflllllj
2a.
Duol cuu· n tlont
... DD-=.... DO ,.. ,DOL-
I I Dlltt Pfl·ll t OIU\
2b,2c.
I
232. 1 Chapter 6
I n pri nt, a color duotone is a prim made from a monochrome original with a second color added for greater detail. T he technique is a way to add color to an image wi thout using full color. For the Web, thi s means a smaller file size and faster download ing.
1. Discard color from a color original. a. Open your image i n Photoshop. b. Select Grayscale from the Mode pull-down menu. c. C l ick on OK when a dialog appears that asks if you're
sure you wan t to discard the color information.
2. Select a duotone. a. Select Duotone from the Mode pull-down menu. b. Select D uotone from the pop-up menu. c . Click on L oad to load th e Photoshop duotone presets.
le I Adobe rholo shop 3.0 y
· Goodies.
(
D Ptug- lns
c:::) RPS Orlue''" I.JilCI
I Desk top
( rind ...
I I f1nd Rq·tn
Cnntol Dpun
2d.
· I I ~ Duo tone Preseh
I ''
CJ Qundtonos
CJ lrltones
CJ RPS Urluo·.. 1 )o<l
I ( Deskl ot>
riOll ...
I ( Cnnccl
t L - - - - - - - ----'"-"
Upon J)
2f.
leJouotone\ ... I
CJGro y/ Dinck Duotones
I
I '
Cl Process Ouotoncs
,. c:> RPS Orlue'.. 1jc<l I [ De·ktop
rind ..,
I rind R·taln J
I Con col
In
J Open
2g.
d. Find lhe Good ies folder inside the Photoshop software folder, and c li ck it open.
e . C lick open lhe Duotone Presets folder.
le: Goodies · l
CJ Dnnhes & Pnlterns
CJ Collbrotlon CJ Color·t)olc t hu. CJ Command Se ts
~ nrs Orlue""
{t
ljNI
I I IIOSki Cjl
rind ...
I I 111111 R~olu
I n ' - - - - - - - - - - - ' - ' -1}'
Cance l 011 0 11
2o.
f. C lic k open lhe Duotones folder.
g. C lick open the Pantone Duotone folder.
h. Mark selected Blue 286. When he applied thi s by clicki ng on the OK button on the Duotone Options dia log box, he decided he wanted the blue to look more saturated.
lo ·I PRNTON[fl lluutones
j!J blue 072 bl 3
o()
J!l blue 072 bl 4
l!l blue 206 bl I
l!l blue 206 bl 2
I
IJil biuo 2 06 bl4
,..
I!J iu own 464 bl 1
l!l hruwn 464 bl 2
L!l brown q6"1 IJI l
IE brown q6"1 bl ·I
li
c=~ RPS Orlue'.. ljt·t t
I ( OC<ktop
rtnd ...
( rmcJ llqu·n )
I I Conccl
[ Open ~
2h.
i. To adjust the amount of b lue, Mark clicked opened the duotone c urve.
Duo tone O(IUOn s
I rupo: Ouol onu
I I [2] Ink"
lnk5: DQ D11 1._r==-- Ink 2:
·l
~unm~--~
t.P:. n::~~I.:.ON~£:.:2:.:B.:.6.C:.u:._____ _J
r::EJ
( Cancel
( load...
~
lnki:DD [___
I tL_-====:::zl· · ·- J Ol!erprint Colors...
21.
Photography I 233.
2j1.
2J2.
Image Bltmop ... Groy scal e ./Ouot one... I ndeued Color
' I II
CM YK Col or Lob Col u · Multlcnannel
lO IOr l liOi e ... LMV I\. t'teUII:u.o
Gomut Warni uy
3a.
D!J
( ttii"UI
~
~
CY'l
\ [NUl)
I··..·- I
( h 1111t-. j
j. By pushing the curve up (shown at left) and to the left with the mouse, Mark altered the amount of blue in the duotone.
k. He reapplied the duotone informalion by clicking on OK in the Duotone opti ons dialog box.
Duoto ne Options
f!JilU: I Duolono ·I
[21 11 1~1@ - - - Ink 1:
011 lnk2:
LI'.O::;N.:.I:.I:I:;N.:.[:;.2::.0:..6:...C:.I.:J..- - - - - - '
D O ~... J:
r- ---=-===~~
In~ 1: DO L - - - - '
I nuoqu1nt Cnl ors ... )
2k.
3. Save the image as a JPEG. a. Choose RGB from the Mode pu ll-down menu. b. Select Save As from the File pull-down menu. c. Select JPEG from the Format pop-up menu in the Save dialog box.
3c.
I 234. Chapter 6
le9 Ouo1ones ... I
~ RPS Uriu e'"
~
DEI:] ( Oe·k l op I (New 0 I
SauD l hh: document os;
IPos ler l .j pcg
rormot : f JPEG
... J
( Concel )
Souo
3d.
J PEG Options
- Image Quallly--
O low
@ Medium Q lllgh Q Manimum
--,
(D O) I Can cel )
3e.
d. 1Ype in a file name, and use a .JPEG or .JPG extension.
e. Select an image quality in the dialog box that
fo ll ows.
4. Create an HTML file to test your image. a. Open SimpleText. Use SimpleTexl or your word
processor. Jf you use a word processor, be sure to save the document as Tex t On ly.
b . Create a new HTML document. Start a new document
w ith the fo llowing markup tags:
<HTML > <HE AD> <TITLE>Duoto ne <I TITL E> </HEA D> <BODY>
c. Add the image tag. Referen ce your JPEG image with
the addition of an <IMG> tag.
<HTML> <HEAD> <TIT LE>Duot one</TITL E> </ HEAD> <BODY> <IMG SRC - "Posterl.jpeg "> <!BODY> <!1Ht1L> d. Test the HTML document in Netscape. Open Netscape, and then ope n your document by selecting Open File from the File pull-down menu. Make sure your JPEG image and your HTML document are in the same directory.
Photography 1235.
Creating a Super Palette with DeBabelizer
Summary: For 8-bit images that you plan to put on the same Web page, create a Super Palette in. DeBabelizer because browsers can only read a total of256 colo rs.
236. / Chapter 6
D eBabc lizer's S uper Palette fealllre is desig ned to create the best palette o f 256 colors for a group of images. Although Equilibrium didn ' t specifically design this feat ure for Web graph ics, it he lps We b arti sts find a palette that ca n be used fo r a group of photos because browsers will only read a total of 256 colors per page. (/Vote: This sample demonstrates how to manually create a Super Palette. For information on how to use DeBabe/izer's batch mode and scripting f eatu re to process several images at once, see the steps in the Video chaptel:)
1. Organize your images. a. Create one folder for the images d1at have not had the
Super Palette applied.
b. Create another folder for images that have the Super Palette applied, and inve nt a naming convention that wi ll re mind you d1at the Super Palette has been applied.
~Mi se Scrlph
ou t ton~
~
Pdll'tte Info
~
Palette
-~
-
-
Conucrt to Oli W/ lirn yscol e ~
flf'niiJLif<! uuu\rfl o uupll ffth·s
llcducc Colors ...
!I! I
Ch ti ii !]C Piltcl Dep th
~
Se t Pale tl e 0' ncm op Plu e ts: ...
Dftckyr ound Remoual... Maclntlzc l,ole tte
~011 Pc~ l cl lt·
'
OOUJ Or der ed Di t her ...wryl:' Polt·tll"i... (QUOII7P Pdll"tle tlls togrnrn... IISU Con t ro l. ·. l rw ert Culm\ Gun Co ntrol ... NtSC 11 0 1 Plu c l FlHer··· C tiOilft CIS
.lnten&i l y G Con tnu l...
Shoue· Outllne
· ·
foe tor In Thi l Plcllire
Cr cu t o 'liu pe r Pn h.!lte...
Op llon\...
~
--
Land Pull.·.
LoHd 0' Mer ye l'oll ...
Soue Poll ...
~ ~
2.
IJ!Il!m!l Mlsr ScriJi h
Op ll ons
. r--
Pnl c t1 e I nf o
~
- - fl nfc tlc
~
-----
Conuert t o UO'W/ Groyscn le ~
De moue Unu ~ed 0' Duplicates
Reduce Co lor s ... Chtwge Phtel Depth
·lCI
Se t Pale tt e & Remap r iueh...
- - -- ---
Dnckg round nemounl...
,"'1aclntlze f' ale U e Sort Patel te
· ~ lnltmlll't·
li&IU Order ed Di th er Murgc Pole li es ... [IIUDIIZC Pnl elte l lh t ngro m ... 11~ 11 Con1ro l ... l nu ert Colo rs Gun Control... Nt ~C llo l Pluel n uer ... Channe ls
.Intensity & Contr ast...
Shoue· Outllne
' '
(lf1fth· SUIH'I Puh.\ ltl\ ·.,
Op t ion s.··
~
--
l. ooll Po ll ...
1ootl n "1l'' 9'' Pull..
\nl·l· Poll
~
·
3b.
Creele fa ttr Palette
5.
2. Initialize the Super Palette.
To reset th e Super Palette, select Super Pa le uelfnitialize fro m lhe Pa lelte pull-dow n menu .
3. Open the first image. a. Select Open from lhe File pull-down menu, and open Lhe
li rsl image.
b. Select S uper Pa le tte!Factor In This Picture from lhe Pale lte pull-down menu.
4. Create a Super Palette.
Select Super Pa1elle1Crea tc Super Palette from the Pa lette pull-down menu.
~M ise
Op lion i Pnh·ltt· Info Pnltt lt,.
~cript s
Co nam rt to OO'IU/ Gray stnle
R··r·no·'r Uma·~d n IIUilhrole t
11cduce Colon...
au
rhn ngu Pinel Oep l h
·
Sc i Po le Il l! & llemnJl Piuets ...
Oockground Remounl... Mn clnllz c Po le tle \nr ' l'.al·~lt t·
D&LU Or d er ed Dit her Ml'l9l' l'nh·tte t. ... l·ludlltt· f'ulettr ll l t . l o g r u m ... II ~U Con tr ul... lu11 e1t Culot s
Gun Cont1ol...
M t r lint PiuPI flHPf"" .. Chtmncls t n t cn \H ~ 0" Co nh os t ... Shnu e· Oulllne
lnitloll zo - rnc lor In this Pict ure
Outl uns ...
·l l ood l' oll ... l oad & Mcn1 ·' Pnll.. Snuo l,oll ...
4.
5. Name the Super Palette. a. Remove Lhe "X" fro mlhe box labe led On Creation Of Super Pa/eue. M acintize ft.
b. Cl ick on Lhe radio bu uon labeled Call It, and fill in a na me.
c. C lick o n Create It.
Photography 1237.
EllUill Mise Scri pts
Option s f' nfe tt o I nfo
rnnuPrt In RfHII/ fir nu scatc .,.
lll·mnu u llnu..:~>rl f) llllfHirnf Pc
Rflthtr.f· Cnl nrs ...
lflT
Chonge Phtel Depth
·
n,.r"'gro untJ Remoun l... MC1c.in11 7 P PAle tiP
Cinrt P"'"""
Suoer 1·n1e tte
ll D III nntP rPr1 n i ttuu M o r~e Pn lf~ t t e~ ..
rt,ua llze l, nlc1to ll ls to grnm... 11~ 11 r.nnt rnl. .. I nu ert Colors finn Coni rut.. . NlSC llot Pine l fitter... Ch onncl s tn t AMit y 0' Contrn st ... Sha ue - Out ll ne -""-
7b.
7c.
6 . Factor in your other images. a. Open each one o f the othe r images that will be part of
the Super Palette. b. Select Super PaletteiFactor In This Picture from the
Palette pull-down me nu.
7. Apply your Super Palette. a. Open each one of the images to be part of the Super
Palette. b. For each image, select Set Palette & Remap Pixels fro m
the Palette pull-down menu.
c. Select the name of your Super Palette from the pop-up menu o n the Set Palette & Remap Pixe ls dialog box.
d. C lick on OK.
8. Save your images. a. Select Save As from the File pull-dow n menu. b. Select GIF or JPEG from the Type pop-up menu. c . Locate the folder designated fo r the completed images. d. C lick on Save.
238. ,Chapter 6
Cha r
Artist featured in this chapter:
Kleber Santo~· is a senior g raphic designer with Straigluline International, a New York-basedfirm specializing in strategic marke1ing communications. fn addition 10 prilll, Kleber specializes in the deFelopment ofelecllvnic programs mul multimedia.
samos@slinyc.com
Client-Side Image Maps
Image maps have become an important fea LUre in the Web interface a llowing users to navi gate a Web site by clic king d iffere nt areas in an image. Up until recently, image maps required server transactions. The HTML code requ ired to c reate the image map was diffic ult to write beca use it needed a reference to the image map sclipt the provider had runni ng on his/her We b server. Now, client-side image maps work entirely on the client side-or on the browser.
In thi s chapte r, Kleber Santos sorts out the details related to image maps, including finding coordi nates for cl ickable regions in a map fi le and creating a client-side image map HTML file.
Ifyou' re a Web traveler, you've probably used an image map to navigate. Image maps are inline images that have special regions " mapped" to URLs. Anyone who clicks on one of the predefi ned regions (or hotspots) will be taken to the page referenced in the URL. Well-known sites with image maps include: The Spot, a Web site of episodes (http://www.lhespot.com); Sony (http://www.sony.com); IUMA or the Internet Underground Music Archive (http://www .iuma.com); and Hot Wired (http://www.hotwired.com).
If you' re renting space on an Internet provider's server, this chapte r will also lead you through the steps on how to upload your files from you r studio or oflice to your provider's computer.
A virtual walking tour of NY's World Financial Center
S ummary: In this chapte1; Kleber San tos provides thorough details on the steps required to create image maps. The first image map was invented by Kevin Hughes (kevinh@eit. com) while he was Webmaster at Honolulu Community College.
·
. - .... 4"1'1 · · _i
HI 1 ,.. , '·!
''· '
l'.h J...: 1'\hl
_:
-~ I
Se~c1 uw.hV111ual elementS of O:te abo'le ~e 10 co ona. Vl:IUb1 row.
A bove: In the vl'orld Financial Cente1; 16 palm trees, each 45feet high, line the glass-enclosed Wiwer Garden
K leber Santos, a graph ic designer with Straightli nc I11te rnationa l in New York C ity, likes to c ha llenge hi mself with computer proj ects to satisfy a c uri osity about how things work.
To learn how image maps wo rk, K le ber c re ated a "virtual walkin g tou r" of New York's World Fi nanc ial Cente r. Image maps are inline images wi th hotspo ts. C licki ng on a hotspot li nks the user to another docume nt with more ho tspots. (Note: ff you want to work on th is chapter's image map example step-by-step, lookf o r Kleber 's art on the companion CD-ROM. )
Clien t-Side Image Maps 1241.
Above: Arm Taylor is one ofseveral retail tenants in the World Financial Center (WFC). Created on a landfill adjacent to New York's.financial district, the WFC contains more than eight million squarefeet ofoffice, retail, and recreational space.
Above: When a clickable image map exists on a Web page, the mouse pointer will turn into a hand.
Client-side vs. server-de.,endent image maps.
C lient-side image maps are muc h easier to create than the original image-map implementation, which is server-dependent. The word client refers to the browser. As a result, a client-side image map mea ns the browser processes, or parses, the map information, reme mbers the con te nt, a nd links to a URL if a user clic ks on an active area.
The components of Kleber's map project.
Although Kle ber Santos' studio is re latively close to ECHO in New York C ity, he never had to physically go to the ECHO site because he uploaded his proj ect components throug h a dial-up PPP connecti on. (Note: Although you don't have to be in the same city as your provider. it is recommended that you and your provider be located o11the same coast because cTvss-count1y Internet traffic can be unreliable.) To complete his project, Kleber needed the items shown in the following table.
Item An image
Space on an HTTP server
Notes
Kleber used Pbotoshop to create his photo montage of the sho ps and restaura nts surroundi ng the World F inancial Center's Winte r Garden. T his step will be fami liar to designers. Photoshop is a popular image ed itor. For one of his image maps, Kleber needed transpare nt GIF images for sil houe tted buttons (Sfu zzi). He used the PhotoGIF plug- in shareware software from BoxTop software. (Note: PhotoGIF is available on the CD-ROM in the back ofthis book.)
Kleber's image map project resides on ECHO's Web server in New York C ity. T he serv ices a designe r ca n obtain fro m an Inte rne t provider vary a great deal. M inima lly, Klebe r needed a dial-up PPP account, which provided access to the Internet and server space.
242. j Chapter 7
Curtis Eberhardt, New York, NY
Above: A 3D illustration containing SltockiVave movies. Above Right: Curtis'home page at hltp:/lwww.new-kewl. comlcttrliscape.
Above: A GIF animationfrom Curtis' Web site.
A s an an imator, Curt is Eberhardt (CurtisAE@aol.co m) is very conscio us of bi t depth a nd re lated file sizes. He recommends that We b artists reduce bit depth as muc h as possible to maintain a re asonab le bandwidth.
Curtis' design tips: 1 . GlF Wizard at http://www.raspberryhill.com/ gifwiza rd.html is an onl ine tool that reduces the size
of your G IF images e ither o n a Web server or on your compute r's hard drive.
2. Use one-bit (black and white) cast members in Director movies. Ins tead o f importing color cast me mbe rs into a Directo r mov ie, colorize one-bit cast members o n Stage to make very small movies for downlo ading .
3. GIFBuilder can be used to create individual GIF animation frames. Use the G lFBuilder Grabber Hand tool. move your art , and save the frame.
Larry Rosenthal, New York, NY
Above: A VRML animation adve/1/ure. Above Right: Lany's Srarbase C3 page at hrtp:l/wwHI.CIIbe3.comlstarbase.
Above: A Java-based 3D chat area on Lrmy's Starbase sire ll'riuen by Dan and Matt O'Donnell ofCicada Web Development (http://1v1vw.cicadaweb .com). Th e 3D char envirownelll opem in afloaring window. The rop halfis a VRML window conraining Larl)''s 3D models. (Note: Lookfor Dan and Mat/ 0 'Donnell's VRML tips on the companion CD-ROM inrhe Windows edition.)
L an y Rosenthal (larryr@cube3.com) is an industrial designer, a new media artist, and chairman/founder of New York's VRMLS IG.
Larry's design tips: 1. When creating VRML models, usc 20 models whenever possible. Use a plane instead of a box for representing walls, floors. bird wings. etc. If a VRML object is not mean t to be examined up close and if your modeler can handle polygon-level manipulation, turn a solid object into a surface by removing any unneeded faces. This relieves the renderer from culling faces that are redundant or unnecessary.
2. VRML 30 chat engines may be customized with your VRML models. Cicada Web Deve lopment and Black Sun Interacti ve have both developed 3D chat engines that may be used to create your own chat environment.
3. Web servers need to be configured with the proper MIME settings to display VRML models. lf you wish to display VRML models on your site, check wi th your Internet service provider and inquire whether the MIME settings have been set to display VRML mode ls.
Jane Greenbaum, New York, NY
I:= 1,.:::.1!. II..~I..'!I! I~~ I! I~
LkttiM: In.. :/ //""I"INII0'2.HTH
---
. - ~~·~·~·~ '
fhl· ~ wat cr.oted tor an lniwatttw porttoflo .tth 3D Studlo on a PC platform.
~G?~<ii
Above andAbove Rig ht: Sample pages from Jane '.1· Web site at hllp:l!m embers .aol.coml!fonva ref/image I. 111111.
Jane Greenbaum (IFonvard @aol.com) is a new media anist and vice president of lhe New York Graphic A11ists' Gui ld.
Jane's design tips: 1. Using a Web site to display portfolio samples. If
you're using your Web site to di splay your portfolio, keep it o rgani zed and simple.
2. Publish your Web site offiine. Co nsider publishing your We b site offline by writing the files to a CD-ROM . The CD-ROM may then be mailed or d istri buted as a self-promoti on piece.
3. Web visitors will expect fresh materia l. We b designers wi ll be expected to update the ir Web graphics at least once a mo nth. As a result, try to think of ways to update your images without starting from sc ra tch. For example. updating ca n be accompl ished by rearranging the art or fl oating new objects on the same background.
Frank De Crescenzo, New York, NY
l.oo.t.honl l filt ·///ZfalO t00/SIW:WJ/Pruttwlhtml/thff!!!.M II"'I
! ~ ···Htw? J I~,·sc..s1 ll o.nn..w J f ,..t ~ ! ~I · ft>.r.-. I
Above: A rotating 3D logo cremed as a GIF animation. Above Right: The Slappers home page. http://members.aol.conllj1atsticksl spla sh .html
... Ill
G raphic designer Frank De Crescenzo (frank_ dccrescenzo@prcnhall.com) designed the Slappcr Web site for fellow percussionist Billy Amendola, who developed the Slappers nat drumsticks.
Frank's design t ips: 1. Client-side image maps are easy to create with NctObjects Fusion. No HTML tagging is required when you use NetObjects Fusion to create a Web site. Download a 30-clay trial copy from hup://www . nctobj ec ts.co m. 2. Use a MAILTO command to route form data. Avoid the usc of difficult CGI scripts by using a MA ILTO command to route form data to an emai l address.
Peju Alawusa, New York, NY
I~ 1.::.1!.11..~ 1.!. 1 ! Ite. l ~ I [[]
uc In., ···~ / / /Zb11'201OOI!aryw:!O..tti\JI:wSlOSn"' ...,.""'""·· hbt.1/rHfiV hw.l
Above: Peju 's ho111e page.
Right: Pejtt 's resu111e pagejro111 her Web site.
II1tp:1/melllbers. ao/. co111laIa IVusa/i111m .hlllll
Objocti90
To futher obtmn profQSSJoR!l e:xpenen::e in thl! field of multinnit:l atd ol.b&r relAted V\sual :lrtS 11B1ia
Ez:pcrionce :HIICO.aA. :r:Ua::ncr G:·a;W:CCS¥-DH IZ3D Anno~ ot Amr.fh. lhv von
~ 21Z 696.129J A1Casti99S · Pmtt.l
:OCboluOC,IK O:apt.k4UI(btr
4lOLab)'et'e~t. U t vTolk
H atdl17, 1995· ~. 1995
A.ai:J~Pnss . I K
OrapU: 1)c'cr~er 12'11 A'ft'Ollle: of Aftnot., Uev To1t. ld :2 12.52:2 52'70 Jullwy 1994-Jduery 1995
Web .. h·tbbJ-c Oro a p , lac ~lltldire<:'Jz t p~I !Xtiondt311ntr :Dl Midbon, Hev Yort ~ 212 SZ2.5Z70 PeU..,"}' Icnl·Jtmuy 1993
Freelanar
Ur~u Tk Ll.tleo M e.r:utar G;&J:h1cOU1per 41-15 21rn.t LI C, lln,Y04 ltl. 2 12 SZ2 5270
Qut.trf7 Olac.k l:tot:..,.Y Of Roots At1 di:etuI t.eJl(ntr 6258.-!.way NY 10003
Education
~ Yo;li.Jr.Ju:tfofT~booJc)cy BA~QCWA.n
e~.:u-~ .&rooura Ctnit'iN Q\WtX'pnu
P'i!!.rnhs~acr.....~,.
~ft~Du:J; D
eo.,·· C1112Dttrm.brrJ , ~_,.._., . ~ O! Plnlma
.-.,,Hadou:
QDull<P'U' Ado'-llhotnm A:Jot.PboiDsliOJ
"""'
Graphic designe r Peju Alawusa (pej u_alawusa @pre nha ll.com) des ig ne d her Web site using NetObjecls Fusion.
Peju's design tip: 1 . Avoid HTML tagging. Use NetObjects Fusion to c re-
ate sophisticate d Web pages with fo rms, frames, image maps, and multi media e le me nt s.
Alex Shamson, New York, NY
Above: The Home Storeftvm Alex's Virtual Mall. Above Right: Alex Shamson 's home page at hllp:/lwww. vrmill.com.
Above: A wooden chair in the Home Store m tates and has an embedded link to another Web page containing manufacturer and price information.
I ndustrial desigr~er ~lex Sl~m.nson (alex@vrm ill.com) has created a Web srte full of lrnks to valuable VRM L resources o n the Web. Visi t hi s site at http://www.vrm ill.com for info rmati on about browser software, VRML nrtoria ls. and updates on the VRML specificatio n.
Alex's design tips: 1. The rotating millstone at the
upper-left corner ofAlex's Web site is an example ofVRML animation. Simple animatio n can be added to VRML 1.0 models using a word processor.
2. T he VRML models on Alex's site were created with Virtus WalkThroug h Pro. Vi rtus WalkThrough Pro is an inexpensive 3 D vis ualization tool popular with arch itects and Hollywood directors. The software is ava ilable on both the Macintosh and Windows platforms and can ex port a VRML 1.0 model in the form of a WRL fi le.
Marc Thorner, New York, NY
Above and Below: Close-ups ofthe VivoA ctive digital video stream. Right: Marc's WvoActive page on the PGI site at hllp:/hviVw.pgi.net/video ./lim /.
M arc Tl10mer (mthorne r@pipeline.com) is a d ig ital video specialist who is pa11 of NewYork-based Premiere Gra phics International.
Marc's design tips: 1. VivoActive Producer software compresses a video file into a tiny video stream. Compress your video tiles into video stremn s at a ratio of200: I using VivoActive Producer. A video stream starts p laying immediately when a page loads in to a We b browser. 2. No extra hardware or software is necessary. YivoActi ve requires no extra hardware or software on the Web server. 3. V~'eb ser vers need to be configured with the p roper MIME settings to display VivoActive (V IV) liles.lf you wish to display VivoActive streami ng video mode ls on your site, check with your Internet service provider a nd inquire whethe r the MIME settings ha ve been set to display YIV ti les .
Diana DeLucia Design, New York, NY
Above: A sample Web pagefrom the Diana DeLucia Design Web site designed by Frauke Ebinger and art directed by Diana DeLucia.
D iana DeLucia (ddclnyc@ interport.nct) sees the role o f the graph ic designer chang ing, and the changes arc being driven by technology. A s D iana explains, ..Today, a graphic designer is as much a marketing consu ltant as an arti st . A graphic designer who is fami liar w ith the Web is in a better position to help a client solve b ig-picture issues th an a designer who l imits himself/herself to pri nt .'"
Diana's design tips: 1. Don' t forget your role as a marketer. Create an incen-
ti ve on a Web page for visitors to return . Examples include a flow o f updated information and possibly art or multimedia fil es to down load .
2 . Web pages should be easy to read. Web visitors spe nd very lit tle time reading pages. Make pages easy to read for qui ck scanning.
Frauke's design tips: 1 . Work out a sche matic bel'o··e creating pages. Even if it"s rough , a schemati c he lps to focus your ideas before you start designing Web pages (Figure I).
2 . Watch l'or improveme nts in HTML. HTML has already im proved in just a few short months. Watc h for new developments tha t will ma ke Web page constructio n eas ier.
1.
Christina Sun, New York, NY
http:l!wwlv.echonyc.collll-artl slltl_studio!sutl_SIItd io. h1111I
C hristina Sun (chrissun@interport. net) is an illustrator who specializes in watercolor and collage for books. magazines, newslellers, posters, and fabric design.
Christina's design tips: While working with Photoshop, Christina discovered that changes she made in a feature known as target gamma had a dramatic effec t on the derail in her images. She not iced that a high (2.2) target gamma made her images look washed out. A target gam ma of 2.2 is optimal for preparing images for transparencies, but too hi gh for preparing images for the Web or print. Photoshop artists have the option of using curves to compensate for the decreased saturation (see Step 3).
Gamma is a measure of the amount of neutralm idtone values displayed in an image. Although target gamma won' t be wrillen into the fi le, the value is signi ficant because it wi ll affect the adjustments an artist makes to a fi le when it's displayed.
1. Try to match the target gamma of the output dev ice you intend to use. For example, the target gamma of IBM PC monitors that display Web graphics is 1.8, and the target gamma of Macimosh moni tors that display Web graphics is 2.0.
2 . To control the target gamma settings on the Mac intosh , use the Kno l l control panel that comes with Phoroshop ; for the PC, usc the Monitor Setup d ialog box under Preferences in Photoshop.
Gamma L o\v number
High number
Meaning
A natTow midtone range provides high contrast. A lthough a low target gamma w ill result in dramatic blacks and brilliant whites, it can mean a loss o f detail i n i mages that need a variation o f tones ( for instance, sk in tones) .
A target gamma that is too high m ay result in images that look w ashed out.
311.
3. To increase the saturati on in an image, use curves in
Photoshop. Open the C urves dialog box by selecting
A djustiC urves fro m the I mage pu ll-clown menu .
Instead of making the entire image darker by dragging
the curve i n the center. try dragging the handle on the
curve fro m its startin g po int ( Fig ure 3a) to the first
gridline (Fig ure 3b). This technique causes darker
areas to become more saturated . bu t cloesn' t affect the
3b.
light areas.
Gail Garcia, New York, NY
__ _ .. ____ ......_..,.._.,....,.....,......_..,........._.,......,........................
f . . ....,. . . .~-_....,.......... . . , . . . . . . . .
Above: Gail:1· Web ccualof? paRe was created for Elaine Arsenault, a handbag designer in Ne w York City.
II11p :llwww.ecflonyc.coml-arlIarse1w ultI arsenault.lllml
Graphic designer Gail Garc ia (gjgarcia@in terport.net) s peciali zes in produc t promotion and has a background in print. W hen Gail's c lients approached her about des ig ning Web pages, she experimented with software program s a lready familiar to her from he r print work.
Gail's design tips: 1. Usc Quark XPre.ss as a layout tool. Use Quark XPress
to build a layout, saving each page as a separate EPS file.
2. Open the image in J>hotoshop. A Quark X Press E PS image wil l open as an EPS Pict Preview image in Photoshop 3.0+ on the Macintosh o r EPS T IFF Preview on the Windows platform.
3. Reduce the bit d epth . H you 're designing s plash screens, be careful of file size. Reduce the bi t depth by selecting Indexed Color from the Mode pull-down me nu . (Note: ~/'you already have Indexed Color selected. select RGB, and reselect Indexed Color. Experimem with smaller bit depthsfor smal/erjile sizes.)
Brandee Amber Selck, Santa Cruz, CA
· · ~J.t.:>.:l~.··b - · - · -
-· - ·- ---- NakamiCI11 -- - · ·-
·
-.
Above andAbove Right: Brandee :S· sample Web pagesjimnlhe IUMA sile . Many of/he IUMApages pro vide Web visi1or.1· wilh a scrolli11g database wi11dolll thai Ihey can use to access artisis or labels .
Above: All of /he Web g raphics vn the JUMA sile have a 50s !heme .
B randee A mber Selck 's artwork is one of the most popular Web sires on the Internet. The IUMA (Internet Underground Music Arch i ve) si te at http://ww w.iuma.com is a home for over 500 independent, unsigned arti sts who want to reach people directl y on the Internet.
Brandee's design t ip:
Brandee (brandee@iuma.co m) encourages Web artists to go " hog wi ld" w ith thei r scanners. When B randee and artist David Beach began designing for the I UMA Web pages, they scavenged for everyday items around the offic e, at home, and at thrift stores. Brandee explains, " A lot of the best stuff came from Beach' s parents' kitchen and junk drawer: a cooking pot w ith a copper bottom.tin foil , a gas stove dial , a radio knob from a reproduction radio that David bought his dad ar K Mart when he was a k id , and various knobs from an old Zenith telev ision.''
Shankweiler Nestor Desigri, New York, NY
Above: A sample Web page.from a Shankwei/er Nestor Web site, art directed by Okey Nestor and designed by Lill(/sey Payne .
hltp://www.echmJyc .cotJII-art/Nestor! Okey.llllnl
Okcy Nestor (okey@ interpOJt.nel), who taught corporate ident ity at Kent State University and owns Shankwcile r Nesto r Des ig n in New York City, feels Web g raphics offer a g raphic des igne r broad new potentials in communication, with characte ristics such as so und , video , and animation.
Okey's design tips: 1 . Integr a te your Web site into you r corpor a te identity program . lnstead of treati ng your We b site as a tota ll y differe nt ent ity, integrate it into your identity progra m a nd make it work w ith the goals and strategies o f your company's marketing plans.
2 . O ffer com pelling content within yo ur design . Design is not the onl y part of the story. The Web is an interactive medi um , so ex ploit the pote ntia l by offering your c usto me rs the abili ty to place orders, pose questions, o r look up in fo rmation in a database . Be creative with both des ig n and content.
Merry Esparza, New York, NY
Above: Sample imagesfrom the Mo!Jius Gallery Web site .
http:/hvw lv.l/sers .iJIICip o rt .ne tl-merryl mohi1.ts .hlinl
2.
F or her wo rk o n Web pages, Me rry Es parza (merry @ inte rpor1.ne t) uses Photoshop and Illustrator. Because these two prog rams have diffe re nt properties, she likes to tran sfer graphics fro m one program to the other.
Merry's design tips: 1. Beg in an illus tratio n with a black and wh ite li ne art
d raw ing in lllustrato r and import it into Photoshop.
2 . O nce the drawing is in Photoshop, create chan ne ls for all the distinct areas in your d rawing . Do this before applying any color o r tex tures. C hannels provide a means to record selectio n areas and , with the various areas recorded , an artist can easily rese lect a n area and ex periment with color (and lex lUres) over and over.
For example. Me rry cre are d the tiled floor in the Mobius Gallery splash sc reen (Fig ure 2) with straight lines in Illustrator. When she impo rted her black and white li ne art drawing into Pho tosho p , she used the Magic Wand too l with the Shift key he ld clown to select the ti les she wanted to fi ll with colo r. She made n channe l to record the selec ti on and then experimented \N ith color fills.
Kleber Santos, New York, NY
e, T~e Wo~ld Financial Center Virtual Tour .
Above: Kleber :1· Sjitzzi Web page was created.fiJr his virtual tour ofthe World Financial Center.
Graphic designe r Kleber Santos (santos@slinyc.com) recommends that We b designers watch the 1-ITML 3.2 dra ft at http://www.w3.org/hypertext/WWW to keep up with changes in the Hypertext Markup Language.
Kleber's design tips:
1 . To conserve bandwidth, consider black and white images. For his virtual tour of the World Fin anc ial Center, Kle be r used black and wh ite images instead of color. Because some of his images are large, black and wh ite means sma ller file sizes.
2. Use Adobe Illustrator to create type, rasterize it in Photoshop, and save it as a GJF or JPEG. Because HTML does not provide a large vari ation in type faces, Illustrator is the best tool to create origina l type. Save the file as EPS, open it in Photoshop, and save the type as a GlF or JPEG file.
Above: Outside view ofthe World Financial Center designed by Cesar Palli & Associates and built in 1981.
A text
A tex t processor is required to bui ld Web
processor
pages. On the Macintosh, SimpleText (wh ic h comes with the Mac) is a good choice because it automatically saves files in the required ASCII format. (Note: See Creating a clie nt-side image map HTML file later in this chapter.)
A browser Browser software is used to view the
Web a nd is also a tool that can be used locall y (witho ut a modem connection) to view Web pages throughout the design process. Web doc uments are ASCII tex t
files that can be opened by selecting Open File from the File pull-down menu.
---
Software Fetch is a popular Macintosh FfP to n·ansfer software program used to transfer fi les
fi les over a over the Inte rnet. Although files can also modem be transferred to your provider's server
with popular communications programs, such as White Knight or MicroPhone, Fetch is useful because it has functio ns that allow you to create directories and delete fi lcs.
Above: Th e North Cove Harbor Marina is tucked behind the World Financial Cente r along the Hudson Rive~front.
Client-Side Image Maps 1243.
Finding coordinates for clickable regions with Photoshop
Summary: Phoroshop's Info palette can be used tofind coordinaresfor your map file.
r!IJ
Adobe Photoshop
1. Plan the hotspot areas. The hotspots on Kleber's image map are restaurant and rerail store logos (Figure 1). Although image maps can have clickable regions shaped as circles, polygons, rectangles, or points, Kleber decided to use rectangular areas to cover the various store and restaurant names.
Photoshop's Info palette shows d1e coordinate position of the mouse pointer (measured from the upper-left corner of the image). Kleber recorded the palette's readings for a map textli Ie. To obtain upper-left and lower-right coordinate readings for all the restaurant and store logos, he positioned the mouse pointeron the upper-left corners and the lower-right corners ofeach of the images.
244.,Chapter 7
IIIIIil Edtt '1ode
New...
XN
Close
, w
~our
!I\
~ou~ ns ...
~oue o Copy ...
Retteat
ncquire £Hpor1
f il e lnfu ...
PnqP Setup ...
l'rlnt...
:li(P
Preferentes ·
Qutt
110
2a.
1.
2. Open your image map in Photoshop. a. Open Photoshop, and select Open from the File pull-down menu.
,...e111 llllndow
loom to
)o>o
?no111 Ou t )':-
loom FiH i tw...
\h111111lulrr\ ~It
Shout Drushes Show OptloOJ
SII OIU flicker Show Swat ches Show Scro t ch
---
lllde LO!JCrs
Shout Chonnel s
Show Pot11s
Shoau Comrno His
3a.
b. Select a graphic in the dialog box that follows, and click on Ope n.
nwmbnnll £n·utr
le Book ... ,
Mop2 U) Mop2.glf ~ n swe
't;) ourooon.Ps
't;) Pork sign
I I Plote ll Plo te.glf
Puzzle piece
rormat: Pho tot:hop 3.0
593K
0 (8] Show fhu mbn all
Sho ut All rile s
Desk t op
rin d ...
I ( nn~ Aqoln
[DOCCI Open
2b.
3. Open the Info palette. a. Select Show Info from the WindowiPaleltes pull-down me nu.
b. The Info palette will appear as a floating palette in the Photoshop work area. Press on the Info palette's pop-up me nu, a nd select Pale tte Options.
c. Press on the M ouse Coordinates Ruler Un its pop-up
menu , and select Pixe ls . C lick on OK.
a
·
Poleti e Opti ons... II
"'/,o, "'
3b.
1= - - ~·~ Info Options - rlrs t Color U ct~do u t r8J Sh otu first Co lor llcodou t
I ..-1 Mude: nctunl Color
-Second Color neodoul ~ ShoUJ Seco nd Color Aeodout
I ... I Mode: OGIJ Color
fCEJ
( (DIICC I )
-Mo use Coordlnotes ~Show Mou se Coordin a t es
I nches
Centim e ters f - -
roinh
3c.
Pl ccu
d. Select one of lhe rectangular areas on your image map
and place Lhe mouse pointer (in the s hape of a crosshair)
in the upper-left comer.
3d.
Cliem-Side Image Maps 245.
ll ~ '-,f' L[ lnf~
R: ~G :
B:
Il l
l~
226 220 226
+. ~:
2 10 257
3o.
e. Look at the Info palelle, and record the x andy readings (in a notebook) as follows :
x: 210
y : 257
f. Place the mouse pointer (in the shape of a crosshair) in the lower-right corner.
lfo1
.. ,:
' !ill
II Info"-
I~
R:
104
~ G:
104
B:
104
+. ~:
295 305
3g.
Ullill £dlt Nc au. ..
Opon ...
PIArll ·. .
Motle
fln~o
llf ll
~o ue
Sau e As···
n e ttl·r t
Rcoulre £Hoort
rue tnro...
Pogo Setup ..,
Prin t...
X
I ~ Pre ferences
I Qull
a
4a.
3f.
g. Look at the Info palelle and record the x andy readings
as follows: x: 295
y : 305
h. You will need to repeat these steps for all of your planned hotspots.
4. Save t he image as a GIF. a. Select Save a Copy from the File pul l-down menu . b. Enter a fi le name for your image, and add GIF as the extension.
lo Web / Kl eber I!!! I L' iln lll' fhl\ 1
1! t hot wired
~2 lhe \PO l
I f1111 J tonde 1 rondr n11tl
Soue t hi s document as:
lwrc.gll ro rrna t: I I'I CT file
4b.
?I
C) APSOrW '"II J
It ( (Jel l )
( Deskt op )
ti ( New D)
Cancel
SOIJ IJ
?)
246. j Chapter 7
Tip: GIF and JPEG images can both be used in image maps. Although JPEG images cannot be seen by as many browsers, thefile size is ve1y small compared to G!Fs. In this example, Kleber's montage was 70 K as a GlF and only 30 K as a JPEG.
c. Press on the Format pop-up menu, and select
CompuServe GIF. Click on Save.
=-=:-:-~Ie:lOi:=O::·:;:·k:::·::::!....l----,.,=nrsDrlue·· # 1
CJ flnl s hod pitts
I r J·CI )
't;th hi Lle.gll
'fi Oo l <lL··.plc t
~Dig (lllhuqoophi< Map
I I De<kl op I New CJ I
Crnte
Cancel
Saue
4c.
EPS
ftlm\ttlp Glf09o JPEG
~DCI,Am1
PCH PICT File PitT Re~ourcc
Client-Side Image Maps 1247.
Creating a client-side image map HTMLfile
Summary: Unlike se1ver-dependent image maps, IVhich rely on an HTML .file and a separate mapfile, client-side image maps combine the HTML information and map in one document.
1. Open SimpleText. Use S impleText or a word processor. If you use a word processor, be sure to save the document as Text Only.
aYv
SimpleText
2. Create a new HTML document. Start a new document with the followi ng markup tags:
<HTI1 L> <HEAD> <TITLE>The World Financi al Cent er </ TITLE > <! HEAD>
3. Add a <BODY> tag. Kle ber wanted the browser background color to be whi te, which can be accomplished with a BGCOLOR attribute added to the <BODY> tag.
<HTML > <HEAD> <T ITLE >The World Financial Center</TITLE> </ li EAD> <BODY BGCO LOR- #FFFFFF>
4. Add a <CENTER> tag. To cente r the remaining e lements, Kleber added a <CENTER> tag.
<HTM L> <HEAD> <T IT LE>The World Fi nanc i al Center</TITLE> <!HEAD> <BODY BGCOLOR- #FFFFF F> <CE NT ER>
I 248. Chapter 7
5. Add an image tag for the banner graphic.
The <IMG> tag contains an SRC parameter that contains the name of an image lile.ln this case, the image is a banner graphic at the top of the page.
<HHIL> <HEAD > <T ITLE>The World Financial Center</T!TLE> </HEAD > <BODY BGCOLOR-/IF FFFFF> <CE tH ER> <HIG SRC- "vi rtua 1. gif"> <!CE NTE R>
6. Add an image tag for the map.
Add an <lMG> tag with an SRC attribute, a USEMAP attribute, and a BORDER=O attribute. The USEMAP attribute indicates a clie nt-side image map. It specifies whi ch map to usc with the image, followed by a#, fo llowed by the name of the map. In this example, Kleber's map image is called WFC.gif. This HTML docume nt, which also contains the map information, will be saved as map. htm, and WORLDTRADE is the name of the map. BORDER=Oturns off the image bo rder.
<HHIL > <HEAD > <T IT LE>The World Fi nancial Ce nte r </TITLE> <! HEAD> <BODY BGCOLOR-#F FFFFF> <CENTER> <I MG SRC-"vi rtual.gif"> </CENTER> <I MG SRC-"W FC .gi f" USEMAP-"map.htm#WORLDTRAOE" BORDER-0>
Client-Side Image Maps J249.
250.1 Chapter 7
7. Add a <MAP> tag.
Inside the <MAP> tag, add a NAME attribute, which specifies the name of the map so that it can be referenced by the <IMG> tag.
After the openi ng <MAP> tag, add an <AREA> tag specifying a single clickable area of the image. Inside the <AREA> tag, use a SHAPE attribute to give the shape of the area, a COORDS anribute to describe an upper-left and a lowerright set of coordinates, and an HREF att.ribute to specify where a click in that area should lead. Any number of <AREA> tags may be specified. This World Trade Center example uses nine <AREA> tags.
<HTML>
<HEAD>
<T ITLE >The World Financial Center </ TITLE >
<!HEAD>
<BODY BGCO LOR-IfFFFFFF>
<CE NTER> <JMG SRC·"virtual . gif">
</ CENTER>
<IMG SRC· "WFC. gi f " USEMA P·"map .ht rn/IWORLDTRADE" BORDER·O>
<MAP NAME-"WORLDTRADE">
<AREA SHAP E·RECT COOROS-"25.7, 127,84" HREF·"yacht .htm">
<AREA SHAPE-RECT COORDS-" 151 .8,217.84" HREF·"art.htm">
<AREA SHAPE·RECT COORDS·"233,6,368 ,84 " HREF·"r iver . htm">
<AREA SHAPE·RECT COORDS- "1 66 . 132.218.171" HREF-"gap.htm">
<AREA SHAPE·R ECT COORDS-"22.224 ,132,246" HR EF·"river.htm" >
<AREA SHAPE·RECT COORDS·"192.221.278.270" HREF·"s fuzz i .htm">
<AREA SHAPE-RECT COORDS-"16 ,338. 147 .388" HREF- "ataylor.htm" > <AREA SHAPE-RECT COORDS-"173 , 339 .235 , 392" HREF- "j david. ht m" > <AREA SHAPE-RECT COORDS-"266 . 339 .370,389" HREF- "rizzol i .ht m">
8. Close the <MAP> tag. Add a closing <IMA P> tag after the last <A REA> tag.
<H TM L> <HEAD> <TITLE>The World Financial Center</TITLE> </HEAD> <BODY BGCOLOR-#FFFFFF> <CEUTE R> <IHG SRC-"virtual .gif"> <JCE UTER> <IMG SRC-"WFC.gif" USEMAP-"map. htmi/WORL DTRADE" BOROER- 0> <HAP NAME- "WORLDTRAD E" > <AREA SHAP E-RECT COORDS-"25 .7,127 ,84 " HREF-"yacht. htm"> <AREA SHAPE-RECT COORDS-"151.8.217 . 84" HREF- "art.htm" > <AREA SHAPE-RECT COORDS-"233 . 6.368,84 " HREF-"r i ver.htm"> <AREA SHAPE-RECT COOROS-"166 . 132 . 218.171 " HREF- "gap.htm"> <AREA SHAPE-RECT COORDS-"22 , 224 .132.246 " HREF-"river.h tm"> <AREA SHAPE-RECT COOROS-"192 . 221 . 278 .270" HREF-"sfuzzi .h t m" > <AREA SHAPE-RECT COOROS- "16.338.147 ,388" HREF- "atay l or. ht m">
I Cliem -Side Image Maps 251.
252. JChapter 7
<AREA SHAPE-RECT COORDS-"173 . 339.235 ,392 " HREF-"jdavid.htm"> <AREA SHAPE-RECT COORDS-"266,339 , 370,389" HREF- "ri zzol i. htm">
C/~1AP>
9. Add line breaks. Line breaks add space below the image map graph ic. Add two line breaks after the closing </MA P> tag.
CHHI L> <HEAD> <TI TLE>The World Financial Cen t erC/ TI TLE> <! HEAD> <BODY BGCOLOR- UFFFFFF> <C ENTE R> <If.IG SRC-"vi rtual.gif" > <If.IG SRC-"WFC.gif" USEMAP-"map.htm#WORLDTRADE" BORDER- 0> <MAP NAHE- "WORLDTRADE"> <AREA SHAPE- RECT COORDS- "25,7 ,1 27 ,84" HREF- "yacht.htm" > <AREA SHA PE-RECT COO RDS-"151.8. 217.84" HREF-"art .ht m"> <AREA SHAPE-RECT COORDS-"233.6 .368.84" HREF- "river.htm"> <AREA SHAPE-RECT COORDS-"166 , 132. 218.1 71" HREF- "gap .ht m"> <AREA SHAPE-RECT COORDS-"22.224, 132 .246" HREF-"river.htm"> <AREA SHAPE-RECT COORDS-"192.221 . 278 . 270" HREF-"sfuzzi .htm"> <AREA SHAPE-RECT COO RDS-"16 .338 ,147. 388" HREF-"atayl or .htm"> <AREA SHAPE-RECT COORDS-"173,339,235,392" HREF- "jdavid . htm">
Tip: Bmwsers that supporr client-side image nwps include Netscape 2.0 and 3.0, SpyGlass Mosaic, and Microso.fl 's Imemet Explore1:
<AREA SHAPE-RECT COORDS-"266 ,339 . 370 . 389" HREF-"ri zzol i. htm">
<~NAP>
<BR> <BR>
10. Add text.
Kleber added a line of text after Lhe line breaks to give Web visitors directions.
<HTML> <HEAD> <TITLE>The Wo rld Financial Center</TITLE> <I HEAD> <BODY BGCOLOR-#FFFFFF> <CENTER> <ItiG SRC-"vi rtua1 . gif"> <IMG SRC·"WFC.gif" USEMAP·"map .ht m#W ORLDTRADE" BORDER-0> <t·1AP NAME·"WOR LDTRADE"> <AREA SHAPE-RECT COORDS-"25 ,7,1 27 ,84" HRE F·"yacht . htm"> <AREA SHAPE-RECT COORDS-"151, 8,217 .84" HREF·"art. htm"> <AREA SHAPE-RECT COORDS-"233 .6 , 368 ,84" HREF-" river. htm "> <AREA SHAPE-RECT COORDS·"166 ,132 . 218. 171 " HREF· "gap .ht m" > <AREA SHAPE-RECT COORDS-"22.224 ,132 . 246" HREF-"ri ver. htm"> <AREA SHA PE-RECT COORDS·"l92.22 1.278,270" HREF·"sfuzzi .htm" > <A REA SHAPE·RECT COORDS-"16.338 ,147. 388" HREF-"ataylor.htm">
Client-Side Image Maps 1253.
Tip: Kleber's email address has a MAILTO URLadded to the HREF attribute, which is part ofcur anchor link.
When a Web visitor clicks on the email link with a MA ILTO URL, a blank email form appears with the address already filled out (Figure I1).
Dl
Send MoiVPDt.l NeUJ\
r"""~..to··~ ··J f.....;f"\4r'C!7' '"'"
I Quote Ootumenl I
Rliech ...
11.
254. j Chapter 7
<AREA SHA PE-RECT COORDS-"173,339 , 235,392 " HREF-"j david.htm"> <AREA SHAPE-RECT COOROS-"266,339 , 370,389" HREF- "ri zzol i. htm"> <! MAP > <BR> <BR> Select individual elements of the above image to go on a virtual tour.
11. Add the signature area. Although signature areas generally contain the <ADDRESS> tag, Kleber limited the signature area to an email address. He added a MAILTO URL £0 the HREF attribute so that viewers get a blank email form when they click on the email address (Figure I I).
<HH1 L> <HEAD> <TI TLE>The World Fi nan cia l Center<IT ITLF> <! HEAD> <BODY BGCOLOR-/IFFFFFF> <C ENTE R> <I MG SRC-"vi rtual . gif"> <IMG SRC-"W FC . gif" USEHAP-"map . htmiJWORLOTRAOE" BORDER-0> <MAP NAME-"WORLOTRAOE"> <AREA SHAPE-RECT COOROS-"25,7,127.84" HR EF-"yacht.htm"> <AREA SHAPE-RECT COOROS-" 151.8.217 .84" HREF-"art.htm"> <AREA SHAPE-RECT COORDS-"233,6 , 368,84" HREF-"river.htm"> <AREA SHAPE-RECT COOROS- "1 66,132,218 ,171 " HREF-"gap.htm"> <AREA SHAPE-RECT COORDS- "22 , 224 , 132,246" HREF- "river.htm">
<AREA SHAPE-RECT COORDS-"1 92 , 221 ,278 , 270" HREF- "sfuzz i . htm"> <AREA SHAPE-RECT COOROS-"16 , 338,147 , 388" HREF- "atay l or. ht m" > <AREA SHAPE- RECT CODRDS-"173 .339 , 235 ,392" HREF-" jdavid.htm"> <AREA SHAPE- RECT COORDS- "266 ,339 , 370, 389" HREF-" ri zzol i. htm"> <!MAP> <8R> <8R> Sel ect i ndi vidual elements of the above image t o go on a virt ual tou r. <AD DRESS> <A HREF-"Ma i l t o: Ksantos@ec honyc . com"> Ks antos@echo nyc.com <lA>
12. Add the ending tags.
</ BODY> <I HH1L>
13. Summary of HTMLtags used in this section.
The tags you see in thi s list (in alphabetical order) re n ect the HTML 3.2 specification. <B> ... <IB>
A rag used to apply boldfac ing to tex t.
<BR> A tag used to add a line break. This tag does not require an ending tag.
<BODY>...<IBODY> A tag used to open a nd close the body of a document. This tag uses the BGCOLOR attribute, whic h adds color to a browser page. For example:
<BODY BGCOLOR-"IIFFF FFF" >
Client-Side Image Maps 1255.
256. , Chapter 7
<CENTER> . . . <!CENTER> A tag used to ceme r elements on a page.
<HEAD> . .. <!HEAD> A tag used to open and close the header portio n of a document.
<HTML>. ..<IHTML> A tag used to ope n and close an HTML document.
<IMG> Used to refe r to an inline image, this tag uses the SRC attribute, which represents the URL (location) of the image. For example:
<IMG SRC-"vi rtua l .gif"> This lag also uses the USEMAP attribute, which indi-
cates a client-side image map. £t specifies wh ich map to use with the image, followed by a #, followed by the name of the map. For example:
<IMG SRC- "WFC.gif" USEMA P- "map. htm#WORLDTRADE" BORDE R-0>
MAILTOURL The MAILTO URL is used in an email link inside the signature area of a doc ume nt. Viewe rs who c lick on a link conta ining a MAILTO URL will gel a blank emai l fo1m with the address filled out.
<MAP>.. .<!MAP> A tag used to describe the reg ions in an image and where each region lin ks.
This tag uses the NAME attribute, which specifies the name of the map so that it can be referenced by the <IMG> tag. An <AREA> tag is used between the <MAP > ...<!MAP> tags. <AREA> tags specify a single
Tip: Lookf or an example ofa client-side image map at hllp:l/www.mis.llcc u.edu.twl - bibo//ablclielll_side_ilnage_IIIOp.lltlnl and hItp:Il www.learned. coml-apex/ imagemap. html.
clickable area of the image. This tag uses the SHAPE attri bute to give the shape o f the area, a COORDS attribute to describe the coord inates o f an area, and an HREF attri bute to specify whe re a click in that area should lead.
<TITLE> ...<!TITLE> A tag used to describes the titl e of a docume nt, whic h shows up inside a browser's title bar.
Client-Side Image Maps 1 257.
Use PhotoGIF with Photoshop to create a transparent GIF
Summary: BoxTop Software's PhotoGIF plug-i11 added to your Photoshopfolder gives you the ability to save tra11spare11t G!Fs and interlaced G/Fs.
!I
..,ehrope: HU! Ulorld Jlnlntlll Cenl er
-~-tJ_;J LJ ~~_::j..2J _j
l-·~· lf'llfllft);('ll:rJIVf'fC:2U:4'0i'loM4o/)of...'!l\l.c-.l
I
iliiM.'t...,._· l "'·l·'-1" ( ~ I W.ltnr,._ ! .-,tOno:!MJJ~
W
II
~k1bL"'I"'o:uat t~.III OIC'w.._t"1111(11 ~to··~'Ulll.t:c
J:.~Wrtu.os !HAILIII1!lW ~
..
~
PhotoG IF
W hen a Web visitor clicks on the Sf'uzzi logo (lop left), they branch to another HTML document wi th its own image map. On this page, the button choices are transparent GIF images, which Kleber created in Pho toshop and saved using BoxTop Software's PhotoGJF plug-in. (Note: PhotoGIF is a shareware software program available on the CD-ROM in the back ofthis book.)
258. 1Chapter 7
1. Open a Photoshop image.
Before opening Pholoshop 3.0, Kleber placed the PhoLoGIF plug-i n into the F ile Format folder inside Photoshop's plug-i n folder.
(Note: Ifyou 're using Photoslwp 2.5, place
the PhotoGJF plug-in into Photoshop's Pluginfo/del:)
~ ld o l
NC IU ...
I
Pldre ..
Mod· fJC N
"'
(IO\l'
Ill
Souf'
1i'S
')OUt· fh ...
\IWt· d lOV!J ···
llf'UCI I
Require ruporl
ltl~ Info ·..
a. Open Photoshop, and select Open from
the File pull-down menu.
I'DIJI' il'IUII.,,
t' tml ..
·r
Preferences ~
b. Select an image from the dia log box, and Quit
1!0
click on Open.
1a.
Thumbnail freatl.'
le oook ·I
l '1up2 1l Mop2.glr
~ n swe
1l OUTOODR.PS 1l f'ork sign
1)Piote
1l Plotc.glr
Puzzle piece
c::::) nrs Orlue'" · t LJet l
Desk tot·
find ... ( J111d nq..rn )
Co n col
rormol : Ph olu shop 3. 0
~03K
[8') Sh ow Thumbnail 0 SIIOIU 011 riles
Open
1b.
c. The image opens in a Photos hop window.
2. Open the Info palette. a. Se lect Show Info from tJ1e WindowiPalettes pull-down
menu.
b. The Info palette wi ll appear as a noating palette in the
Photoshop work area.
1c.
luom In
·:
loom Out -c-
t'oorn r.,, tnr...
r:;
rI Info""
R·
/,G' a·
ru 1~ 1
226 226 226
~ho w nul (I I \ ·· n
Show Brulhet Show Options
Show Pick er ~how Sw a tches Show Scratch
+. ~:
210 257
2b.
lllde t oyt!n Show Chan neh
Sl1ow P nths
Sh o au Commb tds
2a.
Client-Side Image Maps 1259.
3. Test the RGB value of the background color. Kleber's image is a set of oval buttons that float on a green background. Because the background wi ll drop out as the transparent shade, he c hose green because it's not in the image.
a. Select the Eyedropper tool from Photoshop's
Toolbox.
b. Hold the Eyedropper over the backgro und.
3a.
sru zzlps.plct ( 1: 1)
I>
II
Info
I~
A
/,G
20,
B:
0
C: 7· 1
/. IL
01
· Y; Q61
~: o·
+. ~
1 ~1
194
3c.
Dllill £dll
,, e w ...
Open ...
rtuf f' ...
"'1ode
ICN ICO
Close
li lU
Soue
XI
SDIJC a [ Op!J...
Ot·UPI'
Require hport
rue Int o...
Page Setup ...
Print ...
3P
tlul l
ItO
4a.
26o. jChapter 7
3b.
c. Note the RGB value in the Info palette. d. W hen the image is saved as a transparent GIF, the green
background will drop out.
4. Save the image as a transparent GIF. a. With the image open, c hoose Save As from the File pulldown menu. b. Select GIF89a from the Format pop-up menu. This is the exte nsion fo r transparent GIFs.
= =-=,..,..,.~lo~o=o·=k=·::::!l_ _ _ = llPSDrk!e- " I
I I lOll I I llo·klol· I
I 'IPIOI c:::J I
4b.
Pho l osttDJI .3.0 flho to s hOil 2 .0 llmlgn Iff DMfl
.,... Com,mserue Glf £PI fllm\ l rftt
JPI G ~d ' P..unl PC II PI CT fllu P I CT RC$0Ut CC PlmJI PhteiPalnt Ro w
Cnn t e l Soue
PttotoGif b OoHTop Sollwore
(® Glf89oll Want Bells and Whistle s)
0 Gif87o (No Bells and Whl·tlesl
0 fHpl1a for Tntn spbr('nty:
[® Color forTranspnrcncy:
O None
fll!1
~
® Interlace Me. Ba b!JI
0 Strip Resources lloke It oil o f Ill
I I fi forget lt ... Yeah lure... )
5a, 5b, 5d, 5e.
B: 0
~
iLJOI
5c.
c. In the dialog box that follows, e nte r a file name and
click on Save.
= -:-:-:-:--,..!(:e=:l=B::·::·k::·=-.1- ----.,., = Ill'S llltue'"# t
D finished pit ts
I 1 feet I
II~
Hr1,Eue.gif Arh£ue.pJ<t
I I Desktop
~Dog Orthogreplll< Mop ~(~nter Logn
I Ne w D I
Seuc U1is document os:
Isruzz lp.gl r
I rorrnn t: GIT09a
·I
Cnn ccl Sauc
4c.
5. Make selections in the PhotoGIF dialog box. a. In the BoxTop Software dialog box, select the radio
button next to GTF89a.
b. Click on the color selection square to choose a transparent color.
c. In the dialog box that fo llows, c hoose a color, and cl ick
OK. (Note: Th e PlwtoGIF plug-in will assume that the background color drops out as transparent. The RGB value displayed should match the value you tested with the Eyedropper tool.)
d. C lick to put an X in the box labeled Interlace Me, Baby!
e. Click on Yeah Sure.
f. When the image is loaded into Netscape, the green background wi ll be transpare nt.
Client-Side Image Maps [ 261.
Use Fetch to upload files to a provider's server
Summary: Jim Mal/hews' Felch is a Macintosh shareware FTP utility that can be used to transferjiles to andjro111 file se1vcrs on11le Internet. Lookfor Fetch on the CD-ROM in the back of this book.
:::.;;;.
Open Connctllon·..
£n t e r hos t nome. user na me, and IJDuword (o r choose f rom the Jflort cu t menu):
Host:
Iw w w . c ch o n y t . r o m
I
User 10: !circuli
I
Password: I········
I
I Dlreclory:
El Sll or1cu t s:
I
CE:J ( Cnncul )
3a.
hlth: IUIUIIJ. It<hOIIIC.,(Um
~
Fet ch
..... IJ,..l,....,....,"'.. '" ~'
"""",.'.......
I
lj..,......... O···t O··.,IJ .,
3b.
· · Customlte Change Directory...
4a.
£nter o nnme for the new dlrcciOitJ:
l son1o~
4b.
262. 1Chap1er 7
T o use Fetch to transfer li les to your provider's server, you' ll need to obtain a host name (the name of the server), a user TD, and a password.
1. Open your Internet connection. Click on the Open button in the ConfigPPP Control Panel to get on the Internet.
2. Open Fetch.
Open Fetch by double clicking on the Fetch icon.
Fetch
3. Log in to your provider's server. a. In the Open Connection dialog box, enter the host name, user ID, password, and directory name you obtained from your provider. This step is referred to as loggi11g in. Click on OK.
b. You should be connected to your provider's server quickJy. Look closely at Fetch's principal dialog box and notice the word Connected under Status.
c. Notice the name of the directory you obtained from your provider over the lile list window (Figure 3c).
art ~ I
3c .
4. Create a directory. a. Select Create New Directory from the Di rectories pu lldown menu.
b. Enter a new directory name in the dialog box that follows.
5. Upload a text file to your directory.
a. Click on the Put File bu tton.
( Put Fil e...~)
b. Use the lile list window in !he dialog box 5a. that follows to select a text file that you would like to upload. Click on Open.
lo I lm n~emo(! l lo send..,
~~ santo~.h t ml
~ Snn1o·2. html
··ru.gu · sluSbkg.gll
.~ slubor.h1ml
f'-1 siUbOH.jpg
C) m·!. ortue'.. 111
I [Je<1 I I I Deskt op
I I Cnncel
I ) Open
5b.
Soue file on www.echonyc.corn os:
Is furnenu.h tml. lu ~
I r ormot : Teut
Sc.
SOUC fil e 00 WIUlU.C CIIDII!J C.COUI OS: j s rurn enu.htrnl
G J } rormol: ,_I...;.T.;;.cH;.;.I_ _ _·_,I ( Cnnccl )
Sd.
~ Se.
Fetch
.."..
"
~.<l .......
..........loot lllo
'""' '
""""
Sf.
@ ~u l flfnn l lt
0 fOIII Q IIM t y
le> I l rnogomo e/ to send ...
c:::l fiPS lhtue"· 11 1
~~ snnto s. html Sontos2.html
1Q sfu5bkg.glr
f!l sf uber.html 'I sfuboss.jpg
~ sfumenu.html
I i> ( I jot I I ( Ocskt OIJ
I ( Cnncel li (I Open I)
6b.
Soue file on www.echonyc.corn os: lsru.gi4
formot: l MetDine n11 1 ·I ~ c:!:J
6c.
Soue fil e on www.ccfl ony c.co m os:
[g rent lllfOIJIU:'d IC Jtt
, , [mzm:III o/MetOinnry II
( Conccl I ( ] ! : ]
Olnll e u Hppl eSingle
6d.
c. When you se lect a file, Fetch identifies the file format as Text. Notice the pop-up me nu in the dia log box (Figure 5c).
d. If you' re uploading map files or HTML files as text, only the .MAP and .HTML exte nsions a re importa nt. Delete the .TXT extensio n that Fetch adds to the end of the file name (Figure 5d). C lick on OK.
e. Fetch 's dog will run while you r fil e is uploading.
f . When the file is uploaded, you will see the name djsplayed in the file list wi ndow in Fetch's pri ncipal dialog box.
6. Upload a graphic file to your directory.
a. Click on the Put File button.
[ Put File...~)
b. Use the fil e list >vindow in the dia log
6a.
box that follows to select a graphic file that you would
like to upload.
c. When you select a file, Fetch identi lies the file format as MacBinary II (Figure 6c).
d. It is important that you do nol send a graphic file to a Urux server as a MacBinary fi le. Press on the pop-up menu next to Format, and se.lect Raw Data. Click on OK.
e. When the file is uploaded, you wi ll see the name
di splayed in the file list window in Fetch's principal rualog box.
fllth: ··w.tct.ott
Fetch =...-.,.. (II... fow-- c i ~ Oof"·JO
J
.. I \ania t · I
D,,..,.,_ .
D ,~.,.
"
0 ....... ,...
0 · · -"'""
l uau COftMt UM ··I
.l.:.f"-...
'h",',..,..'.".""'
t l ? l...h t
Go.
@ft UIDIIIII Ur
O T,.Ht
li O o tnery
,,
Iii
Client-Side Image Maps I 263.
retta:·wllf.t<hOIM c..u·
l l Fe tch ~:,·::!-~
(c··, ·C·naectto· · wl
~
I 0~'".."."_',...
~'"
I 7a.
® Automatic
Q lf'lll
Q IIIIUIIIJ
fli
~Direct ories
IJICLU rile...
XL
utcw rile list
Get o trcc: torlos entl rues...
rut ruldcn and rues...
Rename rile...
,.
Send f U ' Comrnn nd...
7b.
nrc uou i ure you w en t to delet e the file "'"rubor.htrnl..?
( 3 } ( Cancel J
7c.
(Close Connection 3CW)
Ba.
~f.dlt Acmo l e Ope n Connccllon... 3CO D11en Bookmork... Open Shortcut Close Connection XW Snue Rookm(uk... XS
Pnge \ Cl UJI ...
- -Ptmt-... - - - --
Bb.
7. Delete a file. a. Select a file in Fetch's principal dialog box. b. Select Delete Directory or File from the Remote pull down menu. c. Click on Delete in the dialog box that follows to verify you want the file deleted.
8. Exit Fetch. a. Click on the Close Connection button in Fetch's principal dialog box.
b. Select Quit from the File pull down menu.
264. JChapter 7
r
Artist featured In this chapter: Steven McGrew is a Senior Production Associate m the New Media CentedUniversity ofOregon Compllling CenteJ: Steve has a B.S. jivm the University of Oregon in visual design/ compwer graphic.1·. Slncgrelv@oregOII .uoregon.edu
Artist featured in this chapter: Marc Thorner i.1· a new media artist speciali:ing in 3D animation and digiwl video. Jnthonler @pipelille.cmll
Video
Streaming video is d1e latest technique for add ing a video cli p to your Web page. Streaming means the re's no waiting for a video fi le to download. The tile is instanll y transferred for viewing on Power Macimosh and Windows 95/NT machines. Of the options avai lab le on the market, di gital video expert Marc T horner reco mme nds VivoActive, whi ch does not req uire special software or hardware on the Web server.
In tlus chapter, you' ll leam how to compress a video file using a trial copy ofYivoActive Producer software and leam facts about Apple's QuickTime Plug-in, which allows you to embed QuickTime movies on a Web page. You' ll also learn how Premiere's Movie Analysis Tool can be used to examine movies you download, plus Steven McGrew offers tips on capturing and compressing.
Marc Thorner's tips on using VivoActive Producer to create streaming video
Summary: Download a copy of VivoActive Producer to create a compressed video stream viewable with the VivoActive Playa Find both software programs at http://wwll'. vivo. com.
T ake advantage ofVivo Software's trial download to experiment with VivoAclive Producer software, whkh compresses video at a ratio of200: I. Build a streaming video file for Web visitors to see with the VivoActive Player.
1. Open a movie in VivoActive Producer.
a. Start VivoA ctive Producer.
b. The VivoActive software will be d isplayed. c. Select Open Movie from the Fi le pull-down menu. d. In the dialog box that follows, selec t a movie to be
compressed, and c lick on Ope n.
e. Your movie's file name w ill appear in a File List in
the YivoActive Produce r wi ndow.
,liv oAc tivo? Producer (Tria1) l a.
lb.
Protriew
ClMG( 2
OJ!D
~
~
~~~····~'"~m~foJ~.,~· ----~ ~
C!] \ h(ltlj r uvll!w
ld.
Tip: The film clip image in this section
1e.
was provided by Fabulous Footage at
http://www.FOOTAGE.IIet: 2900.
(, I'IIIIIU.
lluH
1c.
Video 1267.
u.
··treflel ···· ~h·' l·trene i Nitll Moho.,
1\0"1 Hud UIOI HG"' tll!]h Moh en Modem Ht&d i he'
Vivo Active Guide
1g.
[Gene-r:ah Selection) 2a.
J· ) ] I C ·l 1
(lot 1· . . ... httt I"Wl " ' ' ' H· · II r ..-~, t..l tt. Ool\
11·~
2b.
f. SelectApplyiModem High Motion from the Seuings pull-down menu. Thi s will apply a data rate and a frame rate that is suitable for a modem transfer.
g. Documentation for VivoActive Producer is in the form
of a VivoActive Guide. When you install the VivoActive software on a Power Macintosh, this document gets installed as an Apple Guide, which is accessible from the Guide pull-dow n menu in the Macintosh Finder.
2. Compress the movie. a. Click on the Generate Selection button at the base of
the VivoActi ve software window. (Note: Tile
Generate Selection button will only be available if
your movie 'sfile name is selected.)
b. The software will display the original movie and the compressed version while it is being compressed. A VTV file will automatically be saved in the folder where your movie is located.
c. Should you dec ide to generate another compressed movie with an alternate setting from the Seuings pulldown menu, a click on the Generate Selection button will display a Save As dialog box. You wil l need to save new movies under a di ffcrent file name.
Tip: Follow the directionsfor using the
<EMBED> tag in the next section as a
guidefor embedding a VIVfile on a Web page.
s tatul'.mov
3a.
statul' .viv
3b.
'] Q~ E!I:J [~
'------""
2c.
3. Compare file sizes. a. The original compressed movie file (co mpressed with
Cinepak) is 1.3 MB. b. The VIV file following compression in VivoActivc is
48 K. An Intranet High Motion setting produced a 204 K fil e.
268. 1Chapter 8
Experiment with Apple's Quicklime Plug-in, and embed a QT movie on a Web page
Summary: Build a page with an embedded QuickTime movie viewable with Apple's QuickTime plug-i11. Download a copy ofthe plug-in f rom http://www.qu ickti nle.app le.c o Jn . Also, look for dew ils on how to configure your browser to work with the plug-in at http://www.quicktime.apple .comlsw/browserconjig. htJnl.
Tip: Thefilm clip image on this page was provided by Fabulous Footage a t http://www. FOOTAGE.net :2900.
F ollow these steps to experi ment with Apple's QuickTime plug-in. Download the software, configure your browser, and create a Web page with an embedded Q uickTime movie.
1. Download an all·in·one Quicklime bundle. a. Visit http://www.q uicktime.apple.c om, and follow the
links to A pple's "Easy Dow nload" fo r Mac intosh. O ne downl oad inc ludes QuickTime 2.5, Movie Player 2.5, a nd the Q uickTime plug- in for Netscape. b. (Optiona l) Download the MPEG Extension 1.0 for Lhe Power Macintosh at the sa me loca tion. W he n the Q uickTi me M PEG extension is installed in your Power Macintosh Syste m folder, the MoviePiayer application will be able to play M PEG fil es.
2. Add the Ql plug-in to the Plug-Ins folder.
Drag the new Q uickTime plug-i n to the Netscape Plug-Ins folder inside the Netscape Nav igator fo lde r. You wi ll need to re-start the browser fo r the new plug- in to work , and yo u may need to visi t hllp:l/ www.q uicktime.apple .com/sw/browserconfig. html fo r deta ils o n how to get yo ur browser to recog nize the new plug- in.
3. Embed a Quicklime movie in a Web page.
Q uickTim e movies, Q ui ckTime VR Pano ra mas, and MPEG movies may a ll be embedded in a Web page using an <EMBED> tag.
Video 1269.
Tip: Ifyou do not know the width and
height ofyour QuickTtme movie, open the movie in the MovieP/ayer 2.5 application, and select Get Info ftvm the Movie pull-down menu. In the dialog box thatfollows, select Sizefrvm the File pop-up menu. The width and height will be displayed.
=
Normal : 160 x 120 pixels Current: 160 x 120 pixels (Normal)
270. 1Chapter 8
a. Open SimpleText. Use S impleText or your word processor. If you use a word processor, be sure to save the document as Text only.
b. Create a new HTML document. Start a new document with the following markup tags:
<HTHL>
<HEAD>
<TITLE>Sample Movie</TITLE>
c. Create a body tag, and add color attributes. (Note: See the Online Tools chapterfordetails on how to select colorfor your Web page.)
<HTHL>
<HEAD>
<TITLE>Sampl e Hovie</TITLE>
<BODY BGCOLOR-"#000000">
d. Add a <CENTER> tag. The center tag will center the QuickTime movie on the page.
<HTM L>
<HEAD>
<TITLE >Sa mple Mouie</ TITL E>
<BODY BGCOLO R- "#000000">
<CE NTER >
e. Add an <EMBED> tag. In this tag, the width and height of the e mbedded QuickTime window is defined in pi xels. Add 24 pixels to the height of the movie for the de fault CONTROLLER. The width and height attributes are required for both QuickTime movies and QuickTime VR panoramas. Optional attribu tes include: · The CONTROLLER anribute, which may be set to TRUE or FALSE. The value contro ls its visibi lity. TRUE is the default setting for the CONTROLLER. · The LOOP attribute makes the movie play in a loop. Optional val ues include TRUE, FALSE, or PALINDROME, which makes the movie play
alternately forwards and backwards. PALINDROM E should not be used with QuickTime VR pa noramas. The default value for LOOP is FALSE. · AUTOPLAY causes the movie to play as soon as the plug-in est imates it has enough data to play the entire movie. Optional va lues include TRUE and FALSE. The default value for AUTOPLAY is FALSE.
<HTML> <HEAD> <TITLE> Sampl e Movie</TlTLE> <BODY BGCOLOR- "//000000" > <CENTE R> <EMBED SRC- " statue . mov " HEIGHT-144 WI OTH-160 CON TROLLER- TRUE LOOP- TRUE AU TOPLAY- TRUE>
f. Add closing tags.
<!CE NTE R>
<I BODY>
<IH TML>
g. Save your document, and test it in Netscape. Save
your document. Open Netscape, and select Ope n File fro m the File pull-down me nu. In the dialog box Lhat follows, select your HTML document, and click on Open . Make sure your movie file is in the same directory as your HTML document. If you have the QuickTime plug- in installed, and you have the Netscape browser configured to identify the plug-in, the movie wi ll load and play. (Note: At the time ofthis writing, Apple Co111pute r has not yet finished docu mel!ting and testing the Int ernet Explorer 3.x browser and the QuickTi111e plug -in. )
Video 1271.
272., Chapter 8
Summary of HTML tags used in this section. T he tags you see in this list (in alphabetical order) reflect the HTML 3.2 specification. <B>...<IB>
A tag used to apply boldfacing to text.
<BODY>...<!BODY> A tag used to open and close the body of a document.This tag uses the BGCOLOR="#RRGGBB" or hexadecimal red-green-blue triplet attribute, which adds color to a browser page. For example:
<BODY BGCOLOR·"#ffffff">
<CENTER>. ..<!CENTER> A tag used to center e lements on a page.
<EMBED> A tag used to embed elements on a page. In this example, tl1e element is a movie fi le. This tag uses tlle SRC attribute to indicate tl1e source of the movie fi le. The WIDTH and HEIGHT attributes are used to describe tlle size of t11e movie in pi xels with 24 pi xels added to the height to accomodate the movie controller bar beneatll the movie. The CONTROLLER attri bute controls the visibility of tlle controlle r and may be set to TRUE or FALSE. The LOOP attTibute makes the movie play in a loop and may be set to TRUE, FALSE, or PALINDROME, which makes the mov ie alternately play forwards and backwards. TheAUTOPLAY attribute makes the movie begin playing as soon as the plug-in has e nough data and may be set to TRUE or FALSE. For example:
<EMB ED SRC·"statue.mov " HEIGHT-144 WIDTH-160 CONTRO LL ER-TRUE LOO P-TRUE AUTOPLAY· TRUE>
<HTML>.. .<IHTML> A tag used to ope n a nd c lose an HTML document.
<HEAD>. ..<IHEAD> A tag used to open and close the header portion of a document.
<TITLE>.. .<!TITLE> A tag used to describe tlle title of a document, which shows up inside th e browser's title bar.
Use Premiere's Movie Analysis Tool to learn about data rate and compression settings
Summary: Familiarize yourselfwith the performance specs ofmovies you download.from the Web.
Projec t Malee Clip Windows
.--'------"-;~-,
Op en...
3 0
Import
~
Capture
~
Cl ose
3 W
Saue
;lilS
Saue As ...
Euport Tools
~ ~~--~~-----.
~ Conform Mouie·..
Fol der Cleaner...
Page Se tup...
· ·· ·
Pt int...
3P
Batch Mouie Maker...
Preferences ~ Miniat ures ...
Project Trimmer...
Quit
3 0
RppleTallc Control...
Ke board Shortcu ts...
1.
Choose a til e or rol der to anal yze:
·I ]ei! Mork
f:::) nP S Urluc'"
1~-!loy.,lce.qt D l ccCreo m.mou D Lll Ooy.ort
D ll ocompressed MooU
D test.m ou
0 ( rJeri I I ( Ocskllll'
I ( Cnncel
In ~ u,H.-n n
(
Sele ct 'Mork'
I Q§!i!~!J~I
( rin d··. ) ( Fond Agaon J
2.
Tip: Thefilm clip image on this page \Vas provided by The Image Bank, Inc., a source for still photographs, film footage, and illustrations (800-T/B- images).
Adobe Premiere' s Mov ie Anal ysis Tool provides a valuab le means to learn about movie specs, inc luding
average frame rate. data rate, compression
settings, and aud io quality.
r:;
Adobe P~e-mi e r eTM
1 . Select the Movie Analysis Tool.
Select ToolsiMovie Ana lysis fro m the File pull-down menu.
2. Select a movie to analyze.
Use the file list w indow in the dia log box to locate the movie you wou ld li ke to analyze. C lick on Analyze.
3. Print the specs.
Se lect Print from the File pull-down menu to print lhe specs.
The Web is considered " low bandwidth". The World Wide Web is considered a "low-ba ndwidth" appl icati on for d igital movies, co nside ring that the average Web visitor uses a 14.4 Kbps modem to down load movie fi les. Compare this to an average hard drive, which can transfer data at onl y 300 Kbps. If you want Web vis itors to down load mov ie fil es, special atte ntion should be g iven to fi le size.
Capture settings. Nea rly every item in this movie ana lys is report (except fo r the file name) can be traced back to the capture settings.
Video 1273.
§[B= Analysis of Boy_ice.qt ====!ill~
Movie:
Q
File nam· is "Boy _leo.qt "
Filo siz· is 434.4K
Averag~ data rat ~! is 4 1.9K per second
II co ntains 1 vidoo track( s) and 0 aud io tracl:(s).
Video : This movl· appoar s to havo DROPPED FRAMES. Thoro ar e 20 framos with a dura tion of 1 / loth. Thoro ar e 60 fr amos with a dura tion of2/ 15 ths.
Vidoo tr acl: I : Duration is 0 :00 :10 :12 Aver ago framo rat· is 8.07 fps
Vidoo track I co ntains I typ·(s) of video data :
Vid·o dat a bloc k 0 1 :
Framo Siz· = 160 x 120
Compressor = Cineopak
Quality = Nor ma l (3 06)
~
B
, o ===- Ana ly sis of Secret.qt ~ ~0:
Movie : File- name is "Se cr e t .qt"
~
Fil· siz· is 3.2M
Average data r a te is 76.6K per second
It contains I vidoo track(s) and I a udio track(s).
V1doo : Th· r·· ar · 4 3 1 fram·s w ith a duration of I I IOth.
Video track 1 : Duration is 0 :00:44 :05 Av·r ag· fram· rate is 10.03 fps
Video t rack I contains I typo(s) of v ideo data:
Video data block 0 1 : Fram· Sizo = 160 x 120 Compressor = Cint;;pak Quality = High (4 .00 ) T·mpor a l = High (4 .00)
Audio: Audio traok I contains I type(s) of audio data :
Audio data block ·1 :
Format= 8 bit- Mono
tn;
Ra t· = I I 127 Hz
!m;?;:
The choices you make whe n yo u dig iti ze movie data will determine a movie's characteri sti cs. Consider the fo llowing movi e characteri sti cs with respect to th e World Wide We b:
Movie spec
If the movie is for the Web...
file size
File size will affect lhe amount of time a Web visitor will have to wait for a download to be completed.
To calculate the a mo unt of time it will take to down load a movie a t different modem speeds, div ide the mode m s peed ( 14,400 or 28,800) by 8 because the re are 8 bi ts to one byte o f da ta in thi s situation. Di vide the number th at re pre sents the size o f you r movie fil e by this number, then div ide by 60 (60 seconds per minute). This will g ive the (theoretical) number of minutes re quired to download a mo vie fil e.
(Note: When movie data is transf erred over telephone wire, even if a Web visitor has a 28.8 Kbps modem, this bandwidth may not be available everywhere. Certain areas have a maximum bandwidth of2.4 Kbps.)
average data rate
Data transfer inside a computer is measured in ki lobytes per second. Because a Web visitor downloads movies and th en plays the m on a hard drive, your movie's data rate should not exceed I00 to 200 Kbps, because the data rate of an average hard dri ve is only 300 Kbps. If the movi e data rate is too fast, the movie will drop frames.
274. 1Chapter 8
average frame rate When you capture a movie, fram e rate is a function o f the co mputer's processing power or the speed of the hard dri ve depending on whether the mov ie is captured to RAM or to the hard drive. Ideall y, the frame rate should be a function of the playback requirement. However, download time is a n important factor when you create movie fi les for the Web, and a higher frame rate implies larger files. (Note: See Steven McGrew's tips on capturing and compressing.)
frame s ize
Frame size affec ts file s ize, so We b movi e frame size should be limited to 160x 120.
compressor
Qu ickTime has seven so ftware compresso rs built in: Animation, C inepak, Compone nt Video, Graphics, Photo-JPEG. None, and Video.
audio format
Three sound compo ne nts affect sound data rate:
sample rate
the number of sound samples per second
sample size 8-bit or 16-bit
number of channels
mono or stereo; choose mono because ste reo sound can only be heard on stereo-capable hardware
Video j 275.
Steven McGrew's tips on capturing and compressing
S ummary: When you 're creating moviesfor the World Wide Web, the choices you make during capture and compression set thefile characteristics. Leam about the variables that will affect the size and quality ofyour movies. Tip: The film clip image on this page was provided by The Image Bank, Inc., a source for still photographs·.film fool age, and illustrations (800-TlB-images).
276. Chap1er 8
Steven McGrew, who is a digital med ia designer/animator at the Univers ity of Oregon, offers the fo llowi ng advice on capLUring and compressing.
1. Evaluate your material. Before you capture a single frame, look at your material and think about issues such as frame size. Can the movie be captured at 320x240 or is 160x 120 large enough? Is color necessary, or wi ll black and white be good enough?
2. Uncompressed raw data. Ifdisk space is not a problem and your capturi ng hardware supports un com pressed capturing, this is the best choice. When you stan with uncompressed footage, you' ll always get superior resul ts-especially if you post-produce your footage in a mov ie editor program such as Adobe Premiere. Compression adds artifacts such as jaggies and blurring, wh ich are always compounded by effects, transi tions, and filters in the editing software.
3. Post-production blues. Limit the post-production process and remove as much material from the clip as possible. If the subject doesn't move, cut the frame !
4. Compression is about compromise. For World Wide Web movies, use the lowest possible frame rate. You' II be able to get away with a very low
Tip: The Media City Web page at http://www.MediaCity.com/-enveb is a good place to sample a variery of QuickTime movies, QuickTime VR panoramas, and Quicklime sou11ds that have been embedded 011 the page.
frame rate if your subject is stat ic or doesn ' t move very much. Fast actio n requires a much higher frame rate. Because compression involves a tradeoff between frame rate and image quality, use a "give-a-little. take-a-little" philosophy when determ in ing the final co mpression /frames per second settings.
5. Selecting a type of compression.
QuickTime and MPEG are c urren tl y the most widely used compression standards. Q uickTime is easy to use and gives good performa nce. It ca n include so und and can be played on both Macintosh and IBM PCs. Of the software compressors built in to Qu ickTimc. the C inepak codec (co mpresso r decompressor) is the best.
MPEG is difficult to use and is not well supported on Macs. However, MPEG can produce movies that arc several times smalle r than QuickTime mo vies. Use MPEG for longer mov ies that do not requ ire aud io; this format gives the max imum amoun t of compressio n and the best final product.
6. Apple's new MPEG extension.
Apple's Qu ickTime MPEG ex tension gets installed in a Power Macintosh computer's System folder and provides playback and control of MPEG movies. The MoviePiaycr app lication can now be used to play QuickTime. QuickTime VR panoramas, and MPEG movies. Al though the QuickTime MPEG extension provides playback. it does not provide a compressor componen t.
7. Conclusion.
When you 're creating a movie fo r the World Wide Web, make it as small as possible. Try to design your materi al around the Web's bandwidth limitation and be aware of the time required to download your mov ie.
Each cl ip should be evaluated separately to dete rmine the best compression me thod. When in doubt. use QuickTime Cinepak.
Video 1277.
Creating a link to a movie on your Web page
Summary: Create HTML links to QuickTime movie.files. Include the.file type and.file size to help Web visitors make a decision whether to download.
an:uu.. Ciuru ld'~lrolll!l!w' llt
l<!!I~~~J!Il'lioltilJlT
Ndull itl!i!·,l.i:-11> f!! ~l.QX
l'fi l!l!!Prr.loii...L'I.'D<.MI'P~
Tip: The.film clip image on this page was provided by The Image Bank, Inc., a
source forstill photographs, ft fm footage,
and illustrations (800-TIE-images).
~
mult ;colo r 1_dots .g;f 278. 1Chapter 8
N ested definiti on list tags can be used to create a "parag raph inde nt" aga in st a background G IF image that has been downloaded with the <BODY BACKGROUND> tag. To start the type down the page, begin with an < IMG> tag that re fe rences a small , clear GTF image.
Try this example. which contains four links to movie fi les.
1. Open SimpleText.
Use SimpleTexl or a word processor. If you usc a word processor, be sure to save the document as a Text O nly fi le.
4!3
SknpleText
2. Create a new HTML document.
Start a new documenL with the follow ing markup tags:
<UH1L> <HEAD > <T ITLE>Kids</TITLE> (/HEAD>
3. Try the <BODY BACKGROUND> tag.
In this example, the multicolored background was downloaded as a small tile from the Netscape's Background Samples page (htlp://home.netscape.com/assist/ net_sites/ bg/backgrounds.html).
a. Open the tile called multicolorl _dots.gifin Photoshop
as a CompuServe GIF image.
3a.
Composite Controls ...
3d.
Fill
~ents
-'Foregrountl Color
Oackgrountl Col or
, men Opocl
Mo
0 Prl
'-
~LilJC d
SnO(lS il O I
Dlock 50% Groy Willie
3f.
iJ (1 OK B ~
r-
3j.
b. Select RGB from the Mode pull-down menu.
c. Choose A ll from the Select
pull-down menu.
d. Choose Define Pallern from the Edit pull-down men u.
e. Open a New doc ume nt, name 3c.
it multi.gif, and make it 603x3 17 pi xels and 72 dpi.
f . C hoose Fi ll from the Ed it pull-down menu. Select Pattern from the Usc pop-up menu, l 00% Opacity, and Normal Mode.
g. To create the "vellum" (to make the rype readable
agaj nst a busy background). drag to select an area of the backgro und art, and c hoose Fill from the Ed it pulldown menu.
h. Choose White from the Usc pop-up menu. 50%
Opacity, and Normal Mode.
i. C hoose Indexed Color from the
.._. 1 1 ~ Image Bi tma p
Mode pu ll -down menu , and c li ck Grayscal e
on OK. j. Choose Save As from the File
Duo tone
I' · I
I I
-/ RGB Co lor
·.
CMYK Color
pull-down menu , and select
Lab Co lo r
CompuServe GlF fTo m the choices Multichannel
on the Format pop-up menu. The
Color TBb le ...
result is shown in Figure 3j.
31.
k. Refer to thi s image in the <BO DY BACKGROUND> tag.
<HTHL> <HEAD> <T ITLE >K ids</TITLE> </ HEAD>
<BODY BACKGROUtW- "mu l t i. gi f " >
Video j 279.
Tip: The MoviePiayer application ftv m Apple Compwer can now be used to play QuickTime movies, QuickTime VR panoramas, and MPEG movies.
4. Start the type down the page.
To start the type down the page, use the <BR> tag to add line breaks.
<HTHL> <HEAD> <TI TLE> Kids </T ITLE> <! HEAD> <BODY BACKGROUND- "multi .gi f "> <BR> <BR>
5. Add a group of nested definition list tags.
To create the equivalent of a paragraph indent, use the <DL> (definition list) tag. lJl this example, e ight opening tags arc used, and eight ending rags are used. Adding more than one is call ed nesting the tags.
<HTML > <HEAD> <T ITLE> Kids</TI TLE> </ HEAD> <BODY BACKGROUN D- "rnul t i .gif"> <BR> <BR> <DL><DL><DL><DL>< DL><DL>< DL> <DL> <IDL>< IDL><I DL>< IDL>< IDL><IDL><ID L><!D L>
6. Add a headline between the <DL> tags.
Once the required number of <DL> tags are in place, add the tex t in between the opening and ending tags. (Note: The <H2>.. .<IH2> tag isfor headline rype.)
<HTHL> <HEAD> <T ITLE>Kids</TITLE> <! HEA D> <BODY BACKGROU~ D - " m ulti . gi f "> <BR> <BR> <DL><DL><DL>< DL>< DL><DL>< DL>< DL><HZ>Videos :</ HZ><IDL>< /DL><I DL><I DL ><IDL><IDL>< IDL><IDL> </ BODY> <I HH1 L>
280. j Chapter 8
7. Add a paragraph tag. The <P> tag will create a new paragraph.
<HHI L> <HEA D> <Tl TLE>K ids</TITLE> </HEAD> <BODY BACKG ROUND- "mult i .gi f"> <BR> <BR> <DL>< DL><DL> <DL ><DL><DL><DL><DL><H2>Videos : </H2><P><I OL> </DL><IDL><IDL><IDL><IDL><IDL><ID L> <!BODY> </HH1L>
8. Add the links to movie files. Create links to movie Iiles by opening with the link tag <A> in conjunction with Lhe HREF attribute. and placing text between the opening and closing tags. Th is text will serve as a clickable hotspot on the Web page and can be identified with an underline. (Note: End each line wi1h a paragraph tag,
<P>.)
<HTNL> <HEAD> <TITLE >Kids< / TJ TLE> </ HEAD> <BODY BACKGROUND-"multi .gif"> <BR> <BR> <D L><D L>< DL> <DL><OL><D L><D L><DL><H2>V ideos : </H2><P> <A HREF-"Chi ldl.mov ">Boy with Ice Cream 1.4 HB . Ma cintosh QT <IA><P> <A HREF-"Chi ld 2.mov">Little Gi r l 1.4MB, Ma ci ntosh QT <IA>< P> <A HR EF-"Chi ld 3.mov ">Kids wit h Gi ra ffe 1.4MB . Ma cin tos h QT <IA><P> <A HREF-"Child4.mov" >Boy and El ephant t. 4 ~1B. ~1aci n tosh QT <I A>< P> </ DL><!DL></DL><IOL><!DL><IDL><I DL><IDL> <! BODY> </ HTt1L>
\!ideo 1 281.
Tip: QuickTime VR panoramas are usually IIIIIch smaller !han Quicklime m o vies.
Eric Chen, !he compuler scientist who developed QuickTime VR at Apple Comp111e1; hasfonned his own company called Rea/Space hllp:llwww.rlspace
.COIIl.
His Vistographer Lite is software that CCIII be used to create a 360-degree pano rama.
9. Add bolding to the underlined (link) text. In thi s example, the <B> and <IB> tags will bold the text that visitors will click on. The text will appear underlined and boldfaced.
<HTML> <HEAD> <TI TLE> Kid s</TITLE> <!HEAD> <BODY BACKGROUIW- "mu 1t i . gi f"> <BR> <BR> <DL><DL>< DL><DL><DL>< DL>< DL ><DL>< H2>Vi deos:</H2><P> <A HRE F-"Chil dl. mov" ><B>Boy wit h Ice Cream 1. 4 MB. Macintosh QT <IB><IA><P> <A HREF-"Chi 1d2.mov "> <B>Litt1e Gi r l 1.4MB. Ma ci ntosh QT <I B><IA>< P> <A HREF-"Chi 1d3. mov ">< B>Ki ds wi t h Giraf fe 1. 4 MB, Macintosh OT <IB><IA><P> <A HREF- "Chi 1d4. mov">< B>Boy and E1 ephant 1. 4 MB, Maci ntos h QT <I B><IA><P> <IDL><ID L><ID L><IDL><IDL><IDL></DL><IDL> <! BODY> <I HTI1 L>
282.j Chapter 8
Tip: One ofthe best ways to team how to use HTML tags is to view the tags used in yourfavorite pages on the Web. To see the HTML tags that make up a page, select Source from Netscape 's Vie11· pull-down menu.
Summary of HTMLtags used in this section. The tags you see in this list (in alphabetical order) renect the HTML 3.2 specificati on. < A > . . . <./A>
Referred to as an anchor, this tag uses the HREF attribute to link to an external sound fi le or anchor. For example:
<A HREF- "Chi l d4.mov"><B>Boy and Elephant 1.4MB. Macintosh OT <IB><IA>
(Note: The moviefife name must include the path name !f
the.file is located in another direct01y).
<B>.. .<IB> A tag used to apply boldfaci ng to text.
< B O D Y > . . . <.IBODY> A tag used to open and close the body ofa document.
<BR> A tag used to inserL a line break.
<DL>...<IDL> The delinilion list tag is usual ly used for definit ions or short paragraphs with no bullets or numbering . ln this chapte r, this tag is nested e ight times to indent the word Video a t the bono m o f each page. For example:
<DL><DL><DL><DL><DL><DL><DL><DL>Vi deos<IDL> <IDL><IDL><IDL><IDL><ID L><DL><IDL>
<HTML>...<IHTML> A tag used to open and close an HTML docume nt.
<HEAD>...<.JHEAD> A tag used to open and close the header porti on of a d ocum ent.
<IMG> Used to refer to an in line image, this tag uses the SRC amibute, whic h represents the URL (location) o f the image. For example:
<IHG SRC - "clear.gif">
<TITLE> .. .<./TITLE> A tag used to describe the title ofa document, whic h appears inside a browser's title bar.
Video 1283.
Pick the best palette for an 8-bit color Quicklime movie using DeBabelizer' s Super Palette, and create a script to remap your movie
Summary: Use this example to learn how to create n Super Palette in DeBabelize1; hotv to use DeBabefizer's .fimctions i11 Batch mode, and ho w to create a script.
~
De Babeli2:er® Tip: The.film clip image on this page 1vas provided by Fabulous Footage a/ http:llwww.FOOTAGE.net:2900.
284. Chapter 8
D e Babe li ze r, by David Theurer, is a ·'graphics processing . manipula tio n, and translmion tool" that can be used to alter QuickTime movie pale ttes. De Ba be li ze r's unique Super Pa lette feature is des ig ned to c re ate the best pa le tte (o f 256 o r fewer colors) for a series of images o r, in this case, frames.
1. The color tradeoff.
When a 16- or 24-bit movie is played on an 8-bitmoni to r, the Macintosh computer's Color QuickDraw w ill do the color mapping to approx imate a larger color palelle. In thi s case, DeBabelizer can be used to create a predictable 8-bit palette.
AJthough the c usto m, 8-bit Super Pale tte wi ll look beuer than the approximate 8-bit palette drawn with Color QuickDraw, the o nly codecs that can save an 8-bit palette are Animation and None. Both of these co mpressors create much bigger movies than movies co mpressed with Cinepak, a codec that defaults to a 24-bit pale tte. As a result , you' II need to limit 8-bit Q uic kTime movies to very few frames to keep the fi le size sma ll.
2. Creating a Super Palette.
You can create a Super Pa leue and man ually remap a group of images wi th the new pale tte, but because a mov ie has so ma ny fra mes, Greg Marr at Equilibrium reco mmends using DeB abelizer's Batc h a nd Scripting fea tures to automa te the job. Try the example in this sec tion to lea rn how De Babe lizer can automate your work.
Ca l a l o g ...
Op en Chann el s ... Compare ···
Req u i r e
EHport...
Place ...
<it[ saue .·.
!' l ace fltquire
Saue Simple ...
llet·et I to Ot tgm a l Slideshow ...
( IO$P
Saue ns ...
Super Palette ..·
oo w--------------~ :li:S Place & Saue ···
EKJIOI t
Place Ocquire ll' Soue ...
Page Se tup .·.
Print .·.
~it P
llelet l'
3GK
Quit
4a.
![ Ne!0Y
lis t:C : .
4b.
Edit... ) [ Delet e )'
·I
3. Open DeBabelizer.
C lick open DeBabelizer.
4. Begin a Super Palette in Batch mode.
Instead of manually factoring in a movie's frames as votes to form a Super Palette of the best 256 colors, DeBabel izer's Batch feature can be used to open the en tire movie and look at co lor in every frame.
a . Se lect B atch iSuper Palelle from the File pull-down
me nu. b. C lick on the New bu tton in the Batch Super Palette dia-
log box.
c. Use the fi le Jist w indow in the dialog box that
foll m.vs to find your QuickTime mov ie.
lei! Moules ·I
~ Oetlouins.qt ~ Girl ~ m on_boby
! Stotue.qt
c;::) APS Orlue"'
o [ [J t·l:f
[ Desklo11 [ 0JH!fl
Insert ->
Botch list
i Show rue Type:rj "n"L:-L;- -----,~=>J Cancel ~~~~;~:~~ ~;~~~::·ms: 0
·Ill IM Fllt cr:l Fast: 11!1 File Type
~om·
New Botch lis t Name
4c.
d. C lick on the Append button.
e. Ente r a name fo r this batc h in the box labeled Batch
List Name.
[Check Missin!il '*itPm< · t Batch list Name:
IStatue batch ~
4e.
f. C lick on the Save button .
Video 12 8 5.
. ~I n itia li ze Super Pa l ette before s tarting Sa.
Itor eocn 1m I I 1 I
Stop ond wait · t oc tor m Pause for I second ~Imu:!lll v' Pau se for 2 seconds
- Pause lor I 0 seco nds
Wh en oi l do Pause f or _ second s: 10 th e p01 " ' U; VUVUV IIICIIU , \!)Coli II "The Super Pal ette "
I 0 Coli II: Super Pa lette Nome
~c o l ors In Super Pal ette.
183 Moclnllze Super Polelte.
f8] Oyp oss warning me~[i:j ,
U n ut o OK In dlologs In u secon ds
[ 00 IT ] (concelj(EBII with se ttings )[llelp ...) Sb. 1When all done, odd Super Palette
to the polette popup menu:
0 Ca ll i t "The Super Pole li e"
I @Co li It: Statue patell~ 1\'
~colors 10 ~uper l'ote ttM.
5c.
~Mocintize Super Pa lette.
Sd.
Se,Sf.
3 Skip this dialog [OPTION ouerrides]
6a1.
[ OK ~J)
6b.
S laluo .q l 5of71
8c.
5. Fill in the Batch Super Palette dialog box· a. Click to put an X in the box labe led lnitiali:.e Super
Palelle Befo re Starting.
b. Select Display Off from the Display pop-up menu.
c. Click the radio button/box labeled Call It, and fill in
your own palette name, replacing Super Palelle Name.
d. Click to remove the X in the box labeled Macintize Super Palette because the movie wi ll need to be seen o n IBM PCs (on the Web).
e. C lick to put an X in the box labeled Bypass Warning
Messages. f. Click to remove the X in the box labeled Auto OK In
Dialogs In 8 Seconds.
g. Click the DO IT button. (Note: The QuickTime Mo11ie
Open dialog box will be displayed.)
6. Poll the frames. a. Click to put an X in the box labe led Skip This Dialog at
the bottom of the Qu ickTime Movie Open di alog box. (See F ig ures 6a1 a mi 6a2.)
b. Click on the OK button. c. DeBabelizer wi ll begin " polli ng" a ll the frames in your
movie to make a choice of the best 256 colors.
...I
Current f rome # ~
C~.t"r'tn\ umt· : 1 0\.r~ hoo units: 82
:· 11 miiTtilri ·] '"liiiltf.rld- --;)
6a2.
:!-.' ·'-1Cdhl ~ompl('l
(.1 \IJIH; ~omplf'l ('} Mt'11IO f'ldit ()114!k Plfil
[j ltliJI' OK
C J nnn· oc1h·c
I 286. Chapter 8
Delete EHecute RppleScript. .. EHp ort Bpple Scrlpt... ~ Watch Me ~top Heconlluy ... Sa.
8c,8d.
7. Create the Super Palette.
Click on the Create It button in the corner of the Create Super Palette dialog box.
Jf.fjMj Number o f colors in Sutl er Palette: or 18] On creation Super Palette, Maclntize II.
0 Coli It 'The Super Pole tt e·
I ®Coli it: Statue pa le tte
![ ( Cr eo le II ~J
Con cel
llelp ...
7.
8. Begin remapping by starting a script. a. Select New from the Scripts pull-down menu.
b. With the Ed it Script dialog box open, select Set Palette & Remap Pixels from the Palette pull-down menu.
I
.. ' Mise Script s
Options
~
SELECT FUN[
Po lette Info Polette
--- ---
[onuerl to Dll'W/ Groyscole
~
~ 1 - - ;,! 0 lnseJ1 ti<!IOI o liroo
~
® Oppena ot end
nemoue Unused ll' Oupllco t cs
Oeduce Col ors ...
KT
.. Change PhlCI Depth
,
~
(se1 LhH~ PfifiHlH~tl~rs J
I ( Select 011 :ten
Backgroun d nemouo l ...
(
fll'11ll.W·' I. HIO
I
Marinlize Pal e tt e Sort Palette
-~
~
"'
( lleltJ...
I
EHtro Funct
Nome:~
Super Pole ll e
-
- ----
Dll'W Ordered Dither
Merge Palettes ...
~~(~
Con eel
S<~WH
)
~
Sb.
c. The function tJ1at you selected wiJI appear in the Edi t
Scripts dialog box. A question mark will be visible because DeBabeli zer does not yet have enough information to process your request.
d. Double-click on the question mark, and the Set Palette & Remap Pixe ls dialog box wi ll appear.
Video 1287.
8e. 8fthrougb 81.
lllliii L0It l'alett e MISC scn ph
New ...
:MI N
-·
..Op en...
88 0 Ca t al og ...
Open Chann el s ... C UIIIIJUf u...
Acquir e
EHport ...
Plac e ...
o; [
'
Plare nc qutre
So ue Sim pl e ...
Rl'UPII to Ongmal Slldeshutv ...
( IOSP Sdu e R\ ...
.' l \
Sup er Pol ett.. ... l, lac e U' ~ u u~
-
EHpO I I
Pl ace Requi r e G ~uul!
1 0a 1 .
e . Select the name you 'vc g iven to your palette fro m the
Set Palette pop-up menu .
f. Click to put an X in the box labeled Remap Pixels.
g. Click to remove the X from the box labeled Dither
When Remapping. h. C lick to rem ove the X in the box labeled Do NOT
Remap To Off-Limit Colors. i. Click on OK. (No te: The question ma rk has tumed into
an "OK" symbol.)
9. Name and save your script. a. Enter a name fo r your script in the box labeled Name
at the bottom of the Ed i t Script dialog box.
b. C lick on Save.
INa me : [st o t ue scri pt
9a, 9b.
10. Save each frame in Batch mode.
When QuickT ime movies are saved i n DeBabelizer, i ndiv idual frames are appended to the end o f a mov ie. Like the polling required for creati ng a Super Palette, this i s another j ob that should be batched.
a. Select BatchiSave (Figure 8a I) from the Fi le pull -down
menu. The dialog box shown in Figure 8a2 will appear.
Do l ch Soue
... ll New ... J l Edit. .. J l De le te For coch lmogo In ll< l'
lis t ~ St a tue botc h
· Do Scrlpt:J NOliii NG
CJ Sta tue.qt
I ' 1 · Ois p lo ~: Di· play o rr
... I ... I
· Snue: I nuto Nomlng oe llons ...
® To: lffi::J~~~~~~~~~~~,~=-
O l o: Folde r lma qe como fr om
0 lo: Ma nuall y <PIPrt
I Type: PICT2
Colo rs :! '/~ill (0 lll h )
·J wM.a.1
... j[8J nu t o se t
@ Ope n 1 nu 0 Requir e;
I ni.io.m ntit:
O ls uce ... l
[8J Uerify re place
... ... ...
0 Pict ure Pre ule w 0 I lm<tgc:tiiP
0 Pic ture Icon
0 t arolmatlon-'tll£'
[8J Dy1mss wa rn ing m e ~~'
0 nut o OK In dluloys In o second ~
0 Don't go Into s ub fo lders ~(cnncel)(Euit with settings) ~
10a 2.
288. 1Chapter 8
lror coch Image In li st:
0UfiJmtmi JNOTIII" 6
· Dis play: Bedou in s et pale tte script
Dithe r to Stas he d Pa le tt e
· Soue:
Oilher to Super Pa le tte
(.i) To:(EI
0 To: rot
Q To: Mo
Q Tttpe:
Colors( ~
Omgll'Orop To PICT
Mos k Original with ntpha Chonnel
~~~: ~::: ~~ ~~~ ~~ : ~~~~/;;~n\e;r
Print Bes t on Color tmogc w riter
OrsiiCil... Trim to Solid Edges 0 Pictu re Pre uie w 0 I l11109<l..-lilt>
I ~
0 Picture Icon
0 1 .muu<~Hon'fill'
I
10b.
b. Select the name of your script from the Do Script pop-up
menu .
c. Select Display Off from the D isplay pop-up menu. d. C l ick on the Auto Naming Options butto n.
Fo r eac h image in Li st:
· Do Script:rl-s"'t,..a.-,.tu__e_s_c_r..i,.p""t',...-------..-.,.1
I · Disp lay: Dis play off
· Sa ue: [fiuto ~aming Op t ions ... ~
@ To: r~SD8·t B.~ abfeoPlS uD:nv<er""(B)O1e.b6a1blFhozlodr···
10c,10d.
e. Cl ick on the Original Name and the Extension For Save
Type radio buttons. (Note: Disregard the extension ifit is
incorrect: DeBabeli-::.er willfill in the co/ncr extension.)
f. C l ick to put an X in the box labeled Don 't Duplicate Extension.
~
"""Sou e fi l ename -
~ nuto Nemer
0 Use this:
I
I
0 Use this & add 1 b e for e .eutension
0 lise this If ildd 1 ill P.ntl
@ Orig inal nam e ·
18] Strip .eHten sion firs t
n Athl cell number
0 No eHtension
1m .I 0 Eutension:
@ En ten sion fo r Sau e Typ e: PICT
{( OK
l ~ ( Cancel
(
}18l Don' t dupli ca t e eH ten sion ~
l ll el p ...
10e, 10f.
Video J289.
11. Set the path.
DeBabeli zer will need to know where it should save the new movie. Greg Marr at Equili brium recommends that the movie be saved in a folder other than the folde r that contai ns the original (to prevent accidental file overwrite).
a . Click on the Set button on the Batch Save dialog box.
I ® To· Se t ~ APS Drive,... :O.babih<·r·.
·
·· DeBabtliz·r ® 1.61 Fold·r .
0 To: Folder 1mage came from
0 To: Ma nually se lect
11a.
b. Usc the file list window in the dialog box that fo llows to select a destination folder. (Note: As a11 optio11, c reate a New Folder to keep your 11ew movie separate from your old movie.)
@ To: !Set...);::~!':~"':"w'ob Book/McGrtw .11ovits
0 To: Folder Image c~m e from
0 To: Manually selec t
l l c.
Selec t des tination folde r:
!ell Moules ,.. I
~ Bedouins.qt
(:1 Glr I
13! man_batly fl Statue.qt
= llPS Uriu e"'
Jj Free: 2B7BB53 12
r lo.- t
Nam e of new folder:
l staLnet4 [Cance l ]
I
~ Create J)
lol H Open J]
[
Se lec t " Mo ui es"
l
Ub.
c. Click o n the Select (folder 11ame here) butto n. (Note:
DeBabelize r will display the path i11 small type 11ext to the Set burton, as shmvn i11 Fig ure 9c.)
290. I Chapter 8
I Type: Quicklime Mo ...... l~lovie
Colors:[ (.>~j(, '{il "tli·i~)"· · :.;.; 118l~uto set
0 !Slice ... !
!8J Uerlfy r eplace
0 Picture Preuiew 0 I image/file
0 Pict ure I con
0 I animation/ file
18] Bypass warning messages
0 Ruto OK in dialog s in [:]second s
s~[EHit with se ttings )~
12b.
Olsllce ... l
0 Uerify reploce
0 Picture Preuiew Clti Image/ file
0 Picture Icon
0 1 animation/ file
12c.
12. Indicate the file type.
a. Select QuickTime MovieiMovie from the Type pop-up menu in the Batc h Save dialog box.
Batch S8L
... ll New ... J l Edit... J l Delete For each
lis t:[ Statu e batch
· Do Scr
Or. llo lo CUT I MG JPEG. ·lfl r I FF .LDM
·
[) St ot ue.qt
:Q · Displo MacPainl
· soue: MSP tU~ P I
®ro: C NEO
O ro: I OMF'" Inte r change
~
PCH
o ro:~ Photoshop' "
t:mD PICT2
·
Colors: Picture Icon & Preuimll Onl y
~~ Pillat
0
QDU
@ Open I 0 Ac qulre'""t
'
Color Tabl e ONLY to or Moot!
I
I
Quicklime
'
Still
,·..iloitoioniotio:··--·· -··
0 Don't go in to sub fold er s
... O Au
I(Q!!!J]
Row AGil ALE Co mrui ~P.r u p"· SG I
( _nftimii.OP
·
~
12a.
b. C lic k to put an X in the box la beled Auto Set.
c. C lic k to remove the X in each of the six checkboxes
beneath the Auto Set box.
d. C lick w put an X in the box labeled Bypass Waming
Messages. e. C lick to remove the X in the box labeled Auto OK In
Dialogs In 8 Seconds.
f. Click on the DO IT button.
12d, 12e, 12f.
Video 1291.
Compression Sailings Co m p re s s o r - - - -
1 Onimotlon
... 1
I[ Dest Dep th
·I
.. ~~---~
----~~h-·~~---M-
( More... J
fi Cancel J
OK )J
13a through 13d.
lleBab eli zer
~~1~1;1° I
Statu· qt
8 of71
llrigml C\rTMI
Yide:
160
111 :
120
Color :
32768
OP l :
72
13o.
13. Select a compressor.
T he onl y two codecs that support 256 colors are Animation and None. Sel ecting any other codec will create a 24-bit movie, not an 8-bit movie.
a. Sel ect A nimati on and Best Depth from the
Compressor pop-up menus in the Compression Settings dialog box.
b. Use the slider to select a compression quali ty. c. Use the default setting of I frame per second and Key
frame every I 00 frames.
d. Click on OK.
e. DeBabelizer wi ll display the progress of the batch
operation in the toolbox window.
14. Test your movie.
Click to open your movie. I f you have the MoviePlayer or some other QuickTime player on your hard drive, the movie w ill begin to play.
292. 1Chapter 8
File conversion: Preparing Quicklime files for Windows
S ummary: Use Patrick Hennessey's flat tenMooV utility to "jlarren the forks" ofa Macintosh QuickTime movie for playback on the Windows pla~form. Lookforj lallenMoo \f on the CD -ROM in the back ofthis book.
( ~ Web Oook/ MtGo ow .,.. I c=:~ APS Orluc'H
0 uroog. mo" 0 liiOog.rnou copy
· ( r ~"'' I
0 Little Ght "2 D Secrcl.mr· e g 0 Secre l. rn py 0 Secret.ql
( De s k top I -( Cancel )
D ~ e u e nth s ce l.rnou COJl!J
n D CJ Uniu MI' EG2.0 Moe ue..ion 0.1 5 ~
Oll e ll
0 Show Pre ulcw
2.
tlat.tE'nt"1oo:oV
0 n the Macintosh platform, a ll fil es have what are called a data fork and a resource fo rk. These must be rolled into one for playback on the Windows platfo rm because Windows will not "see" two forks. Patrick He nnessey's fla ttenMooY is a utili ty that n attens a movie.
1. Open flattenMooV.
Double-click on the flatte nM ooV applicati on to open it.
2. Select a movie.
Use the file list window to se lect a movie.
3. Run the movie.
Ru n the movie to review it.
4. Close the movie.
C lose the movie window by clicking on the d ose box .
5. Save the movie.
When you close the movie w indow, you wi ll be prompted to save the movie (with the extension .FLAT). Locate the folder where yo u would li ke the movie saved , and click on Save.
Iffi Oes l:t o p ""' I
= APS Oriue '" = HU = Num ber 10 C' uui - lo Ql - tont·eoter
(.) dH IS
0 f oi Muil
Whe r e do you w a nl t h e ILIIUJ!,!I-fTIOU.fiDI
5.
= 110
'\)
[ Je ri
O e ~l:lop
New 0 )
~
( Ca nc el )
n l Saue
Video 293.
1
File conversion: Converting Quicklime files toAVI
Summary: Use tile Video.for Windows Converter (de veloped by CoSA and Vital for Microsoft) to convert QuickTime movies to AV!movies.
u
\·/indo>.·ls Compressor s
Uldeo forWII'Idoau· C·nurttf'r
~ourc.e f oldf'r:
Ot·~llnetll on fohle.:
506K byle 'J \tle ct ed 1R ·Maule\ ·
I Op en SourUJ ... }
{ ~elef iOII
~
10MB nuollnble In .. UfWI.IUIIIItUI\..
fcllnm IJO\IInntlrm ... ) "'cw fohiL·r ...
3a, 3c,3d.
294. \ Chapter 8
Vf\11 Conveder
A VI (Audio/Video Interleave) is the Microsoft standard for digital video. This standard is also known as Video for Windows, although the movie files have an .AVI extension. Some Web sites offer QuickTime and AV£movie formats to accommodate Web visitors on both the Macintosh and IBM platforms; AVl is more common than QuickTime on the PC pl atform.
Before you convert a QuickTime movie to an AVI movie. install the Windows Compressors in the Extensions folder on your Macintosh.
1. Install the Windows Compressors. a . Drag the Windows Compressors icon on top of your closed System fo lder. b. Restart your computer.
2. Open the VfW converter. Click to open the VfW converter utili ty.
3. Use the Video For Windows Converter dialog box.
a. Click on the Open Source button in the Video For Windows Converter dialog box.
b. Look through the Source Folder window, and click on a fi le to convert.
Pre vi e w
IB Lilli" Ghl mnn_ bo bu .q 1
Upda te
c::::) ll PS Urlue '"
( ljro I J
I Dcskl Oil )
L Dt··D l " ( Cnncc l )
3b.
c. Click on the Open Destination buLLon to select a destination folder for the convened Iiles. SelecLNew Folder if you 'd like Lo create a New Folder.
Source rue ·'Inme: s t.. w.~t
- Uideo:
S.C¥ot 16 :ut YtJ.o
....... uncompreuctl Direc t Trnnsfcr
rrome note: llliiJ ~
Oes 11notlon rtlc Nome:
ISTn iU(QT.OUI
I
nudio:
lto..Wt.)hSCU'U
Dr otw rot t 111u11u
( \et llnqs ... )
l rtch rormotllng @ Uunq Ul) tlluiOII Qlhf'tlll'i· lflflllll l
CD~
0 ~l~1n to1 ln~~l lornhl t
I
~ l OK Jl
3e.
source rt le Norn c:
Stthwqt
- Uideo:
Sowc· l 6 b1t\'..,..
D.· · t 6tu t'tlcf'ot~n v,o.. 1
... I I Com11resscd
( Set11n9 s ... ) rrorn e nat o: IIliiI~
Oestlnntlon fllo Nnme:
ISTnT UCQT.OU I
I
Ondlo:
Uo·..:tior. s~r~·
0 (OOIWI t nufliO
) ( \e iiiiiiJI ...
li" t cl1 rormolllng @ Onnq up tll t1hHI QU\e lhe' rtHm tll
CD~
Q\t .lfl tnt lu·s l t·umul
I
~ ~
3g.
Compression Settings ·Compressor
I Micr osoft Uldeo I
LI _ ~~~-~-o l ors
Quolity-- - - - ...... - - ---,
~I
.. ....l.u-s-t-... l o-w t-'ttJt.u.tn.......H.ig..h
MJs_t____.
I ]
Motion-- ·
\k Fromes per second:
113
[g) Key frnme euery ~ frames
q OLutlll ddla ralP tu
K. ~etu~u j
Concel J ({
OK
~
4a,4b,4c,4d,4e.
d. Click on the Convert button. e. Click on the Compression Method pop-up menu and
select Uncompressed, Compressed, o r Di rect Transfer.
(Note: You will wall/to select Compressed ifthe movie is a rawfile or if the movie is already compressed with
a non-IBM-compatible compress01: Select Direct
Transfer if the movie is already compressed and the
compressor is available on th e IBM comp11te1: ) f. Selecting Uncompressed displays a video format pop-
up menu, which allows you to specify the image depth of the converted Qu ickTime fil e. Choose 8-. 16-. or 24bit.
g. Selecting Compressed displays a Settings bunon.
C lick on this buLLon to display a Compression Settings dialog box.
4. Compression settings. a. In the Settings dialog box, display the Compressor pop-
up menu, and select a n IBM-compatible compressor. b. Drag the Quality slider to select an image quality.
c. Fill in a number in the Frame Rate fi eld. d. Fill in a numbe r for Key frames. Key frames don 't
depend on previous frames to be drawn. Higher values for the Key frame field make the converted file smaller, but performance may suffer.
e. If the setting is availab le, specify a low data rate for Web
movies. Playback will be on a hard drive, so make the data rate between 100 and 200 Kbps.
5. Audio options. a. If audio is included in the QuickTime movie, the
Convert Audio checkbox will be available. Click on the box to fill in an X if you want audio converted. b. Click on the Settings button.
6. Audio settings. a. Select the number ofchannels; either mono or stereo. (Note: Stereo 1vill only be heard on stereo-equipped hardware.)
Video 295.
Tip: The Animation, Graphics, Microsoft RLE, and None Compressors are lossless compression schemes. That is, no data is lost during compression. In contrast, data is thrown away during lossy compression. Be careful Hot to apply lossy compression more than once.
When you nm the Converte1; you may need to increase rhe amount ofRAM assigned to the program by increasing the minimum and pref erred memOJ)' values inrhe Finder's Gerlnfo dialog box.
Videofor Windows interleaves audio with eve1y ft'ame ofvideo. When you convert a QuickTtmefile to AVI with the Videofor Windows Converte1; the.files are not interleaved. The authors sugges1 interleaving thefiles again with Vic/Edit.
b. Se lect the sample size. (Note: 8-bit samples provide a range o.f256 sound tmits, and 16-bit samples provide a range o.f65,536 sound units.)
c. Select the frequency. (Note: Frequency is th e number of audio samples per second. 44. 1kHz is CO-audio quality, 22.056 kHz is AM-radio quality, and 11.025 kliz is voice quality. Web developers should consider 11.025for voice and 22.056 kHzfor music.)
296. j Clwprer 8
File conversion: Converting AVI movies to Quicklime movies
Summary: Use !he i1Vl!o QuickTime uri/if)·(developed by Vila! and Media Vision for Microsoji) 10 COllver/ AVI movies 10 QuickTi111e 111ovies.
'w'indo\·/s Cc·mpre-sseors
T heAV l to QT Utility creates a resource fork so an AVI file can be recognized by Q uickTime.
Before you conve rt a QuickTime movie to an AVI movie, install the Windows Compressors in the Ex tensions fo lder on your Macin tosh.
1. Install the Windows Compressors. a. D rag the W indows Compressors icon on top of your
closed System folder.
b. Restart your computer.
2. Open the AVI to QT utility.
Click to open lhe AVl to QT uti lity.
3. Use the Conversion window. a. Use the file list wi ndow on the left half of the
Conversion window to find the AVI fi le you wou ld l ike to convet1.
b. Select the AVI fi le, and c lick on the Add button.
r re u l e w :
~
· I (ei UfW I. IUIIIItles
,. I
Q (
c:::> IIO ( )O< t
File· l o Conuer t:
I
I ( Desktop
~~
~ Add» !t]
j .n. ( Ad d All »
tn
I I rile Types: PC nul Files ...
OK Oy tes Selecled
( Can cel ) ( r onut·rt )
3b.
c. Cl ick on the Convert button.
Video 1297.
Preulew:
c:J
le
I urUJI . IUtllltlcs ...
~ (
= 110 £jc<t
,.Files to Conucrt :
)
I
( Desktop )
,Q
~ « Remoue 11
·':' (nemoue nu )
r,
I rue rw~es: PC AUI files .,..I
262K Bytes Sel ec ted
I Cancel ) ( Conuc r t )
3c.
4. Select a destination folder. a. C lick on Save Sel f-Contai ned Movie.
b. U se the lite l ist window i n the next dialog box to select a
destination fo lder.
c . C lick on the Choose (folder name here) bullon to choose
the fo lder you've selected and to start the conversion. (Note: lfyou selected Save Self-Contained Movie, the movie may be opened by a QuickTime movie player such as the MoviePiaye1: )
Selec t Uestlnotlon follter: I ~ UfiUI.t UIItllles .... J
: _.
L - - - -- - ---l:o.IJJJ-
Choose " UfW 1. t Utilitie s··
= IHl
.~:::.
(New folder)
( COIICCI ) I( Open n
0 Soue Normoily ldCilendency to AUI file) ® Snue Self- Contnlned Moule
2&e»:: BJtf'S fti'QU"f"fd 1 ~ 91) tUAVill4b\t
4a,4b,4c.
298. I Chapter 8
Cha r
Artist featured in this chapter: Tom Cipolla is a writer and producer ofaudiovisual educational materials. In this chapter: he teaches how to "hear with your mind." cipolla@eclwnyc.com
Computer specialist featured In this chapter: Greg Hess, a.k.a. "Red Dog." is a compurer electronics instructor in Ulkeland. Florida. The home page he created 10 support his Palace site opens with a background sound created with Netscape 's new LiveAudio HTML syntax. gh e.u @ gte. ne t
Sound
T his chapter begins wi th a tour of some well-known Web sites that offer sound. You' ll learn technical Lips from the developers who created the sites, includ ing Modem Media (Zimn), Fry Mu ltimedia (Ragu), and Roben Lord (IUMA). To m C ipolla offers tips on selecting sound effects for your images. In this chapter, he \VOrks with clip sounds to c reate sound effects for phoros fro m Pac ific Coast Software (http://www.pacilic coasL.co m). Using Albe rto Ricci's SoundEffec ts software (availab le on the CD-ROM in the back of thi s book), Tom a lters, mixes, records, and reformats the sampled sound for use on other platforms. There's also a how-to section on us ing SoundApp to convert sound fi le formats (also available on the CD-ROM).
Now that Netscape's LiveAudio technology plays WAY, AU, and MTDI fi les, you'll no longer need a separate helper application to play sound. In fac t, Greg Hess, a compu ter e lectronics instructor, demonstrates how to add a MIDI background sound to a Web page using Nctscape's new Li veAudio HTML syntax. As electronic MID! music conti nues to blend w ith computer technology. it makes sense to use this sound format on the Web because MIDI files arc tiny.lfyou've never worked with MLDI sound Iiles, you'll want to visit Heini Wilhagen's MIDl home page (http://www.eeb .tuc.nl/midi/index. html). He has created links to articles and tech tips, MLDI sound archives, MIDI software util ities. and specia l inte rest group links.
Web sites with sound
Summary: Visit pages with sou11d to gather ideasfor your ow11 pages. The artists who have created the Web pages you see i11 this chapter are amo11g the first to take adva11tage oftire Web's multimedia characteristics.
~ ¥·.A CQI\1
Adult human1
onI}:
21m"'·'""" 21.
re: zima
write to us
what's new
I!IR D
. ..............I. .
Tip: Charles Marelli, the writer who crecaed the Dunca11 character a11d DuiiCG/1 ·.\. sou11d effects, uses clip sow1d ej]ectsfrom a variety ofpublic domain sound arc/rives, as well as a sound effects CD-ROM. (See Creating sound effects
with cl ip media for addresses of publ ic
sound archi ves .) Charles also creates sou11d ej]ectsji'OIII scratch using a 16-bit sound card and a microplr01re.
T he Z ima site, developed by Modem Media in Westport, Connecticut, uses sound effects the same way sound was once used on radio. V isit hltp://www.zima.com and fo llow soap-opera-like installments about Duncan. the si te's fictional Genermion X character.
Weekl y epi sodes contain inline audio l inks to sound effects. For example, in th is segment, Duncan is dropp ing his date off at her door. He swi ngs open an iron gate in front of her
apartment, and the word swung has an audio link attached. A mouse click on the word swung will automatica lly play
the sound of a gate sw inging open.
"Dunca n . I had a wonderful t ime ." Dunca n' s bount iful pool of cliches immediately evaporated. " Urn ..... me too. " he stammered. Duncan swung open the small iron gate in front of her apa r tment.
5'tt8!ght through hnn.
r.. ·' 'h:-t-····"
- ~' .
'
·oiiilCon, I had e. wnderfuhime.'' Olll'lC&II's bounuful pool of cliche'~ immedJ.ately evapomed "Urn, .. me too," he stammered. Dune.m ~ open the smell ~:ton gse m from of her 'f'MID~I\1
It
Sound 1301.
~-:_:-jridIue ZI~1A
.
- ~-~ -
earwacks Zlf'1A
Tip: Download the latest version of Netscape to take advantage of the LiveAudio technology built imo the browser (http://home.netscape.com /comprodlminv rlindex.html).
At the Zima site, you' ll also find sound fi les in the "fridge." Click on the Earwacks bowl inside the refrigerator, and you' ll visit a page of sound icons with links to AU fi les for Macintosh and Unix or WAY fil es for Windows, including:
Smooch.datc.au ( 18 K) Idate.wav (36 K)
Batter up! ball.au (2 J K) Iball. wav (42 K)
Ding.clcvator.au ( 14 K) Ielevator. wav (37 K)
A slight drizzle... rain.au (23 K) Irain.wav (62 K)
302. Chapter 9
"I made a lasagna so good the other day, I swear it would have made Michelangelo cry from joy."
Tip: F1y Multimedia records Professor Antonio (8 bit at22 kHz) on a Macintosh Quadra 650 using SoundEdit Pro and the Plaintalk microphone thai Apple provides will! some newer Macs. Using SoundEdil, !he F1y team edits the sound bites imo "righ1-sized" chunks. Files range.fmm 16 K ("Hotel") to 95 K. ( "I would like a hotel1vom.facin.g the Grand Canal, please.") They estimate it takes aboll/ one second to download one kilobyte ofdata over a 14.4 Kbps modem. 711ey prefer to holdfile sizes under 40 K so that visitors never have to wail more than 40 seconds.for sound lO download.
To convert the sounds into AU, WAV, and AIFFfile formats, Fry Web sile develope rs use SoundApp, a shareware program for Macilllosh. (SoundApp can be found on/he CD-ROM in1he back ofthis book. Note: SoundApp lists the AUformat as the "NeXTformm.")
R agu's Web site (http://www .eat.com/index.hunl), produced by Fry Multimed ia in Ann Arbor, Michigan, has a clever theme called Mama's C ucina (or Mama's kitchen). Included are Mama's Cookbook, Contests, Mama's Secrets, Italian Lessons, Cooking/Pasta Glossaries, Stories Around the Family Table, and Mama's Favorite P laces.
ProfessorAntonio teaches Italian. A mouse click on the appropriate file type (AU, A.JFF, or WAY) will play a phrase in Hal ian. T he idea for the site came from David Ft)' (dfry@ft)'multi.com) and Michael Clemens. Writer Tom Cunniff creates much of the content for the site, and "Professor Antonio" is AntonioAntioc hia, a software engineer with Fry Multimedia.
Travel
Hctel
albeig12 {mfl:m:l~
··1 would like a hotel room facing the Gtend Canal. ple~e " Yorre1una c8Illela con unama sui Cwal Gtande·.p~
[alffl-..wl~
Sound 1303.
E.i
Rea lnudlo
O Pinqll$1 "l
f).O
TIIIe: Rulhor.
,., ~ ::. -.J
t.a ..Pel ~r Jennlno· .oournol 06/ n2/·J6 RB( News
Copyright: 19 9~
l lalus: Playing
Tip: Visit Netscape 's plug -in page to download a copy ofthe Rea/Audio plug-in (http://home.netscape.com/comp ro d / p rod uc tsl n a vig a ror/ve rs ion_ 2. 0 / p l ugins/audio-video.IIt111l).
Netscepe: neofAudio's llol , Cool & New!
_;j ~11J ~~~ _g_JJ:U _j II
I P'ietsft.. http ://bri'lklty rt.a lludio.com/conttntpJtroteoointv.html
I
I I I "'I»I'$ Htw? 'ollat's Cool? Hondu>Oi< tltl S.r<h ] Ntll>rootorq ( " ·"'Sjjro'f' f
I
Hot·Cooi· Newj
JJ!;j·,
==-=------= -=-=---:-==---=----==~--=-------c:--
0 ne of the most exciting developments on Web pages is RealAudio, by Progressive Networks, In c . (http://www.reala udi o.co m).
I
This inte re sting new techn ology allows you to
simul taneo us ly dow nload and play sound. The Progressive
Network Web site hosts pages that contain AB C, Natio na l
Public Radio, and Radio Yesteryear radio programs.
Progressive Networks, Inc. sells ReaiAudio server software to sites that wish to offer streaming audio files or realtime playback. Web site visitors who have a RealAudio player ins talled will have only a two-second delay compared to the longe r delays required for AU or WAY files.
304. , Chapter 9
~ Ll~~~ = :;gj~_j
...... F· ~,_-_,,.....,.,_,....,
Tip: Netscape and Internet Explorer both can guess at a Web site 's protocol, which means you don'tneed to type hllp:l/. For example, try www.iwna.com.
T he IUMA site at http://iuma.com (Internet Underground Music Arch ive) is th e e p ito me of orga ni za tion, advanced sound technology, and beautiful g raphics. Founders Robe11 Lord and Jeff Patterson are recent computer science graduates from the U nivers ity of C aliforn ia at Santa C ru z. Created in 1993, the site is intended for independent, unsigned artists who want to reac h the estimate d 30 mil lion people on the fn te rnet. ln ] 994, IUMA was awarded "Best of the Web" by Inte rnet book publisher O'Re illy & Associates for "contributions that have signi ficantly improved the Internet."
For mu sicians, "base service" on IDMA is $ 120 per year and incl udes one song, one logo, two band or other images, up to two pages of text, a nd cross-indexing by artist, song title. location, and genre.
Songs submitted on OAT tape or C D are d ig itized and compressed to disk using MPEG2 audio compression techniques. MPEG (Motion Picture Experts Group) is a highfidel ity sound format (cassette qua li ty) that o ffe rs beuer compression than AIFF or ).I- law (pronou nced IIlli law) . On the Macintosh platform, Web s ite visitors w il l need the MPEG/CD player application to hear .MP2 files.
IUMA artists Brandee A mber Selck and Dav id Beac h create graphics with Macintosh computers, but create sound on Silicon Graphics Tndys. Upon e nte ring the site, the database of over 500 musicians can be viewed in five different ways.
Sound jaos.
1. A tt.<l o c a lled Fred Ab:lirazak Aboufadel, Edwarcl Action F i.gures
loDSR
2.
3.
4.
s.
II
l!i
1. New arrivals.
A list of the newest bands on fUM A.
2. By artist. An alphabetical listing of all IUMA bands. 3. By genre.
A li sting of musical genres o r styles. Note that bands may be under mul ti ple categories.
4. By location.
Bands can be sorted by country, state, and city.
5. By label (from the IUMA home page).
Several record labds have their own home page on IUMA. To access this section, click on the washing machine pictured o n the JUMA home page.
306. , Chapter 9
1Yp: When you discover a site you /ike, select Add Bookmarkfrom the Bookmarks pu/1-downmenu in Netscape. This will record the site address so you don 't have to ew er it the next time you want to visit. To view the list, select View Bookmarks j iv m the Bookmarks pull-down menu.
Click on the Export bunon ifyou want a
copy ofthe list. Netscape will c reate a.file, which you might email to a}i"iend.
T he Van Hafen sound samples (hllp://vanhalcn.wamerrcrds.com/Balance) are arranged on a beautiful page of wall paper graphics and half bullons, wh ich is the anist's clever scheme to use sound excerpts rather than full songs . Visitors have their choice of AlFF (Macintosh), WAY (Windows), or AU (Uni x) fi les.
lt:J@I a. mu.lder . a.u
Enter X-Fi/es on the Yahoo! search page (http://www .yahoo.com/search.html) and you ' ll gel a list of several We b sites and several newsgroups. Cha rles McGrew's Web site has the best sound (hllp://w ww.rutgers.edu/x- filcs.html).
Sound 1307.
.I/ 11 I' J,-\
Electric Mag1c
t '11· Jl·'.l\'
· fl.. l·ll HUrllone l!:ddrtun
7>
lm~ ~~ §[~-~ ~:
lltttttf .... k., ,.· ·, _.
"'"" ' .............- II CII,.I,41ntCid)
·h··uc-w
~
IE· ... '----
UofHUI IU.If41A.1't
l'l
~-· - ·--""'"""'" ·' '1"'-t .......t.
, ~ : ...... ....·- l iM--10
tE:iil
Tip: Although DigiPiwne by Electric Magic does not have as high a pmfile as the new Coo/Talk telephone tool developed by Apple Compute1; it does not require as ntuch hardware and software. Coo!Tctlk requires a Power Macintosh running System 7.5.3 or late1; Open Transport /.1.1 or late1; and QuickTime 2.5. Th ese compOiten/.1' may be down loadedfrom Apple at hllp:/lwww .qttickTillte.apple.colnlslv!qtlnac.htlnf.
Digiphone For Mac
308. , Chapter 9
D igiPhone (formerly NetPhone), introduced in 1995 by Electric Magic (http://www.emagic.com), provides realtime voice communication over the Internet on 68030based Macintosh machines and Power Macs. (Note: NetPhone was sold to Third Planet Publishing, makers of DigiPhonefor the PC.) Apple has introduced an Internet telephone tool called CooiTalk, which requires a Power Macintosh.
DigiPhone allows calls to be made between Macintosh Internet users over a minimum 14.4 Kbps phone connection, anywhere in the world.As [nternet connections become more powerful in the next few years, Internet telephones could rival conventional phones.
Electric Magic, the maker of DigiPhone, provides a trial version of the software, which can be downloaded from their Web site (http://www.emagic.com). The demo is fully functional but terminates the call after 90 seconds.
Andrew Green, the British computer programmer who invented DigiPhone, compares the software-which uses a modem-based connection to send a maximum of 1,800 bytes ofdata per second- to telephone-quality speech (which c01isists of 8,000 bytes per second). To compensate, DigiPhone compresses the data before transmitting it over the Internet. At the receiving end, DigiPhone decompresses the data and sends it to the computer's speaker.
Although DigiPhone presents an interesting no-charge alternative to traditional fee-based long distance calling, America's Caniers Telecommunications Association, representing America's small- to medium-sized can·iers, have fil ed a request with the FCC asking for a regulation or Internet phone products. fnrerestingly, the major can·iers do not want regulation, and GATT (General Agreement of Trade and Tariffs) forbids individual governments from regulating computer networks.
m
~
CoolTalk fo:ot· t'·lao~n-1 OS lnst.:.ll
Tip: Although Apple has tried to make Coo/Talk a video cOJ~ferencing tool in addition to an internet telephone tool, their product excludes non-Power Mac users.
CU-SeeMefrom Cornell University is afree video conferencing so.fiware program for Macintosh/Windows machines and is not limited to Power Macintosh equipment. The software may befound at lwp:/!cu-seeme. edu/#GEI. Multipleparty conferencing is also available with Cornell 's Re.flector program (Unix) or a Windows NT Reflectorfrom White Pine Software. For more information, visit http://goliath. wpine.com!cu-seeme.hunl.
lJ
Nehcnpe: Ne ls ca pc Haul a lor 3.0 I t oollelk
~
I~ I..~J ~ I I .~. I ~" I!. I ~. I ;~ I~
II
r.ttJih IMtp /lhortw MUUI,...comleorr.pro-:i/r-rN.~t·lr.i'"\:)lttf/n.-n,n.JD/uti'W:'iU'Iicil "n/eoo~dc/~.WXIIll'l'l I
l ~t·._r;t·?JI ~r.~~·.coo1?ll o.-stlhitioM II NttSun.h 1~ 1 SoflwaN I
CooLTALK
Coor:'at'f. U lll. tnli!:mrt ~rt~Dm t)OI itclul.d ....,11 lteXtJ;t ll~~am J 0 'lbo..t pw.rw!es hJeh·qW.I)'au!» co:.ftnn::bl;, a CU.C·fu.r&e( vtJletoud, 6Jld tttt-bueoe. comnur.b!ioas c=b& 1be dc.t tx~l_ \'.'lC:IOoerfdk )Oil Can :.ov I.))); e:w:! '1rmlt. CGDd o=alivdy vaO trltc..t s liM eoiiUCUJ at.yvbeft Ul 0e ~ ·:it mt lt.lemtl AnJ \.e(:)u.te
C®fr&I);"'W!IU.alt.J:l::'-,C. Ihiv~so:JO,)'OI:.Cil'!st~WM'tMt'.)]b. d:act)yt:oC'Ilti}'Y,'tbPQ:e ~
CC.::Ifl'tn OOV Coorrtr'\ !utJ:"U :«luJe.
· Alldlo collfenad~ · Ta:t. ~, .,tb fdtrJ3 t.r-.1 u:oc~ eoc:ron t1t lr.~vil'\!ulldufk:t-'Octod ,1f't.i:h
en,~lu }'tl\.1 t1 = ~U.elld be~ S!mW'tA...-ot:-'1}' CooiT!t.&. U u e:~~:~y t1
c:e ~ &phone,lnt ..r..thoutuy
8X fl-8tiSIVl!loJ'C·d~t!m('e (he,'itS.
CoolT&lJt tiClc.dn a.~ pe ed dlalet. callet 10 Cu.~UOMl.l':y.ca!J :~~erte r~, $1\d mu~
t,u~r.! .
· llfeh~ aallly eudio · Multrp)r
cot:~.pl'tJSiontonruuer.Jtle
klv·W.d.vio!ttl oprn.OOn ~tr.e !.:!1'1:1."4
ll:!'O'Vltb!&3~:nttvoo"k~tql"a·3Pfed rr.:ldem.c:cMtetD~ bl.ee..h-en~eof lb hl&hen~r.dio4i,wll\Y
· CooJTeU.pboD.Ctloot. ·A~r~~iteuyoiOc::e.~clhetCO)mtr.wers
· AA.snn.a.c [U(;')iu: · CooiT.:.t.'Jen.s'11'1Tt:JC lr.!C~ fK'(Db~qdD:I callertt1o:JMDO:.wtilt )Clu'rt &.vay
· Sbor ed .,·.hebou4 · Wtnt yoo-.B. 'Wl.Ci aooUt~ce -.""-CoorNk. )tl'-lcU\
bota b( 'Mvt.'"'l& Vie ,,.7.,. &: 1'1~tuc tne&e
w! t;JI~ltltlrealti:nt v.th. e. CuD
:qeof drn'ltl(,too m ,~mulwp
ools. Impon, ,,.~. mt prlttt11PP , OU', JPHO, E MP. EPS , TA.~A.
RA!:T!R. u.i :xE file'
· CUI IDol· 1lru ~%t·ba!.!d 'DOl ...b }'0\.1
am: ~ndatJl~el\'tiJPe,d~$3.~ '\'tU
.., ta'tlft: text t~. 1ftlU
CoolThlk
· fS.).c1tl,aW p W.b&Uouelo·oCrruo.u·p.zuid.urnucni':.u-.c
::ttql Wl:.US m! rolhe h!lp.
e O(JlOa'ln·u!tpsfJuPJ:SullpJ,paonlflo·CroboorT-a:llh. d~
--.:~"'::·.::.:!<i:::::::=::..=::.::=.J
·
itl'd n,QC IP C'OtoeeOON C.-.oq:b d U:·\.1,
PPP W SLIP ccn."'tCUCR.1
_,pcorr.inz l.MIM edb.~p-phceWu Wt -.'ill be to;!:eJ on lha te«mJyintlOducN H 323 'u.~trd
· Moldp lat!orm-rnd}' · coorren. b ~'l$ll.)'Cik 'Wlth Ue.'fi.lam 3 0 !orVII£'~o.,:~ 95, W".ndow ttT, Wb1ow
3 1 , !1~0!:, SUnOS , .£olm3, HP· UX, O~ IW Ur.Jx, ~ IRJX:. Verswm !cr &::diior.el U:Ux pbr!o~m:~ V"Jl
~e·~l..le$10C n
tt-.,, ",th Arpla ot!e.rs ~ com,lll:~~t~ fiU:l!Jyorn:.roccnftrtitW.r~ bW:ro~~"
N(~ara · ~
CoJITelt...
r. .
Cor~~"· Sdu · ~ ~193'~. ~uJ lfl.J ~~ ~l7-37n, r.wu u..zu ~~~'9J7-31fH 1';-o·U... a:.y~P-. , J "'Ut"\::.t~.
Ce tl'filU e 19?~ cwuu.r.;uy;.hte·l!$ c ""rJ:!!f_..;J.
,.. .
CooiTalk fo r Macintosh (http://home.netscape.com/ c o m p ro d /produc ts/naviga to r/ve rs ion_3.0/communicatio n/cooltalk/index.hLml) is an Internet te lephone tool created by Apple Computer. Versions are availabl e for Windows 3. 1/3. 1 L, Windows 95, Windows NT, and Un ix machi nes.
Sound 1309.
The compact MIDI file format
Summary: MIDI (Musical In strument Digitallnteljace) was.first developed in the 1980s. Although MIDI data transmission was originally developed for hardware sequencers, computer software sequencers and synthesizers have expanded MIDI's capabilities.
,.....(i....... 1.....__ _ .._... _f#Jo!r.II..O:Joi:;OI ...f....
. ., ·MC!f~4"-
~-'- _w_,.., .,.
:-'""':'~~,:..~:.~~~~~ . ... ...." -..~- -, ......h,......j .. ' ~
Tip: Heini Withagen 's MIDI hom e page at hllp:llwww. eeb.tue.nl lmidi/index.html has links to articles and tech tips, MIDI sound archives, MIDI softwa re wilities, and specialinterest group links.
~ Netscope: a_ ~
1!1 1111 Ill I . '············
N etscape's new LiveAudio technology plays WAY, AU, and MIDI fi les either through a floating sound controller or as background sound. (Note: For details on background sounds, see Greg Hess' ti ps on adding a background sound to your Web page.)
1. What is MIDI? MIDI (Musical Instrument Digital Interface) refers to digital information passed between two MIDI-capable devices.The information is created with a music synthesizer. Although MIDI hardware sequencers predate computer-driven MIDI software, the transition to microcomputers has provided many more featu res. For example, not only can computers record and replay, but they can provide storage, editing capibilities, and elaborate synchronization, including MTC (MIDI Time Code) and SMPTE (Society of Motion Picture and Television Engineers).
2. MIDI file size is ideal for the Web. MIDI music has been widely cri ticized by traditional instrumentalists. Some critics have described MIDI as having "little performance fire or fl air, no musically sensitive timing, and lac king in subtlety."
In spite of this type of criticism, the format is ideal for the Web. File size is very small, and relative duration of play is very long compared to sampled sound.
File
Type
File Size
Duration
africa.mid MIDI
50 K
2 minutes
seagull.au AU
56K
II seconds
310. j Chapter 9
Set Netscape's Preferences to download music files
S ummary : Once you 've found.free-ofrights MIDl or sampled sound on tire Web, you '//need to adjust Netscape's Preferences to make the browser download a file and not play it.
W hen you click on a sound li nk in the Netscape browser window, Netscape's new sound controller wi ll appear, and the sound wi ll begin to play. If you want to save the file to your hard drive, alter the Preferences settings.
1. Open Preferences and select Helpers. a. Choose Preferences from the Options pull-down menu . b. In the dialog box that fo llows, click on the Helpers tab.
.. ~:,~: :~~ ~~~~:.':!'::ena~····
~·unny "'"'"'·"H"' ..
... sr.ow1oolblf .,.. ,r.cwlontkHt "' ~hO WO IIf'(l l f"'t I MtfOIU
\howJauoCo ft\Oif' llotwntult t ncotlln
l a.
·- ,..,, · .... .......- ~..~ I ,_, I
·-·- u- ......._
~. :.:.:.:_::..:..:.:..-:·
:=~-_j
2a.
l b.
2. Edit MIDI file type handling. a. In the Helpers d ialog area, scro ll to the LiveAudio section.
b. C lick to select the audio/midi file type. c. Clic k on the Edit button.
- -. .. r:::: ·- ·-- r- t........ J-...~~ .... .-...~ ....·...,
-·-·- -· - __ ill ;..-A...... ..-· ..
~ ::::
I w···- I
~_!!~!- - ~d_,i__!!!-l~d
I( Edit ...
2c ·
2b.
Sound 1311.
lclil T pe
........4 ...
a .... _..
l o0".4...-..·.- ''---'-··=-----'-' ~ . ,.......,_· ·- ..-::.....:.J
2d.
d. In the dialog box that fo llows, select the Save To Disk radio button.
e. C lick on Ok. The next time you c lick on a sound link in the browser window. Netscape will save the file to your hard drive.
2e.
3. Rearrange where your files will be saved. a. Choose Pre fe re nces from Lhe Options pull-down
menu to display the General Preferences dialog box . b. Click o n the Applications tab.
Dlrector!l LlloftiiOUJ Moll ltlldhPill\f'll'll"tPnt \ , ........... f'tnfttt-nce' " \PCUfllij l' tlllt'fefHrt., ·
.t \IIOUI I O{ ft li on , ,11011 · IJirer l oty llottnnt
'hou ·JnUd f.un\011' / I IU\D 1 000 IIRII!il!\
3a.
....._ , ~ .,,. - .... - .. ......... ...... ,· · ·-..,~
~
~
Oc....·· .,.
3c.
1- ..- 1,.... l u:.· · I - 1 .... ,.,_ l ·· ~·1 ....- 1
3b.
c. fn the d ialog box that fo llows, click on the Browse
bu tton. d. Use the file list w indow to select a drive or folder where
you would like Netscape to save your Ii les.
e. Cl ick on the Select. .. button at the bottom of the dialog
box to se lect the drive or folder. and c lick on OK.
h '" ' ·4111f l ll f
..c_;~.·l.!.!l.~ ~...~,.!ii,!iii·(ll ~_]
_,.,, . ...,.·· ,111
Ci!~· ' ...
...Jr.... ..,._..IUrow :::J ..l ....... . .. ..._ ····
~·-·-.!.....__
I
I
3d, 3e.
312. j Chapter 9
Greg Hess' tips on adding a background sound toaWebpage
Summary: Netscape 's new LiveAudio HTML syntax added to the <EMBED> tag causes the browser to process a soundfile and deliver it to your computer as a backgound sound.
Above: A room inside The Castle Red Dog.
Above Right: Greg Hess'The Castle Red Dog Web site, which provides supportfor his Palace site, is a virtual chat environme111 comprised ofbeaurijitf 3D images. To obtain Greg's Palace site address, go to the Palace direct01y at h ttp:/!IJ ian s ion. thepalace.cont! cgi-bin!directory.pl and /ookfor "The Castle Red Dog."
I n this example, Greg Hess uses the <EMBED> tag and Netscape's new LiveAudio HTML syntax to add a background MIDI sound to his home page at hnp://www.geocities.com/-thecastle. (Note: Lookfor Greg's MID/files on the companion CD-ROM.)
1. Open SimpleText. Use SimpleTex.t or your word processor. If you use a word processor, be s ure to save the document as Text Only.
2. Create a new HTML document.
Start a new document with the fo llowing markup tags:
<HH1L> <HE AD> <TITLE >The Castle</TITL E> <! HEAD>
3. Add an <EMBED> tag.
Use the SRC attribute to indicate the source of you r sound file, the HTDDEN="TRUE" attribute to hide the sound controller, the AUTOSTART="TRUE" attribute to begin play ing the sound automatica ll y, the VOLUME="] 00"
Sound 1313.
Above: A scenefrom The Castle Red Dog palace site. Visitors Jane and Les are represented as avatars against a 3D scene. Text entered in the Message box at the boflom ofthe screen causes a talk balloon to appear over an avatar 's head. For more information on how to download a free palace client program or how to create your own palace site, visit hllp:l/www.thepalace.com.
attribute to set the sound volume to the maximum level, and the LOOP="TRUE" attribute to play the sound continuously until the Stop button is pressed or the user goes to another page.
<HTML> <HEAD> <TITLE>The Castl e</TITLE> </ HEAD> <EMBED SRC- "al binon i. mid" HIDDEN- "TRUE" AUTOSTART- "TRUE" VOLUME- "100" LOO P-"TRUE">
4. Add a <BODY> tag. Use the BACKGROUND attribute to add a background image, the BGCOLOR attribute to add a background color, and TEXT, LINK, VLINK, and ALINK attributes to add color to body text, link text, visited link text, and active link text. (Note: See the Online Tools chapterfor
details on how to locate hexadecimal triplets to add color information to these a/tributes.)
<HHlL> <HEAD> <TI TLE>The Cast l e</TI TL E> <lllEAD> <EMBED SRC- "albinoni .mid" HIDDEN-"TRUE" AUTOSTART- "TRUE" VOLU~iE-" 100" LOOP-"TRUE"> <BODY BACKGROU ND- "a052.jpg " BGCOLOR- "1/00B9B9" TEXT- "1/FFFFFF" LINK- "f/OOFFOO" VLINK- "1/0lFFFF" AL IN K- "IEEOOOO">
5. Add centered text.
<HTML> <HEAD> <T!TLE>The Castle</TITLE>
314. j Chapter 9
Above: A roorn inside The Castle Red Dog.
<!HE AD > <EMBED SRC·" a1bi noni .mid " HIDDEN·"TRUE" AUTDSTART- " TRUE" VOLUI·IE- " 100" LOOP· "TRUE" > <BODY BACKGROUtlO· " a052. j pg" BGCO LOR· " IJOOB9B9" TEXT·" /IFFFFFF " UNK·"i/OOFFOO " VLINK· " {JOl FFFF" ALI tlK- "i/ EEOOOO" > <CE tH ER>< B><FONT SIZ E-+4>The Cast1 e Red Dog</ FONT><I B><ICE NTE R>
6. Add a centered image.
<HH 1L> <HEAD> <T I TLE>T he Cast1e</TIT LE> <! HEAD> <H1BED SRC-" a1bi noni .mid " HIDDEN- " TRUE" AUTOSTART· "TRUE" VOLU~I E- "1 00 " LOOP- " TRUE " > <BO DY BACKGROUtlO· " a052 . j pg" BGCOLOR· " IJOOB9B9 " TEXT· "I/FFF FFF " L1 NK- " #OOFFOO " VLI NK· " i/Ol FFFF" ALI NK· "i/EEOOOO" > <CEIITER><B>< FONT SI ZE-+4>The Cast 1e Red Dog</ FONT><!B><ICE NT ER> <C ENTER><A HREF·" i ndex2 . h tm " >< Ir~ G SRC· "1 ot hern. gi f " BO RDER- O><IA></CENTER>
7. Add additional centered text.
<HTML> <HEAD> <T lT LE>The Cast1e</T ITLE> </ HEAD> <EMBED SRC· " al binon i .mi d" fi! DDE N· " TRUE" AUTOSTART· " TRU E" VOLUME· " IOO " LOOP- " TRUE" > <BODY BAC KGROUN D·" a052. j pg" BGCO LOR· "// OOB9B9 " TEXT· " IJFFFFFF" LI NK· " I/OOFFOO" VLitiK· " /JOlFFFF" ALINK· " IJEEOOOO" > <CENTER><B>< FONT S!ZE- +4>The Castle Red Dog</FONT><IB></C ENTER>
Sound 1 315.
Above: A room inside The Castle Red D og.
<C ENTER><A HR EF-i ndex2. htm>< IMG SRC- "lo t hern.gif" BOR DER-0></ A></CE NT ER>
<CENTER><FONT SIZE-+l>Out of t he fog of night, comes an oas i s for the wea ry. Come and enjoy Castle Red Dog ·A Pa lace virtual cha t site with no commerc i al interests. just good art. good fun. and good people. So if you are ready to ent er, cl i ck on the Cast l e and hea d inside to exp l ore the many delights.</FONT></CENTER>
316. , Chapler 9
f.nd e:l' or /midifiJ c:i/u~sort l /good
.> , - --
tt WJo ·.au. II ""· ~...~
ItJI _" "...'.. II " ..... J! ll.:.::a. .I ft ,..._
......,u ~........... u.,,... P:
~. ,.,. . . , . u.t
Tip: MIDI Web at http://www.midiweb .com has an assortment ofMIDJ files to download.
8. Summary of HTML tags used in this section. The tags you see in this list (in al pha betical order) reflect the HTML 3.2 spcciticati on.
<BODY>. . . <IBODY> This tag uses the BACKGROUND attribute to add an image to the background, and the BGCOLOR, TEXT, LINK, VLINK, and ALINK attributes to add color to the background and text. (Note: See the Online Tools chapter for directions on how to add hexadecimal triplet values to these allributes.)
<CENTER>.. .<!CENTER> A lag used to center an element on a page.
<EMBED> This tag uses the SRC attribute to indicate the source of your sound file, the 1-!IDDEN="TRUE" attribute to hide the sound controller, the AUTOSTART="TRUE" attribute to begin play ing the sound automatically. the VOLUME=" I 00" attri bute to set the sound volume to the maxium level, and the LOOP="TRUE" attribute to play the sound continuo usly unti l the S top button is pressed o r the user goes to another page. Fo r exa1nplt::
<EMBED SRC- " albinoni . mid" HIDDEN- " TRUE" AUTOSTART- " TRUE " VOLUHE- " 100 " LOOP- " TRUE " >
<HTML>...<IHTML> A tag used to open and close an HTML document.
<HEAD>.. .<IHEAD> A tag used to open and close the header portion of a doc ume nt.
<IMG> Used to refer to an inline image, th is tag uses the SRC attribute, which re presents the URL (location) of the image. For example:
<H1G SRC - " lothern.gif" >
<TITLE> ... <ITITLE> Used under the < HEAD> tag, the <TITLE> tag describes the title of a document, w hich shows up inside a document's Litle bar.
Sound 1317.
Creating a link to sound files on your Web page
Summary: Create HTML fi11ks to AIFF, AU (Mac a11d U11ix J.J-Iaw, pronounced nwlaw), WAV (\Vi11dows), MP2 (MPEG audio), RA (Rea/Audio), and MIDI SO IIIldfl/e s.
T he Van Halen Soundbytes page offers AIFF, WAV, and AU fi les for down loading. To see the I-ITM L tags that make up a page in Netscape, select Source from the View pull-down menu. T his is a practical way to learn how to use I-ITML tags. For exam ple, the HTM L tags for the links to the Va n Halen "Amsterdam" sound bytes include: <DL><DL><DL><DL><DL> <DD><JHG ALT- "Amste rdam" WJDTH-1 18 HEIGHT-50 SRC-"/Bala nce/audio/ba l ance-amsterdam.gif"> <BR> <OL> <OD><FO ~ T SI ZE-2> <If.IG ALT-"" WIDTH-58 HEIGIH-58 AUG~- BOTTOH SRC-"butt_play.gif"> <J>Excerpt<IJ> <A HREF- "/Balance/sounds/amstrdm .a iff">aiff</A> 700k . <A HREF-"/Balance/sounds/amstrdm .wav" >wav<IA> 700 k. <A HREF-"/ Balance/so und s/amstrdm . au" >au<IA> 250k . <IDL><IFOUT> <IDL><I DL><IDL><IDL><IDL> <P>
318. j Chapter 9
CJ ~~ Netscope: Mother Mory :So I
_;j~~.:J~lij ror rd Homo Rolood lmagts ep..,
Location: llil· :II /HO/Dosktop%20folder /Mo ther~~larv%20S
I I I I \>'hat's Nt'ol? \lhat's Cool? Ha11 dbcol;
Ntt Soarch !!
Ex:e!p!
91
~-®1 Oooumoot Done.
3.
DE
~ Net scop e: Mother Mory:SoL
~~~.:J~ ~ roo· I ·d Homt Roload 1m·9·· Op·'
Loootion: Ifile :///HD/Desktop'11120Folder/Van9020Halen%20
I I \t'hat's l<ow? \!'hat's Cool? f Handbook
N· t Soar<:h
Exce1p1
ICJ I
l l:zl~
[
4.
Follow these steps to get an understanding of the effect these tags have on a Web page:
1. Open SimpleText.
Use SimpleText or your word processor. If you use a word processor, be sure to save the document as Text Only.
2. Create a new HTML document.
Start a new document with the following markup tags:
<HmL> <HEAD> <TITLE>Mother Mary: Soundbytes<IT ITLE> <! HEAD> <BODY>
3. Try the definition list tag <DL>. Add < DL>, followed by lhe word Excerpt. Add an ending
<IDL> tag .
<HTHL> <HEAD> <TITLE>Mot her Mary:So undby tes<IT ITLE> </ HEAD> <BODY> <DL>Exce rp t</DL>
Save thi s document as Definition List Sample, and ope n it in Netscape. Select Open File from the File pull-down me nu to view your HTML document.
4. Try nesting two <DL> tags.
Add another <DL> and another <IDL> tag around the word Exce1pt.
<HTHL> <HEAD> <T ITLE>Mother Mary: So undbytes<ITI TLE> <! HEAD > <BOD Y> <DL>< DL> Exce rp t<I DL><ID L>
Sound 1319.
Netscope: Moth er Mory : S o~
~~~_:j~~ f f. rd H«nt
Reloi'd lmt~ges Optn _
I Loo·tlon lilt :///HD/Dtlklop~20Foldor /Mothtr'JIS20M·r"\1~20S·
I I I I!!; 'w'h·l's N·"'? Wh·t's Cool? H~ndbo<k
Not S..rch
Exte.<p:
~ l(!;rl~ 000\IMenl: Oont.
s.
CJ·
Netscope: Mother Mer
6.
5. Try nesting four <DL> tags. Add two more <DL> and two more <IDL> tags around the word Excerpt.
<HTML> <HEAD> <TITLE>Mother Mary:Soundbytes< /T ITLE> <! HEAD> <BODY> <DL><DL><DL><DL>Exce r pt </ DL><I DL><!DL><IDL>
6. Add an inline image. Insert an <IMG> tag after the open ing definition list tags in the form <IMG SRC="apple.gir'>. The SRC attribute indicates the file name of the image. (Note: The fi le name alone, without a path name, indicates that the image file is in the same directory as the HTML document. )
<HTML > <HEAD> <TI TLE>t·1other Mary: Soundby tes</TITLE> <!HE AD > <BODY> <DL><DL>< DL><DL> <IM GSRC- "appl e .g i f" > Excerp t </ DL><ID L><IDL><ID L>
7. Add an ALT attribute to the image tag. TheALT attribute in an <lMG> tag is an accommodation fo r people with text browsers. In this example, they see the word Apple instead of the GIF image.
<HH1L> <HEAD> <T ITLE>Mother Mary:Soun dbytes</TIT LE> <! HEA D> <BODY > <DL><DL><D L> <DL> <IMG ALT-"App l e" SRC- "apple .gif"> Excerpt <IDL><IDL>< IDL><IDL>
32o. JChapter 9
Cl
Netsco pe: Mother Mar
¢» 1 ~=d ~ I @ I ~ I ~ I .
~ ~~~~£_jPra
Loea;tion· flit·// /HD/Duktop9i520foldt f' ll"h tht r'SS2Ct1uv9620Samp
I I I VNI's H...,? Vh·t's Cool? H·nd- l'<t St..-on ~lot
8.
9.
8. Add an italic tag around Excerpt.
Add a set of ita lic tags arou nd the word Excerpt with the pair <l> a nd <II>.
<HH1L> <HEAD > <TI TLE>Moth er Mary :Sou ndbyt es</ TI TLE> <! HEAD> <BODY> <DL><DL><DL><DL> < II~G ALT-"Apple " WIDTH -1 00 HEIGHT- 102 SRC- "apple . gi f "> <!>Excerpt</ I> <IDL><JDL><JDL><JDL>
9. Specify the height and width.
Insert WIDTH= LOO and HEIG HT= I02 in Lhe <lMG> tag. Th is informati on may be obtained from the Image Size dialog box in Photoshop. Specifying the H EIGI-lT a nd WIDTH as attributes of Lhe < IMG> tag s peeds the loading of the image on the Web page.
<HTML> <HEAD > <TJ TL E>Mothe r Mary : Soundbytes <ITIT LE> </HEA D> <BODY> <D L>< DL> <DL><DL> < lf~G ALT-"Apple" WIDTH- 100 HEIGHT - 102 SRC- "apple . gif"> <I>Ex ce rpt<II > <IDL><IDL><IDL><I DL >
10. Add links to sound files.
Creare Li nks to sound fil es by o pe ning w ith the link tag <A> and the HREF attribute, entering tex t, and then the closing <IA> tag. Thjs text serves as the c lickab le ho tspot o n the Web page and can be identified w iLh an underline.
<HTML> <HEAD> <T ITLE>Mo t her Mary : So undbytes</TITLE> <! HEAD> <BODY> <DL><DL><D L>< DL>
Sound 1321.
Tip: Keyboard Magazine's Web site is a great resourcef or musicians who are interested in electronic sound. Visit http://lvlvw.keyboardmag. com.
<I MG i nsert IMG att ributes shown i n pr evious steps (see Step 9)
SRC- "apple.gif" > <I>Excerpt<JI> <A HREF- "/sounds/"garden.a iff">aiff <IA> 700k. <A HREF-"/sounds/"garden.wav">wav< IA> 700k . <A HREF-"/sounds/ "garden.a u" >au<IA> 250k, <A HREF-"/sounds/"garden. mp 2">mp2<1A> 250k, <A HREF·"/sou nd s/"garden . RA ">RA<IA> 250k. </ DL><IDL><IDL><ID L>
File Format AIFF WAY AU MP2 MIDI
RA
Notes
An audio fi le format used on the Macintosh platform.
An aud io fi le format used on the Windows platform.
An audio file format read by Sun Spare, NeXT workstations, and Macintosh computers.
A hi -tidelity lite format used on the Macintosh, Windows, and U nix platforms.
A digital sound file format developed in the J980s that has recently become popu lar on the Web because of its sma ll ti le size and long play d u r a tio n.
An audio file fo rmat developed by Progressive Techno logy, Inc. for instant playback or audio streaming. rnstant playback is only ava ilable from servers equipped with Rea iAudio server soft ware, although the RA !ile will do a normal download to Macintosh, Windows, and Unix machines.
322. J Chapter 9
Tip: The ultimate band list at http://www.ubl. com is the Web 's largest list ofmusic links wlzere a Web visitor can add music linksfor new bands. Browse the site alphabetical!)~ by genre, by resource (newsgroups, mailing fists, FAQjiles, lyrics, g uitar tablatures, dig itized songs, or Web pages), or vie w the complete fist.
11. Summary of HTML tags used in this section. The tags you see in thi s li st (in a lphabetical order) reflect the HTML 3.2 specificatio n.
<A> .. .<.JA> Re ferred to as an anchor, th is tag uses the HR EF attribute to link to an external sound file. For example: <A HREF· " /sounds/ "garden.aiff">aiff</A>
(Note: The soundfile IIWI/e must include the path name if
the fi le is located i11 anotherdirectOI}'.)
<BODY>.. .<./BODY>
A tag used to open and c lose the body of a document.
<DL>...<.JDL>
The definition list tag is us uall y used for definiti ons or short paragrap hs wi th no bullets o r numbering. In this section, this tag is nested four times to indent the word Excerpt . For example:
<DL><DL><DL><DL>Excerpt</OL><IDL></ DL></ OL>
<HTML>...<.JHTML>
A tag used to open a nd c lose an HTML document.
<HEAD> . . . <!HEAD>
A tag used to open and close the header portion o f a document.
<l> .. .<.Jl> A tag used to format w ith italics.
<IMG>
Used to refer to an inline image, this tag uses the SRC attribute, which re presents the URL (location) of the image. In this sectio n, the <IMG> tag also uses the WIDTH and HEIGHT attributes, whic h speed up the downloading of the image, and the ALT attribute, whic h accommodates users lim ited to text browsers. For example:
<IHG ALT·"Apple" WIDTH ·100 HEIGHT- 102 SRC- "a pple.gif" >
<TITLE>.. .<./TITLE>
Used unde r the <HEAD> tag, the <TITLE> tag describes the title o r a document, w hi ch shows up inside a document 's title bar.
Sound 1323.
Creating sound effects with clip media
Summary: By usingfree-of-rights clip media from public sound archive.\' on the Web, you can add sound effects to photographic images.
Tip: Lookfor sow1d effects at hllp://info .fi.IIV. edu.pllmultimedia/sounds/animaIs.
1/p: The images on this page arejivm Pacific Coast Software's collection of stock photography at http://www .pacific-coast.com.
A pply i ng w hat he learned when working with an analog sound medium, Tom C ipol la selected electronic images from Paci fie Coast Software's collecti on of stock ph otography, used A lberto Ricci's SoundEffects software to shape the sound, and converted fi les to formats for playback on Unix and Windows machines.
1. Select your photographs.
When se lecting photographs to combine w ith sound effects, look for shots with elements that evoke sounds. Pictures w ith human content offer the greatest range of potential sounds.
2. How many sounds?
When sound waves are mixed i n an 8-bit environmen t, there seems to be too little infonnation for individual sounds to maintain their integrity. Clip sounds from the Web or sound effect CD-ROMs are usually 8-bit. Try to limit your selectio n lO two sounds unless you start with 16-bit sound.
324. I Chapter 9
I
~
L1Eill
S hort Country #2. A IFF
hOt"SI? .aiff
n e c o r o uo y
Pl ay Rll
XR
Pl ay One
XG
Pl oy To End
Select r r om Queu e ~
nemoue rrom Queue ~
Formal
:.:F
Numb er or Ch annel s
Sompl e Si ze
Compression Type
Totol Time
Elosped Time
an
nemo ining Time
se u
Uoiume IdOl
Duffer Si ze
xu
lllde Progress
X II
4b.
3. "Ustening" with your mind.
Put yourself in the picture, a nd try to imagine what you would hear. Look fo r sounds that are strong enough to convey what's happening in the photo. You cannot expect to ho ld a viewer's atlenti on for long- 15 or 20 seconds should be the max imum duration for your sound clips.
4. Compare clip sound format, sample rate, and other characteristics.
SoundMachine can be used to compare sound fi le characteristics such as file formats, numbe r of channels, sample rate (Figure 4a), sample size, compression, and total time. SoundMachine di splays each of these characteristics on the Control Panel as the c hoices are selected (Figure 4b). Tom C ipolla noted the following information about the fi Ie's short country.aiff and horse.aiff:
short country.aifl' Format: AIFF Sample S ize: 8 bits Num ber of Channels: Stereo Total Time: 7 seconds Sample Rate: 22.3 kHz
horse.aiff Format: AIFF Sample Size: 8 bits Nu mber of Channels: Mono Total Time: I second Sample Rate: 22.3 kHz
SoundMachine Progress
~h=o=r;se=·=a=if=f~~~===.,...~l l~l~lml ~l
22.3 l<Hz .,...I I 8 bits ~ j..,. lg llnl 1
4a.
Sound 1325.
File conversion: AU to AIFF or WAY to AIFF
Summary: Use SoundApp to convert AUfiles to AIFF. (Note: Sowu/Effects, the sotmd editor used in the next section, will be needed to read AIFFfiles.)
· Edit Options
Ne w Play li st
:JG N
Open ·.·
aG O
l~po~t To Quici<Ti~e ... 00 1
Clo se
Sl! W
Sa ue
3C S
Saue As ...
Quit
30
1.
~
SoundApp
Tip: When converting to AU, use the selection called NeXTon the Sounc/App pu/1downmenu.
lel Sound £Hee ls ... I
0 Hrol.oirr D op;Jia use .au D ntJtllnu ·e.ou- 1 ~ 00 D clgu r e tt e .ou 0 cll t k t.ou D t ll <k2.ou
= RPS Orluo'"
I ( ~
ll~t t
I ( Ooskt n;1
( New CJ)
li
( Coneel )
n Soue J)
3.
T he clip sound tiles found on numerous sites across the Web may need to be converted to a lile format that your sound ed itor software can read. For example, Windows WAY ti les can be converted to AIFF with a Maci ntosh sound utility ca lled SoundApp (look for SoundApp on Ihe CD-ROM in the back of this book). SoundApp ca n also be used to convert edited Iiies to WAY format for Windows visitors and AU for Uni x visitors.
1. Select the file you'd like to convert. Open the Sound App software, and select Convert fro m the File pull-down menu.
2. Identify the file and format you need. Use the convert dia log box to locate the file you need to convert. Choose the file format you need on the pop-up menu beneath the window.
Ia Sound Effects ,.. I
D SoundA pp Conu ert ed trek D SoundApp Conuerte d t D SoundA pp Conuerted t 2 D speaker/Tag Heuer #1 O.AIFF D thunder.au D tom.hi.au D trelcdoor.wau D Water#B.A IFF
./ System 7 Sound Sound Suitcase
G:::l APS Driue'M Ejec t
Desktop
( Ca ncel )
~ ~ Open
2.
3. Select a folder for the new file. EiU1er create a new destination fo lder for the converted file or select the default folder by clicking on Save.
326. , Chapter 9
Mixing clip music with sound effects in SoundEffects
Summary: Use Alberto Ricci's SoundEffects software to alter and mix
SOli/IdS.
Tip: Use Adobe Premiere to convertfreeof-rights CD sotu1ds toAIFFfiles. Open a ne11·pmject, import, then open a CD sotmd, and export it as an AIFFfile.
+Selec t Eococtly
Select eococtl y
Ia
Seconds
of sound
0 Defore 0 Centered on
® Arter
the selection.
1.
Tip: The Music Bakery Sound CD collection is myalty-free music available through a buy-out license. For m o re il(/'ormation, callB00-229-03 12.
T om Cipolla gathered a co untry music clip from The Music Bakery's Sound CD, which contains a large selection of production-quality music sold with a royalty-free buyout license. He also located the sound of a horse whinneying on a public domain archive on the Web. The sound sampling rates of the sounds Tom intended to mix were 8.8 kHz and 22. 1 kHz. This d iscrepancy is not a problem easi ly straighte ned out in SoundEffects because the software ide ntifi es the d iffere nces a nd prompts the user about resa mpli ng sounds.
1. Clip a portion of a CD country music file.
Open a music lile in SoundE ffects, play the file, and determine the duration of the clip you'd li ke to use. Choose Select Exactly from the Selection pu ll -down me nu to open the dialog box shown in Figure I. Select minutes from the pop-up menu, and type in the number of minutes you'd like selected.
(Note: Sections ofthe wave pattern may also be altered with the Cut, Copy, and Paste commands. Start by drag-selecting a section ofthe tvave pattern, and then use the Cur, Copy, or Paste commands.)
2. Save the music clip.
Select Save from the File pull-down menu. and save this music clip to your hard drive.
Sound 1327.
~~'!..'~~'''! ~
·',. :-:'··."''·'~i.e.:.
1111
' 2.1
4b.
4c.
Special Windows
Redo [ffect
I31'1
Echoes & Reuerbs Mise Resampling Select ion Ampli fy Dither Fade In Fade Out
5.
Bandpass FIR
~ Bandstop FIll
~ lligh Pass t 111
~ lligh Pass 11 n
~
I
Low Pass II R "'
Sh eiUIIIY
I
Amplify
Amplify by: ~ %
n ll (Cancel J OK
7.
3. Create more horse sound. Open the horse sound in SoundEffects, select the wave pattern, copy it, and paste two more wave patterns at the end of the existing pattern.
4. Paste the horse sound into the music file. Copy the new horse wave paltern to the clipboard. Open the music file, and paste the horse sound into channel 2. Click on Resample when the message in Figure 4a appears.
~
tt:J
You are trying to paste a sound sampl ed at B.DDD kllz into a sound sampled at 2 2.05 0 kHz. Do you w ant me to r esample the sound yo u are in serting at 22.05 0 kHz?
n ( Can cel J Resample J)
4a.
(Note: If you need to creme a second or third channel, drag the channel icon above or below the existing channel, as
shown in Figure 4b. Ifyou need to delete a channel. drag a
channel icon to the /rash, as shown in Figure 4c.)
5. Resampling. According to Alberto Ricci. resampling sound from 8 to 22 k.Hz introduces a little distortion. To remove some of the distortion, select the wave pattern of the sound that was resampl ed, and then select Low PassiFIR from the EffectsiFIRII !R pull-down menu.
6. Test the sound. Click on the Play button to review the sound.
7. Amplify the music. At this point. the horse's whinneying sound overwhelms the sound of the music. Select the music wave pattern, and select Amplif'y from the Effects pull-down menu. Enter !50 to increase the sound or the music.
3 28 . I Chapter 9
~11 Leaue Sil ence
Leaue
Sampl es oytes
I
12 .0 0 0 0 0
I I
of silence at t ® the Sound
Milliseconds Meters Feet
l
0 the Selected Chonnels
~ (Cancel ) ~ OK
Sa.
8. Leave two seconds of silence.
To balance the sound a little more (so d1at the horse doesn' t overwhelm Ihe music). select the horse ..vave pattern , then select Leave Si lence from the Edit pull-down menu. Select seconds from the pop-up menu (shown in Figure 8a). enter 2, and click on OK. The result is shown in Figure 8b.
<? )22.254~H<, 8 bfts
I \1)() Stor·R
B) !603~69bvtH -
twlus lc.n IFF
Chirmtl 2:
u )<SJT-52
, . )4'!;508
· 1301760
B ump
'
FIR/ IIR Filters Echoes & Reuerbs Mise Resa mpling Mike's Modules Selection Amplify Dither Fade lu Fade Out Keyboard Noise Normalize Quick MiH Replicate Reuerse Roboti ze Sel ection to Channel Si l e n c e Smooth
9a.
8b.
9. Mix the music and the horse sound.
Start by selec ting both channels, then:
a. Choose Quick M ix from the Effects pull-down menu.
b. Choose New Doc ument and Mono in the dialog box that
fo llows. C lick on OK.
(Note: When you mix smmd, the respective pmportions qfeach
ofthe sowIds are reduced. For example, ifyou have three chan-
nels andyoumix theji1:1·ttlro. then mix the owpw with a third
channel, the pmportions
Quick Mill
Mill t o:
0 New Cltonn el
® New Document
become .25. .25, and .50.
Ifyou mix all three 10gethe1;
the pmportions ll"ill be .33. .33, and.33.)
Usc: @ Mono
0 St ereo
[81 Usc eoch cl mnnel 's pon
9b.
10. Save the new sound file.
Sel ect Save from the Fi le pull -down menu , and name the file Music/horse.aiff.
Sound 1 329.
Recording and mixing sound in SoundEffects
Summary: Use Alberto Ricci's SoundE./Jects soft ware to record and mix SOtllldS.
Occasionally, you' ll want to record your own sound effects when clip sounds are not avai lable. For the crowd photo, Tom used the sound ofa crowd on a tape cassette he had recorded at a sports event. Your tape recorder can be hooked up to your Macintosh with a cable that runs from your tape recorder's outputjack to the Macintosh microphonejack. You' ll need a 1/8-inch plug on the Macintosh end. You should be able to find the propercable at your local Radio Shack store. Buy a cable designed for a mono signal. Even if your Macintosh can handle stereo sound, your recording should be mono to keep fi le sizes small.
1. Open a new sound document. Open Sound Effects. Use the default blank sound document or select New from the File pull-down menu.
untitl ed sound
? rm~Hz;Sbtts - : [Cii.oliOiSTTQ-2- .. (0 -~ -- - E h""4>
~t><· 15..-;;:;:;;-- ~
lonmptts ;:::ll · Io
BJ rob~1,.
,
(.OO ··~nds ~ · fO - ~
1-------
--
a
llBK+···· ····· ························································· · ·18
Glf~ll ............. .. ........... ··--·--·-··············································· 83
-:-:
m
1.
2. Click the Record button. Click on the circular red Record button at the bottom of the doc ument. (Note: This record button
does 1101 srarrthe sound recording.)
330. j Chapter 9
Input So urce:
Microphone-
Internal CO
0
0 Pl ay through
[Ca ncel ] [ OK
3b.
f . - fl[u~r.'1<1~
Un11Ued
" fO
' l'
· D
E31!!1r·
..... . .. "1 ., .. .......... !Bel
:ll!l.!l.:JI
.-- -.SJ
..!lli'.!!.ll.l~.!!l
4.
3. The Record dialog box.
To see more of the record d ialog box:
a. Cl ick on the small tri angle to the left of General
Settings.
b. Click on Device Seuings to make sure the microphone
is selected as your sound i nput source.
c. I f your Macintosh can record at 16 bits, select thi s
option from the Samplin g Size pop-up box.
d. Set the the Play-T hrough Vo lu me to Off i f you're using
a microphone hooked up to your Mac, otherwise feed-
back w ill occur. (Note: if your external sound source is
a CD playe1; you can tum up the Play-Through Volu111e to hear 1vhat is being recorded.)
I, . _
Re c o r d
~ [ij II ~
~
s~
Annablt S.mplts Aval!.blt S.C:Onds R..orcltd S.,..plu: R.cordtd SfCO"ds:
780:1952 350.7 0 0
(tanctl )~
V Gent r.al S·«ings
u..:
I Mono ~I
S4mplin9 Rate :
I I 22.2 kHz - Standard ~
Somplln9 S izt:
I 88its .. I
I Ploy-Ttv·ough Yolumt. ~
Dtvlct Stttings.. )
(8) Auto Oaln
t> Vox Para meters
3c,3d.
4. Click on the Record button.
When your tape recorder is hooked up to your Macintosh. queue up your tape so that i t is ready to play. When you're ready to begin, press Play o n your tape recorder. and cl ick on the circular record buuon at the top of the dial og box. When you're happy w ith the recording. click on Save. Figure 4 shows the result of Tom Cipolla's crowd recordings.
Sound / 331.
332. 1Chapter 9
5. Save the new sound file.
Select Save from the Fi le pu ll-dow n menu, and name this fi le Crowd.ai ff.
6. Create a new channel for a music sound.
Tom wanLed to mi x the so und of the National A nthem he found on a sound effects CD w i th the sound of the crowd . To do this, he dragged the ex i st ing channel icon to create a second channel.
eJ
? 2~ OSOI<Hz; 8 bits
r ·~<) Stt rt o -
~ :553279 byt..
:::.
Crow d .AIFF
t 'Ch.lnno12: 276253 ..~
1252t tco<>ls
[ffi[l
. . .\..
· · · ·· 'I
' ·~;T ---r-.' .
~
..
~
rroo--
_-, ffi -s,amp
-· ro--:-:- =
E3
.- .
IE!
(]ISlJ
_.
, ..
~
. . .;:,.., ·.
lEI
m
d~=l ~
~
:!1 ri !!J JJ ~ ~
2.1
:0
6.
7. Paste a music sound into the crowd file.
Tom opened the National A nthem ti le, selected the w ave pattern, and copied it to the c lipboard. H e then pasted the music sound into channel 2.
8. Mix the two sounds.
Start be selecti ng both channels, then:
a. Choose Q uick Mix from the Effects pull-down menu. b. Choose New D ocument and Mono in the dialog box that
follows. C lick on OK.
9. Resave the new sound file.
Select Save from the File pull-down menu, and name this fi le crowd.ai ff.
File optimization: Resample and downsample sound files for playback on the Web
S ummary : Take an inventory o.ffile sizes. and use downsampling techniques to reduce them.
A fter mix ing sound for each of the photographs, Tom C ipolla took an accoun t of Lhe file compone nts and total file sizes to see whe ther the fi les would be appropriate fo r the Web. F ile size is related to d uration a nd sampl ing rate. Larger files ca n be scaled dow n by resampli ng, although there is a loss o f quality.
Picture: Horse music (country) ho rse Mix
File Size
330 K 110 K 605 K
Picture: Crowd c rowd
2861<
National Anthem
l OOK
M ix
56 1 K
Picture: CruiseShip steamship whistle 330 K
P icture: Waterfall music (orc hes tral)
1276 K
waterfa ll
33 K
Mix
649 K
Cha racteristics
Stereo, 8-bit, 22.254 kHz Mono, 8-bit, 22.050 kHz Stereo, 8-bit, 22.3 kHz
Stereo, 8-bit, 22.3 kHz Mono, 8-bit, 22.3 kHz Stereo, 8-b it, 22.3 kHz
Mono, 8-bit, 22.3 kHz
Stereo, 8-bit, 22.3 kHz Stereo, 8-bit, 22.3 kHz Stereo, 8-bit, 22.3 kHz
Sound 1333.
Resample Rate
Resampl e the sound (preuious ly at 22254 Hz) at
IL11127.272]1EJ Hz
(Cancel ) ~ OK J)
Tip: Alberto explains that ifyou must
halve tlze size ofa 44kHz, 16-bit sound, it is better to downsample it to 22 kHz, 16 bits, instead of44 kHz, 8 bits. Depending on how small you need to make the file, you could do wnsample both the rate and the size.
Jfyou downsample a 22kHz, 16-bit sound to 22kHz, 8 bit, only the Macs with 16-bir output (Power Macs and AV Macs) will notice the difference. Jfyou downsample the sound to 11 kHz, 16 bit, it will sound better on the 16-bir Macs, but the 8-bit
Macs will "hear" the sound as ifit was 11
kHz, 8 bit.
For music, it is best to keep sound to 16 bits. Howevet;Jor speech, 8 bit is suitable.
A1be110 Ricci, the author ofSoundEffects, recommends lhc fo Uowing steps to reduce a sound's fi le size:
1. Remove trailing silence. Remove any following silence paris. This often reduces the file as much as l00 K.
a. Drag-select the silence in the wave pattern.
b. Press Delete.
---'----' !iKIIter s.tlltt
; IChtnnt11 : I~2 1 633-tlmRIH
n 4.45steoJI4J
·· [6360~
·· I25SOZ4
·· ·~· ~~ -
E! u mp
-= E3
= = = -- = -::-== ~ -= "' = '--- "'·
d~..:J ~
l l~
1a.
2. Resample the sound. Downsample 16-bit sounds to 8 bit. a. Select the sound wave. b. SelectDownsample from the EffectslResampling pull-
down menu.
3. Mix the channels to a mono sound. If stereo sound is not essential, this step will reduce the rile size. a. Select the sound wave. b. Choose Quick Mi x from the Effects pull-down menu. c. Choose New Document and Mono in the dialog box that
follows. Click on OK.
334.1 Chapter 9
Tip: Lookfor the commercial release of SoundEffects, which will be called SoundMake1:
4. Resample to 11 kHz or 8 kHz.
Ifthe sound sti ll sounds good, resampling to ll kHz or 8 kHz will reduce the fil e size.
a. Select the sound wave. b. Select Resamp le fro m the EffectsiResampling pull-down
menu.
c. Select 111 27.27 from the popup menu, or enter 8. C lick
on OK.
After trailing silence was removed, stereo sounds were mi xed as mono, and the sounds were res~unpled to ll kHz, the resulting sounds were substantially smaller. To reduce the sounds even further would require shortening the sound duration.
Picture
File Size (Mix) New File Size
- - - -- -- - -
Horse
605 K
99K
C rowd
56 1 K
154K
----
Cruise shi p
660K
176K
------ ---- - - -
- Wat- erf-all - -649-K-
-143-K -- ---
Sound 1335.
File conversion: Preparing sound files for other platforms
Summary: Use SoundApp to convert files for downloading on other platforms.
IIIJlll Edit Options
New Play Li st
3N
Op en ...
3 0
I
ll~ :
I m po rt To Qui ck Ti ~le ... 3 1
Clo se
~w
Saue
31JS
Soue ns...
Qui t
3 Q
1.
\e<J · I = SoundApp Conucrle d ( w ...
APS Drl ue'"
D w nte r/ ph,ned
i! ( [jNI J
( ll e s k iUII )
( New CJ J
Creol e Dlrecl oru: lsoundApp Conuerl od l ouJU
( Can cel J
D ([ soue
3, 4.
F ile conversion comes at the end o f your sound project when you' re pre paring fi les fo r your Web server. You ' ll need WAY fi les fo r Windows v isitors and AU files for Unix visitors . Note that SoundApp re fers to the AU formal as NeXT.
1. Start SoundApp.
Start SoundApp, and se lect Convert from the File pull-dow n me nu.
·,·Eat.et- / phased
2. Identify the target file format.
Locate the ftle to be converted in the file list window. Press on the pop-up menu (Figure 2) beneath the window, and identify the target file fonn at, which is Windows WAVE and NeXT (or AU).
Ia "' I Sound Effect s
= AP S Driue'M
D thunder.au D to m.h i.au D trel<door.w au
ifr
[ Eject ) [ Deskt op )
D Wa t er#B.A I FF
D Water.A IFF
mrj
u:: D - D
n D
woter/phased.R IFF
wel come K-fi les.au
System 7 Sound Sound Suitcase
~
[
Rill Ill .,··Iilii ./ AI FF
Il l" I I 111-~ IIJ'
-NeHT
~I
Ca n cel Op en
)
l)
2.
3. Create a destination folder.
SoundApp w ill create a folder for your conven ed fi les. Accept U1e fo lder name or create a new one. Decide where you'd like the new fo lder to be saved. For example , c lick on Desk to p if you'd like to see the folder saved to the desktop.
4. Save and convert.
Saving wi ll starl the conversio n process. Look for your new ly created folder; your new fi les wil l be inside.
336. 1Chapter 9
Artist featured in this chapter:
Curtis Eberha rdt has a B.A.fromtheArt lnstitwe ofChicago and an M.A .ji·om New York University. Curtis specializes in Macromedia Direc101; Strata Studio Pro, Softimage, Electric Image, FormZ, and Photoshop. His clients include Messner Advertising, Web TV/Philips Magna vox, and Young and Rubicam.
CurtisAE@aol.com
/utp:l/www.new-kewl .com/curtiscape
GIF Animation And Shockwave
GIF an imation and Shockwave have become the two most popular forms of ani mation on the Web. This chapter opens with several examples of both and the n covers tips on how to create your own an imation proj ects. By fo llowing examples created by new media artist Curtis Eberhardt, you' II gather val uable infoma t.ion on how to use P hotoshop to create an imation stills, optirrilze color GIF images using GIF Wizard, assemb le a GIF an imation in GIFBu ilder, assemb le a Mac romed ia Di rector animation, a nd created a "Shocked" version of a Macromedia Director mov ie for the Web.
Curtis Eberhardt's GIF animation
Summary: Follow the URLs mentioned in this section to view Curtis Eberlwrdt's G!F animations on the Web.
Above: A close-up ofthe spaceship G!F animation. Above Right: Curtis Eberhardt's portfolio page contains a tiny spaceship G!F animation in the lowerright com er (http://www.new-kewl .comlcurtiscape/main.htlnl).
::.i.~.J ~ ~ I~I.!.I!TiT~ i00 -
u.;.-1- , . · · - - · - : : r :· 1-·-·11....,..- 11._-11 ~-...... ICE:JI - .... I
L-~\.~~E:nn lunr tCturlUlo~c ut:p:o<o:>'.CQffi~·- 'I
A bove: Curtis Eberhardt's home page, containing a GIF animation (h ttp:l!www.new-kewl. com/curti.~·cape).
GIF ~nim ati on is easy to i~p~ement because the animated 1mage may be placed mime-or embedded in a Netscape page using the <lMG> tag. No scripting or plugin is requ ired.
This page and the nex t page contain GIF animation examples created by C urtis Eberhardt. For artists who are thinking about c reating their own G IF animation, Curtis offers the following suggesti ons.
1. Create stills in Photoshop or GIFBuilder.
Use Photoshop to create animation stills for your "flip-book" ani mation, and save your animation stills as GIF or PICT images. GIFB uilder, by Yves Pig uet, is a n easy-to- usc tool for building GIF animations. For simple ani mations that include only move me nt. start with one image in GIFBuilder, move the art, and save successive new stills.
2 . Be conservative with GIF file sizes.
Try to limit the number ofstills in your GIF an imation as well as the physical size. Here are some examples:
Animation File
File Size
Curtis Spaceshjp (this page)
9K
Bumpy Head (next page)
18 K
Bumpy Arrows (next page)
5K
GIF Animation And Shockwave 1339.
Bumpy, king of the Internet
rJ
NoUc ftpe: les t
1 .~ 1..": I!. II.!.1.!.1 ! I.§.It! I~
leo.atloll h.ttt //........... .._........ _..,_lhN£-·hurt l'l~\
A bove: Curtis Eberhardt's rotating cartoo/1 head created with GIFBuilde1: To see Bumpy, visit http://www.newkewl.com/curtiscape/ bwnp.html. R ight: Curtis created his Bumpy character using 3D software.
C helM here floeqUCfllly for atonya about llumpyl
New epllctdn will oppcdl' monthly, onclos 1 apeclal .,_., he will be Joined by 1011!1 of hll cool frlelldsl
Above: Curtis Ebe rha rdt 's animated a rrows, created with GIFBuilde!:
3. Use GIF Wizard to reduce GIF file size.
GIF Wizard o n the Raspberry Hi ll We b site (http://www .raspbcrryhill.com/g ifwizard.html) is an o nline tool that can be used to reduce the size of your GIF images. (Note: For
step-by-step instructions on how to use Gl F Wizard, see GJF Wizard at Raspberry Hill in this chaptu)
340. 1Chapter 10
Animation and interactive Web games that use Shockwave, Java, live video, andQTVR
Summary: Visit Web sites with Shockwave and Java to gather ideas for your ow11 pages.
Above: Web visitors who want to contact "the spirits ofthe Dominion" can play a WeeJee board game wrillen in Ja va.
...... ..... ......,.....,... .... _._....a.tl_ l'no,~\........ ,..___..,.d..·ktL -
""""' .,,;, -..uoq.,.,~d..,.oP:..M ·-·- .. .c.u'MIII.u.,. .... ,.JOII ~
~--.._,
~.,.
..... ...,_ ~ ~ --.4""''-
Above: The SciFi Channel's Lost in Space pages contain a Virtual D1: Smith Shockwave movie.
T he SciFi Channe l's Dominion site (USA Network) at hllp://www.scili .com is one o f the most technicalIy advanced sites on the Web. Visitors will Find games and interactive pages created with Shockwave, Java, and CGI scripts. A live video feed accessed through a lin k on this site's home page displays what is c urrently being shown on the Sc iFi Chan nel. (Note: Visitors call see videoframes update eve/)' 30 seconds. To see new.frames. they must click on the Netscape Reload button.)
The SciFi Channel's Web site is produced by the following creati ve team: Creative Director Sharleen Smith, Senior Internet Producer Gary Markowitz, Online Projects Ma nager Sean Redlitz, and Lead Programmer Jamie Biggar.
GIF A11imation And Shockwave I 341.
"No designers were harmed in the production of this Web site."
Above: Visitors who explore the links on The Arrival site discover an interactive console. It opens in an extra window over the Netscape browse1:
Above: The content ofthe console's largest frame changes in response to mouse clicks onfolder tabs.
T he A~Tiva l s~ te was cr~ated for lhe.Li~e Enterta~nment's mov te stamng Charhe Sheen. Thts stte has an mteractivc "console" created with Shockwave and Livesctipt. The button panel is a Shockwave movie with flickering lights and machine sound effects. The folder tabs are clickable hotspots lhat branch to pages with movie stills, movie clips, and a movie synopsis. You can reach The Arrival site at http://www.thearrival.com.
Movie fans interested in movie slills can use Netscape's builtin downloading image feature. To download a JPEG image:
· Position your mouse over an image.Then press and hold the mouse button until a pop-up menu appears.
· Select Save This Image in the pop-up menu .
· In lhedialog box that follows, click on Save.
· The JPEG image wi ll be saved to your hard drive.
342. 1 Chapter 10
Shockwave movies with moveable parts
Above: The Ben & Jeny 's Hair Game imirates a real-life game rhat uses a magner and iron filings to move hair around.
...,.....!_, . . . ....-.,· ··"l--··..... .... ....... - · ~· · ·1>'.14~-~,
~,-
·-ot~o···-·
·- . ... \ ...... l;l<ft>"C ..
~
A bove: The Disguise-0-Rama game from Ma rlow Publica/ions imiw res a real-life paper cut-out game.
l ...l hnl http //W'tfflott\.i'"''VUrniM/b}'ll·n, 1'1trr l
~··,:2.·.:J~Cuo11 ~ 1 ·~I ''-IC.~~~~.JJ~J
ro··tut·nr~IUI.J.cru.d~.
IW).lJto~
~ mum
Place yoor cursor over the hair material and press the mouse button. Hair will cling to your cursor&'can be moved In place as moustache, beard, sideburns, eyebrows and hair. Let go of the mouse button to d rop hair ln place. To start over, click on the "Clear" button.
Ill
T he Disguise-0-Rama game, the Ben & Jerry's Hair game, and tJ1e Build Your Own Bug game make innovative use of Director's moveable sprite option. T his feature, which can be implemented in the Score or through Lingo, allows viewers to slide cast membe rs around while a movie is playing. VisitlJle followi ng sites to see Shockwave movies with moveable patts:
· Disguisc-0-Rama (http://www.marlowpub.com/ Marlowe/cl isguise2. html) is based on Marlow PublicaLion's cartoon characters Sam and Max. The Shockwave game was art directed by Pauline Neuwirth
GIF Animation And Shockwave 1343.
J ll
Nelsrope: J amet and the Giani Peact1: Online Game
<>·
I !}) ' <tk I '\!:1 . ., I 8 . :XI
l_ ~!U· ·'"·.r..~...~1/""··"'.·."-_"2,".',.,-,,....l.<...t./WI>"I~.=.".="P?~k,-..,..,,'/J"':"~-=,·-'=..~ .,=_·,=t.=..-.·~..,.1.....,,_.O1.P-='jo!..,·~""ll~"'=..=.,,:-~,~-.-..,-.-,.-...,..,..l,.,.,.-.~..,0...,
J I "-~t'IHtW'11 ..,..,~1~1 IU...,.. Ntt .,......~ ~~tct)f'"'4J .__!!!·_.......
-..aaa;.g.w SUII!ItfttfltfJJI!JQ
f!Bffiii·'· ·Hi ·' '
DU II.O YOUR OWN DUO
Above: To build a bug, players select bug partsfivm a co/lee/ion at the bo//o/11 ofthe screen and drag them/a the bug "stage."
MI@Miffii!M :m I @1tmi
.. ...,.,....,,Doc.at
(redkit@aol.com) and created by Chris Kingsley (webmaste r @romdog.com). · Ben & Jerry's Hair Game (http://www.benjerry .com/fun/bj-hairy. html) is based on a magnet hair game available in the Ben & Jerry's gift shop in Waterbury, Vermont. · Build Your Own Bug (http:// www.bcnjerry.com/ fun/bj-hairy.htm l) was created for Disney's movie Ja111es and the Giant Peach.
344. I Chapler 10
·
t¥'11l.J ~~ lhO'o"o'C fed w.ctP., tf ~· hao;oo oot
Pontlo1c Gmnd Arn
Cadillac S.VIIh! SJS
Tip: Quicklime VR authoring tools are available.from the Apple Developer's Association (APDA) at apda@applelink .apple. com.
General Motor's Product Line Web page has a small Shockwave movie and interesting QuickTime VR movie downloads of car exteriors and interiors. You can reach General Motor's Web site at http://www.gm.com/ shockwav/spin/eaOO.htm.
QuickTirne VR is Apple's cross platform movie format that offers a virt ual reality experience in the form of a 320 by 240 (or full-screen size), 360 degree panoramic image. The movie can be p layed on a Macintosh or a Windows computer using the QuickTime VR Player. To download the QTVR Player. visit A pple Computer's Web site at hllp://qtvr.quicktimc.applc.com/arch ive/i ndex.html. Viewers can rotate the scene by positioning the mouse pointer to the lert or ri ght edge of the movie and pressing down on the mouse buuon. To Zoom in, press the mouse button and hold down the Opti on key. To Zoom out, press the mouse button and hold down the Control key.
QuickTimc VR movies may be formed from either still photographs or computer generated images. The movie corrects the di stortion ordinaril y associated with a panorami c image by incorporating a distOJ1ion correcti on algori thm. The distortion con-ecti on occurs on the fl y wh ile a viewer is panning a scene.
Gl F Animation And Shockwave 1345.
Promotional game previewscreated with Shockwave
346.1 Chapter 10
A Shockwave preview ofD, a CD-ROM game created by Acclaim Entertainment can be found at http:// www. acclaimnation.com/0.The Dsite was created by Enginc.RDA, a multimedia start-up inside RDA International. Enginc.RDA is a 20-year old New York City advertising agency owned by Michael Racz and Gail Dessimoz. Engine.RDA's client, Acclaim Entertainment. is wellknown for their Mortal Kombat game, the most successful CD-ROM game ever produced.
Pan of the nine-member Enginc.RDA team,Web anisl, animator, and programmer C urtis Eberhardt can be reached at CurtisAE@aol.com.
"Until all digital media blends into one medium, design professionals must adapt their skills to several different formats."
Above: A QuickTtme movie preview of Dis available on Acclaim Entertainment 's Web site as a movie.
He created most of the art and Shockwave movies on the Web site. The Engine.RDA team is led by dig ital media creative director. Regina Joseph. Regina is a multimedia content developer who frequent ly s peaks at desig n and entertainment confere nces. She is well-known for her creation of Blender, the pop-cu lture dig iz ine launched in I994.
Regina·s other team members include: 3D and animation artist Alex Ostroy. digital designer Chris Capuozzo, digital designer and recordab le media artist John Hil l, digital video spec ialists Claude Borenzweig and Damien C layton, programmer Yineel Shah, Webmaste r Rob Keenan, and online media technical director Rob Mol cha n. When asked about the rapid changes in dig ital desig n, Regina explains that multimedia artists must constantly reorie nt themselves to the changes in digita l me dia. Until a ll digital media blend into one medium. creative desig n pro fessionals must adapt their skills to several different formats such as CD-ROM, enhanced C D, and the World Wide Web. A fourth , digital versatile disc ( DVD) is expected to be available soon.
C l F Animation And Shockwave 1347.
"Killer Klowns, the band that
II
produced the
game's sound
track, reports
the song goes
over very well
in New York's
downtown clubs."
ON
A bove: Razorsnails pokesfi m a1drag racing and California skateboard art. Yo u can reach the Tlw nk site at http://www .tlwnk. com (No1e: look.for Razorsnails and other Shoc/.:lvave SC/111ples on the companion CD-ROM in the back ofthis book).
j ·nzrtUUt!K Yr'QRI P. I QO WlCtJB !Q~'PACB 1OPvrn.:, t!W t! r;ll
The Thunk site (http://www.thunk.com) contains a humorous digital game prototype called Razorsnails. The Shockwave movie was art directed by Larry Rosenthal and created by artist/animator Jason Fmchter. When the green light goes on, the snail runs over a razorblade. During tJ1e race, "snailjumps" include obstacles such as thumb tacks, a ginzu kni fe, salt, and broken glass.A teflon patch and a gasoline slick makes the snail feel good.The objective is to get the snail to the finish li ne wi th a minimal amount ofdamage.
J(jller Klowns, the heavy metal band that produced t.he ·'Razorsnails" sound track, reports that the song is very popular in New York's downtown clubs.
I 348. Chap1er 10
Curtis Eberhardt's tips on creating GIF animation frames in Photoshop
S ummary: Flip-book animat.ion ca11 be created.from a series offrames comaining 2D images.
~~
11dobe Photoshop"'"'
la.
lb.
T wo-dime nsional images with implied motion can be adapted to fo rm a ni p-book type of a nimation known as G lF animatio n. ln thi s exampl e, Curti s Eberh ard t staggers the position o f a n a lie n s paceship and a viewfinder that tracks the alien ship. Once the ind ividua l G lF frames are c rea ted in P ho toshop, the GIF animation can be bui lt in G IFBuilder. (N01e: Readers who 111ish rofollow the steps in this sectio11 may look for Curtis ' images 0 11 the companion CD-ROM. )
1. Create a flip-book image in Photoshop. a. Open Photoshop. b. Select Open from the File pu ll-down menu. c. In the dialog box that follows, select curlis_l .gif, and
cl ick o n Open. d. T he a lien image will open in a Photoshop w indow.
lc.
ld.
GIF Animation And Slwc/.:wave I 349.
2. Make changes to imply movement. a. Select the Rectangle Marquee tool.
b. Click on the double-headed arrow i n Photoshop's
2a.
Foreground/Background color box to make the
background color black, as show n.
c. Drag-select the alien ship.
2 b.
2c.
d. Reposition the alien ship slightl y to the right.
e. Deselect the " marching ants" by selecting None from the
2d.
Select pull-down menu .
IIOit
XJ
rotot llanut ...
re.u.,, __
Moi.Uy ""Oillt t
2e.
3. Place the viewfinder image.
(Note: Use the Place command in Photoshop to add the
view.findeJ: The Place command wi/1 only work ifyou have
RGB Color Mode selected.)
a. Select RGB Color from the Mode pull-down menu.
3a.
350. 1Chapter 10
ldlf Mode
. ., , .,.111\t'
·
· \ ·ur ll· -
~·u · Ctti"J .··
R rt~· rl
RtCIUIII:I I.Mpur t
I"··· \ f'tO-
I"r l al ~.
JE
3b.
b. Select Place from the File pull-down menu. c. In tJ1e di alog box that follows, select view.eps, and click
on Open.
L ( J N~ /eJ RthrnCII· ·)
~....
i.!llil!l
c:~ l l ~t\ tJ.~
CI2::J
~
c _.,u ~
J9t::
:J
3c.
d. The viewfinder image will appear in the center of the Photoshop window s urrounded by selection hand les.
e. Move your mouse over the placed image until your
pointe r arrow turns into a mallet. When you see the ma llet, click your mouse.
f . The selection handles will di sappear, leaving a selection surTounded by marching ants.
~
I -~.._
TIH!
.~.
- -,
I
3d.
Ill
3e.
l llllf'IUI
r 1aUuer ...
M· dt t. M·tlill9
lol lll ll
. '
1\'1' ~ t
4a.
3f.
4. Adjust the color of the viewfinder image. Make the viewfinde r image less bright by using Photoshop 's Curves.
a. Select Hide Edges fro m the Select pull-down me nu.
Th is wi ll make the marching ants disappear but the image will still be se lected.
GIF Animation And Shockwa ve 1351.
b. SclectAdjustiC urves from the fmage pull-down menu.
c. A Curves dialog box wi ll appear.
d. Make sure the Preview box on the Curves dialog box has
an "X" in it. Use your mouse to drag d1e c urve downward, as shown.
e. With tJ1e marching ants hidden, you wi ll see d1e
4b.
viewfinder image become darker w hen you move the
curve.
xa ·I-, c::E:J
I ( C1nte l ~ ~
('mlot·
() t ut·)
(,tT(lrl1
[o] f'rtlliew
(hun·t. l Rfil xa .., J-
QD
( C·ncol I
~ ~ ~
t=: PrfoUIIU'
4c.
4d.
IIJIMb iU
..1111
."'.~·..·."..',
Xll
xa
l o lor llttng& ...
l rn l h· r ~. "'itdll ·
.... Illig
I "' tiJ \ · l~r ll < II hl·lif'ltlt lltCI-
5a.
4e.
5. Move the viewfinder image.
Curtis made dle viewfinder fi rst appear in the extreme upperleft corner. Only a small portion of it appears i n tJ1e slide where iL is introd uced.
a. Select Show Edges from the Select pull-down menu.
b. Wi th the view finder image still selected, position your
mouse over the marching ants un ti l you see your selection arrow.
..
[-- ~--- i~:j
. I f
~~Ill!"
5b.
352. 1Chapter 10
~~a "
Sc.
6a,6b.
~tm aqefl
1nmn,, r.t nyuele
l'liWI\1011
"'ll'-1 (olor ("'1YKhl,ar t · b Ctl tr MuiiH itennrl
fOhll l elll~>.
fMYK Ptllulow l.·tnul W~~tn.lnq
7a.
c. Drag the image up and to the left as shown. d. Select Hide Edges from the Select pull-down menu.
Wlnllow
1111
·
Non.,
·
b r f l- 1
·
(OIM'R""'~ ·-
l tal hf"l l'IUti!I!J Mnttl ntl
l.IOU/ \.lnll&of
J
Sd.
6. Duplicate the viewfinder image. (Note: Two viewfinders slightly offcenter give the impression ofmovement. An Option-drag will make a duplicate.)
a. Hold down the Option key, and drag the viewfinder
image slightly to the left and down. b. A new duplicate will appear.
7. Save the image as a GIF file. (Note: lndexed Color Mode must be selected in order to save the image as a GlF file.)
a. Select Indexed Color from the Mode pull-down menu.
b. In the Indexed Color clialog box that follows, click on OK.
c . Select Save As from d1e File pull-down menu.
l tllt~Mr d Cofof"
. ........l.d. il
,.,.d4!
...
,,.,._ Of)tn...
XO
....... - - - ,
[0 Ncme Qr11 ur~ n I ! ; O i f h u !llll
!
lcquile I IIPOI I
l lle l n l o .. .
........... .,. I'I!Jt' ietup...
""'''"' -~
7b.
7c.
GlF Animation And Shochvave / 353.
7d. 8. 9.
10.
d. In tl1e Save As dialog box that follows, select CompuServe GIF from tl1e Format pop-up menu.
e. Edit tlle lite name so that it reads curtis_2.gif instead of curtis_ l .gif, and then click on Save.
111" '" I 91
~
- 1.___ _ _ _ __w
c::::I!!!Q
~
~
l··riiL.O\tlf rom1o1:i CorniiWhr ~t· lolf ·I
7e.
8. Make the viewfinder chase the alien ship. Repeal Steps 2 through 7, and create screens to make the viewIinder chase the alien ship across the screen.
9. Make the viewfinder "lock on" its target. At the far right of the screen, create an image showing the viewfinder superimposed on the alien ship.
10. Create an explosion. To create tlle effect of an explosion, Curtis painted a ball of lire behind tlle viewfi nder using yellow, orange, and red.
(Note: To see Curtis ' explosion, open Netscape, and then open alienhtmlfrom the CD to view Curtis' completed animation in co/01:)
The ball of fi re grows over four to five slides and then subsides. The viewfi nder is shown in the final slide, and tl1e alien ship is missing.
I 354. Chapter 10
Curtis Eberhardt's tips on assembling a GIF animation in GIFBuilder
Summary: GIFBuilde!; by Yves Piguet, is a prOK IV/'11 that combines several PICTor GIF images imo one multiple image GIFfile.
GifBuilder la.
A ssembling the GIF animation in GlFBuilder invo lves very few steps. In this example. Curtis creates a ni cker effect by addi ng a black slide between images.
1. Open GIFBuilder and add frames. a. Open GfFBu ilder.
b. The Frames w indow will appear.
c. Select Add Frame from the File pull -down menu. d. Ln the dialog box that follows, select the first of your
animation frames, and click o n O pen.
li rrocn··
j
1b.
!t"'J I IJf'n GII\ ·I
!~!C' u"'f"t"h'-_ l' 't,·gIllr'l Ql Ultlh_ l 1.qll
'III UIIh- ll.gll 'i:unth_ l.gll jia11ll'-l· II
1d.
c::> II U
~
( OuU op
~
· ~
ldll N·w Op·n · \oJt·
0~ 1100\
:IC XI .11t.\
r onot rt
_nul~ll
1c.
G!FAnimarion And Shoc/..:wave 355.
lllml.l dU
Joif! W Op;r tl," \., ,.,.
Dtlllnn ·
· t0 1\
1-
llfl!tllll l l'"i\1"'\'\: :....u
Cenu~t l M.
f-
1e.
e. Rc-selectAdcl Frame from the File pull-clown menu.
f. In the dialog box thm follows, select curtis_black.gif, and click on Open.
ieput rn &lh ·I
c.:~ MD
I!ZllmilJI ftalraelle· IU6ndew
"' lnlf·rlaud
.I
t tUIU
~!
Olplh
~
UllhtUIBg
I IU.9 4t \ i 1D...
lact re un,. Celot .-
ll···pateat lot ki i i iUl: · lt e m & Po ,lltoa .··
l n lfl l lllllll,. hP I IIij , IUt j\OUI ,.1o l llod
h e M· l pUm llll llt n h arnelM11ernlen
hut~O" II on \ llt ultolec l or y\tll ltll'
2a.
\ eur \tiU tton'L.
.1( II Cid l u t·M.·u Rt lntlllfen1u
l onuett .··
lul l
kO
3a.
u.
g. Repeat Steps c through f until you have added all of your
images. (Note: Remember to altemate the black slide be/IVeen images.) 2. Add a loop to the animation (optional). (Note: Adding a loop to your animation will cause it to play over and over ontlte Netscape page.)
a. Select Loop from the Options pull-down menu.
b. Click on the radio button nex t to the fi eld labeled times,
and enter a number to indicate the number of times you would like the animati on to loop.
l ooplag
O··
Q r orr11rt @li::j lltH I! \
2b.
3. Build the GIF89a file.
a. Select Save As from the File pull -down menu.
356. I Chapter 10
Cl lltl
~ I lt,t tep ) I ,..,, ol
b. In rhe dialog box that follows, name the animation alien.gif. and click on Save.
4. Quit GIFBuilder and locate the GIF89a file. a. Select Quit from the File pull-down menu.
3b.
b. Locate the GTF89a image in the Macintosh Finder.
You' ll need to drag the image to the djrectory where you
plan to store your HTML document. (Note: See Curtis Eberhardt's tips on creating an HTML file to test your
GIF animation.)
£dll Opllent
... .,w
. ...
ltprn _
JC ()
iauft
XS
\·u· lh ~.
\U·O \f'II'CUOft ,_
lhld l nm P- ~ . au : l!eklacl r1orn t \ Mu
4a.
.~liPn gif 4b.
GJF Animation And Shoclrwave J357.
Curtis Eberhardt's tips on creating an HTML file to test your GIF animation
Summary: Use the <fMC> tag in an HTML document to test your GIF animation.
SimpleText
U se SimpleText or your word processor to create an HTML document. If you use a word processor, be sure to save the document as Text Only.
1. Create an HTML document. a. Open SimpleText. b. Start a new document. Use the following markup rags:
<HTML> <HEAD > <T ITLE> GIF Ani matio n</TITLE> </ HEAD> <BOD Y>
c. Add an image tag. The image tag contains a SRC parameter, which contains the name of the image file.
<HTML> <HEAD> <T ITLE> GIF Animation</TITLE> <! HEAD> <BODY> <lt4G SRC- "al i en. gi f " > d. Add ending tags. <HTM L> <HEAD> <TITLE> GIF Animation</TITLE> <!HEAD> <BODY> <JI.1G SRC-" alien.gif"> <!BODY > <IHTML>
I 358. Chapter /0
IIIJJilGil fMI
-=~ Open ..,
. \,...(lot·
M.W.
PI!!JI ~el u., ...
Pr int ...
111:1"
rr lnl DneCapy
Dull
··
2a.
··· lltr .. Ga I·
lllellt W.ll l fOllf\lf a H
NfJWMIIIMe1U(jl' ·"-4 "tllll"l~trtWttll l ..
Gpan 10re11on... X L
( lOt i
'i1111·H· \IPIIO·I Ill· .
raoe \ e iUjtoN
....runt
··
XO
3b.
2. Save the file. a. Select Save As from the File pull-down menu.
b. [n the dialog box that follows, name the document and add an .HTM extension.
0 \lt,. lhhdonmenl a t :
l"' ttrn.,t(
2b.
c::t ll!l
~ ~ ~
3. Test the HTML file in Netscape. (Note: Make sure your GIF image and your HTML document are in the same directory.)
a. Open Netscape. b. Select Open File from the Fi le pull-down menu. c. In the dialog box that follows, select your HTML
document, and click on Open.
3c.
d. YourGIF animation will load and begin to play.
1359. GIF Animation And Shockwave
GIF Wizard at Raspberry Hill
Summary: Use GIF Wi::.ard at the Raspben y Hill Web site to reduce a GIF file size up to 90 perce/11.
GJF Wizard at hnp://www.raspberryhill.com/ g ifwizard.html is an online tool tJ1aL reduces the size of your G £F images either on a Web server or on your compute r hard drive. C urtis Eberhardt learned about the tool a nd gave me the URL just before this second edition went to press. He re's how it works.
1. Go to the Raspberry Hill Web site. a. Open Netscape or the Internet Explorer browser. b. Go to http://www. raspberryhill.com/gifwizard.html.
360. j Chapter I0
Smnlc }'Out GIF l1l0 11~ up 10 90" Yllh C lr- WIZard
r·<J:Isnontn..a~-..·~.~tl#UI L t( t... GD" Mit·un ~Mdttrtk utt..tlll f~G:7,UtU. )tf' 11U n·
? f:wM' .. ...,q,loiURl. ehGD'.
:~ '"lBI'l.liiLU£o(JE.w·dP'i' ,ar~lln·· ~~t.
I OC·lO-l tiD
I I CC·20oll1D
I
I oc ·2<MliD
a'II.L.lu'QlH'OeJ.u,ltaonc.r'lrbCtk'tUk1t
0 1P Wba.rd at.n»tti'!Jtl
tt.!Jn
~'OC. OlP Wlz:uC
( H~CUn(madLW\IllJI;Jtlf'O Upra, tllt i'I S~N )0'11 upF)
lb.
2. Identify your GIF image. a. Type the URL o f your GJF image if it resides on a We b
se r ve r.
2a.
f( Browse .. J:
2b.
b. A lternatively. you can click o n the Browse button to locate the file on your hard dri ve.
c. If the image is on your hard drive and you've c licked
on the Browse button, use the F ile List window in the dialog box that fo llows to locate your file, and c uck on Open.
I§ Jone·~ ar1Uiot t ·I
l~fJQOUUII l t16-P7~_mar lyn. IH (OIN tpnoto
I
2c:.
d. The file name wi ll appear in the fi eld to the le ft of the
Browse bullon, as show n.
2d.
e. Click on the Magic butto n
f . C lick OK in the warning dialog box that fo llows.
2o.
lln., ·uounouon you tubmll n
IIII U' f ~ l l! · · d 1 11\t(IIIJII Otl\f!'llll'd b y I t!'llt d , lll i !, U·hiiP In I UIRIII.
lfqouor t 1 u~rnU tmq ponwor d\, rre dllrattl numbrrl. or other
··r·····"'""".. ,.,. ..ht 1n.· t· kof'p
prluo'o, ll woutd " "' 1ot er t or you 10 conrrt tt~r l l bmtu lo· .
2f.
g. A statu s page will appear. notifying you tha t the fi le
reduc tion is in process.
COJNJ SII D.GIF
f(.,..tlfJ1 W ~~IGS-...U.IIIttldh .....'fk.thYa.et·
nu,.,.,.~......_,..,...,,..,c)OUt41'W111fflQt!Onlhr{ovvl
lt . . f . . ~t#I.OU\a~·'k·)'.f«N:tb4
a.ut r Uol ·ccr..m: -..u
k u tU..C.tU · 1-.:r·zr t·..-lf4lU . ...f h···UO 2bhl (lc)« t ol>h
fljO(n_o ~r...;. tro w·l·
~:~:!!"&!!~ :;~~:..4\
2g.
GIF Animation And Sl10clc.vave 1361.
h. When the image has bee n processed, it will appear on a Web page contai ning the original image and optimized ve rsions.
i. Scroll down the page, and click on the link that reads Optimized versions with mod(fied colors.
lOplumzed Pale l le/ S iza Ven1oDS
21.
Stup So liPJJ-..nn.w.*~.,,CUif~ <P.I91ll Slap Sb l1t11111Ui.nlll<>aa.ntlll<!Ut.t.«>IOII
j. A page wi ll be d isplayed, containing images made up of several different palette co mbinations. In this example, artist Jane Greenbaum 's Marilyn Monroe icon is displayed with palettes ranging from 96 colors to 2 colors.
2h.
2j.
362. j Chapter 10
l ock
Op1n 111h lin\ Add llookn,ark 1Dr1nr,unll: Nuu Ull ntlaru tullh l hb link hue l llhllnk cn . Copy thh l int t a uUuu
~ 1n111 maga
( o py lhiii"IIIJI CD IIY I hi\ Imag e l nca l h111 IOI!!I I IIh l fll ll o
3b.
!O Jan·'· u lwor t · I
C l1Mom8J .··
h llll l m Dg i OI :
~ iji !H§!Ui.U
3c,3d.
3. Save one or more GIF images. a . When you see an image you like, press and hold down the mouse button on the image.
b. Select Save This Image As in the pop-up menu that appears.
c. Select a folder on yo ur hard dtive in the dialog box that
follows.
d. Either accept the defau lt file name of the new GIF image or type a new name and click on Save.
4. Process a new image. a . To process another image, click on the link that says New GIF Wiza rd Request.
4a.
b . The GIF Wizard home page will be retum ed, and you can process another GIF image.
GIF Animation And Shockwave 1363.
Create an interactive animation with Macromedia Director
Summary: A self- running Macm111edia Director Player movie can be added to your Web pages fo r downloading to Maci11tosh or Windows 111achines.
-
Art
Web Design
Multimedia
I n this example, Curtis Eberhardt creates an animated, interacti ve resume in Macromedia Di rector. (Note: A more advanced version ofthe interactive movie is on the CD-ROM in th e back ofthis book.) By creating a small stage and limiting the color palette, Curtis was able to keep the movie to a reasonable size for Web down loading.
1. Plan your animation.
a. Type ofart Director is a powerful authoring program that has limited m1 tools. Expect to create the art for you r movie in progn-1 ms such as Photoshop or KPT Bryce, known for their advanced graphics. For this interactive self-promotion, Curtis created his background and I-lclios logo in KPT Bryce. He wanted an ethereal atmospheric effect, which he was able to create wi th shaders in KPT Bryce. Shaders arc used to config ure aunosphcric conditions, such as the amount of sun and the amount ofcloud cover. His goal was to create a Lady-in-the-Lake Arthurian legend-type feeling with a logo emerging out of clouds.
b. Animation. Director can be used to create 2D animations and to assemble 3D an imations created in other software programs. Curtis' movie begins with a 3D "camera ny-through" animation. which zooms in on the I-lelios logo. This animation effect has its oligins in cinematography and can be achieved in KPT Bryce by starting with a long shot and stepping the software to render each new scene.
364. I Chapter 10
Director requires that art elements be imported in the fo rm ofPICT images; therefore, each rendered frame would be a separate PICT image for the Di rector cast. To conserve on memory, Curti s kept the total number of frames to a minimum.
Cwti s' robot and cone animations were created in Strata Studio . He used the robot to add a ret:ro, high-tech look to the movie and chose gold, chrome, and sil ver colors to coordinate with the purvle shades in the background. The cone was rendered against a black background in Strata Swdio because he needed the solid color background to drop out in Director.
Artists who create 3D an imations in Strata Studio save their tiles as Q uickTime movies a nd then use Adobe Premiere to save the animation as single fra me PICT images required for importing into Macromedia Direc tor.
c. lnteractivity. The hype rtext scripting feature in Macromedia Director (called Lingo) is an optional tool for creating highly interactive presentations. When you're planning your presentation, decide how much interactivity or how much scripting you would like built in.
C urtis has an unusual combination o f skills-he's a painter and a Lingo programmer. He can use both skills to design and build an e ntire Director project. Artists who don ' t know Lingo should team up with a programmer who does because Lingo is the key to c reati ng interactive e le me nts. Working in tande m with a programmer, an arti st can work on a visual interface whi le a programme r deve lops Lingo scripts with minimal graphics. The in tetface and Lingo scripts can then be stitched together when both are complete.
Most of C urtis' la rger p roj ects require more Lingo programming than th e scripts he built fo r his selfpromotion. lnteracti vity in this c hapter's movie sample is limi ted to butto n scripts, wh ich di splay his portfolio ele ments o n sc reen.
Scripts can often make a movie more efficient and more interesting. As Curtis explains, "Lingo can be used to
GIF Animation AndShockwave 1365.
IDil!ll [dlt Window
Ne w
38:N
Ope n. ..
3110
Cl ose Wlndoau X W
Sou e
XS
Sou e o nd Cornpnct
Snu e ns...
llcarcrt
Im p o r t . ..
XJ
EHpor1 .··
Updot c M oulcs ..·
Creoto Projector...
Moule Info... M:U
Page Sntu11 ...
Print...
Oult
XO
3a.
IIIJIIiiillllll Cost
Stogo
le t
./CDD![OII' tJDCI 182
Score
18 4
Point
i115
Teut
8! 6
Tools
X7
Color Palettes 8!0
Dlgllol Ultlou X9
Scriot
180
MCSSh!JA
..M
Twenk
Morken
Du pllco ttl Wlnd u w
4a.
extend animation. For example, instead of building linear, pre-described motion using Director's Score, Lingo scripts can be used to create random motion."
2. Begin by collecting your art. a. Create a folder, and name it Cast Members. b. Move your an and sound fi les into the folder.
3. Define a movie stage size in pixels. a. Select Preferences from the Edit pull-down menu. b. In the Stage size section of the preferences dialog box, enter the width and height for your stage. Ctutis chose a 400 pixel by 200 pixel stage area. You can also position the stage size onscreen by entering a number in the Centered and Left boxes.
Pr e fer e n11U
Sl o g e S IZfl:
I ru~t om
Wldlll: ~ ~~·" llelght: ~ '"'-
\I CI!Jf! Lora llon: Q tontnrcll
® Le tt: E J,....u top: ~ ~tu
WhMO ilt Aing aMoul r: Q Ut e Mou lt 's n ze/ LocnUo n ® fllla ny' Ce nt or Q Oon' l ChDI'I!Ift Sl ze / lo tn ll on
0 ~w llch Monllor·· Color
Oeplh Ia ""tltlt h M aul e'·
[ oue \ el lln!·J'J O Now
® IJJium Quillin!)
::J BI!Ut Ot'ld Ulhl l t Unr IOifllfDI Il
0 Dlatoo· nppear a l Mou n I'D\I IIon
0 nnln101o tn nnclcg round 0 Ul ln!J t-1a u ege Window llel ompHm Str lph
3b.
4. Import the cast into the Cast window. a. Select Cast from the Window pull-down menu. This will open the Cast window.
b. Click on the Cast window to select it.
4b.
366. 1Chapter 10
liilll EdH Wln dmv
New
XN
Open...
30
acw Close UJindOUI
~ou e
XS
Sou e ond Compa ct
Snue As...
lh~lil'rt
[nport... Updule Moules. .. Creole Project or...
Maule Info... 3W Pref erence s...
Pogc Se tup...
Print...
Quit
IIIlO
4c.
l l nfi OI I
Pu! III!W
t
~
I I~ C~t\1 M emhen ...
W BJcru.OOl 'S Oj ort\.001 S BJorh.OO" . . Bj orti.OO ~ S D J o r h. 0 0 6
\i. DjOfk\.OIJl 0 jork\,000
lype:l"'!! 1' 1[ 1
~ M lnP · In l
j~ a ,;..~....
~ C;a PIC\ 11 Olr'ec t cr M ovie
n Oulft hrne M IIUli'l
C liO
c:IEI:J !'- ~
l ~ ~ ~
l l f! / p
4e.
c. Select Import fro m the File pull-down menu. Director
wi ll djsplay PICT files in a fi le list window.
d . You can e ither import each cast member one at a time, or click on the Import All button to import several cast members at once.
Import
r·rculcw
1ID_ml~eEg.co~s~tl"'"lmlblelrs~~~~l~fij
~ 1,
-+
I! Djur k:s.002
"; Ujur ks.OUl
"; Ujor ks.004
"; Djol'ks.OOS
r!"; Ujork$.006 Ojor ks.007
1111 Ujorks.OOO
e=» ti O [J cc t Desk: IOIJ
I J Import
( Import All ) ( Ca ncel )
D Unk To file
[8J Sho111 Prcui ew
ttetp
4d.
e . To select files other than PICT, select a file format fi·om
the Type pop-up menu. Each fil e format may be impOited separately into the Cast window as sing le cast members or in groups.
f . Curtis imported si ngle frames from 3D anim ations he created in Strata Studio Pro. Next, he imported sound files he created using a Korg X-5 music synthesizer. With the cast members imported, Curtis was ready to begin the process of authoring the movie in the Cast wi ndow.
4f.
GlF Animation And Shockwave 1367.
llilllJI £dll UJindnw
Ne w
lMN
Ope n...
atO
Close Window atUI
~~we
1G~
Soue Os... Re u e r l
Import...
ae,J
En port ...
Upd otc Mo~Ji es...
Creole Projec tor...
Moule Info... ICU Pr e f e r e n c e s ...
Pag e SoiUp...
Print.. .
Quit
a&Q
Sa.
5. Save and compact your Director file. a. Select Save And Compact from the Fi le pull-down menu. b. Name your Director file, and click on Save.
lo · I Dire ctor Mouio
~
' - - - - -- -=
~ 110
ljoot
I [ Do·k t op I (New D
Sb.
6. Plan the construction of the Score. The Director Score window is where a Director movie is assembled. ft consists of48 rows and hundreds of column s. To assemble a movie, cast members are dragged from the Cast window into various positions in the Score. (Note: See Step 7fo r instructions on how to move cast members i11to the Score window. ) Note the elements of the Score window, below:
6.
368. j Chapter 10
Review the ele ments of Curtis' movie to unde rstand how to construct your own. Hi s plan for the Score window included:
a. Background single fra me elements that comprise a fl y-
through animation produced in KPT Bryce. These cast members occupy cells I through 24 in channel I in the Score window. In the Score window, low numbered channels contain background images. Elements in higher-number channe ls " layer" up in front of elements in lower-number channe ls.
CUJt is placed the fra me he produced with the long shot in cell I and the other images that "stepped" in cell s 2 through 24. Because Director is based on a movie metaphor, a nimation occurs when the playback head moves from le ft to right, and frames are presented on stage in thi s time -based medium. (Note: The playbac k head is the black cell-shaped object to the right of the word Fra me in thefigure below.)
~I.J
lnteractiu e Resume Score
I Script
E!'!
_I
ITI
~ Fram·- I
I' I I
'i
II
1 1
[
rr
I 111 1,.1:
;.,
Tl 1
r l
41 4~
8e.
" ~
I~
l ink
~. J~
Copy 1-* ~
6d.
· ~ >:·
Off I 1._. 2~i>.l
6a.
fT.-,.ik
IE
!Moy~~l 1...
1 2
I~
I!
I~ ~
~'
· ·~ !Editable 1~ 3
II Cas t lll .:t.BI +Bi , I IJIJ F
~.'I
(
UF!i!;: .. :.:' :l!!
..
6b.
'- 6c.
-'ll':il~l .. . .. I!!!: i . ;: . !1¢ 1P-JI
b. Curti s chose c hannel 3 for the cone animation so it would be in front of the bac kground. He started the cone at cell 36, eight cells a fter the conclusion of the fl y-through animation. Simi lar to the fl y-through
Gl F Animation And Shockwave 1369.
ani mation, the cone a nimation consists ofsingle frame "stepped" images, created in Strata Studio and occupying cells 36 through 139.
c. Channel 5 ho lds the robot animation, which occupies
cells 28 through 139.
d. The music fi les that Curtis created with his music synthesizer occupy cells I through 139 in the Sound channel.
e. Director is a time- based medium. The Tempo c hannel
contain s instructio ns that Cwtis added to control the movie's timing. (Note: See Step 12for insrructions on how to adjust a movie's tempo.)
7. Move cast members to the Score window.
~
tnt cro<ll
a. Click on a cast member in the Cast window to select the
cast member.
b. Press and drag the cast member to a desired cell position in
7a.
the Score window (the mouse pointer will tum into a hand
whi le you drag). When the cast member is positioned over
the desired cell position, release the mouse button.
1"1
Fram·
,, IIi 11 '
1 5 10 IS
~ ~
I 0
0 I
~ I·!E
~ I}
~ I ·~ ,, ~~~~~s~~ ~~~ ~~·~;~~
~. 2~ )
~-"18
~. 1 ~ 2
· 0000000 11 1 11 1 11
-" S6
89 0123
~Z I
7c.
7b.
c. T he cell where you dropped the cast member will contain
an abbreviated number representing the cast membe r's number fro m the Cast window. (Note: Cast membe 1:1· that occupy a cell position are no longer referred to as cast members. Wh en you drag a cast m ember to the Score, it becomes a sprite.)
370. 1Chapter 10
d. To see more inf01mation about a particular sprite than what can be seen in a cell, click on a cell to select it. Director will display the contents in the upper- left corner of the Score window.
8. Use I.Setween Unear to duplicate a sprite.
To copy a sprite into a group or contiguous cells, use Director's In-Between command.
a. Click on the cell in the Score window tJ1at contains a sprite you would like to duplicate. This will select the cell and its contents.
7d.
Sa.
b. Drag to select the contiguous group of cells where you would like the sprite to be repeated.
ln , erottlue Resume Score
&b.
GlF Animation AndShockwave I 371.
~T e nt
Sp1 1t u In fo... Dele te Sprite s
-~
\t" l ~11r1te OIE.'n tJ·. .
~P I TPmpo...
\rl PdiPIIP...
\t.>1 hnn~ilion...
Set Sound...
-
Insert rreme
XI
Oe le le rrame
I ll
' '
tn ~ Oe hueon Sp ecia l ... 't ~11au· In l aml' ... PuSitl Hel CIIILie llt' Ut'rSf1 ~Pttuenc .. Swit ch Cast M emb ers II£
Au l o Anlmn1e
~
Sto re Window Optlon5...
Bel.
c. Select In-Between Linear from the Score pull-down
menu (Figure 8c I) to fill the group of contiguous cells wi th the sprite (Figure 8c2).
-' III!IIilllll!!lCo s I
Stage
XI
./(lil
..... score
""~'
X4
Paint
IC5
Tout
Kf·
Tools
IC ?
Color Pal ettes IIlii
nl gltol Uitl en X 9
Serio I
xu
McnugP
~ ...
Ttueok Ml\rkPn
Du plu o tr Wlnduu·
9a1.
Bc2.
9. Try playing your movie. Once you have moved cast members to the Score and used In-Between Linear to duplicate sprites into channels, play your movie. Move the Score window to one side of the screen so you can see Director's stage, where the movie is played. When you press Play, notice the playback head move from left to right.
a. Select Control Panel from the Window pu ll -down menu
(Figure 9a I ) and the Director's Control Panel (Figure 9a2) window will appear.
9a2.
b. Click on the Rewind button to rewind the movie.
9b.
c. Cli ck on the Play button to play your movie.
9c.
372. 1Chapter 10
10. Plan interactive areas in the Score. Whe n you played your movie, you probab ly noticed that the playback head moved su·aight across the Score from left to right and then kept on going. When you plan an interactive mov ie, you' llnecd to gel the playback head to loop in sections, o r move past a group of fram e s over and over, so the movie wi ll appear to stop for viewer interaction. To create thi s section, you will need:
a. A main interactive area. Sometimes refeJTed to as a menu area. this section can provide a viewer wi th c ho ices concerning whe re to branch in a movi e. The action is usually a mouse click on a bullon.
b. Interactive areas where viewe1·s branch. These are areas in the Score where the viewer can branch to see something new. In thi s sample. the viewer branches to areas of the Score containing attwork.
c. Frame markers to label areas in the Score. lnteractivity requ ires Lingo scripts. Frame markers help make scripting clear and easy to unde rstand. (Note: The frame markers are labeled Art, Web, and Multimedia in lhe.fi.gure below.)
10c.
! - - - - 10d.
10a.
10b.
Gl F Animation And Shockwave 1373.
11a.
11b.
I 374. Chapter 10
d. Navigation buttons. Buttons were not req uired when the movie opened; they don' t show up in the Score window until frame 140. Rows 6 through I I contain button sprites and the ir labe ls.
Buttons have Lingo "button scripts" attached that will cause Director to branch to a predesignated area in the Score. (Note: See Step 14 fo r instructions on how to create bu11on scripts.) rn the figure on the previous page, Curtis has added go loop commands in the Scripting channel in fra me positions 145, 155, 162, and 169. (Note: See Step 15 f o r instructions on how to create loops with Lingo 's go loop command.)
Curtis also added an image of a CD-RO M cover he desig ned as an item to branch to in the A rt category. Notice the sprite for the CD-ROM cover occupies frames 150 through 155 in row 13 (sec fig ure on previo us page). O ther art will be added to the Web and Mu ltimedia sections, which are adjacent to the Art section. Notice these sections can be identified by their fra me markers at the top of the Score window. (Sec figure on previous page.)
Art
.i'f?Cif
Web Design
-rrrl
Multimedia
11. Position buttons in the Score. Drag your button cast members (Figure I Ia) into highnumbered channels (Figure I I b) in the areas you've planned for viewer interaction. Curtis designed Art, Web Design, and Mu ltimed ia buttons to branch to parts of the Score containing his portfolio pieces, and moved them into rows 6 through I I. (Note: See the figure on the previous page and Step 7for instructions on how to move cast members to the Score window.)
12. Create frame markers. a. Drag markers from the marker well , and place the m above the first frame in each of your interactive areas. (Note: The ma rker well is the triangle above the mw numbers over the word Frame.)
b. After you have positione d a frame marker, let go of the mouse and e nte r a label.
:w~ lnt eroctiue Resume o Score ~f;!i~
Sortpt
Hl-.£!.r··~;rJ'!!!.;r·r~~~.~, ~~,~1: ~Y=1In_·t--~~7~·~I'~
-ll
130 135 1'1 0 145 <0-
~ ~~ ·~ ·
l
_l
~
Tip: The simplest way to make buuons interactive is to add a Lingo button script to bullon cast m embers and direct Lingo to branch to an alternate part of the Score. Although more elaborate schemes can be used, this method is the easiestf or beginners. (Note: See Step 14 for instructions on how to create Lingo bulton scripts.)
· Trails 12b.
-· 4
IIIIIIIIIII I III
13. Resave your movie. a. Select Save And Compact fro m the File pull-down menu.
IUIIlll [dlt Window
NCUJ
XN
Open...
ae o
CIO\C Windo w atll
\otol·
~s
ns ~OII C
llt·llt'll
Import...
JtJ
[uporl ...
Uplln t e MOUiu~
Crcutc Projct tUt ...
Maule Info... XU
Pre rerences ...
Pogo Se tuaJ..,
Print
_ Quit
-~
13a.
b. Notice Director does not display a Save dialog box the second time you save.
14. Add button scripts. a. Click to select a button cast member in the Cast window.
14a.
GIFAnimation And Shockwave 1375.
[dl I Cn1 t Member ldllllllt I Ull'f011lldl1fll Acco rd \ounll ... J·atlr tl"o PIO Conuert to Bitmap fran~ form Dltm~:~p ... AllfJn Oil maps
14b.
b. Select Cast Member Tn fo from the Cast pull-down menu.
c. Click on the Script button in the Bitmap Cast Member
Info dialog box.
Bi tm ap Cnt l M emb er In fo Cost Member: 51
I Polcltc: Sttstorn - Moe I I Purgo Prlorl1 y: l ·Normal
(OIOI'S! 0 hits Size: 1. 1 K
D,OK
Cancel
D
[ Scrip I.··
0 Rulo 111111c
flelp
14c.
d. Clicking on the Script button will open a Script window. Bullon scripts are so common that Lingo will provide you with on mouseUp and end. (No/e: end isjust end MouseU p abbrevialed as end. )
.::o r
Script
of
Cast
Member
51
~
=
+ II· I +I. i J[ 5~
on mouseUp go to - A~l "l
end
""'""fill"
~
r:rr
~ ~
14e.
e.l'ype
on mouseUp
go to ''Art"
end
(N01e: Use Director'sframe markers to label cell posilions. This makes scripting easie1; and Direc/ol·wi/1 remember I he cell position even ifmws are inserted into the Score. For every unique but/Oil script, you will need a unique cast membe1: Cast members may be duplicated in I he cast window and will have a unique cas/membe r numbe1:)
376. , Chapler 10
Tip: To learn Lingo, the hypertext scripting language that comes with Macromedia Direct01: Jolm "J. T " Thompson and Sam Goulieb ·s Macromedia Di rector Li ngo Workshop is an excellent book. John Thompson wrote Lingo, so the inforlnation is rightfrom the source. Jolm Thompson teaches at New York University. His book is published by Hayden Books.
Lingo is a hypertext computer language that comes with Director. The language is comprised of English-like sentences, called scripts, wh ich may be placed in a sprite, a cast member, a frame. or a movie. As a res ult, scripts arc described as sprite scripts, cast member scripts, frame scrip1s, or movie scripts.
An even/ handler is the mos t common Lingo script. It is used to tell Director what to do when an event occurs. Events are mo use and key actions, described below:
mouseDown mouse button is pressed
mouseUp mouse button is released
keyDown a key is pressed
keyUp a key is released
Event handlers, like all Lingo scri pts, must be written with a required structure known as syntax. For example, in the following go 10 command, it is c ustomary to put the name of the fra me marker in quotation marks:
on mouseUp go to "Art "
end
15. Create loops with Ungo's go loopcommand.
Notice in the fig ure below that each of the ce lls at the end of each interactive sectio n has an e le me nt in the scri pt channel. T hese cells contain the Lingo command go loop. When the p layback head reaches a go loop command as it travels from left to right, the pl ayback head will loop to the prev ious marker and keep loopi ng until Director receives some other command, such as directions in a button scripL.
:.:o
lnt erac tiu e Resume Score ~
Sor!!!t
I
I
D 1 . _['t]' Fr~m~ 0 13S
't'lntorJotln 't'Ar t
:I
r
't"'t'tb
' I r.
140 14S ISO ISS 160
't'Mu 1 6~
i ...... ;.,.IU I I I I I
I II
InI<
-. I ·'4
Copy t ['-1 2~)
Antl·Aii·s ~1'8
~ I± I
~:~~l), ~~ ~~..~~ ~
T4FfY !t ~Y~
~,'¥ 4444
I
~
1
a0 z0 a0
~
·~~~
~~
oo·oo ooo
a22222a
I.J 2 I IIIII IIIII
r · ~ ~
1
Ti i
n0·l'0!0T00l"0 "i0iT0 0r·Yl~rf"!0''0
Gl F Animation And Shockwave I 377.
15a.
16a.
378.j Chapter /0
a. Position your mouse in the Script channel on the last
cell in an interactive section.
b. Double-click your mouse to open a Script w indow. c. Type go loop.
=o -
Score Script 56
P-i
+I +I ·I iII :16~
on ex i lFraa'le
Q
go loci'!
end
-
~ ~
15c.
d. Click on the Close box in the Script window. e. Repeat thi s or copy and paste the coments of this cel l into
other cell s at the end of any other interactive sections.
16. Adjust the tempo of your movie.
When you play your movie for the fi rst time, you' ll notice that some sections play too rast. To adjust the Liming or the movie, timing elements ca n be added to the Tempo channel.
a. To set the tem po of his movie, Curtis opened the Tempo
dialog box in frame one. T his can be done by doubleclicking cell I in the Tempo channel.
b. To set the tempo, move the Tempo slider (Curtis used I 0
fps-frames per second), and click on OK.
set tempo @Tempo: ¢~
11 01~
16b.
c. You can also use Tempo commands to pause a movie
while a sound or video finishes playing.
llllill [dit Window
New
HN
Open...
lo:O
CIU\ C WindOIII MLU
'tn t· C
JeS
Snt·e and Com(ut ct
Snue n .....
lle t·erl
Import...
XJ
(tcpor1. ..
. . Updote Moule\...
'
""''ouie Into... ~u l· r e t e ren c e .. ...
l ' n g e SC IUJI ··.
11 tlnt...
Quit
XQ
17a.
~ Add »
17d.
~ Crea t e...
17e.
17. Resave and create a movie projector.
When you have completed your movie, save it as a self-run ning projector.
a. Sclecl C reate Projector from the File pull-down menu .
b. Director wi ll warn you that creating a projector will close the movie fi le you' re worki ng on. Cli ck on Save to save any changes.
Crea ting 11 projector will cl ose the mouie file you are cur rently working on .
Sa ue changes to th e mouie " lnteractiue Resume" b e fore procee ding?
I [ Don' t Saue
fiI Ca nce l
Saue JJ
17b.
c. In the dialog box that follows. locale your movie tile in the lile list window on the left.
rr cnle Pmjeclnr
Sour ce Mnt·lfH:
It;; Oc·klop · I
CJ lti!JOUI fOlder
CJtSIIIIml
CJ ruf \ \hore tl I o lder
~ OUI LkDr OUI lll
liti[J neuters ICI 1
M ot·lc Size: 1. 1 MU
c::::J II R
~ ~
""1oule PIDY Or der.
~
~
· ~
~
("11)llt' llrOJHn)
r·r ojec lo r Siz e:< ) OU k
M tv · l l n..)Ktllrr.u ,. t~, h J"'1" ·'1ot,. ~.,,· ·:te wc,...,,·· s ..·ll· li'f'4 1 ~1d ¥>'! «:TUoC I N
( Optiom.... )
~ ~
Q!O
17c.
d. Click on Add.
e. C lick on Create.
I Gl F Animario11 And Shoc/..·wm'e 379.
f. Select a location for your movie in the dialog box that
follows.
g. Cl ick on Save.
Ia ·I Curtis Eberhardt
~
= liD EJCCt
Desk top
New LJ )
ISoue projector os:
Proj ec tor.resum e
[ Cancel )
I n Soue J)
17f, 17g.
h. The projector that you create will be a self-running Director movie playable on any Macintosh co mputer.
Pr ojector .resume
i 380. Chapter/0
Creating a Director movie for use with the Shockwave Director Internet Player
Sum mary: Macromedia 's new 10olJnr playing Director movies on the Internet includes a 11ew Player technology that will be integrated illlo the n ext release of the Netscape browse1:
T he Director Interne t Player descri bed in th is secti on is o ne step o n the way to integrating Di rector's multimed ia autho ri ng with Netscape. As a he lper appli catio n, the new player technology provides sound. a nimat io n. and interactivity. W he n the D irecto r P layer is integrated into Netscape, movies can be played from the Web.
Director movies for the Web are created wi th Macromedia Director's software, bu t the size sho uld be li mited to 200 K. "Preprocessing" a movie with Macromedia'sAfterbumer software compresses a movie, and the Di rector Internet Player decompresses the tile conte nts. (Note: See Compressing a Director movie with Afterburner later in this chapte1:) In this sectio n. Curtis Eberhardt offers Li ps o n how to limit the size o f your Director mov ies.
~
1. Colorize one-bit cast members.
Limiting the bi t depth of cast members substa ntia lly redu ces
the tile size. One-bit cast me mbers, whic h are black and
white, can be colorized o n the Director stage to conserve on
file size.
~
a. Impo rt one-bit images (b lack a nd white) into the Cast
wi ndow. (Note: See C reate an interacti ve animation with Macromedia DirecLOr, ea rlier in this chapte1;.for
instructions 011 how to import the cast into the Cast
windo w.)
I
GIF Animation And Shockwave I 381.
b. Move the cast membe r to t11e stage. (Note: See Create an interacti ve animation with Macromedi a Director/or instructions 0 11 how to move cast membersf!Vm tire Cast window to tire Score.)
c. Click on an onstage cast membe r to select it. A bounding
box will signi fy that the cast me mber is selected.
d. Select Tools from the Window pull-down menu .
1c.
e. With the cast member (or sprite) selected, cljck on the
II!llii!r!I!DI Cost
stage
XI
""tooJcul eaocl lll2
Cast
lll 3
Score
lll1
foreground color in the Tools window to open the palette. Drag to select a color.
Pelnt
IC5
Tcut
X6
Co"lor l,olcttes xo
Digit al Uldeo X 9
Script
lCD
M cssngu
liiM
Tweak
- - - - Markers:
Uu ) hCdlrJ llllrulo w
1d.
1e.
f. When you release the mouse button, the cast member will take on the co lor you selected.
1f.
382. 1 Chapter 10
2a.
ll!llll Mode lmnqc
Unllo All
1CZ
Cut Copy f'as t c l'u t e Int o flas te Beh ind
Clear
rut. .. Stroke ..·
Crop
IIIICHI
xu
_I
t reBte f·u bll shcr ...
l'~o~hh~hl'f Op11um .··
,,
--
l ftke Sn tl1l Sho t
rompO\IIP Contrnls...
2b.
2o.
[J
Unllllcd· 3 (R GU, I : II :::'JiiJ
~
'>
""' 1.;>1
1!1
2f.
2. Use tiles to fill a background or other shape.
Tiles can be used to c reate a wallpaper effect on the Director stage. Because they are based on one small cast member, tiling is a way to conserve on fil e size. Use the Fi liiPattem command in Photoshop to experiment with the tile patre rn.
a. Star t by selecting an area of a Photoshop document you would like to see tiled. In Photoshop, this is referred to as a pattern.
b. Select Define Pattern from the E dit menu.
c. To test the pattern, open a new document by selecting
New from the File pull-down me nu.
d. Enter 200 pLxels in the Width box and 200 pi xels in the Height box.
Snue
3ts
Sauo fh ..·
Rtl·£'fl
fl cnulre hcport
P3ge Se tup ·..
Prin t ...
XI'
r r c ren:mces ~
New 1 l meqe Slz.e: 1 IOK - - - - - --,
·I UUd l h: ~ I piHeh
lltllyht:~~
Re,olu llon: ~ I PIHels/inOI ·I "1ode: I RttO Calm ..,.j
Con IenlS Q Whlto (!: Und:grountJ Color
2d.
'
2e.
e. With the new test docume nt open, select A ll from the
Select pull-down menu.
f. You' ll notice the document is selected when you see a trail of marching ants around the perimeter.
g. Select Fill from d1e Edit pull-down
menu.
D a Mode l rn og o
Undo All
liZ
Cut
lUI
Cop y
IIIC
Pn st e
X II
Pa'i l e Into
tJo stc Oehlnd
C IC f t f
Stroke ...
(lOll
Crea te Publi sher... Publl~hN OttUon~ ..
De lin e Po ltern rake Sn apshot
(Orn po\H I' (Oil i !OI \ ·..
2g.
C /F Animation And Shockwave j 383.
Fdl
Mo do: I Nmnu'll ·I
h. Select Pattern from the pop-up menu in the Fill dialog box.
i. Your document wi ll be fi Ued with the pattern you're testing.
2h.
"'
Unlllle d· 3 (AGU, l :ll
Iii
i]11.-:; !::"::: ~;( ::"
.. 111
1:;.'
r=: >AT .!.r: ~:l'
~"'~ ·.·~
fj,~
~
~ ~ ~~~ ~~~ ![
~J:
~·'":
~i'' io.'i<
?r. ~~;;
l:<t JI
~~
~ ..· ·,'!":~;~
~~ '11/i
·.1
~"'
~J
"""
·-
21.
ll!!llii!D Co <l
Sloge
Il l
"'t goiUU CiUlCI X 2
Cas t
!Ill
Store
11·1
ltlt:le Paint Tonh
llllJe Rul er s Zoom In loom Ou t
·..II ·
JeK1
!t6
.I fools
IC7
Color Pnle tt e s l!O
Olgilnl Uldeo 119
Scrlpl
lllO
-
Meuoge
! (M
lmenk
- Mo rlc e r'' -
IIUillrtdtC ttiiUd(ltll
2k.
Pntt crn s... Oru sh Shop cs... nlr urushes ... Gr adients ... Poin t Window OptlonJ...
21.
This tile i s:
0 Built - in
®Cast Member: 85
¢:'.:::>
1
2m.
j. lf you'rc satisfied with the tile and would li ke it to be availab le in Director, import the tile into Director's Cast window. (Note: See Create an interactive animation with Macromedia Director.for instructions on hoiV to import the cast into the Cast window. )
k. Open Director's Paint window by selecting Paint from the Window pull-down menu.
I. With the Paint window open, select Ti les from the Paint
menu.
I m. Click on the Cast Member radio button, and click on d1e
right and left arrows to locate the cast member you wish
I
to ti le.
n. Use the Width and Height pop-up menus to pick a size
I
for the tiIc.
I
~ Wid t h :
p tx fls
Heigh t:~ ptxt ls
I 1 2n.
I
I
I
384. JChapter 10
o. A small dotted rectangle will re flect the size of your tile in
the Tile window. Drag the small dotted outline to the area you would like to use as your tile. p. C li ck on OK.
2o.
u=:tJLJI
I Cancel )
Select nru 10 £~11:
Wid th; ~ r···h lle1gtll: ~ 1)!1(·''
this tile h : Q nu lll - ln @ Co!. l MelllhCI : 8 5
¢'¢
ll elp )
2p.
q. Your tile will become a pattem on the pattern selector chip a t the base of the Tools window.
2q.
r. To create a tiled background, select the shaded hal f of
rectang le tool from the Tools window.
s. Then usc the tool's crosshai r to drag a rectangle large
enough to cover the stage.
2r.
2s.
Gl FAnimation And Shockwave 1385.
t. With the rectangle selected, select the pattem selec tor
chi p, and drag-select the new pattem.
u. When you le t go of the mouse, the new patte m wi ll !ill
the rectangle.
:· :· rv- r. J.--.. v-:t- JT ~ rT
~v-: -~v-:
I<·~:>.: ~ ~.: ~.: ~: ~ ~.: ~.: ~. ~- ~ ~~~
2t.
~ >· 1·· ~-. ~ .. ~.· ~. ~. ~-. ~-. ~ . ~ . ~-
~. ~ rm:mn
.'·- ti ·. ~ . ~. ~.. ~-. b.. ~-. ~-. ~.
~. ~-
. ~BH!J:
.. , ,~.J.) ~. J. 11...... ~. ~. ~--~- ~. ~- · . ._; ·
i·. ·. ·.. ~
~-. f.. ~-.· ~ . '·..~.. ~- ~-. ~-. ~ ,, . .
fr.. ~-. ~ .. ~ . ~ .. ~,. ~ . ~ . ~ . ~ . ~ . ~ . ~- b ~ .,
1\.·. ~.. ~.. ~-. ~-. ~. ~-. ~.. ~.. ~.. ~. ~ ~- ~.
,,. ~- ~- ~ fi. W. · ~ ~ ~ . '· ~ ~ ~ 1, ~-
!.:.·.:. ~.: ~.:. ~.:. ~.:. ~: ~.: ~.: ~: ~.: ~: ~. ~. ~ ~
fL -._ '·· J. _ ~.. W.. l_ ~-. ~ _ ~ _ ~ _ ~-. ~-. ~-. ~ . ~ .
2u.
~
3a.
3. Check on cast member size.
The Bitmap Cast Membe r Info dialog box will provide valuab le information about cast member sizes as you are bu ild-
I ing your movie. a. C lick on a cast me mber in the Cast window.
b. Select Cast Member In fo fro m the Cast pull -down menu.
c. Notice the size is indicated in the d ialog box that opens.
Oltmnp Cut Member I nfo
Cns1 Mcrnhor. 2-1
I I r·nletle: Stjt tem - MDC I I ruqJc Priotlt!J: 3- P...ormnr
OK Cancel Stri(Jt ...
Colort: 0 0' tu
3b.
Sl2o: ·1.7 K
O llulo unuo
llelp
3c.
386. , Chapter 10
Tip: For information and ins1ructiom on how to uploadfiles to your lntem et provider 's servet; see the Image Map chaptu
4a.
4. Try remapping a color cast member.
Director's Transform B itmap com mand allows you to alter the bit depth o f a colo r cast mem ber and, as a result, reduce the file size. This command cannot be undone, so a h.vays test the remap on a copy of the cast me mber.
a. Click on a color cast member in the Cast window to
select it.
b. Select Copy Cast Members fro m the Edit pull-down menu.
c. Click on an empty cast member positio n in the Cast window.
lmli.Window Cas t
IIn do
- -·l
Cui Cost '1embcn Ill.II
' ' '
llos l o ·rc ut
xu
(ICOI [a~ I M emb l!n
-Se lect All
xn
Ploy
lei'
4c.
SlOJJ
IC.
nowtnd
xn
St ep Dn cktvor d
- - Step ron uunl
-
Disable SoundJ
- -x-
Loop
lll
··' \P IN l l'd ll "llte\ Onllj
OlsntJ ic lingo
lock: rreme Durn lions
4b.
d. Select Paste B iunap from U1e Edit pull-down menu.
lmii. Wln dotu Cost
I
Un<IO
_ _.·.?J
Cu t C.u t ""1embt·l \ (OPII ( tH I Me m her.s
I
fire r Cn5 1 "'fe mbt~s Seletl 011
II (
I
1101
Pln!J
3el'
SIOtJ
IC.
flewlnd
IC R
Slep UatkWG(d
Step rorwortl
Ohnblu Sound \
:tc-
l OUJl
Ml
\rh· t l f~d I rllllll"\ OIIIIJ ·
Dbollle lingo
lock frame Our allons
4d.
GIF Animmion And S!Jochvave I 387.
1m11 Store Ten t
Cas t Mt;mber Info... Open Sulp l
,.I!I
[1111 Coi l Mern bcr
- - - - l.f!lllfllll ( Htl'tii OII dii OJ
Record \ ound...
' .. PaiiC01 Pltl
COil lllll'l I n OltiH Oil Align Bll maps
-- --
Cau l tn nme
Duplic ate Cast MCIIl tJCI I!U
rind Ctu I Member1... II: \uri r ch t 'tcmhrt ·
Cas t IJJinttuUJ Options...
4e.
4g.
e. With the cast member copy still selected, select Transfonn Bitmap from the Cast pull-down menu to display Lhe Transform Bitmap dialog box.
f. Select a smaller bit depth fTorn the Color Depth pop-u p menu. Click on OK to re map the cast member to a smaller bit depth.
Tronsror m OltmOJl
Cost Memb er : Cos t M em ber 00
Siz e: - -- - -- - ,
® Stole: \IliUM\ %
0 Widt h: ~plx·ls
r;;-;
llelght: ~
I 011 2 Oils
Co lors:
I
o Bits
Color Dept h: _, 16 Oils
rolett e:
32 Oils ~
@ Dithe1
0 nem op t o Cl osest Colors
D
[! OK I
Co n ee l
Hel p
4f.
g. Double-clic k on the cast member to examine the color in Director's Paint window.
h. Sometimes the color is acceptable at a smaller bit depth; other times, it is not.
4h.
I 388. Cl!apterl O
Sa.
Night City
17 7 :Niqht Ci Sb.
ncu n1 :,ouno Pns.l £1 "' 1· rr r
Conuer l to Dltm lW ff'"Of1SfOflll IJIImop,,. n11gr1 Dltmnp s Cus:t 10 T1111~ Ouplitftl c Ces: t Mcmu e r · u Find Cu t Memb er ,,.. M; ~or-1 ( uu '1embl'r \ ...
Sc.
Tip: To conserve onfile size, try to use sow1d sampled at 11 kH'l rather than 22 kHz.
5. Use small sound snips and loop one or two. a. Curtis used several small 2 K to 4 K sound snips
throughout his movie (Fig ure Sa).
b. To loop a sound, start by selecting a sound in the Cast
window.
c . Select Cast Member In fo from the Cast pull-down menu
to display the Cast lnfo dialog box.
d. Click to put an " X" in the box labe led Loop. This wi ll extend a sound without adding to the file size.
Sound Cos t M ember Info Cos t Member: 177
t8J loope d
I Purge Priority: J 3 - Normal
Size: 19.1 K
Sd.
(r OK l)
( Concel J
PIO!J
ll e lp
G IF Animation And Shockwave 1389.
Compressing a Director movie with Afterburner
Summary: Preprocess Cl Director movie with Macromedia 's Afterbumer before placing it 011a Web serve1: This compression step makes the movie small and compact, so that it moves quickly over the Web.
Macromedia's Afterburner adds a compression step to building
movies for the Web. Afterburner is an
easy-to-usc drag-and-drop applica-
Afterburner
tion that wi II create a file with a. OC R
extension. The compressed movie will be decompressed by
the Director Internet Player as it is received over the Web.
1. Drag and drop your Director movie. a. Locate your Afterburner softwa re.
b. Drag and drop the Director movie o n to p of the Afterburner icon.
c. Release the mouse button.
This step automatically
launches the Afterbu rner
1b.
appli cation. When the software is
launched, you' ll see an Output dialog box.
d. Use the defau lt file name or type in some other name. but keep the .OCR ex tension.
~ BumlnQ II D:...:Sideshow ~·
Stop
1e.
CJ Ameri ca Online u2.5 Fo l der ~
CJ Applicat ions
"""
LJ DrooStuff
LJfotch
'
D ronts
~
c::::> IID £ject
Desktop
New Ll)
[ Cancel )
n l] ~aue
1c,1d.
e. You ' ll see a progress box as the movie is processed. f. The compressed file is the file you wi ll place on a
Web serve r.
Sideshow .dcr· u.
390. 1Chapter 10
c
The "Father of VRML" Mark Pesce initiated the developme/11 ofVRML (Virwal Reality Modeling Language), the language that describes 3D space on the lnlernet. Lookfora clwpter.fivm his book published IJy New Riders, VRML Browsing and BuildingCyberspace, at hup:/lwww.mcp. c om /g eJI· eral/news7/chap2. html.
Artist featured in this chapter: Alex Shamsou has a B.S. in industrial Design from the Philadelphia Uuiversily ofArl. alex@ vrmil/.com /lltp://IVIV\\I.l'l'llli/1. COlli
VRML World Building
VRML or, Vi t1ual Reality Modeling Language, is the lang uage that describes 3D space on the Internet. Designers who are interested in c reating VRML discover there are three ways to create these new 3D files. Traditional 3D modeling manufacturers have added VR.ML fi le writing features to 3D software programs, and several new, low-cost worldbuild ing too ls have emerged. Hand coding VRML in a text processor is also an option.
[n this chapter, industrial designer Alex Shamson shares tips on how to create a dinosaur head in Virtus WalkThrough Pro. a 3D visua lizati on tool popular with architects and Hollywood film directors. Virtus Corporation, founded by David Smith , was the first 30 software manufacturer to add a VRML fi le-writing feature to their software. Also included in this chapter are tips on how to navigate yourVRM L file in
the Vinus Voyager VRML browser, how to open your
VRML fi le in a word processor and adjust the VRML code, and how to use the <EMBED> tag to add a VRML window to a Web page.
VRML on the Internet
Summary : Highly creative and far-sighted 3D world builders have taken Mark Pesce 's vision and created imag inative new VRML worlds 011 the Intem et.
A bove: A Virtual Reality Shopping Mall is the cente1p iece of Alex's VRML portf o lio. A bove Right: Alex Shamson 's home page contains 1111111erous linksf or world builders imerested in VRML.
Above: A "scooter''jiv m Alex 's traditional 3D portfolio.
A lex Shamso n (alex@ vnn ill.com). who teaches 30 desig n at New York's Pratt Manhattan. is a painter and an industria l designer. Industrial Desig n is the specia lty tha t teache s the des ign of everyday objects and 3 0 s pace.
Although his industrial design background has g iven Alex a broad background in 30 des ign, Alex has aggre ssively pursued 30 world building on the Inte rne t. Li ke a hand ful of design professionals nationw ide, A lex feels the Internet ho lds e normous opportunities for 30 world builde rs.
Although Alex has used VirlUs Wa lkThrough Pro and has built most of his mode ls on the Macintosh, rece nt deve lo pments in VRML have required him to make c hanges. For example, he recently bought a W indows NT machine because of Apple Compu te r's fa ilu re to e mbrace VRML as a fil e standard. Although aspec ts of Apple 's alLernative 3DMF format have bee n added to VRM L 2.0, the ir less-than-enthusiastic support ofV RML has made it impossib le to de velop VRML worlds on a Macintosh because there are so few to o ls.
Even though there are many more VRML tools available on the Windows platform , Alex has a lso started to add VRML to his models by hand in a word processor.
I VRML World Building 393.
A bove: Alllo showmom display f rom Alex's traditional 3D portfolio. A bo1'e Right: Alex 's "Metato111n ''from his traditional 3D portfolio.
At this time, no 3D applications support the multimedia features avail able in VRML 2.0. As Alex explains, "3D artists who want to adjust lighting, or add camera perspectives or any other new feature will need to learn how to hand code VRML. Until 3D software programs can write the new features into a YRML lile, I recom mend that artists use resources on the Web to learn about hand coding." Alex has generously prepared a very large number of links on his Web site (http://\vww. vrmill.com). These links are helpful fo r his clients and students who are new to VRML.
1. Assistance to surfers. Besides providing li nks to the latest versions of Netscape Navigator witJ1 Live3D and the Internet Explorer browser, Alex has created a concise overview of VRML and has answered such questions as:
· WhatisYRML?
· What can you do with VRML? · What do you need to see VRML Iiles?
· What is YRML 2.0? · What are multiuser virtual worlds?
· What's an avatar?
394. / Chapter I1
2. Resources.
In thi s section. Alex has organized a set of links £0 such famo us sites as VAG (YRML Architectura l Group) and The VRM L Repository. This section also contains numerous valuable lin ks Lhat Alex used to learn YRML, includ ing links to:
· YRMLArchitecw ral G roup · T he VRML Repository · NYYRMLS IG · ARTNETWEB · VRML tutorials · Authoring software · VRML browsers · Co mpression utilities · Books on VRML and 3D design
3. Alex's design and training and services.
Alex is a self-employed creative director/design consultant
speciali zing in multimedia and Web developme nt. As a pio-
neer in the area ofc reating 30 virtual worlds on the Internet
and as a founding member of New York' s NYYRMLSIG,
3.
Alex bu ilt his Web s ite to promote his 30 des ig n business
and to share the know ledge he has acquired in 30 modeling
and virtua l world construction.
VRML World Building 1395.
Visit Starbase C3 toseeaVRML adventure, shop for VRML spaceships, and participate in 3D chat
Above: The Starbase C3 Flig ht Operations Center contains live VRML animations. In this VRML adventure, the USSC3 Talon leaves the.flight dock, travels into em asteroidfield, orbits a planet, and travels to anotherflight dock. Above Right: Larry Rosenthal's Starbase C3 site.
http://www.cttbe3.collt!starbase.htm
L arry Rosenthal, industrial designer and founder of New Yo rk's NYVRMLSIG , has created Sta rbase C3 (http://www.cube3.com/starbase.htm), one of the most innovative new VRML sites on the Internet.
Larry has packaged his starship models as construc tion kits for interested VRML mode l builders who wish to assemble the ir own models. He's also built ani mated VRML adventures with the help o f "Chief Engineer" Frederic Gontie r and "F li ghtdock Engineer" Marc Thorner. For Web-i nitia ted spaceship adve nture fa ns, these animations re present a form of electronic e ntertainment that will soon be very popula r among the compute r gaming gene ration.
For hi s mos t devoted fo ll owing, LaiTy has created a Starbase C3 Membership. For $29.95 per year, me mbers receive monthly "extras," includ ing a model that is not avail able on the Starbase C3 site, a custom "Conbot" avatar, extra mode l parts not offe red on the site, about a ha lf dozen high-resolution re nde rings of spaceships. a nd a monthly HTML newsle tter cont aining VRML building Lips. Larry will a lso launch the BlackS un CyberHub 3D cha t e ngine, whe re he'll o ffe r members private VRML c hat that will be closed to the public.
In lat e 1996, Larry worked wi th New York develo pers Matt and Dan 0 ' Donne ll on his Starbase C3 3 D chat site. Malt and Dan a rc identica l twin brothers who arc well known fo r
I 396. Chapter 11
Above: The USSC3 Talon entering the flight dock.
their Web development ski ll s. N icknamed by their New York YRML and programmer colleagues as the "Cicada tv1i ns," Man and Dan own Cicada Web Development and often get a room 111mbling with energetic talk about new technology during Internet meetings in New York. When asked to de monstrate their latest project at the NYYRMLSIG meeting in January, the Cicada team unveiJed their 3D chat engine written in Java. Worki ng with Larry Rosenthal, who built the starbase model in YRML, the 0' Donnell brothers developed their Java-based chat engine. which works in a Java-enabled Netscape Navigator window without any extra pl ug- ins or client soft ware.
1. The CyberCash system.
LaJTy is a Cybe~ash merchant, which means customers who have a "CyberCash Cybe~oin Wallet" can purchase a YRML model o nline and instantly dow nload it to their computer's hard drive. CyberCoin walle ts are programs that may be obtained free at the Cybe~ash s ite (http://www.cybercash. com). Once a Wallet program is downloaded, cash can be transferred from a cons umer's credit card or checking account.
CyberCoin services are distributed through banks that offer o nline me rchants the CyberCoin service and offer consume rs co-branded wallets. Consumers and merchants each obtain free wall et software, and the merchants pay the bank a per-transaction fee to use CyberCoin. The bank pays CyberCash a transacti o n fee for provid ing the technology and process ing service. Merchants find new revenue channels with CyberCoin because they can now offer services and goods at low and inc re mental costs t.hat were prev iously prohibiti ve because the pric ing models of credit cards were ine ffective w ith low-cost items.
CyberCoin uses the most advanced securi ty features for consumers, banks, and merchants. When consumers bi nd, or connect, their checking accou nts to their wallets, Cybe~ash confirms three th ings: that the people are who they say they are, that the account s are vali d and are acti ve accounts with
VRML World Building 1397.
Above: Close-up ofa "Conbot" or Construction Robot.
2a, 2b.
money in them, and that each person is connected legally to a specilic account. After the account is confirmed, CyberCash protects the consumer through the use of 768-bit RSA encryption with the password-protected wallet. CyberCash is also working with VeriSign to incorporate Digita l IDs for instantaneous validation of individuals' and me rchants' identities. rn add ition, funds in the CyberCoin system are FDIC insured. T his guarantees that, if the CyberCoin issuing bank goes out of business, the consumer's money is insured by the federal governme nt.
CyberCash c urrently offers purchases made only with U.S. dollars and at online merchants who have a U.S. bank account. Eventu all y, CyberCoin will be able to be used outside the United States with any foreign or international bank that is a CyberCoin issuing banlc When a consumer buys a good or serv ice on the Internet tisted in fore ign currency, the system will translate the currency on-the-fl y with the exchange rate guaranteed by a bank, and the debit will occur in the consumer's domestic c urrency. Consumers will also be able to hold a number of different currencies in thei r wallet, similar to the way funds are held in the physical world.
2. Steps to order a construction kit online. a. Visit the CyberCash site at http://www.cybercash.com and download a free CyberCoin wallet. (Note: The Windows 95/NT platform is required at this time.)
b. Add either credit card or checking account funds to your CyberCoi n wallet.
c. Click on the New VRML Ships on the Starbase C3 home
page to link to the O nline Datak.i t D irectory and Sales page.
2 c.
398. 1Chapter 11
2d. 3a.
d. On the Datakit Directory and Sales page that follows, scroll the page to fi nd a model.
e. C lick on a gold coin under the il lustTation of d1e space-
ship you 'd like to purchase.
· CUCI( UN COIN 10 BU¥ THE CJ Mll!KlT ~WW
2e.
f. The CyberCoi n vvaiiet launches a transaction, and a datakit in a compressed ZIP format is downloaded to your computer.
3. Steps to view the VRML adventures. a. Click on the Fighter F light VRML on ilie St.arbase C3
home page to lin k to the F li ght Operations Cente r. b. On the Flight Operations Center Web page that fol lows,
cli ck on a VRML live feed.
c . If you have Netscape Navigator with Live3D, you' ll see a VR1vfL 3D animation.
3b.
MEMBERSHIP INFORMATION
4a.
3c.
4. Steps to become a Starbase C3 member. a. Click on Membership Information on Larry's Star base
C3 home page.
VRML World Building 1399.
4b.
.;~-...:.:.:.:.·..:....:...:._r,.._._:':..:..·.... r
ln:c:tAI.. Nlf.IIUt HI' OJP!Jt. OHI! YIIA!t ,OR S2t.t Q lts"':l...o..t'(.et: AY::-"'III.Ji(f" 1 1~ CJ·:;,.o ... voo ~3i!"ACIU ...:A'~'OOI'!;'~Q
,~..S..".,'..i..!.f..f.i..r.~~},~_E·:~"u '"~'"!g":·;"·;'":.·~.;~;r;;r-~_::,-~---·-·,1
~'(fi<JII~'IO'IU.OC-.....o.l!Jo...... · ..::-.... _. U. o , , · ..,.._ ·
DAn:
- .. ,....._ ,,
- - - - -- ---··--------
l-fo.~
===..:·-"7::.:::. .
·-··-·-··--- · , ...... ...c IH,.D I f O J'TlOHAI..l · · ··- -- - · -
· - · · - ·- -·-w· -o·
·_-__-_-_-_·_--_-_____ - _ ··,:..--=..~-=--.-.-__:··=·,-,·.,-:-..·..·.=--:,:·..=.,--.._:.·..-_=-==,-~~-,:..~-:-::-..- ......... ......
'.aF-""'
4c.
b. On the Starbase Command Center Web page that follows, click on the Official Membership Form lin k.
c. A Me mbership Form wi ll appear on the Web page that
fo ll ows.
d. Press and hold down your mouse button, and select Save This Image As from the pop-up menu.
Bo ck Jnrwn rtl Open I hit l mol)e Copy this lmogc Copu I hi s I moue Locn tlon l oad thr<o lrnt.uw
4d.
e. In the dialog box that follows, save the fonn to your hard disk by clicking on Save.
Saue I ma ge ns:
li#ilillid¢@1W
4e.
Concel )
Soue IJ
f. Alternatively, you can click o n the Print button at the top of your Netscape Navigator w indow to print the fonn.
g. If you have saved the form to your hard disk, ope n it in a
4f.
paint software program, and print it on your printer.
5. Steps to visit the 3D chat area. a. On the Flight Operations Center Web page, clic k on the
Ente r 3DVRML Flightdock C hat link.
ENTER 3DVRML PLIGHTDOCIC CHAT Sa.
400. I Chapter 11
Sb.
Sc.
Sd.
·1 l'f·N.:L..
& D J.v"'~'rrPL -
Se.
~ setECTLIV!::3D VeR~!Oit TOlRAJ~!!FOiiT
Sf.
b. On the Web page that follows, scroll to the Avatar Selection area.
c. Select one o f the available avatars by clicking o n an
avatar image. (Note: The field labeled Avatar URL will jill in automatically when you select an avauu:)
d. Enter a Conbot name in the fie ld labeled Conbot Na111e, and click on Submit.
e. E nter an optional avatar URL in the field labeled Avatar
URL. (Note: Thisfield is designedfor people who want
to add their own VRML avatars. Ifyou've selected a
Conbot, thefield will already befilled in.) Click o n Submit.
f. To e nter the 3D chat area, click o n the Li ve 3D version link.
g. The Starbase C3 chat window will appear and float over
your Web page. A VRML window wi11appear on the top half of the floating vvindow, and a text-based chat area will appear in the bottom half. To pruticipate, type a co mment in the text window at the bottom of the n oating screen, and press Return.
sg.
VRML World Building 1401.
Live comedy in a
VRMLworld-
at Mom's Truck
Stop
Above: Argle, host ofMetaPiay's Simprov. Above Right: The Meta Play Web site at http://www.metaplay.com.
Above: Waitress at Mom's Truck Stop. Tip: The MetaPlay team has posted cartoons and logs ofthe live ep isodes ar their Web site. The Web site is enhanced with MID/ tunes and QuickTime movies.
Simprov. That's what the MetaPlay comedy team calls the multiuser improvisationa l comedy performance that Interne t users experience a t Mom 's Truck Stop. The setting is a' 50s diner, and the co medy team is Matt Dominia nni (nose@echonyc.com), Paul Marino (havoc@interport.ne t), Frank Dell ario, Matt Duhan, and Matt Hapke. Paul Marino is the 3D arti st who created the VRML diner in 3D Studio Max.
Although you can access the VRML diner via Netscape Navigator with Live3D (http://www.metaplay.com), the MetaPlay comedy performances are performed live in a MOO. MOOs are social MUDs (mu ltiuser do mains), or places on the Internet where people interact a nd create the ir own worlds. MUDs have been traditiona lly text-based, but Chaco's Pueblo client so ftware turn s a text-based MOO into a multimedia experi ence.
Pueblo users who visit Mom's Truck Stop experi ence a spli t screen, with the 3D diner o n one side and 3D chat or the performance on the othe r. There's also music and 2D im ages of the people who interact in the diner. At scheduled interva ls, which are announced on the MetaPiay Web site (hllp://www. rnetaplay.com), visitors can atTive at Mom 's and take part in a li ve performance.
402. 1Chapter 11
"Don't be fooled by my cute smile, I'm actually planning to take over the world."
-Argle, host of MetaPiay's Simprov
Above: Mom 's Truck Stop through the Pueblo browser window. Above Right: Mom's Tmck Stop th rough Netscape's Live3D window.
1. Getting to Mom's Truck Stop. a. Download and install the Puebl o client from the Chaco Web site at http://www.chaco.com. (Note: The Windows 95/NT platfonn is required. Alternatively, Mom 's Truck Stop may be experienced with a Telnet eliem on a Ma cintosh compute1; but this will be a text-only experience.) b. H you have the Pueblo client software installed o n your
hard d1ivc, click on the Mom's Truck Stop link on the M etaPlay Web site at http://www. metaplay.com. Thi s will launch Pueblo i f it's available on your computer and take you direclly to Mom's.
c. A lternati ve ly, you can launch the Pueblo client software
and select Quick Connect from the Worlds pull-down menu.
d. In Ll1e dialog box that follows. click in the field labeled Host, and type:
simprov. chaco.com Tn the fi eld labeled Port, type:
4444
Click on Connect
e. The Mom's Truck Stop screen wi II appear. f. Drag on the w indow pane that separates the VRlviL w in-
dow fTOm the chat screen, and make the VRML wi ndow occupy one-third of your screen.
VRML World Building I 403.
Above: As you navigate a VRML browser window and come into Mom's Truck Stop, you discover the diner is located on the swface of a bowl ofsoup. Above Right: The Pueblo window is an adjustable split screen Users can drag the window pane to make the VRML window occupy one-third of the screen during show time.
Above: Emote buttons at the top ofthe Pueblo window p1vvide a quick way to make your character smile, bow, wave, nod, wink, laugh, clap, or.frown.
2. Participating in the improv.
Plan to an·ive at Mom's Truck Stop 30 minutes before show time to explore the 30 diner through the VRML window in Pueblo's split screen or through the Netscape Navigator Live3D window at http://www.metaplay.com.
a. To partic ipate as a character during a perfonnance, c lick in the Message box at the bottom of the screen, and type:
Connect Guest
T his wi ll generate a Guest character.
b. C lick on an e mote button at the top of the Pueblo screen to see what your face looks li ke.
c. To speak, type:
"your comment here
and press Return. d. At show time, you' ll hear music if your computer is
equipped with speakers, and t11e comedy team will fi ll the tex t halfof the chat window, inviting you to partk ipate via Lhe Message box. For example, the Me ta Play cast wi ll ask t11e audie nce for a suggestion to get Lhe show started.
Argle, the show's host, may say, " Be fore we start today's show, would someone please suggest an importa nt piece
404. , Chapter 1 I
Above: During a MetaPlay improv show, 2D images ofguests and the characters at Mom's get added to the text chat.
of informati on the Cook finds out today ... .'' Visitors are guests in the diner during the s how and may jump in with a line or two at any ti me. For example, a guest might throw out, "The fryer is broken!" Another character might add, "Uh, oh... soggy fri es." and the plot begins!
3. Why Pueblo?
Me taPiay chose a MOO for their performances because Moos are programmable. Although they have investigated other 30 chat environme nts, they've fo und that the programmable characteris tics help during performances. For example, the pe rformers can clear everyone's screen simultaneously and plant text, such as "Meanwhile ..."
4. VRML design issues.
When you visit Mom's Truck Stop and experie nce the YRML 30 diner, you reali ze a traditional diner is built on the surface of a bowl of soup. The e nvironment is much more enticing to explore than a classic room with four walls. YRML allows a 30 designer to let go of reality and bui ld surprises into the surroundings-and you wi ll find surprises navigating through Mom's.
Live30's viewpoints provide a means to display camera shots that viewers can access with a right mouse bu tton and a pop-up menu. A Control key and a right arrow take a viewer through the viewpoints in a slideshow fas hion. Muc h like a filmmaker, 30 artist Paul Marino took advantage of Live3 0's viewpoints and has set up several cinematic viewpoints that users can access through the Netscape Navigator Live30 window.
In VRML, camera shots are called PerspectiveCamera position views. Althoug h 30 applications that write VRML fi les c reate an opening PerspectivcCamera view, several PerspectiveCamera views may be added to a YRML file. (Note: See Ope n a YRML fil e in a word processor and alte r the Perspect.i veCamera in this chapte1:)
VRML World Build ing 1405.
The NYVRMLSIG's Coney Island Project
Summary: S!Gs, or Special Interest Gmups, have helped compwer users accelerate learning for almost two decades.
Tech tip from NYVRMLSIG member, Marc Thorner:
"A project /ike the Coney Island VRML site is historically significant since it represents a radical depart11re fm m the restraillfs imposed by 19th centu'Y ideas, and it pmvides a meansfor 3D designers to share technical information. As Mark Pesce has said, 'information shared is il~{or mation sq11ared.'"
Yo11 can reach Marc at: mthorner@pipeline.com.
0 nee a month , the New York VRML Special Inte rest Group (NYVRMLSIG) meets in the back room at Alt.Coffee to di sc uss the development ofVRML and virtual worlds on the Web. T he gro up was formed in February 1996 and attracts industrial designers, archi tects, and 3D graphics professionals who want to adapt their know ledge to fit the Web. There is no fee to attend the meetings and anyone can attend.
Larry Rosenthal and Alex Shamson, both industrial designers, are the most technica lly advanced members. Lan·y Rosenthal, who founded the SIG, is the unofficial chairman and the most aggressive user of 3D software. Shortly after Lan·y founded the NYVRMLSlG , he suggested a STG group project. And in March, the me mbers responded by creating Marc Thorner's suggestion of re-creating New York's Coney Island Amusemen t Park.
1. Coney Island at the turn of the century.
At the LUrn of the century, Coney L'iland, on the southwestern end of Long Island, was the largest amuseme nt park in the United States. Amuseme nt parks lured hundreds of thousands of visitors (some reports say milli ons) to Coney Island by ferry, rai lroad, e lectric trolley, subway, hackney carri age, automobile, and bicycle.
406. 1Chapter I I
.I
. ·
.·
. ·
.··
.
·J'
Above: Luna Park Towe r at the entrance to Luna Park.
Much like a smal l city, the original Coney Island was arranged around a main promenade called the Bowery that was lined with carnival attractions. Canopied booths introduced elephants, camels, and "orienta l beauties" to resorl visi tors.
· In J897, George Tilyou opened Steeplechase Park, one of the three enclosed amusement parks to open at Coney Island. Occupying 15 acres, Steeplechase park was lined by a gravity-powered steeplechase ride.
· In 1902, Frederic T hompson and Skip Dundy, both employed by George Tilyou. planned what was to become the grandest enclosed park at Coney IslandLuna Park, which later opened in May 1903.
Frederic T hompson was a former architectura l student who indulged in ornaments, flags, towers, and turrets. At night, Luna park was illumjnated w ith a quarter mi Ilion electric lights. When it opened, Luna Park offered visitors a Venetian city with gondoliers, a Japanese garden , an Irish vi ll age, an Eskimo vill age, a Dutch windmill , and a Chi nese theater. A rocket trip to the moon was the most popular attraction.
· In 1903, Coney Island's third enclosed park rivaled Luna Park with jts massive proportions. Dream land was planned and built by a group of politic ians organized by Will iam H. Reynolds, a former New York state Senator. The designers of D ream land installed one mi llion elcc-
VRML World Building I 407.
Above: A statue called The C reation at the entrance to Dreamland.
lric lights a nd an e normous nude sculpture called The Creation at its gates-both meant to overshadow Luna Park.
2. The Coney Island VRML Project. Anyone can participate in the Coney Island project. Virtus Wa lkThrough Pro is the recomme nded software prog ram because it is an inexpensive, easy-to-use 3D application that can write a YRML tile wi th textures a nd links.
The project requires that participants build two models. The first model can be any ride, canopied s ide show, or building at Coney fsland. The second model is a personal trai ler that wi ll be placed along Coney Island's Bowery, once the Amuse ment Park's mai n street. The trailer exteriors will be uniform because the NYVRMLSIG provides a template download on the NYVRML Web site at http://www.cube3.com/downloads/NYVRMLSIG. Inside, each trai ler wi ll have the model bu ilder's own world or unique space with furniture, textures, or any objec ts of his/her choice. Here are a few recommended steps to get acquainted with the Coney Lsland project:
a. Visit Larry Rosenthal's extruded 3D map of Coney
Island that contains existing models at http://www .cube3.com. This will give you an idea of what models have already been created.
b. Download one or more models from Larry's si te and take them apart in Yi rtus WalkThrough Pro to see how they are constructed.
c. Look for photos and project tips on the NYVRMLSIG
pages m Larry's Web site at http://www.cube3.com/ dow nl oads/NYYRMLSTB.
d. Step through the construction of the Luna Park Tower in this section to learn about build ing, scaling, and adding tex ture maps.
e. Download the traile r template from http://www.cube3
.com/dow nloads/N YYRMLS IG to build your own room m Coney Island.
408. 1Chapter 11
35 feet
J
n
l 15 feet
n
l 15 feet
n 35 feet J
3.
3. Planning a model. a. Make a rough sketch of your model on paper to plan
components and their dimensi ons.
b. I n this example. the Luna Park Tower is approx imately
I 00 feet high. T his i s I 00 inches in Yirtu s Wal kThrough Pro.
4. Open an image or texture in Photoshop. a. Open Photoshop. T hen, select Open from the Fi le pull-
down menu .
b. Select a graphic in the dialog box that follows, and
click on Open.
\t~·· l l ..
" '
\,01'fo0 ifii,I\J.
"''""' ''
h H lnlu .,
......, ,.,....
Q n.......- . ...,
4b.
4a.
c. Your image wi ll open in a Photoshop window.
4c.
VRML World Building 409.
I
·Sa.
Sb.
Wld lb, ltll-1~ I j lllliiiJe \lu: 170K - - - - --,
lE!::J .....h t :
~
a.,olulian: ~l I)IMehl l·tii· IJ
I Mode: t.U I/HI\IP ·I
5. Copy/paste a texture to a new document. a. Select the Rectangle Marquee tool. b. Drag-select an area of a photo you would like to usc as
a texture.
c. Select Copy from the Edit pu l l-down m en u.
d. Select New from the File pull -down menu
'~- ·~l!
,,,l'ncJoHIIIfUt'·
Xl
~......h"U"·"I '' · Ur.1 rill .. . ~I Oicll ~ ·
... , "''
Sc.
1" 1 MIMJII
Our. ~ . " ~0
O~r n lt .~
rt.c· -·
f tau
11CII
SUfi
1tS
\1t11Pih ·.
IU!IMI
Poglf\"I IIP-·
'""'··
ltf"
Cutl
··
Sd.
e. T he dialog box that fol lows wi 11 display the dimensions of your selection. C lick on OK.
f. An Untitled new document will be displayed.
Se.
410. j Chapter II
Sf.
g. Select Paste from the Edit pul l-down menu.
IIDI._Mode 1111.
(.I!I' I U')h
Jll
..... , hllf'
'
ra\t·lt I
'"· ·~-\1111111
l l'.
,.. ,, ( rtaltoPubolhl.' ,, ,, ~.
fl.·1'1r Pill~ HI T·lr ~"IPliiOI
sg.
5h.
Above: Luna Park 's venetian city.
h. Your se lection will fill the Untitled new document.
6. Resize the texture. a. Select Image Size from the Image pull -down menu. b. Although I foot = I inch in Virtus Wa lkThrough Pro,
you shou ld be very conservati ve when you resize your texture. La rge tex ture Ii les wi ll make your model difficult to downl oad.
In this exa mpl e, although the base of the Luna Park Tower will be 35 feet high, enter 15 or 20 in the field labeled Height. Photoshop will resize the w idth proportiona lly, and Virtus will resize the texture to fit your model. Enter72 in the field labeled Resolution, and click on OK. c. The texture w ill be resized in a Photoshop window.
~ "11p ''"" t
AdJuU
t
CIIIUI&II
t
flip
llo t·t· l llu h
lmG 1\IU
- - - - - ~ tun::;,:~~~-~:~:,-,.-,
CE:J
Mrl tjh l: 2.17Jinchtt\ Ruotwuo,.· jOD pillf'hl u·n.
I Cuut J
lu:p.
6a. 6b.
~~~~~ MI-:N
ctprn..
~0
ope"'"···
l'l d t O , . ,
"''"'"
l ·fJO·'
P··· \ellfl .
""'"'"
:~~: r
Oun
xa
7a.
&c .
7. Save your texture. a. Select Save As from the File pu ll-down menu.
VRML World Building 1411.
\evl' l hh lfD(UIIIP.nle·: !te Mtu e _l
I f u mtl: rltlflle
~ ~~
·I
7b.
' .I '
A bove: Dreamland, the third enclosed park to open at Coney Island, was never as popular as Luna Park. Many f eel the architecture was less successful. Frederick Thompson, the creator of Luna Park, thought the "park's architecfl/re should be a departure from all that is traditional."
b. In the dialog box that follows, name the texture te.xture_1, and click on Save.
8. Add the texture to WalkThrough Pro. a. Open the WalkThrough Pro software.
b. Select Textures Window from the Windows pull-down menu .
c. ATextures paleue wiII be displayed.
"' '~' &IUfldOI·
Jll
OI PIIIWUldGUJ
)'I
CotrdlltiiU Wln<UW
l ntllltl:ll·lt l l tw · · Ull lllld!I DP IUf!IU 11t1 ... unlllled :h ltUieu' )U
Sb.
C ~ ]
Sc.
d. Select Add Textu res from the pop-up menu on the Textures palette.
e. In the dialog box that follows, select texture_ I, and click on Add.
f. The texture will be added to the Textures palelle.
Sd.
Sf. Se.
9. Building a model (the Luna Park Tower). Work in a Left or Right View to make drawing easier.
a. Select New View!Left from the View pull-down menu.
9a.
412. J Chapter 11
b. Drag the Observer out of the way be fore you beg in
I
your drawin g.
c. Select the Rectang le Tool.
I d. Drag a rectangle to form the bottom portion o f the Luna
Park Tower.
I
9b.
ll ~ ~ I 11 I
9c.
I I
II;,
..,-.-~- ..,.
I 9d.
lOb.
n I
10c.
I 10. Applying textures.
a. In th is example, you· ll add the Luna Park Tower tex-
Lure to the four sides of the tower base.
b. Select the Tumble Editor Tool.
c. Click on Luna Park Tower base in the Design View
window.
d. A Tumble Ed itor window will open.
e. When the Tumble Editor window opens, the Grabber
Hand Tool will be selected.
I
10e.
[J
10d.
VRML World Building 1413.
~·
10f.
10k.
414. , Chapter 11
f. Refer to the Orientation Cube at the base o f the Tools
w indow and rotate the rectangle to djsplay the four surfaces w here textures are to be appl ied.
g. Select the Pointer A rrow Tool.
h. Click on a sur face to select it. i. Select Textures Window from the W indows pull -down
m enu .
j. Double-click on the texture labeled texture_/ to apply
the texture to any of the surfaces.
10g.
_ , _ , ....,. .... h........ . ..... --a
' II
Q
I
I lJ
10h.
.I I Oi h IUIIdOIU
·
Drp lh WIIdoiU
211 1
C·otcllaaiMI:tln' ow
llniiiii'II IUnlkiJU!UJ M l Un llll rd. l a p Ulrau Ill "llnlllltG.hlll7Uw · )
101.
r 1 t ~:~..........
10j.
k. Repeat Steps f through j to apply the texture to four sides of the tower base. (Note: You will need to re-se/ect the Grabber Hand Tool to IVtate the rower base.)
I. Click on the Close Box in the Tumble Editor window.
r~s·lll-·
·
New Uiew
·
\Il l H~ mfliO 1'1111o r \eiNome t · Uheure.r
Home £dn" Uotne:ObU Uifl
c ..nler "". " '1!1
Reut ou ta
11a.
101.
11. View your room in the Walk View. As you complete your model, navigate around each component in the Walk View to inspect the textu re you applied.
a. Level the Observer by selecting Level Observer from the View pull-dow n menu.
b. The line of sight on the Observer will be aligned at a 3:00 position.
c. Select New ViewiWalk View from the View pull-down
menu .
d. Navigate around your model.
11b.
11c.
11d.
VRML World Building J 415.
...... 1 -·ii iU~o ltl l,....
'-"--
~I ~, I
jl · mr
lil
l!--
12b.
12. Complete your model.
Use the drawi ng techniques described in this section to complete d1e Luna Park Tower.
a. Plan each section of your model, and copy a texture
map fro m a photogr aph to make your model look realistic.
b. Build each section separately. c. As you're creating each section, access the Top View
by selecting New ViewiTop from the View pull-down menu.
d. With the Top View selected, you can determine if the sections of your model are lined up.
h . ..... ll lcl110f1 ~~~:·
.,.,........ ..... h ll-
l tlh..""'f l..cl
, 1·11
:·:-:':":··.·:.... [-lfl ..llll ,
lt-'l l·· · Uleol. lllltot..
.., (
12c.
l
12d.
e. Check the Walk View as you comple te eac h section to
view the appearance o f your model.
12e.
416. 1Chapter II
, . ,. . l l l
I,.,
OpPn...
KO
Cl01e
K UJ
~ lll'ft At.n eiUUI I O h llfld
,r,o.s,,e._'·tup._ "'
l ll'l jtOit lre re IIIIJU l HIIfl
\n····ot
..... t ..... .". l lbrtry ...
Ol.I U
11'0
13a.
14a.
13. Save your model. a. Select Save from the File pull-down me nu.
b. In the dial og box that follows, name th is model Luna. virtus, and click on Save.
f l.. lg~ :
C; r11
o..
13b.
I U I UI " ' "
·-··IU· ~· ···u··t · htt
o- .. ""
14. Exporting the model as a VRML file. a. Select ExportiYRML from the File pull-down menu.
b . In the dialog box that follows, click on the box labeled Include Tex ture Li11ks. T he n, c lick on OK.
c . In the di alog box that follows, name the fi le Luna. 1vr/, and cJjc k o n Save. (Note: VRML.ftles must end in a .WRLJile extensio11.)
[ upor t Op tions IJUML... l eu l ure ril e (H ICIIslon: ~
tB] In[l udo Teu t uro link s
J H f Cancel )
OK
14b.
I~J 01 entnldnd/liO\~UJ)
liiJ llff'UIOI!Jnl.l/101111 ~ho t
~ hoh·l
lihhuno ~j tund Petk."< nnnl~ f'ortl tldll
Sau e UIIMl as:
l tuno.oml
I
14c.
( Cjc<l ) ( Dcok lop ) ( ~ew CJ )
Con eel Soue
VRML World Building 1417.
Alex Shamson's tips on creating aVRMLmodel in Virtus WalkThrough Pro
Summary: Use Virills Wa/kTiuvugh Pro to create a 3D model, and then save it as a WRLji/efor viewing on the Web.
'!IalkThrough Pro 1a.
A lex Shamson's dinosaur ("Dino") is created with 2D polygons in the Virtus WalkThrough Pro Design View, wh ich then get edited and colored as 3D objects in the software's Tu mbler Editor.
1. Open Virtus WalkThrough Pro. a. Open Virt us WalkThrough Pro.
b. An Umitled:Top View window and an Untitled:Walk
View w indow will open. (No te: Alex Shamson recom-
mends saving the model immediately. See Steps Ba and
8bfor details on how to save your model in Virtus
WalkTluv ugh Pro.)
... . ... ,.u,
iiJI
[!I I l
,., u··, .....,~ ~ , .,
+
1 I
-·
1b.
418. 1Chapter I I
MDHU! llfllo r Mmne l!bll!llll'l llilflltt Oh·lllll'l
R······ign
2a.
2. Change the Design View.
Design View is where you wi II draw a 2D image o f the dinosau r's head.
a. Select Change ViewiLeft from the View pull-dow n
me nu.
b. The Untitled:Top View window will change to an U ntitled Design:Left View window.
~
3a.
...,u.......... ......
~·
~ ~ -- -
J!
I
3b.
+
1· 1
2b.
3. Begin a 2D drawing of the dino head. a. Select the Irregul ar Object Tool. (Note: The lrreglllar Object Tool is used to draw irregular-shaped polygons by clicking on each vertex.) b. Move le rt to right wi th three successive clicks to begin
the irregul ar-shaped polygon, as shown in Figure 3b. Fo ll ow the grid marking in Figure 3 b, and try to make your drawi ng approximate ly the same size.
c. Continue to create veni ces by c licki ng to form the poly-
gon show n in Fig ure 3b. Fini sh by c lic king on your starting point to close the polygon. The polygon should look ro ughly like a dinosaur sku ll facing left.
t,/~."'-- , 1I ·_;
3c.
VRML World Building 1419.
......
I -~- >-
I
·l1
.
3d.
d. The closed po lygon will display a black handle at each vertex. You may drag on any of these handles to a lter the polygon's shape.
4. Change views, and alter the inflation. a. In Virtus WalkThrough Pro, an art ist draws in 2D, and
the object is instantly rendered as a 3D object in the Walk View wi ndow.
b. Your ability to see a 3D object in the Walk View window is dependent on t11e position of the Observer. Details on how to control the Observer will be presented later. The Observer may be dragged out of the way if it's in the way while you're working with your 20 polygon.
--~~-r-
4b.
4a.
c. When you draw a 20 shape, you c reate two dimensions, and the missing "third dimension" is referred to as the inflation distance.
The in nation distance is represented as a gray bar in each of the rulers along the Design View Window.
The default value for the inflation di stance is e ight feel. This distance may be adjusted prior to drawing. Follow the next steps to c heck the front view of your object to see the mode l's proportions.
4c.
I 420. Chapter 11
d. Select C hange ViewiFront from the View pull-down menu.
e. The Untitled:Left View wi ll change to an Untitled:Front
View.
f. You may need to adjust the width of the dinosaur's head in the Front View by dragging on a hand le as shown. J dragged a polygon hand le in the Front View to make the model slightly wider.
_p,_ ==I . -~ -
4d.
I
i
4e.
4f.
5. Open the object in the Tumbler Editor. a. Select the Tumbler Editor Tool.
b. Double-click on the polygon in your Front View wi ndow.
Sa.
ar----·-
1
Sb.
VRML World Building 1421.
c. A Tumbler Editor window will open. This view will
allow you to rotate an object in 3D and edit a surface.
d. W hen the Tumbler Editor window opens, lhe Grabber Hand Tool wi ll be selected.
e. Use the Grabber Hand Tool, and try rotating the object
in the Tumble r Editor window. Notice that, as you
rotate the object, lhe orientation c ube at the base of the
Tools wi ndow will reflect the object's position in lhe
Sc.
Tumbler Editor window (T=Top, B=Bottom, F=Front,
B=Back, L=Left, and R=Right).
Sd.
Ga.
6 b.
6c.
Tip: The Rotation Constraint Tools will help you comrol rotation when you edit objects in the Tumbler Editor window.
Se.
6. Try the Rotation Constraint Tools.
Rotnti on Constraint Tools affect how the object in the Tumbler Editor window can be rotated. Clicking o n a tool wi ll cause the too l to become activated.
You may turn on more than one tool at one time. You will know a partic ular tool is "on" because it wi ll appear shaded. At least one tool must be se lected at any time. The tools may be turned "ofr' with a second click, causing lhe shad ing to turn light.
a. X -Y Motion Tool. This tool allows rotation in an X-Y plane.
b. X-Z Motion Tool. This too l allows rotation in an X-Z plane.
c. Y-Z Motion Tool. T his tool allows rotation in a Y-Z plane.
422. 1Chapter I1
UaUUell 1:1·..-.111· rdllor
Top - -
7a.
Bottom
7b.
Tip: Alex Shamson recommends that you always slice in a clockwise direction. By doing this, you always lose the left side ofthe slice.
7. Reshape the head with the Slice Tool.
Alex used the Slice tool in the Tumble r Editor window to taper the from of the dinosaur's nose. You' II need to work on the mode l looking down at the d inosaur's head from a Top Yiew.ln thi s position, the nose wi ll be pointing to the bottom o f your screen.
a. Rotate your model in the Tumbler Editor window so
thaL it is ori ented with the lop and bottom sides, as shown in Figure 7a. Refer to the orientati on cube at the base of the Tools palette for help.
b. Select the Slice Tool.
c. Using the Slice Tool, drag a slice down the rig ht side of
the model, as shown in Figure 7c.
d. When you release your mouse button, a triangula r segment will have been "sl iced" off, leavi ng a set of handles where you placed the slice. These handl es a llow you to ed it the slice if necessary. To edit a slice, drag on one of the handles. (Note: To edit a slice by its handles, you need the Selection Tool.)
u-
Unllllllld l:Iu..lll· Ultlf
·
ur:
lJAlllled l:lutnO\e l dllor
a
I
IIEJ:
I
7c.
7d.
e . Using the Slice Tool, drag a slice up the left side o f the
model, as shown in Figure 7e.
:J
U·IIUed .l~ l ···lll· l dllor
,..
I
II
I'E!
I I.
1 7e.
VRML World Building : 423.
"
10111110 l.IUm1111 UIIOf
I
\)
-,
/I --
1-'
7f.
f. When you release your mouse button, a triangular segment will have been sliced off, leaving a set of handles where you placed the slice.
g. Taper the nose even further by dragging a slice down the
right side of the front snout area, as shown in Figure 7g.
h. Again, a set of handles will remain when you release your mouse button.
-..
hiiUd l:lumble [diiH
"
I n lllld l :I··W· lditor
pI - ju--
·11
7g.
7h.
i. Drag a similar slice down the left side of the front snout area, as shown in Figure 7i.
j. Again, a set of handles will remain when you release your mouse button.
"
l n111114l:IUJnllll[lllt11
71.
7).
I 424. Chapter I1
k. Your slices have been recorde d in the Tool palette. If you wish to see where the slices have been placed or if you wish to further edit o ne of the slices, you may select a slice by name in the Too l palette window. The respective set of handles wi ll then appear in the Tumble Editor wi ndow.
I. To tape r the end of the dinosaur's snout even further, positio n your model in the Tumbler Editor window, as shown in Figure 71. Use the Orientation Cube as a g uide.
7k.
71.
m. With the front of the dinosaur's snout facing away from
you, drag another slice off the right fro nt of his snout, as shown in Figure 7m.
n. Drag a si milar slice off the left front of his snout.
Unllll· d J:l umble tdil or
·
;I
'Q
UftiiUe d l :l untbl· l cJIIOt
e L~
I
7m.
7n.
VRML World Building 1425.
I
~
I
7o.
9a.
o. When you've completed your slices, rotate your
dinosaur's head to see how the slices have tapered the snout Notice the slices will be listed in the Tool paleue.
p. Put the Tumbler Editor away by clicking on the close box in the upper-left corner.
7p.
8. Save your model. U' you have not yet saved your model, save it as a Virtu s WalkThrough Pro file. Later, you will be saving it as a WRL file to be viewed o n the Web.
a. Select Save from the File pull-dow n menu. b. In the dia log box that follows. type a fil e name, and
clic k on Save.
~e1U
w,.
Gpl"n .,
31; 0
Ckn·
ii: UI
\·ve lh . J tl II· \ · ·II
rotJebiiJIJ ,,.
, , lt\1 ,.·
·I'
I IUPtti iiUI'II!Jl!l h pcu t ...llp\ftl l "'ideMov._ llblll1
8a.
11 ~ 1 '11'1:
@ 1'111 0 1'11
8b.
lfMI Yin: i& lh e lfHI I.If IUl lr: ~ Q Mete ·ell untelnf'd
9. Create the lower jaw from a duplicate. Return to the Left View to create the lowerjaw, creme a duplicate, and then open the Tumbler Editor to remove the top portion of the head. A remaini ng lower section will form the lower jaw.
a. Select Change ViewiLeft from the View pull-down
menu.
426. Chapter 1 I
I ]:.J:J:. Ute w Dc"qn
Undo
W
' · 'If!
II; Wll
1 Uu ·
k~
Mo<lll,,.-;;;,,,,
~ f'U·t t All
:IJ'I
UH\ I'Ita i AI I
l htl e ~ e l e( t ed
1U
\ h i i . I I II U
I 0 1tc St' l f!~ Ifill
<(
Uni Dr iCfUI
t tt- le tll'mn... X ;
9c.
b. A Le ft View window will be dis played.
c. Se lect Duplicate from the Edit pull-down me nu.
d. A duplicate o f your mode l will appear.
e . Drag the dupli cate polygon away from the original, as
shown in Fig ure 9e.
9b.
~> -~__'y
Ji
9d.
9e.
f . Se lect the T umb ler Ed itor Too l.
g. Do uble-click o n the dupli cate polygo n in your Left
9f.
Vi ew window.
h. A Tumbl er Editor window will o pen.
:;i AleN \ lllnot om :LIIfl IIII W ;.II
, I
9g.
9h.
i. When the Tumbler Edito r window ope ns, the G rabber Hand Tool will be selected.
91.
VRML World Building 1427.
j. Use the Grabber Hand Tool to orie nt your model, as
shown in Figure 9j . Use the orientation cube at the base
9k.
of the Tools pale tte as a reference.
k. Select the Slice Tool.
I. Using lhe Slice Tool, drag the head from le ft to rig ht, as shown in Figure 91.
m. When you re lease the mouse button, the uppe r portion of
the head will have been sliced o ff, leaving a set o f han-
d les where you placed the slice.
9J.
n. You may want to rotate the new lower jaw in the
Tu mble r Editor window using the Grabber Hand Tool.
o. Put the Tumble r Editor window away by clicking on the
c lose box in the upper-left corner.
Q 111M'' cliftOIIIIr.hftllllfl l dUOr
91. 10o.
r
9o.
9m.
9n.
10. Create a neck.
Create a neck by drawing a new polygon in the Left View window.
a. Select the Irreg ular Object Tool.
428. 1Chapter II
b. Draw a four-sided polygon to form a neck , as shown in Figure LOb.
c. Drag the comple ted neck polygon to line up with the
head, as shown in Figure I Oc. You may need to drag on
one of the neck polygon handles so that it lines up prop-
erly with the dinosaur head.
..
·
10b.
10c.
11. Rotate the jaw.
Alex's dinosaur has a lower j aw that is open, showing a mouth full of teeth and a tongue. In order for the jaw to appear open, the lowerj aw must be rotated.
a. Select the Rotate Tool.
b. C lick inside the lower jaw polygon, and drag your
11a.
mouse away from the polygon to the right as shown. As
you move your mouse with the mouse button he ld
down, you' ll notice that the lower jaw segment can be
rotated. When you are happy with the angle of rotation
or, when the angle of rotatio n approximates what is
shown in Figure I I b, let go of the mo use button.
c. Drag the lower jaw .into position, as shown in
Figure li e.
c
Ub.
11c.
VRML World Building 1429.
12a. 12d.
430. I Chapter 11
12. Color the dinosaur polygons.
The surfaces of your polygons may be colored in the Tumble Editor or the Surface Ed itor. Alex chose a bright green shade for the dinosaur head and a pink shade for the inside of the mo uth .
Start by coloring the dinosaur's neck. Howeve r, be fore you go into the Tumble Editor, check the Front View to see if the head and neck a re approximately the same width.
a. Select Change ViewiFront from the View pu ll-down
menu. b. The Front View w indow wil l be displayed.
c. Adj ust the neck polygon width so that it matches the
width of the dinosaur head in this view.
IIIPif S Q'I nO n ur:ftOh iUi i! l ll ~
12b, 12c.
d. Select Change ViewiLeft fTom the View pull-down menu .
e. The Left View wi ndow will be displayed. f. Select the Tumbler Editor Tool shown in Figure 12fl .
(Note: Alternatively, you may select the Swface Editor Tool shown in Figure 12j2 andfo llow similar directions to color an object in the Swface Editor.)
II
9=:J I
12f1.
12f2.
12e.
o. Open the remaining polygons you've created a nd the lowerjaw in the Tumbler Editor. Follow Steps g through l to apply green to all but the underside surface of the dinosaur's head and the upper surface of the dinosaur's lower j aw. Apply pink to these two surfaces.
p. C lose the Tumbler Editor window by clicking on the close box in the upper-left corner.
12p.
13. Create horns.
Alex gave the dinosaur a c rown of horns, which he colored red.
a. Select lJTegular Object Tool.
b. Select the Jntlate Pointed M odifier Tool. This tool will in11ate an object with sides that converge to a point.
c. Draw a three-sided polygon to form a horn polygon, as
shown in Figure 13c. d. Before duplicating the horn, check on the horn's
proportions in the Front View window. Select Change ViewiFront from the View pull-down menu.
13a.
13b. 13c.
13d.
432. I Chapter 11
13e, 1 3f.
II
e. The Front View window will be displayed.
f. Adjust the horn polygon so that irs width is almost as wide as the dinosaur's head.
g. Drag the hom into position on the right side of the head,
as shown in Figure l 3g.
~ III·K'Jdlnouaur.fnntUiew
~·
IL:J =-
ll.lllllliJiew 1e11gn I
IIndo
·l
Cui
·n
topq
xr
'
'
·"·"
Modii!J S.letttll ._
~e le ct llll
Mn
un,otetl flll
Nlc!l'hlelled ICH
~I'IOUI fill
lcnli:St'IIHIU w.J
llnloclc 1111
Pn l ·nnln ... JC;
13h.
1 3g.
h. With the horn still selected, select Duplicate from the Edit pull-down menu.
i. A duplicate horn will appear. j. Select the Rotate Tool.
·
13j.
§F=
I
131.
VRML World Building 1433.
14a.
434. \Chapter 11
k. C lick inside the horn polygon, and drag your mouse away from the polygon to the ri ghL. As you move your mouse wi th the mouse button he ld down, you'JJ notice the horn can be rotated. Rotate the horn s li ghtly and let go of the mouse button.
I. Drag the duplicate into position on the right side of the head.
m. Repeat Steps h through k to create five more horns, as shown in Figure 13 m.
1lJF
,...... . lfiiiOIOUl':II OIII Uktl&t
-
I
.: ~,.,p.:. -
IC= J=I
'or-- ·--n· -- - -. .
13k.
131,13m.
14. Create eyes.
Alex gave the dinosaur small yellow pyramids for eyes.
a. Select Change ViewiLeft from the View pull-down
menu. b. T he Left View window will be displayed.
c. Select the Irreg ular Object Tool.
d. Se lect the [nflate Pointed Modifier Tool. T his tool w ill inflate an object wi th sides that converge to a point.
14c.
14d.
14b.
.til .-
fllfK'' dlnouur:t elt Ulr-w
·
III ~
e. Draw a three-sided polygon ro form an eye, as shown in
Figure 14e. f. Select C hange ViewiFront from the View pull-down
me n u.
g. The Front View wi ndow will be displayed.
h. Adjust the width of the eye, as shown in Figure 14 b.
flome l dll m Morne(ll.l\ltllltl ( enhn o·ull.l'l
Ae,el OWJtn l f lo'ti Obu ru er
14f.
lf'll
l!' l
111, 1111
~n
14e. 141.
14g,14h.
i. Select Change ViewiLeft from the View pull-down me nu .
j. The Left View window will be displayed.
k. Drag the le ft eye into position on the di nosaur's head.
14j,14k.
I. Follow Steps 14i and 14j to duplicate the eye.
m. Change to the Front View, and position the right eye on
the right side of the dinosaur's head.
1435. VRML World Building
15. Create a tongue.
Give the dinosaur a dark red tongue.
a. Select Change ViewlLeft from the View pu ll-down
menu.
15a.
b. The Left View window will be displayed.
c. Select the Jrregul ar Object Tool.
d. Select the Innate Pointed Modifier Tool. This tool will inflate an o bject with sides that converge to a poi nt
15c.
lSd.
Al iJN' ,dlftUIUr.t e ll lk w
..
15o.
15b.
e. Draw a three-sided polygon to form a tongue, as shown
in Figure 15e. f. Select C hange ViewiFront from the View pull-down
menu.
g. The Front View window wi ll be displayed.
h. Adjust the width of the tongue, as show n in Figure ISh.
..
15f.
1Sg,1Sh.
436. 1Chapter 11
i. Select Change View!Left from the View pull-down menu.
j. The Left View window will be displayed.
k. Drag the tongue into position inside the dinosaur's mouth, as shown in F igure l5k.
151.
...
IIU( \ diiMn·v:iett Ill&~~
1~ 1
~
~.
·~
.
16a.
"
.,,,., 4N.oM·r.un ltltu.
~
j
1
1--
I l
I
I
't (}F'.
~
·r-
16b.
15J, 15k.
16. View the model in the Walk View. a. Drag the Observer in front of your model, as shown in
Figure 16a.
b. The black line in the middle of the Observer shou ld be pointing toward the dinosaur. This represents the direction of the Observer or the line of sight.
To manually change the line of sight, posi tion the tip of the mouse pointer arrow in the center of the Observer, hold down the Option key, and cl ick and drag in a new direction. A dolled line will appear. R elease the mouse button, and the line of sight wi ll be repositioned.
c. Select New View!Walk View from the View pull-down
menu.
OUIQft WlndiW\
Cllon eUi t w
· IDII
\ ttiiOif" to l #lto r 1f'III OIJ1t lo Ob umer
f l a 11 Cinl l'r on t l ·ct
IIOmll! 1111101
ll fl Rig h t
IIIIJUIDin"fiJer ( f'lllllf ObUII·tt
lete tOttgt·
lt ~llbt ·luttr
.. -,,:, ii· WO!Iclllc;I'I UII
16c.
1437. VRML World Building
16d, 16e, 16f. 16g.
d. T he Wal k V iew w i ll be d isplayed. e. Posit ion your mouse on ei ther side of the cen ter cross-
hair, and cl ick on the mouse button a few times. This action causes you to navigate i n the Wal k View w indow Lo the right or to the left.
(Note: Ifyou position your mouse to the left of the cen-
ter crosshair and click, you wiiiiLirnleft. You will tum right ({you position your mouse to the right ofthe cen-
ter crossha ir and click. Ifyou position your mouse
above the center crosshair and click, you will move.for-
ward. You will move backward ifyou position your
mouse bullon below the center crosslwir and click.) f. In Lhe Walk Vi ew w i ndow, you can see i f your model
needs adj ustment.
g. T he background color of the Wal k V iew w indow may be
changed by pressi ng on the Color bar in the Tool palette and selecting an aiLernate color, as show n i n Figure 16g.
h. A lex Shamson changed the background color from the default l ighL blue to black. (Note: The dinosaur you see in the step-by-step examples is the dinosaur I created f or this section. Figure 16h is is the dinosaur Alex created. )
16h.
438.1 Chapter 11
17. Repositioning the dinosaur's eyes.
The Walk View revealed that my dinosaur's eyes needed to be moved toward the head. The F ront View is the best view to do thi s.
a. Select Change ViewiFront from the View pull-down
me nu.
b. The Front View window will be displayed.
c. C lick on o ne of the eye polygons, and press the down
17a.
arrow on your keyboard to move the cyt:: down.
d. Repeat thi s step to move the other eye polygon to line it
up with the first eye polygon you moved.
e. Follow Steps 16c and 16d to change to the Walk View
and c heck on this adjustment.
17b, 17c.
+
17e.
17d.
VRML World Building j 439.
IJDllliiDilUI}n IUrndOIIJ\
Ulanne llltuo
J··· · l a ll oll'l
' \et tloln· to i Git or
\el Moalt to Ob'fn·
front h t·
-
l lllt
llctnu· l d llf.lr
l l rg h t
llt1nr1 ObuJrver
[enlllrllllUIIl.IU
I IJflllteljfiUI
· · t o t lr'9 n l·· ·l l&a emer
18a.
·Y
,.lf' M \Oin!IJ l.'t 1 l p 1 fllf'" i 11111\.ut:t t
18b.
18c.
Color Bar Ambien1Light Direc1ional Light
On/Off
18. Adjust the World Lighting.
The World Lighting Editor may be used to adjust the lighting on or around your model. The objects you create in Virtus WalkThrough Pro have four default light sources. One of these is an ambient light source (light fro m all directions simultaneously) and three are directional li ght sources (light from a si ngle d irection).
All ofthe default light sources have a ne utral gray color, which may be changed. Lights may be added or dele ted, turned on or off, and designated as eitl1cr ambient or direc ti onal.
To add brighter Iight to the dinosaur, change the color of the lights from gray to white.
a. Select New ViewiWorld Li ghting from tlle View
pull -down me nu.
b. The World Lighting Ed itor will be opened.
c. A Lights li st, containing the four default light sources, wi ll appear in tl1e Tools palette. Each light has a(n):
· O n/Off switch. Cli ck to turn a light source on or off.
· Ambient/Directiona l icon. C lick to toggle between these two types of li ght sources.
· Color bar. Press and hold down the Color Bar to select a lig ht color.
d. To change the light color from gray to white, press and hold down the Color bar, drag the pointer to select white, and re lease the mouse button.
18d.
440. j Chapter 11
18e.
lml!ll oe,lq· tJI·do"''
(hlt'o()ltllllt
·
'"'llu ltmn
\f'l"ome t o l cUIOr
l rt lll
,,,, \el Ko-.e t o Ob\etvrr ltr i:
ttcwn. ld11tt
Ql q t r l
-~~~~ ltomeOburnn·r
Cente rOtl urwer
U.tol l d II bllh
~=~:::;~~:., X 'I
I
18f.
e. Re peat this step to change the light co lor of L11e re ma in-
ing lights from gray to white.
f. To observe tJ1e e ffects of the c hange in the light color, open the Wa lk View. Select New ViewiWalk View from the View pull-down menu .
g. Note the change in the model. Besides the c hange in the
background colo r, the lig ht is brighte r.
19a.
18g.
19. Create a duplicate jaw to hold teeth. a . Select Change ViewiLe ft from the View pull-down
m e nu. b. The Lel't View w indow wi ll be displayed.
c . C lick on the lower jaw to select it.
d. Select Duplicate From the Edi t pull-down menu.
li
I:IJ:D:. Illew Undl
<u l
., Ueuqn IC
"tollil!f \ elu te d ·
'fii i'CIRII
:It
Unullu t fill
Hide tetec l ed W
' " OIUflll
lcutteletuut lit
ln l t~ t All
19b.
VRML World Building I 441 . I
e . A duplicate lowerjaw will appear.
f . Use the down arrow key on your keyboard to move the
·I
duplicate away from your model.
g. When you' ve moved the duplicate away from your
model, use your mouse pointer anow to move the jaw in
rront of your model.
19e .
j
19h.
1 91.
1 9j.
r --
19f.
19g.
h. Select the Irregular Object Tool. i. Select the Inflate PoinLed ModifierTool. j. Draw a three-sided polygon to form a tooth, as shown in
Figure L9j . k. Select Change ViewiFront from the View pull-down
menu. I. The Front View window wi ll be displayed. m. Adjust the width of the tongue, as shown in Figure 19m.
· .... . op
...
~· t llome 11 Ielliot \et Mo..e to Ohr-rlltf
Boll om
S..tt I IPII
..
llomeldllot
·· I I i!ji l l
Norne Otl\tllU't
[ e rll orOII\ IlUit!l
1 9k.
1
j
1 91, 19m.
442. 1Chapter II
n. Select C hange ViewiLeft fTom the View pull-down
menu.
o. The Left View window will be dis played.
p. Drag the tooth and line it up on the jaw, as shown in Figure 19p.
19n.
II
19o.
19p.
Undo
X2
-
Cut
~11
CG tl~
MC
-
MOitii!Jbllttl e d "eletlllll U n~rl oc l 1111 Mltlt! \ f' hut ·t~
t :iii: A
·u
h d :\e lrcttod XJ Unklct Alii
19q.
q. With the tooth still selected. selec t Duplicate from the Ed it pu ll-down menu.
r. A duplicate tooth will appear. s. Move the duplicate tooth a nd line it up on the jaw, as
shown in Figure 19s.
"'
. . R~M rdii\Oltut:l · ll Uloew
..
I ~~ ~~:.
~ 1
~ . .,.
19r.
~
lie"' el·o·our:ll ll lllrUI
II
·I :~
I
19s.
1443. VRML World Building
Cu i
...(OP't
,,.
U ear
·.·, '~"·
Mo41ly ..rlrtllt41 ·
'~lf'fl AU
XII
IIIHI'IItlr l llll
lll ll·,lleCifd XH
Ulawlll
I Oi t \ll.aii!G tr:J
l nl -.l.llll
19t.
t. Reselect Duplicate from the Edit pull-clown menu. u. A new duplicate will appear and Virtus WalkThrough
Pro will remember where you moved the original.
v. Continue to select Duplicate from the Edit pull-down
menu until you have filled in the jaw with teeth, as shown in Figure 19v.
. .,tiOrigU1 ltVf'1 0:.UIUII 11:
20a.
19u.
19v.
20. Adjust the teeth in the Top View. a . Select Change ViewlTop from the View pull-down menu . b. The Top View will be displayed.
·
.
'
20b.
444. jChapter I1
·''~ r!'
j LLJI' I ' .....
20c.
c. Drag a selection marquee around the teeth, as shown in
Figure 20c, and the n let go o f the mouse.
d. When you release the mouse, the teetJ1 will display selection handles, indicating that they are selected.
e. Drag the teeth inside the j aw, as shown in Figure 20e.
..
lr /
I
w-· ~
20e.
f. Move the front teeth aro und to the front of the jaw, one at a time. To do this, cl ick on a tooth, and move it to the left using the left arrow key o n your keyboard.
g. Use the drag-select and duplicate techniques presented
in this section to create a row of teeth on the ri ght side of the j aw. h. When you have completed a fu ll set o f teeth us ing the jaw as a gu ide, move the jaw away from the teeth, as shown in Figure 20h.
I
~ ~rt ·
20f.
20g.
20h.
1445. VRML World Building
r· ····1 ··
I~· t-bf>tfc. ! ' ! ~,
LJ\!f j.: ;
~
~..
'
...............
. ;
....__
21a.
I
21b.
21e.
21. Group the teeth. a. Drag a selection marquee around the teeth, and then let
go of the mouse.
b. When you release the mouse, the teeth will display selection handles, indicating that they are selected.
c. Select Group from the Design pull-down me nu.
d. The teeth will become one obj ect, and the new object wil l be surrounded with a new set of selection handles.
l!liJliiii.WirllfOUI\
\ttall hi Clrld
loam I·
··
loemOu l
W·
hf't.U I ·yPr n~ l ll l e l oll!r
21c.
r.r-- .. ·=- ,_.,.......~,.
21d.
e. Select Change ViewiLeft from the View pul l-down
menu. f. T he Left View will be displayed.
g. Select the duplicate jaw.
h. Press the Delete key on your keyboard to delete the duplicate jaw. The jaw was used as a guide to create teeth and is no longer needed.
21f.
446. J Chapter II
l
21g.
21h.
i. Select the teeth, which are now one obj ect. j. Select Duplicate from the Edit pull -dow n menu. k. A d uplicate set of teeth wi ll appear superimposed on the
orig inal.
211.
lllr w Df'ilqn
Undo
az
c..
··
(O illj
NC
PIUe Clu r
· ··'
··· "1001 fyh1Kifd
\IIU I IIII
1111'f' IM1 1Ul Mnttt \t:IUif d \ho.J IIIII
I IM. k \rl ttlfd unkut 1111
:··,
PrefP.I t'acn._
21J.
....... ··~ ,···«~.r.t·l
.
'
I
Ill'~:
l.p;~:
-~
-
21k.
I. Move the new duplicaLe set of teeth away from the oti ginal.
m. Drag the duplicate set of teeth into the dinosaur's mouth,
as shown in Figure 2 1m.
211.
21m.
22. Rotate the original set of teeth.
a. Select the Rotate Tool.
22a.
VRML World Buildillg I 447.
b. Click inside the grouped object, and drag your mouse down and to the left. As you move your mouse with the button held down, you' ll notice that the teeth can be rotated.
c. Rotate the teeth so they are facing down, as shown in
Figure 22b.You may need to rotate the teeth a few times to gel them to line up horizontally.
..
NIUI Ult iU
· 0011 ...1
\ et iiOinP IO idil t f
l ·o·l \?f loCk
\ ei iiOinl' toOtl\tfUIII .ll · lt
XI
Nomi' l tlll al Hotntt lll·uwu Cttlll!t 0 0,,_ 11,.1
lllgM l h Qppcn l h: XI
lleu i Df lt l~t
t rur lltl" llil'r . ,
22d.
22b.
22c.
d. Select Change ViewiTop fro m the View pull-down menu .
e. The Top View will be displayed.
f. Select the Rotate Tool.
g. You 've rotated the teeth in the Left View so that they
point down . Now, rotate the teeth so that the set faces in the same di rection as the Lop row. Click inside the remaining set of teeth, drag your mouse to the right, and rotate the row so that it faces the opposite direction.
. J
22f.
~-·"
22e.
22g.
448.1Chapter 11
23o. 24a.
24b.
23. Drag the upper teeth inside the mouth. a. Drag the duplicate row of teeth inside the dinosaur's
mouth, as shown in Figure 23a.
b. Select New ViewiWalk View from the Vie w pull-down menu. (Note: See Steps 16a and J6b in this section for details on hoiV to position the Observe1: )
c. The Walk View wi ll be displayed. Both rows of teeth have extra teeth that need to be deleted.
IJml!liiD u~n Q.tlnd !IIAn
CMn flPiew
· IDII
\pt ~~ ~.... IO f CiiOI
l o1 l o11 f rln l
\f'tiiiJ·Ir loOburuer l o( ll:
tdl
l~ln.. ldllCII
fl ight
~=~.::~:~_=_· - ~~:;!
~=:~ :;~~;wor JU ltllilm
23b.
23c.
24. Delete extra teeth. a. Select Change ViewiLe fl from the View pull-down
menu.
b. The Le ft View wi ll be di splayed.
c. With the upper row of teeth selected, select Ungroup from the Desig n pull-down menu.
d. A lthough individual handles may not appear around each tooth, you' ll discover that the teeth are no longer one object by clic king on one of the rear teeth.
~IIHfldOW\
\ n t ' l p t o l of l l l
l oom 111
X·
Nuw la!Jer
aete telnyt.l
l.r Otlll
itlo
Add UIIMI lhllh or
24c.
24d.
VRML World Building 1449.
e. Click to select individual teeth , and press the Delete key
on the keyboard to remove the extra teeth.
f. Repeat Step 24c to ungroup the lower set of teeth.
g. Click to select individual teeth along the lower jaw, and
press the Delete key on the key board to remove extra teeth.
24f.
ll110f11U i t1111
·
~~~1om l
\II IIO..I IO I IIItlr
fiOI\1
\t'l HORII IQ 0!1Urllrl laCk
lt! lf
IIOIIIfl l dllllr
fl tqllll
~:z.:,':~~·::~. Ji!!l!IIJ!II!!!IIIIl
lhufl t Drlqrn l tiiiiOburuu
.,r··..-ld UQftlln
24h.
24g .
h. Select New ViewiWalk View from the View pull-down menu.
i. The Walk View wiII be displayed.
241.
450. , Chapter I I
.... .,. lfll flrw Ulenr Uflnfourt ~.~
Ope-·-
XI
(IOU
XUJ
\ut·r kuefl· lftt·Mt ,,. ) · .,..a
P·qelel ufl-. P r l l ' l t- ·
··
( t edlh , ··
lttl~ll l lh.trl' In· tr ·
\n· pllt· l Molte Moul r l ilrr Ot!J...
26a.
DIU 10· · OIH 1n...
Iff llirhn t"I· Yf';
Pfi.Ml :O,tiOm
:!:· l o """ hlpoJI ''"''"'"'
O IMJlOI IIrlltur r.\llnt· I MI)1111- 1Uf'UII\: ~ Q \l(rp Ououe \vrl·<~ 1roh~rn
2 6 b.
25. Resave your model. a. Select Save from the File pull -down menu.
IW'A_U il
~'IU
Dn1,.9,.·.
apn ...
)1:0
.( IOU!
, ..,. "'-·
llll
n .. .,,,, " ' ~lwrd
f"·O· \et·&~··· Pr i n l . . .
[ l elllh ...
11nportlrot1t l~:~y l!r lllpOr l \ IIIIPJitDI
MllltOMtiiJi e llbr ory,_
Ouil
1(1
25a.
b. Your file will be updated.
26. Export the model as a VRML file. a. Select ExportiVRML from the File pull-down menu.
b. In the dia log box that fo llows, click OK. (Note: The dinosaur has no textures. )
c. In the dialog box that fo llows, lype a name with a WRL
extension, and cl ic k o n Save.
d. A file-w riting st.atus bar will appear as the .WRL fi le is written lo your hard dri ve.
..Ukiii,.!J:If·nourr t c=========~ t··~~ ] 26d.
26c.
VRML World Building 1451.
Open your WRL file in a VRML browser
S ummary: Use the Virtus Voyager \IRML browser to open your WRLfile.
Voy ager 82 68k
l a.
I
di no.wr l
0 pen your WRL fi le in a browser that can see VRML fil es. Examples include Netscape Navigator with Live3D plug-in, the Virtus Voyager browser, or Brad Anderson's Ex pressVR browser. SGI has announced th at they intend to prov ide a version of their Cosmo browser for the Macintosh. (Note: The dino. wrl model in this example is available on the book's companion CD-ROM. The model was created by Alex Shamson of VRmill, Inc. Lookf o r his sire at http://www. vrmill. com. )
1. Open a VRML file in Virtus Voyager. a. Open the Voyager software that corresponds to your hardware (Macintosh PowerPC or 68 K Macintosh). b. The Voyager browser window will open. (Note: Look f or the Virtus Voyager browser on tl1e companion CD-ROM. The Voyage r browser may be used as a standa lone application, or it may be COJ!fig ured as a Netscape helper appplication.) c. Select Open File from the File pull-down menu.
lllew fll.n louuonM. Jl1.
.·.·
\M·rlh fttlll. Pt r f i'H'1IU\.. 'C
lc.
l b.
452. 1Chapter 11
~~ ~1no1.w11 @dlnol.ulll {!JdinO I.¥111 B dlno \ ,.,, 1
1d.
~ ~ ··
~
d. ln the dialog box that follows, open a WRL file and click on Open.
e. The VRML model will open in the browser window.
2a.
2b.
2c.
2d.
2e.
2f.
2g.
1e.
2. Navigate your VRML file. a. Press on the Forward navigation button to move forward. b. Press on the Backward navigation button to move backward. c. Press on the Left navigation button to move le n . d. Press on the Rig ht nav igation button to move right. e. Press on the Up nav igation button to move up. f. Press on the Down nav igation button to move down.
g. Press on the Home navigation button to reposition the
model to its opening position.
1453. VRML World Building
OpenaVRML file in a word processor and alter the Perspective· Camera
Summary: Follow this example to change the PerspectiveCamera node's parameters by making changes to a WRL file in a word process01:
Microsoft \t/ord
la.
dino.wrl
M any people who create VRML models use a word processor to create " hand coded" VRML. These files and the files you expon fro m a 3D application program are text fil es that may be opened and modified in a word processor.
As VRML c hanges, hand cod ing provides a means to make changes in a VRML model that applications may not be able to add. In thi s exam ple, changes in XYZ position va lues in the PerspectiveCamera node parame ters will al ter the position of the dinosaur head when the mode l opens.
1. Open a VRML file in a word processor. a. Open Mi croso ft Word or some other word processor. (Note: SimpleTextmay be used, although the software's document size is limited, and some VRML models may not open.) b. Select Open from the Fi le pull-down menu. c. In the dial og box that follows, select a WRL li le, and click on Open.
f tlll \4f'I.U
Cl o \ ·
J&U
'-··
In
h· ~tl\ . -
\ t(
ll·d I IIII .
\UlUUIIMtj lniO-
l Pflnt r u·ltlrw... ·~
l"t'lgn ~e lu p... <til
Ptlnl ..,
lltl'
Pt iiii Mfi iiJ····
pmt
XQ
lb.
. .· ·1 ~tlec t ·DIIumenl : 1 ~ ···
lc:.
454. I Chapter 11
,,.o6.Wr1
"'
· · ' ~ Lt la.u.LkhJ ~ " ·~
t"" "?.Ml I.' I 0JkL100~j»l,t..l 10 ·
:::a~o '~l!IJ V n t..ll
.....a!tTb:CCiflt'rol)D· VJI.Il lxpo: : t FII:..r:Z· V.rt:n
C~f?"C'IUOCI.O· lh Lttoct::.n.an t ct·· :U.I.f IOOO·C&.r 'f,I:C 21-)llD· ~ ~~·..6i"·'1100'ICO · :ll1 t.c").r-:t.n-J:c;.:1' ;:11~( * ::ty
cc~r C· · s:nq ·cocoo· CJ· )O D·ha<:..mllli~tiO
· · e:a TlUI
· m:.g;:o · i.."':.tm.llf 10
" SJ=TklatO· · ~r o .. <10 1 · 7((" "1:% ·
· e ~rt<uon t C · SJ\'~ 1 10· IDO ·Olr...w.a!JI.qr.t i :::!
nur
· sn....m. · t:~t.tc::a:l:.t:: ' -:
· sa "lootC ·
· (c:<.r o~O)O) · s~:r C ·
· d :lfoCIJO:l ,!.<1 ·~"7 · )7 · :1Vtoe~C · jOC tOUK ':lOoa:l.:,f;ll:
e.. IO· · ( 11
7F.UE
" ! Fr'.«..IO· · mWnr.t~· l 0
· s::Fl¢.3:0· · <dOC'
O, O'\ · ~fCot< r O o
· d .;redJ:c · l09 · 101 10) · :f'Vt<~O· IDO·lb«U«'Il!~t
lO· · <:ta TR;}E
· ..J1'«4U· · tr.t~>utt7 t 0
· !nl~tO· · (l)l:r 0) 0 )0) · rJ.:c)Of U·
· ch:K".:oo 5 119 ·2~6 · S1Vt<jiD · 100
· PtUpte~veCa~uIll- po-!1~ -: ~)~ ·0 1 5~ <1 l-3~~6 · !:f'Vfot!tO · · cner.WUOOJ(IOOO.. I "tfi!o~-.:onO
·
·
0:'.-"1~~ I (I ~6<1!.:! ·.Jf vt U:-:1 0·
· tr.w.t.UUO::II 00 I .. )\:: 6 · :'f· '"UXon\: ·
·
1d.
1
"" PerspectiveCamera
positions
2b. 2d.
d. The WRL file wi ll open in a document window.
e. The file may not have a neat column of VRML code that you'd expect it to have. For example. the YRML
code you' re looki ng for is most readable in the column format:
Pe r specti veCamera
posi tion · 14. 757 4 · 5.9690 ·1 . 3716
JfSFVec 3 f
orie nta t i on 0 1 0 4.4438 #SFRotati on
foe a1Oi stance 2
1/SFFl oa t
heightAngle 1.0486
Although the text fi le looks scrambl ed in a Microsoft Word w indow, it does not need to be cleaned up or formatted.
2. Change the XYZ position values. a. T he XYZ position va lues in the file that opens are:
· 1. 8034 · 0.1524 3 . 3528 b. These va lues corres pond to the location of the camera. See Figure 2b.
c. To reposition the cameras entry view, change these
values to:
I . 2034 · 0 5524 3.3528 (Note: The Netscape Navigator browser window with Live3D has a pop-up menu that accomodates several PerspectiveCamera position views. These extra camera position views are a11 example ofVRML that needs to be hand coded.)
d. The new XYZ values correspond to the position of the camera view. See Figure 2d. (Note: The dinosaur's head does not move; the camera does.)
i VRML World Building 455.
DJlill.l dll lii· UI
N..UI
Jlh
0 P II Il ~ .
WO
CIQt O
Mi l.!
tn11·
In
flnll f Ue...
l'rtni Pr·IIIU···· ~:
l'og· S·ttJII··· l'nnt ...
·onr
wil
ItO
3a.
3. Save your WRL file and view changes. a. Select Save As from the File pull-down me nu.
b. In the dialog box that follows, selec t Text Only from the Save File As Type pop-up me nu.
456. , Chapter 11
3b.
c . Alter the file na me by adding an alphanumeric charac-
ter, make s ure the fil e has a WRL extensio n, and click on Save.
.,"-."..,'................~·····:
('.:':~:.·· '"''
3c.
1· 1 0 ..1..11 1... 111·
d. Follows Steps la through I e in the previous section to view the position changes.
4 . Create a Camera Switch (a Live3D option).
Live30 's viewpoints provide a means to display several camera shots that you can access through the View pop-up menu in the Netscape Navi gator window. To write these extra viewpoi nts into a YRML file, you' ll need to create a Camera Switch node. You can then add as many viewpoints as you'd like.
a. The following example is from Alex Shamson's
Plaza.wrlli le, which can be v iewed at his Web site (http://www. vnnill.com). Each new viewpoint's
descri ption follows each line, begi11ning with DEF. (Note: \liewpoim descriptions appear in the Live3D pop-up.) Alex Shamson warns that spaces between words in a descriptio n are not allowed. For example, notice he has closed the space in EntryView and Le ftR e ar :
DEF Came r as Switch
whi chChild - 1
DEF EntryView PerspectiveCame ra
4a.
posit i on 0 3.6 159
#SFVec3 f
or ie ntation 1 0 0 0.2 (JSFRotatio n
focal Di sta nce 678. 69 IJSFFloat
heig htAn gle 1.3
DEF Lef tRea r Perspec t i veCame r a posit ion -80 5. 5 25 ori enta tion 0 1 0 4 . 5 #SFRo tat ion foc al Dist ance 678 .69 hei gh t Angl e l. 3
DEF Bird 's EyeView Pe r spectiveCa mera pos i t ion 70 50 15 or ientat i on 0 1 0 -4 IJS FRotat ion foca l Distance 500 heigh tAngle -3
DEF Directo ryPa nel Pe r spectiveCamera pos i ti on -1 0 4 45 orientation 0 1 0 -6 IJSFRotation focal Di s t ance 500 heightAngle -3
\IRML World Building 14 57.
EmbedaVRML window in a Web page
Summary: Use the <EMBED> tag to add a VRMLji/e to a Web page.
Tip : The BBS ColorEditor has moved a
f ew times. Ifyou have tm ublefinding the
site, visit the Alta Vista search engine at http://www.a/tavista.digita/. com . Do a search 0 11 ColorEditor for HTML. Do not include a space between Color and Ed itor.
I 4 5 8 . Chapter 11
V RML fi les can be added to a Web page using the <EMBED> tag. This tag defines an inline window that is part of the page.
1 . Create an HTML document.
a . Open Sim pleText or your word processor. rr you use
a word processor, be sure to save the text as Text Only. b. C r eate a new HTML d ocument. Start a new docume nt
with the followi ng mar kup tags:
<HH1L>
<HEAD > <TI TLE> Al ex · s di nosa ur
</ TITLE>
</ HEAD>
c . C reate a body tag, a nd add color att r ibu tes. Adding
color to a Netscape background requ ires placing a hexadecimal red-green-blue triple t in U1e body tag. Best Business Solutions' Color Editor provides an onli ne tool to locate a hexadecimal triplet for your page at http://uccnitk.edu.tw/htm l.courses/colorEditor.html. <HTML > <HEA D> <T ITLE> Al ex ' s dinosau r
<! TI TLE>
</ HEAD> <BODY BGCOLOR-"//000000"> d. Add a <CENTER> tag <HTMD <HEAD> <TITLE> Alex ' s dinosa ur
<!TITLE>
<! HEAD> <BODY BGCO LOR-"#000000"> <CENTER>
e. Add an <EMBED> tag. In this tag, the width and
height of the embedded VRML window is defined in pi xe ls. In this example, the width is 400, and the height is 300. <HH1 L> <HEAD> <T ITLE > Alex ' s di nosaur
<!TITLE>
<!HEAD> <BODY BGCOLOR-"#000000"> <CENTER> <EMBED SRC-"dino.wrl " WI DTH-400 HE IGHT-300> <ICEfHER> f. Add the ending tags. <!BODY> <tHm L>
g. Save the file. Save the docume nt in SimpleText or
your word processor.lf you' re working in a word processor, save the text as Text Only. G ive the fil e an .HThl extension. h . Test the frame document. Open Netscape or Microsoft's Internet Explore r browser. Open your document by selecting Open File from the File pulldown menu.
VRML World Building 1459.
2. Summary of HTML tags used in this section.
The tags you see in this list (in alphabetical order) re flect the HTML 3.2 specification. <BODY> .·.</BODY>
A tag used to open and close the body of a document. T his tag uses the BGCOLOR=#RRGGBB or hexadecimal red-green-blue triple t attribute, which add s color to a browser page. Fo r example:
<BODY BGCOLOR-11000000>
<CENTER>...</CENTER> A tag used to center e le ments on a page.
< EMB E D> A Lag used to add an embedded object to a Web page . This tag uses the SRC attribute, which re presents the name of the source data. This tag also uses the WIDTH and HEIGHT attributes to indicate the width and height of an object in pixels. For example:
<EMBED SRC- '' dlno.wr l " WI DTH- 400 HEIGHT- 300>
<HEAD> . . . </ H E A D > A tag used to open and close the heade r portion of a docume nt.
<HTML>...<lHTML> A tag used to open and close an HTML docume nt.
<TITLE>.. .<!I'I TLE> A tag used to describes the title of a docume nt, which shows up inside a browser's title bar.
460. , Chapter I 1
Ch
Artist featured in this chapter:
Frank DeCrescenzo is a graphic designer at Simon & Schuster in New York City and n new media artist specializing in Web site design, 3D animation, and digital video. He is also a musician with the band Mantus.
j imrk_decresceJr zo@ prenhall.com
hllp:l/members.aol.coJIV flatsticks/splash. lunJ!
Forms
A Web page form is an advanced feature because it requires a user to type data into the form's fields, select from multiple-choice-type data fields using radio buttons, or dragselect from multiple-choice-type data in pop-up menus. These responses must then be routed from the Web page to some destination on the Internet. The designer who builds the form must e ither create a stra tegy for routing the data or turn this task over to a programmer. TypicaUy, data is routed from a form to some destination with a CGI script (Common Gateway Interface) written in a computer language such as PERL, Java, or C++.
[n this chapter, new medi a artist Frank DeCrescenzo demonstrates how to design a form using NetObjects Fusion. The routing ofdata is handled with a simple MAILTO command and avoids the use of CGI scripts. By using a MAILTO, the desig ner who creates the form may have the form data mailed to an email address. Even though th is method is IJ1e least sophisticated tec hnique for routing form data, it 's generic enough for any Web server. (Note: For details on CCI directol)·access, see Before you design a form for your Web site.. ..) Special thanks to Web specialist Peter Chowka for his tips on how to use a MArLTO to route form data.
The Slappers Website
Summary: Learn how to design a Web site with aform byfollowing Frank DeCrescenzo's step-by-step example.
Nehtft c: Slop ers
lot·t'On lm.:/ /I!~WMtOCI ISllfrt?IPr·VMv/,.,..,.,11·\!fe'· h:n- 1
II '''~t'.,Hfv" ll '~"»t'sC.Ot, l lout WMtl.-u Htt Sur'\11 I ~( Sof'w¥· )
___ ... ::.:.:-:...~:·:.:..:-:-::.-:-:.·-::-.::"
.,. ~~gr-::~~~-
--~·
__... .... .'.'."..'".
- "~ '""".-.,.-. ...,....................
?a-=::.·.~--
.._..._ o- c--..
·-------·- ~ -=-
Above: The site 's Wh ere page contains a form. A bove Right: The Slc1ppers home page.
Welcome 1o tho Stoppers bomB pa,ge.
'TheorJy ~cmea -nb vlwR
.. }"OU'Dt:OO S~n~ U.~tt
dlt:r.>l!ck ~-"·"")'ell rrod~J~:tc::rl.e !romt.Y ftDt'!tevm;
'lt'OOU 1'h.-..y hsve lA ~::tnt:»b' rUraJW~. ~j16Jvr~~:u The tb.t
'"b.pt eMb~ ,o"J1) polJd:t.f~t'.\ .so~trnm;,otrdrum klt
th.\t~onoi'Jmllt,'Ou;d~'t tle
e.blt _, eet vtth a. 'l*tlnor* f:alt. To ln m1Mte about lllU I'Wk&lly
w.,. ~l)l!drtlnl.11icl'.!J'.e , ~ mo.wtll ~ they«~~ be fo1ll>l , ~ tm!. tMY att tljed , selcc t otte 'l)Prol\fl..t'l& b'll.nO:u . E:rJoy)'Cutb'I"O'Wt ~ 'l'tmtmbtt, "l!J.'Ou bee.t 10 a.dllfettntdrwn,
uea d.i!ftlf:t'J.d.~..t~Ntic:k.. ·
I' l"'tltiii:WJ I!/ll9cli:l!zl£tl llllm!l lli2J..I,Ir,UI
Cop~hiCI 199!> Slf~ Hoppy Pn>I1XIi>ns Plrt.H~Jt'lftUt:.:y q,UU'lb%U4boU! lh1.1 ~ -=
Prlllk Deetuettao to:~'C)ocl't?~-;.tcm
Stappers are nat drumsticks created by percussionist Billy Amendo la. Billy and Fra nk DeCrescenzo arc both membe rs of a New York C ity-based band called Mantus. (Note: Readers who wish to follow Frank 's sample step-bystep may lookfor both a rt and textfiles on the companion CD-ROM. )
1. Overview.
Th is c hapter presents readers with the techniques used to create a form with NctObjects Fusion. Visit http://www .netobjects.com to dow nload a 30-day trial copy of the software.
Forms 1463.
2a. 2b.
2c.
2. The site's structure.
The structure Frank designed for the S lappers site is a simple hierarc hy.
a. Splash page. When visitors load the first Slappers page into their browser, the first thi ng that appears is a GfF ani mation of a rotating 3D logo.
b. Home page. Frank's ho me page contains a tra nsparent GlF image of the Slappers drumsticks and an image map panel.
c. Who. Frank's Who page includes background informatjon about Billy Amendola, who developed the Slappers drumsticks. Included are endorsements from fellow artists and magazi nes, such as Drum!, Modern Drummer; and Rip Magazine. The Who branch contai ns another branch to a Mantus page, whic h in turn contains details about Frank's band.
d. How. The How page explains how to use Slappers drumsticks. The links on this page load QuickTime video demonstration clips.
e. Where. This page answers the question, "Where can I get them?" Frank's form is included on this page.
2d.
2o.
464. 1Chapter 12
2f.
3a.
3b.
f. Hot Links. Thi s page contains links to re lated perc ussion pages on the Web.
3. Image maps as a navigation device.
Frank chose image ma ps as a nav igatio n device. He designed image map panels containing percussion instrument icons for each of the pages. These include a fu ll drum set, a set of cow bells, a ti mbale, a nd a set of bongos.
a. Home page. Frank's icons on the home page are all visible, and they're clickable hotspots that branch to re lated We b pages.
b. Branch pages. On a branch page, a related icon is a ghosted representati on of the original. This is a visual device meant to confirm that the use r is on the right page.
4. Data collection with forms.
Frank's fmm on the Where page collects personal data such as na me, address, ci ty, state, ZIP, country, and e mail. He has also created fields for a business transaction for visitors who wish to purchase a set of "Sl appers."
1\ltiii"D&te vay to Ycrl(y orhr. P booe ntlDl·er
1'.000 VIOl ..
4.
Forms 1465.
Using NetObjects Fusion to create a client-side image map
Summary: Form design in NetObjects Fusion couldn 't be simple!: To download a30-day trial version ofthe software, visit hltp:l/www.netobjects.com.
NetObjects
FUSIONN
Version 1.0
0 1996 N etObj@Ct S, Inc. All Ri ghts Reserved Nn~
Nt?tobjt?cts Fusion
1a.
........ [EI§;;,;.:.;:=====::J
t,...Utn
Ia.....
·I
1b, 1c.
N etObjeets Fusion is a wonde rful tool fo r designe rs who do not want to write HTML tags. This simple introducti on uses single-line text fields for data entry. For detai ls on how to add multiple-line text fields, radio dials, checkboxes, and combo boxes, visit the NetObjects Web site at hup://www.netobjec ts.com and down load the software 's docume ntati on. To follow this step-by-step sample. look for re lated art and text files on the co mpanion C D-ROM .
1. Start NetObjects Fusion.
The step-by-step sa mple in this section assumes you have learned the basic Web page techniques using NetObjects Fusion presented in Chapter 3.
a. Start NetObj ccts Fusion.
b. A New site d ia log box will appear on your screen.
(Note: Ifthe New Site dialog box did 110t appea1; select
New Sitejivm the File pull-down me1111.)
c. Type a name for your si te in the field labeled Site Name at the top of the New Site dialog box, and click on OK. The site name will serve as a fi le name, which is given an .NOD extension. The site name wi ll also be used as the sub folder na me that stores the NOD file and the site's assets. (Note: See Chapter 3 for de tails 011 how to create a path to your pmjectfolder ifyou do not want your.file to be stored in the NetObjects Fusionjolde1:)
466. jChapter 12
New page button Home page icon
IEl
1d,2a.
-$f.UI,.
...L Sllq"t..
2b.
d. A NetObjects Fusion Site view will be displayed. (Note: The Site view will be where you c reate pages and a structure for your site.)
e. (Option) Review Chapter 3 to learn about NetObject
Fusion 's preferences and selecting a browser to preview your Web pages.
2. Create Web pages and label them. a . In NetObjects Fusion's Site view, locate the New Page button at the top of the screen. Notice the Home Page icon is highli ghted, indicating that it is selected.
b. For the S lappers site, Frank created a preli minary splash page that contains a small GIF anima tion, a home page, and four pri ncipal branches named Who, How, Where, and Hot Links. The Mantus page, which branches from the Who page, is devoted to Frank's band.
Follow Figure 2b to create these pages. (Note: Review Chapter 3for details 0 11 how to create pages and label th em. )
3. Change views and add art to a page. The NetObjects Fusion Page view is the layout area where Web pages are c reated.
a. Double-cl ick the Slappers page in the Site view to go to
the Slappers Page view.
-S~·n
.........E..I.J..........
Y"rwt
H~
~'f t-.
Htlli'U
.....L....
3a.
Forms 1467.
Default page banner
Default navigation buttons 3e.
b. NetObjccts Fusio n's Page view will be displayed. Notice the screen contai ns a default page banner labeled Slappers.
c. Select the Selection Tool. d. Use the Selection Tool to select the default page banner.
Delete the default page banner by pressing the Delete key. Also, delete the default navigation buuons in the page footer. e. Use the Selection Tool to drag the page divider that separates the header from the body and move it up to make more room. Also, drag the page divider that separates the footer from the body and move it down.
':tr-&..1-1
f. Select the Picture Tool.
g. Draw picture boxes on the Slappers page, as shown in
3f.
Figure 3g. Import Frank's an into these boxes. (Note:
Review Chapter 3.for details on how to import art into
picture boxes.)
Flle name: Slapper_logo.gif
I
3g.
468. , Chapter 12
4. Add text to a page. a. Select the Text Tool.
4a.
b. Draw a text box, as shown in Figure 4b.
c. Launc h SimplcTex t.
d. Open the text file named Welcome.txr in SimpleText. e. Copy the text, and paste it into the NetObjects Fusion
text box, as shown in Figure 4e.
f. Add boldfacing and center the text, as shown in Figure 4f. (Note: Review Chapter 3 for details on ho w to ce/ller text and add boldfacing.)
4b.
·<..:·://%~~
welcome. btl
Ji
We lc(lmo to lho
........
Steppers home page.
Si r n plo?T o? X t
4c.
4d.
4e. 4f. File name:Welcome.txt
Forms 1469.
First text box File name: Welcome.txt
Second text box File name: the only place.txt
First t ext box
Second text box
g. Create a second tex t box, open a text file named tlte only
place. txt in SimpleTex t, copy the text, and paste it into the NetObjccts Fusion text box.
h. Center the text, as shown in Figure 4h.
5. Lengthen the page. a. C lick on the Layout tab in the Properties dialog box to
select the Layout page. b. In the fie ld labe led Width, type:
800 In the ~ie ld labeled Height, type: 800 Press Return.
;:=== ' " ""'"'""' r;k.,..;., '1\ft ru mw·lf f6tttt · m m'"''~
@ls-..~.. P.···....,.· 0 '-tiW C.-:, c::J ~
o~.....
~
l......,.rW··'-'r
!w...... , I '·Mr l
· ·~ -..1 (£)
Sa, Sb.
Layout tab
c. The page wil l be lengthened, g iving you more space to
create another text box.
6. Add more text. a. Create a third text box, open a text file named text
links. txt in SimpleText, copy the text, and paste it into the NetObjects Fusion text box.
b. Insert a li ne break after the words Hot Links, and center the text, as shown in Figure 6b. (Note: Review Chapter 3 for details about line breaks.)
Third text box File name: textlinks.txt
470. , Chapter 12
7. Add a tiled background.
Frank created embossed tiles in Photoshop usi ng the instrument shapes he used to create the image map panel. He duplicated the ti les and added colors to match the page color sche mes.
a. Click on the Picture radio dial on the Layout page of the
Properties dialog box.
7.
l llumbui l:
J~ tnto.tn !!""'' 11m11 nh .g~t · M·nlu,_btg· ·
Jj M·ntot..we·.Joga.qlf
C) .l'lll 101
c=:!E:J
~
. - l!!Ll (!)···· ~,.., l!i] (:Jw·lf ..._..., _ .
t!J"'·· ' h,r'·&ri',......
0"-twC~)"c:::J ~
~
~
I ~·
i htttr t
7a.
·1 (3;]
·I ~
Picture radio dial
b. In the dialog box that follows, select the fi le named Purple_bkgrd.gif, and click on Open.
c. Your ti le will fi ll the back of the page in the Page view to
form a wa llpaper pattern.
7b.
Forms 1471.
8. Create an image map.
a. Double-click the Picture Tool.
Sa.
b. A set of secondary Picture tools will appear at the base
of the Toolbox.
c. Click to select the Rectangle Hotspot tool.
d. Drag a rectangle over the drum set in Frank's image map
panel.
&b.
e. When you release the mouse button, a Link dialog box
will be displayed. Type the name of the page you would
like to link to in the field labeled Page Name, and click
on Find. (Note: Review Chapter 3 for details on page
finks, smart/inks, and external/inks.)
8c.
&. hlUUI.Wy llaltKJ IDJUID ,.,·.
Sf.
&e.
8d.
f. A dialog box will appear wi th the message Successfully linked to Who Page. Click on OK.
g. Repeat Steps Sa through 8f to create hotspot boxes around the remain ing percussion icons in Frank's image map panel. A set of rectangles will be visible when you have completed d1e set of rectangular hOLspots.
&g.
472. j Chapter/2
Before you design a form for your Web site...
Summary: Before you design aform, determine where thefo rm data will be sellt.
1:--..-r...,_
__- ,-t~ -
---------=-=-
B efore you design a form for your Web site, develop a strategy for routing the data from the form to some destinatio n on the Inte rnet.
1. Options for routing data. a. A CGI script to route data to a text file. Several d ifferent types of COT scripts may be used to route the data that's entered on your form to some destination on the Internet. M any scripts write form data to a text file on the Web server. These scripts may be custom-written in computer languages such as Pe rl, Java, or C++. Alternatively, you may consider using a CGI script that exists in the public domain. For example, visit the Dreamcatchers site at http://dreamcatchersweb .com/scripts to downl oad a form script. Most CGI scripts are c reated for Uni x Web servers, and this strategy also assumes that you have access to the COl- BIN or the CGI folder on the Web server you're using.
Contact your Inteme t service provider and inquire whether you have access to the server's COT directory. Access may be allowed to co mmerc ia l account users and not users with persona l accounts.
b. A CGI script to route data to a database. If you run your own server or you re nt from an ISP that is wil ling to aUow you to run soft ware on the server, consider setti ng up a database soft ware program that wi II store the form data. For Macintosh users, FileMaker from C laris Corporation is an easy-to-use option. Everyware Development Corporation's Tango for FileMaker will create a CGI script to route form da ta from your Web page into FileMaker. (Note: Claris is planning to add increased Web.functionality to FileMaker in the next release. Watch.for this development.)
c. MAILTO. Using a MAILTO command to route data
allows you to avoid the use of a CGI script. Use the following tags if you are creating your own HTML tags:
<FORM t>IETHOO·PO ST ACT!Oil· "I1AI LTO:
your_e · mail@address.com">
<P>
Forms 1473.
474. , Chapter 12
Name <INPUT TYPE-" TEXT" NAHE- "NAME" > <P> Address <IUPUT TYPE- " TEXT " UAI1E- " ADDRESS" > <P> City <INPUT TYPE-"TEXT" IIAHE-" CITY"> <P> State <I NPUT TYPE-" TEXT" NAI1 E-" STATE"> <P> Zip <INPUT TY PE- " TEXT" NAI1E- " ZIP"> <P> Country <INPUT TYPE- " TEXT" NAHE-"CDUNTRY" > <P> E-mail <INPUT TYPE-" TEXT" IIAME- "EHAI L"> <P> <Itt PUT TYPE-"SUBHIT" VALUE- " SUBI11T FDR~I " > <P> <INPUT TY PE- " RESET" VALUE- " CLEAR FORM"> <!FORM>
(Note: Format theform as a table to create even columns.)
2. Examples of commerciaiiSP service in NYC. a. aJt.coffee. This Internet cafe in New York's East Vi llage
is also an lmernet provider. Owner John Scott is lhe Webmaster and offers commercial Web accounts (no personal PPP accounts). lncluded in a commercial account is a private CGJ directory (CGT-BIN) where customers ca n place a CGTscript. The alt.coffee commercial services include:
Single Commercial Web Account: · S I00 per month, $ 100 setup fee · I virtual domain (JP address on host machine) · I e mail account with multiple aliases ($ 10 each
additional per momh)
· 20 MB of storage space ($.50 each additional per month)
· I FT'P account ($ 10 each additi onal per month) · I pri vate CGI-BIN directory · 500MB of data transfer per monU1 ($. 10 each
additional per month) · 1 monthly statistics report ($ 10 each additio nal per
month) · Weekly tape backup · SSL secure server (must provide own cert ificate) · Full T I direct to Netcom's T3 backbo ne · ISDN red undant backup line Developer 's Discount: · 4 Commercia l Web accounts for $300 per month,
$300 setu p fee Conract: John Scott, 212.529.2233, jetsam @jlotsam. com b. The Internet Channel. The Internet Channel is one of New York's larger Inte rnet providers, offering personal PPP accounts and commercial We b accounts. A small library of CGI scri pts is avai lable to users with personal PPP accounts, but users cannot upload thei r own CGI scripts to the server. A comme rcial Web account does include a private CGI d irectory (CGI-BIN). Call for current prices. Conlac/: Beth Haviland, Director of Technical Suppo rt, 2 I2.243.5200, support@inch.com
Forms J475.
Using NetObjects Fusion to design a form {with a MAILTO for routing data)
Notsco e: Where
PmcmttAtcndertonnromple~r.ly. lt)Oumu::tn~~llon a
quuoon, ~ cttfl..'l w Wk ,Ailont.en m~t WMtttM·
~ phrrM trJm· cbnt.toIo'IoI.o."IMllylul.m,.!UJ.OO·IaUs,"Pcoonnn·flccpnonthceoR=;J>~t.ItItItli oil
q"""""'
~mmu l ~o~~=m~·--------------~
fltreetAddimJ
~'ptD co:oe lnrw tCJies.bitipn. arteti aM st,rqbt. lbtre !It 1 $-" ~1 fbt\1aP, ?'We ur lrudt hom ex®Chard.1.'00d,ml eec:hcme bdesUnr;d ~.smta
dlf!cmupk)'lZ:Ica~
F oilow this step-by-step sample if you have completed the previous section. Review basic NetObjects Fusion Web page creation techniques in Chapter 3 before starLing this section. Readers who wish Lo follow this example should look for Frank DeCrescenzo's art and text files on the companion CO-ROM . 1. Change views.
a. If you have completed Lhe previous sample, switch to Lhe Site view by clicking on the Site button.
1a.
476. 1Chapter 12
-! puh
- --o- """J
H)""
'flh!!f: tt:A l lf'.t.J
..L
1b.
b. In the NetObjects Fusion S ite view th at follows, doubleclick the Where page to go to the Where Page view.
c. (Option) Alternately, you may select Go To fro m the Go
pull-down menu.
d. (Option) If you selected Go To from the Go pull-down menu, type Whe re in the fie ld la beled Go To, and c lic k on OK.
e. The Where Page view wi ll be d isplayed.
lliew
..:'"1,,1
"'rull'411j~ I'II'"ICU, I 'CIII,e f'CIIC"III 111\l UUICI
:a.H11111t
1"llfl
·U·
;)Jeuh
lui
Xl
ll r(e nl .~
X II
1d.
' D ICI
1c.
....... ~m....tf
~·-· l!!!Il (IJ,t.·"4
@)a-,,.,., ,............
O~t~t ttl., c:::J ~
01~v·
~
2a, 2b.
1e.
2. Change the page size. a. Click in the Width field on the Layout page of the Properties d ialog box, and type:
1066
b. Click in the He ight field on the Layout page of the Properties dialog box , and type:
1066
Fo rms 1477.
3. Add art to the page. a. Select the Picture Tool.
3a.
b. Draw picture boxes on the Web page, as show n in Figure 3b. [mport Frank's art files into these boxes.
File name: Silver_head.glf
Stretch radio dial -
Picture tab
I
' ·'* -~ttw
!~wJN~
JC.· i~. ·00 10k'. .l ,....9 ~ r, ...., , ......'4
C.tl ....i'
- ....... o,.. o·- ·
o~. . ~.,. ~
Qf'f- '-orH..,,
\
~ ~G;:J
4a,4b.
File name: Slappers_silver_button.gif
File name: Where_lmagemap.gif
4. Scale an image.
The Slappers button needs to be scaled proportionately so that it is a smalle r buLLon.
a. Because you have been working with picture boxes, the
Picture page on the Properties dialog box should be selected. If it is not selected, click the Picture tab at the top of the dialog box to select the Picture page in the Properties di alog box. b. C lick to select the Stretch radio dial.
c. Hold down the Shift key and drag the lower-right
handle on the Slappers button. Move your mouse up and to the left to scale the Slappers button. This wi ll create a smaller button.
4c.
478. j Chapter 12
Sa.
_ _ ~[
-
~~-J
Sb.
5. Add text. a. Select the Tex t Tool. b. Draw a text box, as shown in Figure 5b. c. Launch SimpleText.
~
SimpleoTE-Xt
Sc.
d. Open a text fi le named Wh ere_intro. text, copy the text, and paste it into the NetObjects Fusion text box, as show n in Figure 5d.
e. Create a second text box, open a text file namedfields.txt
in SimpleText, copy the text, and paste it into the NetObjects Fusion tex t box , as shown in Figure Se.
Sd. File name: Where_intro.text
Se. File name: flelds.txt
6. Create single-line text fields. a. Double-cl ick the Form Tool.
6a.
Forms 1479.
b. A set o f secondary form tools wi II appear at the base of
the Toolbox.
6b.
6c.
c. Click to select the Single-line Form Tool.
d. Draw a form text box, as shown in Figure 6d. (Note: Although you'If need a long text boxfor this field, the
length will need to be comroffedftvm the Properties dia-
log box. )
J'
6o,6f.
480. jChapter 12
6d.
e. When you draw a single-line text fie ld, the Single Li ne
page on the Prope1ties dialog box is displayed. Label each of the single-line text fi elds numerically. In the field labe led Name, type:
1
f. Drag-select the number in the field labeled Visible Length, and type:
38
Drag-select the the number in the field labeled Max Length , and type:
38
Press Re turn.
&g. Tip: Use the arrow keys on your keyboard to position a single-line textfield. To align the fields, select the Selection Tool, drag a marquee around the fields, and select Align Elements/Left from the Page pull-down menu.
7a.
7b.
7c.
g. The length of the text box wi ll c hange in response to the
new field length numbers you e ntered in the Properties dialog box. h. Repeat Steps 6a through 6e to create six more singleline text fi elds, as shown in Figure 6h. Label them 2, 3, 4, 5, 6, and 7.
Where can I get thom?
6h.
7. Create a Submit button. A Submit button functions to submit form data. Although Frank's fonn contai ns several more fields, the Submit button wi ll be added here fo r the purpose o f this exampl e.
a. Double-click the Form Tool.
b. A set ofsecondary Form tools will appear at the base of the Toolbox.
c. Select the Button tool. d. Draw a Button box.
7d.
Forms j 481.
7o, 7f, 7h.
Sa. 8b.
ac.
e. When you draw a button, the Button page on the
Prope rties dialog box will be displayed. In the field labe led Name, type: Submit f. Select the Text radio dial, and in the field next to the radio dial, type: Submit
g. The button you create will contain the word Submit in
response to your typing. (Note: You can use your own bullon image by selecting the Image radio dial, clicking on the Select button, and selecting an imagefrom your hard drive.)
·~· Slll>mil
7g.
h. Select the Submi t radio dial.
8. Create a Reset button. a. Double-click the Form Tool. b. A set of secondary Form tools wi ll appear at the base of
the Toolbox.
c. Select the Button Tool.
d. Draw a Button box.
8d.
482. 1Chapter 12
Se, 8f,8h. 9a.
e. When you draw a button, the Button page on the
Properties dialog box wi ll be di splayed. In the field labeled Name, type: Reset f . Select the Text rad io dial, and in the field next to the radio di al, type: Rese t
g. The button you create wi ll contain the word Reset in
response to yourtyping. (Note: You can use your own button image by selecting t.he Image radio dial, clicking on the Select button, and selecting an imagefrom your hard drive.)
sg.
h. Select the Reset radio dial.
9. Assign a MAILTO action to the form. A NetObj ects Fusion page can contai n one form. You may have noticed a Form Setti ngs option each time you accessed the Properties dialog box while you were build ing the form's fields. Even though you have access to the Settings option each time you build a field, you only need to fi ll it in once for the entire form.
a. Select the first text field you created for your fonn.
Forms / 483.
b. When you select any single-line text fie lds on your form, the Single Line page on the Properties di alog box will be displayed.
c. Click on the Settings button.
d. ln the Fonn Settings dialog box that follows, click in the field labeled A ction, and type:
mailto : <your_emai l @address . com>
9b.
Click on OK.
hllll S· t 1
9c.
I·MIUY·J~·FI~l'l2·2Jj· L· lan&too·AWII'Jt·I2360J&J·tltW·TOI't..~ 4- :IY&~ 1002 1&6--U!:AI!o7 ·ot!a..'Mp·l~lfrpo:L...tl.oS"-.:bm:.l· t'ut.mlt<:i l I
11.
9d.
10. Publish your site.
Follow the directions for pub lishing a site in C hapter 3.
11. Test your form.
Your form will need to be tested online. Move your newly published pages to your Web site with the FrP client that is buil t into NetObjects Fusion or use Jim Matthews' Fe tch. Fetch is a Macintosh FTP shareware uti lity. (Note: For details on how 10 use Fetch, see Use Fetch to upload your files to a provider's server in the Clien t-Side Image Maps chapter.)
Using a MAILTO command to route form data provides a simple solution for desig ners who do not want to get involved with CGJ scripts. However, you'll find that the data that is mailed to an email address wi ll need to be cleaned up in a word processor (Figure II and following).
l-Hary+Jo+Fahey&2-233+Lexingto n+Avenue+%236 0 3&3-~ew+Yo rk&
4-NY&5-10021&6-USA&7-mjfahey @inte rpor t .net&Submit· Submi t
484. ,Chapter 12
Index
20 graphics, 34-35, 37-39 20 images, 349 20 navigation, 39 30 animation, 364 30 browsers, 27,35 30 Chat, 396, 397,400-40 l 30 graphics, 30-32, 35, 40. See also VRML. 30MF, 30-3 1, 35, 393
A
Acti ve Iink, changing color of, 132 ActiveX, I Adobe Illustrator. creating type in, 18 1-1 82 Adobe Systems, OpenType initiative, 95, 99, 106,
107, 11 3, 125 Afterburner (software), 381, 390 AJFF files, 307,322, 326 Alawusa, Peju, 69, 72, 88 a lt.coffee commercial service, 474-475 alt.coffee Web site, 54-68 Amendola, Billy, 463, 464 America Online, 195 Anchors, 3 1, 35, 40, 52, 60, 66,283, 323 Animation. 337-390
nip-book animation, 349-354 games, 34 1 GIFanimation, 337,339-340, 349-363 interactive, 34 1, 364-380 loops, 356, 377-378 red ucing fi le size, 340, 360-363 Shockwave, 337,34 1-348,38 1 Antiochia, Antonio, 303 Apple Computer PC enabling hardware, 5 VRML. 393 App lets, 35 Arizona Macintosh Users Group, 37 The Arrival Web site, 342 Arrows, 39 Art. See Graphics, Images. Associati ve indexing, 34 Audio. See Sound. Audio streaming, 322 AU Iiles, 299, 302, 307, 322, 326, 336
AVT Iiles, 294-298
B
Backgro und , 133 colo~63, 10 1, 109- 11 0 , 203,2 13,260 fading an image into the browser background, 202-203 full-bleed images, 13, 206 HTML coding, 13, 45-5 1, 136, 166,208-21 I, 278-273, 3 14, 3 17 Internet Explorer style sheet, 10 I in Netscape, 45, 133-1 35,202-212 samples, 133- 135 sound, 3 13-323 tiled, 204-206, 383-386,471
BackWeb (software), 9 Banding, GIF images, 158- 159 Banner graphics, 178-1 87 BBS Color Editor. See Online Color Editor. Beach, Dav id, 305 Ben & Jerry's Hair Game, 343, 344 Berners-Lee, Tim, 33 Best Business Solutions (BBS), 127, 129 Biggar, Jamie, 34 1 BIN fi les, 145 Bin-Hex format, 19 Bitdepth, 15 1, 155, 157, 182, 185-1 86, 217-21 8 BlackSun International
CyberHub, 30 , 396 virtual scavenger hunt, 63 Blender (digizine), 347 Bookmarks, 307 Borders, 39 Borenzweig, Claude, 347 Browsers 30, 27, 35, 243 cascading style sheets, 95 client-side image maps, 253 color paleue, 157, 179 Fetch, 36, 94, 243, 262-264, 484 image quality on, 153- 154 Interne t Expl orer, 95 NetObjects Fus ion Web page preview, 75, 90-92 offline browsers, I, 9
Index J48s.
style sheets, 98 fo r VRML fi les, 452-453 Build Your Own Bug (game), 344 Bush, Vannevar, 34 Buttons animated, 342 borders, 39 cropping graphics, 42-44 HTML rable to hold, 42-53 interactive movies, 344 Lingo buttons, 374-377 outline turned off, 14 Reset butlon, 482-483 Submit bu tton, 481 -482
c
Cameron, Ewan, 99 Capuozzo, Chris, 347 Cascading style sheets (CSS I), 95, 98 Castle Red Dog Web site, 313-3 16 CO-ROMs, 7-8 CGI script, 46 1, 473,474 Character entities, 163 C hat, 8, 3 1, 396, 397, 400-40 I C hen, Eric, 282 Chowka, Peter B., 95, 97,46 1 Cicada Web Development, 397 Cinepak (software), 277 Cipolla, Tom, 299, 324, 325, 333 ClarisWorks (software), 20 I Classes, in HTML tags, I03 C layton , Damien, 347 Clemens, Michael, 303 Client-side image maps, 239, 242
components, 242-243 creating, 24 1-257, 466-473 planning, 244-247 Clip media, sound effects, 324-325,327-329 clnet, Shareware.com site, 144 Color background, 63, I0 l , 109-1I0, 203, 2 13, 260 di thering, 15 1-152 offont, 101 , 122- 123 grayscale, 152 images, 150, 151 , 157, 179- 18 1
rnternet Explorer style sheet, I0 I
I 486. Index
mov ies, 284-292, 38 1-382 Super Palette, 236-238, 284-292 tex t, 63 text links, 39 Color codes adding, 129- 136 hex code for, 127, 129- 13 1 Pantoneco lor, 129, 130 RGB color, 123, 129- 136 Color duotone, 152, 232-234 Comment tags, to e mbed style sheet, 99, 105-108 Compression. See File compression. CompuServe, G[F file format patent, 16 1 Coney Island Project Web site, 406-4 17 Confcrencing software, 309 CoolTalk (A pple), 308,309 Cosmo browser, 452 CSS li le, I00 Cunniff, Tom, 303 CU-SceMe (software), 309 CyberCash CyberCoin Wallet (soft ware), 397-398 CyberHub (BlackSun Interactive), 30
D
Data, forms and, 46 1, 465,473-475 Data fork. 293 Data transfer, video, 274-275 De Babeli zer (Eq uilibrium Technologies), 284
bit depth, ISO number of colors, 156 pi xel depth, 186 Super Palette, 147, 157,236-238,284-282 text offset, 170, 192, 193 transparent GIF, 197, 207, 2 19 DeBabe lizer Lite (Equilibrium Technologies), 159 Decompress ion, of shareware from the Web, 145 DeCrescenzo, Frank, 53, 69, 46 1, 476 Dellario, Frank, 402 Dessimoz, Gail , 346 DigiPhone (Eiecu-ic Magic), 308 Digital medi a, 347 Digital versat ile disc (DVD), 347 Director (Macromedia), 337, 38 1 Director lnternet Player (Macromedia), 32, 35,
38 1-390
Director Player (Macromeclia), 364-380 Disguise-0-Rama game, 343-344 Dithering, 151- 152 Domain names, 36-37 Domain Name Service (DNS), 36 Dominian ni, Matt, 402 Download speed, 153, 157-158 Drop shadow, 147, 213-220 Duhan, Matt, 402 Duotones, 152, 232-235 DVD,347 D Web site, 346
E
Eberhardt, Curti s, 338,339-341 ,346,364-366 Elbert, Mark, 147, 175, 178, 188,202 Email addresses
Alawusa, Pej u, 69 Apple Deve loper's Association, 345 Chowka, Peter B., 95 Cipolla, Tom, 249, 299 DeCrescenzo, Frank, 461 Dominianni , Matt, 402 Eberhardt, Curtis, 337, 346 Elbert, Mark, 142 Esparza, Mary, 27, 29 Greenbaum , Jane, 147 Haviland , Beth, 475 Hess, Greg, 299 Hughes, Kevin, 24 1 Kingsley, Chris, 344 Marino, Pau l, 402 McGrew, Steven, 265 Neuwirth, Pauline, 343-344 Reinfurt, David, I Santos, Kleber, 239 Scott, John L., 27.475 Shamson, Alex, 39 1, 393 Tekserve, 6 Thorner, Marc, 265, 406 Embedded fonts, 95, 125 Embedded style sheet, 99, I 02 Empyrean (game), 30,41 The Engine.RDA, 346-347 Environmental designers, 11 EPS file, 18 1 Esparza, Guillermo, 29, 3 1
Esparza, Merry, 27, 29, 31, 32, 39,4 1 Event handlers (script), 377 Express VR browser, 452 External images, 158 External links, NetObjects Fusion, 87
F
Fetch (software), 36, 94, 243, 262-264,484 File compression
audio, 295-296 formats, 145 GJF fi les, 157- 160 GIF patent, I 6 1 JPEG files, 157- 160, 16 1 movies, 38 1, 390 video,267,276-277, 295-296 File compression algorithms, JPEG, 159 File compression formats, 145 File conversion, sound fi les, 326, 336 FileMaker (Ciaris), 473 Filo, Dav id, 127, 137 FLAT files, 293 FlattenMooV (software), 293 Flowcharting, 4 1 Fonts. See also Typography. boldface, 163 chang ing in a headline, 11 6-1 17 color, 10I , 122- 123 embedded fonts, 95, 125 family, 100, 122- 123 HTML,63,67 Internet Explorer style sheet, I 00 italic, 163 OpenType initiative,95,97,99, 106, 107, 11 3,
125 style sheets, 99 TrueType fonts, 102, 105, 108-112, 124- 125 underline, 163 Forn1s, 46 L client-side image map, 466-472 data and, 461, 465,473-475 designing, 467-484 MAILTO URL, 46 1, 473-474, 483-484 Reset button, 482-483 Submit button, 48 1-482 Frame layout, 54-68 Freeloader (software), 9
Index 1487.
Frequency, 296 Fruchter, Jason, 348 Fry, David, 303 FrP, 36 Full bleed images, 13, 206
G
Games, 30, 34 1, 343-344, 348 General Motor's Produc t Line Web page, 345 Ghosting image, 204 GTF animation, 337, 339-340,349-363 GlFB uilder (software), 339, 340, 349, 355-357 GIFConverter (soft ware), 186 GIFfiles,3 1, 157-16 1, 198
download speed, 157- 158 interlaced GIF, 158- 16 1, 186, 2 18 reducing size, 360 transparent G IF, 158- 16 1, 258-26 1 GTFimages, 158-159,247 animation, 337, 339-340,349-363 banding, 158- 159 di rect01y for, 190, 359 linking to, 188- 191 , 278 NetObjects Fusion software, 80 posterization, 160 transparent GIF, 207 GJF Wizard (software), 340, 360-363 Giles, Aaron, 192 Gontier, Frederic, 396 Gottlieb, Sam, 377 Graphics, 147-238. See also Buttons, Images. animation, 337-390 aJTOWS, 39 ban ner graphics, 178- 187 color duotone, 232-235 drop shadow, 147,2 13-23 1 fading an image into the browser background,
202 linking thumbnail GTF to ex ternal JPEG ,
188- 19 1 silhouettes, 207-2 12 tiled background, 204-206, 383-386, 47 1 upload ing file to server, 263 VRML, 39 1-460 wrappi ng tex t around a photo, 192- 197 Grayscale, 152 Green, Andrew, 308
488. j index
Greenbaum, Jane, 147,221 Grouped formatting, text, J02- 103
H
Hale, Tom, 8 Hapke, Matt, 402 Haviland, Beth, 475 Hennessey, Patrick, 293 Hess. Greg, 299, 3 13 Hexadecimal codes, for color, 39, 123, 127, 129-
13 1 Hill, John, 347 Histograms, Photoshop, ISO Home page, 33, 35 HotJava, 35 Hotspots, 3 1, 35, 239, 24 1 .HTM extension, 190 HTML. See also HTML attributes, HTML
documents, HTML tags. acronym, 162 creating 20 navigation contm ls with, 39 locating images on Web page, 165- 177 NetObjects Fusion and , 69, 88 Netscape Navigator reference material, 140-14 1 typographic controls, 47 updates posted to Netscape, 153 World Wide Web Consortium, 95 HTML attributes align=, 14, 64, 169, 173- 175, 177, 192, 195, 197 alink=, 6 1, 132, 133, 136,3 14,3 17 alt=, 60, 6 1, 62 area=, 250-254 autoplay=, 27 1, 272 autostart=, 3 13, 3 17 background=, 13,45-5 1, 136, 166, 208-2 11,
278-283, 3 14, 3 17 base=, 60 base target=, 64, 66, 67 bgcolor=,60-64, 67, 120, 123, 129, 13 1,
133- 136,248-254,255,272,314,3 17, 460 border=, 49-5 1, 60, 62, 249 color=, l 22- 123 cols=, 56, 58, 68, 120, 257 controlle r=, 270, 272 coords=, 250-254, 257 face=, 122- I23 height=, 32 1
hidden, 313,317 href=,39,47-5 1,60, 6 1.,64,67, 123, 190, 19 1,
250-254, 28 1' 3 18, 32 1-323 hspace=, 165, 170-171 , 177, 198- 199 link=, 132, 133, 136,314,3 17 loop=,270,272,314,3 17 margi nheight=. 57, 58 marginwidth=, 57, 58,67 method=, 473 name=, 57, 58, 250-254,256-257 noresize=, 57 , 58 rows=, 56 scro ll=, 57, 58 shape=,250-254,257 size=, 163, 173, 196,200 src=,46-51 ,57,60,62,64,68, 11 3, 167,177,
187, 191, 199-200,208-212,249-254,256, 3 13.3 17, 320, 460 style=, 101-104, 114 target=, 57, 60, 6 1 · text=, 13 1, 136,314,3 17 type=, 102-104, 474 usemap=, 249 vlin k=, 60, 6 1, 132, 133, 136,3 14,3 17 volume=, 313-314,3 17 vspace=, 17 1, 175, 198-1 99 wid th=, 48-5 1,32 1 HTML documents borders, 39 buttons, 14, 39, 42-44 client-side image map, 242-257 column format, 11 9- 121 comment lines, 196 completing, 59 creating,45,59-60, LOS, 166, 187, 189, 194, 198 ending lin k tag, 39, 164 fading an image into browser background, 202-203 GIF animation testing, 360-36 1 linking thumbnail GIF to exernal JPEG, 188-19 1 link text, 38-39 margins, 97, 100 paragraph, 168 style block, 105-107, 108- 109 style sheets, 98-102 styling, 98- 11 8 subheads,68, 102, 104 table for buttons and text links, 42-53
text wrap, 198-200 type size, 195- 196 typography,98- 103, 162 VRML window, 458-460 wrapping tex t around a photo, 192-197 HTMLfiles, 19, 187, 190 cross-platform, 8 save as SimpleText, 45, 55, 62, 63, 66, 105, 114 testing an image, 187 uploading to server, 262-264 viewed onli ne or offline, 7 HTML tags, 34, 162, 163 <A>, 39-40. 52, 60-61 , 67. 123, 189, 282, 3 18,
322,323 <ADDRESS>, 52, 254 <AMG>, 195, 197 <AREA>, 250-254 <B>, 163, 176,255, 272, 282,283 <BASE>, 57 <BLOCKQUOTE>, 97, 100, 171 -172, 176 <BODY>, 13, 39, 45-5 1, 52, 6 1-64, 66, 67,
103-104, 120,1 23, 129,1 31, 133-136, 163, 166, 176,187, 189, 198-201,208-212, 248-256,272,278-283,3 14,315,3 17, 458-460 <BR>, 50-52, 6 1,62,67, 104, L13 , 123, 163, 172, 175,176,255,280-283 <CENTER>, 60, 61 , 163, 172, 248-254, 256, 270,272,3 17, 459, 460 <DL>, 97, 169-170, 17 1, 176,209,278-283, 3 19-321, 323 <EMBED>, 268-272, 3 13-314, 3 L7, 458-461 <FONT>, 63, 67, 95, 122- 123, 163, 173, 176, 196, 198-200, 200 <FONTFACE>, 99 <FORM>, 473-474 <FRAME>, 55, 57, 67 <FRAMESET>, 55-56, 58, 68 <H I>, 11 3, 120, 123, 195 <H2>,68, 102, 104, 11 3, 120, 195, 196, 198-200, 209-211 <H3>, 68, I02, I04, 198-200, 211 <l-16>, 195 <HEAD>, 45-51 , 52, 56, 58, 60-64, 68, 105- 106, 120, 123, 133-136, 176, 187, 189, 198-200, 208-2 1I, 248-254, 256, 272, 278-283, 3 17. 3 19-32 1, 323, 458-460 <HR>, 51,52
Index 1489.
<1-JTML>, 45-5 1, 52, 56, 58-63, 68, I05-106, 120, 123, 133- 136, 176, 187, 189, 198-200, 208-2 11 , 248-254, 256, 272, 278-283,3 17, 3 19-32 1, 323,458-460
<I>, 163, 32 1, 323 <IMG>, 14, 39,46-5 1,53,60 , 6 1, 64, 11 3, 135,
167, 169, 177, 187, 188, 195, 197, 198-20 1, 208-2 11 ' 249-254,256,278-283, 317, 3 18, 320-323, 358, 399 <INPUT>, 474 <MA fLTO>, 254, 256.473-474 <MAP>, 250-254, 256-257 <MULTJCOL>, 95, 11 9- 12 1 <NOBR>, 163 <NOFRAMES>, 55, 58, 68 <P>,68. 104, 163, 168, 175,177, 198- 199, 201, 281 <PRE>, 154, 164 <STYLE>, 102- 104, 106- 111 <TABLE>, 46-51 , 53 <TD>,47,53 <TH>, 47-5 1, 53 <TITLE>, 45-5 1, 53, 56, 58, 60, 6 1, 63, 64, 68, 105- 106, 120, 123, 133- 136, 177, 187, 189, 20 I, 208-2 10, 208-2 1I, 2 12, 248-254, 256, 257,272,278-283,317,458-460 <TR>, 46-5 1, 53 <U>, 163 with classes, I03 nesting, 164. 3 19-320 NetObjects Fusion and, 69, 88 Quark XPress tags compared to, 162, 163 special characters, 163, 196 start ing and ending tags, 164 viewing on a Web site, 3 18 HTTP,36 Hughes, Kevin, 24 1 Hybrid CD-ROM, 8 HyperCard, 34 Hyperlinki ng, 27, 33,40 Hypermedia, 33-34
I
Image maps, 32,239,465. See also Client-side image maps.
Images, 147 animation, 337-390
490. j lnde.x:
bitdepth, 15 1, 155, 157, 182, 185- 186 color, 150, 157, 179-18 1 co lor duotone, 232-235 dithering, 15 1-152 download speed, 153 drop shadow, 147,2 13-231 duotones, 152,232-235 external images, 158 fading an image into browser background,
202-203 file format, 158-161, 186 file nami ng, 152- 153 fi le size, 150, 156 full bleed images, 13 ghosti ng, 204 GIFiiles, 157-16 1 grayscale, I52 inline images, 158 JPEG Iiles, 157- 16 1 lin king thumbnail GIF to external JPEG,
I 88- 191 locating on Web pages, 165-177 resizing, 411 scaling, 478 scanning, 150, 179 silhouettes, 207-2 12 size of, 149, 155- 156, 178 wrapping tex t around a photo, 192-197 Images GIF, 158-159 Inflat ion distance, 420 InUne graphics links, 27, 39 Tnline images, 158 Inlinestyletags,99, 101, I 15 Insignia Solutions, Win95 emulation program, 6 Interactive movie, 364-380 Interlaced GIF, 158- 16 1, 186,218 Internet Ass istant (Microsoft), 209 Internet Channel, 475 Internet Explorer (Microsoft), 95 client-side image maps, 253 1-JTML tags specific for, 158 style sheets, 95, 97, 99- 10 I Internet Phone (Vocaltec), 3 1 Internet Protocol (Microsoft), 35 Internet service providers (TSPs), 474-475 Internet telephone, 3 I, 308 InterNJC, 36-37 Inverted perspective, 30
IUMA site, 305-306
J
Joseph, Regina, 347 JPEG,31, 157-160,161
downl oading, 342 images, 159, 190, 247, 342 linking thumbnail GIF toJPEG file, 188- J91 saving, 159
K
Keenan, Rob, 347 Keyboard Maga zine Web site, 322 KPT Bryce (software), 364
L
Lerner, David, 6 Linear perspective, 30 Linear slide shows, 37-38 Line-height, Internet Explorer style sheet, I0 I Lingo (software), 365, 373-377 Linked style sheet, 99 Linking. See Hyper! inking. Lin ks
to movie, 278-282 to sound files, 3 18-323 Link text, 38-39 Live3D (software), 402, 405, 456-467 Li veAudio, Netscape, 299. 302, 3 10, 3 13 Livescript (software), 342 Long distance calling, 31, 308 Loops, animation, 356, 377-378 Lord, Robert, 305 LZW patent, 16 I
M
Mac, PC cards for, 5-6 Mac Binary fi le, 145,263 MacLink!Plus (Dataviz), 208 Macromedia, 30, 32 Macromedia Directory Lingo Workshop
(Thompson and Gottlieb), 377 MAlLTO URL, 52,64
forms, 461,473-474, 483-484
HTML tags, 254,256 Marelli, Charl es, 30 I Margins, 97, 100, 10 1 Marino, Paul, 402 Markowitz, Gary, 34 1 Marr, Greg, I51 , 284, 290 Matthews, Jim, 36,484 McGrew, Charles, 307 McGrew, Steven, 265, 276 Memex system, 34 MetaPiay Web site, 402 Microsoft
browser " war" with Netscape, 1 OpenType initiative, 95, 99, I06, I07, 113, 125 TrueType fonts, I02, I05, I08-112, 124- 125 MIDI files. 3 I0, 322 acronym, 3 10 for downloading, 3 17 Mil ktruck (Traveling Software), 9 Mitchell , Kevin, 186 Mobius Gallery s ite, 29-32,42 Molcha n, Rob, 347 Mom 's Truck Stop Web s ite, 402-405 Moos, 402, 405 Mona! Kombat (game), 346 Mosaic (Spyglass), client-side image map, 253 Motion Pi cture Experts Group. See MPEG. Movie Analysis Tool (Adobe Premiere), 265,
273-275 Movies
animation, 345-348, 364-380 characteristics, 274-275 color, 284-292, 38 1-382 create a mov ie proj ector, 379-38 I performance specs, 273-274 photography, 267-298 video compressor, 292 MP2 1iles, 30 5, 322 MPEG files, 269,277,305 MUDs (multi user domains), 40 2 Multi-party conferencing, 309 M usic. See also Sound . clip music mi xed wi th sound effects, 327 downloading on Netscape, 3 11 -3 12 interesting lin ks, 322-323 MTDI files, 3 10 royalty-free, 327
Index 1491.
N
Navigatio n, 27-68 2 D, 27, 34-35, 37-39 3D, 27,30-32, 35,40 buttons, HTML table to hold, 42-53 flowcharting, 4 1 frame layout, 54-68 hypermedia, 33-34 image maps, 32 interactive movies, 374 storyboarding, 41 textlinks, HTML table to hold, 42-53 URLs, 35-37 VRML file, 453
Nel son, Ted, 34 Nesting tags, 164, 3 19-320 Net Attache Li ght (Ty mpani Software), 9 NetObjects Fusion (software), 69, 7 1, 2 10, 466
<MULTTCOL> tag, 95, I 19- 12 1 creating client-side image map, 466-473 creating Web pages with, 76-88 design a form, 476-484 hardware and software requirements, 7 1 HTML and, 69, 88 publishing the site, 92-94 selecting browser for, 75 staging the site, 88-90 starting, 72-75 testing the site, 90-9 1 NetPhone, 308 Netscape, 307 background, 45, 202-2 12 background samples, 133- 135 bookmark, 307 browser " war" with Microsoft, I client-side image map, 253 Director Internet Player and, 38 1 HTML tags viewed, 3 18 HTM L updates posted, 153 images, 149 LivcAudio, 299, 302, 3 10, 3 13 music files, 3 11 -3 12 text wrap, 198-200 ti ps, 13, 14 using, 305 Netscape features active link , 39 Body Background tag, 45
492. ! Index
inline images as links, 39 link text, 38-39 tables, 42 visited link, 39 Netscape Navigator, 140- 141 HTML tags specific for, 158 style sheets, 95, 97, 99 Network anchors. See Anchors. Neuwirth, Pauline, 343 Node poi nters, 40 NOD files, 73 Number entiti es, 163 NYVRMLSIG, 6 1,395,396, 406,408
0
O'Donnell , Dan, 396-397 O' Donnell, Matt, 396-397 Offline browsers, I , 9 Online Color Editor (BBS), 122, 123, 129- 136,
458 Online publications, 3 OpenType initiative, 95, 99, 106, 107, 11 3, 125 Optical illusion art, 30 Orange Micro, PC enabling hardware, 5-6 Ostroy, Alex, 347
p
Page links, NetObjects Fusion software, 87 Pai nte r 4.0, drop shadow, 147, 22 1-23 1 Pantonecolor,3 9, 129, 130 Paradig m, for Web site, 17 Patterson, Jeff, 305 Pauling, Linus, 95, 97- 100 PC cards, for Macs, 5-6 Pesce, Mark, 39 1, 393, 406 Phone lin ks, 3 1, 308 PhotoGIF (BoxTop Software), 193, 258, 26 1 Photographs. See [mages. Photoshop (so ft ware), 364,409
animation, 337, 339 banner graphics, 178- 185 blue duotone with, 232-235 color codes, 129- 130 cropping button graphics, 42-44 drop shadow, 2 13-220, 225 GIF animation, 349-354
gradient tool, 202 histograms, 150 image quality, 150 Info palette, 244 palettes, 15 1, 244 PICT image, 178 pixel depth, 217-2 18 saving image, 188 text offset, 170, 192- 193 tex t wrap, 192- 197, 198 ti led background, 47 1 transparent GIF, 258 wrappi ng tex t around photo, 192-197 Piguet, Yves, 339, 355 Pixels, 149, 155 Planning Web pages, 26 concept development, 17 development team, 16- I7 flowchart ing, 4 1 graphic design, 2 1 Reuters Web site as model, I I-15, 23-25 schematic development, 18-19 schematic prototype, 20-21 storyboarding, 4 1 wayfinding, I I , 22-25 Plug- ins, 140, 265, 269-27 1 Posterization, 160 Print publications, 3 augmented by CO-ROMs, 7-8 PC Novice, 3 T!te Net, 3, 7-8 Web Techniques, 3 Webweek, 3 Pueblo (Chaco), 402-404
Q
Quark XPress (software), 162- 163, 165 QuickTime (Apple), 277,297
files, 293, 294-296 plug-ins, 265, 269-271 QuickTime VR (App le), 3 1-32,40,282,345 QuickTime VR Player, 345
R
Racz, Michael, 346 RA Iiles, 322
Ragu Web site, 303 Rasteri zed type, 182 Razorsnails (game), 348 Real Audio (Progressive Technologies), 304, 322 Realtime voice communication, 31 Redlitz, Sean, 34 1 Redundancy, in waylinding, 25 Reflector (software), 309 Reinfurt, David, I , I 1-12 Reply Corp., PC cards, 6 Resampling, sound files, 333-335 Resource fork, 293, 297 Re ute rs
Business Alert, 13 Business Briefi ng, 13 Business Information Products site, 13- 15, 17,
19,23,25 News Machine site, 12- 13, 17- 19, 23-25 RGB color, 123, 129- 136, 151 Ricci, Albe1to, 299, 328, 330 Rosenthal, Larry, 6 1, 62, 65, 348,396, 397, 406,
408 Rubber bands, 40
s
Santos, Kleber, 239, 24 1 Scaling, images, 478 Scanning, 150, 179 Schematic prototype, 20-2 1 SciFi Channel Web site, 34 1 Scon, John L., 27, 54, 55 , 474,475 Search engines, 127
extending the search beyond Yahoo!, 139 Yahoo!, 127, 137- 139 Selamohlu, Handan, 98-99 Selck, Brandee Amber, 305 Shaders, 364 Shah, Vineel, 347 Shamson, Alex, 64, 39 1, 406, 4 18, 423, 438, 452,
456, 457 Shareware, 144- 145 Shockwave (software), 337, 34 1-348.38 1 Sil houettes, 207-220 SimpleText, 45, 55,62,63,66, 105, 11 4, 166, 177,
194,208,243 Simprov, 402-405 Site Mill (Adobe), 10
Index J493.
Slappers, 53 S lappers Web site, 463-465 Smart links, NetObjects Fusion, 87 Smith, David, 391 Smith, Derrick, 53 Smith, Sharleen, 34 1 SoftWindows (Insignia), 6 Sound
background sound, 3 13-323 clip media, 324-326, 327-329 data rate, 275 file conversion, 326, 336 file formats, 322 file optimization, 333 Internet telephone, 31 , 308-309 links to, 318-323 MIDI files, 3JO recording and mi xing, 330-332 resampling and downsampling, 333-335 sample Web sites, 301-307 streaming, 322 video conferencing, 309 SoundApp (software), 303, 326, 336 SoundEdit (software), 303 SoundEffects (software), 299, 324,327-332 Sound files, 322 compression, 295-296 optimizati on, 333 resampling, 333-335 SoundMachine (software), 325 SoundMaker (software), 335 Spatial problem solving, in wayfinding, 23 Special characters, 163, 196 Spike Lee's Web site, 4 Splash screen, 30, 178 Starbase C3 Web site, 396-40 I Storyboarding, 41 Strata Studio (software), 365 Strata Studio Pro (software), 3 1, 367 Streaming audio, 304, 322 Streaming video, 265, 267-268 Stufflt Expander (software), 145 Style sheets adding s tyle sheet properties to a tag, lO l-102 comment tag, 99, I05-108 defined, 98 embedded, 99, 102 FAQ, 98-100
494. j tnde.x
fonts, 99 inlinestyletags,99, 101,115 Internet Explorer, 95, 97, 99-10 I linked, 99 Netscape Navigator, 95, 97,99 properties, I 00-101 W3C proposal, 95, 98, 107 Sumex-Aim mirror sites ftp://ftp.amug.org/pub/mirrors/info-mac, 37 ftp ://mirror.a pple.com/mirrors /
lnfo-Mac.Archive/, 36 gopher;//gopher.cnuce.cnr.it/J I/pub/info-mac,
36 http://mirror.apple.com, 36 Surfbot 3.0 (Surllogic LLC), 9
T
Tables, formatting form as, 474 Tango for FileMaker (Everyware Development),
473 Tekserve, 6 Telephone links, 31,308 Text
adding to Web page, 469,479 in client-side image maps, 253-254 color, 63 formatting in columns, 119- 12 1 grouped formatting, I 02-103 Internet Explorer style sheet properties, J00- 10 I styling, 98- 11 8 wrapping text around a photo, 192-197 Text links, 27,38-39 color, 39 HTML table to hold, 42-53 NetObjects Fusion software, 85-88 Text offset, 170, 192-193 Text processor, 243 Text wrap, J98-200 Theurer, David, 284 Thompson, John (J.T.), 377 Thorner, Marc, 265, 396,406 tHUNK, 6 1, 348 tHUNKWORLD VRML, 65 Tiled background, 204-206, 383-386,471 Transparency (software), 192, J93, 207, 218 Transparent GfF, 158-161 , 197,207, 258-261 Traveling Software, Milktmck, 9
TrueType fonts, I02, I05, I 08- 112, J24-125 TrueType Open Vers ion 2, I06 Two-dimensional HTML. 34-35 Two Twelve Associates, I I Typography. See also Fonts.
add ing to Web pages, I03 HTML font sizes, 195. 196 rasterized. 182 style sheets. 98- 102 TrueType fon ts, I 02, I 05, I 08- 11 2, 124-125
u
Unisys, 16 1 URL, 133
delined,35 directory and tile name information, 37 domain name information, 36-37 function, 35,40 protocol in formation, 35-36 replacing file name in Netscape URL field, 134 submitting to Yahoo!, 142- 143 URLs ftp://flp.amug.org/pub/m irrors/info-mac, 37 ftp:// ftp . microso ft. c o m/deve lo p r/d rg /tru e type,
11 2 http://cu-secme.edu/#GET, 309 http://d rea mcatchersweb.com/scri pts, 473 http://goliath. wpine.com/cu-seeme.html, 309 http://home.netscape.com/assistlne t_sites/
bg/backgrounds. hrm l, 133, 135 http://home.netscapc.com/comprod/
mi rror/i ndex. html, 302 http://horne. netscapc.com/cornprod/
products/navigato r/version_2.0/plugi ns/ aud io-video. html, 304 htt p://ho me . netscape.co m/comprod/ products /navigator/vers io n_ 3 . 0 / communication/cooltalk/index.html. 309 hup://info. fuw.edu. pl/mu ltimedia/ sounds/animals, 324 http://mansion. Lhepalace.corn/cgi-bi n/ directory.pl, 3 13 http://members.aol.com/a lawusa/intro.html, 69, 88 http://members .aol.co mlflatsti c ks/s plash .htrnl , 46 1
http://rnembers.ao l.co m/ i f orward/imagcl .h trnl. 147
http://members.aol.com/mediumcool, 95, 98 http://qtvr.qu ickti me.apple.com/arch ivc/
index.htmJ, 345 http://uccni tk.edu.tw/htrn l.courses/colorEditor
.html , 458 http://www.acclaimnation.com/D, 346 http://www.adobe.corn, I 0 http://www.altavista.d ig itaJ.com, 458 http://www.altdotcoffee.com, 27 http://www.backweb.com, 9 http://www.bbsinc.com, J23 http://www.bbs in c.cornlbbs-
cgi-bin/colorEditor.egi, 129 http://www.benjerry.com/fun/bj-hairy.html, 344 http://w.,vw.blackame ricaonline.com/
bus/index.htm l, 4 http://www.b lacksun.com, 30 http://www.ceLObjects.com, 210 http://www.chaco.com, 403 http://www.claris.com/ products/claris/
clarispagc20/clarispage20.html), 20 I http://www.cube3.com/downJoads/
NYV RMLSIG , 40 8 http://www.c ube3.co m/starbase.htm, 396 http://www.cybcrcash.com, 397, 398 http://www.datav iz.com, 9 http://www. datav iz.co m/Upgrade/upgm lp_
ho me.htm l, 208 http://www.eat.com/index.html. 303 http://www.eeb.tue. nl/midi/index.html, 299, 3 10 http://www.e magic.com, 3 1, 308 http://www.equil.com., 155 http://www.ffg.com, 9 http://www. fi rstfloor.com , 9 http://www.FOOTAGE.net:2900, 267,269,284 http://www.freeloader.com, 9 http://www.geoci ties.cornl-thecastlc, 3 13 http://www.gm .co m/ s ho c k w a v /s pin/eaOO. htm ,
345 http://www.hotwired.com, 239 http://www.incontexr.com, I0 http://www.insigni a.com, 9 http://www.internic.net/ds, 36, 37 http://www.iuma.com, 35, 239, 305 http://www.iworld.com. 3 http://www.keyboardmag.com, 322
Index 1495.
http://www.learned.com/-apex/imagemap. html, 257
http://www.marl owpub.com/Marlowe/ d isguise2. htm l, 343
http://www. mcp.com/gene raJ/news7/chap2 .html, 39 1
http://www/McdiaC ity.com/-erweb, 277 http://www.me taplay.com, 402 http://www.microsoft.com/gallery, 10 I, 158 http://www.microsoft.com/ga llery/files/
styles/defau lt. htm, 99 http://www.microsoft.com/ msexcel/
internetlia, 209 http://www.microsofr.com/truetype/faq/faq8
.hun, 105 http://www.microsoft.co m/truetype/
fontpack/defa ult.ht m, I02 http://www. microsoft.com/truetype/
iexplor/quick. htm, I03 http://www.microsoft.com/word/fs_ wd .htm, 209 http://www. mi c roso ft. c o m/ w orksho p /
author/howto/css-f.htm, 98-99, 100 http ://www. m icrosoft.co m/ w orksho p /
design/desgen/ss/css-des. htm, I00 http://www. midi wcb.com, 317 http://www.mis. nccu.cdu.tw/-bibo/lab/
client_side_image_map. htm l, 2 10, 257 http://www. netobjects.com, 7 1, 463 http://www.netscape.com, 153 http://www. new-kewl.com/curtiscape, 337, 339 http ://www. new-kcw l.corn/cu rtisca pe/
bump. htm l, 340 http://www.new-kewl.com/curtiscape/
mai n.html, 339 http://www.orangemicro. inter.net, 6 http://www.pacilic-coast.com, 160, 299, 324 http://www.quickTime.apple.com, 269 http://www.q ui c k Time .apple.co m/ s w /
browscrconfig.html, 269 http://www.quickTimc.apple.com/sw/
qtmac.html , 308 http://www.raspberryhi ll.com/gifw izard.html,
340,360 http://www.realaudi o.com, 304 http://www.reply.com, 6 http://www.reutcrs.com, 12, 13 http://www.rlspace.com, 282 http://www.rutgers.edu/x-fi les. html, 307
496. j Index
http://www.scifi.com, 34 1 http://www.shareware.com, 144 http://www.sony.com, 239 http://www.submi t-i t.com, 142 http://www.submit-it.pennali nk.com/submit-it,
220 http://www.surOogic.com, 9 http://www. thearriva l.com, 342 http://www.thenet-usa.com, 3, 7 http://www.thepalace.com, 314 http://www. Lhespot.com, 239 http://www.thunk.com, 348 http://www.travsoft.com, 9 http://www.tympani.com, 9 http://www.ubl.com, 323 http://www. use rs. in terport.n etlmerry/
mobius.html , 27, 29 http://www.v ivo.com, 267 http://www. vnni ll.com, 39 1, 394, 452,456 http://www.vnnill.com/Shopping.htm, 64 http://www. w3 .o rg /hypertex LIWW WI
Arenalsty le.html, 47 http ://www. w3 .org /pu b/WWW[ f R J
WD-css l .html, 98 http://www. webtv.net, 4 http://www.webweek.com, 3 http://www.yahoo.com, 36, 137, 142,307 http://www.zdnet.com/intweek, 3 http://www.zima.com, 301 User group SIGs, 4 User's Guide to Style Sheets, A (Selamohlu), 98
v
Van Halen Web site, 307, 3 18 VBScript, I Vellu m, 279 VidEdit (software), 296 Video
data tra nsfe r, 274, 275 strea ming video, 265, 267-268 Video compression, 267, 276-277, 292, 295-296 Vi deo conferencing, 309 Video for Wi ndows (software), 294 Video for Windows Converter (CoSA), 293 Vi11ua l Reality Modeling Language. See VRML. Virtua l reali ty Web sites Coney Island project, 406-4 17
Mom 's Truck Stop, 402-405 Starbase C3, 396-40 I Yirtus Voyager browser, 39 1,452 Yirtus Walkthrough Pro (soft ware), 3 1, 408-4 17,
41 8 Yistographer Lite (RealSpace), 282
v rv fi le, 268
VivoActive Player, 267 VivoActive Producer (software), 265, 267-268 Voice communication, 3 1, 308 YRML, 30-3 1, 35, 39 1-460
creating VR1vtl. model , 4 18-45 1 e mbedding a YRML window in a Web page ,
458-460 hand coding, 454 network anchors, 40 PerspectiveCamera, 405 Web sites, 396-417 WRL Iiles, 4 18,45 1-457 YRML Archi tectural Group, 395 YRML files, hand coding, 39 1 YRMSLIG,65
w
W3C (World Wide Web Consortium), sty le sheet proposal, 95, 98, 107
Walkabout 3D World Browser (Duet Development Corp.), 30, 3 1, 40
Walkt hrough environment, 3 1 Wallpaper effect, J33, 204-205 WAY fi les, 299, 302,307,322,326,336 Way finding
cognitive mapping, 22 co lor, 25 conditions, 23-24 decision making, 23, 24 defined, II , 22-23 design process, 24-25 graphic landmarks, 25 iteration , 25 redundancy, 25 spatial problem solvi ng, 23 WebA nalyzer (lnContext), I0 Web Buddy (Dataviz), 9 Web pages banne r graphics, 178-187 color codes, 123, 129-1 36
drop shadow, 147 , 2 13-23 1 fading an image in to browser background,
202-203 forms, 46 1-484 home page, 33, 35 HTML for des ign. See [mages. MAfLTO URL, 52, 64, 254 mov ies, 267-298 NetObj ects Fusion for design. See NetObjects
Fusion. Pantone color, converting, 39 planning. See Plann ing Web pages. signature area, 5 I, 52, 254 silhouettes, 207-2 12 sound, 3 13-323 sty le sheets, 98- 102 text, 469-470, 479 text wrap, 198-200 tiled backgrou nd, 204-206, 383-386,47 1 type size, 195, 196 typography, 98- 103 uploading to server, 262-264 video, 265-297 YRM L windows, 458-460 Web site analysis so ft ware, 10 Web site development. See Planning. Web sites browsers. See Browsers. flowcharting, 4 1 frame layout, 54-68 free submittal service, 220 home page, 33, 35 image maps, 32.239-264 images. See Images. navigation. See Navigati on. with sound , 299, 30 1-336 storyboarding, 4 1 submitting, free service, 220 Web trends CD-ROM s augmenting a Web site, 7-8 emulation software, 6 games, 30 Internet magazines for, 3 offl ine browsing, I, 9 PC cards, 5-6 PC-related, I, 4 user groups, 3 Web site analys is software, lO
Index 1497.
Webtv,4 Webtv,4 Web Whacker (Forefront), 9 Welch, Terry, 16 1 Windows95 software, use on Mac platform, 4, 5-6 Withagen, Hei ni, 299 World Wide Web Consortium (W3C), 95, 98, 107 WRL fi le, 418, 451-457 WSmart Bookmarks (First Floor), 9
y
Yahoo! search techniques, 137-139 URL submission process, 127, 142- 143
Yang, Jcrry, 127, 137
z
Zima Web site, 301-302
498. j lndex
-
I
·--------- -- - - -- - - - - - - -· - - - -
--.::~---·
CD ROM The companion CD-ROM
,- - . A provides the best desiqn
1._ '~ ~: tools, artwork samples,
..U.DED multimedia files, and other
INCL
resources that will help you
create and desiqn Web
paqes quickly.
Liven up your Web pages with 3D graphics, sound, movies, and more!
USA $39.99 CANADA $55.99
2nd Edition Expanded new edition! Learn hundreds of Web page design techniques!
This is the only book that takes you step-by-step through real projects designed by talented new media artists.
Internet design experts share their design secrets and art files (look for art files on the companion CD-ROM by artist's last name).
This ·expanded new edition includes Photoshop, Illustrator, and DeBabellzer tricks from the first edition, plus:
· Tips on how to watch Web and Internet trends, including Webtv, Web site analysis software, publishing your Web site offline on a CD-ROM, and options for run ning Windows 95 software on a Macintosh
· Style sheets and new HTML tags found in the new Web browsers
· Netobjects Fusions, a hot new Web page development tool for graphic designers who do not want to use HTML tags (NetObj ects Fusion is from Net Objects, Inc., founded by Rae Technology and Studio Archetype-formerly Clement Mok Design)
· A technique to add background sound to your Web page, including MIDI sounds
· Steps for creating frames
· GIF animation and tips on reducing frame bit depth at the Raspberry Hill Web site
· New easy-to-implement client-side image maps
· Detai ls on how to create a VRML model in a 3D software application
and how to make a change to a ''ou· ~:·- ··-'-- a word processor
125-AAB-253
· A method to create compresse fi1·'~[!]~ files usi_nq
VivoActive Producer · A short-cut for creating Web-pi
L~.:J~~~1 · ·
~
'·:~using Fr
6
Design Painter
l·'t r.: . :J,
[!] ~ 1 ~~t/Web D~~~
I £Q.~Q.l;,I~~~~~~-9.2K~
14455 N. Hayden Road, Suite 220
Scottsdale, AZ 85260 USA
(602) 483-0192
http://www.coriolis.com
I SBN 1- 5 7610 - 108 · 8
53999
ScanSnap Manager #S510M Adobe Acrobat 10.1.12 Paper Capture Plug-in