Web
Design ResourcesLeast Tern > Tech Class > Teacher Resources
HTML | CSS | Color Pickers | JavaScript & DHTML
CGI and Java | Design & Layout | PHP
Graphics & Fonts | Sounds & Quicktime | Cool Things to Add
Adding Application-specific Projects to Web Pages
Software Apps | Evaluation Tools
Highlighted Resources
a comprehensive resource listing in which you will find HTML, blogs, wikis and more
Web Resources - must see page
give your site a GNU license
these examples will inspire you
- Learning Html - designed for kids, this is clean beginner tutorial from the Internet Public Library
- The Bare Bones Guide to Html
- Andy Carvin's HTML Crash Course for Educators
- HTML Goodies: The Basics
- A Beginner's Guide to HTML - A copyright free guide to download or use online
- Compact Index of HTML Tags - bookmark this page so that you can refer to it when the need arises
- Html Tutorials - from w3schools - free! and detailed Html lessons - also CSS and JavaScript
- Lissa Explains it All - begin with Html and advances to CSS and JavaScript - good support for the class
- HTML Tutorials - review course content with these pages
- Authoring (Html) - short and clear guides from Webmonkey
- EchoEcho Tutorials - HTML, JavaScript, CSS, Flash...
- Back to Basics: Meta tags - learn why and how to include these essential but often overlooked elements in the <head> section
- Minot Public Schools guide to building web pages - includes links to tutorials, tips, advice, code sources - all of the resources a teacher might need to a site jump started
CSS - Search for a specific CSS code set in Google, using the keywords "topic CSS"
- CSS Style Sheet Reference guide - what will work with our IE5 on the Macintosh and discusses what may cause you problems at home
- CSS Tutorial - this site also contains Html and JavaScript tutorials, plus links to web design resources
- Lissa Explains it All - basic CSS structure
Mrs.Mac's How-To pages:
- CSS Basics - links, backgrounds, horizontal rules, controlling location and formatting of page elements
- Custom Link Underlining with CSS - short tutorial, icons to use
- Borders & Frames - how to place a frame or border around any object or element on a page
- More CSS - controlling spacing and white space, bordering page elements, minicaps, controlling font and bullet appearance
- Creating layered objects with CSS
- Color pickerII - this one shows background, links and font colors together AND gives you the .html body tag
- RGB Color Values - web-safe colors with hexdex code
- 216 Web Safe Color Chart - this ones shows you the gradations of color - it will help you understand the hexdex numeration
- Visible Dreams - Welcome to Color - a keep-it-simple introduction to RGB and hexadecimal color coding
- Free JavaScript Code Snippets - cut and paste code for many actions, but you will need to study the code too
- Code Punk's Beginning JavaScript
- The JavaScript Source - cut and paste code, tutorials - if it doesn't work on the source page, don't use it!
- Simply the Best Scripts - clean multi-platform scripts, good directions, well indexed - these scripts often use DHTML and integrate well with Dreamweaver
- Cometzone - contains cool icons, mouse pointers and icons - caution: not all of the scripts work
- Script Examples for JavaScript and World Wide Web - scripts that support the book - include simple rollovers, alerts, status bar messages, banners, etc. And they work!
- Netscape JavaScript Manual
- Dynamic Drive - well explained DHTML scripts - make sure they work in your browser before using (view the demo)
- Web Authoring for Interactivity Using JavaScript and Forms - course outline with a great deal of instructional material - designed for teachers
Mrs.Mac's Pages: also check the CSS pages above
- Scrips for Scrolling Text (and a Flash solution) - these scripts are used to create scrolling announcements
- Open New Window Javascripts
- Cool Cursors - All you have to do is open the page and copy the code. Read the text too!!
- Neat JavaScript Quiz - multiple choice quiz with instant feedback on the answer
- Multiple Choice Quiz - another script. This one gives you a score. Notice the source of the quiz at the bottom of the page.
- A Clock Cursor - changes the cursor into a clock that wanders around the screen.
- Analog Clock that mounts into the lower right of the window.
- Falling Object - this will cascade a small graphic, like falling rain
- Moving Object - this will move a graphic around in the open window, on top of everything else.
- Trailing Icon Cursor - this will "bounce" one graphic behind the cursor.
- Hover and Click Effects - alternate versions of the above, alert boxes, pop-open windows
- Drop-Down Menu - This page will walk you through adding the code to your page for a menu like the one below. It includes a little how-to movie.
- CGI101 - for those who want to learn a little bit about how to create form handlers
- Mill Road Studios - CGI Scripts - some free scripts that are unique, such as one to give visitors to your site a free webpage - others for a small fee
- Java tutorials free from IBM - a few of these assume little or no knowledge
- JavaI - a free and freewheeling instruction set - introduction for the curious and rewarding for the patient
- Matt's Script Archive - CGI and Perl scripts for web servers - very well documented - counter, bulletin board, search function, formmail and more
php - To use this language, you will need to have an online database, such as MySQL, on your web server. With it, you will be able to create interactive Web forms and retrieve it
- Web Page Design for Designers - an e-zine that features not only a superb design, but articles about CSS use in design
- Fine Points - Little things that make a big difference in your web pages
- Top 10 Mistakes in web design - things to avoid at all costs!
- S---y to Savvy - advice on ways to kill and ways to improve your web pages
- Web Style Guide from Yale - be sure to read the Interface Design sections
- Analysis-Based Layout Design - this pages answers a specific layout query, but the concepts presented will be true for your pages
- Web Page Analyzer - free speed test - this will help you to judge your design decisions - the page has to be publically available
What's all this about DPI and Inches and Resolution? - read this before scanning, working in Photoshop, or becoming too frustrated to continue
- The Amazing Picture Machine - index to graphical resources on the net, from NCREL
- clipart - free to education student-created images in many categories - your students can upload as well, with the understanding that images will be freely available at the site
- Designed to a T - free icons - neat and clean - also web design tips
FreeFoto - largest supply of free photos for nonprofits
- Free Clip Art - for educational projects
- Free Bullets - interesting options, includes how-to .html code
- Gifs.cc - free bullets and animations - you need to provide a source link
- Icon Bazaar - free images and animations - you must provide a link back to the site
- Photoshop 6 : What it Means for Web Work - covers some the basics and some exciting tools
- Awesome Library - clip art and graphics for web pages
- Flamingtext.com - many fonts you can use for graphical titles, plus scripts, art, code
- 3D Textmaker - select font, color and efffect - creates an animated 3D title graphic to add to your page
- Cooltext.com - another graphics generator - free - can be used to create custom logos
- MacFonts.Com - you can only install these on a home computer - to use on a web page, you must either create a graphic object or prompt your user to download and install the font! There is a connection to PC fonts on the page.
- Animation Factory - but don't overdue! Here is another route to Animation Factory
- Discovery School's Clip Art Gallery
- Claris Home Page - open a new, blank page and use the Library function to view clip art. You can copy (option drag) the files from the HD to your own images file
- PageWorks Toonland animations - free only to school sites so don't use if you post your page elsewhere
- How to : Add a .gif animation to your page using only AppleWorks and Gif Builder
- Background textures - shift-click one of the file names to open the tile in a new window
- JAC Clipart Archive: Backgrounds
- Multimedia/AudioMP3 - links to basic info sources from Webmonkey
- Directions for inserting .mp3 files into Dreamweaver pages
- Apple has great links to info about MPEG-4 standards, computer ethics, law, how-to
- Embed tags with Quicktime - directions for posting a QT movie on your page
- Free Sound Effects, etc. - copyright free downloads (not mp3)
- See also: Quicktime below
Other things to add to web pages or websites
- Surveys & Forms - some sites provide you with code to insert, others must be hosted externally and linked to from your page
- Advanced Survey - free - they host - has the advantage of allowing you filter results by a data set - ads - no ads in advanced levels (monthly fee)
- Center for History & New Media - free registration gives you access to a poll tool and a survey tool (hosted online)
- FormSite - link to their server - free service provides limited (very) surveys and forms and small ads - there are 3 more levels, including one suitable for secure school forms
- Freebok - free hosting of guest books, polls, forums, discussion groups - very small advertisements
- Poll Builder - creates code for a poll - you add it to your site - see one above
- Sparklit - web poll - figure it out on your own or follow Least Tern's directions - free but requires that a form be completed (under 13 need parent permission)
- Zoomerang - both a free (10 day limit) and fee-based solution
- Posting Student Work
- Digital Scribe is a php/MSLQ system for easily uploading student work to a web server - this is good for an all-school or grade level site - free
- Blogs are another way to go
- Project Poster Home - free template driven space for students to create and post a monitored page for 1 month
- View our links to CMS sites or check out our review of the best: ePaper or Plastic?
- Scripts for various features like counters, bulletin boards, count downs, random image display, HTML to e-mail (form mail)
- NMS Scripts - open source scripts, perl and cgi
- Matt's Script Archive - the one has the classic form mail script (we use it on this site)
- RSS - the good news is that Dreamweaver MX produces valid .xml - with suggestions - I like Real Simple Syndication (RSS)
- Andy Carvin's Waste of Bandwidth - In addition to many other topics related to closing the global digital divide, Andy has written a great deal about RSS, photographs, and blogging - on his blog. Most useful entries are in early April, 2004 - Feb.29, 2004 post explains how to get an RSS from Yahoo Groups list posts
- Blogging and RSS - What's it all About? - both info and connections that will get you started, if you are a student, a teacher or a school
- Making an RSS Feed - how-to article and explantion of RSS links - with many hyperlinks - how you can syndicate your sites content for others
- Feedroll - this site provides you the code to RSS feeds from many content providers on your site - CNN, NYTimes, PCMagazine, Wired
- If you want to learn how to "tweak" the appearance of a feed yourself, read about it HERE (Wytheville Community College News Center)
- List of RSS feed aggregators (news readers) from dMoz
- RSS Feed Readers - another list, from blogspace
- RSS Validator - will check your .xml code for errors - be sure to use this if you hard code!
- Feed on Feeds - if you have php and MySQL on your server, download this application to mount your own aggregator, over which you will have full control
- Search for a feed: Syndic8.com
Aggregators - these are very useful applications that "read" RSS feeds you select and post the newest posts to a listing you control
- AtomEnabled Clients - Atom is an alternate to RSS that enables a newsreader (compatible with Atom) to read blogs and feeds - this is is a list of tools.
- Bloglines - free web-based (does not install on client machine so it is portable)
- NetNewsWire (Mac only) - news aggregator
- Pluck - free web-based aggregator that displays inside of IE - Windows only
- SharpReader - PC aggregator
- Yahoo now adds RSS feeds to your personal page: my.Yahoo.com
New Implementations
- WorldKit - use this set of applications to add RSS feeds (interactivity) to a map, based upon longitude and latitude - wild!
- Blogs & WIKIs -
A blog is a "weblog," a method of uploading a type of digital journal or sectional story or... to a webpage - educational uses are just becoming apparent, generally for course syllabi and links, writing workships, peer review or class commentary on a teacher-presented text or image. A WIKI is something else entirely.
Visit: Golgotha High School - a fully functional (not full content-wise) Blog/Wiki that would replace a school web site or Intranet.
Kevin Jarrett provides an expert opinion about the Comment Approval feature.
- Andy Carvin's Waste of Bandwidth - In addition to many other topics related to closing the global digital divide, Andy has written a great deal about RSS, photographs, and blogging - on his blog. Most useful entries are in early April, 2004 - Feb.29, 2004 post explains how to get an RSS from Yahoo Groups list posts
- Bernie Dodge writes about blogs and wikis and their connection to WebQuests
- Blogging and RSS - What's it all About? - both info and connections that will get you started, if you are a student, a teacher or a school
- Blogroots - reviews of blogging sites, software and discussion of uses (including education)
- Blogs, Wikis, Bulletin Boards, email - a comparison of essential features
- Blog Links - from Minot School District's fabulous tech resource
- Blogging as a form of journalism - article in the e-zine Online Journalism Review
- Education Web Logs - Technology and Learning got the bug in September, 2003
- Educational Blogger's Network - a blog about blogging
- Edublog News - information and links to active school blogs
- EdBlogger Praxis - examples, most of which contain useful information for teachers and IT
- Weblogs in the Classroom - introduction: what, why use, when use, how to...
- Weblogg-ed, a kind of ezine, maintains a list for teachers to join - at the very least, read the Why Weblogs? postings and explore some of Will Richardson's blogs
- What is a Weblog and Where Do They Hide? - discussion and links, from David Dillard
- Writing with Web Logs - article in the February 2003 issue of Technology & Learning - links to examples and applications (some repeated below)
Software and Websites for Blogging
- Blogdrive - free hosting, many templates - you have to live with an ad on the top, but you get a chat room, calendar, commenting, multiple blogs, help, more
- Blogger.com - free hosting and simple, if slow, creation of a simple private or public blog - some .html ability is needed if you want to improve the appearance or add images or a mailto: function - there are links to nice examples, though - best with a high bandwidth connection
- BlogStyles - templates to download and use with Moveable Type and Blogger
- Manila - from Userland, an organizational solution for the ambitious school - do it all inhouse - provides many CMC (communication) solutions
- motime - free blog hosting
- Movable Type - free NO LONGER blog creation software NOW has licensing based upon number of blogs and users - this site has excellent explantions so go here first to learn about your options
- Phlog - a blog that specializes in accepting e-mailed images (under 120K) and creating instant posts. Free - and has an RSS feed (add rss.xml to the end of your URL, then feed it into Feedroll)
- Plone - an opensource teaching environment (Content Management System) that makes use of Blogs and WIKIs. Access a MiniGuide to Plone tools here.
- Postnuke - this is a full CM (Content Management System) - free - uses both blog and wiki modules - requires IT support and maintenance
- Radio UserLand - easy to use Blogging software, downloadable - creates clean sites, lowcost - hosts for a year
- SocialText - This is an "enterprise" solution ($995/yr for 5 users) that is both a blog and a WIKI - supports video conferencing
- tblog - template to publish, free
- TeacherHosting.com - webpage and blog hosting for a very low ($4-$5) monthly fee - designed and supported for education
- Textpattern - requires a server, like WordPress - password protection and comment approval are nice features for education
- Typepad - small hosting fee, but you get no ads, multiple blogs and design control
- WordPress - replaces Moveable Type as the blog you can upload on your own server - clean look
WIKI ware
- EditMe - at last, a low-cost WIKI service! For $4.95 base fee you can build a WIKI site that is hosted by EditMe - features include Comments, images, WYSIWYG editor (or .html), Attachments, version tracking, and administration granting, as well as e-mail notification of comments - as of 12/07/03, editing tools worked reliably on IE 5.5 for Windows, OK on Netscape 7.+ for Mac OSX, and did not appear on IE 5.2 for OSX
- The best way to learn about the WIKI phenomenon is to visit the Wiki Wiki Web and get involved in the experience
- FormSite - will host a free form or, for a fee, an advertisement-free form - results can be loaded to a webpage or emailed (depending upon service choice) - easy to use
- FormMail.To - create browser e-mail form easily - hosted by their server - free
- ListServ:
- Mailman - GNU app with endless features - web-based administration is one
- Yahoogroups is free and relatively easy to maintain
- Quizzes:
- HotPotatoes creates crosswords, quizzes, other - free to educators - PC and Mac - exports clean html files
- AnyQuiz - inexpensive CGI script for multiple choice questions - scoring, statistics page - can be used for a classroom quiz
- JS Quiz Maker - download this freeware java-driven engine for making your own online quizzes and self-tests
- Chat - there are many free chat scrips out there.
- Stellar Stuff's Chat Express is very user friendly and can be used in a variety of ways - inexpensive and has an installation option
- mIRC Homepage - offers links to mIRC download, to other IRC products, and to information and tutorials
- Flash:
- Flash 5 tutorial - learn how make those pop-up sub-menus and other animations - you will need help inserting them in your pages, but you can certainly learn Flash on your own - requires Macromedia Flash 5
- Lynda.com - hints and tutorials, and don't miss the Inspirational Sites that use Flash
- Word of the Day and Quote of the Day - add them to your page - from Out2teach
- Awesome Clipart for Kids: Worksheets & Puzzles - see if you can figure out how to make one and have it appear on your page - a screen shot is a last resort
- Custom cursors from Lissa Explains
- Bulletin boards - these are sites that will host a free or low cost board for you - some have banner ads, some will be transient in nature - look for: ability to OK group members, minimal or no ads (especially no pop-up ads!), each of administration, message archive
- Quick Topic - we like this one - free
- ezboard
- Boardhost - $10 a month after a 14 day free trial - use the trial to see if you really want a bulletin board
- Freebok - free hosting of guest books, polls, forums, discussion groups - very small advertisements
- See also Least Terns teacher materials for quizzes, puzzles and visual web products
Adding Application-based Projects to Web Pages - note: plugins are generally required on the client machine!
- MicroWorlds
- Putting MicroWorlds Projects on the Web
- Download the free WebPlayer for Mac or PC - read the fine print closely
- Creating MicroWorlds Projects to be viewed in an Internet Browser
- Inspiration - Using Site Skeleton export to create a web site (complete or in outline) - requires Inspiration 7
- Quicktime - download the player - needed for many of the other app plug-ins
- Embedding Quicktime for Web Delivery
- MacWorld article, January 2003 : Presentation Power Tips - make sure your QT movies will move to a PC! - as of 2/16/03 this issue had not been archived
- Download Quicktime Pro - around $40 and worth it!
- Dreamweaver-specific instructions for linking and embedding
- HyperStudio
- HyperStudio Plug-in Quick Start - follow the link to How do I get my stacks online
- Using HyperStudio Stacks as web pages
- Building a Web-Ready Hyperstudio Stack for posting on the Intranet
- Kid Pix
- Kid Pix on the Web - for Mac users, how to create a QT slide show
- KidPix Notes - these are alternatives for those who do not have access to the QT tools
- Putting Kid Pix SlideShows on the Web - yet another method that avoids QT
- PowerPoint - the features of this app change with platform and version - you must be careful to use directions specific to the app you have on your computer
- Animate Your PowerPoint 2002 Web Presentation - this also includes directions for mounting to a web page
- Putting PowerPoint Presentations on the Web - for PowerPoint 2000
- PowerPoint and the World Wide Web - for PowerPoint 97
- Catalyst How-To: Save PowerPoint 2000 and PowerPoint Mac 2001 for the Web - there are some important hints here about using the Save menu options
Helper Applications
- Impatica for PowerPoint - converts ppt shows into Flash-enabled web content, maintaining animations and narration
- Macromedia Breeze Live, Training & Presentation - allows for online publication of narrated PowerPoint presentations and creation of online course and training materials - Windows - quiz and survey tools - annotation and whiteboard - no client application necessary for a hefty lifetime licensing or a hosted service - modular components
- Microsoft Producer for PowerPoint 2000/2003 - free plug-in
- Create a Favorites folder in Explorer and distribute it to others as a web page (Mac) - from Least Tern
- Photoshop Elements: Creating a Web Photo Gallery in 10 easy steps
Software Applications for Web Design - see also Tutorials Available On-line
- 3D Writer - inexpensive application sold only to schools - creates hypertext, saving all files as .htm - instant web pages! Useful for hyperfiction, web pages, school web sites - images can be easily included, text can be formatted
- Claris Home Page - no longer available from FileMaker, Apple or Claris, this Classic environment editor is still great for elementary and "get me there quick" needs
- Tutorial & Online Workshop from Least Tern
- Basics (this also illustrates a pop-up window JavaScript)
- Microsoft Word - how to create a web page in Word and upload it
- Notes About Converting Word Documents to Web Pages - some things to watch out for, some tricks
- Dreamweaver: The Training Café - click on How to Build a Course Web Site for tutorials and downloads - you need to register, but it is free - requires Dreamweaver
- Dreamweaver, etc. - a resource site for the book - you should look at the Resources link
- Tutorial for Publisher 2000
- Oswego Schools links to Tutorials for Web Design - Photoshop, web apps, PowerPoint, others
- Photoshop Elements - We consider this an essential for schools - Follow links to free tutorials
Editors & Imaging - also see media software on our About Software page
- 1st Page 2000 - HTML editor that is easy to use; site building, like the defunct Homesite
- EzyPage 5.0 - a WYSIWYG shareware application ($25) - download with 30-day trial from tucows - Windows 95-XP
- Microsoft FrontPage Express - free download of this simple software for the PC - some recent problems with this download
- EasyHtml - PC only free download - not a visual editor, but a hardcoding assistant
- Mozilla - free composer, easy to use and spare - the link also provides you with a link to a nice math fonts app for web pages, mathML
- NoteTab - PC text and HTML editor - free in Light version
- Netscape Composer - available free as part of the Netscape browser, for Mac or PC
- HTML Creator - for the Mac, a free app that assists you with code writing
- BBEdit lite - if you like to work in pure code, this is better than SimpleText
- Html Editors for the PC - downloads with a little description
- HomeSite - from Macromedia, a code-only editor for PC users - find upgrades, purchase, and tutorials at this link
- Publisher 2002 - from Microsoft - not code that is easily imported into another editor, but will create an OK page - the Using Publisher link provides tutorials, advice and activities
- EasyThumb - PC only free download - create thumbnail images for web pages
- Partners in Rhyme - Sound editors and players for PC
- The Partnership for Lifelong Learning Web Olympics: Scoring Rubric - evaluation of a school site
- Student Web Page Rubric - from storyboard to HTML - can be adapted for a multimedia project
- Least Tern web design rubric
- Least Tern web project rubric
This page is licensed under a Creative Commons License.
Elizabeth Sky-McIlvain 8/15/04
