July 2002

By Mark Gibbs

Applies to
Microsoft FrontPage® 2002

Ever seen something cool on the Web and wanted to use it on your own business Web site? We'll show you how to find out how that cool thing is done and how to build it into your content.

As a small business owner, you'll probably decide to have a professional Web designer create your Web site to ensure that you get a professional look and feel established. But when it comes to maintaining your site, you might want to bring that function in-house to save money and ensure the fastest possible response. If your Web site design has been implemented using Microsoft FrontPage 2002, taking over maintenance of a professionally designed site will be straightforward.

While FrontPage will help you keep your site looking good without you having to know much about how Web pages are built, to get that extra layer of gloss to the presentation you'll have to start delving the depths of Web coding. In other words, you'll have to look "under the hood."

FrontPage makes it possible to go directly to the underlying code of a Web page so that you can see what's happening and "tweak" your content through the HTML pane, which lets you see how Web pages are constructed and allows you to add or change the coding.

In this column we'll show you how, using FrontPage 2002, you can take your first steps to understanding Web page coding in addition to running a business (and we guarantee that the Web pages will be the easier of the two!).

What is the HTML pane?

As we just noted, the HTML pane is an option in FrontPage 2002 that lets you examine and edit the underlying code of a Web page. Let's try it out!

First, load a Web page. We'll use one that you can find on the Internet: My own Web site. In FrontPage 2002, click Open on the File menu. In the dialog that appears, enter http://www.gibbs.com/ and click Open. The home page will appear in FrontPage as shown here.

The pane that you're looking at is the Normal pane (the buttons at the bottom of the page are used to select the pane). When you're in the Normal pane, you're in WYSIWYG ("what you see is what you get") editing mode, and, if you click on the Preview button, you'll find that you can't edit the page but you can see what the page looks like in Microsoft Internet Explorer.

But what we're really interested in is the middle button, the HTML button. When you click this button, you can see and edit the HTML that creates the page (as shown below). And yes, it is complicated! Over and above the complexities of HTML may be additional code that instructs the FrontPage Server Extensions code that is running on the server to create the more sophisticated services such as Web components, scripting, and Java applets.

Now, be careful here. If you're working with what is the only copy of a Web page on your server and you change the HTML code you're looking at, you need to know what you're doing—take out or add in the wrong code in the right place (or vice versa), and the page will be incorrectly rendered in any of a thousand interesting ways that could take you hours to sort out!

What you can learn from other sites

So, you have my Web site's home page loaded. If you toggle over to the Preview pane, you'll notice that I use a cool cursor with a sparkling trail (a neat JavaScript script written by kurt.grigg@virgin.net—thanks, Kurt). You might have seen this kind of technique used on other sites and thought, "Neat! I want that on my site!" (Then again, you may not...but work with me on this one.) Anyway, whichever your reaction was, here's how you can use that feature.

If you click the HTML button, you can see how the cursor trail is done—it is that chunk of code between the HTML tags <script> and </script> that follow immediately after the <body...> tag. (This is a good script, as it runs in any browser with a version number of 4 or greater—which covers the majority of users.)

You can use this code on your Web site by highlighting the script, including the <script>...</script> tags, and then copying and pasting it into your own Web page in the HTML pane.

You can use this method on more or less any Web page that you like the look of (you can copy the entire page or just a section) or that contains a feature (like the cursor trail) that you'd like to use.

BE WARNED! Some companies will have clear statements of their copyright in the text, scripts, applets, and page layout. DO NOT ignore those copyrights—you could face legal action, particularly if you use the "found" code in a commercial context. I suggest that you always contact the site's Web master before using anything from their Web site unless it specifically says that you can do so.

How to use "found" bits

When you find a useful bit of code, make sure that you understand its context. If it is a script, it will be in a section that identifies it as such, and if the code is an applet, it will be surrounded by applet tags (<applet>...</applet>). But watch out for content that is inside tags you don't understand the purpose of—using code like this could "break" your Web site.

This leads me to the topic of testing. Make sure that your Web page works correctly after adding "found" code to it. Click Preview and, if that looks OK, then save your newly modified page to the server and, in the best belt-and-braces style, load the page in a Web browser and make sure it still works.

Let's summarize

• Do check out how other people code their Web sites—just load their pages into FrontPage and switch to the HTML pane.
• Do "borrow" content that looks useful (but see the Don'ts below).
• Do test your modified site at least twice (once in the Preview pane and once by loading the modified pages that you save to your Web server into your browser).

On the other hand:

• Don't violate other people's copyright.
• Don't use code you don't understand.
• Don't modify the only copy of a page!
• And last but not least, don't be afraid to experiment!

Happy coding!

---

For over 20 years, Mark Gibbs has developed technical and service operations, consulted, lectured, and authored articles and books about PCs and networking. His areas of expertise include Internet and intranet technology, Web design and technology, electronic commerce, technology analysis, strategic planning, collateral development, and high-tech marketing.

---