{\rtf1\ansi\ansicpg1252\uc1 \deff0\deflang1033\deflangfe1033{\fonttbl{\f0\froman\fcharset0\fprq2{\*\panose 02020603050405020304}Times New Roman;}{\f1\fswiss\fcharset0\fprq2{\*\panose 020b0604020202020204}Arial;}
{\f2\fmodern\fcharset0\fprq1{\*\panose 02070309020205020404}Courier New;}{\f3\froman\fcharset2\fprq2{\*\panose 05050102010706020507}Symbol;}{\f4\froman\fcharset0\fprq2{\*\panose 00000000000000000000}Times;}
{\f14\fnil\fcharset2\fprq2{\*\panose 05000000000000000000}Wingdings;}{\f29\froman\fcharset238\fprq2 Times New Roman CE;}{\f30\froman\fcharset204\fprq2 Times New Roman Cyr;}{\f32\froman\fcharset161\fprq2 Times New Roman Greek;}
{\f33\froman\fcharset162\fprq2 Times New Roman Tur;}{\f34\froman\fcharset177\fprq2 Times New Roman (Hebrew);}{\f35\froman\fcharset178\fprq2 Times New Roman (Arabic);}{\f36\froman\fcharset186\fprq2 Times New Roman Baltic;}
{\f37\fswiss\fcharset238\fprq2 Arial CE;}{\f38\fswiss\fcharset204\fprq2 Arial Cyr;}{\f40\fswiss\fcharset161\fprq2 Arial Greek;}{\f41\fswiss\fcharset162\fprq2 Arial Tur;}{\f42\fswiss\fcharset177\fprq2 Arial (Hebrew);}
{\f43\fswiss\fcharset178\fprq2 Arial (Arabic);}{\f44\fswiss\fcharset186\fprq2 Arial Baltic;}{\f45\fmodern\fcharset238\fprq1 Courier New CE;}{\f46\fmodern\fcharset204\fprq1 Courier New Cyr;}{\f48\fmodern\fcharset161\fprq1 Courier New Greek;}
{\f49\fmodern\fcharset162\fprq1 Courier New Tur;}{\f50\fmodern\fcharset177\fprq1 Courier New (Hebrew);}{\f51\fmodern\fcharset178\fprq1 Courier New (Arabic);}{\f52\fmodern\fcharset186\fprq1 Courier New Baltic;}}{\colortbl;\red0\green0\blue0;
\red0\green0\blue255;\red0\green255\blue255;\red0\green255\blue0;\red255\green0\blue255;\red255\green0\blue0;\red255\green255\blue0;\red255\green255\blue255;\red0\green0\blue128;\red0\green128\blue128;\red0\green128\blue0;\red128\green0\blue128;
\red128\green0\blue0;\red128\green128\blue0;\red128\green128\blue128;\red192\green192\blue192;}{\stylesheet{\ql \li0\ri0\widctlpar\aspalpha\aspnum\faauto\adjustright\rin0\lin0\itap0 \fs24\lang1033\langfe1033\cgrid\langnp1033\langfenp1033 \snext0 Normal;}
{\*\cs10 \additive Default Paragraph Font;}}{\*\listtable{\list\listtemplateid-1695275702\listhybrid{\listlevel\levelnfc23\levelnfcn23\leveljc0\leveljcn0\levelfollow0\levelstartat1\levelspace0\levelindent0{\leveltext\leveltemplateid339746862
\'01\u-3913 ?;}{\levelnumbers;}\f3\fs20\chbrdr\brdrnone\brdrcf1 \chshdng0\chcfpat1\chcbpat1\fbias0 \fi-360\li720\jclisttab\tx720 }{\listlevel\levelnfc23\levelnfcn23\leveljc0\leveljcn0\levelfollow0\levelstartat1\levelspace0\levelindent0{\leveltext
\leveltemplateid79961410\'01o;}{\levelnumbers;}\f2\fs20\chbrdr\brdrnone\brdrcf1 \chshdng0\chcfpat1\chcbpat1\fbias0 \fi-360\li1440\jclisttab\tx1440 }{\listlevel\levelnfc23\levelnfcn23\leveljc0\leveljcn0\levelfollow0\levelstartat1\levelspace0\levelindent0
{\leveltext\leveltemplateid-571422102\'01\u-3929 ?;}{\levelnumbers;}\f14\fs20\chbrdr\brdrnone\brdrcf1 \chshdng0\chcfpat1\chcbpat1\fbias0 \fi-360\li2160\jclisttab\tx2160 }{\listlevel\levelnfc23\levelnfcn23\leveljc0\leveljcn0\levelfollow0\levelstartat1
\levelspace0\levelindent0{\leveltext\leveltemplateid61531278\'01\u-3929 ?;}{\levelnumbers;}\f14\fs20\chbrdr\brdrnone\brdrcf1 \chshdng0\chcfpat1\chcbpat1\fbias0 \fi-360\li2880\jclisttab\tx2880 }{\listlevel\levelnfc23\levelnfcn23\leveljc0\leveljcn0
\levelfollow0\levelstartat1\levelspace0\levelindent0{\leveltext\leveltemplateid-1239776252\'01\u-3929 ?;}{\levelnumbers;}\f14\fs20\chbrdr\brdrnone\brdrcf1 \chshdng0\chcfpat1\chcbpat1\fbias0 \fi-360\li3600\jclisttab\tx3600 }{\listlevel\levelnfc23
\levelnfcn23\leveljc0\leveljcn0\levelfollow0\levelstartat1\levelspace0\levelindent0{\leveltext\leveltemplateid349842614\'01\u-3929 ?;}{\levelnumbers;}\f14\fs20\chbrdr\brdrnone\brdrcf1 \chshdng0\chcfpat1\chcbpat1\fbias0 \fi-360\li4320\jclisttab\tx4320 }
{\listlevel\levelnfc23\levelnfcn23\leveljc0\leveljcn0\levelfollow0\levelstartat1\levelspace0\levelindent0{\leveltext\leveltemplateid-1166377976\'01\u-3929 ?;}{\levelnumbers;}\f14\fs20\chbrdr\brdrnone\brdrcf1 \chshdng0\chcfpat1\chcbpat1\fbias0 
\fi-360\li5040\jclisttab\tx5040 }{\listlevel\levelnfc23\levelnfcn23\leveljc0\leveljcn0\levelfollow0\levelstartat1\levelspace0\levelindent0{\leveltext\leveltemplateid-1172548034\'01\u-3929 ?;}{\levelnumbers;}\f14\fs20\chbrdr\brdrnone\brdrcf1 
\chshdng0\chcfpat1\chcbpat1\fbias0 \fi-360\li5760\jclisttab\tx5760 }{\listlevel\levelnfc23\levelnfcn23\leveljc0\leveljcn0\levelfollow0\levelstartat1\levelspace0\levelindent0{\leveltext\leveltemplateid-144026726\'01\u-3929 ?;}{\levelnumbers;}\f14\fs20
\chbrdr\brdrnone\brdrcf1 \chshdng0\chcfpat1\chcbpat1\fbias0 \fi-360\li6480\jclisttab\tx6480 }{\listname ;}\listid686757110}{\list\listtemplateid-2123449778\listhybrid{\listlevel\levelnfc23\levelnfcn23\leveljc0\leveljcn0\levelfollow0\levelstartat1
\levelspace0\levelindent0{\leveltext\leveltemplateid-547196452\'01\u-3913 ?;}{\levelnumbers;}\f3\fs20\chbrdr\brdrnone\brdrcf1 \chshdng0\chcfpat1\chcbpat1\fbias0 \fi-360\li720\jclisttab\tx720 }{\listlevel\levelnfc23\levelnfcn23\leveljc0\leveljcn0
\levelfollow0\levelstartat1\levelspace0\levelindent0{\leveltext\leveltemplateid-1905510444\'01o;}{\levelnumbers;}\f2\fs20\chbrdr\brdrnone\brdrcf1 \chshdng0\chcfpat1\chcbpat1\fbias0 \fi-360\li1440\jclisttab\tx1440 }{\listlevel\levelnfc23\levelnfcn23
\leveljc0\leveljcn0\levelfollow0\levelstartat1\levelspace0\levelindent0{\leveltext\leveltemplateid802060576\'01\u-3929 ?;}{\levelnumbers;}\f14\fs20\chbrdr\brdrnone\brdrcf1 \chshdng0\chcfpat1\chcbpat1\fbias0 \fi-360\li2160\jclisttab\tx2160 }{\listlevel
\levelnfc23\levelnfcn23\leveljc0\leveljcn0\levelfollow0\levelstartat1\levelspace0\levelindent0{\leveltext\leveltemplateid1500934518\'01\u-3929 ?;}{\levelnumbers;}\f14\fs20\chbrdr\brdrnone\brdrcf1 \chshdng0\chcfpat1\chcbpat1\fbias0 \fi-360\li2880
\jclisttab\tx2880 }{\listlevel\levelnfc23\levelnfcn23\leveljc0\leveljcn0\levelfollow0\levelstartat1\levelspace0\levelindent0{\leveltext\leveltemplateid1355071734\'01\u-3929 ?;}{\levelnumbers;}\f14\fs20\chbrdr\brdrnone\brdrcf1 
\chshdng0\chcfpat1\chcbpat1\fbias0 \fi-360\li3600\jclisttab\tx3600 }{\listlevel\levelnfc23\levelnfcn23\leveljc0\leveljcn0\levelfollow0\levelstartat1\levelspace0\levelindent0{\leveltext\leveltemplateid1200900584\'01\u-3929 ?;}{\levelnumbers;}\f14\fs20
\chbrdr\brdrnone\brdrcf1 \chshdng0\chcfpat1\chcbpat1\fbias0 \fi-360\li4320\jclisttab\tx4320 }{\listlevel\levelnfc23\levelnfcn23\leveljc0\leveljcn0\levelfollow0\levelstartat1\levelspace0\levelindent0{\leveltext\leveltemplateid-1176874998
\'01\u-3929 ?;}{\levelnumbers;}\f14\fs20\chbrdr\brdrnone\brdrcf1 \chshdng0\chcfpat1\chcbpat1\fbias0 \fi-360\li5040\jclisttab\tx5040 }{\listlevel\levelnfc23\levelnfcn23\leveljc0\leveljcn0\levelfollow0\levelstartat1\levelspace0\levelindent0{\leveltext
\leveltemplateid586199610\'01\u-3929 ?;}{\levelnumbers;}\f14\fs20\chbrdr\brdrnone\brdrcf1 \chshdng0\chcfpat1\chcbpat1\fbias0 \fi-360\li5760\jclisttab\tx5760 }{\listlevel\levelnfc23\levelnfcn23\leveljc0\leveljcn0\levelfollow0\levelstartat1\levelspace0
\levelindent0{\leveltext\leveltemplateid100548806\'01\u-3929 ?;}{\levelnumbers;}\f14\fs20\chbrdr\brdrnone\brdrcf1 \chshdng0\chcfpat1\chcbpat1\fbias0 \fi-360\li6480\jclisttab\tx6480 }{\listname ;}\listid1316955503}}{\*\listoverridetable
{\listoverride\listid1316955503\listoverridecount0\ls1}{\listoverride\listid686757110\listoverridecount0\ls2}}{\info{\title  Web Design and Usability Techniques }{\author Publishing Services}{\operator Publishing Services}
{\creatim\yr2001\mo1\dy30\hr14\min27}{\revtim\yr2001\mo1\dy30\hr14\min27}{\version2}{\edmins0}{\nofpages1}{\nofwords600}{\nofchars3422}{\*\company Element K}{\nofcharsws4202}{\vern8247}}
\widowctrl\ftnbj\aenddoc\noxlattoyen\expshrtn\noultrlspc\dntblnsbdb\nospaceforul\formshade\horzdoc\dgmargin\dghspace180\dgvspace180\dghorigin1701\dgvorigin1984\dghshow1\dgvshow1
\jexpand\viewkind5\viewscale100\pgbrdrhead\pgbrdrfoot\splytwnine\ftnlytwnine\htmautsp\nolnhtadjtbl\useltbaln\alntblind\lytcalctblwd\lyttblrtgr\lnbrkrule \fet0{\*\background 
{\shp{\*\shpinst\shpleft0\shptop0\shpright0\shpbottom0\shpfhdr0\shpbxmargin\shpbxignore\shpbymargin\shpbyignore\shpwr0\shpwrk0\shpfblwtxt1\shpz0\shplid1025{\sp{\sn shapeType}{\sv 1}}{\sp{\sn fFlipH}{\sv 0}}{\sp{\sn fFlipV}{\sv 0}}
{\sp{\sn fFilled}{\sv 1}}{\sp{\sn lineWidth}{\sv 0}}{\sp{\sn fLine}{\sv 0}}{\sp{\sn bWMode}{\sv 9}}{\sp{\sn fBackground}{\sv 1}}{\sp{\sn fLayoutInCell}{\sv 1}}}}}\sectd \linex0\endnhere\pgbrdropt32\sectlinegrid360\sectdefaultcl {\*\pnseclvl1
\pnucrm\pnstart1\pnindent720\pnhang{\pntxta .}}{\*\pnseclvl2\pnucltr\pnstart1\pnindent720\pnhang{\pntxta .}}{\*\pnseclvl3\pndec\pnstart1\pnindent720\pnhang{\pntxta .}}{\*\pnseclvl4\pnlcltr\pnstart1\pnindent720\pnhang{\pntxta )}}{\*\pnseclvl5
\pndec\pnstart1\pnindent720\pnhang{\pntxtb (}{\pntxta )}}{\*\pnseclvl6\pnlcltr\pnstart1\pnindent720\pnhang{\pntxtb (}{\pntxta )}}{\*\pnseclvl7\pnlcrm\pnstart1\pnindent720\pnhang{\pntxtb (}{\pntxta )}}{\*\pnseclvl8\pnlcltr\pnstart1\pnindent720\pnhang
{\pntxtb (}{\pntxta )}}{\*\pnseclvl9\pnlcrm\pnstart1\pnindent720\pnhang{\pntxtb (}{\pntxta )}}\pard\plain \ql \li0\ri0\widctlpar\aspalpha\aspnum\faauto\adjustright\rin0\lin0\itap0 \fs24\lang1033\langfe1033\cgrid\langnp1033\langfenp1033 {\b\f4\fs27 
Web Design and Usability Techniques }{\f4\fs20 \line \line }{\b\f1\fs20 Overview:}{\f4\fs20  \~\~ 
This course is designed for individuals getting started in Web design and development, and focuses on creating static sites. Dynamic, database-driven sites involve additional design approaches that are beyond the scope of this course. However, the concept
s
 in this course still apply to dynamic content, since the focus is on what the user sees, rather than how the content is generated. This course is designed for anyone interested in learning some important principles of Web design that apply to just about 
a
ny purpose or theme. You will explore several pitfalls of Web design and how to avoid them, and a variety of design tips and guidelines that you can use no matter what your Web site project entails. Students taking this course should have at least interme
diate-level experience with HTML, including tables and forms, and familiarity or experience with Cascading Style Sheets (CSS). \line \line }{\b\f1\fs20 Prerequisites:}{\f4\fs20  
\par }\pard \ql \li0\ri0\widctlpar\aspalpha\aspnum\faauto\adjustright\rin0\lin0\itap0 {\f4\fs20 \line }{\b\f1\fs20 Delivery Method:}{\f4\fs20  \~\~ Instructor-led, group-paced, classroom-delivery learning model with structured hands-on activities. \line \line 
\line }{\b\f1\fs20 Hardware/software required to run this course}{\f4\fs20  
\par {\listtext\pard\plain\f3\fs20 \loch\af3\dbch\af0\hich\f3 \'b7\tab}}\pard \ql \fi-360\li720\ri0\sb100\sa100\sbauto1\saauto1\widctlpar\jclisttab\tx720\aspalpha\aspnum\faauto\ls1\adjustright\rin0\lin720\itap0 {\f4\fs20 
Windows 95, 98, NT or 2000, or Macintosh OS. 
\par {\listtext\pard\plain\f3\fs20 \loch\af3\dbch\af0\hich\f3 \'b7\tab}32 MB RAM 
\par {\listtext\pard\plain\f3\fs20 \loch\af3\dbch\af0\hich\f3 \'b7\tab}A 486 or faster processor (Pentium or equivalent is strongly recommended). 
\par {\listtext\pard\plain\f3\fs20 \loch\af3\dbch\af0\hich\f3 \'b7\tab}An 800 x 600 or higher resolution color monitor set to a minimum of 256 colors. For best image quality, we recommend setting monitors to High Color (16-bit). 
\par {\listtext\pard\plain\f3\fs20 \loch\af3\dbch\af0\hich\f3 \'b7\tab}Microsoft Internet Explorer 4.0 or later. 
\par {\listtext\pard\plain\f3\fs20 \loch\af3\dbch\af0\hich\f3 \'b7\tab}Netscape Navigator 4.x. Some concepts and exercises in this course discuss support issues in Navigator 4.x. 
\par {\listtext\pard\plain\f3\fs20 \loch\af3\dbch\af0\hich\f3 \'b7\tab}A working connection to the Internet. 
\par {\listtext\pard\plain\f3\fs20 \loch\af3\dbch\af0\hich\f3 \'b7\tab}Microsoft Personal Web Server (PWS) 
\par {\listtext\pard\plain\f3\fs20 \loch\af3\dbch\af0\hich\f3 \'b7\tab}Browser Sizer: Download a free copy at www.applythis.com/browsersizer/ 
\par {\listtext\pard\plain\f3\fs20 \loch\af3\dbch\af0\hich\f3 \'b7\tab}(Optional) PowerMapper: Download an evaluation copy at www.electrum.co.uk/mapper 
\par {\listtext\pard\plain\f3\fs20 \loch\af3\dbch\af0\hich\f3 \'b7\tab}
Mac users: Download the Macintosh version of the W3's Tidy program at www.geocities.com/SiliconValley/1057/tidy.htm. Once there, click on the "download" link to access the Macintosh download page. 
\par }\pard \ql \li0\ri0\widctlpar\aspalpha\aspnum\faauto\adjustright\rin0\lin0\itap0 {\f4\fs20 \line }{\b\f1\fs20 Performance-based objectives}{\f4\fs20 \line 
Lesson objectives help students become comfortable with the course, and also provide a means to evaluate learning. Upon successful completion of this course, students will be able to:
\par {\listtext\pard\plain\f3\fs20 \loch\af3\dbch\af0\hich\f3 \'b7\tab}}\pard \ql \fi-360\li720\ri0\sb100\sa100\sbauto1\saauto1\widctlpar\jclisttab\tx720\aspalpha\aspnum\faauto\ls2\adjustright\rin0\lin720\itap0 {\f4\fs20 
Identify common problems in Web design. 
\par {\listtext\pard\plain\f3\fs20 \loch\af3\dbch\af0\hich\f3 \'b7\tab}Effectively plan a Web site project. 
\par {\listtext\pard\plain\f3\fs20 \loch\af3\dbch\af0\hich\f3 \'b7\tab}Create designs that focus vital content above the "fold". 
\par {\listtext\pard\plain\f3\fs20 \loch\af3\dbch\af0\hich\f3 \'b7\tab}Identify image formats. 
\par {\listtext\pard\plain\f3\fs20 \loch\af3\dbch\af0\hich\f3 \'b7\tab}Use images effectively. 
\par {\listtext\pard\plain\f3\fs20 \loch\af3\dbch\af0\hich\f3 \'b7\tab}Use color effectively. 
\par {\listtext\pard\plain\f3\fs20 \loch\af3\dbch\af0\hich\f3 \'b7\tab}Recognize the benefits of valid HTML 4.0 code. 
\par {\listtext\pard\plain\f3\fs20 \loch\af3\dbch\af0\hich\f3 \'b7\tab}Identify structural problems. 
\par {\listtext\pard\plain\f3\fs20 \loch\af3\dbch\af0\hich\f3 \'b7\tab}Use server-side includes to organize and maintain code templates. 
\par {\listtext\pard\plain\f3\fs20 \loch\af3\dbch\af0\hich\f3 \'b7\tab}Apply CSS styles that break down gracefully. 
\par {\listtext\pard\plain\f3\fs20 \loch\af3\dbch\af0\hich\f3 \'b7\tab}Critique a site's usability. 
\par {\listtext\pard\plain\f3\fs20 \loch\af3\dbch\af0\hich\f3 \'b7\tab}Apply techniques that enhance usability. 
\par {\listtext\pard\plain\f3\fs20 \loch\af3\dbch\af0\hich\f3 \'b7\tab}Recognize effective navigation techniques. 
\par {\listtext\pard\plain\f3\fs20 \loch\af3\dbch\af0\hich\f3 \'b7\tab}Create accessible Web sites. 
\par {\listtext\pard\plain\f3\fs20 \loch\af3\dbch\af0\hich\f3 \'b7\tab}Design for different monitor resolutions. 
\par {\listtext\pard\plain\f3\fs20 \loch\af3\dbch\af0\hich\f3 \'b7\tab}Use browser detection scripts. 
\par {\listtext\pard\plain\f3\fs20 \loch\af3\dbch\af0\hich\f3 \'b7\tab}Publicize your Web site. 
\par {\listtext\pard\plain\f3\fs20 \loch\af3\dbch\af0\hich\f3 \'b7\tab}Write effective meta content. 
\par }\pard \ql \li0\ri0\sa240\widctlpar\aspalpha\aspnum\faauto\adjustright\rin0\lin0\itap0 {\b\f4 Lesson 1: Overview of Design Issues}{\f4\fs20 \line \~\~\~\~\~\~\~Common Problems in Web Design\line \line }{\b\f4 Lesson 2: Planning a Site}{\f4\fs20 \line \~\~
\~\~\~\~\~The Planning Phase\line \~\~\~\~\~\~\~Choosing a Site Metaphor\line \~\~\~\~\~\~\~Content Outlining and Storyboarding\line \line }{\b\f4 Lesson 3: Design Guidelines}{\f4\fs20 \line \~\~\~\~\~\~\~Choosing a Design Approach\line \~\~\~\~\~\~\~
Using Site Mock-ups\line \~\~\~\~\~\~\~Page Design Considerations\line \line }{\b\f4 Lesson 4: Effective Use of Images}{\f4\fs20 \line \~\~\~\~\~\~\~Choosing the Right Image Format\line \~\~\~\~\~\~\~Optimizing Graphics\line \line }{\b\f4 
Lesson 5: Effective Use of Color}{\f4\fs20 \line \~\~\~\~\~\~\~Color 101\line \~\~\~\~\~\~\~Color and Design\line \line }{\b\f4 Lesson 6: Writing Good Code}{\f4\fs20 \line \~\~\~\~\~\~\~Authoring with HTML 4.01\line \~\~\~\~\~\~\~Validating Your Code
\line \~\~\~\~\~\~\~Organization and Maintenance Techniques\line \line }{\b\f4 Lesson 7: Safe CSS}{\f4\fs20 \line \~\~\~\~\~\~\~Styles that Break Down Gracefully\line \~\~\~\~\~\~\~Web Typography with CSS\line \line }{\b\f4 Lesson 8: Creating Usable Sites
}{\f4\fs20 \line \~\~\~\~\~\~\~Principles of Usability\line \~\~\~\~\~\~\~Simple Usability Techniques\line \~\~\~\~\~\~\~Designing Effective Navigation\line \line }{\b\f4 Lesson 9: Accessibility}{\f4\fs20 \line \~\~\~\~\~\~\~Creating Accessible Sites
\line \~\~\~\~\~\~\~HTML and CSS Accessibility Techniques\line \line }{\b\f4 Lesson 10: Dealing with Browser Incompatibilities}{\f4\fs20 \line \~\~\~\~\~\~\~Browser and Platform Issues\line \~\~\~\~\~\~\~Using Browser Detection Scripts\line \line }{\b\f4 
Lesson 11: Publicizing Your Web Site}{\f4\fs20 \line \~\~\~\~\~\~\~Promoting Your Site: Meta Content\line \line }{\b\f4 Lesson 12: Review}{\f4\fs20 \line \~\~\~\~\~\~\~Apply Your Knowledge\line \line }{\b\f4 Appendix A: Quick Reference}{
\par }}