How to make layout?

How to make simple I-frame layout?

I'd recomend you not to code your Layout just in Notepad,
but if you have no choice this tutorial could be suitable for Notepad too, yet there is too much of other better HTML Editors (PSPad, NWU, or FrontPage etc.)
You should know at least a bit of HTML coding.

1. At the begininng you should have at least two HTML/HTM files - one is called index.html and it is the most important one for you and it will be the first one your visitor would see. And the second one has absolutely optional name - this would be the one appearing in the i-frame, lets call it news.html . I would also recomend you to have them saved in one folder.

2. Then you should have images you want to use in your layout - a banner, size should be quite wide -around 600px width and your desired height, now I'm using 150px height. Your banner should probably include your doll and name of your site, it should be in a gif or png format (bmp or jpg aren't very good because of their size), and the next image should be your background - if you want patterned background or with more colours, if you want to have there just one colour just code it.

This is the banner I will use... of course you can do much better one.

bag

And here comes the background image.

3. Now I'd like you to put your images into your index.html. It is quite important to know, where your images would be saved - in which folder, or whether they will be in the same folder as your HTML files. I have got them in the same folder, so I do not need to bother about the paths to my images. My images are called tut_banner.gif and tut_bg.gif .
Here is the code you should use:

Click here for the way how it should look(in a browser)

The things you will edit in this code : in the first line in body - url(Your_folder(you do not have to, if they are in the same with index)/_your_background_image_name.gif)

and in the div (you can use tag p instead of div, if you like) - <img style="width: your_width_in_pixels; height: you_height;" alt="alternative name - if your image isn't showing" src="Your_folder/your_banner_name.gif">

4. Adding an I-frame! Now you should add to your index.html code a very simple tag: <iframe> </iframe> Ha, that was pretty easy - you can look at your index.html inthe browser you use and check if it all works. There should be a small rectangle, which looks lower positioned than the rest. I have centered it with simple tag p (but if you wish to have it on the right or left...). My code now looks like :

See it here, in my browser

5. But as you may notice, your I-frame has absolutely no content and I guess you want the I-frame to be bigger. So again - more and more coding. Why? Your I-framie should have some properties.

src - your I-frame source, the file you want to appear in the I-frame, for us it should be our news.html

width - the width, how wide the frame will appear in browsers, our width will be the same as the banner- 600px

height - you can set the height in pixels or in percentiles, which is better, we could use maybe 55% or 50%

frameborder - your frame's border, if you want no bordering, just use 0

scrolling - yes/no, simply scrolling in your I-frame

name - name of the I-frame, it is quite important, because you can target links in or out of your I-frame

I think you need set all colours etc. in the news.html, I've used the same colours I have on my banner and background.

Look here, this should be your result too

6. The last touches:
Where should I add my links? The answer is simple - where you want - under the banner - but if are the links to your dolling files, contests there should be a property target, leading the links to your I-frame. If you look up, you may see, I've used the name menu for my frame.

links in the I-frame file - I'd recomend you to use the same code, but most of the browsers open links linked in I-frame also in the I-frame (<try say it three times faster)

or you can use image map instead of a banner - but the result in coding is the same (but you know image maps better than me).

If you want to link external link, eg. your sister site, you should use target="blank" property.

Where should I put my copyright? I'd recomend you to put it under the I-frame.

I hope this tutorial helped you... at least a bit. And if you find here something wrong and not working, please let me know. And if you made a fabulous site using my tutorial, send me your url adress - I'm a curious cat.

Visit these Sites:
Tio