FramesSome older browsers do not support Frames but must currently do support them. A Frame based website becomes increasingly more complex and allows your browsers the advantage of always having the navigational hyperlinks displayed. What happens is that your navigational menu loads pages in to a predetermined frame on your webpage. A FRAMES based site consists of a minimum of three HTML documents and the more documents the more functional it will become. We will start with a 4 page Frameset.
So lets start by creating 4 brand new documents. Document 1 we will create with the code below ..name it frameset.html... and save it into your Website Folder <HTML><HEAD> <TITLE></TITLE> </HEAD> <FRAMESET COLS="30%,*"> <FRAME SRC="Menu.html" SCROLLING="YES" NAME="Menu" > <FRAME SRC="Page1.html" SCROLLING="YES" NAME="Page"> </FRAMESET> </HTML> Notice anything unusual about the structure of HTML code in the frameset.html document ?? It does not have a body section. That is because instead of a body it is displaying other pages. If you accidentally include the BODY tags your frameset will not function. The line that says <FRAMESET COLS="30%,*"> says to the Browser we are going to display a Frameset that will be in two columns.The first column will occupy the first 30% the comma tells it a second frame will display and the * symbol says the second frame will occupy the remaining space. You can also use exact pixel increments instead of % definitions. If we said <FRAMESET COLS="144,600"> the first frame would be exactly 2 inches (144 pixels) in width the second frame would be 600 pixels in width. (If we add a third comma and another definition we could also add a third frame - but we won't for this exercise) The next line <FRAME SRC="Menu.html" SCROLLING="YES" NAME="Menu" > defines what page will load into the first Frame Column. We tell it SCROLLING=YES to enable the viewer to scroll downward should their browser window not be large enough to see everything in this Frame. You can also declare SCROLLING=NO or AUTO but I hate it when I get to a frame based site that has SCROLLING turned off and I can't get to all the Navigational Links. Cheeses me right off!! The NAME=Menu defines a name for the Frame. You can name this area anything you want. It does not have to relate to your documents names it only defines a Name for a specific area (much like your named True Anchor tag does in Lesson 3). The line <FRAME SRC="Page1.html" SCROLLING="YES" NAME="Page"> defines what page will load into the second frame and we also declare a NAME for this area once again it can be anything you want but for this exercise call it Page. The next line </FRAMESET> tells it to end the FRAMESET. There is one more segment of code that should also be added to a FRAMESET which tells Browsers that don't support frames where they should begin. The code for this segment is <NOFRAME> <BODY TEXT="#FFFFFF" BGCOLOR="#000000" LINK="#FFCC00" VLINK="#FFCC00" ALINK="#FFCC00"> Your browser does not support frames. Start at <A HREF="Page1.html">Page1.html</A> </BODY> </NOFRAME> If a browser that doesn't support frames gets to your page this will point them to any Page you define and allow them to start on your individual pages and still navigate through your website. This code should be located as follows. <HTML><HEAD> <TITLE></TITLE> </HEAD> <FRAMESET COLS="30%,*"> <FRAME SRC="Menu.html" SCROLLING="YES" NAME="Menu" > <FRAME SRC="Page1.html" SCROLLING="YES" NAME="Page"> <NOFRAME> <BODY TEXT="#FFFFFF" BGCOLOR="#000000" LINK="#FFCC00" VLINK="#FFCC00" ALINK="#FFCC00"> Your browser does not support frames. Start at <A HREF="Page1.html">Page1.html</A> </BODY> </NOFRAME> </FRAMESET> </HTML> Okay lets make our other three pages. These are made the regular way as they are true HTML documents that can also be seen individually. Make sure these documents include the BODY tags. Create, name and store in your Website folder the following three documents:
<A HREF="Page1.html">Link to Page 1 </A> <A HREF="Page2.html">Link to Page 2 </A> So the code for each page should look like <HTML> <HEAD> <TITLE></TITLE> </HEAD> <BODY> welcome to<BR> Page1<BR> <BR> <BR> <A HREF="Page1.html" >Page1</A> <BR> <A HREF="Page2.html" >Page 2</A> </BODY> </HTML> and of course where it says welcome to Page1 make it say Page 2 on Page 2 and Menu on Menu etc. Once you have all these pages created view your frameset.html document with your browser and you should have a page which looks like this - Click here You will notice though that if you click a link in the menu side on your frameset document that it loads a page into the Menu side and not the Page side.(although mine works fine) What you need to do is add a new variable - and this one will only be in the Menu.html document. So open Menu.html back up and In your A HREF Tag give it the variable TARGET="Page" like below. <HTML> <HEAD> <TITLE>Menu</TITLE> </HEAD> <BODY> Navigational Menu <BR> <BR> <BR> <A HREF="Page1.html" TARGET="Page">Page1</A> <BR> <A HREF="Page2.html" TARGET="Page">Page 2</A> </BODY> </HTML> What this does is tell whichever document you are calling to display in the area that you Named Page ( NAME="Page") in your first frameset document. It is very important that you spell this and use the same case letters that you did in the frameset.html document. "Page" is not the same as "page". You can also TARGET using an absolute path. If I defined the TARGET of the Page 2 link to be TARGET="Page2.html" it would launch Page2.html in its own browser window. I could also use this to launch another Website URL into its own window by TARGET="http://www.nameofwebsite.com" but my main goal is to keep people in MY website so I choose the TARGET="Page" and it puts their website inside my Frameset. Frames can be as complicated as you might want them to be. Click hereto see a frameset using Rows Click here to see a more complicated frameset that uses FRAMESET ROWS as well as as FRAMESET COLS to define what pages will load. Scrolling has been turned off in the Menu Section on this example. Other variables you can declare in your frame tags are
Once you get to this complex frameset in your Browser you can go to where it says View(in the top menu bar) and pull down to where it says Page Source and my code for this Frameset will appear. You can do this for almost every webpage. If you see a page layout that is kind of cool you can VIEW PAGE SOURCE and see the HTML code for that webpage. If you want to borrow the code to try and modify it for your purposes you can Copy and Paste sections of code from the Page Source into whatever HTML editor you are using. Pretty Cool. Code is out there for you to see and modify just by looking at how other people have layed out their own websites. One other VERY IMPORTANT thing to point out is that just because you have a Menu in your Frameset it doesn't mean that you don't have to provide links to all your other pages...on all your other subpages. People who's browsers don't support frames need to navigate page to page and also when people find your sites through search engines and other linked pages they might not necessarily land on your Frameset. They could land on your Page1.html document or any other document in your website that has been linked to from a search engine or otherwise. So make sure you link all of your pages together using hyperlinks the traditional way so people can find the true beginning to your website. Whew ... Head spinning yet ??? |