Beginning HTML - Home
Introduction - What is HTML, What it can do, what you'll need, etc. The Basics - First steps in HTML. Moving On - Further concepts. Advanced - More advanced ways to use HTML. Glossary - Explanation of terms used in this site HTML Tag and attribute reference - look up the most popular tags and their common attributes for reference
Square Advanced
square Forms (Part One)
Square Forms (Part Two)
Square Frames (Part One)
Square Frames (Part Two)
Square Entities
Square Meta tags
Square Search engines
Square Publishing
Square Conclusion
 
Navigation and links with frames
Making the frame non-resizable or unscrollable
Adjusting the frame border size and colour

Navigation and links with frames

In our first look at frames, we learned how to make a simple page using frames, how to specify the size of the frames, how to specify the location of the files, and so on. We also saw that a popular use of frames was to use one as a 'navigation bar', that was static on the screen at all times.
Imagine a navigation frame that contains all the links for a site. What would happen if one was clicked on? Well, the relevant page would be loaded.....into the navigation frame! Which is obviously not what we want; we'd like the page to be loaded into the other frame.
How do we make sure this happens? Well, we first need to look at a new attribute to the <frame> tag, which is the name attribute. Each frame can be given its own unique name, which can then be used to make a page load into that frame. Let's take a look at how we'd assign each frame within a simple frameset -
<html>
<head>
<title>An example of using frame names</title>
</head>
<frameset cols="20%",*">
<frame src="navigation.html" name="leftFrame>
<frame src="main.html" name="mainFrame>
</frameset>
</html>
In the above example, we've created a simple frameset, but we've added the name attribute to each of the <frame> tags so that we can identify and refer to them. You can name each frame pretty much whatever you want, but really the idea is to name them something meaningful and easy to remember.

OK, so now we've named each frame, what do we need to do next? Well, in the example above, we're using the left hand frame (navigation.html) as our navigation frame, and the right-hand frame (main.html) as the main content of the page.
What we need to do is tell leftFrame (navigation.html) that any link of its that we click on needs to be loaded into mainFrame. To do this, we just need to add one line of code in the <head> section of the HTML of navigation.html. We'll need to introduce one new tag - <base>. <base> has an attribute called target that we'll use to make every link load its file in the right window. The line of code we need is as follows -
<base target="mainFrame">
This must go in the <head> section of the navigation frame. The word mainFrame should be replaced by the frame name of the frame you want to load content into. So, the full HTML of a navigation frame might look something like this -
<html>
<head>
<title>Navigation frame</title>
<base target="mainFrame">
</head>
<body>
<a href="pageone.html">Page One</a><br>
<a href="pagetwo.html">Page Two</a><br>
<a href="pagethree.html">Page Three</a><br>
<a href="pagefour.html">Page Four</a><br>
<a href="pagefive.html">Page Five</a><br>
</body>
</html>
Now any link that is clicked on in the navigation page will load the page in the main window (which here we've called mainFrame.

Making the frame non-resizable or unscrollable

Take a look at the example of frames we saw earlier, here. Now move your mouse until it's hovering over the border of the frames. The cursor will change and show a 'resizing' icon instead. Left-click the mouse and, whilst holding down the button, move the mouse in a left or right direction. Then let go of the mouse button. You'll notice that you are able to resize the frames to whatever you'd like. Obviously this is far from ideal, as it means no matter how careful we are with the way our pages are designed, any user can view the page and resize the frames, which makes the browser re-render the document in a different, undesirable way.

To get rid of this effect, we just need to add another attribute to the <frame> tag. This attribute is different from others we've seen so far, as it doesn't have any content. The attribute is noresize, and by just including that word within the <frame> tag, we eliminate the problem. E.g. -
<html>
<head>
<title>An example of the noresize attribute</title>
</head>
<frameset cols="20%,*">
<frame src="navigation.html" name="navigation" noresize>
<frame src="main.html" name="main" noresize>
</frameset>
</body>
</html>

Adjusting the frame border size and colour

We've seen how we can eliminate the problem of the user dragging the frame border to resize it. But what if we don't want a border to appear to begin with, or we'd like a thinner or thicker one? No problem, we just need to use the border attribute of the <frameset> tag. Using this attribute, we can then set an amount (in pixels) for the thickness of the border. If we set this value to 0, then a border won't appear at all, as in this example. Example code would be -
<html>
<head>
<title>An example of the border attribute</title>
</head>
<frameset cols="20%,*" border="0">
<frame src="navigation.html" name="navigation" noresize>
<frame src="main.html" name="main" noresize>
</frameset>
</body>
</html>
Suppose you want a border, but you don't like the default colour? Again, no problem, we just need to use another attribute - bordercolor. Again, this is an attribute of the <frameset> tag, although it can also be used within a <frame> tag to control each frame. You can specify the colour as either an RGB hexadecimal value (e.g. #FF0000), or just by naming the color (e.g. 'red'). For example -
<html>
<head>
<title>An example of the border attribute</title>
</head>
<frameset cols="20%,*" border="1" bordercolor="red">
<frame src="navigation.html" name="navigation" noresize>
<frame src="main.html" name="main" noresize>
</frameset>
</body>
</html>

Frames can seem quite daunting, but once you've experimented and played around with the different tags, attributes and possibilities you'll get the hang of them. In the next section, we'll be finding out what entities are, and how we can use them in our code.

TopTop of page - BackBack to Frames (Part One) - Next - EntitiesNext

Introduction - The Basics - Moving On - Advanced - Glossary - Reference