How did he do that?!

Caveat: If you couldn't tell, I am not a real graphic designer, I only play one on the Internet. The Schoolhouse Spooktacular page is my first serious foray into that territory. Although I am personally pretty proud of it for a first attempt, I am also fairly well aware of its deficiencies, particularly in the music interface, and in the quality of some of the images, such as parts of the building, depending on the browser and video driver you have. So I just need to say up front that this "About" page is intended primarily for other beginning web designers such as myself who may be wondering how to accomplish some of the things I did. I don't claim to be proficient with the software, or promise that my techniques are necessarily the best, most efficient, most browser-independent, and so on. But, if you don't know how to do some of this stuff at all, I'm just saying that here is one way I figured out to do it. Experienced web graphic designers are welcome to keep their guffaws to themselves. (Or, better yet, tell me how I could have done it better!)

This is also basically my chance to brag. If you're not into hearing me go into great length about how I did the page, you can return to the Schoolhouse Home page now.

If you're still here: On to the details...

General Page Creation Although I know the basics of HTML tags, I'm not one of those purists who still insist on typing in every tag in Notepad (Windows) or TeachText (Mac). Do software developers still write all their programs in assembly language? Of course not! It's good to know how to use the low-level techniques when you have to, but why make more work for yourself the rest of the time? At the same time, I don't want to be limited to a preset look-and-feel, and I want to be able to get down to the source level if I need to. So I settle on the middle ground and use Netscape Composer, the graphical editor that comes with Netscape Navigator. It's about as easy to use as a word processor, but is designed around HTML closely enough to be versatile. It saves and reads raw HTML, so you can make tweaks to the raw code in a text editor and still go back to Composer later without having to do any conversions. It also has easy options for setting the page background color or image, and custom link colors. It's got some idiosyncracies, but for the money (free with Navigator), I think it's the best deal.

Image Manipulation What's the best photo editor to use if you don't want to spend multi-hundreds of bucks on the full-blown Photoshop? Try Adobe's PhotoDeluxe Home Edition, from the same company, but costing only $50! It's chock full of a lot of neat features aimed at home users, such as "guided activities" to scan and touch up photos and use them in cards, calendars, and web pages. Although I don't usually go in for that extreme of narssicism (except for Milo's photo album, for which I plead the dictates of popular demand), it does have some great and easy-to-use features that I would imagine are more accessible to beginners than the equivalant functions in Photoshop, especially if you use the "Expert Menus" (i.e. normal menus, as opposed to "guided activities") interface. I used this software to scan in the picture of the building, and to resize, re-color, split up, and otherwise edit most of the images on the page. I saved most of the images as GIF files with transparent sections, since most of them were going to be animated, or adjacent to sections that were animated. Most of the time spent with this software involved the building graphic, but I also used it to re-color and resize the Spooktacular logo which someone else had sent to me as a PowerPoint slide.

Animation This was the newest area for me, apart from the music. I know there are many sites out there where you can download animated GIFs by other people, but (1) I needed at least some of the images to be original, and (2) I have very limited patience with browsing pages and pages of images to find just the one I'm seeing in my mind. So, I decided to try and do my own. Initially I couldn't find where to download animation software, but I have since found an entire page of links to such software at The Software Toolbox. Before that, however, I did find one on my own, and ended up using that one, and it works fine. It is GIF Construction Set Pro, from a quirky company called Alchemy Mindworks Inc. This company also sells fanstasy/sci-fi books and has a page dedicated to illustrations of and ruminations on a collection of evocative pre-Raphaelite paintings. (And if you know what that means, you must actually be an artist.)

A big challenge was how to animate different sections of the same image independently. Obviously this is necessary for the building, where the different animations are going at different speeds. I also wanted to use it for the logo, since only a small part of it is animated and I didn't want to waste space "animating" large portions which didn't actually change. I first tried superimposing separate animations with transparent backgrounds over a static image, but the only way I knew to do that created multiples, or partial multiples, of the background image if the window was too big, or cut it off if the window was too small. What finally worked was to break the image into rectangular sections (which I did in PhotoDeluxe Home Edition) according to where the animation was or was not to occur. Then I could animate the different sections independently. It took some time to figure out how to then re-assemble the sections on the screen so that the image appeared whole again. I've seen other sites that do this, so I knew it could be done somehow. The trick is to put the images into table cells, where the table has a border line width of 0. (Oddly, it doesn't work to have no border line, you end up with gaps around each section. You have to specify an actual border with zero width.) The table cells keep the sections lined up, and you can even get fancy with cells that span multiple rows and/or columns so you don't have to split up the sections in an exact grid. You can also put tables within tables, which I did for the animations at the top of the page: The outer table has a spider in the left-hand cell, an inner table to re-assemble the logo in the middle cell, and an inner table to re-assemble the building in the right-hand cell. (Let's see you HTML coding purists do that in Notepad!)

Background Music Again, a new area for me. I found the technique I ended up using at a page called "How do They Do That With HTML?", which has a collection of such tips collected in groupings such as "background sound" and "awesome graphics". Aside from JavaScript, which I probably should have used, the music section recommends two methods. I used the first one, the <EMBED> tag. Unfortunately, this seems to not function or display consistently across browsers and versions, which makes me think next time I'll try JavaScript. The MIDI files which I used were sent to me by someone else, who I'm sure downloaded them from somewhere.

Cool Fonts You can get TrueType font files from a great variety of places, start by looking at Yahoo's font category. So I simply found a few I thought would be useful, downloaded them, and put them in my system Fonts folder so that they were accessible through the standard font dialog. Since of course I can't rely on your system having them, I just typed the phrase I wanted into the Windows Paintbrush program in order to make a graphic out of it. The only place I actually ended up doing this was the "Musical Selections" heading, which is a font called "Blood of Dracula".

This concludes your guided tour of the inner workings of the Spooktacular page. Feel free to contact me with your comments, complaints, accolades, or advice.

- The Schoolhouse Webmaster

Return to the Spooktacular page.

General Page Creation	Although I know the basics of HTML tags, I'm not one of those purists who still insist on typing in every tag in Notepad (Windows) or TeachText (Mac). Do software developers still write all their programs in assembly language? Of course not! It's good to know how to use the low-level techniques when you have to, but why make more work for yourself the rest of the time? At the same time, I don't want to be limited to a preset look-and-feel, and I want to be able to get down to the source level if I need to. So I settle on the middle ground and use Netscape Composer, the graphical editor that comes with Netscape Navigator. It's about as easy to use as a word processor, but is designed around HTML closely enough to be versatile. It saves and reads raw HTML, so you can make tweaks to the raw code in a text editor and still go back to Composer later without having to do any conversions. It also has easy options for setting the page background color or image, and custom link colors. It's got some idiosyncracies, but for the money (free with Navigator), I think it's the best deal.
Image Manipulation	What's the best photo editor to use if you don't want to spend multi-hundreds of bucks on the full-blown Photoshop? Try Adobe's PhotoDeluxe Home Edition, from the same company, but costing only $50! It's chock full of a lot of neat features aimed at home users, such as "guided activities" to scan and touch up photos and use them in cards, calendars, and web pages. Although I don't usually go in for that extreme of narssicism (except for Milo's photo album, for which I plead the dictates of popular demand), it does have some great and easy-to-use features that I would imagine are more accessible to beginners than the equivalant functions in Photoshop, especially if you use the "Expert Menus" (i.e. normal menus, as opposed to "guided activities") interface. I used this software to scan in the picture of the building, and to resize, re-color, split up, and otherwise edit most of the images on the page. I saved most of the images as GIF files with transparent sections, since most of them were going to be animated, or adjacent to sections that were animated. Most of the time spent with this software involved the building graphic, but I also used it to re-color and resize the Spooktacular logo which someone else had sent to me as a PowerPoint slide.
Animation	This was the newest area for me, apart from the music. I know there are many sites out there where you can download animated GIFs by other people, but (1) I needed at least some of the images to be original, and (2) I have very limited patience with browsing pages and pages of images to find just the one I'm seeing in my mind. So, I decided to try and do my own. Initially I couldn't find where to download animation software, but I have since found an entire page of links to such software at The Software Toolbox. Before that, however, I did find one on my own, and ended up using that one, and it works fine. It is GIF Construction Set Pro, from a quirky company called Alchemy Mindworks Inc. This company also sells fanstasy/sci-fi books and has a page dedicated to illustrations of and ruminations on a collection of evocative pre-Raphaelite paintings. (And if you know what that means, you must actually be an artist.) A big challenge was how to animate different sections of the same image independently. Obviously this is necessary for the building, where the different animations are going at different speeds. I also wanted to use it for the logo, since only a small part of it is animated and I didn't want to waste space "animating" large portions which didn't actually change. I first tried superimposing separate animations with transparent backgrounds over a static image, but the only way I knew to do that created multiples, or partial multiples, of the background image if the window was too big, or cut it off if the window was too small. What finally worked was to break the image into rectangular sections (which I did in PhotoDeluxe Home Edition) according to where the animation was or was not to occur. Then I could animate the different sections independently. It took some time to figure out how to then re-assemble the sections on the screen so that the image appeared whole again. I've seen other sites that do this, so I knew it could be done somehow. The trick is to put the images into table cells, where the table has a border line width of 0. (Oddly, it doesn't work to have no border line, you end up with gaps around each section. You have to specify an actual border with zero width.) The table cells keep the sections lined up, and you can even get fancy with cells that span multiple rows and/or columns so you don't have to split up the sections in an exact grid. You can also put tables within tables, which I did for the animations at the top of the page: The outer table has a spider in the left-hand cell, an inner table to re-assemble the logo in the middle cell, and an inner table to re-assemble the building in the right-hand cell. (Let's see you HTML coding purists do that in Notepad!)
Background Music	Again, a new area for me. I found the technique I ended up using at a page called "How do They Do That With HTML?", which has a collection of such tips collected in groupings such as "background sound" and "awesome graphics". Aside from JavaScript, which I probably should have used, the music section recommends two methods. I used the first one, the `<EMBED>` tag. Unfortunately, this seems to not function or display consistently across browsers and versions, which makes me think next time I'll try JavaScript. The MIDI files which I used were sent to me by someone else, who I'm sure downloaded them from somewhere.
Cool Fonts	You can get TrueType font files from a great variety of places, start by looking at Yahoo's font category. So I simply found a few I thought would be useful, downloaded them, and put them in my system Fonts folder so that they were accessible through the standard font dialog. Since of course I can't rely on your system having them, I just typed the phrase I wanted into the Windows Paintbrush program in order to make a graphic out of it. The only place I actually ended up doing this was the "Musical Selections" heading, which is a font called "Blood of Dracula".