Frames Tutorial

Here I will share the steps to making a simple 3 frame layout like below.



Step: 1



Open notepad: Start>Programs>Accessories>Notepad

Once you have opened it write menu in it. After you have done that go to File>save. Save it as menu.html.

Do the above for all pages so once you have finished you should have: menu.html main.html right.html. Note: make sure all 3 pages are saved under the one file such as mylayout.

Step: 2

Now we need to make a page so that all 3 frames come together like the frame above.
Open Notepad: Start>Programs>Accessories>Notepad

Copy and paste the following code into it:



Save this as index.html

Where it says "YOUR SITE NAME HERE" put the name of your website there.
Where it says "KEYWORDS OF WEBSITE GO HERE" put a few keywords there. Make sure you place keywords similar to the contents of your website.
Where it says "DESCRIPTION OF WEBSITE GOES HERE" Write a description of your website.

Frameset means: The number of rows your website has. This layout has 1 [the whole site put into one square]. so we would put 100%, this indicates the size of the Row.

Frameset cols means: The number of columns your website has. This layout has 3 [menu.html, main.html & right.html]. So we would put 40%,100%, 40%, this indicates the size of the columns.

These 2 are very important, they are the ones which make the pages come together.

Frame src: Is the location to where the frame will open as written above we would need to put menu.html, main.html, right.html

Name: This is what we will call the page so if you would like to target a link to a specific frame all you would need to put is: <a href="http://yoursite.com" target="menu,main,right,or new">Link here</a> New means that it will open in a new window.

Scrolling: This indicates if you would like the frames to be scrollable, we have put "yes".

Finished!

Now open the file to which you saved all 4 pages open and double click on your index.html page, you should see a layout similar to the image above.

The next step is creating a website, please look at my other tutorials to get an idea of how to place links, backgrounds, marquees, textareas etc.

Part 2 of this tutorial will be coming soon.