This type of coding is for a small site (like Cosmic Passion for example). The main area doesn’t scroll but the little areas do. That makes little sense I know, but hopefully this tutorial will explain. I used to make designs like this all the time and I sometimes still do. I often get asked how to code these, so I will attempt to explain to you how to make one as simply as I can. So here we go!
The Graphics
The first thing you need to do is go into your graphics program and create the layout for your site. You can use any software you want; it can be paint or even PSP. I use Photo studio 5.5 and Photo Filtre. This is when you can get really creative with colour schemes and text. For my example, I'll begin with this image. You can follow along with the tutorial by creating a layout similar to it, or copying and pasting the image into your graphic editing program.
If you create your own, it doesn't have to be the exact same size. I think 800 pixels wide to 400 pixels tall is a good size. My example is round about that size. Once you have finished it save it under any name you want (not too complicated though!).
The Coding
Now that we’ve got our main image we need to start fitting the layout together! We need to make an index page. This page will always be your homepage. Open Notepad and paste this code into it:
Save this page in the same area as your layout image. Save it as index.html
Now you need to start editing this code. Where it says your page title here you need to write your website's name. In this case I will write, Punk Rock.
Now you need to make a background image. This can be any pattern or colour you like. I will be using this Image. Where it says your background image goes here you need to type in the name of your image. Remember, your background must be saved in the same area as you layout and code otherwise it won't display. In my example I will type in the name, background.gif because that's the name of mine.
The last thing we need to do on this section is set the height and width of our layout image.
The height and width are easy to find out in a graphics programme. If you haven't got one, you can find them when you click on any image's icon in your folder. Like this.
Where it says, WIDTH OF MAIN IMAGE GOES HERE you need to type the width, in my case this will be 720.Where it says, HEIGHT OF MAIN IMAGE GOES HERE you need to type the height, in my case this will be 595.
This is the end of the coding for this section, but we still have quite abit to do. Don't forget to save what you've done so far. ;)
We have our main page set up with a background, now we need to actually get the frames to fit together and to make it suitable for content.
We need to make an Iframes page. This page will help fit the whole thing together. Open Notepad and paste this code into it:
Save this page in the same area as everthing else. Save it as iframes.html This is a very important page, so you need to follow my instructions carefully.
Where it says LAYOUT IMAGE GOES HERE you need to write your layout image's name. In this case I will write, punk.gif because that is what I saved mine as.
We now need to do the width and heights of the layout image again. Where it says, WIDTH OF MAIN IMAGE GOES HERE you need to type the width, in my case this will be 720.Where it says, HEIGHT OF MAIN IMAGE GOES HERE you need to type the height, in my case this will be 595.
Now we need to set up a homepage link to edit later. Where it says, YOUR HOMEPAGE LINK GOES HERE write main.html
All your links would link to this page but I will explain how to make them later.
Now we need to set the size of the main content area. You need to see how big you main box is. Most graphics editng programs can help you do that. If not then you can always make a cut out of it in paint, LIKE THIS. Then you can check the size of that, in the same way how you checked your layout's size. :)
Once you have found out, where it says, WIDTH OF AREA GOES HERE you need to type the width, in my case this will be 371.Where it says, HEIGHT OF AREA GOES HERE you need to type the height, in my case this will be 342.
You're doing so well so far. :) Keep up the good work as we're nearly finished on this section!
Now we need to position the homepage area. We need to set the left and top positions. Most graphics programmes have a pre built in feature which allows you to do this. Some people just use trial and error which can take a couple of minutes. In this tutorial we will be using our best friend Paint.
Open your layout image in paint and draw a box in the area you have been measuring for your main content. Record down these numbers here. Your screen should look something like THIS.
We need to write these numbers in now. Where it says, LEFT POSITON OF AREA GOES HERE you need to type the first number, in my case this will be 269.Where it says, TOP POSITION OF AREA GOES HERE you need to type the second number, in my case this will be 185.
Phew! You have now finished the iframes section, don't forget to save your work!
You should have these pages and images:
index.html, iframes.html, the layout image and your background.
If you are missing any of these then you need to go back and re-read the tutorial!
Finally you can create your homepage (the one a mentioned earlier!). Theres hardly any coding in this section. Its quite easy! Open up Notepad and copy and paste this code into it:
Where it says, YOUR WRITNG GOES HERE!!!! you can write the main content of you homepage! :) You can write as much as you want as the area will scroll when it gets full up, so no worries. For this example I will write a short piece. You may copy it if you like.
Welcome to my little internet home. Here you will find lots of exciting content. Thanks for visiting!
Once you have finished, save this page as main.html (remember it now?).
Thats it! Your done, give yourself a pat on the back.
To preview your layout, double click on the index page icon. This is what I ended up with.
I know there is only one area but its pretty much the same method to create another one. Just create a page in (call it aboutme.html or something like that) and add another set of iframes coding on your iframes.html page. Make sure you link things together and measure areas correctly. :)
Once you get used to coding layouts like this, your posibilities are endless. You can even use the free iframe layouts I've put up. ;)
I hope this tutorial has helped you out, if it has I would appreciate it if you linked me on your website and I will return the favour. :)
Don't copy this and claim that its your own as I worked very hard on it.
Basic codes for your new web page
To add a link to this type of website, copy this code:
Simply put the page or full URL you want to link to within these quotations. You can replace Click here! with text of your choice.
Adding a image to your website is very simple. Copy this code:
Replace the imagename.gif, to whatever your image is called/its URL.
If you would like to know about different text effects, Click here.
