designing a web page for your physical education recreation or sport program l.
Download
Skip this Video
Loading SlideShow in 5 Seconds..
Designing a Web Page for Your Physical Education, Recreation, or Sport Program PowerPoint Presentation
Download Presentation
Designing a Web Page for Your Physical Education, Recreation, or Sport Program

Loading in 2 Seconds...

play fullscreen
1 / 45

Designing a Web Page for Your Physical Education, Recreation, or Sport Program - PowerPoint PPT Presentation


  • 495 Views
  • Uploaded on

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

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about 'Designing a Web Page for Your Physical Education, Recreation, or Sport Program' - oshin


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.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
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
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
background info on html
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
example of html
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>

process of web page design 1
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?

process of web page design 2
Process of Web Page Design (2)

* Plan

Evaluate

Create

Go

Public

Upload

Test

1 determine your web site needs
(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)

2a secure web server space
(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

web host
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.

examples of free web hosts
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

2b choose software program
(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

3 design structure create
(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?)

a sketching the blueprint
(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)

a sketching the blueprint23
(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

creating hyperlinks
Creating Hyperlinks

Other Web

Pages

Images

Email

Adobe .pdf

Audio Files

Types of “Links”

Video Files

MS PPT

MS Word doc

b table is the foundation
(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
d use common font types
(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

e use a consistent naming system
(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

f store all files in one folder
(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

4 upload test feedback
(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.

4 uploading process diagram
(4) Uploading Process (diagram)

FTP Software

(copy of your .html files)

Your Computer

Server

4 upload test feedback35
(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

4 upload test feedback38
(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.

4 upload test feedback39
(4) Upload – Test - Feedback?

Who should I ask to provide feedback?

Colleagues

Staff

Players

Coaches

Instructors

Others

5 go public evaluate
(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

5 go public evaluate41
(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 - - -

summary web page design
Summary: Web Page Design

* Plan

Evaluate

Create

Go

Public

Upload

Test

realities of web page design43
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
web page design can be free
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!!!!

thank you for your time
Thank You for Your Time!

Questions?

Comments?

Concerns?