| Vikki Olds September 1, 2001 | 1 | | Traditional framesets are more complicated and more involved than nested framesets. In the nested frameset tutorial I showed you how to make a 3-framed frameset all in one file with three pages that loaded into those frames for a total of four files. Traditional framesets, for the same visual design will take five files. Create the files shown below and save them with the names specified underneath them. | 
name the above page "default.htm"
Rows tells the browser how to parse the frameset into rows. In the file above I have 2 rows. One is set to 100 pixels high and the other will take the remainder of the browser window as signified by the *. You can also see that I have named each frame. This makes it possible to target links so that they will load in a frame I specify when I create the hyperlink in another file. SRC tells the browser which pages to load in each of the frames. You will see that I have a top.htm which could have navigation and a logo and a bottom1.htm that will load another frameset which in turn will load two other pages. As I'll remind you later, the noframes tag catches those browsers that do not parse frames. In that section of code you could place a link to non-framed pages and place just about any content you want. Only non frames compatible browsers will see it and it offers an alternative for those browsers instead of just not seeing your web site.
name the above page "bottom1.htm"
bottom1.htm follows the same rules and guidelines as default.htm and is loaded by default.htm.
name the above page "top.htm"
We specified no gutter space in our framesets above by using the marginheight and marginwidth attributes. I generally always add to that by setting margins on each individual page that will load in my frameset. It hinders surprises. To do that you would add the following in the body tag of your files: marginheight=0 marginwidth=0 topmargin=0 leftmargin=0 Marginheight and Marginwidth are Netscape specific tags and Topmargin and Leftmargin are IE specific tags. You need them both to get some degree of uniformity in how your pages are parsed by the different browsers.
name the above page "left.htm"
name the above page "right.htm"
| 2 | | Below you see the basic example of a traditional frameset. Looks pretty much the same as the nested frameset when all is said and done. However, traditional framesets are more versatile. If you read the nested frameset tutorial, you learned that you can't load two pages with one link. With traditional framesets you can. You can even load more than two pages. It all depends on how you set your frames up. It can get very complicated. | 
| 3 | | Below is an example of the power of traditional framesets. There are many ways you can create your navigation. For instance, in the example below, I could target the links in the top frame to load a whole new frameset for the left navigation and the right main content files. This would mean that I could use the navigation in the left frame to navigate through a particular section of files keeping things orderly. I could also target the links in the left frame to open a whole new full frameset. There are many ways to make this work. | 
| 4 | | First, let's go through an explanation of what we are doing so you have a better understanding of what is happening. The first thing we did was create two frameset pages. The first page will load the second frameset and that in turn will load the left and right frames. | 
| 5 | | When designing traditional framesets you would do well to plan them out on paper. For instance, see the file structure example below. In the navigation pages (which are loaded in the left frame), you could link to the main files would would load in the right frame. You could have main navigation in the top frame that would navigate and load the pages in different folders. The first pages these would load would be the bottom.htm files which in turn would load the appropriate pages that you had specified in your frameset. | 
| 6 | | One rule that I always follow is to always name my frames. In that way I never have to worry about rewriting my frameset files. The frames must be named in order to be targeted by a hyperlink. An example of a targeted hyperlink would be as follows: In the navigation.htm you could create a link that targets the linked file to load in the right frame. Following the naming convention we used when we created the bottom frameset, the name of the right frame is "frright". <a href="/Products/product1.htm" target="frright">Product 1</a> The above hyperlink with load product1.htm in the right frame. | | 7 | | The reason for creating a default.htm or index.html in each folder is so that when search engines spider your site or someone tries to reach your site via typing in a url without a filename (for example, http://www.yoursite.com/Products/) there will be a default frameset in place so that your single pages won't be loaded without a frameset. | | 8 | | Some Frameset Attributes: - COLS (number of columns in the frameset)
- ROWS (number of rows in the frameset)
- BORDER (size in pixels)
- FRAMEBORDER (can be Yes/No or 0/1)
- FRAMESPACING (size of space in pixels)
- BORDERCOLOR (color name or hex color)
Some Frame Attributes: - FRAMEBORDER ( can be 0 or 1 )
- MARGINHEIGTH (size in pixels)
- MARGINWIDTH (size in pixels)
- NAME (name of frame)
- NORESIZE (cannot be resized)
- SCROLLING (can be Auto/Yes/No)
- SRC (url of page to load in frame)
| | 9 | | We add the NOFRAMES tag for backward compatibility for browsers that do not support frames. You can code in a full normal html page there with links for those browsers so that they will still be able to navigate your site or you can create a no frame site with a link to it between the NOFRAMES and /NOFRAMES tags. | | 10 | | So, as you can see from the information above, traditional framesets can get confusing very fast. However, by diagramming them out you can get a good picture of how to set them up. Careful planning and practice is the best policy. | Copyright 2001, Vikki Olds, All Rights Reserved | 