Professional Web Design

by Eccher, Clint

• ISBN13: 9781584503651
• ISBN10: 1584503653
• Edition: 2nd
• Format: Paperback
• Copyright: 2004-11-16
• Publisher: Cengage Learning

Summary

Whether you are an intermediate Web designer looking to take your sites to the next level or a more experienced designer looking to improve your professional skills, you will find the tools to meet your needs in Professional Web Design: Techniques and Templates, Second Edition. This completely updated version of the best-selling book features the 50 professional-quality, license-free Web design templates from the original, as well as 15 new templates, all of which can be easily customized and extended. Each ready-to-use design includes a homepage, and one second-level page, and the framework to build subsequent pages. All of the specific techniques that are required for building these and other highly usable sites have been updated to cover the latest technologies, including HTML, XHTML, JavaScript, CSS, Photoshop CS, and PHP. Also included are five new HTML e-mail templates, an increasingly important marketing tool. Detailed tutorials and hands-on projects teach both basic and sophisticated design concepts, including how to create designs for low, medium, or high content sites and the strengths and weaknesses of each. The new edition also includes four new chapters on Cascading Style Sheets, using client-side scripting, creating dynamic sites, and an overview of the new Web designs. It covers important topics such as client- and server-side scripting, security, and using databases to update a site,s content.

Table of Contents

Preface	xix
Acknowledgments	xxi
1 Overview of Web Development Today	1	(16)
Defining Web Design	2	(2)
Knowing the Seven Rules of Web Design	4	(2)
Understanding Three Web-Design Philosophies	6	(9)
Usability Philosophy	7	(3)
Multimedia Philosophy	10	(3)
Mortised Philosophy	13	(2)
Summary	15	(2)
2 Designing for the Past, Present, and Future	17	(22)
Feeling Browser Pains	18	(2)
Using Usage Statistics	20	(3)
Branching Pages	23	(2)
The Current State of Netscape 4	24	(1)
Understanding Bandwidth	25	(3)
Building on Previous Design Weaknesses	28	(10)
Frames	29	(1)
Image Buttons	30	(1)
Background Images	31	(3)
Uncontrolled Color	34	(1)
Uncompressed Images	35	(1)
Thumbnails	36	(2)
Summary	38	(1)
3 What Is Needed to Build Mortised Sites?	39	(22)
Understanding the Concept of Mortising Images	40	(3)
Understanding the Concept of Nesting Tables	43	(3)
Satisfying Hardware Requirements	46	(2)
Satisfying Software Requirements	48	(1)
Understanding HTML	49	(6)
Using a Limited Number of Tags	51	(3)
Nesting Tags	54	(1)
Block- and Line-Level Tags	54	(1)
Looking Toward the Future of HTML (XHTML)	55	(2)
HTML/XHTML Differences	56	(1)
Understanding Graphics	57	(1)
Understanding CSS	57	(1)
Deprecated Tags and Attributes	57	(2)
Understanding Include Files	59	(1)
Summary	60	(1)
4 Understanding Graphics	61	(28)
Learning about Vector and Bitmap Images	61	(4)
Portable Network Graphics	64	(1)
Learning about JPEG and GIF Formats	65	(13)
Using GIF Files	65	(7)
Knowing How GIF Compression Works	72	(1)
Using JPEGs	73	(5)
Misusing Image Formats	78	(8)
Understanding Graphics/Compression Software	86	(1)
Summary	87	(2)
5 Things to Consider Before Beginning	89	(30)
Using Requirements	89	(7)
Collecting the Requirements	91	(2)
Obtaining Frontend Requirements	93	(1)
Creating a Flowchart	94	(2)
Branding a Site	96	(1)
What Is Branding?	96	(1)
Brand Overview-The Key Concepts of a Brand	96	(1)
Building the Brand	97	(3)
Logo	97	(1)
Colors	97	(2)
Typographic Standards	99	(1)
Identify the Audience	99	(1)
Consistency Cannot Be Overstated	99	(1)
Originality	99	(1)
Maintain the Brand	100	(1)
Knowing Bandwidth Requirements	100	(2)
Deciding on Resolution	102	(6)
Designing Fixed versus Relative Sites	106	(2)
Creating Versions of a Site to Satisfy Differing Resolutions	108	(1)
Deciding on Color Depth	108	(2)
Designing for Scalability	110	(8)
Using Nested Tables	111	(4)
Using Include Files	115	(1)
Creating a Flexible Design	116	(2)
Summary	118	(1)
6 Enhancing Usability	119	(16)
Simplifying Architecture	120	(3)
Use a Consistent Naming Convention	120	(1)
Limit the Clicking	121	(1)
Avoid Linking the User out of the Section	121	(1)
Creating Cascading Architecture versus Flat Architecture	122	(1)
Creating Layout	123	(3)
Scrolling versus Nonscrolling	124	(1)
Positioning Content	124	(2)
Developing Navigation	126	(4)
Creating Consistency	126	(1)
Using Text for Menu Items	127	(1)
Deciding Whether to Use a Horizontal or Vertical Structure	127	(1)
Allowing Enough Width	128	(1)
Understanding the Different Types of Menus	128	(2)
Designing for Accessibility	130	(2)
Priority 1	130	(2)
Designing for Content	132	(2)
Summary	134	(1)
7 Using Cascading Style Sheets	135	(44)
History of CSS	135	(2)
Types of Style Sheet	137	(3)
External	137	(1)
Embedded	138	(1)
Inline	139	(1)
Style Sheets Used in This Book	139	(1)
CSS Rules	140	(5)
Grouping Selectors	141	(1)
Pseudo-classes	141	(1)
Descendant Selectors	141	(3)
Inheritance and Specificity	144	(1)
CSS Used in This Book	145	(1)
CSS Positioning	146	(11)
The Box Model	146	(3)
Using Margins for Centering	149	(1)
Float and Clear	150	(3)
Absolute Positioning	153	(4)
Creating a CSS Template	157	(21)
CSS Template Take One	158	(3)
CSS Template Take Two	161	(10)
Dealing with Netscape 4.x	171	(5)
Why Are the Elements Out of Order?	176	(2)
Summary	178	(1)
8 Gathering Requirements and Creating a Comp	179	(18)
Gathering and Basing a Site on Requirements	181	(3)
Creating Comp(s) for the Client	184	(9)
Creating a Source Directory	185	(1)
Collecting and Documenting Stock Images	186	(2)
Selecting Colors	188	(1)
Deciding Layout	189	(2)
Developing Layers	191	(2)
Using Masks	193	(1)
Receiving a Decision on the Chosen Comp and Making Edits	193	(2)
Summary	195	(2)
9 Breaking Up the Comp, Testing, and Uploading	197	(22)
Breaking Up the Comp into HTML, Graphics, and CSS	197	(13)
Placing Guides	198	(3)
Adding Slices	201	(3)
Saving and Compressing Images	204	(1)
Creating the Parent Table	205	(3)
Using CSS to Format Content	208	(2)
Testing the Page in Both IE and Netscape	210	(1)
Looking for Certain Issues	210	(1)
Saving Components as Include Files	211	(2)
Building Second- and Third-Level Pages from the Home Page Template	213	(1)
Working with the Client as the Site Is Built	213	(1)
Testing the Entire Site	214	(1)
Uploading the Site	215	(3)
Uploading to an Internal Server Using File-Management Software	215	(1)
Uploading to an External Server Using FTP Software	215	(3)
Summary	218	(1)
10 Tips and Tricks	219	(18)
Creating Source Image Files That Can Be Easily Customized and Resaved	219	(1)
Breaking Out Sections of Source Image Files	220	(2)
Creating Smart Navigation	222	(1)
Reusing Images	223	(4)
Positioning with a Spacer GIF File	227	(2)
Turning on Tables to Troubleshoot Sites	229	(1)
Indenting and Commenting Code	230	(1)
Removing Spaces and Comments	231	(1)
Layering a Transparent GIF over a JPEG Background	232	(3)
Summary	235	(2)
11 More Tips and Tricks	237	(16)
Controlling Backgrounds with blankbg	237	(2)
Using an Image as the Background Color	239	(1)
Naming Conventions	240	(1)
Limiting Gradations	241	(1)
Closing Tables for Netscape	242	(1)
Forcing the Background Color	242	(1)
Using Black-and-White Images	243	(1)
Building Flexible Designs	244	(1)
Understanding Form Fields	245	(1)
Placing Styles in Form Elements	246	(1)
Designing Second-Level Titles	247	(1)
Deciding Whether to Use a GIF or JPEG File	248	(1)
Safely Downsampling Images	249	(1)
Including [img] Attributes 250
Using Addresses for E-mail Hyperlinks	250	(1)
Using Counter Sites to Determine Site Usage and Statistics	251	(1)
Taking Advantage of Include Files	251	(1)
Changing Color Schemes and Images for Rebranding	251	(1)
Summary	252	(1)
12 Case Study-Low Content	253	(22)
Creating the Design for a Low Amount of Content	253	(1)
Understanding the Strengths and Weaknesses of the Chosen Design	254	(1)
Adding Guides and Slices	255	(4)
Saving and Compressing Images	259	(2)
Creating the Parent Table	261	(2)
Creating and Linking the Style Sheet	263	(1)
Creating the Menu Table	263	(4)
Adding an Image to the Center Column	267	(1)
Creating the Content (Right-Area) Table	268	(4)
Creating the Footer Information	272	(1)
Creating the Second-Level Template	273	(1)
Summary	274	(1)
13 Case Study-Medium Content	275	(24)
Adding Guides and Slices	276	(2)
Creating the Parent Table	278	(2)
Creating the Style Sheet	280	(1)
Creating the Header Table	281	(1)
Creating the Menu Table	282	(5)
Creating the Content Table	287	(8)
Creating the Bottom Row	295	(1)
Creating the Footer Information	295	(1)
Creating the Second-Level Template	296	(2)
Summary	298	(1)
14 Case Study-High Content	299	(20)
Adding Guides and Slices	300	(2)
Creating the Parent Table	302	(2)
Creating the Style Sheet	304	(1)
Creating the Top Header Table	304	(2)
Creating the Bottom Header Table	306	(2)
Creating the Menu Table	308	(2)
Creating the Content Table	310	(3)
Creating the Footer Information	313	(1)
Creating the Templates for the Rest of the Site	314	(3)
Summary	317	(2)
15 Using Client-Side Scripts	319	(30)
JavaScript	319	(2)
Document Object Model (DOM)	320	(1)
Rollover Images	321	(5)
DHTML-JavaScript and CSS	326	(10)
The Style Object	327	(4)
Writing the Base HTML	331	(1)
Adding an Embedded Style Sheet	332	(1)
Changing Text Size Using the Style Object	332	(4)
Changing Themes Using the Style Object	336	(5)
Moving Content Using the Style Object	337	(2)
Style Object Properties	339	(2)
Form Validation	341	(7)
Regular Expressions	345	(3)
Summary	348	(1)
16 Exploring Server-Side Technologies with PHP	349	(62)
Common Gateway Interface	350	(1)
About PHP	351	(2)
PHP Syntax	353	(1)
Comments	354	(1)
Using phpinfo ()	354	(1)
Basic PHP Constructs	355	(12)
Using print() or echo( )	356	(1)
Variables and Literals	356	(1)
Using Quotes	357	(1)
The Escape Character	357	(1)
Operators and Expressions	358	(2)
Operator Precedence	360	(1)
Conditionals	361	(2)
Arrays	363	(2)
Loops	365	(1)
Includes	366	(1)
Working with Forms	367	(11)
Create the Form	367	(2)
Using GET and POST	369	(1)
Receiving Form Variables	369	(3)
Submitting Array Values From Forms	372	(1)
Self-Posting Forms	372	(6)
Creating a Template with PHP	378	(22)
Creating thumbnails.php	378	(2)
Creating index.php	380	(7)
Creating photo.php	387	(6)
Using PHP to Send E-mail	393	(7)
Connecting to Databases with PHP and MySQL	400	(9)
Creating and Dropping MySQL Databases	400	(2)
Creating and Dropping Tables	402	(1)
INSERT	403	(2)
SELECT	405	(4)
DELETE	409	(1)
UPDATE	409	(1)
Summary	409	(2)
17 Customizing the Designs in This Book	411	(16)
Examples of Customized Designs	412	(3)
Steps to Customizing a Design	415	(1)
Steps to Customizing a Second-Level Content Template	416	(1)
Tips to Customizing a Photoshop File	417	(6)
Working with HTML and CSS	423	(3)
Summary	426	(1)
18 New Designs, Second-Level Content, and Form Templates	427	(44)
Designs	428	(42)
Design 1 (Generic)	428	(3)
Design 2 (Cruziero)	431	(3)
Design 3 (Creepers)	434	(3)
Design 4 (106 Aircraft Salvage)	437	(2)
Design 5 (McHalewood-Sons Ltd. Fly Reels)	439	(3)
Design 6 (Corporate)	442	(2)
Design 7 (Canyon Odyssey)	444	(3)
Design 8 (Staccato)	447	(3)
Design 9 (Creative Portfolio)	450	(3)
Design 10 (Nik Phlik!)	453	(2)
Design 11 (Sci Lab Technical Community)	455	(3)
Design 12 (Vinificazione Vineyard)	458	(2)
Design 13 (Xavieria Jewelers)	460	(3)
Design 14 (Makalu Bay Aquarium)	463	(3)
Design 15 (Renewable Timber Resources)	466	(2)
Design 16 (For Sale By Owner)-Design 12 Revision	468	(2)
Summary	470	(1)
19 Original Designs and Second-Level Content Templates	471	(108)
Designs	472	(101)
Design 1	472	(2)
Design 2	474	(2)
Design 3	476	(2)
Design 4	478	(2)
Design 5	480	(2)
Design 6	482	(2)
Design 7	484	(2)
Design 8	486	(2)
Design 9	488	(2)
Design 10	490	(2)
Design 11	492	(2)
Design 12	494	(2)
Design 13	496	(2)
Design 14	498	(2)
Design 15	500	(2)
Design 16	502	(2)
Design 17	504	(2)
Design 18	506	(2)
Design 19	508	(2)
Design 20	510	(2)
Design 21	512	(2)
Design 22	514	(2)
Design 23	516	(3)
Design 24	519	(2)
Design 25	521	(2)
Design 26	523	(2)
Design 27	525	(2)
Design 28	527	(2)
Design 29	529	(2)
Design 30	531	(2)
Design 31	533	(2)
Design 32	535	(2)
Design 33	537	(2)
Design 34	539	(2)
Design 35	541	(2)
Design 36	543	(2)
Design 37	545	(2)
Design 38	547	(2)
Design 39	549	(2)
Design 40	551	(2)
Design 41	553	(2)
Design 42	555	(2)
Design 43	557	(2)
Design 44	559	(2)
Design 45	561	(2)
Design 46	563	(2)
Design 47	565	(2)
Design 48	567	(2)
Design 49	569	(2)
Design 50	571	(2)
Second-Level Content Templates	573	(5)
Summary	578	(1)
Appendix: About the CD-ROM	579	(4)
Index	583