MathType works with  Dreamweaver 

When writing technical documents for the web, one of the primary considerations is how to represent the formulas or equations. MathType makes it very easy to do this, letting you construct the equation visually and intuitively, then saving it as an image file (GIF). If your choice of web page editors is Adobe Dreamweaver (formerly Macromedia Dreamweaver), it's easy to include such image-based formulas in your web page, resulting in a professional-looking final product.

This article will assume you have basic familiarity with Dreamweaver and MathType. We further assume you are working with Dreamweaver version 7.0 or later (also called Dreamweaver MX 2004) and MathType 5.0 or later. We will refer to these products as simply Dreamweaver and MathType, respectively. If you do not have basic familiarity with both products, please refer to the appropriate documentation. You must also be familiar with basic operating system features, including placement of applications on the Desktop (minimizing, maximizing, re-sizing, and restoring), the location and use of the Windows Taskbar or the Macintosh Dock, and dragging objects with the mouse. Procedures outlined in this document apply equally to Windows and Macintosh operating systems.

This article addresses these topics:

1. MathML and Dreamweaver
2. Introduction to Dreamweaver
3. A basic method for inserting inline equations into a web page
4. Inserting display equations into a web page
5. Converting all the equations in a Word document to GIFs

MathML and Dreamweaver

This article describes how to use images to present equations in a web page. However, there is an alternative: a markup language dubbed MathML. Recognizing the need early on to integrate math into web browsers, the Worldwide Web Consortium (W3C) defined the initial MathML specification in 1998. In 2001, a new version of MathML was recommended, and as of this writing yet another revision is underway. The advantages of using MathML are numerous, including:

• Better rendering quality and print resolution
• Better fit with rest of page (including fonts and colors)
• Better alignment with the rest of the page
• Searchability
• Reusability

If you would like to know how to incorporate MathML into web pages that you create with Dreamweaver, please review our article MathType Works With Dreamweaver and MathML.

Introduction to Dreamweaver

As we already mentioned, the method of displaying MathType equations that we discuss in this article is to display them as GIF images. MathType also 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 article.

Let's create a web page about the roots of a quadratic equation. The screen shots in this article will reflect the appearance of the Windows versions of the products. The Macintosh versions are similar in appearance and capability.

Dreamweaver MX 2004. Dreamweaver versions 8 and later look similar.
(Click for larger image. Use your browser's Back button to return here.)

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 inline ones.

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. We outline a more advanced method of inserting inline equations in the Advanced article (see below). The advanced method will provide a more aesthetically-pleasing result at the expense of a greater investment of your time.

To insert an inline equation:

1. Begin a new HTML document in Dreamweaver.
2. In your new document, type the heading Solving quadratic equations and press Enter (Macintosh: Return). In our sample document, which you'll see in a bit, we've used Heading 2 format for the heading.
3. Type the subheading Lesson 3: The nature of the roots and press Enter or Return. We've used Heading 3 format for the subheading in our document.
4. Open MathType in a separate window. You should keep it open throughout your web page creation.
5. Ensure your settings for Web and GIF Preferences in the MathType Preferences menu are appropriate. If you are unsure of which settings to use, please review "Creating Web Pages with GIF Files" in the MathType documentation. 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.
    
6. Begin the first paragraph by typing From previous discussions, we know an equation of the form. (Don't include the period.) 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, WMF (Win), or PICT (Mac).

Tip: We recommend saving all the GIFs in a folder of their own, and locating this folder in the same location as the file you're creating. For example, our file is called example.htm, and it is located in a folder called algebra. I have other web pages in the algebra folder, and I want to keep the example.htm GIFs separate from the GIFs of the other files, so I'll save these GIFs in a folder titled example_files. The remainder of this article and the Advanced article that follows assume this file arrangement.

9. In the Common category of Dreamweaver's Insert bar, click the Images icon . When the Select Image Source dialog appears, select the equation you just saved, then click OK.
   
   Note: There are at least seven different methods of inserting an image into a web page with Dreamweaver. We discuss only one method here, one method in the Advanced article, and leave the remaining methods for you to explore on your own.
    
10. If you save your page and view it in a browser, it should look like this (opens in new window or tab).
11. 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.
12. To adjust the equation downward in your line of text, click once on the equation in Dreamweaver. When you click on an object (a picture, an equation, a chart, etc.), Dreamweaver displays three "resize handles" around the perimeter of the object. When you click on your equation, it should look like this: . In the bottom row of the Properties panel group, select Absolute Middle from the Align drop-down.
13. Your equation should look more normal now -- like this (opens in new window or tab).

Inserting display equations into a web page

Inserting a display equation is easier than inserting an inline equation 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 Properties panel group.
3. Create the following two lines 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 Dreamweaver using the procedure you followed above. Your document should look like this (opens in new window or tab).
5. We'll follow a separate procedure for inserting a numbered display equation, but that is a subject for our Advanced article.

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. If you prefer to use a web page editor such as Dreamweaver to author your web pages, consider using one of MathType's other unique features. 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 two sections in this article, you have learned how to insert both inline equations and display equations. If you choose to move on to the Advanced article, you will complete the sample document there. The Advanced article is titled Advanced Techniques for Authoring Web Pages with MathType and Dreamweaver, and covers two topics: an advanced method for inserting inline equations into a web page, and inserting numbered display equations.

If you have experience with Dreamweaver and have specific tips about how best to use MathType to work with it, we would love to hear from you. Please send questions, comments and suggestions to interop@dessci.com.