Astro Lesson #12 :fabulous.frames

Frames can be a decorative aid to navigation on your web site or they can be a jolly nuisance. Some people hate 'em and some people love 'em, but we feel that in the end it is up to you whether you use them or not - after all, your web page is an expression of yourself - the real you! If you like 'em, then by golly, go ahead and use them... just don't get carried away and have every square inch covered in 'em!

framed!
What are these little suckers that can cause so much discussion? Frames are basically a way to separate the browser window into split sections. In this way, a section can have constant information, while it's next door neighbour can change as desired.

It is useful to remember that older browsers just throw their hands up in horror at the mere mention of frames. If you think a good portion of your audience are going to have problems then a frameless alternative is a good idea.. according to statistics based on retrocity however, these people are few and far between. We used to cater for them specifically, but now we don't cos we are too mean for the peoples!

Things have changed around here since retrogrrl threw Miss Wendy out - but on the left there used to be a frame, with icons to help you to navigate this site by the frame remaining constant, no matter where you toddled off to in the right hand window or 'frame'. The frame holding this lesson was separate, and both frames were controlled by HTML - their appearance, how much of the browser window they took up etc.

When you selected a link from either the 'selectorama' frame or from the main frame, the new content either loaded into the main frame, or in a brand new page. This way you never really had to leave retrocity, and felt secure in the knowledge that you wouldn't get lost. This was also a plot formed by retrogrrl so that she kept you here for as long as possible! (She just loves visitors dropping in!)

mr.mondrian
Frames are often known as the Mondrian effect - this is because one Mr Mondrian - artist - famously divided his canvas into many colored sections.

Go HERE to read more about him from a fan's perspective



in.the.frame (Sorry we can't help these dreadful puns ..)
Going back to the way this space station used to be. These frames were actually 3 seperate HTML files ... 1 controlled the frames and was 'invisible' to you, the other 2 held the content of each frame.

These content files can be anything you like, as they are displayed by the controlling file in the manner you request. This controlling file is a normal HTML file that contains the following tags...

<frameset> remember when we discussed the use of the BODY tag? Frameset is used in its place - therefore for this document the BODY tag is not needed. Think of frameset as a shopping bag in which you keep all your frame goodies. It needs to be ended with the </frameset> tag.

Within the frameset tag we need to specify rows or columns. This tells the browser whether your frames will be vertical or horizontal in orientation, and also how much room each will take up. You can create a more complex scenario by using a combination of rows and columns, but think carefully why you are doing this - it may just be an over-busy mess that shows off your frame-expertise, but also your lack of good taste. Go HERE for a nice example, and then come back. The buttons on the right hand side are actually in a frame:

<frameset cols="154,*" frameborder="no" bordercolor="#663333" border=0> this is the controlling frameset, demanding 2 frames, on at 154 pixels wide and the other * or whatever the rest of the screen may be. We don't want any borders to show so everything is off. We could have a border and therefore have a border color, but in this case the color will be ignored

<frame src="list.html" name="list" marginheight="15"> This is the frame in the first column. It will be filled with an html page called list.html and has a name - list.

<frame src="main.html" name="main" marginwidth="10" marginheight="15"> This is the frame in the second column and will be filled with an html page called main.html. It has the name 'main'.

</frameset>

The value can be set to an amount either in pixels or as a percentage of the screen width or height... the latter is preferable for the main content page as we have no control over the size of user's screens or system. The handy thing is that browsers can interpret the percentages and scale them up or down if you have not quite got it all adding up to 100% for some silly reason. Also handy is the fact that one value can be set precisely whilst the next can be set as * - which means - "Hey. Go ahead and use whatever space is left for the next frame".

Next we deal with each individual frame by using <frame> - you need one of these for each frame. What goes into a frame? An HTML file - therefore you need to specify a URL for the required file.
<frame src="http://www ....."> If you get the URL slightly wrong - the frame will still appear but so will a nasty "can't find URL" message inside it.

On Target
If we give our frames individual names, we have more power over the way they display URL's. This is called targetting.

<frame src="http://www.the web.com/myindex.html" name="eisenhower">

As you can see, we have called this frame eisenhower (We don't know why - it must be freudian!) Now, say we were in the eisenhower frame already, but wanted to load another html file or url into the same frame - replacing what was there. Simple. Just create a hyperlink as follows:

<a href="http://www.theweb.com/mygranma.html" target="eisenhower"> My granma's page </a>

This makes 'my granma's page' load into the frame called eisenhower (which originally held the page 'my index'. If you don't do this, the new page will load up in it's own window.

You can pretty much call your frames what you like - except for these babies which are already taken by HTML and you can't have them (they're a bit boring anyway).

_self or _parent ... Dump the new stuff straight in here on top of the old stuff, in the same frame _parent means that the new page will replace the frameset in charge of the frame with the hyperlink - ick! Go figure)

_top ... Leave everything as it is but open a new window and display what we asked for in that - this is nice if the new page also has frames, otherwise you will end up with a screen full of frames.

_blank ... Wipes the initial frame clean from the screen.

There is also a way to update multiple frames, but you'll have to wait til next time for that one.

purty.frames
Now that you are a Frame Master, why not do a bit of frame fiddling?

to.resize.or.not.to.resize?
As with most windows, little arrows appear around the edges so that people can push and pull them outta shape as they please. BUT as you have spent so much time tweaking your lovely frames til they're

j u s t

right, you don't want no-one messin' with your stuff. So - stop them from doing so by using the noresize tag. Referring to a previous lesson on design, it's therefore important to make sure the frames still look good with different resolutions, screen widths etc.

scrolling.down.the.river
In the same vein (yuk, who wants to be in a vein?) if what's in the frame is bigger than the width or height of the frame itself, you have to provide some way for your audience to view all there is to view. This is accomplished with the <scrolling="yes"> tag. This can be set to Yes (always have a scrollbar) No (Never have a scrollbar) or Auto (If you need one go ahead)This is also the default value.

margin.homer
Marginwidth or marginheight specify the amount of space between the content and the border of a frame. Pixels please.

border.check
The size of the frame border, in pixels. Different sources seem to say different things when describing how not to have any borders : after much consternation we went straight to retrogrrl who said do this ... In the frameset tag specify frameborder="0" border="0" framespacing="0" And you know what? She was right! (framespacing is an MSIE only tag)

Use the usual color code names of hex values. Be Vewy vewy careful though ... bordercolor and frameborder can be put into frameset tags as well as the frame tag itself, and this can cause an overlapping of instructions to the browser - so if strange things are happening, check this out first.

Go away now and pontificate this penmanship - and look forward to next time when we discuss ..... something!