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:

Frame Source Code

Open your text editor (notepad) and enter the above HTML code into your document, giving it the title of your travel agency. Save your file nameofyourbusiness.html.

All Files

Give it a name followed by the file extension .html. Go to your student folder and double click on the file to view it in your browser. It should look like the file outlined below. Remember, this entire page will not be seen, only the top part of the page.

html files

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,...">

or

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

Row and column sizes are specified in three ways:

For example, the tag <FRAMESET ROWS="160,*"> creates two rows of frames. The first row has a height of 160 pixels, and the height of the second is equal to whatever space remains in the display area.

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:

<FRAMESET ROWS="60,*">

Press the Enter key and enter the following code:

//---Company Logo--->

Here is what you should have so far:

Frames

Now you must create a Web page that will display your company logo/title. First, create the text that will be displayed on this Web page in Flash or Fireworks. Iinclude clipart of some other graphic with it to make it appear as if it were a logo created for your travel comapany. Here is an example of a logo made in Flash:

Olives

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 can add a colored background to your page that will match your title created. Later you will create a background in fireworks that will replace the colored background. Open your title in Fireworks and click on the arrow at the color fill selection box.

Color Fill

Then move your cursor over the title to select a color. The circle below is where my mouse is and the color code appears in the red rectangle below. This is the code your will type in for your bgcolor tag.

Fill Color

Here is what your head notepad file should look like:

Head

Now return to your frames Web page (nameofyourbusiness.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">

Head Frame