News ' 0 M i n e < / s t r o n g > The < s t r o n g > B I G < / s t r o n g > news i s I ' m w r i t i n g a book on Web D e s i g n < / s t r o n g > < b r > f o r New R i d e r s P u b l i s h e r s < / s t r o n g > . H e l p me o u t , i f you want! Here's a test using the < FONT tag. This is a JPEG image by Rand Worrell. < t a b l e border> < t a b l e border=10> Here's a standard h o r i z o n t a l r u l e : H e r e ' s one t h a t ' s been t o l d t o be 10 p i x e l s w i d e : H e r e ' s one t h a t ' s been t o l d t o be 10 p i x e l s f a t : < h r size=10> H e r e ' s one t h a t ' s been t o l d t o be 10 p i x e l s h i g h and 10 p i x e l s w i d e : H e r e ' s one t h a t ' s been told t o a l i g n l e f t and be 10 p i x e l s h i g h and 10 p i x e l s wide: < h r a l i g n = l e f t s i z e = l 0 width=10> H e r e ' s one t h a t ' s been t o l d t o n o t have s h a d i n g ! < h r no shade> active link.. < L I > The first thinga-dingy < L I B The second thinga-dingy < L I > The third thinga-dingy F i r s t Category The f i r s t t h i n g a - d i n g y Second Category The second t h i n g a - d i n g y T h i r d Category The second t h i n g a - d i n g y < ID b < L I type=A> < L I type=A> < L I type=A> < L I type=a> < L I type=a> < L I type=a> < L I type=I> < L I type=I> < L I type=I> Please S t o p ! < / a > Blink ON> Please S t o p ! < / a > < / a > H e r e ’ s some r e g u l a r body t e x t . I f I want t o < f o n t s i z e = 5 > change f o n t s i z e s i n t h e m i d d l e o f my sentence, < / f o n t > i t would l o o k l i k e t h i s . Ic o u l d a l s o use p r e - f o r m a t t e d t e x t , l i k e t h i s . Then o f c o u r s e , I c o u l d always use an image o f t y p e i n s t e a d : When life gives you a hundred reasons to cry, show life that you have a thousand reasons to smile © Copyright 2015 - 2024 PDFFOX.COM - All rights reserved.
Send l i n k s o f pages you l i k e , o r q u e s t i o n s you wanna g e t answered.
Software This book assumes t h a t you already work with imaging software. Adobe's Photoshop is an industry standard among design professionals. Photoshop is available for Macs, PCs, Unix, and Sun Workstations. Photoshop is just a tool. It's a damn fine one, but in the hands of a great artist it will produce great art and in the hands of a mediocre artist it will produce mediocre art. It is not a replacement for human creativity, skill, or understanding. I've seen great sites that were created in shareware imaging programs, or imaging software that was a lot less complex and expensive than Photoshop. It would be great to have time and space to address every software package that offered useful tools for Web design, but it's not possible. Therefore, this book assumes that you own Photoshop and have an understanding of the basic principles of how to use Photoshop. If you don't, skip those parts, or see if you can understand them and figure out how to do the same exercise in your imaging program. Or, get Photoshop! Most people who get Photoshop are quite happy about it. It's a joy to work with software that can do as many things as this remarkable product. The truth is, almost 100 percent of all well-designed sites use Photoshop to some degree. Photoshop books are ubiquitous in computer sections of bookstores. I recommend you invest in one or more if you're going to be a serious Web designer.
UII
-fl
Designing W e b Graphics
I’ve tried to stick to software packages in this book that are cross-platform between Macs and PCs. Here’s a list of software that’s discussed in the book: II Photoshop 3.0. Imaging software for creating graphics and photographic image processing.
II Premiere 4.0. Movie and sound software for creating movie and audio files. II Painter 3. I. Imaging software for graphics and photographic image processing.
II Illustrator 5. I for Macs, Illustrator 4.0 for Windows. Excellent type and illustration tools.
II Netscape Navigator I. I N and 2.0. Recommended browser for testing your Web pages.
We also have tons of helper applications and utilities on the CD-ROM. You will find cross-platform tools that cover the following features: II Transparent GlFs II Progressive JPEGs
II Server Push II Hexadecimal Calculations II Pattern-Making
II Typography
II Browsers and Plug-ins II Palettes and CLUTs II File Conversion II Quicktime Flattening II Codecs
Hardware The ideal set-up for a Web design studio would be to own a Mac, PC, Sun, and SGI, have a full video and sound studio, and own all the imaging, video, sound, and authoring software in the universe. No one will be quite so lucky, but that gives you an idea of how limitless the possibilities are for equipment acquisitions!
So, here are some very general guidelines. Macs and PCs are going to have the widest range of Web-design tools. Most of your Web audience will be on Macs or PCs. So, if you’re lucky enough to work on a higher-end platform,
Introduction
you might consider getting one of these lower-end platforms to author Web pages on for several reasons. One, most of your audience will be on a Mac or PC, and this will give you a reality checkpoint. Two, there are more Web authoring tools on Macs and PCs than on other computer platforms. If you are like most of us, you have limited budgets and time. This system will offer great versatility to the novice or professional Web designer:
Color Mac or PC 20 MB of RAM or more 24-bit color card 16-bit sound card 13" or bigger monitor 1 gigabyte hard drive CD-ROM 2x speed or faster My personal setup is much more opulent. Understand that I've been doing digital design for 11 years and make my living this way. Plus, I do a lot of video work on the same system, so it's a little more embellished than what you'd necessarily need for your average Web design studio. Power PC 7 I00/80
Pentium I I O MHz
Internal 2x CD-ROM
Internal 4x CD-ROM
24-bit 17" monitor
15" monitor
40 MB RAM
I 6 MB RAM
Numerous Hard drives (over 3 gigs total)
I gig internal Hard Drive
200 MB Removable Syquest Drive
24-bit color card
ISDN 3Com Impact Rate Converter Global VillageTeleport Platinum 28.8 modem
US Robotics 28.8 modem
EverythingWill Change Like most first-time authors, this book was an intense undertaking and consumed most of my waking hours. It was especially difficult, I think, because the Web itself is always growing and evolving. It's hard to ever feel finished or complete when your subject matter is changing on an almost hourly basis.
Designing Web Graphics
I will share a little personal philosophy about this: I recently had someone who made his living through digital photography remark to me that he was not looking forward to the next version of his primary software application because he didn’t want to have to learn it all over again. I told him that I felt exactly the opposite-when a new version of a favorite software program is released I cannot wait to tear into it and try every new feature until I’ve examined them all.
Software by nature is fluid. It will always change. That is its purpose! If it stayed the same, we would all complain. If the Web stays the same we shall all go mad! I want to see the Web get better. I want to see all software improve and provide tools for self-expression that are faster, easier, and cheaper for everyone. If you plan to make your living doing anything in the digital arts, changing software is a fact you will not only have to accept, but embrace. It makes life rather interesting however, especially when you’re trying to write a book about it! As I was finishing this book, there were new announcements occurring on a daily basis. Netscape Navigator 2.0 was just announced, which promises to support many new partnerships. Microsoft’s Web Explorer was looking to compete neck and neck with Netscape’s feature set. Who knows, in this race to be better and bigger, what new announcement will be in effect tomorrow.
That’s why having a Web-site-based companion to this book is critical. My h o m e page, entitled “Lynda’s Homegurrrl Page” can be found at http://www.lynda.com. I offer it to you as a resource to find new information and links to other interesting places. Even with changing browsers, HTML, and future options that we cannot even imagine, there are certain principles that stay the same. The intent of this book was to focus on image preparation and design, not HTML. Making images small will be an issue for a long time to come. Working with limited palettes and tools is a reality that’s here for the time being. Knowing how to create media, regardless of the platform or application, will be a part of Web design forever.
Browser He1I! Web browsers are the adversaries of all Web designers. What is a browser, and what does it do? It’s software that reads Web pages and displays them for you. There are many different World Wide Web browsers, and no two are alike. Unfortunately, this means t h a t different browsers interpret the visual content of a Web page differently. If you are a designer, this means you have the maddening task of designing a presentation that is subject to change according to which browser its being viewed from. Why d o browsers interpret the pages differentlyshouldn’t there be fixed standards? The browser interprets HTML (Hypertext Markup Language) code, which is the type of programming required to author Web pages. HTML uses “tags” for including links, graphics, and other media on a Web page.
-=
Designing W e b Graphics
HTML was created as an attempt to be a universally accepted, cross-platform standard language for displaying information, text, and visuals on the Web. Standards usually involve a standards committee, and committees often take a long time to agree on what they will officially support. HTML of the old days allowed for one-color text, text that was left-justified with paragraph breaks, left-justified images, and little else. This understandably created frustration among designers and Web browser developers, who wanted to see the Web evolve faster than the time it took outside committees to make formal decisions. Entrepreneurial developers (primarily Netscape) took matters into their own hands and made Web browsers that supported more options, without the blessings or participation of the HTML standards committee. New HTML code was developed that was supported only on proprietary browser systems, starting with Netscape and followed by others. This created outrage among some, and an outpouring of support from others who created an avalanche of Web pages that included these new, unofficial HTML features. As designers, it is not surprising that we want as many design features for the Web as we have access to in our desktop programs. HTML today lets us do a lot more than it used to, and we are grateful for every small morsel of design flexibility newly thrown our way. The downside is that some of these new design options have created a more confusing Web design environment. HTML has gone from being a universally accepted, cross-platform language to an every-browser-for-its-ownkind of free-for-all.
DecidingWhich Browser to CreateYour Site For What can a conscientious Web designer do about Browser Hell? You have some decisions to make. Do you go for the lowest common denominator and forget about layout, colors, font sizes, backgrounds, and all the other advanced features this book discusses? Or, do you push design to its fullest and force your viewers to use a specific browser, at the risk of excluding some? This personal decision will certainly depend on the content of your Web site. Some Web sites are appropriate in dull text only, or with limited graphics, whereas others are not. You and/or your client get to choose. One solution that more and more Web designers are embracing is to set up multiple Web pages on sites that are maximized for which browser they are being viewed from. This involves creating duplicate sets of pages that are optimized for advanced browsers and limited browsers, so Web pages look like they were intended to when viewed under differing browser conditions.
~~
Browser Hell!
m--
Browser Comparison I’ve been curious to see a visual browser comparison for some time. It’s one thing to hear that pages look different on different browsers, but it is better to see how different they are. Pictures at times can say much more than words. It should be noted that browser versions change-usually for the better! After this chart is published, it is guaranteed to go out of date, as browser versions often change and improve. If you are designing for a specific browser, be sure to check to see if the chart here represents the latest version. I’ve included the browser version numbers next to each browser name for this purpose. If you want to search for current browser software, there are great search engines (programs that search through LINK ="017edl" Vlink="a614e3"> Here's a test with a colored background, text and a LINK color. and a visited link color
Here's a test using the < FONT tag.
Here's a test using the < H1> tag. Here's a test using the < H2> tag. Here's a test using the < H3> tag. Here's a test using the < H4> tag. Here's a test using the < H5> tag.
SIZE=""+1"> SIZE=""+2"> SIZE=""+3"> SIZE=""+4">
BG Patterns,TGIFs, and Borders This HTML page was generated to examine whether the browser supported pattern tiles (see Chapter 6), transparent GIFs (see Chapter S), border control on image links (see Chapter 14), and JPEGs (see Chapter 3). Two graphics were used. One was the pattern element, which was 100x100 pixels at 72 dpi, saved in Index Color mode as a GifS9a. It was saved with the file name pat.gif. The other graphic was a JPEG image by 3D computer graphics wizard Rand Worrell, and was saved in RGB 24-bit color at medium quality as a JPEG and is titled rand.jpg. Here's the code that created the page: BG Patterns, TGIFS & Borders < / h e a d > < / a >
m--
w -
D e s i g n i n g W e b Graphics
should be invisible.
Browser Hell!
Tables and Horizontal Rules This HTML page was designed to show whether the browser supported tables and custom horizontal rules. No graphics were used. The following is the code that generates this page: < t i t l e > T a b l e s and h o r i z o n t a l r u l e s < / t i t l e > Here's a t a b l e w i t h t h e d e f a u l t border Here's a t a b l e w i t h a padding o f 10
r
‘-a
Designing W e b Graphics
Summary Now you’ve seen for yourself how different browsers can be from one another. I believe it’s always better to be informed than ignorant, so you’ve been duly warned about the existence of Browser Hell. You’ll have to decide, based on what audience you’re targeting, which browser to design for and which features to include on your pages. Here are some tips: II N o t all browsers are equal. You can’t make one screen worlc for all browsers unless you limit the features you use t o the lowest common denominator of the most limited browser.
II If you want t o make graphic pages that cater t o both the high- and low-end browsers, you would have t o make duplicate pages that are laid out differently in order t o optimize for different browser conditions.
II If you choose t o create pages that only work well on one browser; put a disclaimer on your first page, such as “This page is Netscape-enhanced,or view with Netscape I . I N and higher“
A great way t o learn HTML is t o study other people’sWeb pages.
http://www.cs.tu-berlin.de/ -j utta/ht/ draft-ietf-html-spec-0 I .html
HTML+ Specs: http:l/www.w3.org/hypertext/ WWW/MArkUp/ HTMLPlus- I .html
Cross- Platform Hell! One of the coolest things about the World Wide Web is that it’s cross-platform and people on Macs, PCs, Suns,
-cru
Designing W e b Graphics
The unfortunate fact about crossplatform authoring is that viewers log o n to the Web using different computers with different color spaces, color cards, monitor types, and monitor sizes. If you want to make yourself sad, spend hours making a beautiful full-color graphic (24bit) as shown in figure 2.1 and then view it on someone’s portable computer with a 4-bit color display, as shown in figure 2.2. It’s not a pretty sight. This is typical of some of the things that can happen unexpectedly to artwork that you post to your Web site. What can you d o about such unplanned cross-platform discrepanFigure 2 * 1 cies? This chapter helps you under24-bit Original picture. stand what can go wrong i n cross-platform publishing, and what to do about it.
Cross-Platform Color Calibration Issues Color calibration is a distressing problem t o Web designers who expect the colors they’ve picked to look the same on everyone’s system. Macs, PCs, SGIs, and Suns all have different color cards and monitors, and none of them are calibrated to each other. Figures 2.3 through 2.6 are samples of the same Web page, viewed on four different computer platforms: Figure 2.2 4-bit version of figure 2. I .
Cross-Platform Hell!
Figure 2.3 Mac screen/Sony Multiscan 20se monitor:
Figure 2.4 PC screen/NEC Multisync 5FG monitor:
Figure 2.5 Sun screen/SunWorkstation Monitor:
Figure 2.6 SGI screen/SGI Workstation Monitor:
Because you now see for yourself that you have no control over the calibration of systems that your work will be viewed on, what can you do to make good-looking graphics that look good everywhere? What becomes more important than the colors you pick, and what is stressed through-out this book is the contrast and value of a graphic. If you have achieved contrast and value balance, the brightness and darkness, or color differences, on various platforms are going to be less objectionable.
r
w -
Designing W e b Graphics
Figure 2.7 The original logo choosing my own colors.
Figure 2.8 Converting the logo t o grayscale.
Figure 2.9 Lightening the purple.
Figure 2. I O Contrast and brightness values worlong grayscale.
Figure 2. I I The finished logo viewed in color; with contrast and brightness adjustments completed.
You can easily check contrast and value of a graphic by changing your monitor setting temporarily t o grayscale. This converts all the color border="#"> "
ISee figure 5.2 for the results of the following code: a>
INFO
Ty p o g r a p hy f o r t h e We b - I m p a i r e d
There are two shareware programs that convert artwork to ASCII. The Macbased program is called GIFscii, and t h e PC-based product is called PIXCHAR. Both are on the Designing Web Graphics CD-ROM.
Writing the HTML to PlaceYourText Graphics into the Page Placing graphics on a Web page is addressed in depth in Chapter 13, "Hot Spots," and "Fun with Alignment" in Chapter 10. The basic way to insert a graphic on a page is to use the tag. Here's how to put the Drop Shadow artwork, made earlier, on a page.
If you wanted to link the Drop Shadow image to another source, you'd combine the tag with an tag. Here's how: A l i g n m e n t T e s t < / t i t l e > " I ' m hungry f o r t o a s t , mama!",
cried the l i t t l e piggy.
[ N e s t < l a>]
.
h Figure 10.20 The ceiling.
lylll
Summary You might feel like you're fighting an uphill battle, but it is possible to trick browsers i n t o recognizing image alignment requests. If HTML doesn't work, try making artwork that will. You can do this by: II Using HTML tags t o control alignment. Be sure t o check that the Browser you're designing for recognizes the HTML tags you're using. (Check our Browser Comparison chart in Chapter I or contact the URLs that are listed there for current browser information.)
II Using invisible placeholder graphic can create alignment. Either make the placeholder graphics the same color as the background t o yourweb page, or make it a transparent GIF (see Chapter 8).
II Aligning a graphic perfectly t o a background pattern involves shaving 8 pixels off the left and top sides before you post the image t o the Web.
Check out the Chapter 14, "Table Manners," to see another, newer technique that's useful for aligning text and images.
Figure 10.21 The finished page.
~~
~~
~
~~~
Horizontal Rules! A horizontal rule line that serves as a page divider is
something you’ll rarely see in print design. These divider lines are commonly observed across Web sites the world over, however. Some are embossed, some are thick, some are thin, and some are colored or have different shapes. The Web term for these lines is horizontal rule, and they are used for many things: 1 Defining a page break 1 Completing an idea
1 Beginning a list 1 Separating one picture from another Horizontal rules are used often; some might even say too often. That’s no wonder, if you ask me. Web pages have no set length like printed pages. The visual techniques and metaphors available to print designers-such
as
using a block of color behind text or images, changing the text color in an iwlated paragraph or xidebar, or
Designing W e b Graphics
If you want to add horizontal rules to your pages, you have some choices. You can use straight, old-fashioned HTML code, Netscape Extension HTML code for fancier horizontal rules, or you can insert your own artwork to make custom horizontal rules, and vertical rules too. When all else fails, there are libraries of horizontal rule clip art too.
Horizontal Rules, the HTML Way The basic TML 2.0 and 3.0 standard horizontal rule tag looks like this: Here it is in the context of code:
.
Some T e x t Some More T e x t
Figure 11.6 The square is now left-aligned.
Figure 11.7 You can code a rule to have no embossed shading.
Horizontal Rules the Do-it-Yourself Way Anything gets old when you see it too often, and horizontal rules are no exception. If you want to be a little more creative, here are some tips to creating custom artwork to design your own rules. When you make your own horizontal rule art, your artwork dictates the length, width, and height. It's a graphic like any other graphic. It can be aliased, anti-aliased, a GIF, a JPEG, interlaced, transparent, blurred, 2D, 3Dyou name it. If you know how to make it, it can be a horizontal rule. To include a graphic as a horizontal rule, the HTML code would be: 6img src="j..our-horizontal - rule-w+.her$. g i f
"b
Using Illustrator and Photoshop to Create Custom Horizontal Rule Art Adobe Illustrator has lots of features that are wonderful for making horizontal rules. I've used some of my favorites here. Filters, for example, are great for making quick and easy art. I used the spiral, free polygon, and star filters found under the Filter, Create heading of the Filters menu. I also like to draw freehand with my pressure sensitive tablet using the brush tool in Illustrator. You can set the line to have thick and thin weights, thereby lessening the predictably uniform, perfectly symmetrical look that Illustrator files so often have. A neat way to repeat a piece of art along a horizontal axis in Illustrator is to copy it and place the copy next to the original at a set distance, then use the Duplicate command to repeat the established offset indefinitely. Figure 11.8 shows a sampling of some of my favorite Illustrator techniques, and are not meant to limit you from using your favorite Illustrator tools and techniques. However, you can choose to create artwork in Illustrator that can be used in Photoshop, as described in the following section.
-
Horizontal R u l e s !
um--
P
Figure I 1.8 This is how my custom horizontal rule art file looked in Illustrator:
Figure 11.9 An example of how the Illustrator art looked in Photoshop once it was rasterized. Notice that it appears against a checlcerboard background.
Case Study Here’s a step-by-step example of making custom horizontal rule art using Illustrator and Photoshop.
As we discussed in Chapter 7, Illustrator files have to be converted to bitmaps before they can be converted to Web graphics. I’ve saved t h e Illustrator art as a bitmap and have brought it into Photoshop. At this point, the art is rasterized. I chose to not check the antialias box, so these graphics would be smaller when saved. (See Chapter 3 for more tips on making low-memory graphics.) Notice that the files came into Photoshop as black and white, against a checkerboard background (see fig. 11.9). This means that they’re on a transparent layer, which is going to help me out tremendously when I go to color them. When an object is placed on a transparent layer in Photoshop, you can modify the object easily. Check Preserve Transparency box found in the upper left hand area of t h e Layers palette (see fig. 11.10), then paint on the image area. Notice the object is masked to accept color only where there’s image. This allows you to paint the black areas of the horizontal rule line, without worrying about painting outside the shapes created in Illustrator. The final image is shown in figure 11.11.
Figure 11.10 An example of the Layers palette in Photoshop with Preserve Transparency checked.
Figure 1 1 . 1 I The final image,
m -
Designing W e b Graphics
I also thought it would be funny to use this same artwork to poke fun at the “embossed” nature of typical Web horizontal rules. I used the RGB value 192 192 192 to approximate the color of a typical gray background of a Web browser. I took a screen capture of a Web page (Command Shift+3 on a Mac and F13 on a PC), pulled it into Photoshop, and used the eyedropper tool in Photoshop to get the RGB values of the highlight and shadow colors of t h e standard embossed horizontal rules. (Shadow: 252 242 243 Midtone: 241 241 241 Highlight: 234 234 234). I copied the layer I brought in from Illustrator three times, and using the Preserve Transparency feature, filled each layer respectively with a shadow, midtone, and highlight color. By selecting the move tool and using arrow keys on my keyboard, I was able to nudge the layers up and down to create the emboss effect. The results can be seen in figure 11.12.
ready for Web use. Figure 11.13 shows a finished page using my custom fake embossed rule. If you like it, feel free to borrow it from the Horizontal Rule folder on the CD-ROM that comes with this book. Or, better yet, make your own with the tips I just shared. Once I’m done, I can copy and paste each horizontal rule into its own file, and save it. I think saving the rules as transparent GIFs (see Chapter 8) makes the most sense, because I want the irregularly shaped lines to look like they’re floating freely on my Web pages. Figure 11.14 shows two of the custom horizontal rules I made.
~ _ _ _
Figure 11.13 Separating custom horizontal rule art into its own file.
Figure 11.14 More of the art demonstrated in t h i s chapter put t o use on a Web page.
Vertical Rules Figure 11.12 The finished custom horizontal rule embossed artwork.
Of course, after reading Chapter 1, “Browser Hell,” you know that one standard gray background color does not exist on the Web. I’m getting as close to that color as I can, and once I choose to save my file with a transparent background (see Chapter 6) the slight variations in gray are going to go unnoticed to my unassuming Web audience. Now the rule is
Vertical rules are not an easy task to take on with Web pages. Making the custom artwork is identical to making any other custom artwork and all the Photoshop and Illustrator tips shared in this book should be of help. The trick is how to get vertical lines aligned to a Web page, as there is no easy way to assign vertical columns using HTML. We have lessons o n how to position vertical ruled lines i n Chapter 14, “Table Manners.”
~~
~
- _
Horizontal Rules!
Clip Art Rules,Too There are many kind, generous souls on the Web (see figure 11.15) who lend their wares for free. Or other gifted souls who might charge for their art so they can do what they’re good at-satisfy you and me-and still feed themselves and their families. Clip art is a wondrous thing in a pinch, and with tools like Photoshop, Illustrator, and Painter, there’s no end to cool ways you can personalize it further. Here are some URL’s and samples of horizontal rule art you can find on the Web. There are some in the Horizontal Rule folder on the CD-ROM too. II Gifs R Us,Jay Boersma’s prolific image collection: http://www.ecn.bgu.edu/users/gas52rO/Jay/home.html
II Sandra’s Clip A r t Server; a great resource for clip art over the Net: http://www.cs.yale.edu/homes/sjl/clipart.html
II Buttons, Cubes, and Bars; a great collection of custom a r t from Chris Stephens: http://www.cbil.vcu.edu.8080/gifs/bullet. html
II Yahoo search for Clip Art, always a great bet to find the best and latest clip art Iisti ngs: http://www.yahoo.com/Computers-and_lnternetlMuItimedial PictureslClip-Artl
Figure 11.15 A sample from Jay Boersma’s great shareware clip art collection.
m=-
a
Designing W e b Graphics
Summary Now that you’re ready to make your own horizontal rules, this chapter should provide a valuable resource for finding the correct HTML code or production techniques to create your own custom art. Here are a few things to remember when working with horizontal rules: . i Horizontal rules are available using standard HTML tags, or by using Netscape Extension tags that let you create different widths and positions.
. i You can make any artwork o f your choosing a horizontal rule, by using the tag and inserting custom-made horizontal shaped artwork.
W It’s possible t o do vertical rules, if you build them into your background pattern tile, o r pre-build them into bitmapped artwork that would be included in an HTML document using the tag, and then using alignment spacers such as those described in Chapter IO. Check out usingTables for alignment of vertical rules in Chapter 14.
BuIlets=o-Rama You’ll see ulentv of uages with diverse information con-
m -
Designing W e b Graphics
Creating HTML Bulleted Lists Using HTML-based bullets is certainly less work than creating your own custom artwork. Sometimes, they’re more appropriate, as well. Simple and clean design often looks best without a lot of custom artwork on a page. There will be many instances where an HTML-based bullet or indent will do the job more effectively than custom bullet artwork. To make a list with solid circle bullets use the tag, which stands for unorganized list. To create such a bulleted list within text items, use the
tag along with the
< L I > The f i r s t t h i n g a - d i n g y < L I > The second t h i n g a - d i n g y < L I > The t h i r d t h i n g a - d i n g y
Using this code produces the result shown in figure 12.1.
Figure 12.1 Using the and
Lists can be nested by inserting a new tag where you want the list to indent or move to another level. The following code uses an additional tag to create a bulleted list nested within another bulleted list:
< L I > The f i r s t t h i n g a - d i n g y < L I > The second t h i n g a - d i n g y < L I > The t h i r d t h i n g a - d i n g y < L I > More t y p e s o f t h i n g a - d i n g i e s < L I > Yet More t y p e s of t h i n g a - d i n g i e s
Using this code produces the result shown in figure 12.2.
Figure 12.2 You can use additional tags t o create nested lists.
.
~~
~~
Bullets-o-Rama
You can have the items in your list be links to other pages or sites by using the tag within an organized list or an unorganized list. The following code shows how to use link tags to include links within a bulleted list: < L I > The first thinga-dingy < L I > The second thinga-dingy < L I > The third thinga-dingy
Using this code produces the result shown in figure 12.3.
Figure 12.3 Using the tag t o create links within a bulleted list.
Creating Ordered and Definition Lists At times, you might not want your lists to be preceded with bullets. When creating a list of steps to be followed in order, for example, using numbers rather than bullets will help get your point across. Such numbered lists are called ordered lists. Likewise, lists such as glossaries can appear with indents rather than bullets or numbers. These lists are known as definition lists. To make a list that automatically generates numbers in front of its items, use the (ordered list) tag. The following code lines show how to use the code to produce the numbered list shown in figure 12.4.
Figure 12.4 Using the code results in a numbered list.
YLLl
a
Designing W e b Graphics
If you want to indent items in a list without seeing a bullet shape, you might want to use a (definition list) tag, instead of creating an organized list or unorganized list. You use the tag for the flush left items and the tag for the indented items, as shown in the following code:
This definition list is shown in figure 12.5.
Figure 12.5 A definition list with alternating and codes.
Here’s a variation on the same code, with the results shown in figure 12.6. Thingy DingiesCircle-shaped Bullet < L I type=square>Square-shaped Bullet < L I type=disk>Disc-shaped Bullet
This code results in the list shown in figure 12.7.
Figure 12.7 This list uses Netscape-enhanced tags.
Netscape also allows you to set up organized lists using alphabetical and roman numeric criteria by adding the variations shown in the following table: Tag
List Type
Example
Numbers Uppercase letters Lowercase letters Uppercase Roman numerals Lowercase Roman numerals
I, 11, I11 i, ii, iii
KTE
As with bulletea lists, ordered lists
and definition lists can be nested or serve as mks. See the secton "Creating HTML Bulieted Lisrs" earlier in this chapter for information on creating nested lists and links within lists.
a
Designing W e b Graphics
The following code shows variations of the tag, which produces the results shown in figure 12.8.
T h i n g y One T h i n g y Two T h i n g y Three T h i n g y One T h i n g y Two T h i n g y Three Thingy One T h i n g y Two Thingy Three T h i n g y One T h i n g y Two T h i n g y Three T h i n g y One T h i n g y Two T h i n g y Three
Figure 12.8 Varying the tag can produce lists with numbers, letters, or Roman numerals.
Creating CustomMade Bullets If you want to use bullets that show more creativity than the basic square or circle, or if you need added linking functionality, you can create your own custom-made bullets.
Custom-made bullets can be ornamental, where their sole purpose is to decorate the beginning of a list item. Or, they can be functional, where they serve as icons that link you to another page or site. If you plan to make your own artwork or use clip art for buttons, you'll need to use different HTML tags to make the art behave as you want. For visual enhancement only, use t h e tag to include image-based bullets at the front of a list, as shown in the following code example. You won't use the or the tags, because the image itself is what is creating both the bullet and the indent. Note that you do have to put a
tag at the end of each list-item, to tell ;he browser to jump to a new line for the next entry in the list. This wasn't necessary when working with the HTML tags, as it's a built-in part of the list functionality. I've also used an alignment tag (see Chapter 10) to flow the type properly next to the artwork. The following code produces the list shown in figure 12.9. I m p o r t a n t I t e m One
cimg s r c = " g a r r o w . g i f " a l i g n = middle> I m p o r t a n t I t e m Two
I m p o r t a n t I t e m Three
I m p o r t a n t I t e m Four
If you want to use the bullets as icons, to link to another site or page, you'd use the tag, as shown in the following code example. Because linked images typically have a blue border around them,
~~
Bullets-o-Rama
you'll want to use the border=O tag inside the 4 m g src> tag. (Read more about this i n Chapter 1 3 , "Hot Spots.") Note the hand-shaped cursor o n the snake i n figure 1 2 . 1 0 . Your viewer's cursor will change like this w h e n gliding over a linked image to let the viewer know the image is a link.
Figure 12.9 Custom-made bullets can be attention-getting additions t o lists.
Lynda
Jamie
Stinky
Elmers
Jason J r .
Climber~br>
Sam (whose tail is growing back)
Creating Custom Bullet Art Any paint program provides a good experimentation ground for making custom bullet artwork. There are no specific guidelines except to keep in mind the scale of the type the bullets will preceed. It's very difficult to design anything with much detail that is small enough to match the scale of 1 2 point type, such as those typically generated by HTML. If you want to make larger icons for custom bullets, be sure to enlarge the type in the list as well. More info on controlling type size is availaible in
Figure 12.10 Lists can include ornamental bullets that also serve as linl
This code results in the page shown in figure 13.4.
graphic.
Playing with Image Borders, the Netscape-HTML ExtensionsWay Netscape offers HTML extensions that let you control the appearance of hot images and their borders. Remember, not all browsers support these features. Refer back to our browser comparison section in Chapter 1 if you want to check which browsers offer support, and which don't.
m -
Sometimes that pesky blue border around an image is totally wrong for the page it was designed for. If you've gone to a great deal of trouble to make an irregular shaped image float freely on a background, using techniques described in Chapters 7 and 8, you aren't going to want to ruin the illusion you worked so hard to achieve by having a glaring rectangular shape around your graphic. Good news. If you want the border to go away, you can program it t o . The following Netscape-specific code eliminates the border shown in figure 13.4 (see fig. 13.5). < / t d>< / t r>< /table>
Figure 14. I 3 Use the < / html>
Once I got the skeleton code in place, I went to work adding my text and links. I like the way formatted text looks, so I played with that tag and changed font sizes. I set my background color hex to pure white, and picked soft earthtone colors for my links and visited links too. Here's the final code; the final page is shown in figure 14.19.
~~
__
Table Manners
Im-
Figure 14.18 The beginning stages of the resume page table layout.
Figure 14.19 Here's the finished result. N o t bad, considering that before tables, this type of alignment was physically impossible on the Web.
' m
Designing W e b Graphics
resume two interactive media design web g r a p h i c s < / a > < / f o n t > < p r e > edu cation: the evergreen state college, b.a., 1976
We've got images and HTML on the CD-ROM for you to play with, as well as templates (see Chapter 18) that let you work more with graphic tables.
Table Manners
The Bad News-BrowsersThat Don’t Support Tables I warned you! This page will look horrible with any browser other than Netscape and Internet Explorer. (I hope this has changed by the time you buy this book!) Figure 14.20
shows t h e o u t p u t i n America Online’s Window browser. This browser is a fixed size, so I had to scroll through five screens to see this mess! Figure 14.21 shows the output i n MacMosaic 2.0, which supports tables, but not background color.
Figure 14.20 The final rksume on America Online’s Window browser. Because the browser is a fixed size, what appeared in one screen in Netscape takes five screens in the AOL browser.
m -
Designing W e b Graphics
Figure 14.21 My resume as shown on the MacMosaic 2.0 browser: This browser supports tables, but not background color:
What can you do for browsers that don’t support tables? You can make an alternative page, using accepted HTML commands. I chose to use the tag for my entire resume. The tag accepts the alignment of my text exactly as I type it. I was able to do two columns here by using this trick. I wouldn’t be able t c insert any pictures into this, the way 1 did using tables. There could be a picture above, below, or inside the tags, but alignment control is very finicky. Return to Chapter 1 for suggestions on how to prepare multiple pages for different browsers. Figure 14.22 shows the result of the following code: text based resume Lynda Weinman email: [email protected] web address: h t t p : / / w w w . e a r t h l i n k . n e t / - l y n d a w R
E
S
private clients cbs disney apple
U
M
E
instructor: art center san francisco state american film institute
Table Manners
abc courses : adobe motion g r a p h i c s paramount p i c t u r e s photo motion g r a p h i c s i n t e r a c t i v e media d e s i g n publiweb g r a p h i c s cations: macuser pubmacweek lisher: newmedia d e s i g n i n g web g r a p h i c s the net new r i d e r s l m a c m i l l a n d i g i t a l video edustep-by-step graphics cation: a n i m a t i o n magazine t h e evergreen s t a t e mm u s e r s j o u r n a l b . a . , 1976
Another method, if you have a small graphic table, is to go ahead and make a bitmap graphic in Photoshop or elsewhere and load it as an 4 m g src> instead of using tables (see fig. 14.23).
Figure 14.22 The resume from the earlier example, redone using the tag.
r
Designing W e b Graphics
0 0
II 121314151617 1 8 1 9 ~ l O ~ l 1 ~ 1 2 ~ 1 3 ~ 1 4 ~ 1 5
I I 12 13 14 15 16 17 18 19 lAl6 IC10 IE I F
Figure 14.23 An example of a D tmap grapnic of a rable as opposed IO an dTM--generatea raDle.
Summary Tables allow you to control alignment of graphics with more precision than any other method available on the Web. Tables are a lot of work; they are tricky to figure out and require practice and pre-planning. The results are worth it; but then once you factor in the fact that many browsers don’t support tables you’re left wondering again. Browser support is limited for many of the features this book describes, and that’s why so many sites put up disclaimers, like Netscape Enhanced. If you’re going to use tables, remembering these few tips will be helpful: II Tables look great, but are not available t o all viewers. II Make an alternative page for those viewers who can’t see tables.
II If you create tables using the tag, the borders will be invisible. Tables offer enhanced page layout control that other HTML tags don’t offey:
Dynamic Documents We’ve already seen that the Web does a pretty poor job of imitating the printed page. Its strengths lie in those things it does t h a t print can’t, like offering crossplatform global interaction, hypertext links, and CONTENT=i; U R L = h t t p : / / your URL address here>
~~
~
Dynamic Documents
The CONTENT=l part of t h e tag tells the screen how long (in seconds) to wait before it goes to the next URL. Be aware that each time a new page is invoked, the new page has to load. This results in a flash of "browser gray" background, and whatever time it takes to load all the images, text, links and tags of the forthcoming page. It's not seamless animation or even a smooth running slide-show, but it can be an interesting device to get your message broadcast.
Figure 15.1 The first part of the Client Pull code causes the eye t o blink.
My second page looks like figure 15.2. The code for the second page is as follows: < t i t l e > B l i n k OFF>
to
.
.
and get no border at all (see fig. 18.6).
Figure 18.4 Jamie.gifwith background,text, and visited link colors.
r
-~
D e s i g n i n g Web G r a p h i c s
Try using this code to test your own patterns. Either name your patterns pat.gif or change the HTML code to reflect the name of your jpeg or gif. If you want to put text over the pattern background (see fig. 18.8) add this code: Some T e x t ! < I body>
Figure 18.5 The jamie.gif image with a thicker border:
Figure 18.7 The page filled with a pattern. Figure 18.6 The jamie.gif image without a border:
Pattern Template This template allows you to test your pattern tiles to see how they'll look. The file pat.gif is included on the CD-ROM, or use your own by studying techniques in Chapter 6, "Making Background Patterns.'' The HTML is very simple: < 1body>
Figure 18.8 The results of adding text t o the pattern HTML template.
HTML T e m p l a t e s f o r Designers
Typography Template This template allows you to test font sizes and headings. For more information on type for Web design, check out Chapter 9, “Typography for the WebImpaired.” Figure 18.9 shows the results of the following code. H e r e ’ s a H e a d l i n e o f HS
Aligns text t o the top, middle, bottom, left, o r right of image inside this tag.
Image Tags
Contains an image.
Contains an image and a text description for viewers who don't have graphical Web browsers.
Allows for specifying image dimensions and causes the HTML text t o load before large graphics.
Contains a linked image and automatically generates a border around the image in whatever link color has been specified.
Insures that there's no border on browsers that support this feature.
src="#"
Depending on the value, puts a heavier o r lighter border around the linked image.
List Tags ~~
Unorganized list. Generates an indented list with bullets.
Organized list: Generates numbers in front of list. Puts a bullet in front o f each item, indents the text, and creates a line break at the end of each item.
Definition list: Produces an indented list with no bullets.
Produces items in a definition list.
Table Tags
Put at the beginning and end o f tables.
4 t h >
Makes bold text o r numbers and accepts table attributes
Includes text, numbers, o r images and accepts table attributes.
Table Attributes align="left, right o r center"
Aligns text o r images in table.
valign="top middle, bottom, o r baseline"
Vertically aligns text o r images in table.
rowspan=#
Denotes the number of rows in a table.
colspan=#
Denotes the number o f columns in a table.
continues
I
Designing Web Graphics
Tag
Description
width=#
Specifies the width o f the table by pixels
Linking Jags
Anchors t e x t
Links the image o r text t o an URL.
Comments Jag
Sets comments that appear as notes for the HTML document but won't show up on the actual Web page.
-11-1
Glossary 8-bit graphics
A color or grayscale graphic or movie that has 256 colors or
less. 8-bit sound 8-bit sounds have a dynamic range of 48 dB. Dynamic range is the measure of steps between the volume or amplitude of a sound. 16-bit graphics
A color image or movie that has 65.5 thousand colors.
Standard CD-quality sound resolution. 16-bit sounds have a dynamic range of 96 dB. 16-bit sound
24-bit graphics
A color image or movie that has 16.7 million colors.
A color image or movie that has 16.7 million colors, plus an 8-bit masking channel. 32-bit graphics
adaptive dithering A form of dithering in which the program looks to the image to determine the best set of colors when creating an 8-bit or smaller palette. See dithering. aliasing In bitmapped graphics, the jagged boundary along the edges of different-colored shapes within an image. See anti-aliasing. anti-aliasing A technique for reducing the jagged appearance of aliased bitmapped images, usually by inserting pixels that blend at the boundaries between adjacent colors. artifacts
Image imperfections caused by compression. for interactive media.
a
G Ios sa ry- b rows e r A n application that enables you to access World Wide Web pages. Most browsers provide the capability to view Web pages, copy and print material from Web pages, download files over the Web, and navigate throughout the Web. browser
cache A storage area that keeps frequently accessed data or program instructions readily available so that you do not have to retrieve them repeatedly.
Common Gateway Interface. A Web standard for the methods servers and external programs and scripts used to communicate. CGI
client
A computer that requests information from a network’s server. See
server. Color Lookup Table. A n %bit or lower image file uses a CLUT to define its palette.
CLUT
codec Compressorldecompressor. A piece of software that encodes and decodes movie data. color mapping A color map refers to the color palette of an image. Color mapping means assigning colors to an image. compression Reduction of the amount of data required to re-create an original file, graphic, or movie. Compression is used to reduce the transmission time of media and application files across the Web. data streaming The capability to deliver time-based data as it’s requested, much like a VCR, rather than having to download all the information before it can be played. dithering The positioning nf different cdnred pixels within an im-age that uses a 256 color palette to simulate a color that does not exist in the palette. A dithered image often looks noisy, or composed of scattered pixels. See
adaptive dithering. dynamic Information that changes over a period of time. Typically refers to time-based media, such as animation or interactive documents. extension Abbreviated code at the end of a file that tells the browser what kind of file it’s looking at. Example: a JPEG file would have the extension .jpg.
Graphics that must be downloaded from the Web, instead of being viewed directly from a Web page. See inline graphic and links. external graphic
An established palette that is fixed. When a fixed palette Web browser views images, it will convert images to its colors and not use the colors from the original.
.~ -
fixed palette
-
G Io s sa r y-I o s s y FTP File transfer protocol. An Internet protocol that enables users to remotely access files on other computers. An FTP site houses files that can be downloaded to your computer.
Gamma measures the contrast that affects the midtones of an image. Adjusting the gamma lets you change the brightness values of the middle range of gray tones without dramatically altering the shadows and highlights. gamma
GIF A bitmapped color graphics file format. GIF is commonly used on the Web because it employs an efficient compression method. See JPEG. H T M L Hypertext Markup Language. The common language for interchange of hypertext between the World Wide Web client and server. Web pages must be written using HTML. See hypertext.
Text formatted with links that enable the reader to jump among related topics. See HTML. hypertext
Portions of images that are hypertext links. Using a mousebased Web client such as Netscape or Mosaic, the user clicks on different parts of a mapped image to activate different hypertext links. See hypertext. image maps
inline graphic
A graphic that can be displayed directly on a Web page. See
ex terna 1g a phic. interlaced GlFs The GIF file format allows for “interlacing,” which causes the GIF to load quickly at low or chunky resolution and then come into full or crisp resolution. ISP
Acronym for Internet Service Provider.
Acronym for Joint Photographic Experts Group; b1.1t commonly used to refer to a lossy compression technique that can reduce the size of a graphics file by as much as 96 percent. See GIF.
JPEG
links Emphasized words in a hypertext document that act as pointers to more information on that specific subject. Links are generally underlined and may appear in a different color. When you click on a link, you can be transported to a different Web site that contains information about the word or phrase used as the link. See hypertext. live object Netscape’s term for plug-ins that enable the browser to play image, movie, and sound files as an inline component of a Web page. lossless compression A data compression technique that reduces the size of a file without sacrificing any of the original data. In lossless compression, the expanded or restored file is an exact replica of the original file before it was compressed. See compression and lossy compression.
compression
r -
~
-
'-=
G Io s s a r y- M I M E lossy compression A data compression technique in which some data is deliberately discarded in order to achieve massive reductions in the size of the compressed file.
MIME Multipurpose Internet Mail Extensions. An Internet standard for transferring file non-text-based data such as sounds, movies, and images. object-oriented graphics A graphic image composed of autonomous objects such as lines, circles, ellipses, and boxes that can be moved independently. This type of graphic is used for print-based design because it can be printed at a higher resolution than a computer screen. See bitmapped graphics. Postscript A sophisticated page description language used for printing high-quality text and graphics on laser printers and other high-resolution printing devices. provider
Provides Internet access. See ISP.
QuickTime System software developed by Apple Computer for presentation of desktop video. server A computer that provides services for users of its network. The server receives requests for services and manages the requests so that they are answered in an orderly manner. See client. splash screen
A main menu screen, or opening graphic to a Web page.
An individual component of an animation, such as a character or graphic that moves independently. sprite
ASCII text indicators with which you surround text and images to designate certain formats or styles.
tag
transparent GlFs A subset of the original GIF file format that adds header information to the GIF file, which signifies that a defined color will be masked out.
The quality of color provided by 24-bit color depth. 24-bit color depth results in 16.7 million colors, which is usually more than adequate for the human eye. true color
URL
Uniform Resource Locator. The address for a Web site.
Video for Windows A multimedia architecture and application suite that provides an outbound architecture that lets applications developers access audio, video, and animation from many different sources through one interface. As an application, Video for Windows primarily handles video capture and compression, and video and audio editing. See AVL
Pronounced wizzy-wig. A design philosophy in which formatting commands directly affect the text displayed on-screen, so that the screen shows the appearance of the printed text.
~-
WYSIWYG
-
Index Symbols ~
plaw (audio file formats), 2 IO
A ~
adaptive dithering, 245 palettes, 59 AlFF (Audio Interchange File Format), 2 IO aliases, 97 illustrations, converting, 98-99, I02 aliasing, 245 aligning background patterns, I38 browsers, 18 HTML, 24 tags, 134-135, 242 spacers, 137 tables, 178 templates, 234 animated GIFs, 186- I88 animations client pulls, 189- I90 server push, I90 sprites, 248 applications audio files, 2 I 5 movies, 207-208 artifacts, 245 artwork
deslgnlng,-95-97 horizonta rules, 146- I48 spacers, 136- I37 TGIFs, creating, 97-98 ASCII art, 126 Astound Web Player, I87 audio fites, 208
bits, 209 MPEG (Motion Pictures Experts Group), 210 rates, 209 RealAudio, 2 I I waves, 2 I O formats, 2 I O plow, 2 I O AlFF (Audio Interchange File Format), 210 Help applications, 2 I5 Help utilities, 2 I5 HTML, 2 I4 resources, 200 sounds, 2 I 1-2 I2 authoring tools, 245 AVI (Audio-Video Interleaved), 198,245 cinepak, 203 requirements, I98
B backgrounds aligning graphics, I38 body, 74-75 pattern sizes, 75, 77 colors, 22, 80 shapes, 87-88 pattern codes, 79-80 tiles file formats, 78-79 4, 86
bitmapping graph cs, 245 alrosing, 245 anti-aliasing, 245 GIF, 247 object-oriented graphics, 248 bits 8-bits, 49, 55-57 adaptue palettes, 59 O ~ W O5 ~ 7-58 . graphics, 245 palettes, 59 sounds, 245
a
Index-bits
16-bits graphics, 245 sounds, 245 24-bit, 49, 60-62 graphics, 245 32-bit graphics, 245 audio files, 209 depth, SO,53 depths, 245 dithering, 54 graphics, converting, 43-44 blinking text, I34 body backgrounds, 74-75 tiling (pattern sizes), 75,77 type, I 16 HTML-based typography, I I9 bold (HTML-based typography), I 2 0 borders, 23 hot images, 165- I66 breaks lines, I34 paragraphs, I34 brightness (platforms), 30-3 I browsers, 246 8-bits displaying, 55-57 graphics, 55-57 aligning, I 8 client pulls, 188- I89 colors, 18 comparing, I 7 default fonts Crimes N e w Roman), I 19 hexadecimal colors, 67 horizontal rules, 18- I 9 HTML, 22 Internet Explorer; I86 palettes (fixed), 246 sites, creating, I 6 statistics, I 7- I 8 tables, 174, I 8 I - I82 text patterns, I 8 World Wide Web (W), IS- I 6 Bruce Heavin’s Gallery PageArt, I39- I 40 bullets, I 5 I art, creating, I57 creating, I56 HTML-based, I 5 I creating, I52-I53 image-based, I 5 I Netscape, I55 codes, 155-I56 typefaces, I59
buttons clip art, I 6 I interactive, I59 codes, 160 bytes (file sizes), 34-35
C caches, 246 calculators (hexadecimal), 70 calibrations (colors; cross-platforms), 28-30 CD-ROM templates, 229-230 centering text, I34 CGI (Common Gateway Interface), 246 scripts, I 9 I - I92 charts (hexadecimal), 67 cinepak, 202-203 client pulls, 188- 189, 246 animations, 189- I90 defined, 188 clip art buttons, 161 rules, 149 CLUT (Color Lookup Table), 56-57, 246 artwork, 58 Codecs (Compress or DECompressor), 20 1-202, 246 codes definition lists, 153- I54 hexadecimal, 63-64 HTML, 64-66 HTML bullets, I 52-I 53 horizontal rules, I44 hot images, I65 image maps, I 7I table tags, I 75-I 76 interactive buttons, I60 Netscape bullets, 155-I56 horizontal rules, I 4 5 ordered lists, 153- I54 patterns, 79-80 spacers (alignment), I37 Color palette (color maps), 246 colors artwork, 58 backgrounds, 22, 80 shapes, 87-88 browsers 18
Index-files
cards bits, 53 monitoE, 53 cross-platform calibrations, 28-30 dithering, 54 adaptive, 245 hexadecimal browsers, 67 mapping, 246 monitors, 53 pixels (bit depths), 245 shapes hexadecimal way, 88-89 solid patterns, 90 text, 22 true, 248 types (layers), 220-222 comments (HTML; tags), 244 comparing browsers, I 7 compressing artifacts, 245 defined, 246 files, 36 GIF, 4 1-42 JPEG, 37 lossy, 247 movies (Codecs), 20 I-202,205 compressor/decompressor,see Codecs, 20 I construction set (GIF), I08 continuous tones, 58-59 contrasts, 29 converters (hexadecimal), 67,70 converting files, 36 graphics, 43-44 illustrations (alias art), 98-99, I02 photographs (indexed color), 58-59 creating image maps, 168- I69 cross-platforms, 28 brightness, 30-3 I color calibrations, 28-30 contrasts, 29 tools, 109 values, 29 customizing bullets, I56
D data streaming, 246 tables, 174 DeBabelizer, 105- I 06 anti-aliased edges, I03 default fonts, I I 9
defining pages, 132- I33 definition lists codes, 153- I54 defined, 153 depths (bits), 50, 53, 245 designing animations (client pulls), 189- I90 art, 95-97 TGIFs, 97-98 bullets, 156 art, 157 horizontal rules, I46 hot images, I65 HTML templates, 228-229 interlaced GIFs, I04 layers, 223 sites (browsers), I6 tables (graphics), 177- I78 templates (CD-ROM), 229-230 types, I18
WYSIWYG, 248 displaying 8-bits, 55-57 dithering, 246 adaptive, 245 defined, 54 documents HTML, structuring, 24 I layers creating, 223 tiles, 222 linking, 247 naming, 240 downloading ganinia seflings, 30 LView, 107 dynamics, 246
E-F Emblaze, 187 Export plug-in, 109- I I O extensions, 240, 246 external graphics, 246 File Transfer Protocol, see FTP, 247 files 8-bits (CLUT), 246 audio, 208 bits, 209 formats, 2 I O rates, 209 RealAudio, 2 I I compressing, 36, 246 lossless, 247 lossy, 247
m'-
Index-files
converting, 36 extensions, 240, 246 formats AVI (Audio-Video Interleaved), 245 GIF, 40-43, 247 JPEG, 37-38 patterned background tiles, 78-79 PNG, 40 TGIFs, 93-97 GIF (name extensions), 34 graphics, sizing, 34 graphics-based, creating, 122- I24 JPEG,247 name extensions, 34 map definitions, I67 movies AV/, 198 MPEG, I98- I99 QuickTime, I96 Xing Streamworks, I99 naming, 240 protocols (FTP), 247 sizes, measuring, 34-35 sounds (HTML), 2 I4 fills
foreground colors,22 I formats, 36 filters (KPT), I 57- I 58 fixed palettes, 246 fonts sans serifs, I 19 serifs, I I9
Times New Roman, I 19 types, I I8 URLs, 121 foregrounds (color fills), 22 I formats audio files, 2 I O p-law, 2 I O AIFF, 2 I O
MPEG, 2 I O ReaIAudio, 2 I I waves, 2 I O files, 36 AVI, 245 GIF, 40-4/, 43, 247 pattemedbackgroundtiles, 78-79 PNG, 40 formatting
bold, 120 headings, I 19 italic, 120 text types, I I8
-
Fractal Design Painter, I I I I I 2
tiles (seamless), 84, 86 Freeware (Macintosh transparencies), i05 FTP (FileTransfer Protocol), 247
G gamma, 247
downloading, 30 GIF (Graphic Image File), 40-41,43, 92, 168,247
animated, 186- I88 compressing,4 1-42 construction set, I08 cross-platform tools, I09 files, sizing, 40, 42-43 Fractal Painter 3.0 I , I I I - I I2 interlaced, 40, 78-79, 94-95, 103-104, 247 designing, I04 Macintosh, I05 multi-blocks, 186,I88 naming extensions, 34 transparency, 248 photographic art, 100, 104-I05 searching for; I I3 transparencies (HTML), I 14 graphic-based files, I I 6 graphics
background patterns, I38 batching, 59-60 bitmapped, 245 aliasing, 245 anti-aliasing,245 GI5 247 bits 8-bit~,49, 55-57, 59, 245 16-bit, 245 24-bits, 49, 60-62, 245 32-bit, 245 depth, 50, 53 body backgrounds, 74-75 pattern sizes, 75, 77 compressing, 246 external, 246 files compressing, 36 converting, 36 JPEG, 37-38, 247 sizes, 34 GIF, 40-4 I , 43, I68 compressing, 4 1-42 hexadecimaltemplates, 230-23 I HTML, placing, I29
Index-Illustrator
inline, 164,247 JPEG, 168 layers, 224-225 monitors, 53 object-oriented, 248 Postscripts, 248 server push, I90 sprites, 248 tables, designing, 177- I78 templates (motion graphics class), 235-236 TGIFs, 93-97
H headings (HTML-based typography), I I9 headline type, I 16 heights (HTML tags), I36 help audio files applications, 2 I5 utilities, 2 I 5 movies (applications), 207-208 hexadecimals calculators, 70 charts, 67 codes, 63-64 HTML, 64-66 colors (browsers), 67 converters, 67, 70 HTML, 72 shapes (background colors), 88-89 templates, 230-23 I values, 7 I horizontal (HTML tags), I35 horizontal rules, 143- I44 browsers, 18- I9 designing, I46 HTML, 144 tags, 242 Illustrator, 146- I48 Netscape, I45 Photoshop, 146- I48 hot images, 163 borders, 165- I 66 creating, I65 identifying, I64 inline graphics, I64 horizontal rules, 25 HTML aligning, 24 bullets, 15 I creating, 152- I53
documents client pulls, 188- I 8 9 structuring 24 I fonts, I 18 graphics, placing, I29 hexadecimal codes, 64-66,72 horizontal rules, 25, I44 hot images borden, 165- I66 codes, 165 image maps (codes), I7 I patterns (codes), 79-80 sound files, 2 I4 spacer art, 136- I37 tables, 174 rules, 25 tags, I 75- l 76 tags, 24 1-242 alignment, 134- 135, 242 body backgrounds, 74-75, 77 comments, 244 heights, I36 horizontal rule, 242 images, 243 /inking, 244 list, 243 table attributes, 243 text, 242 widths, 136 templates, 228-229 CD-ROM, 229-230 TGIFs, I 14 types, designing, I I8 typography bold, 120 headings, I I 9 italic, I 2 0 versions, 26 H T M L (Hypertext Markup Language), I 5- 16, 247 browsers, 22 hypertext, 247 image maps, 247 linking, 247
I-J-K icons (Photoshop), 36 identifying hot images, I64 illustrations, converting alias art, 98-99, 102 Illustrator, I25 horizontal rules (art), 146- I48
-ma
Index-images
images aliases, creating, 97 bullets, I5 I hot, 163 borders, 165- I 6 6 creating, I 6 5 identifjmg, I 6 4 inline graphics, I 6 4 HTML tags, 243 maps, 166,247 creating, 168- I 6 9 definition files, I 6 7 four stages, I 6 7 HTML, I71 MapEdit, 169- I70 regions, 168 troubleshooting, I 72 WebMap, 168-I69
Indeo, 203 index, converting colors, 58-59 inline graphics, 164,247 interactive buttons, I59 codes,
160
interlaced GIFs, 40, 78-79, 94-95, 103-104, 247 Internet (MIME), 248 Internet Explorer, I86 ISP (Internet Service Provider), 247 italic (HTML-based typography), I20 JPEG (Joint Photographic Experts Group), 92, 168,247 compressing, 37 files formats, 37-38 naming extensions, 34 sizes, 38
L-M launching WebMap, I68 layers, 2 I 8 creating, 223 documents (pattern tiles), 222 graphics, 2 I9 patterns dark 2I 9 light, 2I 9 photos, 2I9 plain text, 2I8 pre-links, 2I9 pre-text, 2I9
solid BG, 2I 9 text links, 2I8 turning on/off, 2I8 type colors, 220-222 Web graphics, 224-225
layouts (pages, designing), I77- I78 line breaks, 134 linking, 247 HTML tags, 244 hypertext image maps, 247 layers, 2I9 movies (Web pages), 203-204,206-207 text (hypertext), 218,247
lists definition codes, 153- I54 lists, 153 HTML tags, 243 ordered, 153 codes, 153-I 5 4
live objects, 247 lossless compressions, 247 lossy compressions, 247 LView, downloading, I07 Macintosh freeware, transparencies, I05 TGIFs, 105
MapEdit, 169- I70 mapping images, 247 maps colors, 246 images, 166 creating, I 68- I69 definition files, I 6 7 four stages, I67 HTML, I71 MapEdit, I69- I 70 regions, I68 troubleshooting, I 72 WebMap, 168- I 6 9
measuring file sizes, 34-35 gamma, 247
media (interactive authoring tools), 245 menus (splash screens), 248 MIME (Multipurpose Internet Mail Extensions), 195,248 Netscapes, 2I4
Index-
monitors
graphics, 53 pixels, 53 motion pages, 186 motion graphics class templates, 235-236 movies
8-bit graphics, 245 16-bit graphics, 245 24-bit graphics, 245 32-bit graphics, 245 AVI (Audio-Video Interleaved),245 requirements, I98 cinepak, 202-203 Codecs (COmpressor/DECompressor), 20 1-202, 246 compressing, 205, 246 help applications, 207-208 utilities, 207-208 Indeo, 203 MPEG, 198,203 requirements, I99 QuickTime, I96 Netscape, I97 templates, 237 tips, 200-20 I Web pages, placing, 203-204, 206-207 Xing Streamworks, I99 MPEG (Motion Pictures Experts Group), 203 audio files, 2 I O
movies, 198 requii-ements, I99 multi-block GIFs, 186, I88 multimedia video windows, 248
N-0 naming
file extensions, 34, 240, 246 protocols, 240 Netscape, I 2 0
body backgrounds,74 bullets, 155 codes, I 5 5 I56 horizontal rules, I45 hot images (borders), 165- I66 MIME, 2 I4 movies (QuickTime), I97 pages (motion), I86 server push, I90 CGI scripts, I 9 I - I 92 tables, 174
objects
live, 247 object-oriented graphics, 248 bitmappedgraphics, 245 online
GIFs, I 12 resources patterns, 86 TGIFs, I 12 ordered lists
codes, 153- I54 defined. 153
P-Q pages
background colors, 22 layouts (tables, designing), 177- I78 motion, 186 sizing, 132- I33 text colors, 22 troubleshooting, 240 uploading, 240 Paint Shop Pro, I08 Painter 3.01, I 1 1 - 1 12 Fractal, I I I - I I2 palettes
8-bits, 55-57 adaptive, 59 creating, 59 CLUT, 56-57 fixed, 246 paragraph breaks, I34 patterns
backgrounds colon, 80 file formats, 78-79 graphics, I38 online resources, 86 BG,23 browsers, 18 codes, 79-80 layers dark 219 Iight, 2 I 9 seams, 8 1-83 sizing body backgrounds, 75, 77 templates, 232 tiles (layered documents),222 photographs
converting, 58-59 GIFs, 100, 104-105
layers, 2 I9
photographs
E m -
Index-Photoshop
Photoshop Export Plug-in, 109-I I O horizontal rules (art), 146-I48 icons, 36 Illustrator; I25 JPEG,38 layers, 2I8 patterns, 2 I 9 photo, 2 I 9 plain text, 2 I8 pre-links, 2 I 9 pre-text, 2 I 9 solid BG, 2 I 9 text links, 2 I 8 trans graphic, 2 I 9 types, designing, 122-I24 pixels, 53 bit depths, 245 dithering, 246
requirements AVI (Video for Interleaved), I98 MPEG (Motion Pictures Experts Group),
I99 resources audio, 200 patterns, 86 video, 200
rules clip art, 149 horizontal, 25,143-I44 designing, I 4 6 HTML, 144 Illustrator, 146- I 4 8 Netscape, I 4 5 Photoshop, 146- I 4 8 HTML tags, 242 tables, 25 vertical, I48
placing graphics, I29 movies (Web pages), 203-204, 206-207 plain text layers, 2 I 8
platforms brightness, 30-3I color calibrations, 29-30 contrasts, 29 values, 29 Plug-in Plaza, I87
plug-ins Export plug-in, 109-I I O live objects, 247 Postscripts, 248 pre-links layers, 2 10 preformatting text, I34
processing (batching options), 59-60 protocols FTP (FileTransfer Protocol), 247 naming, 240 providers, 248
QuickTime, 196,248 cinepak, 203 Indeo, 203 Netscape, I97
rates (audio files), 209 RealAudio (audio files), 2 II regions (image maps, defining), I68
S sans serif fonts, I I 9 scanning illustrations (alias art), 98-99, I02
screen splashes, 248 scripting (CGI server push), I 9 I I92 seams
-
backgrounds tiles, 8 1-83 tiles (Fractal Design Painter), 84,86 search engines (Yahoo), I I 3 serif fonts, I 19 server push, I90 CGI scripts, I9 I - I92 sprites, I90 Webstar; 193-I94 servers, 248 clients, 246 sets (construction), I08 setting monitors, 53
shapes background colors, 87-88 hexadecimal way, 88-89 solid patterns, 90
Shareware MapEdit, 169-I70 WebMap, 168-I69 sites browsers, creating, I6 URLs, 248
sizing files, measuring, 34-35 graphic files, 34
Index-tones
pages, defining, 132- I33 pattern (body backgrounds), 75,77 Sizzler, 187 Smartsketch Animator, I87 software codecs, 246 Paint Shop Pro, 108 QuickTime, 248 shareware (MapEdit), 169- I70 solid BG layers, 2 I9 shapes (background colors), 90 sounds
8-bit, 245 l6-bit, 245 audio files, 208 plow, 2 I O AIFF, 2 I O bits, 209 rates, 209 RealAudio, 2 I I tips, 2 I 1-2 I 2 wave, 2 I O HTML files, 2 I4 MPEG, 2 IO spacers alignment, I37 art, 136-137 spacing tags, I35 splash screens, 248 sprites, 190, 248 stages (image maps), I67 statistics (browsers), 17- I 8 streaming data, 246 structuring H T M L documents, 24 I
T tables, 173 aligning, I78 browsers, 18- 19, 174, I 8 I - I82 data, 174 graphics, designing, 177- I78 HTML, 174 tags, I 75- 176, 243 rules, 25 templates, 234 tags, 248 HTML, 24 I alignment, 134- 135, 242 comments, 244 heights, 136
horizontal rules, 242 images, 243 Iinkmg, 244 lists, 243 table attributes, 243 tables, I75- I 76 text, 242 widths, 136 templates alignment, 234 CD-ROM, 229-230 hexadecimal, 230-23 I HTML, 228-229 motion graphics class, 235-236 movies, 237 patterns, 232 tables, 234 typography, 233 text blinking, I34 browsers, I8 centering, I34 colors, 22 file names, 34 fonts, I 18 HTML tags, 242 layers, 2 I8 pre-text, 2 I 9 linking hypertext, 247 preformatting, 120, I34 tags, 248 types, designing, I I8 TGlFs (Transparent Graphic Image Files), 23, 93-97 artwork creating, 97-98 cross-platform tools, I09 Fractal Painter 3 0 I , I I I online, I 12 HTML, I 14 Macintosh, I05 online, I 12 searching, I 13 tiles layered documents, 222 seamless (Fractal Design Painter), 84, 86 tiling backgrounds file formats, 78-79 seams, 81-83 patterns (templates), 232 Times New Roman, I19 tones, 58-59
LYI
a
Index-tools
tools
values, 29
authoring, 245 cross-platform, I09 trans graphic, 2 I 9
hexadecimal, 7 I versions of HTML, 26 vertical (HTML tags), I 3 5 video resources, 200 videos digitizing systems, I99
transparencies
GIFs, 248 Macintosh,
I05
troubleshooting, 240 image maps, I72 pages, 240 true colors, 248
turning onloff layers, 2 I 8 typefaces (bullets), I59 types body (HTML-based), I I 9 colors (layers), 220-222 designing, I I8 fonts, I 18- I I 9 Illustrator; I25 typography body, I 1 6 graphic-based, I I 6 graphics-based, I 2 2 headlines, I I 6 typography, I 15- I I 6 fonts, 121 graphics-based, I22 HTML-based, I19 bold, 120 headings, I I 9 italic, I 2 0 Photoshop, 122-I24 templates, 233 types body, I 16 designing, I I 8 graphic-based, I I 6 headline, I I 6
windows, 248
W waves (audio files formats), 2 I O Web pages, sizing, 132- I 3 3 WebMap, 168- I69 WebStar (server push), 193- I94 widths (HTML tags), I36 Windows (videos), 248 World Wide Web (WWW) browsers, 15- 16, 246 aligning, 18 colors, 18 comparing, I 7 fixed palettes, 246 horizontal rules, 18- I9 patterns, 18 statistics, I7-I 8 table rules, 18-l9 text, 18 cross-platforms, 28 color calibrations, 28-30 contrasts, 29 values, 29 graphics layers, 224-225 movies, placing, 203-204, 206-207
URLs, 248 WYSIWYG (What You See I s What You Get), 248
u-v
x-Y-z
uploading pages, 240 URLs (Uniform Resource Locators),
Xing Streamworks, I99
121,248 Astound Web Player; I87 Emblaze, 187 Plug-in Plaza, I87 Sizzler; I87 Smartsketch Animator; I87
utilities (help) audio files, 2I 5 movies, 207-208
Yahoo, I I 3
Adobe Systems IncorDorated End User Liceke Agreement
I
NOTICETO USER THIS IS A CONTRACT. BY OPENING THIS PACKAGE YOU ACCEPT ALL THE TERMS AND CONDITIONS OF THIS AGREEMENT. If you do not agree with the terms and conditions of this Agreement, ietum this media envelope, UNOPENED, along with the rest of the package, to Adobe Systems Incorporated (“Adobe”)01 the iocatlon where you obtained it. This package contains software (“Software”) and related explanatory written materials (“Documentation”). The term “Software”shall also include any upgrades, modified versions, updates, additions and copies of the Software licensed to you by Adobe. Adobe grants to you a nonexclusive license to use the Software and Documentation, provided that you agree to the following: 1. Use of the Software.You may-
* Install the Softwarein a single location a n a hard disk or other storage device of up to the number of computers indicated in the “Permitted Number of Computers” section of this Agreement
* Provided the Software is configured for network use, install and use the Software on a single file server for use on a single local area network far either (but not both) of the following purposes: (1) permanent installation onto a hard disk Permitted Number of Computers; or
01
other storage device of up to the
(2) use of the Software over such network, provided the number of different computers on which the Software is used does not exceed the Permitted Number of Computers. For example, if there are 100 computers connected to the server, with no more than 15 computers ever using the Software concurrently, hut the Software will be used on 25 different Computers at various times, the Permitted Number of Computers for which you need a license is 25.
* Make one backup copy of the Software,provided your backup copy is not installed or used on any computer. Home Use. The primary user of each computer on which the Software is installed or used may also install the Software on one home or portable computer. However, the Software may not he used on the secondary computer by another person at the same time the Software on the primary computer is being used. Font Sopvare. If the Software includes font software, you may-
* Use the font software as described above on the Permitted Number of Computers and
. *
output such font software o n any output devices connected to such computers. If the Number of Permitted Computers is five or fewer, download the font software to the memory (hard disk or RAM) of one output device connected to at least one of surii computeis io, tire pupuse oi iiaviirg surii iorii suiiwdre reurdn ce>iLieiiiin thr output device, and of one additional p c h output device far every multiple of five represented by the Number of Permitted Computers. Take a copy of the font($ you have used for a particular file to a commercial printer or other service bureau, and such service bureau may use the font($ to process your file, provided such service bureau has informed you that it has purchased 01 been granted a license to use that particular font software. Convert and instail the font software into another format for use in other environments, subject to the following conditions: A computer on which the converted font software is used or instailed shall be considered as one of your Permitted Number of Computers. You agree that use of the font software you have converted shall be pursuant to all the terms and Conditions of this Agreement, that such font software may be used only far your own customary internal business or personal use and that such font software may not be distributed or transferred for any purpose, except in accordance with Paragraph 3 below.
2. Copyright. The Software is owned by Adobe and its suppliers, and its structure, organization and code are the valuable trade Secrets of Adobe and its suppliers. The Software is also
protected by United States Copyright Law and International Treaty provisions. You must treat the Software just as you would any other copyrighted material, such as a book. You may not copy the Software or the Documentation, except as set forth in the “Use of the Software” section. Any copies that you are permitted to make pursuant to this Agreement must contain the same copyright and other proprietary notices that appear on or In the Software. Except for font software converted to other formats as permitted in the “Use of the Software” section, you agree not to modify, adapt 01 translate the Software. You also agree not to reverse engineer, decompile, disassemble or otherwise attempt to discover the Source code of the Software. Trademarks shall he used in accordance with accepted trademark practice, including identification of trademark owner’s name. Trademarkscan only he used to identify printed output produced by the Software. Such use of any trademark does not give you any rights of ownership in that trademark. Except as stated above, this Agreement does not grant you any intellectual property rights in the Software.
3. Transfer. You may not rent, lease, sublicense or lend the Software or Documentation, You may, however, transfer all your rights to use the Software to another person or legal entity provided that you transfer this Agreement, the Software, including all copies, updates and prior versions and all copies of font software converted into other formats, and all Documentation to such person or entity and that you retain no copies, including copies stored on a computer. 4. Multiple Environment Software/Multiple Language Software/Dual Media Software/ Multiple Copies/Upgrades. If this package contains, or, in connection with
the acquisition of the Software contained in this package you receive, two or more aperating environment versions of the Software (e.p., Macintosh@and Windows@),two or more language translation versions of thhe Software, the same Software a n two or more media (e.8.. diskettes and a CD-ROM), andlor you otherwise receive two or more copies of the Software, the total aggregate number of computers on which all versions of the Software are used may not exceed the Permitted Number of Computers. You may make one back-up copy, in accordance with the terms of this Agreement, for each version of the Software you use. You may not rent, lease, sublicense, lend or transfer versions or copies of the Software you do not use, or Software contained on any unused media, except as part of the permanent transfer of all Software and Documentation as described above. If you acquire an upgrade or update for Software,you may use the previous version for ninety (90) days after you receive the new version in order to assist you in the transition to the new version, after which time you no longer have a license to use the previous version, and all copies thereof, including copies installed on computers, must be destroyed. 5. Limited Warranty. Adobe warrants to you that the Software will perform substantially in
accordance with the Documentation for the ninety (90) day period following your receipt of the Software. This warranty does not apply to font software converted into other formats. To make a warranty claim, you must return the Software to the location where you obtained it along with a copy of your sales receipt within such ninety (90) day period. If the Software does not perform substantially in accordance with the Documentation, the entire and exclusive liability and remedy shall be limited to either, at Adobe’s option, the replacement of the Software or the refund of the license fee you paid for the Software. ADOBE AND ITS SUPPLIERS DO NOT AND CANNOT WARRANT THE PERFORMANCE OR RESULTS YOU MAY OBTAIN BY USING THE SOFTWARE OR DOCUMENTATION. THE FOREGOING STATES THE SOLE AND EXCLUSIVE REMEDIES FOR ADOBE’S OR ITS SUPPLIERS’ BREACH OF WARRANTY. EXCEPT FOR THE FOREGOING LIMITED WARRANTY, ADOBE AND ITS SUPPLIERS MAKE NO WARRANTIES. EXPRESS OR IMPLIED, AS TO NONINFRINGEMENT OF THIRD-PARTY RIGHTS, MERCHANTABILITY, OR FITNESS FOR ANY PARTICULAR PURPOSE. Same states or jurisdictions do not allow the exclusion of implied warranties or limitations on how long an implied warranty may last, so the above limitations may not apply to you. To the extent permissible, any implied warranties are limited to ninety (90) days. This warranty gives you specific legal rights. You may have other rights which vary from state to state 01 jurisdiction to jurisdiction. For further warranty information, please contact Adobe’s Customer Support Department. 6. Limitation of Liability. IN NO EVENT WILL ADOBE OR ITS SUPPLIERS BE LIABLE TO YOU FOR ANY CONSEQUENTIAL, INCIDENTAL OR SPECIAL DAMAGES, INCLUDING ANY LOST PROPiTS OR LOST SAViNGS, fiVfiN iE AN ADOBE REPK ADVISED OF THE POSSIBILITY OF SUCH DAMAGES, OR FOR ANY CLAIM BY ANY THIRD PARTY. Some states or pisdictions do not allow the exclusion or limitation of incidental, consequential or special damages, so the above limitations may not apply to you. 7. Governing Law and General Provisions. This Agreement will be governed by thhe laws in force in the State of California excluding the applicatidwf its conflicts of law rules. This Agreement will not be governed by the United Nations Convention on Contracts for the International Sale of Goads, the application of which is expressly excluded. If any part of this Agreement is found void and unenforceable, it will not affect the validity of the balance of the Agreement, which shall remain valid and enforceable according to its terms. You agree that the Software will not be shipped, transferred or exported into any country or used in any manner prohibited by the United States Export Administration Act or any other export laws, restrictions or regulations. This Agreement shall automatically terminate upon failure by you to comply with its terms. This Agreement may only be modified in writing signed by an authorized officer of Adobe. 8. Notice to Government End Users. If this product is acquired under the terms of a: GSA contract- Use, reproduction 01 disclosure is subject to the restrictions set forth in the applicable ADP Schedule contract; DoD contract- Use, duplication or disclosure by the Government is subject to restrictions as set forth in subparagraph (c) (1) (11) of 252.2277013; Civilian agency contrdct- Use, reproduction or disclosure is subject to 52.227-19 (a) through (d) and restrictions set forth in t h e accompanying end user agreement. Unpublished rights reserved under the copyright laws of the United States. Adobe Systems Incorporated, 1585 Charleston Road, P.O. Box 7900, Mountain View, CA 94039.7900.
Adobe is a trademark of Adobe Systems Incorporated. Macintosh is a registered trademark of Apple Computer, Inc. Windows is a registered trademark of Microsoft Corporation. Copyright 01995. Adobe Systems Incorporated. Printed in the U.S.A. 0397 0986 7/95
Understa needed to cre and media for Web pages This full-color, step-by-st will teach you the most successful methods for desig for the World Wide Web. Web graphics and step-by leaders in the field will h methods and techniques of preparing graphics and media for any Web site. Discover how different browsers handle the graphics you create. Get in-depth coverage of different fi learn how to keep y w r file.sizes small and high to ensure that your graphics will look their best and load quickly over the Internet.
Learn to: 0
Create graphics that are optimized for different browsers and platforms
I
I
ompanion CD-ROM includes: Demo software of Adobe PhotoshopTM,Adobe Premiere, Fractal Design Painter, Kai’s Power Tools, KPT Gradient Designer, KPT Power Photos, and DeBabelizer Image, movie, and sound playe. Shareware and freeware utilities
palettes, and hexadecimal chart Shareware and freeware clip art for Web design icons, buttons, horizontal rules, background patterns, and symbols
LyndaWeinman is a respected graphics and animation speciali: whose work on motion pictures,TV commercials, and music vide for major Hollywood studios using desktop national recognition. She is a faculty member a t the
appropriate in size and file format for the Web
ighly regarded Art Center College of Design in Pasadena, CA, ar tured columnist on digital graphics, animation, and the Wet
0
dia, DigitalVideo, Mac User, Mac
Learn to create pattern backgrounds, colored text and backgrounds, transparent images, typography, tables, image maps, and dynamic documents
ek, The Net, Step-by-S
acromedia User’s journal, and Full-Motion Video magazines
I
~
$50.00 USA I $68.95 CAN I L46.99 Net UK (inc of I S B N 1-56,05-,32-,
__
-
~~~
Category: CommunicationslOnline-Internet User Level: Intermediate Expert Covers:The World Wide Web
-
http://www.mcp.comlnewriders
~
Helpful Links
Smile Life