The Non-Designer's Web Book

by Williams, Robin; Tollett, John

• ISBN13: 9780321303370
• ISBN10: 0321303377
• Edition: 3rd
• Format: Paperback
• Copyright: 2005-09-16
• Publisher: Peachpit Pr

Summary

"It's a part of almost everyone's life now: surfing the web is everywhere! But if you think web site design is beyond your reach or if you want your existing web site to look fresher and more professional, this is the book you need!" "Robin and John explain the basics in a friendly and easy-to-follow format, offering tips, techniques, design examples, and a wealth of inspiration, topped with a good sense of humor. This new edition is updated to include current web technology, like CSS style sheets and CSS layers, new software tips, and design ideas for both novices and those who need a little refresher."--BOOK JACKET.

Author Biography

Robin Williams has written dozens of best-selling and award-winning books, including The Little Mac Book, The Little Mac iApps Book, The Non-Designer's Design Book, Robin Williams Mac OS X Book, and many more. John Tollett is a graphic designer, art director, and illustrator. He is the coauthor of numerous books with Robin, including The Little iBook Book the two editions of The Non-Designer's Web Book, and Robin Williams Web Design Workshop.

Table of Contents

Introduction	11	(4)
Part One: Using the World Wide Web
What is the Web?	15	(18)
The Internet	16	(1)
Modems	17	(2)
Modem speeds	18	(1)
Online services and ISPs	19	(1)
What's on the Internet?	20	(1)
The World Wide Web	21	(1)
Getting around the web	22	(1)
Browsers	23	(2)
Browsers are not equal	24	(1)
Web addresses, or URLS	25	(3)
Entering an address	26	(1)
Details of the domain name	26	(1)
More address details	27	(1)
What's a plug-in?	28	(1)
Which file to download? (.sit .hqx .bin .sea .zip .mme)	29	(1)
Online Service or ISP?	30	(1)
Commercial online service	30	(1)
Internet Service Provider	30	(1)
Self-Guided Tour of the Web	31	(1)
Quiz	32	(1)
How to Search the Internet	33	(14)
Searching the Internet	34	(1)
Directories	35	(1)
Google's directory	36	(2)
Search engines	38	(2)
A few extra tips	39	(1)
RTFD: Read the Directions!	40	(1)
For more information on how to search	41	(1)
Addresses for searching	42	(1)
Don't limit yourself	43	(1)
Quiz	44	(3)
Part Two: Making Web Pages
What are Web Pages Anyway?	47	(28)
What are web pages?	48	(2)
How do you actually make a web page?	50	(2)
It can be this easy	52	(2)
Format the text	54	(2)
Paragraph vs. Break	54	(2)
Change the colors	56	(2)
Create links	58	(2)
Make an email link	60	(2)
Add a graphic	62	(2)
What are layers?	64	(4)
Design a simple page using layers	64	(4)
Make a table	68	(2)
Absolute vs. relative table widths	69	(1)
What are frames?	70	(2)
Add code, if you like	72	(1)
Build more pages	72	(1)
Then what?	72	(1)
Self-Guided Tour of the Web	73	(1)
Quiz	74	(1)
Things to Know Before You Begin Your Site	75	(22)
Organizing your files	76	(1)
Organizing by folders	76	(1)
Naming your files	77	(2)
Organizing by name	78	(1)
Saving and titling pages	79	(2)
What does a browser do?	81	(2)
What is a server?	83	(1)
How to find a server	84	(2)
Cost of hosting a site	84	(1)
Ask these questions of your host	85	(1)
Domain names and your web address	86	(1)
Your own domain name	87	(1)
Planning ahead	88	(4)
Your web audience	88	(1)
Making an outline	89	(1)
Collecting and storing material	89	(1)
Saving source files	90	(2)
Checklist: Before you begin	92	(1)
Self-Guided Tour of the Web	93	(1)
Quiz	94	(3)
Part Three: Design Issues on the Web
Print vs. Web and How it Affects Design	97	(16)
Cost of publishing	98	(2)
Color!	100	(1)
Revisions, updates, and archives	101	(1)
Distribution	102	(1)
Customer response	103	(1)
A world of information	104	(1)
File size	105	(1)
Sound and animation	106	(1)
Loads of information	107	(1)
Location of designer	108	(1)
The print advantage	109	(2)
Self-Guided Tour of the Web	111	(1)
Quiz	112	(1)
Basic Design Principles for Non-Designers	113	(22)
Alignment	114	(4)
Proximity	118	(3)
Paragraph vs. Break	121	(1)
Repetition	122	(4)
Contrast	126	(4)
Create a focal point	126	(4)
Combine the principles	130	(2)
Spell it right!	132	(1)
Self-Guided Tour of the Web	133	(1)
Quiz	134	(1)
Designing the Interface & Navigation	135	(20)
Start with a simple plan	136	(2)
Horizontal format	138	(4)
One-Size Surfing	138	(3)
Tip on initial design	141	(1)
Navigation design	142	(1)
Navigation styles	143	(1)
Navigate with frames	144	(1)
Repetition	145	(1)
Where are you?	145	(1)
More than one way	146	(2)
The site decides the navigation style	148	(2)
Index or site map	150	(1)
Selective linking	151	(1)
Learn from others	152	(1)
Self-Guided Tour of the Web	153	(1)
Quiz	154	(1)
How to Recognize Good & Bad Design	155	(12)
Bad design	156	(4)
Good design	160	(2)
Not-So-Good Design Checklist	162	(2)
So-Much-Better Design Checklist	164	(3)
Part Four: Color, Graphics, and Type
Color on the Web	167	(18)
The aesthetics of color	167	(2)
CMYK color	169	(1)
RGB color	170	(1)
RGB values	170	(1)
On the web	170	(1)
Indexed color	171	(1)
Bit depth	172	(3)
Monitor resolution	175	(3)
Resolution of images	178	(1)
Browser-safe colors	179	(5)
How to get browser-safe colors	179	(1)
Creating web-safe colors	180	(2)
Hybrid web-safe colors	182	(1)
A reminder	183	(1)
Quiz	184	(1)
Graphic Definitions You Must Know	185	(16)
File formats	186	(2)
Terminology of graphic file formats	187	(1)
GIF file format	188	(2)
When to choose the GIF format	189	(1)
JPEG file format	190	(2)
Progressive JPEGS	190	(1)
Advantages of JPEGS	190	(1)
When to choose the JPEG format	191	(1)
Anti-aliasing	192	(1)
File size of images	193	(1)
A little lesson on bits and bytes	193	(1)
How to find the correct file size	193	(1)
Image maps	194	(2)
Server-side vs. client-side image maps	194	(2)
Alternate labels	196	(1)
Thumbnails	197	(2)
Self-Guided Tour of the Web	199	(1)
Quiz	200	(1)
How to Prepare Image Files for the Web	201	(44)
Web graphic specs	202	(1)
If you don't want to make your own graphics	203	(1)
Don't have Photoshop?	204	(1)
Alternative graphics software	204	(1)
Software for converting file formats	204	(1)
Photoshop: An investment in your future	204	(1)
How to get artwork or photographs into your computer	205	(4)
Send your film or prints to a service bureau	205	(1)
Scan it yourself	206	(1)
Scanning tips	207	(1)
Use a digital camera	208	(1)
Step-by-Step Directions	209	(1)
Make a GIF	210	(8)
Make a GIF with a solid background color	210	(3)
Make a GIF with a transparent background	213	(5)
Make a JPEG	218	(2)
Other file formats & tips	220	(3)
PNG-8 and PNG-24	220	(1)
WBMP and JPEG 2000	221	(1)
Weighted optimization	221	(2)
Make an image map	223	(3)
Use Photoshop to make an image map	223	(2)
Use Dreamweaver to make an image map	225	(1)
Background graphics	226	(14)
Create a horizontal graphic as a background image	226	(2)
Use a vertical graphic as a background image	228	(1)
Create a seamless, textured background	229	(2)
The Tile Maker filter	231	(1)
Make graphics with color backgrounds that match the background color of your web page	232	(1)
But what if the background of the web page is a colored texture?	233	(1)
Create a giant image background	234	(2)
Avoid halos or artifacts	236	(4)
Make an animated GIF	240	(5)
Typography on the Web	245	(18)
Readability vs. legibility	246	(3)
Readability	246	(1)
Legibility	247	(1)
Breaking typographic rules	247	(1)
Be conscious	247	(1)
Page text as a graphic	247	(2)
Quotation marks!	249	(1)
Default fonts and sizes	250	(4)
Cross-platform fonts	252	(1)
Monitor resolutions	252	(1)
Font rendering on different platforms	253	(1)
Other things to know	254	(2)
Proportional vs. monospaced type	254	(1)
Logical vs. physical styles	254	(1)
Other special characters	255	(1)
To underline or not to underline	255	(1)
Cascading Style Sheets	256	(5)
What cascades?	256	(2)
CSS code	258	(1)
CSS syntax	259	(1)
CSS and browser compatibility	259	(1)
Attach a style sheet	260	(1)
Self-Guided Tour of the Web	261	(1)
Quiz	262	(1)
Advanced Tips & Tricks	263	(30)
Fun with tables	264	(2)
Richer color	266	(2)
Easy-to-read small type	268	(2)
Change anti-aliasing methods	268	(1)
Use a duplicate layer	269	(1)
Manually retouch text graphics	269	(1)
Use an aliased font for small type	269	(1)
Low-source proxy	270	(2)
Other low-source images	271	(1)
Slicing graphics	272	(7)
Slice a GIF file for animation	272	(4)
Slice a graphic for layout freedom	276	(3)
Quick Photoshop tips	279	(3)
Keyboard shortcuts	279	(1)
Reset the values in a dialog box	279	(1)
Lock transparent pixels	280	(1)
Find the right layer	281	(1)
Rollovers and image swaps	282	(4)
Create a rollover	283	(2)
Create an image swap	285	(1)
Easy HTML enhancements	286	(2)
Specify fonts	286	(1)
Make a link open in a new window	286	(1)
Add space around a graphic	287	(1)
Forms	288	(1)
Flash animation	289	(4)
Part Five: You're Done---Now What?
Test & Fix Your Web Site	293	(8)
Site management software	294	(2)
Testing your site	296	(2)
First, move your folder	296	(1)
Offline browser check	296	(1)
Watch someone else browse your site	297	(1)
Different browsers, different looks	297	(1)
Fixing your site	298	(1)
Fix-it tips	299	(1)
Quiz	300	(1)
How to Upload & Update Your Site	301	(12)
Before you upload	301	(1)
Gather your files	302	(2)
Uploading files	304	(3)
Test your site online	307	(3)
Updating files	310	(2)
Additional web sites on your site	310	(2)
Quiz	312	(1)
How & Why to Register Your Site	313	(22)
Search tools	314	(3)
Submission services that do it for you	314	(1)
More is not better	315	(1)
Specialized search tools	315	(1)
Link to me, I'll link to you	315	(1)
Popularity contest	316	(1)
What search tools look for	317	(1)
Title of your page	317	(1)
First paragraph of your home page	317	(1)
Stacking the deck	317	(1)
Meta tags	318	(2)
Getting your site noticed	320	(1)
Cross-marketing!	320	(1)
Awards	321	(1)
Resubmit regularly	321	(1)
Paid placement in a search tool	321	(1)
Search for your own site	321	(1)
Quiz	322	(2)
The Stuff at the End
Quiz answers	324	(1)
Index	325	(10)
Colophon	335