Creating a Frame Layout

Frame layout is defined using the <FRAMESET> tag. The <FRAMESET> tag in this design replaces the <BODY> tag in a simple page design. The general syntax for this tag in you HTML file is:



<TITLE>Page title</TITLE>





Open your text editor and enter the above HTML code into your document, giving it the title of Haunted Hideaways and Happenings. Save your file as hauntedhideaways.html.

The <FRAMESET> tag has two properties: ROWS and COLS. You choose only one layout for a single <FRAMESET> tag, either rows or columns. You cannot use both properties at once. The syntax for specifying the row or column layout for the <FRAMESET> tag is:

<FRAMESET ROWS="row height, row height, row height,...">


<FRAMESET COLS="column width, column width, column width,...">

Row and column sizes are specified in three ways:

You can use all three ways of specifying row or column size in a single <FRAMESET> tag. The tag <FRAMESET COLS="160,25%,*"> creates the series of columns, the first column is 160 pixels wide, the second column is 25% of the display area, and the third column covers whatever space is left.

For practical purposes, at least one of the rows or columns of your <FRAMESET> tag should be specified with an asterisk to guarantee that the frames fill up the screen regardless of the user's monitor resolution. You can also include multiple asterisks to specify the display area. For example, the tag <FRAMESET ROWS="*,*,*"> creates three rows of frames with equal heights.

Return to your text editor and go to the <FRAMESET> tag line and edit it to read:


Press the Enter key and enter the following code (indent the code three additional spaces):

<!---Company Logo--->

Now you must create a Web page that will display the company logo. First, create the text that will be displayed on this Web page in Flash or Fireworks and export it as a gif file. Create a new file in Notepad and insert this text at the top of your page, making sure to center it. Name your new file head.html. Next, you will create or find a background you will use for the background. Place this background in the body tag, save it, and view it in a browser to see how it looks. If you wish to find a background to use, like the one I used here, go to and in the search box type the descriptive name "free backgrounds" or "free haunted backgrounds."

Now return to your frames Web page (hauntedhideaways.html) and under the comment line <!---Company Logo---> enter the following HTML code. This is letting the browser know that you want the head.html file to appear in the top frame of the Web page.

<FRAME SRC="head.html">

Save your file then view it in your browser. Remember, this entire page will not be seen, only the top part of the page.

Haunted Hideaways