Web Design Course Day 5

Short Course in Web Design

STUART MOULTHROP
UNIVERSITY OF BALTIMORE
SCHOOL OF COMMUNICATIONS DESIGN

Most Recent Update 11-27-96

Day Five
FRAMES AND BEYOND

5.1 | FRAMES

5.1.1 · Concept and Background

Frames are Netscape's most ambitious extension of conventional HTML; they subdivide the browser window into what are in effect other browser windows, each displaying a URL or Web page

In part this development answers the complaint that "travel" in the Web is too disorienting; with frames, part of the screen can remain stable as others change; this stable "ledge" could contain a table of contents, context-sensitive help, or just an identifying mark

Frame pages may thus enclose and exhibit other pages: this effect adds a new dimension to hypertext linking in HTML, allowing destination points to become visible before the reader has departed the original context

Since an entire frame page may be called up as subframe of another such page, the potential for recursion is very high, windows within windows within windows; frames add considerably to the sophistication -- and complexity -- of Web documents

Finally, the cynic's view: perhaps the motivation behind frames is simply commercial: advertisers can now keep their messages in front of Web surfers even as they cruise from site to site

5.1.2 · Principles of Frame Documents

A GENERALIZED FRAME DOCUMENT

<HTML>

  <HEAD>

  </HEAD>

  <FRAMESET>

    <FRAME>

  </FRAMESET>

</HTML>

A frame document has no BODY container: this is replaced in the markup by the FRAMESET container; note that no tags useable inside a BODY container (IMG, H, HR, etc.) may appear ahead of the FRAMESET tag -- the browser will ignore the frames information if it finds any of these first

Thus frames construction is an all-or-nothing proposition: you can't mix frames with other layout styles as you can tables, applets, and other HTML enhancements

By implication, frame layout pages constitute a new class of HTML documents, a more general and abstract level of structure that is connected to older forms, yet distinct from them

5.1.3 · FRAMESET and its Attributes

Unlike tables, the frame scheme allows both rows and columns to be specified, so the initial FRAMESET tag has attributes for COLS as well as ROWS

Of course, you can write frames layouts having only columns or only rows; these simpler layouts are in fact quite common on the Web

Here is a specimen frames layout showing this principle in action; unlike in previous examples, you'll have to follow a link to see the frames output because the actual frames markup must reside on a separate page

A Simple Frame Layout

<frameset rows="50%,50%"> <frameset cols="50%,50%"> <frame src="demoA.html"> <frame src="demoB.html"> </frameset> <frameset cols="100%"> <frame src="demoC.html"> </frameset> </frameset> VIEW THE OUTPUT

In this example the framesets for the various columns (vertical divisions, two above and one below) are nested inside the frameset for the two rows (horizontal divisions)

Nothing requires that rows be specified before columns; we could have nested the elements the other way around, though this produces a different layout, as you can see

In designing a frames layout with both rows and columns, you first define one dimension of the grid (rows or columns) then work out the divisions within each of the primary units; there must be a subordinate FRAMESET container for each of these units, and this container must account for all the local subdivisions or frames

The dimensions of these frames may be set in three ways: in percentages (as in our examples), in absolute pixels, or with an asterisk (*), indicating the frame in question will be sized relatively, i.e. in relation to the space available; consider this tag, for instance:


<FRAMESET ROWS="120,*,55">

The frameset divides the screen horizontally into three zones, the topmost 120 pixels high, the lowest 55 pixels high, and the middle zone whatever remains after these values are deducted from the total height of the active window; this approach might be used to place non-scrolling "ledges" at top and bottom and a scrolling window in the middle of the screen

Don't forget the quotation marks ("") around the values assigned to ROWS and COLS -- though many attributes don't strictly require quotation marks, ROWS and COLS absolutely do; if your layout isn't coming out as you want, check your code for a missing quotation mark

5.1.4 · <FRAME>

Like <TD> in tables, the solitary FRAME tag fills in the content of the subdivisions in a frame layout; each frame is assigned a particular URL (though the same URL may be assigned to more than one frame) through the SRC attribute; SRC in effect creates a view of an HTML page in one subdivision of the current layout

<FRAME> also has optional attributes:

NAME

This attribute gives the frame a designation that may be used with the TARGET attribute in the link anchor tag (see below)

MARGINWIDTH, MARGINHEIGHT

These attributes let you set (in pixels) the width or height of the gap between the frame border and the contents of the frame

SCROLLING

By default scrollbars will appear within a frame if its contents exceed the available dimensions -- for instance, if you were to access the (very long) page you are reading now in a frame only 100 pixels high

If you set SCROLLING to "NO," then scrollbars will not appear under any circumstances; likewise a "YES" value brings in scrollbars whether or not they are required

Note that scrollbars appear for both horizontal and vertical scrolling even if you only wish to scroll in one dimension; some consider this a flaw

NORESIZE

This attribute is a "flag" with no assigned value (like NOSHADE in the HR tag); if NORESIZE is included, then the frame in question will always have the same height and width -- otherwise the user can "drag" the frame margins to change the relative size of the frame, decreasing the amount of screen space given to other frames

NORESIZE turns off a default "yes" condition: all frames may be resized by the reader unless you say otherwise

5.1.5 · Links and Frames

When a Web page is displayed in a frame all its hypertexts links remain active, allowing the reader to call up other pages; but where do these other pages appear?

By default they show up in the same frame within which the link was activated, as in this example...

You may however create links that "arrive" in frames other than the one containing the departure point: this is done by adding a TARGET attribute to the departure link anchor

The value assigned to TARGET may be the NAME value assigned in <FRAME>: consider yet another example, along with its frame layout:

"TABLE OF CONTENTS" FRAME LAYOUT
<frameset cols="20%,80%"> <frame src="demo_toc.html" name="toc"> <frame src="demoA.html" name="main"> </frameset> VIEW
OUTPUT

Each of the two frames in this layout has a NAME attribute (though in this case only the second, "main," is actually used); the links contained in the "toc" ("Table of Contents") frame all contain TARGET attributes referring to "main," for instance:


<a href="demoA.html" target="main">FILE A</a>

By using TARGET in link anchors, you can cause a link to change the contents of a specified frame; note however that links cannot be targeted to more than one frame

Sun's Java and Netscape's JavaScript offer ways of updating multiple frames, but both require structures considerably more complicated than a hypertext link

5.1.6 · Special NAME/TARGET Values

Though you can use almost anything you want as a corresponding value for NAME and TARGET, a number of values are reserved for special functions; each of these special values begins with the underscore character ( _ ):

_top: Replaces the current frames layout with a new window in which only the destination page appears (you can use this facility to let readers "break out" of frames)
_new and _blank: Like _top, these values create fresh windows, but they do not in all cases close the original frames layout; this can be confusing
_parent: Places the destination page in the "parent" of the current frame -- which has the same effect as "_top" unless there is more than one window open, in which case only the "parent" window is updated
_self: Places the destination page in the frame containing the link -- this is the default case

NOTE: Special NAME/TARGET values must be given in lowercase letters; though HTML is usually not case-sensitive, this is a crucial exception

5.1.7 · <NOFRAMES>

This optional but highly useful container provides a "failsafe" option in case the reader is running a browser program that does not support frames; markup placed within the NOFRAMES container appears in place of the frames layout when the page is accessed by a non-frames browser

You can think of NOFRAMES as a sort of emergency BODY container: when redesigning older pages for frames, some authors simply copy all the contents of BODY in the old version and insert it into the NOFRAMES container of the frames layout; or consider this more conservative option:

EXAMPLE OF "NOFRAMES" BYPASS

MARKUP OUTPUT

<NOFRAMES> <TABLE HEIGHT="100%" WIDTH="100%"> <TR><TD ALIGN="MIDDLE"><STRONG> Your Browser Does Not Support Frames </STRONG><P> For the non-frames version of this page, click <a href="old.html">here</a> </TD></TR></TABLE> </NOFRAMES>

5.1.8 · The Trouble(s) with Frames

The reception of frames has been fairly cool; bemused users point out several areas of concern, most of which software designers have tried to address, though controversies continue:

Navigation

Readers have complained sharply that frames make the Back function terribly ambiguous; before frames, Back meant "show me the page I was viewing before this one" -- which is still the case with frames pages, though with a very troublesome difference

Frustrated readers found that Back on a frames page applies to the entire page (or layout), not just to the frame most recently updated: having asked for a previous state of the layout (all the current frames plus an earlier version of one frame in particular) they would see instead whatever page they had been viewing before they accessed the frames layout -- usually a page showing none of the previously visible frames

Netscape has added Back in Frame and Forward in Frame functions, both of which are available from the pop-up menu that appears if the mouse button is held down while the cursor is within a frame; this is at least a partial solution

"Hide Frames"

Authors may wish to let readers see the page in a separate, unframed window; originally they had to create a link somewhere on their pages using the "_top" value for TARGET

This was a less than perfect solution, since the "hide frames" link could be scrolled out of sight on longer pages; Netscape responded by adding a feature to the local pop-up menu called New Window With This Frame

Proliferating Markup

Inevitably, frames add a new level of complexity to Web markup: working on a frames project may entail making interdependent changes on the frames layout page as well as several other pages invoked by various links

It is particularly difficult to view the source of a page within a frames layout; View Source in the browser shows only the markup for the layout page

To find the source for pages within frames, readers can use the New Window feature described above, then view the document source once the page has been isolated.

Ugly Gray Lines

For those not fond of thick gray lines, the original frames implementation was notably unattactive; however, Microsoft added the ability to change or suppress the frames borders in Internet Explorer, prompting Netscape to follow suit in Navigator 3.0.

Navigator now supports a FRAMEBORDER attribute in both the FRAMESET container and the FRAME tag, allowing the author to set visibility of border lines; there is also a BORDER attribute for both FRAMESET and FRAME to set width of lines.

Though in our experience FRAMEBORDER="NO" has every little effect (the border lines lose detail but don't go away), placing BORDER="0" in the outermost FRAMESET tag will suppress frame lines for the entire page unless they are turned back on in individual FRAME tags.

There is also now a BORDERCOLOR attribute that enables border divisions in colors other than battleship gray.

However, documentation for the new attributes seems less than clear about when they are and are not effective. For example: "If there is a conflict between two colors of equal priority both set on the same edge, the behavior is undefined." Whatever that means.

Scrolling

Though individual frames within the layout may scroll, the layout as a whole may not: this is a substantial difference from tables, which may contain more elements than are visible on the screen at once -- a frame layout is confined to the limits of the screen, like it or not

This is of course as much a blessing as a curse: would I really want a meta-scrollbar on the left or bottom of the screen, allowing me to scroll EVEN MORE frames into view?

But while it seems unwise to promote the spread of frames, remember that scrolling would allow sensible designers to limit the number of frames while increasing their size, oh well...

5.2 | DYNAMIC DOCUMENTS

5.2.1 · The Power of the Dark Side

Hypertext assumes that texts unfold over time with the user's engaged attention -- or as Ted Nelson put it, non-linear writing demands "free and knowing user movement"

Dynamic documents represent a dark parody of this idea: automatic and mysterious transformation of data

And that's good! -- document dynamism is yin to hypertext's yang, the tonic of subversive weirdness playing against the generally rational dominant of the Web

Actually, we doubt the fine folks at Netscape had any such thing in mind when they cooked up this idea; they were probably just trying to include constantly updated stock prices and sports scores on Web pages

Hey, LSD was an accident, too...

5.2.2 · <META HTTP-EQUIV>

The key to dynamic documents is the <META> tag, a solitary structure that goes into the HEAD container of the document; as the name suggests, META provides a way beyond the normal range of HTML function, and in fact META may be used for a number of things besides dynamic documents

The key to this application is the HTTP-EQUIV attribute of <META>: if META is a verb that means "act strangely," HTTP-EQUIV is an adverb that says "act like a server" -- this tag causes browsers to do things that normally happen on the other end of the client/server axis, i.e., updating the state of the current Web page

<META HTTP-EQUIV...> can be set up in such a way that a page loads, waits for a certain period, then loads itself again, perhaps reflecting some change in its state (a new stock quote plugged in by a CGI, for instance); or more intriguing, the page may load another Web page altogether... and that page may also be capable of some automatic transition, and so on

These and a few related techniques are sometimes referred to as "client pull," since the browser figuratively "pulls" new content out of the server; consider the following example:

5.2.3 · A Dynamic Document

A CLIENT PULL DEMONSTRATION
Like frames, dynamic documents can't be captured in ordinary Web layouts	PUSH ME PULL YOU

This simple parlor trick uses five Web pages, each of which contains either the following META tag or some variant thereof:


<META HTTP-EQUIV="REFRESH" CONTENT="2; URL=DDEX2.HTML">

The server function being imitated here is called REFRESH, which means replace the Web page currently being displayed with another (or with another version of the present page)

The CONTENT attribute contains two items: a time delay in seconds (2) and the URL for the page that is to be displayed when the two seconds are up -- note that both elements of this attribute are contained within the same set of quotation marks, separated by a semicolon -- that is not a typographical error

If I were setting up this syntax, I would not stuff two very different values into one attribute; the designers may have been driven to this by limits on how information may be passed from client to server -- whatever the cause, be very careful of syntax when dealing with the META tag, because it doesn't obey all the rules

In the larger scheme of things, each page in this series calls its successor (DDEX1 calls DDEX2 which calls DDEX3, etc.) until we come to DDEX5, which after two seconds automatically links to the page you are reading now

5.2.4 · Dynamic Documents and Links

In and of itself, client pull is not especially interesting unless you love slide shows, filmstrips, and the documentaries of Ken Burns

However, designers of the META tag made its function subordinate to ordinary HTML hypertext links: links override the automatic page-turning machinery -- user actions always take precedence

This raises the possibility of texts that alternate between loops and leaps, between programmatic succession and sudden, willful departures into the unknown; we leave it to you to figure out what might be done with those ingredients

5.2.5 · Dynamic Documents and Frames

It bears mentioning that client pull may be combined with frames, so that pages can be constructed with elements that automatically transform themselves even as other aspects of the page remain stable; and of course yet more outlandish things are possible

Follow the link at right for a fairly modest illustration of a frames project with client pull

5.3 | CLIENT-SIDE PROGRAMMING

5.3.1·JavaScript

JavaScript was originally known as LiveScript, Netscape Communications' concept for a scripting language that would extend the function of Navigator and other Web browsers; but then along came Sun's Java programming language (see next section), and since LiveScript's syntax was largely based on Java (both are based on C), the name was changed

The idea behind JavaScript was originally to provide a "first stage" for Common Gateway Interface scripts on the server and Java applets in the browser; JavaScript was supposed to take care of obscure but important tasks like figuring out if the information entered in an interactive form fits the criteria set out for it, or if the right windows are open to display certain data

Indeed, much of the language as first defined related to the FORMS part of HTML; we haven't said anything about FORMS in these classes because it's our belief that Java will eventually replace CGIs and fill-out forms for many if not most of the current CGI applications

Though the original release of JavaScript (in Netscape Navigator 2.0) was rather limited and in some cases bug-ridden, we have seen it used successfully to do things like:

Automatically generate "footer" material for Web pages, including a last-updated notice
Run the equivalent of "macros" to automate the formatting of complex documents
Open pop-up windows on Web pages
Manage a floating navigation palette
Implement a "stretch-text" hypertext scheme

If you are running Navigator 2.0 or later, you already have JavaScript: the code is integrated into the browser; for more information and basic documentation, see Netscape's home; there are also a few guides to JavaScript available, including a very helpful book by Danny Goodman

The 3-series release of Navigator contains a revamped version of JavaScript with notably expanded functions. It's now possible to use JavaScript to control appearance of page elements and to add interactivity to Web designs. For a good example of this, see the Clinton/Gore page.

Though we were initially skeptical about JavaScript, the language seems to be coming into its own. With the addition of LiveWire, a facility for linking JavaScript to Java applets, lots of intriguing possibilities open up.

Microsoft has its own implementation of JavaScript, called JScript. MS-Explorer 2-series does not support JavaScript, but apparently the 3 and 4-series will (though at this writing, they exist only for Windows).

5.3.2·Java

Java is a programming language invented at Sun Microsystems and meant, though it beggars belief, as a control interface for VCRs, toasters, and other home appliances (imagine having to program your car's engine control system in C++...)

Java delivers the power of object-oriented languages to the very doorstep of Web authors; Java "applets" (cute little applications) stream in with a Web page, much the same as image files: except that applets are executable programs, like the browser itself, and thus they are capable of doing much more with your PC's resources than even the most animated GIF ever did

5.3.3·Java in Action

Here's an embarrassingly simple Java applet:

Java applets require HotJava, Netscape Navigator 3-series, or similarly equipped browsers.

The HTML container that introduces applets is called, amazingly, <APPLET>: unlike frames, but like other inclusive structures such as IMG, TABLE, and SCRIPT, the APPLET container fits within the BODY container and is integrated into page layout as an in-line element; here's what the APPLET tag looks like for the example above:


<applet code="fadeout02.class" height="320" width="50">

  <table width=75% cellpadding=10 border=1>

  <tr><td align=middle>

  Java applets require HotJava, Netscape Navigator
 
  3-series, or similarly equipped browsers.

  </td></tr></table>

</applet>

The first attribute in the initial tag (CODE) identifies the Java applet to be included here; applets are identified by the ".class" extension; the ".class" file contains binary data representing "bytecodes" which can be translated by interpreters in Navigator and other browsers; bytecodes are a cross-platform lingua franca: with a few small exceptions, they deliver the same results in Mac-OS, Windows, and UNIX

The initial APPLET tag also has attributes for HEIGHT and WIDTH; these set the dimensions of the rectangle in which the applet will execute; there is not as yet any way to make applet windows transparent or run over other parts of the page (though it's simple enough to define a full-screen applet and deliver all your page content via Java)

In addition to HEIGHT and WIDTH, there is an ALIGN attribute, not used here: it functions the same way for applets that it does for images and tables

You'll see a table containing text inside the APPLET container: like the contents of a NOFRAMES tag, this is a backup notice provided for people whose browsers don't support Java; as with frames, you can include a complete markup within the APPLET tag; many authors include a static image of their applet's output (assuming it's chiefly visual) to suggest its effects

5.3.4·Working with Java

As a Web author you may either appropriate existing Java applets, many of which let you change their display content by passing a parameter in the APPLET tag, or you may write and compile your own Java code using a Java developer's environment such as Metrowerks' CodeWarrior, Symantec's Café, Natural Intelligence's Roaster, or the Java Developer's Kit from Sun, currently in beta circulation

We don't have scope here to do Java justice; we can say that it deserves the hype and does mark a major turning point for Internet publishing -- a move away from static, magazine-like "pages," heading toward more dynamic and complex conjunctions of information in virtual space

We'll also note that the recent wave of graphical interface building tools for Java could significantly simplify the task of writing Java applets, bringing some of the ease and flexibility of HyperCard and ToolBook to this task; this could have very significant results

For the definitive word on Java development, visit Sun Microsystems

For the latest and most amazing Java applets, see Gamelan

For a few laughs on the newbies, try this

5.4 | BEYOND HTML

5.4.1·Shockwave

ShockWave is the other huge rock from space that makes old-fashioned Web pages into very doomed dinosaurs; formally speaking, ShockWave is a plug-in for browsers that gives them the capacity to display within Web pages interactive presentations created with Macromedia's Director

For lots more information about ShockWave and Director, see Macromedia's Web site

Given that Macromedia has recently made very significant advances in data compression, that Director is the acknowledged standard for advanced animation and interactive multimedia, and that Director's programming language, Lingo, is only slightly harder than Java, there are two things you need to do now that you have covered the basics:

Learn Java

Learn ShockWave

Note that the above is an unordered list; your choice of obsessions may depend on your professional objectives: folks interested in high-level media and visuals should probably go with ShockWave, while those whose main interest is interactivity will be happier with Java

5.4.2 · VRML, MOOSpace, Metaverse, Oh My

And now it's time for the crystal ball... or is it the Magic Eight-Ball? (ANSWER UNCLEAR ASK AGAIN)

When I first heard about the World Wide Web about five years ago, I opined that by the late nineties it would be just another obscure, academic hypertext system -- right

So how should I know where the Web will be in another five years? -- though I can say that we're moving away from "paper-based data structures," as our Uncle Buddy calls them, and toward complex, multiply mediated, largely unknown information spaces... somebody cue the "Star Trek" theme

But seriously: while you're guzzling Java and checking in for ShockWave treatments, save some attention for object-oriented virtual environments (commonly called MOOs) and for Virtual Reality Modeling Language (VRML), a 3-D object-description language coming soon to an Internet port near you; I would also watch the evolution of Internet-as-marketplace to see if Wired was wrong when it predicted the Web would lose its financial backing in early 1997

the old mass media

where's my cable modem?

In the meantime, remember what Kerouac said:

-- YOU CAN'T STOP THE MACHINE --

END OF NOTES FOR DAY 5

TOP OF THIS PAGE ||| CLASS MAIN PAGE

Last Updated 11-27-96

A Simple Frame Layout
`<frameset rows="50%,50%"> <frameset cols="50%,50%"> <frame src="demoA.html"> <frame src="demoB.html"> </frameset> <frameset cols="100%"> <frame src="demoC.html"> </frameset> </frameset>`	VIEW THE OUTPUT

"TABLE OF CONTENTS" FRAME LAYOUT
`<frameset cols="20%,80%"> <frame src="demo_toc.html" name="toc"> <frame src="demoA.html" name="main"> </frameset>`	VIEW OUTPUT

EXAMPLE OF "NOFRAMES" BYPASS
MARKUP	OUTPUT
`<NOFRAMES> <TABLE HEIGHT="100%" WIDTH="100%"> <TR><TD ALIGN="MIDDLE"><STRONG> Your Browser Does Not Support Frames </STRONG><P> For the non-frames version of this page, click <a href="old.html">here</a> </TD></TR></TABLE> </NOFRAMES>`