Independent Articles and Advice
Login | Register
Finance | Life | Recreation | Technology | Travel | Shopping | Odds & Ends
Top Writers | Write For Us


PRINT |  FULL TEXT PAGES:  1 2 3 4 5 6
Framing Your Web Pages 
 
by Scott Nesbitt August 08, 2005

Putting Together A Simple Framed Page

Regardless of how you build your Web pages, sooner or later you’ll need to edit the pages at the HTML code level. Knowing how to build frames from scratch, and knowing what the frame tags do, will come in handy.

While adding frames to your Web page is simple, building a framed page takes a bit more work than creating a conventional page. First, you need multiple files: one to define the frameset, and one each for the individual pages that make up the individual frames in the frameset.

This example is a page divided into two vertical columns. The left column contains a menu, and the right column displays the content. The left column is smaller than the right one.

The skeleton of the page looks like this:

<html>

<head>

  <title>My first framed page</title>

</head>

</html>

Notice there is no <body></body> tag pair. It's not necessary. Most frames-capable browsers won't display frames that are contained within <body> tags. You add the markup for the frames before the </html> tag.

Using <frameset>

Start off with the <frameset> tag. Alone it doesn't do much you have to add either the rows or colsattribute to tell a browser how to present the frames that make up the frameset. The rows attribute, obviously, defines the number of rows on the page. The cols attribute determines the number of columns.

To create two columns, use the cols attribute like this:

<frameset cols="30%, 70%">

The left column will take up 30% of the screen, and the right 70% of the screen. You can also specify the size of rows and columns using pixels, like this: <frameset cols="150, 200">. To automatically size one row or column, use thiscode: <frameset cols="30%, *">. By using the asterisk (*), the right column will automatically take up 70% of the screen.

PREV PAGE 1 2 3 4 5 6 NEXT PAGE

 




Home  |  Write For Us  |  FAQ  |  Copyright Policy  |  Disclaimer  |  Link to Us  |  About  |  Contact

© 2005 GoogoBits.com. All Rights Reserved.