Creating web pages

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 dont 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
• Dont mix
• Move text away from left edge
• Shy away from centered alignment (especially
  paragraphs!!!)
• Doesnt 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 ltBRgt versus ltPgt (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

• Dont need to know anymore
• Hypertext Mark-up Language
• Characterized by lt gt and lt/ gt
• HTML editors do most of the coding for us
• Common HTML editors Netscape Composer, Front
  Page, Dreamweaver, Claris Home Page, etc.

24
(No Transcript)
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
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
• Dont move images and pages after you link them.
• Use tables, more tables and tables to keep
  everything in place. Hide the lines if you dont
  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-designers web book. Berkeley, CA Peachpit
  Press.