Nesting <FRAMESET> Tags

Because a <FRAMESET> tag can include either a ROWS property or a COLS property, but not both, you have to nest <FRAMESET> tags if you want to create a grid of frames on your Web page. The second row of your current frame layout consists of two columns. The first column will display the links to the sections of the United States (Northeast, Southeast, Southcentral, Southwest, Midwest, West), and the second column will display the the section chosen from the first column with a list of states that contain information of Bed and Breakfast, as well as attractions in that area.

Go to the end of the <FRAME> tag that contains the logo you created earlier (<FRAME SRC="head.html"), and then press the enter key to create a blank line below it. Type the following code (indent the text three spaces to make the code easier to follow):

<!--- Nest frames --->

<FRAMESET COLS="200,*">

</FRAMESET>

Notice that you have entered another end frameset tag. This is because you must let the browser know that this is where the nested frames end.

Next you'll specify the sources for the two frames in this row. The left frame will contain the sections or regions of the United States, which we will name "sections," and the right frame will contain the home page, which we will name "home.html," which is the visible default page that will be seen when you open your frames Web page. Six other pages will be created that will represent each section. The left frame will be static (will not change) and the right frame will change according to the section you choose in the static frame. Return to your text editor that contains hauntedhideaways.html and enter the following code after the <FRAMESET COLS="200,*"> by pressing the enter key to insert a blank line. On the blank line, insert the following code, indented six spaces:

<!--- Sections of the United States --->

<FRAME SRC="sections.html">

<!--- Links to pages which contain information on Inns and Activities --->

<FRAME SRC="home.html">

You have created the layout of the two additional Web pages needed to complete the frames page, but you have not actually created these two pages. Create a new file in Notepad (be sure to enter the basic HTML codes), and enter the following sections into your document, making sure you enter page breaks where applicable. Choose a background that will enhance your page and be sure to name this file sections. Click here to see how my left frame turned out.

Haunted Bed and

Breakfast Inns:

Home

Northeast

Southeast

Southcentral

Southwest

Midwest

West

Save your file then load it in your browser. Its beginning to look more like a Web page, however, notice that your logo frames needs to be fixed in order to display the text. At the present time, the text extends beyond the frame border. If all your text is display correctly, then you will not need to extend the top frame down. Continue to follow the directions below if you need to fix your heading.

Don't worry about the look of your home page at this time because you will be creating a movie that will replace your image map and images on your home page. You will now create links for the pages that will load the page in the home frame when selected. This will take the place of the image map. We will not worry about the image map at this point.

Before we begin editing the frames properties, return to hauntedhideaways in Notepad and change the <FRAMESET ROWS> tag to reflect 120 pixels instead of 60. This still does not fix the scroll bar problem, so you will have to fix it by controlling the frame's appearance.

Haunted Hideaways