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

92f54f731d349ada1ea8dfef4f1f08f7.ppt

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

So You Want a Web Page! So You Want a Web Page!

What is a Web Page? According to Webopedia, a web page is: • A 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. 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 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/ • 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. 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 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. 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 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 Information Design • • Goals Audience Objectives Interactivity Tools Inventory Organization Planning

Assignment • Identify the purpose and audience for your website. Assignment • Identify the purpose and audience for your website.

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

Organization Organization

Navigation • Navigation bars • Place-finding tools • Breadcrumbs • Site maps 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 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 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 Assignment • List the major sections and subsections for your website

Page Design • • • Create some thumbnail sketches of the pages in the 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 Layout Guidelines • • • Alignment Visual Hierarchy Balance Repetition/Consistency Proximity Contrast

Resources • http: //irt. austincc. edu/webdev/ • Accessibility › › › • Colors on 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