| |
lecture 10: handout
the frameset document
This is the complete code for ext_frame.html, with the exception of the <meta> tags - do note, though, that <meta> tags become more important in frameset documents as they are all that search engines have to go on when trying to understand the content. Note, also, the difference in the <!DOCTYPE> declaration.
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
" http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd ">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Drew's Web Design Site: frames example</title>
<link rel="stylesheet" type="text/css" href="css.css" media="screen" />
</head>
<frameset rows="15%,*" frameborder="no" frameborder="0">
<frame name="topbar" src="ext_topbar.html" scrolling="no">
<frameset cols="50%, 50%" frameborder="no" frameborder="0">
<frame name="left" src="ext_description.html" scrolling="auto">
<frame name="right" src="ext_class1.html" scrolling="auto">
</frameset>
</frameset>
<noframes>
<h3>Welcome to the Drew's Web Design Site</h3>
<p>This is a sample page for the lesson on frames. It uses frames, which your browser does not support. A frameless version of the page is available at <a href="ext_frameless.html">ext_frameless.html</a>.</p>
</noframes>
</html>
slide G - what happens when you omit target="_top"
- go to http://www.plant-biotech.net
- in the menu to the left, click on the icon with a question mark (the floating caption reads "who, what, where, why")
- click on either the green, yellow or red hot spot on that image map. You may note (if you can read German) that only the green one is a functioning link anyway. Whichever you choose, though, follow a few more links through the new page to prove that you are trapped within the frameset however far you navigate.
slide I - some more info on the <iframe> tag
Here are the available attributes for <iframe>
- align: takes values of left, right and center and aligns the frame on the page or, more specifically, within whichever page element it rests. Left or right alignment should (in theory) allow text to flow round the sides of a frame.
- frameborder: default is 1, which renders the frame with a border. 0 turns this off.
- height: Specify the height of the frame in pixels, as you've seen: or as a percentage of the window size.
- marginheight and marginwidth: specifies a space, in pixels, inside the frame between the frame edges and frame contents.
- name: names the frame for reference by targeted links.
- noresize: prevents users from resizing the frames. As with "real" frames though, I wouldn't use this: if somebody really wants to resize your frame, they've probably got a good reason.
- scrolling: takes the same values of yes, no and auto. (Incidentally, I had problems in older versions of IE with the constant appearance of the horizontal scroll bar, but I think this bug has now been fixed.)
- src: The clearly important link to the contents of the frame.
- width: an absolute (pixels) or relative (%) width for the frame.
slide J - code for the drop-down menu
For clarity only two of the many options are shown - they are all basically the same except for the (fairly obvious) fact that selected="selected" only appears once. Note that the long onchange event must be typed in one continuous stream of text, with no line breaks. It does not matter if the Notepad window is not wide enough to show it in one line, but don't type any line breaks.
<form action="">
<select name="jumpto" onChange='window.location.href=this.form.jumpto.options[this.form.jumpto.selectedIndex].value'>
<option selected="selected" value="vlect10a.html">Virtual lecture 10...</option>
<option value="vlect10b.html">Handout</option>
[...and so on...]
</select>
</form>
|
