1 / 30

Creating web pages

Creating web pages. Why? How?. What is the Internet?. The Internet is a large system of computers networked together to share information. 8.5 million users in 1995 605 million users in 2002 ( Nua ). How does the Internet work?. SBAC Server.

aliciaward
Download Presentation

Creating web pages

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Creating web pages Why? How?

  2. What is the Internet? • The Internet is a large system of computers networked together to share information. • 8.5 million users in 1995 • 605 million users in 2002 (Nua)

  3. How does the Internet work? SBAC Server Clients: Fort Clarke, Alachua Elementary, Horizon Center, Duval, etc.

  4. What is the WWW? • World Wide Web • Multimedia portion of the Internet (i.e. graphics, sounds, video, text, etc.) • Hyperlinks • Requires browser software (i.e. Internet Explorer, Netscape, Safari, etc.)

  5. To be a consumer of WWW content • Searching strategies • Evaluation skills • Organizational tools • Instructional strategies • Make learning intentional

  6. To be a producer of WWW content • Organize and plan!!! • Good web design • Accessibility • Speak the language (sort of) • Access a server • Know your URL

  7. Be organized and plan!!! • What will you need? • Three applications • HTML Editor (Dreamweaver, Claris Home Page, GoLive,Communicator, etc.) • Web Browser (Internet Explorer, Netscape Communicator, Mozilla, Safari, Firefox) • FTP Application (Fetch, WS_FTP, Explorer also has this option)

  8. Be organized and plan!!! • What will you need? A PLAN!! • Audience • Function(s) or purpose(s) • Content • Storyboard to organize content • “Never assume your site is logical -test it” Effective Design

  9. Storyboard your Site

  10. Good Web Design “Anyone can learn the mechanics of making a web page. And anyone can make an ugly web page. Lots of people do. But the only reason so many people make bad web pages is that they don’t understand the very basic design principles.” Williams & Tollett, 2000, p. 104

  11. C.R.A.P. Or C.A.R.P.

  12. Contrast • Guides your eye around the page • Need a focal point • Creates information hierarchy • Makes skimming more simple • If two elements are not the same, make them very different

  13. Williams & Tollett, 2000

  14. Alignment • Choose one • Don’t mix • Move text away from left edge • Shy away from centered alignment (especially paragraphs!!!) • Doesn’t mean everything is aligned along the same edge but that everything has the same type of alignment • Move away from edge

  15. Williams & Tollett, 2000

  16. Repetition • Repeat certain elements to tie site together • Makes pages look like they belong together • Makes site easier to use • Navigation • Know when you have left the site

  17. Williams & Tollett, 2000

  18. Proximity • Need organized, purposeful space • Items are often orphaned or have inappropriate relationships • Alignment often serves as unifying structure • Spacing <BR> versus <P> (shift enter vs. enter)

  19. Williams & Tollett, 2000

  20. Williams & Tollett, 2000

  21. Accessibility • Section 508 • Requirements and Standards for Web Content Accessibility • To ensure people with disabilities have access to, and use of, information and data that is comparable to that available to individuals who do not have disabilities

  22. What does 508 mean for you? • A text equivalent for every non-text item • Color consideration • Multiple ways to access information • Redundant links on image maps • Most editors help with this • “Bobby-approved”

  23. HTML: The Language • Don’t need to know anymore • Hypertext Mark-up Language • Characterized by < > and </ > • HTML editors do most of the coding for us • Common HTML editors: Netscape Composer, Front Page, Dreamweaver, Claris Home Page, etc.

  24. Notice protocol

  25. Access the server • Use FTP (file transfer protocol) software • WS_FTP, Fetch, etc. • Enables you to put files from your computer onto a server so others connected to the Internet can view your work.

  26. Access the server • Must know your server name, user ID and password • plaza.ufl.edu • Gatorlink + password

  27. protocol server directory/folder File name Structure • URL: Uniform Resource Locator • The format for identifying locations (addresses) on the Web. • http://plaza.ufl.edu/~kdawson/danny_duckling.html

  28. The little things that will throw you for a loop • File names- no spaces, symbols, or capital letters. • Everything goes in a folder and then upload folder • Don’t move images and pages after you link them. • Use tables, more tables and tables to keep everything in place. Hide the lines if you don’t like the look.

  29. Steps • Storyboard your site • Make a folder on your desktop • Find your images and put them in the folder- rename if necessary • Open Netscape Composer (FREE) • Choose your colors, text • Make your table(s) • Add your images, text, navigation, etc. • Save and then save as and rename

  30. Reference • Williams, R. & Tollet, J. (2000) The Non-designer’s web book. Berkeley, CA: Peachpit Press.

More Related