IMAGE imgs/default.htm01.gif

TCEA '99 Workshop MW3230 - Monday, February 15, 1999 - 8:30 to 11:30 am

presented by Wesley Fryer
Lubbock ISD, Texas
email:
wes@wtvi.com

All referenced resources (including this handout) are available at:
http://www.wtvi.com/html/sitesuccess

I. Welcome and Introduction

II. Basic Elements of Web Design: (Heather Champ in webdeveloper.com: http://www.webdeveloper.com/categories/design/design_site_critiques.html)

  1. Graphics
  2. Speed
  3. Navigation
  4. CONTENT

III. What makes a great school website? Example sites:

IV. Basic Terms / Concepts / Tools of the Web
A. Terms:
1. webpage: a file on the internet containing text and multimedia elements, which can include
pictures, sounds, movies, and animations.
2. HTML= hypertext markup language: The language of internet.webpages. Similar to
"tagging" like early word processors did.
3. link: A webpage reference to another address on the internet. Text links are underlined in
most browsers (like Netscape). Images can also serve as links.
4. linked image: A picture which, when clicked on, asks the browser to point to another
address on the internet.
5. bulleted/ordered list: A bulleted list (like the list of school websites above) is an
indented list on a webpage. Each entry is proceeded by a bullet. Entries in a numbered list
are proceeded by a number.

"Set Your Site on Success"

page 1 of 6

www.wtvi.com/html/sitesuccess


6. GIF/JPG/PICTimage format: Different types of image files that are used when creating
webpages. For most of your images, you will want to convert to GIF format.
7. animated GIF file: A special kind of GIF image which contains several images that are
displayed sequentially, like a "flip book."
8. Java: A cross-platform programming language (used by Macs and PCs) which is being
used by advanced webpage developers.
9. Server: A computer which is constantly connected to the internet, so it can "host"
webpages for other people to access and view.
10. Client: A computer connected (at least sometimes) to the internet, which accesses data
from a "Server" computer
11. ftp= file transfer protocol: Sites whose address is proceeded by "ftp" instead of "http"
are for file transfer. Access these sites to download files. You will likely need an ftp
program to upload webpages to your server.
12. transparent GIF: A GIF image that has a transparent background. An example is the
banner image at the top of this page. You can see the background behind the image,
because it is a transparent GIF.
13. background image: An image that is displayed, similar to a watermark on stationary, in
the background of a webpage. This webpage has a background image. This webpage has a
background image.
14. tables: These terms are being displayed in a table, with defined rows and columns. Tables
can provide you with more control over the way text and images are displayed on your
webpage.
15. forms: Forms use programs on server computers called CGIs. Visitors to a page can fill
out a customized form, and the results can be automatically sent to your email address. 16. image map(client/server side): This is usually a collection of navigation icons. Areas are
defined on the image, so that clicking on an icon directs the browser to another address on
the internet. Image maps are advanced "linked images.'

B. Concepts:
1. Packets and the way the web works
2. Nonlinear / hyperlinked environment

IMAGE imgs/default.htm03.gif

C. Tools to create webpages:
1. Computer (Mac or Wintel)
2. Internet connection (dialup/PPP or direct)
3. Software:
a) Webpage Editor: Homepage (
http://www.filemaker.com/products/homepage3.html/), Adobe Pagemill,
Microsoft Frontpage, CyberStudio, Netobjects Fusion, Netscape Composer
b) Graphics software (Adobe Photoshop:
http://www.adobe.com/prodindex/photoshop/main.html, GraphicConverter for
Mac:
http://www.lemkesoft.de/us_gcabout.html, Paintshop Pro for Win:
http://www.jasc.com/psp.html)
c) Plug-ins for Photoshop (Eye Candy for Photoshop:
http://www.alienskin.com/)

V. KISS
A. "Keep it Simple Silly"
B. Browser differences / Fancy effects (forms, cascading stylesheets, etc) - don't get caught up in
"Set Your Site on Success" page 2 of 6 www.wtvi.com/html/sitesuccess


making your site as trendy/flashy as possible
C. Content is King
D. Desktop publishing font / point size / color guidelines apply

VI. Storyboard / Plan Your Site
A. Pick five or six major sections
B. Put all pages in your site in 1 folder
C. Put images into a separate folder
D. Create separate folders for larger sections of your website
E. Use consistent file naming conventions: lower case, no spaces/special characters/periods/tilde
F. Remember to always use extensions (.htm, .html, .gif, .jpg, etc.)
G. Select a unifying graphical theme for the site (consistent colors and links)
H. Follow general netiquette: write pages to be read naturally as if the document was not "clickable"
(don't say "click here")
I. Form Follows Function: Take the advice of scholar Judi Harris!:
http://www.tapr.org/~jbharris/form-follows-function/

IMAGE imgs/default.htm04.gif

IMAGE imgs/default.htm05.gif

VII.

A. Give website visitors a reason to return (Calendar, updated student work, PTA newsletters)
B. Use web tools like Myrmidon (Mac only) to instantly publish any document to the web like a
PTA newsletter (
http://www.terrymorse.com/)
C. Involve as many contributors as you can (and have time for)
D. Include recommended links for students at home (extend classroom learning to the home)
E. Publish Accelerated Reader book lists
F. Share student work
G. Solicit involvement in online projects
H. Ask for extra compensated time to update the website
I. Maintain a mailing list of parent email addresses to notify them when updates are online
J. Don't give students direct ftp / upload access to your school server: let a teacher handle this
K. Security Issues
1. Never publish student first and last names (just first name and first initial of last name) or
other personal info about students
"Set Your Site on Success" page 3 of 6 www.wtvi.com/html/sitesuccess


2. Don't associate pictures with student names
3. Use a parent/student release form to publish student work ( an example is available at
http://www.wtvi.com/teks/tools.html)

VIII.

IMAGE imgs/default.htm06.gif

"Set Your Site on Success"

page 4 of 6

www.wtvi.com/html/sitesuccess


IMAGE imgs/default.htm07.gif

F.

G.

H.

I.

IX. Basic Elements of Web Design: Speed
A. large images and too many images can overwhelm a web page
B. TO CHECK DOWNLOAD TIMES: From the EDIT menu in Claris HomePage choose
Document Statistics
C. keep image sizes under 40K, no wider than 470 pixels, viewable on a 13 inch screen
D. Avoid really long tables: nothing appears on the screen till the browser reads the (/table) tag

X. Basic Elements of Web Design: Navigation
A. Include the name of your school and it's geographic location on the title of each webpage
B. Include consistent links to each major section of your website on each page
C. Include text links in addition to graphical links
D. Think in HYPERLINKED terms instead of LINEAR terms when designing navigation icons
E. Test your website on various web browsers, on various platforms
F. Use TARGETS to link to specific places on a webpage (like on a directory:
http://www.esc17.net/personnel/alphadir.html)
"Set Your Site on Success" page 5 of 6 www.wtvi.com/html/sitesuccess


XI. Other Cool Tricks
A. Use tables to make sidebar links and more elaborate page layouts
B. Use the calendar template with Homepage to update a school calendar regulary
C. Learn new tricks by choosing from the "VIEW" menu in Netscape "DOCUMENT SOURCE."
Then you can see the HTML which creates special effects on another website.
D. Use NetMechanic for free to test all your links:
http://www.netmechanic.com/
E. Advertise your site for free with over 30 engines at one time:
http://www.123launch.com/
F. Use the free Website PostOffice to maintain a mailing list for your website:
http://www.websitepostoffice.com/
G. Use Netscape Composer to create or edit webpages, so you can "drag and drop" saved
bookmarks onto a webpage you are editing. Composer will automatically insert the URL address
and link it for you.
H. Use Adobe Acrobat Pro to publish cross-platform PDF documents
(
http://www.adobe.com/prodindex/acrobat/)
I. Use Adobe Photoshop or other graphics software to make "ghosted" background images, drop
shadows, beveled images, etc.
J. Create web FORMS so that people can answer surveys or fill out applications online, and the
results can be emailed to you (

---------------------------------------------------------------------------------------------------------------------------------------

IMAGE imgs/default.htm08.gif

http://www.wtvi.com/teks

* Sign up to participate in the "unofficial" TCEA '99 Notes Exchange: email in notes you take at
workshops and sessions and receive notes taken by others at presentations you missed * Sign up online to receive free Tools for the TEKS updates including new educational websites,
webmastering tips, internet lesson ideas, etc.
* Read archived articles from the TechEdge column "Tools for the TEKS" online, as well as archived email
updates
* Access the "Tools and Techniques" page including a sample parent consent form for internet publishing
of student work, links to software, scavenger hunts online, and more.
* It's all free! :)

Is your school or district looking for a dyanamic technology presenter for summer 1999? Check out all the classes I offer at http://www.wtvi.com/classnetand email me (wes@wtvi.com) to book a date! "Set Your Site on Success" page 6 of 6 www.wtvi.com/html/sitesuccess