by Clayton Walnum
Webster's New World Dictionary defines "magazine" as "a publication, usually with a paper back and sometimes illustrated, that appears at regular intervals and contains stories, articles, and so on by various writers and, usually, advertisements." The definition of an online magazine is almost the same; just drop the paper back and add animations, sound effects, videos, dynamic (changing) page layouts, and interactive elements that are impossible to include in a print magazine.
So, how is a regular Web site different from an online magazine? After all, most large Web sites are collections of written works and illustrations, these works having been written and created by several authors and artists. Many modern sites even include advertisements. Does that make these sites online magazines? Not necessarily. There are actually three additional attributes that differentiate a successful online magazine from a conventional Web site:
In the following sections, you explore these three attributes and see exactly how they apply to an online magazine.
When Tuesday comes around, I expect to find the next issue of Time magazine in my mailbox. I expect it each and every Tuesday, and when it doesn't arrive on time, I wonder why. Likewise, Web users expect a well run online magazine to publish new issues on a regular basis.
Moreover, Web users expect to find new material when the next issue is published. This is one of the things that separates a sophisticated non-magazine Web site like Microsoft's from a well run online magazine. Sure, Microsoft updates its Web pages regularly. In fact, many of Microsoft's pages are updated daily. However, Microsoft doesn't replace the bulk of its content on a regular schedule. Instead, Microsoft updates only those pages that have become out of date, leaving the rest as they were previously published.
An online magazine publisher usually has only one main goal: to get people to access and read the magazine. That is, the magazine is the product. The magazine usually doesn't act as a front for some other business (unless that other business is the selling of advertising, which is definitely part of the magazine business).
Yes, it's true that some companies publish "magazines" on a regular basis, such magazines being filled with articles that hawk the company's wares and offer glowing reviews of products that just happen to be for sale by the publisher. I submit that these aren't really magazines at all, but rather a snappy form of catalog.
Virtually all magazines are designed to attract a specific audience interested in a specific topic. Time magazine online (http://www.pathfinder.com/time/index.html) attracts people who want to read in-depth articles about current events; People Online (http://www.pathfinder.com/people/index.html) attracts people who want to read about celebrities' lives; PC Magazine Online (http://www.pcmag.com) attracts people who want to read about IBM-compatible computers.
The problem with thematic content is that it's not always so easily defined. While it's obvious that PC Magazine Online is aimed at computer buffs, who reads RollingStone.com (http://www.rollingstone.com)? Is it people who want to read music reviews? Folks who want to know the best movie to see this weekend? Do people read Rolling Stone for its political commentary or for the interviews with famous musicians? Rolling Stone's theme isn't dictated so much by the type of articles it publishes, but rather by the attitude with which it approaches those articles. Whether Rolling Stone is publishing an article on Bill Clinton's legal troubles or on Aerosmith's latest concert tour, they approach the topic in a manner that'll attract a hip audience.
Of course, none of the previously discussed magazine attributes are carved in stone. Magazines, especially the online variety, bend the rules often and with impunity. Because a specific magazine happens to be behind schedule with new issues doesn't mean the publication is no longer a magazine. Similarly, if a magazine's articles don't always seem to fit in with a theme, that doesn't mean the magazine should be shut down for misrepresentation. But one thing's for sure: If all of the previously discussed attributes are missing from a Web site, the site in question is decidedly not an online magazine. And, it's safe to say that the more an online magazine sticks to the rules, the more readers it will attract.
This chapter is about the nuts and bolts of publishing an online magazine. That is, you learn some handy tricks to help you assemble all the stuff you get from your artists and writers into a well organized publication. As you assemble your online magazine, you need to draw upon all the Web skills you've developed. You need to take advantage of the latest technology. Only the most dazzling and captivating online magazines capture the interest of the Web community.
This brings you to the biggest difference between online magazine and conventional print magazines. As mentioned previously, online magazines can contain animations, sound effects, videos, dynamic page layouts, and interactive elements that are impossible to include in a print magazine. In the sections that follow, you see how to incorporate these types of elements into a simple online magazine.
In this section, you explore the small online magazine that's included on this book's CD-ROM. The sample magazine is based on my Web site, which just happens to use a magazine as a design metaphor. That is, although my Web site looks like a magazine, it isn't updated on a regular schedule. In fact, there are many pages that haven't changed at all since the site was first published. Moreover, my Web site exists to sell and support my books, which doesn't fit in well with the goal of an online magazine. However, because much of the work of designing an online magazine has already been done with my Web site, I decided to select some of the site's pages and refine them for this chapter's sample magazine.
CAUTION: To get the most out of the sample online magazine, you must have Microsoft Internet Explorer 4.0 installed on your computer. This is because the magazine takes advantage of new HTML technology that's currently supported only by Internet Explorer 4.0.
NOTE: The bulk of my Web site was designed by my good friend, Maurice Molyneaux, who is an artist, a writer, and a game designer. Maurice currently works for the computer game company, Psygnosis.
To get the most out of the Clayton Walnum online magazine, you need to copy its files to your hard drive. You can find the magazine files in the Magazine folder of this book's CD-ROM. Just copy the folder to your hard drive's root directory. Of course, if this were a real online magazine, it would need to be placed on the Internet. Luckily, it's not necessary to have a running Web site to demonstrate how to create a simple online magazine.
NOTE: You must be sure to copy the Online Magazine folder to your hard drive's root directory because, as you discover later, a couple of the URLs used to implement channels refer to the c:\Online Magazine directory. The other URLs are all relative to the HTML pages and should work fine no matter where the magazine is installed.
After you have the Clayton Walnum magazine installed on your hard drive, find the Default.htm file and give it a double-click. The magazine's cover page appears in your Web browser, as shown in Figure 46.1.
NOTE: For best results when viewing the sample online magazine, you should set your desktop to the 800x600 resolution using at least 256 colors. If you want to see the photographs in all their glory, set your system to True Color.
FIG. 46.1
Just like most print magazines, the Clayton Walnum online magazine features a snazzy
cover.
Thanks to audio streaming, when the cover appears you hear a very short theme song, at which point you can click the cover to open the magazine. If you like, you can admire the cover and wait for the page's timer to open the magazine for you. (It takes about 20 seconds.)
The first magazine page is a complete table of contents (see Figure 46.2). This page, like all the other magazine pages, is set up using HTML frames. A navigation bar on the left gives you access to any page in the magazine, whereas the Table of Contents page is a more complete, magazine-like table of contents.
You can find a lot of cool stuff on the Table of Contents page. For example, thanks to Dynamic HTML (DHTML), the magazine's issue date flickers between red and black. DHTML also makes clickable links change as the mouse passes over them. Text links change color (from blue to red), whereas image links shrink when in contact with the mouse, as you can see by looking at the Next button at the top of the page in Figure 46.2. Other cool stuff includes the button for subscribing to the site using Microsoft's CDF technology and the way you can make the photo disappear from the navigation bar by clicking the text under the picture--another example of DHTML.
Each of the links in the navigation bar or on the full table of contents lead to the magazine's various articles, each of which is featured in its own Web page. For example, clicking Current Releases brings you to the HTML page that describes some of my latest books. You can see this page in Figure 46.3, which follows the general layout used throughout the magazine. This layout includes navigation buttons at the top and bottom of the page, as well as the use of nested (but invisible) tables to control the layout of page elements.
FIG. 46.2
The magazine features a complete table of contents, as well as a navigation bar that
always shows an abbreviated table of contents.
FIG. 46.3
This is the Current Releases page, which illustrates the basic design theme used
throughout the magazine.
The navigation buttons at the top and bottom of each page enable the reader to browse through the magazine page-by-page. If you click the Back button, you don't go back to the page you previously viewed, but rather to the previous page in the magazine. In other words, the buttons enable you to turn the pages of the magazine. They don't work like the Back and Forward buttons in the Internet Explorer's toolbar. If you want to jump immediately to the full Table of Contents page, just click the Contents button.
If you want to see something really cool, click the FREE GAME! link in the navigation bar, which instantly gets you to the Download a Free Game page. If you look near the bottom of the page, you see two links, Installing Poker Squares and Playing Poker Squares (see Figure 46.4). Click either of these links and text magically appears in the page. For example, Figure 46.5 shows the result when you click the Installing Poker Squares link. A paragraph of text appears after the link, with the page automatically adjusting itself to accommodate the addition. This is more DHTML magic, along with some JavaScript.
FIG. 46.4
The Installing Poker Squares and Playing Poker Squares links hide a DHTML surprise.
If you click the Installing Poker Squares link again, the text disappears, leaving the page as it was when it first displayed. If you click the Playing Poker Squares link, not only does a lot of new text appear, but images and a table also appear, as shown in Figure 46.6. These links show how DHTML can add dynamic layouts to your Web pages, layouts that include various types of elements.
Another item of interest is the Clay in the Morning page, which can be accessed only from the bottom of the main table of contents, as shown in Figure 46.7. Click the See Clay First Thing in the Morning link to get to the page. I won't spoil the surprise (go ahead and click, but be ready for a nasty sight), except to say that the Clay in the Morning page is an example of video streaming.
FIG. 46.5
Click the link and text appears from nowhere.
FIG. 46.6
Another click reveals new text, images, and even a table.
Finally, the Clayton Walnum online magazine supports simple channels, which are used with Microsoft Internet Explorer 4.0. You can subscribe to the magazine by clicking the Add Active Channel button at the top of the Table of Contents page. When you do, you see the dialog box shown in Figure 46.8. Just click the OK button to complete the subscription.
FIG. 46.7
The See Clay First Thing in the Morning link is available only in the main table
of contents.
FIG. 46.8
When you subscribe to the magazine, you see this dialog box.
NOTE: The subscription dialog box shown in Figure 46.8 has most of its options disabled because those options aren't available for a disk-based magazine. If you want to get the full subscription experience, log onto my Web site at http://www.connix.com/~cwalnum, and click the Add Active Channel button on the title page.
When you complete the subscription, Internet Explorer displays the Channel Explorer Bar and the site to which you just subscribed. If you look at the channel bar (see Figure 46.9), you can see the 194x32 image that represents the Clayton Walnum online magazine. And, if you look at the Desktop Channel Bar (assuming you have it displayed on your desktop), you can see the Clayton Walnum online magazine 80x32 image in with the other channels (see Figure 46.10).
FIG. 46.9
After you subscribe, the Clayton Walnum channel's 194x32 image appears in the Channel
Explorer Bar.
FIG. 46.10
The new subscription also appears in the Desktop Channel Bar.
Now that you've explored some of the more interesting sights in the Clayton Walnum online magazine, go ahead and explore on your own. Get a feel for the magazine's design and layout. And watch for a few surprises along the way.
There are, of course, a billion ways to design and lay out an online magazine. Although the Clayton Walnum sample magazine sticks to a typical magazine structure, you can do just about anything you want with your own creations. However, remember that nothing's more frustrating than being unable to find your way around a Web site. I'm sure you've been to Web sites that were so convoluted you didn't think you'd ever find your way out. For this reason, the Clayton Walnum site limits itself to a simple two-layer hierarchy, as shown in Figure 46.11.
FIG. 46.11
A simple link hierarchy keeps readers from getting lost.
The first layer consists of the main table of contents and the magazine pages themselves. The second layer consists of a few odd-ball pages, such as the Clay in the Morning page, that are not part of the magazine's regular page sequence. When you get to one of these pages (see Figure 46.12), you'll see that the only available links either return you to the page you came from or take you to the main table of contents. This organization keeps the reader from getting lost in the site.
To keep things even more organized, all the main pages are arranged in a sequential order. By using the Back and Next buttons at the top and bottom of the pages, the reader can move through the magazine page-by-page, which is a layout metaphor based on print magazines, something with which everyone's familiar. The navigation bar on the left of every page (except the cover) enables the reader to jump to any page in the magazine without having to follow the sequential links, just as if they flipped to the middle of a conventional print magazine. Because the navigation bar is always available--not to mention the Contents buttons on every main page--it's virtually impossible for the reader to get lost in the site.
While the structure of the magazine keeps the reader from getting lost, the visual layout of each page sticks to a simple design that's attractive, as well as utilitarian. The top of each page looks essentially the same, being comprised of a set of navigation buttons, followed by the article name, by-line, and description enclosed in horizontal rules. This header is followed by the body text, after which another set of navigation controls at the bottom of the page lets the reader navigate to another page without having to scroll back up the top of the current page.
FIG. 46.12
At the second level, you can only return to the page you came from or to the main
table of contents.
Each page (except one) uses a paper-like background image that provides texture to the page. And, as you will see, each page uses HTML tables to lock the most important page layout elements from resizing and reorganizing themselves as the reader enlarges or shrinks his browser window. The downside of this layout locking is that the pages don't look their best at resolutions under 800x600. Every time you gain something, you have to give something else up!
In this section, you examine the magazine more closely, by exploring the HTML files that create each page. Along the way, you learn about powerful HTML techniques, including DHTML, CSS, frames and tables, and audio and video streaming. Because you should by now have a good background in HTML, only new techniques in the following sections are explained in detail. If there are parts of the HTML that you don't understand, look up the associated topic in this book's index and reread the appropriate sections of the book.
The magazine's cover page is implemented by a small HTML file (default.htm) that includes some interesting features. For example, if the reader doesn't click the cover within 20 seconds, the magazine automatically opens to the table of contents. This is accomplished by the HTML shown in Listing 46.1.
<head> <title>CLAYTON WALNUM: Online Magazine</title> <meta http-equiv=Refresh content="20; url=conte_fs.html"> </head>
The HTML line of interest here is the <META> tag. This line instructs the browser to display the conte_fs.html page in 20 seconds. The conte_fs.html file sets up the magazine's frames.
Next in default.htm is the line that defines the page's background and text colors, as well as begins the body portion of the document:
<body bgcolor=00000000 text=ffffffff>
Following the <BODY> tag are the lines that display the cover image and set the image up as a link to the magazine's contents. Listing 46.2 shows these lines.
<center>
<a href=conte_fs.html>
<img width=350 height=455 src=images\cover-2.jpg align=center border=0
alt="Clayton Walnum -- Click here to continue">
</a>
<p><b>Click cover to turn the page</b>
</center>
Last but not least are the lines that play the cover's theme song. These lines, shown in Listing 46.3, embed Microsoft's ActiveMovie control into the page. The ActiveMovie control is handy to have around, because it can stream both audio and video from your Web server to the magazine's reader. The control comes with Microsoft Internet Explorer 4.0, as well as with the Internet Client SDK, both of which you can download from Microsoft's Web site (www.microsoft.com).
<OBJECT CLASSID="CLSID:05589FA1-C356-11CE-BF01-00AA0055595A"> <PARAM NAME="FileName" VALUE="sounds\jetsnbel.wav"> <PARAM NAME="ShowDisplay" VALUE="0"> <PARAM NAME="ShowControls" VALUE="0"> <PARAM NAME="AutoStart" VALUE="-1"> <PARAM NAME="PlayCount" VALUE="1"> </OBJECT>
As you can see, Listing 46.3 uses the <OBJECT> tag to embed the control into the page. By setting several of the control's parameters, the page can force the control to hide its interface, as well as to automatically play the WAV file that contains the theme song. You can read more about the ActiveMovie control in the Internet Client SDK, which I strongly suggest that you download if you want to develop sophisticated Web sites. (See the section "Keeping Up with DHTML" later in this chapter for more information on obtaining the Internet Client SDK.)
When you move to the magazine's first page, which is the table of contents, your browser window divides into two frames. The frame on the left always displays an abbreviated table of contents, so that the reader can jump instantly to any article in the magazine. The frame on the right displays the current magazine page. The conte_fs.html file, shown in Listing 46.4, sets up the frames.
<html> <head> <title>CLAYTON WALNUM: Contents</title> </head> <frameset cols="175,*"> <frame src=contentsf.html noresize scrolling=no> <frame src=contents.html name=rightframe> </frameset> </html>
As you can see in the listing, conte_fs.html creates a frameset in which the first frame is 175 pixels wide, with the second frame consuming the remaining space in the browser window. The left hand frame cannot be resized or scrolled. The contentsf.html file, which is the source file for the left frame, defines the abbreviated table of contents, whereas the contents.html file defines the contents for the right frame. The contents.html file contains the full Table of Contents page. However, the right frame's contents changes as the reader browses the magazine.
The contentsf.html file defines the abbreviated table of contents. The magazine always displays this page in the left frame, giving the reader instant access to any part of the magazine. Listing 46.5 shows how this file implements the page's <HEAD> tag.
<head> <title>Contents Frame</title> <link rel=stylesheet href=styles.css type=text/css> </head>
Notice that the <HEAD> tag links the page to the magazine's style sheet, which is contained in the styles.css file. Every page in the magazine links to the styles.css style sheet, which makes it easy to change a specific style throughout the entire magazine. For example, if you want to change the style used by the body text, you only need to change the BODY style definition in the styles.css file. Then, the body text in the entire magazine automatically changes to reflect the new style.
Listing 46.6 shows the magazine's style sheet. This style sheet probably isn't as complete as it should be for an online magazine, but it's enough to demonstrate the concept. When you create your online magazine, you'll probably want to create a style in the style sheet for every style used throughout your magazine. Then it's a snap to restyle a magazine's contents.
/****************************************************
* Style sheet for the Clayton Walnum magazine
* sample Web site.
****************************************************/
/* General styles */
body {font: 12pt garamond, times; color: black;}
li {font: 12pt garamond, times; color: black;}
/* Page titles */
.red {font: bold 28pt garamond, times; color: #800000;}
.green {font: bold 28pt garamond, times; color: #008000;}
.blue {font: bold 28pt garamond, times; color: #000080;}
/* Anchor styles */
a.normal {font: 12pt garamond, times; color: blue;}
a.small {font: 8pt garamond, times; color: blue;}
a.large {font: bold 18pt garamond, times; color: blue;
text-decoration: none;}
/* Contents page subheads */
.conheads {font-size: 14pt; font-weight: bold; color: red;}
/* Legal paragraphs */
.legaltext {font-size: 8pt; color: #800000;}
a.legal {font: 8pt garamond, times; color: blue;}
/* By-lines */
.byline {font: bold 12pt garamond, times; color: black;}
.whitebyline {font: bold 12pt garamond, times; color: white;}
/* Special body text */
body.white {font: bold 12pt garamond, times;
color: white; background=black}
/* Caption text */
.caption {font: bold italic 10pt garamond, times;
color: red; background=black}
Getting back to the contentsf.html file, after the <HEAD> tag, the HTML tells the browser what to display as the page's background image, like this:
<body background=images\bg10.gif>
Then, a <SPAN> tag assigns the custom red style class to the page's title:
<span class=red>Contents</span>
Next come the links to each of the magazine's pages.These links are implemented using DHTML to change a link's style when the reader's mouse passes over the link. Listing 46.7, for example, shows how the page defines the first link, which leads the reader to the Current Releases page.
<img src=images\harvbull.gif width=15 height=15 border=0> <a class=small href=current.html target=rightframe onmouseover=this.style.color='red'; onmouseout=this.style.color='blue';> <b>Current Releases</b></a><br>
The first line defines the image that's displayed next to the link, whereas the second line specifies the style class for the link, the source page, and the target page. If you remember what you've learned about frames, the target page is the frame in which the source HTML appears--in this case, the right frame.
The third and fourth lines are where things get interesting. DHTML defines a number of events to which page elements can respond. Two of those events are onmouseover, which occurs when the mouse pointer passes over the area consumed by an element, and onmouseout, which occurs when the mouse pointer moves out of the area consumed by the element. Table 46.1 lists element events you can use with DHTML.
| Event | Description |
| onclick | Generated by a left mouse click on an element |
| ondblclick | Generated by a double left mouse click on an element |
| onkeydown | Generated by pressing a key down |
| onkeypress | Generated by a key press and release |
| onkeyup | Generated by releasing a pressed key |
| onmousedown | Generated by any mouse click on the element |
| onmousemove | Generated when the mouse pointer moves over an element |
| onmouseout | Generated when the mouse pointer moves off the element |
| onmouseover | Generated when the mouse pointer moves over the element |
| onmouseup | Generated by a mouse-button release over an element |
In Listing 46.7, when the onmouseover event occurs on a text link, the text's color style changes to red. When the onmouseout event occurs, the text's color style returns to blue. Other text links on the page work the same way.
At the bottom of the page, the reader can toggle the photo on and off by clicking the text below the photo. The first step in preparing this effect is to display the image and give it an ID that enables the document to refer to and manipulate the photo:
<div align=center> <img id=photo src=images\clay1.jpg width=122 height=115 border=0> </div>
After displaying the photo, the page must display the text that controls the photo, which it does as shown in Listing 46.8.
<span class=legaltext style=cursor:hand
onclick="togglePhoto(document.all.photo);"
onmouseover=this.style.color='red';
onmouseout=this.style.color='blue';>
<p>Click here to turn my ugly mug on and off. Most people will
probably prefer that it stay off. Can't say as I blame them.
</span>
This text block, like other text links on the page, responds to the onmouseover and onmouseout events to highlight the text when the mouse pointer passes over it. In addition, the text block handles the onclick event by calling the togglePhoto() function, which is defined in the JavaScript code later in the HTML file. The call passes the photo element, which is accessed through its ID, into the function so that the function can manipulate the photo. Listing 46.9 shows the script that contains the togglePhoto() function.
<script language=JAVASCRIPT>
function togglePhoto(element)
{
if (element.style.visibility == "hidden")
element.style.visibility = "visible"
else
element.style.visibility = "hidden"
}
</script>
The togglePhoto() function simply checks the status of the photo's visibility style and turns the photo on or off depending on the style's current setting.
When you open the Clayton Walnum online magazine, the first page you see is the table of contents. Unlike the abbreviated contents shown in the left frame, the full table of contents gives not only links to each article, but also describes each article, as well as provides other information, including the current issue's date and the legal paragraph at the end of the page. The full table of contents also includes a button the reader can click to add the magazine to his or her channel list. This full table of contents is defined in the contents.html file.
Listing 46.10 shows the <HEAD> tag for the file, which links the styles.css style sheet to the page. All the pages in the magazine link to the style sheet.
<head> <title>CLAYTON WALNUM: Table of Contents</title> <link rel=stylesheet href=styles.css type=text/css> </head>
The <BODY> tag, shown in Listing 46.11, sets a timer that controls the blinking date at the top of the page.
<body background=images\bg10.gif onload="window.tm=setTimeout(`changeColor()',500)" onunload="clearTimeout(window.tm)">
In the first line, the tag sets the page's background image to bg10.gif. In the second line, the tag creates a timer that runs for 500 milliseconds, at which point the browser calls the changeColor() script function, which is shown in Listing 46.12. The page creates the timer in response to the onload event. The third line tells the browser to clear the timer when the onunload event occurs.
<script language="JAVASCRIPT">
function changeColor()
{
var color = document.all.blinkText.style.color;
if (color == "red")
color = "black";
else
color = "red";
document.all.blinkText.style.color = color;
window.tm=setTimeout(`changeColor()',500);
}
</script>
The changeColor() function first retrieves the current color of the text element, which has the ID blinkText. The function then determines whether to set the text color to red or black, after which the function resets the timer and exits. The text that the function controls is displayed near the top of the HTML file, like this:
<b><span id=blinkText>July 30, 1997</b></span>
This <SPAN> tag assigns the blinkText ID to the magazine's date text, as well as displays the date in its position at the top of the table of contents.
Also at the top of the Table of Contents page are the buttons that enable the reader to scan through the magazine one page at a time. These buttons are images that work just like text links, including responding to the onmouseover and onmouseout events. In the case of the buttons, though, the color of the images doesn't change. Instead, the HTML instructs the browser to load and display a new image when the mouse passes over the button. Listing 46.13 shows the lines that accomplish this feat. Notice that all the onmouseover and onmouseout events do is assign a new image file to the button's src property. This creates an interesting animated button effect that signals to the reader that the button is an interactive part of the page.
<a href=default.htm target=_top><img src=images\prevpage.gif align=center width=46 height=55 border=0 alt="Contents Page" onmouseover="this.src = `images/prevpag2.gif';" onmouseout="this.src = `images/prevpage.gif';"></a> <a href=current.html><img src=images\nextpage.gif align=center width=46 height=55 border=0 alt="Next Page" onmouseover="this.src = `images/nextpag2.gif';" onmouseout="this.src = `images/nextpage.gif';"></a>
Another element of special interest on the Table of Contents page is the Add Active Channel button. As you learned previously in this book, Internet Explorer 4.0 brings a new type of push technology to the browser called channels. Using channels, you can subscribe to a Web site and be notified automatically of changes to the site. To create a simple channel, you must write a CDF (channel definition format) file that describes the channel, and create a 194x32 image to represent the channel in the Channel Explorer Bar, an 80x32 image to represent the channel in the Desktop Channel Bar, and a 16x16 icon to represent the channel in Internet Explorer's Favorites menu. When the reader clicks the Add Active Channel button, the browser reads the associated CDF file and sets up the subscription. Listing 46.14 shows the Clayton Walnum channel's CDF file. As you can see, the file defines a channel with two pages that will be tracked by the subscription.
<?XML version="1.0"?>
<CHANNEL HREF="default.htm" BASE="c:/Magazine/">
<TITLE>Clayton Walnum Channel</TITLE>
<ABSTRACT>Clayton Walnum Web Site</ABSTRACT>
<LOGO HREF="images/claywide.gif" STYLE="IMAGE-WIDE"/>
<LOGO HREF="images/clay.gif" STYLE="IMAGE"/>
<LOGO HREF="images/clayicon.gif" STYLE="ICON"/>
<SCHEDULE STARTDATE="1997.11.01" ENDDATE="1999.12.31">
<INTERVALTIME DAY="1"/>
<EARLIESTTIME HOUR="1"/>
<LATESTTIME HOUR="12"/>
</SCHEDULE>
<ITEM HREF="contents.html" LASTMOD="1997.11.05T16:00">
<TITLE>Clayton Walnum Contents</TITLE>
<ABSTRACT>Table of contents for the Clayton Walnum Web site</ABSTRACT>
<LOGO HREF="images/contents.gif" STYLE="ICON"/>
</ITEM>
<ITEM HREF="current.html" LASTMOD="1997.11.05T16:00">
<TITLE>Current Books</TITLE>
<ABSTRACT>Currently available books by Clayton Walnum</ABSTRACT>
<LOGO HREF="images/books.gif" STYLE="ICON"/>
</ITEM>
</CHANNEL>
FIG. 46.13
A table with an explicit width forces all ele-ments of the page to stay in place,
regardless of the browser window's size.
In order to use the Add Active Channel button in your Web sites, you must register with Microsoft and agree to their terms. Point your browser to http://www.microsoft.com/sbnmember/ielogo/default.asp for more information.
Finally, notice how the HTML for the Table of Contents page uses tables to keep the page elements from changing size and position when the reader resizes his browser window. All of these layout tables, which are set to an explicit pixel width, have their border attribute set to 0 so that the tables are invisible on the page. You might want to go through the HTML for the page and set all the table borders to 1 so that you can see how the layout works. For example, Figure 46.13 shows the Table of Contents page's table with a visible border. This is the only table on this page.
Other magazine pages use multiple, or even nested, tables to better control the positioning of page sections. For example, The Current Releases page places each page section into its own table. Figure 46.14 shows how the page's header elements have their own table, whereas Figure 46.15 shows how each book entry has its own table.
FIG. 46.14
The elements at the top of the page are organized into a single table.
FIG. 46.15
Each book description also gets its own table.
You can easily manipulate these different tables to create special layouts. Figure 46.16, for example, shows how you can stagger the width of the tables to vary the layouts for each book entry on the page. You can even add a cell to the table to display another image to the right of the book description. Because each table is independent of the others, you have a lot of design freedom, while still being assured that the design will not change when viewed in different sized browser windows.
The Free Game page has another good example of DHTML. Here, you can click text links to make whole sections of the page appear and disappear. This effect is again accomplished by linking element events with JavaScript functions. The page first associates the onclick event with the toggleText() function, like this:
<body background=images\bg10.gif onclick="toggleText()">
Now, whenever the reader clicks anywhere on the Web page, the browser calls the toggleText() function, which determines how to handle the click.
Listing 46.15 shows the HTML lines that display the first text link in question.
h2><a class=ex href=# title="Learn to install Poker Squares" id=Install onmouseover=this.style.color='red' onmouseout=this.style.color='blue'> Installing Poker Squares</a></h2>
FIG. 46.16
You can change any individual table to vary the page layout.
This text link is given the ID Install so that the JavaScript function can refer back to it. Thanks to the onmouseover and onmouseout events, this text link acts like the others in the magazine, highlighting when the user's mouse passes over it. However, when the user clicks the link, the browser generates an onclick message, which results in a call to the toggleText() script function. Listing 46.16 shows the toggleText() function.
<script language="JAVASCRIPT">
function toggleText()
{
if (event.srcElement.id != "")
{
var child = event.srcElement.id + "Text"
var element = document.all[child]
if (element != null)
if (element.style.display == "none")
element.style.display = ""
else
element.style.display = "none"
event.returnValue=false
}
}
</script>
The function first checks whether the element associated with the event has an ID. If the clicked element has no ID, the function has nothing to do and simply returns. If there is an ID, the user probably clicked one of the text links. In this case, the function gets a reference to the child element (the text that should appear) and sets the element's display style appropriately, toggling the element on or off. In the case of the Install link, the child element is the paragraph with the InstallText ID. This paragraph element is shown in Listing 46.17.
<DIV id=InstallText style=display:none> <p>Poker Squares can be installed only on PC-compatible machines running DOS or Windows. To install Poker Squares, simply unzip the POKERSQ.ZIP file into a directory. You can then play the game by running the POKERSQ.EXE file. Poker Squares should run fine under both DOS and Windows.</p> </DIV>
The second text link on the Free Game page works similarly, except the element that the link toggles on and off is much larger than the InstallText element and includes not only text, but also images and tables.
NOTE: When you examined the abbreviated contents frame, you saw how you could toggle a photo on and off by clicking a text link. In that case, when the picture vanished, the page didn't close up to reclaim the space where the picture had been. However, on the Free Game page, when the text elements appear and disappear, the page reformats itself to accommodate the changes. That's the difference between the visibility style, which is used with the photo on the contents frame, and the display style, which is used to make text appear and disappear in the Free Game page.
As you saw when you explored the Clayton Walnum online magazine, the Clay in the Morning page streams a video clip from the server to the reader. You might remember that the magazine did something similar with a sound file on the cover page. A very flexible component, the ActiveMovie control, can be used to stream sound or video (or both). As you can see in Listing 46.18, the Clay in the Morning page sets exactly the same ActiveMovie properties as the cover page did. The only difference is that the PlayCount property is set to 10, which causes the video to repeat 10 times.
<OBJECT CLASSID="CLSID:05589FA1-C356-11CE-BF01-00AA0055595A"> <PARAM NAME="FileName" VALUE="video\monkey.mpg"> <PARAM NAME="ShowDisplay" VALUE="0"> <PARAM NAME="ShowControls" VALUE="0"> <PARAM NAME="AutoStart" VALUE="-1"> <PARAM NAME="PlayCount" VALUE="10"> </OBJECT>
As you examined the sample online magazine in the previous sections, you got a quick introduction to some of the power you gain when using Dynamic HTML. Because DHTML wasn't covered previously in this book, this section will give you a brief overview of this powerful new Web technology.
Microsoft's goal with DHTML is to create an advanced form of HTML that enables Internet developers to create Web pages as powerful and responsive as conventional multimedia applications. To do this, DHTML must transfer the bulk of processing from the server to the client browser, which can manipulate the Web page much faster. The extra speed is due to the client browser not having to wait for the server to transmit the data needed to update a page.
DHTML provides an object model that enables a Web developer to identify and manipulate any element on a Web page. For example, in the previous section, you saw how you can give a paragraph of text an ID and then use that ID to manipulate the text, just as if it were an object like an ActiveX control. By manipulating the element's properties from a script, you can dynamically change the Web page's content right on the client machine, without having to wait for slow data transmissions over the Internet.
Some of the major capabilities of DHTML are the following:
In the following sections, you'll take a closer look at the capabilities of DHTML.
As you browsed the Clayton Walnum online magazine, you saw several examples of dynamic styles in action. For example, on the abbreviated contents page, you saw a photo that appears and disappears in response to your mouse clicks. When you click the text associated with the photo (see Figure 46.17), you generate an event to which the Web page can respond in various ways. In this case, the Web page toggles the photo on or off by manipulating the photo's visibility style. Modifying an element's styles on-the-fly is the essence of dynamic styles.
FIG. 46.17
You can use dynamic styles to make page elements that appear and disappear in response
to user actions.
Another example of dynamic styles in the sample magazine are the navigation buttons that change appearance when the mouse passes over them (see Figure 46.18). This effect is accomplished by modifying the images' src styles in response to onmouseover and onmouseout events. Finally, the magazine's text links that change color when the mouse passes over them are another example of dynamic styles.
FIG. 46.18
By changing an image's src style in response to events, you can create dynamic graphics.
Dynamic content is another feature of DHTML used in the Clayton Walnum online magazine. As you learned, dynamic content enables you interactively to add or delete elements from a Web page in response to events--without having to call upon the server to deliver a new HTML document to the reader's browser.
You saw an example of this on the Free Game page. There, you clicked a text link, which caused new text, image, and table elements to appear in the Web page. When the new elements appear or disappear, the page automatically reformats itself. This is different from using dynamic styles to toggle an element. In that case, the page doesn't reformat itself, because the element is still part of the page, albeit an invisible part.
DHTML also enables Web developers to position page elements exactly, using 2D coordinates. Scripts can modify an element's coordinates, causing the element to move around the page. A good example of this technique is the Asteroids-like game (see Figure 46.19) you can find in the Internet Client SDK. This online game is implemented entirely using DHTML and JavaScript. No ActiveX controls or Java applets needed!
FIG. 46.19
Combining DHTML with a scripting language, you can create online games.
DHTML also supports z coordinates for page elements. The z coordinate determines which element appears on top when two or more elements overlap. This enables you to set up a pseudo 3D environment on a Web page, with different elements passing in front of or behind other elements.
DHTML and Microsoft Internet Explorer include a number of standard ActiveX controls that enable you to create many types of multimedia events in your Web pages. For example, you saw examples of audio and video streaming in the Clayton Walnum online magazine. The audio and video elements were played using the ActiveMovie control.
You can read more about the ActiveMovie control, and other controls, in the Internet Client SDK, which you can download from Microsoft's Web site. (See the section "Keeping Up with DHTML" later in this chapter for more information on the Internet Client SDK and Microsoft's Site Builder Network.)
Using DHTML, you can create data-aware Web pages. When you bind a database table to a DHTML table, the page can automatically generate the rows needed to display the data. Moreover, you can create many types of data-aware forms. Figure 46.20 shows an example on Microsoft's Site Builder Network that binds records to text boxes in a Web page form. When the user clicks the arrows, the form automatically displays previous or succeeding records from the database.
FIG. 46.20
Dynamic HTML enables you to create data-aware Web pages.
DHTML is still, as of this writing, in its formative stages. Microsoft updates its Web Developer areas with new information almost daily. To keep up with what's happening with DHTML, you should definitely log onto Microsoft's Site Builder Network often (see Figure 46.21). To do this, point your Web browser to http://www.microsoft.com/sitebuilder/. If you join the Site Builder Network (it's free and takes only a minute or two), you'll have access to lots of valuable files that you can download. Moreover, there are dozens of articles on just about any topic related to Web development, including DHTML and channels.
FIG. 46.21
Microsoft's Site Builder Network is the place to keep up with new Web developments.
© Copyright, Macmillan Computer Publishing. All rights reserved.