Behind the Scenes at the Protoman Homepage

Since I started the page, a whopping number of people have been asking me exactly how I do things around here. In this document, I'll show you Behind the Scenes in my computer (a Macintosh running MacOS 8), and how I publish HTML with graphics and other stuff. Well, here we go!

HTML

The first thing I do is open the Protoman Homepage folder. The folder is organized by Page and Directory. Then I open whatever file I want to work on in Alpha and type away. Plain text is better than anything...even Netscape and Claris! Ever wonder why everything looks so constant around here, but still gets done in record time? Protoman's Revenge was no easy task...and it can't be done in any graphic HTML editer that exists today.

When I'm done and ready to upload the file, I start up Fetch, a program developed at Dartmouth College. I use the Protoman Page bookmark, which takes me to ftp.dragonfire.net and the /home/p/protoman/ directory, with the Password, Username, etc. already filled out. Macintosh Drag and Drop enables me to just grab a file out of the Protoman Page folder and drop it into the Fetch window...and it's there.

Images

Here, I use a program called GraphicConverter. Yes, it converts, but it also quick and easily edits images. This is where I cut out things for Gif89a images, like the Protoman heads at the top of your window. I'm famous for my Transparenting abilities--drop me a line if you need any done. I guarantee you will like the result. And the best part, the very best part is: it's completely free.

For animated gif images (like "Protoman Rules!!!" in About Protoman), I use a neat program called GifBuilder. It makes it easy to set stuff about the image like transparent backgrounds, disposal methods, palettes, and so forth. But to make the individual pictures, I use ClarisDraw. It does Gradients real well, and I can custom-make any type!

Sounds

Sounds, for me, require a complicated procedure. First, I record the sound at 22.254 or 11.025 rate in SoundEffects out of the game system. I save the file as a System 7 sound (.sfil), since SoundEffects's only other format is AIFF. It needs to be the universal WAV, so I convert it using clumsy but useful SoundApp. And there's the finished product.

If it's a Song of the Week, I need to Zip it, so I use ZipIt. ZipIt uses drag and drop, so all I have to do is drag the file into the Zip window, and it's zipped and saved for me.

To convert it to MP3, I start up SoftWindows and use the infamous L3ENC to encode the file. My CPU while running SoftWindows is rated at 33 mhz, and so it takes a while for the file to encode, sometimes all night. SoftWindows is the only commerical application mentioned on this page.

Frames

Here's how to make a frames page. Think of how many frames you are going to have. Make that many other documents with what you want in them. For instance, my page has, normally, 4 frames, so I have 4 documents waiting to start.

To tell the browser you have a frames document, insert the <frameset> tag into your new file, inside the <head>, before the <body>. There is no body in a frameset document; the body tags come from the individual files you made before to fill the frames.

Here's a sample frames page that has a small Index frame at the right, and a large Viewing area at the left.

<frameset cols="*,100">
<frame src="main.html" scrolling=auto name="MAIN">
<frame src="contents.html" scrolling=auto name="SIDE">
</frameset>

Looks kinda complicated, doesn't it? I'll explain it to you step-by-step.

First, I told the FRAMESET to have columns, not rows, or COLS. The COLS are whatever room the browser's window has left, or "*," and 100 pixels for the other frame.

Second, I set the two frames I had talked about in the line above. The first one's SRC, or location, is "main.html." This is one of the files you made at the beginning. The other one's SRC is "contents.html," the other file. This is how the FRAMESET knows where the files that go into the frames are.

I set SCROLLING to AUTO here. This means a scrollbar will pop up in the frame only if it needs one. If I had set SCROLLING to YES, there would always be a scrollbar, whether it needed one or not. If I had set SCROLLING to NO, there would never be a scrollbar, whether it needed one or not. That's very dangerous, as some of your information could go right off the page and there wouldn't be a scrollbar to see it! Remember, not all browsers have as much space to see your page as yours.

I NAMEd the frames next. This is how you get links (a href's) to go to the frame you want. If you have a link in contents.html, and you want it to display when clicked in the main window, you would add a TARGET to the link. It may look like this:

<a href="information.html" target="MAIN">

I set the TARGET to MAIN, so the link would display in the main frame.

There are also other things you can add to make your frames look spiffo. Here is some more sample code:

<frameset cols="*,100" border=1 bordercolor="Red">
<frame src="main.html" scrolling=auto name="MAIN">

<frameset rows="100,*,50" border=1 bordercolor="Red">
<frame src="picture.html" scrolling=auto name="PICTURE">
<frame src="contents.html" scrolling=auto name="SIDE">
<frame src="jukebox.html" scrolling=auto name="JUKEBOX">
</frameset>

</frameset>

Quite a lot of code, eh? Like before, I'll break it down into little pieces.

I added two attributes, sometimes known as arguments, to the original FRAMESET tag. (No, I'm not kidding! They're really called "arguments!" God knows why, probably some hacker in the 70s that was having trouble with code!)

One of them is BORDER=1. The little line the goes inbetween frames is now 1 pixel. You can it to any size you want!

The other one was BORDERCOLOR="Red." I set the frame border's color to "Red." You can set it to any color you want. This is how I made my frames spiffy.

Did you see the other FRAMESET tag? Doesn't look like it's supposed to be there, huh? Let's go over what I did step-by-step, once again:

First, I told the browser there was going to be two frame columns: one and another one with a size of 100. I told the browser where the left frame was and all about it, but where I was supposed to tell about the CONTENTS frame, I did another FRAMESET!! Stupid me!!

Actually, it's not so stupid. You see, those three more frames are inside the right CONTENTS frame. This is how I did the FRAMESET for my page. The PICTURE is the top one at the right side of the screen, the CONTENTS are in the middle, with as much room as they can take up while still leaving the other two their specified amount of room, and the JUKEBOX is at the bottom.

Then I go on to tell the browser about those three frames. If I wanted to, I could have devided the JUKEBOX frame into a couple pieces by adding another FRAMESET tag where the JUKEBOX information was supposed to be! They'd be awful small frames, though, considering they have to be within 100 width and 100 height! Remember, when you're telling about frames, they always are identified from left to right, top to bottom.

After I tell about those three frames, I have to close off my new FRAMESET tag. Then, I'm done with all the frames, so I close off the original FRAMESET tag. And there it is, you've created frames! Hey, you wanna know the FRAMESET code for my page??? ...

<frameset cols="*,144" border=1 bordercolor=#00FFFF>

<frame src="main.html" name="MAIN" scrolling=auto noresize>

<frameset rows="145,*,56">
<frame src="ProtoFace.html" name="PROTOFACE" scrolling="NO" marginwidth="0" marginheight="0" noresize>
<frame src="side.html" name="INDEX" scrolling=auto noresize marginheight=0 marginwidth=0>
<frame src="play/Files/play0.html" name="PLAY" scrolling=no noresize marginheight=0 marginwidth=0>
</frameset>

</frameset>

I use a few new arguments, like MARGINWIDTH and MARGINHEIGHT, but they're real easy to use. They're just how much margin you want around the info in your frame! I set it real low in the Jukebox frame, because I wanted to squish in the Jukebox image. NORESIZE tells the browser not to let people resize your frames themselves by dragging the frame's border. I couldn't have people stretching the Jukebox out of proportion!

Anyways, hope you understand better now!

Feedback

Got a question for the all-powerful Protoman? Just ask me and I'll respond as soon as I can. If it's a good enough question, it'll appear here for all to see!

Utilities: