1 / 45

Designing a Web Page for Your Physical Education, Recreation, or Sport Program

Designing a Web Page for Your Physical Education, Recreation, or Sport Program Jon A. Oliver Department of Physical Education Eastern Illinois University Realities of Web Page Design? It takes TIME : It creates more work for you It builds your level of computer literacy

oshin
Download Presentation

Designing a Web Page for Your Physical Education, Recreation, or Sport Program

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. Designing a Web Page for Your Physical Education, Recreation, or Sport Program Jon A. Oliver Department of Physical Education Eastern Illinois University

  2. Realities of Web Page Design? • It takes TIME: It creates more work for you • It builds your level of computer literacy • Agood way to promote your program • A trial-and-error process: maintenance • You CAN DO IT! – but it will require effort

  3. Background Info. on HTML? HTML = HyperText Markup Language. • Foundational “code” of web pages • Gives authors control over the layout and appearance of text and graphics on a web page • Note: the final presentation of HTML code is determined by the web browser used to view the page (I. Explorer or N. Navigator) • Good News! – You don’t have to learn the code! Software programs can produce .html (.htm) documents for you

  4. Example of HTML? Using a Browser – Go To View > Source: <html> <head> <TITLE>Creating a home page on the World Wide Web</TITLE> </head> <body bgcolor="#ffffff"> <A HREF="/"><IMG SRC="ibrkhome.gif" border=0 alt="to ironbark home page" align=right></A> <center> <h1>Creating a home page<br>on<br>the World Wide Web</h1> </center>

  5. Process of Web Page Design (1) (5) Go Public! & Evaluate (4) Upload - Test - Feedback (3) Design - Structure - Create (2) Secure Server Space & Software (1) Determine Your Web Site Needs?

  6. Process of Web Page Design (2) * Plan Evaluate Create Go Public Upload Test

  7. (1) Determine Your Web Site Needs For a Physical Education program: - goals/objectives/aims of the curriculum - lesson plans, calendar, assessment tools - technology integration strategies For a sports or recreation program: - programs, services, facilities, hours of operation, policies and procedures handbook - games schedules, team rosters, records - staff, amenities, forms, and related links *(Barnd & Yu, JOPERD, May/June 2002, p. 11)

  8. (2a) Secure Web Server Space? What is a Web server? A Web server stores all files related to a Web site and performs all work necessary for hosting the Web site * (www.congressonlineproject.org/glossary.html) * How to Secure Server Space? - Internally: available on your organization’s server (talk to your SD’s computer technician) - Externally: through a web hosting company: search the internet for web hosts

  9. Server Examples – IBM

  10. Web Host? What is a web host? (external)- A web host is a business that provides the services needed for web sites to be designed and viewed on the web. (100s of companies!) Why are there so many web host companies in the marketplace?- Because there are so many different types of features that can be offered through a Web site. Web hosts tailor their services to serve the needs of a particular type of client.

  11. Examples of Free Web Hosts Go www.google.com - search “free web hosts” (1) Freeservers.com (2) Geocities.com (3) Doteasy.com (4) Hometown.aol.com (5) Freehostingweb.com (6) bizhosting.com

  12. (2b) Choose Software Program? • Netscape Composer (www.netscape.com) -basic, easy-to-use, non-dynamic, free (2)Microsoft Word (www.microsoft.com) - creates .html files as easily as .doc files - use word processing functions to create .html (3)Dreamweaver (www.macromedia.com) -expensive, dynamic, professional, free trial offer - show examples of basic dynamic features

  13. Netscape Composer User Interface

  14. Microsoft Word User Interface

  15. Dreamweaver User Interface

  16. (3) Design – Structure - Create? Steps to Developing Your Web Site? (a) Sketch a “blueprint” of your web site (b) Use a table as the “building block” for each web page – put text and graphics in cells (c) Use your organization’s colors, marks, logos (d) Use common font types (True Type) that will be displayed correctly by web browsers (e) Use a consistent naming system for all files (f) Store all of your files in 1 folder (layer issue?)

  17. (a) Sketching the “Blueprint” • Form a web design committee (who?, why?) • Identify content you want available on your organization’s web site (static vs. dynamic) • Determine how you want your “home page” to look (colors, content, links, images) • Determine what types of “hyperlinks” you want to create for your page *NOTE*: homepage name = index.html (.htm)

  18. (a) Sketching the “Blueprint” YOUR PROGRAM’S HOME PAGE Schedules Facilities Standard Operating Procedures Job Openings Teams Coaches Programs Services Amenities Press Releases Helpful Links

  19. Creating Hyperlinks Other Web Pages Images Email Adobe .pdf Audio Files Types of “Links” Video Files MS PPT MS Word doc

  20. Creating Hyperlinks (MS Word)

  21. (b) Table is the “Foundation” • Use a table as the “foundation” of each web page you create • Formatted table cells will allow you to arrange content (text, images, graphics, colors, backgrounds) to meet your preferences • Borders can be viewable, or invisible

  22. (c) use colors, images, marks

  23. Example: Booth Library at EIU

  24. (d) Use Common Font Types Web browsers (Internet Explorer and Netscape Navigator) recognize and display some font types more accurately than others: Suggested • Arial (2) Times New Roman (3) Courier (4) Tahoma (5) Palatino

  25. (e) Use a Consistent Naming System Use a consistent naming system as you name your web page files (.html files) Home Page --------- index.html (.htm) Schedules - - - - - baseball_schedule.html Rosters - - - - - - - - baseball_roster.html History - - - - - - - - baseball_history.html Records - - - - - - - baseball_records.html

  26. (f) Store all files in one folder Organize all of your web page files into the fewest amount of folders as possible The more folders you use, the longer the web address will be for users to access specific web pages at your site (layers) http://www.eiu.edu/folder/folder/folder/folder/file

  27. (4) Upload – Test - Feedback? What does “upload” mean? Web page authors need to “upload” a copy of all files (and folders) to a server so the public can access, view, and consume the content FTP (File Transfer Protocol) software is needed to a) make a “connection” between your computer & the server, and to b) transfer a copy of your web files to the server.

  28. (4) Uploading Process (diagram) FTP Software (copy of your .html files) Your Computer Server

  29. (4) Upload – Test - Feedback? Example of a FTP Program? WS_FTP is a FTP software program The basic (“light”) edition is free (limited) You can download a safe, free copy of WS_FTP from FTPplanet.com: * http://www.ftpplanet.com

  30. (4) WS_FTP Connection Screen

  31. (4) WS_FTP User Interface

  32. (4) Upload – Test - Feedback? How do I “test” my web page? Web design software allows you to “preview” your work before you send a copy of the files to the server – look under the “File” menu bar (usually top left corner) for this option Once you have “uploaded” all of your web page files to your server using your FTP program, you need to test all of the hyperlinks to ensure that they are functioning correctly.

  33. (4) Upload – Test - Feedback? Who should I ask to provide feedback? Colleagues Staff Players Coaches Instructors Others

  34. (5) Go Public & Evaluate What does it mean to go “public”? Going “public” means to publicize your finalized web page to anyone who might benefit from using it Community, parents, athletes, staff, fans/spectators, coaches, instructors, administrators

  35. (5) Go Public & Evaluate How do you “evaluate” your web page? After your web page has been “public” information for a few months, the web author should evaluate whether or not it has been useful to the groups you thought would use it. Survey these groups to determine a) what functions have been useful?, b) what has not?, and c) what should be adjusted? - - - An ongoing process of refining - - -

  36. Summary: Web Page Design * Plan Evaluate Create Go Public Upload Test

  37. Realities of Web Page Design? • It takes TIME: It creates more work for you • It builds your level of computer literacy • Agood way to promote your program • A trial-and-error process: maintenance • You CAN DO IT! – but it will require effort

  38. Web Page Design Can Be Free? (1) Web Page Host = Variety of Web Hosts Offer Free Server Space (2) Web Page Design Software = Composer is free, Dreamweaver 30-day free trial offer (3) WS_FTP = LE (“light” edition”) is free (4) Download.com offers other web design software available for free download Get To Work!!!!

  39. Thank You for Your Time! Questions? Comments? Concerns?

More Related