|
||
|
Vol. 2, No. 10 Hey, during your weekly pilgrimage to the hallowed Handcrafted Newsletter Archive, did you notice just how much ground we've covered over the past 2+ years? Amazing, isn't it, the depth? The breadth? It's like the Grand Canyon in there! What's that? You ... haven't been? This is a little embarrassing. Well go ahead, we'll wait. Handcrafted Newsletter Archive After witnessing such an awesome site, you may be surprised to discover that there's plenty more to learn -- nooks and crannies in the library that still need some Handcrafted attention. Why, we haven't even covered frames yet! But dson't worry, they're a cinch. >>> Get the Picture <<< Frames are kind of hard to describe, but I'm sure you're familiar with them. Ever visited a site that's been split with navigation links on one side, and content on the other? And if you click on a link, the content side changes but the navigation side remains the same? Well, in divided sites such as these, each side is really its own HTML page, and they're both under the umbrella of a framing page that describes which page goes on what side, how they're going to look, and so on. Every frames page begins with a <frameset>tag, which replaces the <body>tag you find in garden variety HTML pages. The frameset can be defined in terms of either rows (horizontal units) or columns (vertical units). These columns or rows can then be further divided by nesting additional framesets within them. If you're still a little confused, Webmonkey Jillo offers a detailed, picnic-plate analogy that will clear everything up for you: >>> Get Framed <<< Let's start by building a frame with a left side and a right side, where the right side is divided into a top half and a bottom half, but we could just as easily build a frame with a top half and a bottom half, where the bottom half is divided into a left half and a right half (when we're done here, earn yourself an extra-credit gold star by trying that on your own). First, create a frameset page called (surprise!) "frameset.html." This is where we'll block out the two columns, and the left-hand column will hold a page called "left.html" while the right-hand column will hold both "north.html" and "south.html." Now, how big a part do we want each of these pages to play? We can size them either by percentage of the screen width or height, or by absolute value (in pixels). In this case, let's give the left side a quarter of the screen, leaving three-quarters for the right side (which, again, will be divided into north and south). This is how it's done:
<frameset cols="25%,75%"> So the first (or left-hand) column takes up 25 percent of the screen width, and the second (or right-hand) column takes up 75 percent of the screen width. (Note the very important comma that separates the two -- forget it, and the entire frame's up in smoke!) Next we'll tackle the frames within the frameset. Each frame in a document is described by a single tag in which you describe the source and the name of the frame. The source is where you tell the browser which HTML document to pull into the frame, and the name will be important later, when we learn the art of linking between frames. Frames are always described from left to right, and top to bottom. So the first frame we list in frameset.html should be left.html:
<frame src="left.html" name="left"> Now here's where things get a little sticky. The second -- or right-hand -- frame is divided into two frames that sit on top of each other (north.html and south.html). To do this, we need to create a second frameset and nest it inside the first. The second frameset describes how the right-hand frame should be divided. We divided the first frameset using percentages, so, for variety's sake, we'll go the pixel route this time around. Since you never know for sure how big a user's monitor is, or how large the browser window is within it, you need to build a little flexibility into the frameset by assigning a fixed size to one of the frames and leaving the other frame undefined so it can fill whatever space happens to remain. We do this by giving north.html 100 pixels and giving south.html whatever's left over, like this:
<frameset rows="100,*"> So the top frame will be 100 pixels high, and the bottom frame -- marked off with an asterisk -- will vary in size. Now let's drop in the frames:
<frame src="north.html" name="north"> <frame src="south.html" name="south"> Finally, we'll close off both of our framesets. All in all, frameset.html should now look a little something like this:
<html> <frameset cols="25%,75%"> <frame src="left.html" name="left"> <frameset rows="100,*"> <frame src="north.html" name="north"> <frame src="south.html" name="south"> </frameset> </frameset> </html> >>> No Frame, No Gain <<< Occasionally, you'll run across an ancient mariner who surfs to your site using a browser that doesn't recognize frames. Just to be nice, send them a message (be gentle but firm!) using the <noframes> tag:
<noframes> <body> You appear to be running a browser that can't see frames -- that is so 1996! I suggest you finally break down and upgrade to something a little more au courant. </body> </noframes> For a more complete look at the how's and why's of dealing with the poor, frameless users in our midst, read Webmonkey Jillo's (my, she's a busy Monkey, no?) treatise on the matter: Don't Forget the Non-Frame Folks Wouldn't a complete list of which browsers support what features be nice? Couldn't you just see yourself bookmarking something like that and using it each and every time you build a site? Webmonkey had the very same thought! >>> Leaving You Hanging <<< That should be enough to keep you busy. Go ahead and try hanging a frame or two, then tune in next time when we'll show you how to link between the frames. Be there, or be L7!
|
||
|
| ||
|
Hints, Pointers, and Tips 'O the Trade
1. Control the margins of your frames, or the amount of white space between the borders and the contents, with "marginwidth" (which controls the amount of space on the left and right side) and "marginheight" (which controls the space on the top and bottom). Here, like this:
<frame src="south.html" marginwidth="5" marginheight="10"> 2. Give your frame a scrollbar (or take it away) with the "scrolling" attribute. There are three possible scrolling options: yes, no, and auto. "Yes" gives the frame a scrollbar whether it's needed or not. "No" prevents the scrollbar from appearing at all, even if there's alluring, un-reachable content that doesn't fit on the small screens of some users (not the best idea). And "auto" places a scrollbar only when there's more content than can fit in the user's window.
<frame src="south.html" scrolling=auto> 3. When they ask how you want your coffee ground, don't say, "Whatever!" because when you wake up the next morning, comatose with lack of caffeine, and your coffee machine starts spewing dark, black sludge, you'll be very, very unhappy. And you'll drink it anyway.
|
||
|
Subscribe/Unsubscribe
Handcrafted Archive |
