Chapter Three - Lesson Two - Frames - Creating the frame structure HTML file

Creating the frame structure HTML file

With the alterations to your page files finished and your new navigation file created, you are now ready to create your new index page which will contain your frame setup information.

Create a new index.html file with the regular heading information at the top, but do not add the <BODY> tag. Since this file is only going to be used to set up your frame structure and will not contain any actual page content, you do not need to have the body code tag.

<HTML>
<HEAD>
<TITLE>Adventure Travel Service</TITLE>
</HEAD>

Next, set the parameter that designates that you want two vertical frames without borders separating them. This is also where you will tell the browser how wide you want the frames to be. For this exercise, you want to set the width of the left frame to be 118 columns wide. One column equals one pixel in width, so whenever you are setting the width of a frame, you need to make sure it is wide enough to accommodate the pixel width of the largest graphic element you will have in that frame. Because the left frame will contain the background with the color bar, the frame needs to be set wide enough for it to be viewed and not cut off. Since you do not know what monitor setting your viewer is going to be using, you will use a wildcard setting for the width of the second frame, which will allow their browser to adjust it to be whatever size width it needs to be to fill the screen, while at the same time leaving the left hand frame at its designated column width.

Now you will set the code for the left frame that tells the browser what you want to do with it. You need to tell it how tall it will be (which in this case will be the full height of the browser window), the name of the frame, whether or not you want it to be able to scroll, and any margin information. The reason you need to give your frame a name is so that any hyperlinks you have on your website will load the new pages into the correct frame. If you do not designate which frame to load the new page into when you write your hyperlinks, it will automatically load in the same frame that the page with the hyper link is contained in, which may not necessarily be what you want to do. Unlike setting a page up in a table, using frames will place your first element in your left frame very close to the edge of the window. Therefore you need to designate a margin width to bring it in a little.

Set the code for the left hand frame and name it "buttons" with it linked to the button.html file.

Set the code for the right hand frame just as you did for the left hand frame and change the name of the frame to "main", with it linked to the home.html file. After that, you will set the base target alignment and end the HTML file.

&nbs;  <FRAMESET ROWS="100%">
&nbs;  &nbs;  <FRAME NAME="main" SRC="home.html" MARGINWIDTH="5"
MARGINHEIGHT="10">
&nbs;  </FRAMESET>
</FRAMESET>
<BASE TARGET="_top">
</HTML>

Now that all of this is probably as clear as mud to you, below is how the whole file should read. Don't bother to try to really understand it, just save this file and go back to it when you do other websites and make the appropriate frame's width and name adjustments and reuse it.

<HTML>
<HEAD>
<TITLE>Adventure Travel Service</TITLE>
</HEAD>

<FRAMESET COLS="118,*" FRAMEBORDER=0 BORDER=0 NORESIZE FRAMESPACING="0">
   <FRAMESET ROWS="100%,*">
     <FRAME NAME="buttons" SRC="buttons.html"
SCROLLING="no" MARGINWIDTH="7"
     MARGINHEIGHT="10">
   </FRAMESET>
   <FRAMESET ROWS="100%">
     <FRAME NAME="main" SRC="home.html" MARGINWIDTH="5"
MARGINHEIGHT="10">
   </FRAMESET>
</FRAMESET>
<BASE TARGET="_top">
</HTML>

If you want to use a different frame setup for a future website, all you need to do is to go surfing on the internet until you find a site that has the same setup that you want, and copy the source code for it. To copy the source code, go up the the browser's main menu bar and click on VIEW, then click on Document Source. Another window will pop up that will show you the source code for the frames. From this new window, just click inside the type, select all of the type, copy it, and then open up your Simpletext or Notepad program and paste the type inside a new file. On Mac's, you need to make sure that you have not clicked on an individual frame before you try to do this procedure, otherwise you will only be shown that individual frame's source code and not the parent index.html file's source code.

Hosted by www.Geocities.ws