So You Want a Web Page What

Зарегистрируйтесь, чтобы просмотреть полный документ!

So You Want a Web Page!

What is a Web Page? According to Webopedia, a web page is: • A document on the World Wide Web. A Web site is really a bunch of Web pages linked together by clickable hyperlinks.

Web Design Examples • http: //users. nac. net/falken/annoying/m ain. html • http: //www. un. org/events/workshop/dpi -unitar/2003/dreamweaver/baddesign. htm

Web Design Features • • General Design Backgrounds Text Navigation Links Graphics Blinking and animations Junk

Bad Web Design Examples • http: //valweb. org/ • http: //www. scopesys. com/ • http: //www. augsburg. edu/index. html • http: //www. mewspage. pwp. blueyonder. co. uk/ • http: //www. oc. ca. gov/

Good Web Design Examples • http: //americanhistory. si. edu/westpoint/ index. html • http: //www. apple. com/ • http: //musicstem. com/ • http: //www. immuexa. com/

Elements of Effective Web Design • • Simplicity Consistency Identity Content User-friendly navigation Visual Appeal Compatibility

Top 10 Do's and Don'ts 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. Keep graphics files small Keep text files small Design for easy reading Design for all screen resolutions Use "ALT" Tags On Graphics Include contact information on every page Keep your site fresh Use small pages Be backward compatible Test your site as visitors will see it

Plan Your Website There are 3 critical phases in the design process › Information design › Site design › Page design

Information Design • • Goals Audience Objectives Interactivity Tools Inventory Organization Planning

Assignment • Identify the purpose and audience for your website.

Site Design • • Organization Navigation Interaction/Functionality Overall Usability/Accessibility

Organization

Navigation • Navigation bars • Place-finding tools • Breadcrumbs • Site maps

Interactivity/Functionality When planning for a site's functionality, ask yourself which of the following the site will require: › Search features › Forms for submitting information › Streaming media capabilities

Usability/Accessibility • Usability refers to how easy a site is to use and how well it functions. http: //www. useit. com/alertbox/9605. html • Accessibility refers to the practice of making pages on the Internet accessible to all users, especially those with disabilities. http: //webaim. org/intro/

Assignment • List the major sections and subsections for your website

Page Design • • • Create some thumbnail sketches of the pages in the site. Create detailed page mock-ups or rough sketches of the pages in the site. Create a web-based prototype

Layout Guidelines • • • Alignment Visual Hierarchy Balance Repetition/Consistency Proximity Contrast

Resources • http: //irt. austincc. edu/webdev/ • Accessibility › › › • Colors on the Web › › • http: //www. dynamicdrive. com/ http: //www. hotscripts. com/ http: //javascriptkit. com/cutpastejava. shtml Graphics › › • http: //www. colorsontheweb. com/ http: //wellstyled. com/tools/colorscheme 2/index-en. html http: //www. colorschemer. com/online. html http: //colorblender. com/ Interactivity › › › • http: //www. accessify. com/tools-and-wizards/ http: //webaim. org/intro/ http: //www. w 3. org/WAI/ http: //www. sxc. hu/home http: //istockphoto. com/index. php Other Useful Links › › › http: //www. alvit. de/handbook/ - Web Developer's Handbook http: //www. tonyyoo. com/protolize/ http: //www. alistapart. com/ - A List Apart: For People who Make Websites

Скачать презентацию So You Want a Web Page What

92f54f731d349ada1ea8dfef4f1f08f7.ppt

Количество слайдов: 20