In This Chapter
Start the Web-Presses!
By now, you may be thinking to yourself, "This author stuff doesn't seem that difficult. Heck, I could write my own book or publish a magazine, and it'd be much better than what this guy has written." You may be right...and through the magic of the Web, you can give it a shot. Publishing on the Web doesn't require a contract with a publisher, a fleet of editors, or tons of money; all you need is you, your browser, and an idea.
Many have already started down the path of the eZine, an electronic, online sibling of the magazines you find at your favorite bookstore. Each day, another one is "published" through the Web. (I've even heard there's a 'zine about chickens). If no one reads it but you, who cares? You've made your statement, presented your case, told your story, whatever you want to do.
Any magazine, electronic or otherwise, consists of the following parts:
You can put these together using the <FRAME> tag. The <FRAME> tag allows you to break the browser's display area into subsections (separated by frames) and display a different HTML document in each frame. Because a picture is worth a thousand words, this figure shows you what our eZine will look like when you finish.
Let's tear this apart and look at each piece.
I've Been Framed!
The first thing you see is that the screen is divided into three areas. Each area is referred to as a frame. When the user first loads the eZine, he sees the cover page that you see in the figure. The frame that runs down the left side of the screen serves as your Table of Contents. Each link listed there loads a particular article when it’s clicked on. Articles that are loaded appear in the large frame on the right. Finally, the third frame is a "help window," and you'll look at that more closely later.
So the first thing you need is an HTML document that sets up your frames. This is the document that the user would load to read your eZine. By convention, the "main" or "primary" HTML document in a directory is called index.htm, and you want to stick with convention. Here's your index.htm:
Send your comments to the
A collection (or set) of frames is defined with the <FRAMESET> tag. <FRAMESET> has two attributes, ROWS and COLS, which enable you to define the width of the various frames you want.
In this example, a <FRAMESET> is nested inside another <FRAMESET>. You can do this as deep (as many nests) as you want, but don't get carried away with it. You can create frames too small to display much of anything.
You can also look at your collection of frames from another perspective. My frames consist of two columns. The left column is 90 pixels wide, and the right column is whatever's left of the screen width. The left column is called "buttons" and loads "buttons.htm". The right column is further divided into two frames, the bottom one being 60 pixels tall, and the top one being whatever's left. The top frame is called "Main" and loads "coverpage.htm"; the bottom one is "Help" and loads “helpwindow.htm.” Alternatively, you can also specify frame widths or heights as a percentage instead of in pixels. For instance, you could specify a left-hand frame to be 30% wide (simply stick the % symbol after the size number in the <FRAMESET> tag). This is often a better way to allow framesets to adjust to different screen resolutions. On the other hand, if you have placed images within your frame, you may need to use pixel widths to ensure that the frame is wide enough to incorporate the image’s dimensions.
By using the "*" value for the frame width, you tell the browser to make that frame whatever width is left after the other fixed widths have been computed.
Notice also the <FRAME> attributes NORESIZE and SCROLLING. NORESIZE tells the browser not to let the user grab the frame and drag (resize) it. Without this attribute, moving the mouse over the frame edge causes the mouse pointer to change to the familiar Windows resize cursor. If the user then grabs the frame by clicking it, he can move the frame.
The SCROLLING attribute controls whether a scroll bar will be displayed. By default, the value of SCROLLING is AUTO, meaning that a scroll bar will appear only if the page is bigger than the frame. In this case, you don't want scrolling on the help window or the table of contents, so you set SCROLLING=NO. Setting SCROLLING=YES would make a scroll bar always appear, even when the document is smaller than the frame.
As you can see, the <FRAMES> tag doesn't really display any text. It simply defines the frames and indicates which documents should be loaded into which frames.
Now, let's move through each piece of the eZine. We'll start with the more interesting one: the help window.
The help window is a simple FORM with one field: a text field named "helpmsg" that will receive information sent to it from the table of contents.
Here's the HTML file:
Nothing fancy, but with the addition of the table of contents buttons, it produces a very nice effect.
The Table of Contents
The table of contents (the frame on the left) is your control center. As the user passes the mouse over one of the links, a line of text describing that link is sent to the help window frame below.
To begin with, create an array of help strings to display:
Now that you have the array, you need to display it. What you want to do is create a special link on the page that handles the onMouseOver event. Here’s how:
The onMouseOver event handler simply calls the message() function and passes an "ID tag" (the index into the msg array) and the HREF associated with this link. Because your TARGET is "Main", the HREF that will be loaded (a story document, in this case) will be loaded into the frame named "Main", which is the large frame on the right of the screen.
The message() function looks like this:
That rather long window.parent.frames['Help']... line is what does the magic. It loads the selected msg text into the value property of the helpmsg field in the form of the helpwindow frame. That's a long-winded way of saying that it copies a string somewhere else on the page—but it works!
Finishing the Table (of Contents)
Putting this all together, here's the table of contents document, buttons.htm:
I’d like to point out three things here before we move on. First, look at these lines:
Remember that when you assign _top as a target, the browser effectively reloads everything—not just a particular frame. This is important to use, especially when you're linking to a page outside your eZine that doesn't support frames. Otherwise, your browser will try to load the new page into whatever frame you've specified (and if you don't specify a target, the current frame is used). Try to load your entire home page into a window the width of the table of contents, and you'll understand why this is a problem.
Second, check out the following lines:
This does a _top load like the Index link, but it also hooks the onClick event handler to do something else very nifty. Before the URL is loaded, the HREF attribute is set to whatever the HREF is of the document currently displayed in the "Main" window. Think of it as a short way of saying, "Take whatever is currently loaded in 'Main' and reload it, filling the full screen." Because this eliminates the frame containing the button bar, the addition of the alert() method provides the user with an easy reminder of how to get the bar back. (See the following figure.)
Clicking Expand generates a reminder, so that the user knows how to return to the frameset after reading this page.
Okay, you've seen the tough stuff, and you're almost done. The story1.htm through story2.htm files are nothing more than regular HTML files.
You can embellish these files to your heart's content. Just remember that if you add any links to pages outside your eZine, you'll want to add the TARGET="_top" attribute to the <A> tag; otherwise, things will start to look very strange.
The last part I’m going to talk about is the first part of the eZine your readers will see: the cover page. This example cover page isn't incredibly fancy, but it does have a nice touch:
You have all the pieces for a basic eZine. So what are you waiting for? Get out there and publish!
The Least You Need to Know
For comments or technical support for our books and software, select Talk to Us. © 1997, QUE Corporation, an imprint of Macmillan Publishing USA, a Simon & Schuster Company.
To order books, call us at 800-716-0044 or 317-228-4366.
© 1997, QUE Corporation, an imprint of Macmillan Publishing USA, a Simon & Schuster Company.