Requirements: Adobe Photoshop, Notepad, Basic HTML
Alright everyone, this will be the biggest tutorial I have ever done. Ever. And probably will ever do ^^. Ever wonder how this site is made? By slicing. Any idea what that is? Slicing is basically where you take a picture editing program and build a layout, basically a big picture, which involves buttons such as Home, About Me, Journal, things like that. You define an iframe which makes an inline frame where everything else is targeted. Yeah, I can't define stuff ^_^;
Alrighty, first off, make a new folder somewhere. I generally keep mine on my desktop, names "Site", "My Journal", whatever ya want.
Next, open your photo editor. I use Adobe Photoshop because I'm most familiar with it..it can be done in Paint Shop Pro as well, but I'm doing this based on Photoshop. Before I get too far into this, remember one thing: Save frequently! I don't know about your computer, but mine just loooves to piss me off. It'll either restart itself or shut Photoshop off for no reason whatsoever.
Now I'm not going to walk ya through making a layout, that's between you and your computer. For this, I'm going to use the "Movie" layout which can be found under free layouts, in the random section. Once you've made the layout of your choice, you have to check, double check, and even triple check to make sure you have everything your going to want on your site on the picture like buttons. It's a pain to finish and realize 'Hey, I forgot my home button' or 'Oops, I spelled that wrong' because then guess what, you either have to live without it or do it all over again. I personally can't stand even the slightest mistakes on my layouts. Also, try to save it as a .PSD, then you can go back and edit stuff as long as you don't merge layers.
Alrighty, once you have your layout built, we can start. Again, using the "Movie" layout:

Note how I have an area set aside for everything to go into [the big red rectangle]. You don't have to have it outlined..I just like it. It makes it look more organized. Along with that, see how I have all the buttons I find necessary for a journal site. Home, about me, journal, random, and past [for past layouts]. Now to get down to the more difficult parts. Open your photo program if it's not already open and open your layout.
Next, click on the slice tool

and click in the top left hand corner of what will be your inline frame and drag it down to the bottom right hand frame so it looks like this:

Then, right click and choose 'Edit Slice Options'. A box will pop up with fields you can fill in that looks like this:

On this particular one, the only field you fill in is the first one, Name, and all you type in is the word "inline" [no quotes..]. Now move onto your buttons.
Click around the top left of your first button, mine being 'Home' and drag down to the bottom right. You can either go ahead now and trace around all the buttons or do them one at a time, it's up to you. I like to do all mine at once, then go back and edit my options.

Once you've outlined your buttons, right click and select 'Edit Slice Options' as you did with the last one. On my layout I'll start with the Home button, but on yours you can do whichever you please. This time, fill in the edit options as follows

1 - Name: I usually just name them after whatever button they are, that way it's easier when your looking through your index.html file to find it.
2 - URL: This is where you put the name of your .htm/.html file. If your applying the URL to your home button and your .html file name is home, all you do is put in home.html it's as simple as that.
3 - Target: This is where you want everything to open. Unless you want something to open into a new window (Refer to HTML Codes), then everything you do in your site is set to open in the inline frame.
Under name, since my button says home, I keep it simple and write home. Then, under URL I typed 'home.html'. By URL it means what is the name of the file that will be opened when I click this button, in this case it's 'home.html' Lastly, remember that everything needs to either open in your inline frame or a new window, you have to target it. Simply typing "inline" into the Target field will send that file into your inline frame once you have created it. Now repeat these steps all the way down through your last button, tracing the button, editing the slice properties, all that. Once your done [Remember, SAVE FREQUENTLY!!], save it and try to save it as a .PSD. This allows you to go back later and mess with it if need be.
Once you've finished with the slicing and you feel safe saying your done setting up your layout, go to File and 'Save for Web..' This is where your new folder comes into play. Once the pop up window for the Save for Web feature pops up, hit save and when it asks you where and what, go to the new folder you created, mine being "Movie Site". Then, save it as index.html and make sure where it says Save as type: That it says HTML and Images (*.html). I don't think you have to type in .html, but I like to. Just to be safe. Once this is saved, you can close out of Photoshop, you won't really need it anymore. Alot of people use Dreamweaver to create their .html files, so if you want to do that, knock yourself out. You can get a basic, blank page here. When the window pops up, right click anywhere and go to "View Source," then save it wherever you want on your computer. I would put it up for download, but you know bandwith on Geocities isn't exactly spectacular for free accounts. I created this page blank in Macromedia and added some coding such as colors for your scrollbar [You need the websafe hexcode..things. You can find a chart of them on "Lissa Explains It All" or go into Photoshop, click that little box where you select your paint color and get the color you want. It's a six digit number following a # sign. So it'll be something like "#808080"]
Okay, now to define your Iframe. Open notepad and open your index.html file. Almost looks like a bunch of gibberish, huh? Okay, anyways..If you scroll down, [Mine is under TD Rowspan 9, but there's no guarentee yours will be there] you need to find the code that looks something like this:

Now, to make your inline frame work, this is what you have to do. On the line, click before the

and paste in this code:

Now, your iframe source will be home.html so where it says (1), insert home.html. Make sure to keep the quotes around the .html file or it won't work.

Next, under name, that's basically the target. type inline where it says (2).

Now, this differs with everyone. Open your site folder and in it should be another folder labeled "images". Find "inline.gif". If you have XP, you have a frame on the left of the window that, if you scroll down, it gives you details such as file type, dimensions, size..all that good stuff. If you don't, right click on the image and select properties, then select the summary tab. Now, insert the Width and Height into spots (3) and (4) to complete the code (My sizes are 556x388).

Now, go to the end of the code where it says

and you'll see the old line of code where it just says

. From the carrot that's pointing to the left all the way to the end of that line where it says

Delete it. Otherwise there's gonna be a HUGE mess.
Look at that. Your done. Good job ;)