By: Justine Brown

Applies to
Microsoft Office FrontPage® 2003

In the early 1990s, Web sites were simple. Basic HTML allowed programmers to design sites that relayed basic information to Internet users but that could do little else.

Today, Web sites are often sophisticated and complex. Rather than a static place to present information, Web sites frequently act like business partners, performing complex tasks that can help run and even improve a business or personal endeavor.

To take full advantage of a Web site and truly make it work for you, you need professional coding tools. Microsoft Office FrontPage 2003 provides several new, powerful coding tools that will help you to create dynamic, interactive sites that can do more for you.

FrontPage 2003 coding tools can help you to generate clean, efficient code, while also giving you more control over the code. These tools can also help you to increase and apply your knowledge of coding languages.

This article will introduce you to the FrontPage 2003 coding tools and show you how you can use them to code faster and more accurately.

Enhance interactivity with Behaviors

FrontPage 2003 Behaviors are scripting options that enable you to quickly add interactivity or increased functionality to text or other elements of your Web page. Use Behaviors to author client-side scripts in languages that comply with the ECMAScript specification, such as JScript® and JavaScript. The ECMAScript language specification was defined by ECMA International (formerly, the European Computer Manufacturers Association).

Behaviors provide built-in scripting, increasing functionality and allowing you to author in JScript or JavaScript without writing any code. FrontPage 2003 Behaviors help you to build drop-down menus, create rollover effects, set status bar messages, create pop-up windows, and redirect users with a few easy steps.

To use Behaviors

1. On the Format menu, click Behaviors.
2. In the Behaviors task pane, click Insert.
3. Select the desired functionality. For example, if you want to redirect a user to another page, select Go to URL.
4. Then in the dialog box that opens, follow the instructions provided for the functionality you selected. For instance, in the Go to URL dialog box, type the URL for the page you want to redirect to, or use the Browse button to select the page.

   Note  FrontPage 2003 creates the redirect script and inserts it into your page.

Insert frequently used code

Another new feature in FrontPage 2003 enables you to save and easily reuse code snippets using the code snippet library.

Code snippets are fragments of code or text that you can add to Web pages and reuse many times. Code snippets can be anything that you can insert in Code view—such as HTML, cascading style sheets, and client-side scripts in languages that comply with the ECMAScript specification.

For example, if you have created a table and you want to use the same TABLE and TD tags for a simple sidebar, you can copy those tags and reuse them using code snippets.

To create a code snippet

1. Select the code that you would like to use as a code snippet, and press CTRL+C to copy the code to the Clipboard.
2. On the Tools menu, click Page Options, click the Code Snippets tab, and then click Add
3. In the Keyword box, type the keyword to associate with the code snippet.
4. In the Description box, type a friendly name for the code snippet.
5. In the Text box, paste the content of your code snippet by pressing CTRL+V.

To insert the code snippet

1. In Code view, place the cursor where you want the code snippet to appear and press CTRL+ENTER.
2. Scroll down the list to the code snippet you want, and then press ENTER.

Create and update sites more quickly

With the new Split view, you can see the Design and Code views simultaneously. You can create and update sites more quickly by using Split view.

When you edit your Web page in the Design window in Split view, the code updates automatically in Code view. This is a great way to monitor the code as you go. When editing directly in Code view, you can update Design view by pressing F5 to incorporate changes made to the code.

Split view is also useful as a learning tool because you can work in Design view and see the code as it updates automatically in Code view. This can help beginners to learn HTML or show advanced programmers what needs to be customized or cleaned up.

To see Code view and Design view at the same time, at the bottom of the document window, click Split.

Select and edit tags

The Quick Tag Selector and Quick Tag Editor can help you to select, edit, and manipulate tags. The Quick Tag Selector helps you to select individual elements, while the Quick Tag Editor helps you to create and alter tags.

The Quick Tag Selector is a toolbar located at the top of the document window that makes it easy for you to select tags and attributes (see Figure 1). If the toolbar isn’t showing, from the View menu, select Quick Tag Selector.

Figure 1: Detail view of the Quick Tag Selector toolbar and drop-down menu.

From the Quick Tag Selector toolbar, you can click a tag to highlight the associated elements and then switch to Code view to see the highlighted code.

After you have selected a tag or attribute, you can use the Quick Tag Editor to edit the text and the tags, wrap it in a new tag, insert new HTML, or remove a tag (see Figure 2).

Figure 2: The Quick Tag Editor.

To select and edit a tag by using the Quick Tag Selector and Quick Tag Editor

1. Click the element on the page that you want to edit.
2. On the Quick Tag Selector toolbar, point to the selector for the tag that you want, and then click the arrow next to that selector.
3. Click Edit Tag.
4. In the Quick Tag Editor, make your edits, and then click the green check mark to accept changes and close the editor.

Reduce errors

FrontPage 2003 incorporates IntelliSense® technology, one of many coding features using the Microsoft Visual Studio® development system coding engine. IntelliSense can help you to reduce errors in writing code.

IntelliSense provides auto-completion of commands as well as context-sensitive lists that contain code and scripting elements. IntelliSense prompts you with options as you type. It also shows the parameters available for the code you are writing, just like Visual Studio does.

It is available not just for HTML but also for cascading style sheets, Extensible Stylesheet Language (XSL), JScript, JavaScript, Visual Basic® Scripting Edition (VBScript), and ASP.NET, all of which can be edited directly in FrontPage 2003. IntelliSense also handles snippets of code that you regularly use.

To complete HTML tags and attributes automatically

1. Make sure IntelliSense is on. On the Tools menu, click Page Options, and then click the IntelliSense tab.
2. Under Auto Popup, specify that you want FrontPage to display a list of HTML tags or attributes.
3. In Page view at the bottom of the document window, click Code.
4. Place your cursor wherever you want the code and type <. A context sensitive list will appear.
5. Select the desired element, and press ENTER. Your selection will be filled in automatically.
6. To add an attribute, press the SPACEBAR key, then make your selection from the list, and press ENTER.
7. To complete the tag once you’ve added the desired attributes, type >.

Clean up your html

There are two ways that FrontPage 2003 helps you to clean up your HTML when you publish.

The first way to do this is use the Optimize HTML command on the Tools menu. This triggers FrontPage 2003 to automatically clean up your code, remove white space, and clean up nonessentials tags, comments, vector graphics, and HTML created in other programs.

You also can clean up the remote version of your site when you publish.

To optimize published HTML

1. In Remote Web Site view, click Optimize Remote HTML.
2. In the Remote Web Site Properties box, on the Optimize HTML tab, and select or clear the options you want.
3. To optimize your site each time it is published, click Set as Default.

Modify your text files

You now can modify text files directly within the FrontPage 2003 editor. This will allow you to use all the new code editing features available in FrontPage 2003 without switching to a different editor.

To set FrontPage 2003 as your default editor for .txt files

1. On the File menu, click Open.
2. In the Open File dialog box, in the Files of Type box, use the drop-down menu to display desired file types.

Get Started!

Now that you have been introduced to some of the powerful coding tools featured in FrontPage 2003, it is time to get started. You will find that you have a lot more flexibility for building a better Web site or improving the one you already have. And knowing how to use these tools means you’ll be able to edit your code quickly, easily, and accurately.

About the author

Justine Brown is a media relations representative for a California-based education company. She was previously editor of Government Technology magazine.