Master VISUALLY^TM Web Design

by Carrie F. Gatlin; Michael S. Toot

• ISBN13: 9780764536106
• ISBN10: 0764536109
• Format: Paperback
• Copyright: 2002-01-01
• Publisher: Visual

Summary

Master VISUALLY Web Design offers you complete visual reference covering Web design strategy, and HTML and JavaScript basics. It also equips you with Web design principles, usability, graphics, multimedia, and servers, all of which will make you a master of Web Design. Learn from real-world design examples and hundreds of screenshots all in a wonderfully illustrated two-color layout. Included with the book is a CD that includes Web site templates designed by authors, Carrie Gatlin and Michael Toot. Other included features are examples of the most popular web designing tools, Dreamweaver, Adobe GoLive, Fireworks, GifBuilder, CuteFTP, Fetch, HomeSite, and BBEdit and a fully searchable e-version of the book.

Author Biography

<b>Carrie Gatlin</b> is an established freelance designer and writer. She has worked as the Web Producer for the Webby Awards, the "Oscars of the Internet community" and before joining the Webby Awards, she was a technical producer for CNET Builder.com, a resource site for professional Web developers. Carrie also authors product reviews and features on Web production techniques for Builder.com, the most recent of which is about implementing effective Web design strategies. <p> gt;Michael S. Toot</b> is an author and software program manager in the Seattle area. He is an MCSE and MCP+I and has been involved with Microsoft operating systems since 1992. He has written a book on Windows 2000 Server and enjoys learning new programs and operating systems, even those not from Microsoft. When not working or writing books, he is reading, sailing, writing movie reviews, fiction, and nonfiction, and conducting adventures in home renovation and repair on his ninety-three year old home.

Table of Contents

1 CONCEPTUALIZE YOUR WEB SITE
Plan a Web Strategy
An Introduction to Web Strategies	4	(2)
Craft a Mission Statement	6	(2)
Define Your Goals	8	(2)
Isolate Your Niche	10	(2)
Define Your Brand Identity	12	(2)
Define User Goals	14	(2)
Create User Personas	16	(1)
Create User Scenarios	17	(1)
Isolate Site Components	18	(2)
An Introduction to Web Design Principles
Be Interactive	20	(2)
Using Consistent Design Elements	22	(2)
Relinquish Control	24	(2)
Build for Flexibility	26	(2)
Using Established Behavior Patterns	28	(2)
Keep It Simple	30	(1)
Show Visitors Where They Are	31	(1)
Think Globally	32	(4)
2 AUTHOR WEB PAGES
Master HTML Basics
An Introduction to HTML	36	(2)
View HTML Source Code	38	(2)
Create an HTML Skeleton	40	(2)
Set Margins	42	(1)
Define the Background	43	(1)
Create Paragraphs and Line Breaks	44	(2)
Add Emphasis to Text	46	(2)
Set Font Attributes	48	(2)
Add Headings	50	(1)
Add a Horizontal Rule	51	(1)
Add Hyperlinks and Mailtos	52	(2)
Change the Color of Links	54	(1)
Create Internal Pa e Links	55	(1)
Add an Image	56	(2)
Create a List	58	(2)
Create a Table	60	(2)
Work with Rows and Columns	62	(2)
Add Comments	64	(1)
Using Special Characters	65	(1)
Add <meta> Tags	66	(2)
Code HTML Forms
An Introduction to Forms	68	(2)
Set Up a Form	70	(2)
Add a Text Input Field	72	(2)
Add a Password Field	74	(1)
Add a Text Box	75	(1)
Add a Submit Button	76	(2)
Add Check Boxes	78	(2)
Add Radio Buttons	80	(2)
Create a Drop-Down Menu	82	(2)
Add Style to Form Elements	84	(2)
Using Fieldsets and Legends	86	(1)
Using Labels	87	(1)
Disable Form Fields	88	(1)
Using Hidden Fields	89	(1)
Allow Users to Send Attachments	90	(2)
Send Form Data to an E-mail Address	92	(2)
Create HTML Frames
An Introduction to Frames	94	(2)
Using <noframes> Tags	96	(2)
Create a Frameset	98	(2)
Size Your Frames	100	(2)
Control Frame Borders	102	(1)
Nest Frames	103	(1)
Create an Inline Frame	104	(2)
Target Frames	106	(2)
Define a Base Target	108	(2)
Using Frames for Navigation	110	(1)
Using Frames for Banner Ads	111	(1)
Using Cascading Style Sheets
An Introduction to Cascading Style Sheets	112	(2)
Define Inline Style Attributes	114	(2)
Create a Document-Level Style Sheet	116	(2)
Create an External Style Sheet	118	(2)
Using Tag. Selectors	120	(2)
Define Classes	122	(2)
Define ID Attributes	124	(1)
Set Style Properties with <div> and <span> Tags	125	(1)
Comment within Style Sheets	126	(1)
Set Page Margins	127	(1)
Define Font Properties	128	(2)
Define Hyperlink Pseudo-Classes	130	(2)
Define Multiple Classes for Hyperlinks	132	(2)
Define Paragraph Pseudo-Classes	134	(2)
Create Lists with Styles	136	(2)
Add Scrolling Elements	138	(2)
Position Page Elements	140	(2)
Layer Elements with the z-index Property	142	(2)
Control Visibility	144	(4)
3 BUILD AN EFFECTIVE USER INTERFACE
Design for Usability
An Introduction to Usability on the Web	148	(2)
Code for Accessibility	150	(2)
Write Text for Scannability	152	(2)
Create Structured Text Bites	154	(2)
Eliminate Dead Ends	156	(2)
Elicit Feedback from Visitors	158	(2)
Create a Printer-friendly Version of a Web Page	160	(2)
Using Alt Attributes	162	(2)
Specify Languages	164	(2)
Offer Alternative Language Versions	166	(2)
Structure Information
An Introduction to Information Architecture	168	(2)
Understanding Organizational Structure	170	(6)
Map an Information Hierarchy	176	(2)
Develop a Labeling System	178	(2)
Using Scope Notes	180	(1)
Using Icon Labels	181	(1)
Design a Search Interface	182	(2)
Display Search Results	184	(2)
Design Navigational Schemes
An Introduction to Web Navigation	186	(2)
Create a Side Navigation Bar	188	(2)
Create a Basic Tabbed Navigation Bar	190	(2)
Implement a Site' Map	192	(2)
Create a Bread-Crumb Trail or Topic Path	194	(2)
Reinforce Position	196	(2)
Using URLs to Reinforce Placement	198	(2)
Optimize Page Titles	200	(2)
Clarify Text Links	202	(2)
Using Link Titles	204	(2)
Using a Logo as a Homepage Link	206	(2)
Incorporate Multiple Navigation Schemes	208	(4)
4 DESIGN A VISUAL INTERFACE
Design Page Layouts
An Introduction to Color Theory	212	(2)
Using the Web-Safe Color Palette	214	(2)
Consider Color Significance	216	(2)
Explore Contrast	218	(2)
Identify an Essential Color Palette	220	(2)
Understanding Available Page Space	222	(2)
Establish Visual Hierarchy	224	(2)
Using White Space	226	(2)
Using Tables for Page Layout	228	(2)
Using CSS for Page Layout	230	(2)
Using Effective Typography
An Introduction to Typography on the Web	232	(2)
Specify Cross-Platform Fonts	234	(2)
Using Scale	236	(2)
Using Pre-formatted Text	238	(2)
Using Block Quotes	240	(2)
Using Anti-alias Graphic Text	242	(2)
Create a Drop Cap with CSS	244	(2)
Create a GIF Drop Cap	246	(2)
Create Pull Quotes	248	(2)
Using Small Caps	250	(2)
Define Letter-Spacing	252	(2)
Define Word-Spacing	254	(2)
Define Line-Height	256	(2)
Overlap Text	258	(2)
Embed a Font	260	(2)
Convert a Font to Use on the Web	262	(2)
Create Web Graphics
An Introduction to Web Graphics	264	(2)
Take a Screenshot	266	(2)
Crop an Image	268	(2)
Optimize a JPEG	270	(2)
Optimize a GIF	272	(2)
Resize a GIF	274	(2)
Add Transparency to a GIF	276	(2)
Create a Transparent Spacer GIF	278	(2)
Create an Animated GIF	280	(2)
Create an Image Map	282	(2)
Create a Thumbnail Image	284	(2)
Using New Web Graphics Standards
Introducing the New Web Graphics Standards	286	(2)
Create a PNG Image	288	(2)
Add a PNG Image to an HTML page	290	(2)
Download the Adobe SVG Viewer	292	(2)
Create an SVG File	294	(4)
5 ADD INTERACTIVITY
Master Javascript Basics
An Introduction to Client-Side JavaScript	298	(2)
Add Scripts to a Web Page	300	(2)
Using Escape Sequences	302	(2)
Script an Alert Dialog Box	304	(2)
Write to a Document	306	(2)
Declare JavaScript Variables	308	(2)
Create a JavaScript Object	310	(2)
Create a JavaScript Array	312	(2)
Create an if Statement	314	(2)
Create a JavaScript Function	316	(2)
Test JavaScript Code	318	(2)
Create an External JavaScript File	320	(2)
Hide JavaScript from Old Browsers	322	(2)
Using <noscript> Tags	324	(2)
Implement JavaScript Applications
Add Text to the Status Window	326	(2)
Prompt the User for a Response	328	(2)
Get Confirmation	330	(2)
Add a Last Modified Date	332	(2)
Script a Scrolling List	334	(2)
Script Between Frames	336	(2)
Script Around Frames	338	(2)
Capture Keystrokes	340	(2)
Open a New Window	342	(2)
Close a Window	344	(2)
Redirect to a New Page	346	(2)
Reference the DOM	348	(2)
Validate a Form	350	(2)
Preload Images	352	(2)
Script Image Mouseovers	354	(2)
Check for Browser Versions	356	(2)
Set a Cookie	358	(4)
Read a Cookie	362	(2)
Add Multimedia
Introduction to Sound	364	(2)
Understanding Multimedia Plug-ins	366	(2)
Record and Save Sound Files	368	(2)
Add Sound Files as Links on Web Pages	370	(2)
Add Sound Files as Objects on Web Pages	372	(2)
Add Video Files as Links on Web Pages	374	(2)
Add Video Files as Objects on Web Pages	376	(2)
Introduction to Flash Animations	378	(2)
Understanding Flash Distribution Methods	380	(2)
Start and Save a Flash File	382	(2)
Publish a Flash Movie	384	(2)
Publish a Flash Movie in HTML Format	386	(4)
Export a Flash Movie to Another Format	390	(2)
Introduction to Java Applets	392	(2)
Create a Java Applet	394	(2)
Compile Java Code	396	(2)
Embed an Applet in a Web Page	398	(2)
Change Applet Parameters	400	(2)
Using Synchronized Media
An Introduction to SMIL	402	(1)
The Anatomy of a SMIL Document	403	(1)
Create a SMIL Document	404	(2)
View a SMIL Document	406	(4)
6 WORK WITH WEB SERVERS
Access Your Web Server
An Introduction to Web Servers	410	(1)
Structure Your Web Site Directories	411	(1)
Create an FTP Virtual Directory	412	(4)
Using Telnet for Server Access	416	(2)
Navigate Directories on a Web Server	418	(2)
Using UNIX Commands	420	(2)
Stop and Start a Web Server	422	(2)
Implement Server-side Solutions
Create a Server-Side Include	424	(2)
Add SSI MIME Types to Your Server	426	(2)
Set Execute Permissions	428	(2)
View an SSI Web Page	430	(4)
7 EXPLORE EMERGING WEB TECHNOLOGIES
Using the Wireless Application Protocol
An Introduction to WAP and WML	434	(1)
A Basic WML Document	435	(1)
A Quick Look at Interoperability and Usability	436	(2)
Add WML MIME Types to Your Server	438	(2)
Create a Basic WML Document	440	(2)
View a WML Document	442	(2)
Align and Format Text	444	(2)
Move around Documents by Using Anchors and Links	446	(2)
Assign Links to Access Keys	448	(2)
Using a Wireless Bitmap Converter	450	(2)
Add an Image to a Document	452	(2)
Add a Table to a Document	454	(2)
Using ASP to Generate WML Text	456	(2)
Build XML Documents
Introduction to XML	458	(2)
Create an XML Document	460	(2)
Verify an XML Document	462	(2)
Declare a Root Element	464	(2)
Declare Non-Root Data Elements	466	(2)
Describe Data Elements with Attributes	468	(2)
Create CDATA for Special Characters	470	(2)
Create a Simple XML Processor	472	(2)
Create a Simple XSL Style Sheet	474	(2)
Add a Comment to an XML Style Sheet	476	(2)
Work with Child Elements Using XSL	478	(2)
Define a Namespace	480	(2)
Define an Entity Data Type	482	(2)
Declare an Inline DTD	484	(2)
Declare and Save an External DTD File	486	(2)
Code Pages in XHTML
Exploring Differences between HTML and XHTML	488	(2)
Convert HTML Documents to XHTML	490	(2)
Understanding XHTML DTDs	492	(2)
Validating XHTML Web Pages	494	(4)
8 USING WEB DESIGN APPLICATIONS
Code Web Pages with Macromedia Homesite
An Introduction to HomeSite	498	(2)
Customize Your Workspace	500	(4)
Work with Toolbars	504	(2)
Configure and Use External Browsers	506	(2)
Configure an Internal Browser	508	(2)
Insert Special Characters	510	(2)
Using Extended Search and Replace	512	(2)
Create and Add Code Snippets	514	(2)
Validate a Document	516	(2)
Create a Project	518	(2)
Configure an FTP Connection	520	(2)
Upload a Project	522	(2)
Design Web Pages with Dreamweaver
Introduction to Dreamweaver	524	(2)
Set Up a Local Site	526	(2)
Create a New Web Page	528	(2)
Save a Web Page or Revert to a Previous Save	530	(2)
View and Edit Source Code	532	(2)
Insert an Image into a Web Page	534	(2)
Create Hyperlinks to Other Pages	536	(2)
Insert a Table into a Web Page	538	(2)
Set Table Properties	540	(2)
Create an HTML Template	542	(2)
Create a Rollover Image	544	(2)
Using the Site Map View	546	(2)
Make Design Notes	548	(2)
Edit Graphics with Photoshop
Introduction to Photoshop	550	(2)
Set Preferences	552	(2)
Undo a Command or Revert to Last Saved File	554	(2)
Use Rulers and Guides	556	(2)
Create a New Image	558	(2)
Create and Add to a Layer	560	(2)
Apply Blur and Sharpen Filters	562	(2)
Apply Dry Brush and Distortion Filters	564	(2)
Add Type to an Image	566	(2)
Crop an Image	568	(2)
Create and Save Sliced Images	570	(2)
Optimize File Sizes for the Web	572	(2)
APPENDIX A
Special Characters	574	(6)
APPENDIX B
Cascading Style Sheet Reference	580	(4)
APPENDIX C
What's on the CD-ROM	584	(2)
Master Visually Web Design on the CD-ROM	586	(2)
End-User License Agreement	588