Guidelines for Developing Your Own Music Teacher Website

It seems like EVERYBODY’S doing it! More and more schools have their own webpages, and quite a few homepages show up on search engine results. Yet, for those of you who are still a little leery of this newfangled machine they call the computer, putting together your own website might seem a tad bit out of your reach. It doesn’t have to be. There are so many programs and tricks that make doing your own page as easy as doing a word document, and you don’t need expensive software for it, either!

First of all, a little background. Websites are viewed through what are known as “Browsers”. The browsers read the programming code known as html and translate it to make it understandable for the viewer. You can see the code used for the web pages you view just by going to View in the Menu above and finding Source. (Designers often use this trick when they find something cool they’d like to imitate or when they have problems.) See this paragraph I just wrote? This is what it looks like in its true code:

<p><font face=”Arial, Helvetica, sans-serif”>First of all, a little background.
Websites are viewed through what are known as &quot;Browsers&quot;.
The browsers read the programming code known as html and translate it
to make it understandable for the viewer. See this paragraph I just
wrote? This is what it looks like in its true code:</font></p>

Ack! Who can remember all of that? (And, that’s not nearly everything involved!). Thank goodness for WYSIWYG software. This stands for”What You See Is What You Get”, software that basically shows you what the page will look like as you type it. There’s one available on most of your computers that you don’t even know you have: Netscape Composer. If you have Netscape Communicator, you’ll have Netscape Composer. If you don’t have Netscape, then you can download it for free from the Netscape website.

Yes, I know, Word also converts to html, but there are reasons Word isn’t widely acceptable by designers for a web editing program. The major reason is that Word is so catered to Internet Explorer, that some of the code it creates gets garbled up by other browsers such as Netscape and AOL. All browsers aren’t created equal. They all have their own little quirks, just like any other software, and sometimes interpret code differently. That’s why it’s important to use software that will create code as universally acceptable as possible. Believe it or not, Netscape Composer does that.

There are other great programs that can do what Netscape Composer does (it does have its little problems, which means a little knowledge in HTML doesn’t hurt). Just check out any of the great download sites such as ZDNet or Tucows and find one that suits your needs. The main thing is…you want a program that works very similarly to a document program that shows you what you’ll be getting as you go. If you plan on getting into this hot and heavy, you might want to spring for Dreamweaver fromMacromedia. It’s pretty expensive, but it’s a wonderful tool for more intermediate or advanced design work. You can download it for 30 days on a trial basis.

I’d really suggest, however, that you bookmark some of the HTML tutorials down below. There may come a time where you’ll need to tweak your code (even Dreamweaver’s not perfect), and you’ll need to know the right code and tags to use.

You’ll also need a server on which to host your site. Many of you will probably have access to your school server, but some of you may not. There are several sites that offer free hosting (although you might have to put up with a little advertising). These sites might even include built-in design features that work like a WYSIWYG design editor. Suggestions: Yahoo!Geocities or Angelfire.Check with your ISP or home dial-up company. Often, these companies will offer about 2 megabytes of space for free for a home site. Check with their tech support about uploading (more on that later) and how the URL (or web address) will be set up.

For adding images, having a digital camera is obviously a treasure. If you don’t have access to a camera, you’ll need access to a scanner. All images must be saved in a .jpg or .gif format. What’s the difference? Images are measured in what’s known as pixels. (If you look closely at an image that’s been enlarged, you’ll often notice the colors are made up of tiny tiny squares of various shades that aren’t often seen except up close. Those are pixels.) .jpg or JPeg images are made up of p to 16 million varieties of shades or pixels, so this format is best if you want to use the truest quality, like for photographs. However, jpegs take up a little more bytes or space and are a little slower to load, so you want to make sure your image isn’t too big. Usually, you don’t need these any more than 300 dpi, or dots per inch. .gif images are best used for backgrounds and small images without much color. Gifs are set up at 260 colors.

Uploading is the opposite of what you do when you download all those cute little gizmos you like to add to your computer. Uploading copies the files from your computer to the server. The best program I know is WS_FTP, which is free to educators and government workers. You can download it from here. When you install it, you’ll need to put in the host name or address (which is usually Check with the hosting company for sure), the username you’ve been given, and the password. Don’t worry about host type. That’s usually AutoDetect. When it opens up, you’ll see two panels. The one on the left is your computer and looks very similar to My Computer on PC’s. The one on the right is the set up for your server. Again, you’ll need to check with the hosting company about which directory your web site files need to go into (most of the time, this information will be on the FAQ page of the hosting website). On the left, click on the file you want to upload. Click on the arrow that points towards the server, and WALA! Your file is zapped over. You can do just the opposite if you want! Let’s say somehow, your website files on your computer disappear. You can go to the server, highlight each file, click on the arrow pointing to the left, and download the files back onto your computer.

You can add sounds, too! (After all, we are music teachers!). All you do is make a link from the sound file you’ve made and make sure you upload the sound file with everything else. On sound files, I would suggest MIDI’s or coverting .WAV files (these are made if you’ve directly recorded something) into MP3’s, because the file is more compressed. .WAV files are huge. I like using CoolEdit. I use this for making sound compositions in class. It’s also a great editing tool for sounds, and coverts into so many different formats! And, it’s relatively inexpensive. Check out the sound compositions some of my students made. You can also see how I made links to these sound files. (One point on MIDI files. You really need to set them as a link, rather than have them play as the page loads. Many people don’t like that and would rather have the option of clicking on a link to play the music. Having music load in automatically makes the page load VERY slowly, and you might lose visitors).

You want some bells and whistles? There are certain little programs or scripts that can help you enhance your page, many of them for free. cgi-scripts are types of programs that are interactive, such as quizzes, some types of formmails, surveys, and other goodies. You need to check with whoever takes care of your server about whether it can support cgi. I’ve included links below for some freebies in javascript and cgi that you might want to jump into.

There should be some care taken when involving minors on any website. If you are using the school server in particular, you need to check with your school district about using pictures or classwork on a site. In no instance should you use a child’s last name. There are too many custody battle situations and privacy issues. Be very, very cautious about involving resource room students. There are special privacy issues involved there. Many school districts have release forms that the parents must sign before any school work or images of students can be featured on a website. If your site is not on the school server, it wouldn’t hurt to use these releases, anyway. Just send a note home explaining what you’re doing and asking for permission. It’s not worth risking the chance that a non-custodial parent who is not to be in contact with the child finds out where a child is. Or worse, having a molester find out a child’s name through a picture on the Internet, then going to that school and being able to call the child by name. At the very least, it’s not worth it to have a parent upset with you if they find out their child’s picture is on the Internet without their permission! That could get you into some hot water if the parent complains to the administration.

Don’t be scared. Jump in, start small, build as you go, and have fun! Welcome to the online world!

Here are some resources to get you started!

  • HTML Goodies Page-from primers to intermediate pages on html, javascript, cgi, and other types of features.
  • Webmonkey-kind of funky, but full of great ideas, again, helping you work your way up from beginner to a great intermediate or even advanced designer!
  • A Primer on Getting Images Ready
  • Other good images pointers
  • A Netscape Composer Tutorial
  • Classic MIDI Archives
  • The Music Madness links for sites by music teachers

CGI and Javascripts for the Taking!

  • The CGI Resource
  • Scripts for Educators-And, Kristina’s great with tech support, too, on her scripts
  • Matt’s Script Archive
  • The Javascript Source
  • Dynamic Drive
  • Big Nosed Bird (don’t ask. I don’t know why it’s called this)

Clipart for Music and Education

  • Free Education Images
  • Teacher Files
  • Images from TeacherNet
  • Awesome Clipart for Kids
  • Music Images from SK Designs
  • Music Clipart at All Free Clip Art
  • Animation Factory
  • Tricks to Using Paint Shop Pro