• A look at my experiences as I prepared a web site for my daughter's kindergarten class in 1997-98 and what I learned
• Instructions for how you can do it too

• I have two versions of this talk prepared.
• One is for a hands-on workshop, where there are step-by-step instructions to actually prepare the web page and time during the presentation to try them
• The second is for a demonstration
• The handouts for both talks will include the extended version with step-by-step instructions, so even if you see only the demonstration (or only get the handouts) you have some ideas on how to get started
• The original handouts are also available online at http://www.sbuniv.edu/~khopkins/handouts/98/98educ.htm
• Updated handouts for 1999 are available online at http://www.sbuniv.edu/~khopkins/handouts/99/99educ.htm

• You may have to sell the idea of why a website is needed
• Good way to highlight what technology can do
• Good way to guide students to access only what you want them to
• Good way to involve community in what your class is doing
• Good way to motivate your students to higher quality work

• What can go on a class web site?
• Who approves the site?
• What to do if questions about material arise?
• Do student pictures go on the site?
• What about other student information?
• Other issues?
• Look to other types of publicity, information release policies within the district
• Bolivar R-1 has a policy at its website: http://www.bolivar-r1.k12.mo.us/compuse/webpage.htm

• Be sure your district has a web server where your site can go when completed
• If not, there are numerous places that have free site hosting
• Geocities-http://www.geocities.com
• Homestead-http://www.homestead.com
• Tripod-http://www.tripod.com
• It is a bit harder to be an "official" class site when it is not on the district's server

• I worked on the page while the district was developing the policy and then school ended
• So, the page is currently at http://www.sbuniv.edu/~khopkins/kinder/
• Hopefully will end up at the Bolivar R-1 site at http://www.bolivar-r1.k12.mo.us
• I hope to continue to expand it now that she is in second grade and my son is in first grade

Once you have a purpose, a policy to guide, and a place to put the pages, NOW WHAT?

• http://www.education-world.com/regional/k12_schools/ has links to many k-12 sites around the world
• http://www.familyeducation.com/golocal/0,1273,,00.html has teachers’, schools’, and community groups’ websites-and let’s your school have a home too
• http://www.asd.com/ also has links to many pages-and let’s your school have a home too

• Have a definite goal in mind
• Be realistic
• Start small and build
• Enlist good help from students, technical staff, and/or parents
• The more people involved, the better the site and less work you have to do yourself

• Many magazines write articles related to this topic
• Many magazines have on-line/searchable versions
• Some of these are:
• PCWorld-http://www.pcworld.com/
• FamilyPC-http://www.familypc.com
• PC Magazine-http://www.pcmag.com/
• Classroom Connect-http://www.classroom.com/
• T.H.E. Journal-http://www.thejournal.com/
• Syllabus-http://www.syllabus.com/

• A student/educator list serve on web page development is at http://www.lr.k12.nj.us/site/lenape/k-12.html
• Developer Shed has tutorials and design tools for all levels of web developers: http://www.devshed.com/
• Apple has an entire Web site advisor's guide (looks a lot like the outline of this talk) at http://www.asd2.com/resources/advisor.html
• A school in Indiana has tips online at http://www.siec.k12.in.us/~west/online/index.html

• Many articles are written on what constitutes good web page design
• Some are:
• May, 1998 Classroom Connect, p. 16 "School Web Site Style Guide"
• February, 1998 Internet World, p. 30 "Improving Your Image. How to polish your Web presence."
• March, 1998 Syllabus, p. 42 "Typography in Web Pages"

• Probably don't have time or desire to learn the actual html (hypertext markup language)
• Many editors exist to assist you
• Most are WYSIWIG (What you see is what you get)-at least almost

• Some Web page editors are:
• Netscape Composer 4.6-is part of Communicator http://home.netscape.com is free
• Frontpage-http://www.microsoft.com/frontpage
• Information on these can be found in:
• PC World, April 1998, p. 139 "Painless Web Pages"
• Home PC, April 1998, p.75 "Breaking the <Code>"
• FamilyPC, September 1999, p. 58 “Home Sweet Home Page”
• Even with a good editor, you'll learn a lot by trial and error
• You will need to know some vocabulary

• I'll illustrate the key words, their icons, and their meanings
• I used Netscape Composer 4.0 to get some menu choices and the icons from
• Most editors have similar menu choices and icons
• In Windows 95 most programs have text screens that will pop up to tell you what icons mean (at least what they mean in computer terms)

• The actual html code
• You want to avoid this if possible
• That's why you are using a WYSIWYG editor
• Key thing to know is the "Markup" is accomplished using "tags"
• These are much like word processor codes to enable formatting features. They serve the same purpose in html--to allow formatting of your page
• Most tags come in pairs--start formatting a block and then end formatting of the block
• “Select then Do” to avoid overlapping blocks which generates much confusion

• The menu options are similar to most Windows programs
• In Communicator, under File is the option to create a new blank page
• This will open up the editor (known as Composer)
• It is just a special word processor, so type

• We are going to create your very own homepage, using the concepts that follow (with assistance from me as needed)
• There are no steps that have to be followed in specific order
• For the most part, "Necessity is the mother of invention"
• When you decide you want to do something, then you look to find out how
• I've tried to foresee all the things you might someday want to do and include that information

• Even after typing just a little, you will want to save your changes
• Click on the Save icon
• Enter the important information in the dialog box
• Be sure to save it to the a: drive in most labs to take it with you on a disk
• Be sure you remember the name you give it so you can reopen it at some later time

• After you type some, you may decide to reposition the text
• You can copy text (and images) and paste them later
• In fact you can copy text while using one program and paste using another program.
• This is very useful at times and works for most programs, not just relating to web page creation
• Should be used when copying locations as much more accurate than writing down and retyping
• You can also cut text and paste it later
• The difference is that copy leaves the text where it is and cut removes it from its current location

• The enter key repeatedly will NOT insert additional blank lines, even though in Composer it seems to--remember Composer is not always WYSIWYG
• Use the Insert|New Line Break (or shift + enter) to do this

• There are icons to allow changing format of your text
• Select the text then choose the icon to make the desired change
• Or, access the Format menu
• You never see the codes that signal the beginning or ending of formatting, so it is easy to select more or less than you were intending to as you may accidentally select some of these hidden codes

• Standard types of formatting
• Font type, size, color, and special effects
• Bullet or numbering
• Indents
• Alignment
• Altering colors not usually done as most users are accustomed to the default colors and their meaning
• Content is key--not lots of formatting "bells and whistles"

• Title-What shows up when the page is displayed and often in searches
• Author-Your chance to get your name on the page. Useful as search engines will catalog this information
• Description, keyword, and classification-Not shown on the page, but cataloged by search engines. Even if not used here, put key words into your pages so appropriate searches will find your page

• background image-the image that shows up as a background for your page (typically a small image that is repeated numerous times). A few are provided on your disk-experiment
• Watch the background color as you want your text to be readable
• Can go with your own color scheme--best to go with default as that is what your users are used to seeing

• Non compressed images are too large and take too long to transmit over the internet
• There are two types of image compression commonly used on the Internet
• .jpg-Joint Photographic Group-best for photographs--is a lossy compression, but most monitors don't display accurately anyway
• .gif-Graphics Interlace Format-is loss-less, but gif photographs still too large, but ok for black and white drawings
• animated .gifs--allow for the appearance of motion on your web page
• transparent .gifs--allow your background color to come through
• image editor-may need a special program to resize, crop, or convert images.
• LviewPro is one.
• Home PC, April 1998, p.103 has an article on "Compressing images for your Web site." It gives details on another package.
• Classroom Connect, April 1998, p.13 has an article "World Wide Web Images 101" with some hints on images
• digital camera-see PC World, May 1998, p. 267 for an article on digital cameras
• scanner-see Family PC, June 1998, p. 87 for an article on scanning
• sites that have clip art images
• http://www.barrysclipart.com/
• http://www.ClipArtConnection.com/
• http://aplusart.simplenet.com/aplusart/index.html
• http://www.abcgiant.com/index.htm
• http://www.free-graphics.com/
• http://www.sitecreator.com/cgi-win/wcv.dll?makegif
• To get the image from the site, right click your mouse on the image you want and select save image as--remember where you save it and what you call it

• Keep in mind many images are copyrighted
• Fair Use is a good guideline
• If you are linking to a site where the image came from, an image is probably appropriate
• If you are presenting an image as your own (and it isn't), that is inappropriate

• At some point, you will want to insert images
• Use Icon
• Use Insert-Image
• As with most Windows programs, there are menus, icons, (and key strokes) that will all accomplish the same result

• Size-is the size it will display, not the size it is stored. Just making an image show up smaller on a page won't make it quicker to transmit
• Find image which you have placed somewhere on your disk
• I have placed some images on your disk-experiment

• The blue underlined text that takes you to another location when it is clicked
• All web pages should link to at least some other pages
• So, you'll need to create links from some of your text or images

• You'll also need address of the location you want to go
• On the disk is the file 99educ.htm
• It is just like the online version of this talk
• open it in Netscape to get some addresses of sites you might want to link to in practicing
• Get used to highlighting the address in Navigator, copying it, then going back to Communicator to paste the address
• This will increase accuracy greatly on long/complicated addresses

• Select the text or image you want displayed as a link and then select the link icon
• Enter the address you want the link to go to when selected
• To avoid typing errors, it is best to copy this address by going to actual site or using your bookmarks and paste the address in rather than retyping it
• In Communicator 4.6 one can drag bookmarks into the composer document and the title and corresponding link information comes over
• For this need separate windows of such size to see both windows (the composer document and the bookmark window)

• Often a concise way to present information
• Have same usefulness as any tabular display of information or data

• Select number of rows and columns
• Can format text within each cell
• Can preset relative sizes of each column
• Can alter the table borders, even making them not show. This is a VERY useful feature to force things to show up in certain places by putting them in a table with no borders showing
• Frontpage will put tables in automatically to get objects to show up where you placed them
• Beware!!  It may put in LOTS of tables if you place many objects.  This will make your page slower to load for the user

• A good way to introduce divisions in text
• Can change the format of the horizontal line

• Set targets for places within your page that you will want to link to
• Quite useful if you have an alphabetic list and want to allow people to jump to a, b, c, etc.
• Most people will not scroll through long pages, so break up into shorter pages or use targets to make navigating within a long page easier

• Once site is constructed, save the site (again-Remember where you save it and what you call it)
• Preview will let you see how the site will really look
• WYSIWYG not always exact
• Be sure links really do work
• Be sure it works on both Navigator and Internet Explorer- some features not consistent between the two

• As you begin to preview your page and make changes it is good to remember 2 key facts
• Composer is the editor where you make changes in the page
• Navigator is the browser where you view and test the page
• Be sure you are in the proper program to do what you want to do-Note the difference in icon in the upper left and the task bar at the bottom of the screen
• Be sure you are always looking at or working with the most current version of your page

• Can be tedious as addresses often come up as misspelled words
• Still it is good to check the spelling
• People will "judge" you on appearance and accuracy

• Move the page to the web server
• Some editors do this more easily than others
• Not only the pages, but all related images must be moved to the server
• May use FTP (file transfer protocol)
• If you publish it yourself, you will need an account (with password) on the server (your district technology person will need to arrange that for you)

• You can use the print to get a paper copy of your page
• It might be good to do this and realize that the addresses used in the links do not print
• It is often a good idea to include these addresses in the description of the link so they will show up when printed

• As your page grows larger, you may want to look for certain words or phrases in your page
• The find command searches the current page in the editor

• A way of displaying 2 or more pages at a time
• Netscape editor will not do for you, I think Frontpage will
• So would need a more powerful editor or learn about html code
• Viewing the source code of pages that have the features you like is a good way to begin to learn about html
• Frames are a good way to maintain a constant menu
• Not all older browsers display frames, so may want to build a non-frames version too
• Bookmarks don't always work well with frames

• Be sure it works on the server
• If you expect to update it often, you should learn to publish it yourself (your district technology person can teach you how while doing it the first time)

• Even when on the server, there needs to be links to your page so people can find it
• You need to advertise the site
• notes home to parents
• Local newspaper articles
• Can submit it to various search engines

• No--content must be kept current
• Must be sure links don't expire
• People will not return to a site without current content or with many dead links
• Good to have a date updated on your pages so viewers can gauge how current the site is.

• Making a class web page can be exciting
• Making a class web page can be frustrating
• Making a class web page can be difficult (especially in the beginning)
• That has never stopped other teaching innovations and should not stop this one either
• I hope you have gotten some ideas on how you can do this yourself