Application Note

Authoring Web Pages with MathType and Microsoft Expression Web

The task of including attractive mathematical equations in web pages need not be difficult. The combination of MathType and Microsoft Expression Web makes this process easily achievable. If you are using earlier versions of either MathType or Expression Web (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 Expression Web or MathType documentation for more information.

Note: This article will assume you have basic familiarity with Expression Web and MathType for Windows. We recommend reading the tutorial "Creating Web Pages with GIF Files" in the MathType documentation 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:

1. Introduction to Expression Web
2. A basic method for inserting inline equations into a web page
3. Inserting display equations into a web page
4. Using "drag-and-drop" to insert equations
5. Converting all the equations in a Word document to GIFs

Microsoft Expression Web

The method used by Expression Web 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 Expression Web 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.

Figure 1
The Expression Web window (click for a larger shot)

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. This method will provide a more aesthetically-pleasing result at the expense of a greater investment of your time.)

1. Begin a new HTML document in Expression Web.
2. 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.
3. 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.
4. Open MathType in a separate window. You should keep it open throughout your web page creation. (If you typically use MathType from within Microsoft Word or PowerPoint, you may not be familiar with opening MathType as a separate application. If you're using Windows XP, simply click on Start > All Programs > MathType > MathType. Instructions for other operating systems are similar.)
5. Ensure your settings for Web and GIF Preferences in the MathType Preferences menu are appropriate. Please refer to the MathType documentation 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 monitors use are 72 or 96 dpi.
   
   Tip: We recommend using a setting of 96 dpi. Most modern monitors either use this setting as the default, or can be easily set to it. Using 96 dpi gives the best possible display at a fixed dpi.
    
6. Begin the first paragraph by typing From previous discussions, we know that an equation of the form . (Don't include the period, but do include the blank space.) Now we're ready to insert the equation.
7. 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.
8. In Expression Web, 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.
9. 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.
10. To adjust the equation downward in your line of text, click on the equation in Expression Web. When you click on an object (a picture, an equation, a chart, etc.), Expression Web displays three "resizing handles" around the perimeter of the object. When you click on your equation, it should look like this:

In the Format menu, click on Properties. In the Picture Properties dialog, there are two 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 Middle, then click OK. Your equation should now be aligned with your text better than it was, but still may not look quite right when you view it in Expression Web's Design or Split view. It should look better when viewed in your browser.

11. To view the page in your browser, save your changes, then from the File menu, make a choice from the Preview in Browser flyout menu (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:

1. 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

2. Press Enter or Return to begin a new paragraph, then choose center alignment from the Expression Web Common or Formatting toolbars: .
3. 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.

4. Save this MathType object and insert it into Expression Web using the procedure you followed in step 7 above. Your document should look like this.
5. 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 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.

1. 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.
2. Arrange the applications on your Windows Desktop so you can see both Expression Web and MathType simultaneously. There are many arrangements that make this possible, but you may want to leave Expression Web maximized and leave MathType sized to where you can just see the palette buttons, workspace, and status bar.
3. 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 Expression Web workspace. Do not release the mouse button yet.

4. 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 Expression Web 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.
5. 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 Expression Web workspace. Instead, drag the equation to the Expression Web button on the Taskbar: . Do not release the mouse button yet. (Notice the taskbar button doesn't say "Expression Web". It instead shows the title of the current document.)
6. If you wait about a second, Windows will restore Expression Web 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.

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

1. When you use the drag-and-drop feature, the process that takes place is similar 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 Expression Web. When you drop the equation into your Expression Web document, Expression Web 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.
2. 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. Expression Web does not provide a means for the user to control its conversion of WMFs to GIFs like MathType does. (There is a more detailed, technical reason as to why this is so, but this is good enough for now.)

3. 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 Expression Web.

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 MathType's Export to MathPage feature. If you have chosen to prepare your web page with Expression Web, there is another option that will save you some time. By using Export Equations in Word's MathType menu, you can convert all the equations in your Word document into GIFs for use in your web page. (If you're using Word 2007, this command is in the Publish group on the MathType tab.) This is an option that may save you some time. Refer to the MathType documentation 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 Expression Web, 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.