The task of including attractive mathematical equations in web pages need not be difficult. The combination of MathType 5 and FrontPage 2003 makes this process easily achievable. If you are using earlier versions of either MathType or FrontPage, the procedures described in this tutorial may be slightly different from what you will see with these products. We do not cover such differences here, so you may wish to refer to the FrontPage or MathType documentation for more information.

Note: This article will assume you have basic familiarity with FrontPage 2003 and MathType 5 for Windows (which we will simply refer to as "FrontPage" and "MathType", respectively). We recommend reading "Tutorial 15: Creating Web Pages with GIF Files" in the MathType User Manual if you have not already done so. If you do not have basic familiarity with both products, please refer to the appropriate manual, help file, or online tutorial. You must also be familiar with basic Windows features, including placement of applications on the Windows Desktop (minimizing, maximizing, re-sizing, and restoring), the location and purpose of the Windows Taskbar, and dragging objects with the mouse.

This tutorial addresses these topics:

Introduction to FrontPage 2003
A basic method for inserting inline equations into a Web page
Inserting display equations into a Web page
Using "drag-and-drop" to insert equations
Converting all the equations in a Word document to GIFs

Microsoft FrontPage 2003

The method used by FrontPage to display MathType equations is to display the equations as GIF images. You can save the equation as a GIF in MathType, which produces the best quality image and provides the most control over the output, or you can select the equation and drag it from the MathType window and drop it into your FrontPage document. This provides less control over the quality and format of the GIF, but is faster. If you choose the first method, MathType gives you an easy way to take an existing Word document and convert all the equations into GIFs with one command. More on this later in the tutorial.

In this tutorial, we will create a Web page about the roots of a quadratic equation.

A basic method for inserting inline equations into a Web page

An "inline equation" is an equation that flows with the text of a paragraph, and looks and acts like part of the paragraph. By contrast, a "display equation" is an equation which is on a line by itself, usually centered. They are sometimes numbered. In web documents, inserting display equations is easier than inserting inline equations.

The basic method outlined in this section provides an approximate method for inserting inline equations that will provide acceptable results for most equations and most users. The advantage to this method is that it is easier to implement and frees the author from needing to consider which browser will be used to view the equation and from needing to know the baseline offset for each equation. (For a more advanced method of inserting inline equations, see the advanced tutorial. The "more advanced method" will provide a more aesthetically-pleasing result at the expense of a greater investment of your time.)

Begin a new HTML document in FrontPage.
In your new document, type the heading Solving quadratic equations and press Enter. In our sample document, which you'll see in a bit, we've used Heading 2 style for the heading.
Type the subheading Lesson 3: The nature of the roots and press Enter. We've used Heading 3 style for the subheading in our document.
Open MathType in a separate window. You should keep it open throughout your web page creation.
Ensure your settings for Web and GIF Preferences in the MathType Preferences menu are appropriate. Please review "Tutorial 15: Creating Web Pages with GIF Files" in the MathType User Manual if you are unsure of which settings to use. The higher the resolution of your GIF, the larger it will appear on-screen, unless you adjust its height and width. The resolution settings most browsers use are 72 and 96 dpi.

Tip: We recommend using a setting of 96 dpi. Most modern browsers either use this setting as the default, or can be easily set to it. Using 96 dpi gives the best possible cross-browser display at a fixed dpi.
Begin the first paragraph by typing From previous discussions, we know that an equation of the form. (Don't include the period.) Now we're ready to insert the equation.
Create the equation y = ax² + bx + c in MathType. On the MathType File menu, select Save, choose a path and assign a name to the equation, then click Save. Make sure you choose Save as type: Graphics Interchange Format (*.gif), and not EPS or WMF.
In FrontPage, from the Insert menu select PictureFrom File (or click the Insert Picture From File icon: ). When the Picture dialog appears, select the equation you just saved, then click OK. Your page should look like this.
Notice the equation is not vertically aligned with the text, and doesn't look like part of the text. This is not the look you want, but making the adjustment is fairly simple. Also note that we haven't applied any styles to our body text. You may want to do so if you want the text to match the font of your equations.
To adjust the equation downward in your line of text, click on the equation in FrontPage. When you click on an object (a picture, an equation, a chart, etc.), FrontPage displays eight "resizing handles" around the perimeter of the object. When you click on your equation, it should look like this: . From the Format menu, click on Properties. In the Picture Properties dialog, there are three tabs; click on Appearance. Under "Wrapping style", make sure "None" is selected. The first option you see under Layout is labeled Alignment. From the drop-down box, select Absmiddle, then click OK. Your equation should now be aligned with your text, but still may not look quite right when you view it in FrontPage's Design or Split view. It should look better when viewed in FrontPage's Preview mode, or in your browser.
To view the page in your browser, save your changes, then from the File menu, click Preview in Browser (or click the Preview in Browser icon: ). This will open your browser and display the Web page with your latest changes. Your equation should look "normal," like this.

Inserting display equations into a Web page

Inserting display equations is easier than inserting inline equations because of the difficulty involved in properly aligning the baseline of inline equations with the baseline of the surrounding text. This isn't normally an issue with display equations.

To insert a display equation into the sample document:

Let's complete the first sentence and begin the second sentence so that our document looks like this:

From previous discussions, we know that an equation of the form has two roots, but the roots are not always distinct. Take, for example, the equation

Press Enter or Return to begin a new paragraph, then choose center alignment from the FrontPage Formatting toolbar: .
Create the following two-line equation in MathType. (Create both lines in the same MathType object.) Align the equal symbols by selecting Align at = from MathType's Format menu.

display equation

Save this MathType object, and insert it into FrontPage using the procedure you followed above. Your document should look like this.
We'll follow a separate procedure for inserting a numbered display equation, but that is a subject for our Advanced tutorial.

Using drag-and-drop to insert equations

You have learned how to insert equations into your Web page the "normal" way. MathType 5 supports drag-and-drop, which is an easier way to insert your equations, but there are some limitations you should be aware of. This section will help you consider the possibilities of entering equations this way.

Let's back up a few steps to the point where we were ready to insert the first inline equation. Let's insert it with drag-and-drop this time.
Arrange the applications on your Windows Desktop so you can see both FrontPage and MathType simultaneously. There are many arrangements that make this possible, but you may want to leave FrontPage maximized and leave MathType sized to where you can just see the palette buttons, workspace, and status bar.
After you create the equation in MathType, select the entire equation, either by dragging the mouse pointer over it, or by typing Ctrl+A. Now point to any part of the equation (which should now have a black background and white lettering) and drag it over to any part of the FrontPage workspace. Do not release the mouse button yet.

Notice two special characteristics of the drag-and-drop technique. First, a vertical line appears in the text of your Web document once your mouse pointer is over the FrontPage workspace. This vertical line is where your equation will be placed when you release the mouse button. Second, notice the bottom right of the mouse cursor. There is a white box with a shaded outline, and below and to the right of that is another box with a solid outline and a '+' symbol in it. This is the "copy cursor." Whenever you see this cursor, it indicates the object or text you are dragging will be copied to the location indicated by the vertical line. Play around with this feature, dropping the equation in several places in your document until you get the hang of it.
What if you can't see the portion of your text where you want to drop the equation? You can still use drag-and-drop, but you don't drag the equation directly to the FrontPage workspace. Instead, drag the equation to the Front Page button on the Taskbar: . Do not release the mouse button.
If you wait about a second, Windows will restore FrontPage as the active application. You can then find the place in your text where you want the equation to go, and drop it there. Be sure to keep the mouse button depressed until you are ready to drop your equation at the proper location in your document.

There are, as mentioned earlier, several limitations to drag-and-drop that you should consider before using this method to enter equations into your Web page:

When you use the drag-and-drop feature, the process that takes place is identical to a normal copy-and-paste operation. Hence, the Windows clipboard is used. When MathType puts an equation onto the clipboard, the equation is in the Windows Metafile (WMF) format. This graphic is then accessible to any application that can accept the WMF format, such as FrontPage. When you drop the equation into your FrontPage document, FrontPage converts the WMF into a GIF. It also gives it a temporary name that you will have the opportunity to change when you save your Web page. Many times this process will prove satisfactory to you, and many times it will not. Below are some instances when it most likely will not.
If you have selected advanced GIF formatting features in MathType, these features will not be preserved when using drag-and-drop. Such features include resolution setting, background color, anti-aliasing, and placing the HTML tag onto the clipboard. FrontPage does not provide a means for the user to control its conversion of WMFs to GIFs like MathType does.

If you use drag-and-drop, and have chosen a translator in the MathType Translators dialog on the Preferences menu, your equation will be inserted into your Web page after applying the translation you have chosen. For example, if your current setting is to copy equations to the clipboard as Plain TeX and you tried to insert the above inline equation with drag-and-drop, you would get:

$y = ax^2 + bx + c$

Make sure your Translators dialog in the MathType Preferences menu specifies "Equation object" before using drag-and-drop with FrontPage.

Converting all the equations in a Word document to GIFs

If you have an existing document in Microsoft Word that you are planning to put on the Web, one thing you should consider is using the Export to MathPage feature in MathType 5. If you have chosen to prepare your Web page with FrontPage, there is another option that will save you some time. By using the Export Equations feature in Word's MathType menu, you can convert all the equations in your Word document into GIFs for use in your Web page. Refer to Tutorial 18 in your MathType 5 manual for full instructions.

By completing the first three sections in this tutorial, you have learned how to insert both inline equations and display equations. If you choose to move on to the Advanced tutorial, you will complete the sample document there. The Advanced tutorial is titled Advanced Techniques for Authoring Web Pages with MathType and FrontPage, and covers two topics: an advanced method for inserting inline equations into a web page, and inserting numbered display equations.

We hope this tutorial has been useful to you. If you would like to see similar tutorials in the future, or have suggestions for improving this tutorial, please e-mail our Director of Training,
Bob Mathews.

- top of page -