Application Note

Advanced Techniques for Authoring Web Pages with MathType and Dreamweaver

This AppNote is part two in a two-part series in using MathType with Dreamweaver to create technical web documents. If you haven't yet worked through the first AppNote (also known as the Basic AppNote), we recommend you do so before you continue with these advanced techniques.

In the first AppNote, you learned how to insert equations into a Dreamweaver web document, after you first created the equations in MathType and saved them as GIFs. If you are interested in using Dreamweaver to author technical web documents with MathML equations, you'll want to read our other Application Note, Authoring Web Pages with MathML and Dreamweaver.

This AppNote addresses these topics:

1. Inserting numbered display equations
2. An advanced method for inserting inline equations into a web page

Inserting numbered display equations

You don't necessarily need to number every display equation in your document, but if you need to refer to a display equation in your document's text, the best way to do it is to number the equation. The easiest way to include a numbered display equation into your document is to insert a 1 row, 3 column table. We'll go through the steps below to do this, but be aware of the fact that there may be a better way to do it if enhancing accessibility is an issue. Using tables results in a page that is readable by screen-reading software such as JAWS, but is a bit cumbersome for screen readers to navigate, and difficult to listen to. Using CSS to properly position the equation and its corresponding number may be better, accessibility-wise, but we don't cover that method here. If you're interested, we cover that method in our AppNote for using MathML with Dreamweaver.

To insert a numbered display equation using a table:

1. If you completed the Basic AppNote, your document should look like this (opens in separate window or tab). If you haven't completed the Basic AppNote, either create the document as a new document in Dreamweaver, or save the document linked in the previous sentence, and begin working with that document for the steps below.
2. After the display equation at the end of the document, press Enter or Return to begin a new paragraph. Type the following two paragraphs of text:

We can see that x = –2 when y = 0. This occurs twice, so we call it a double root. It is a single distinct result, but still considered as two roots.

What happens when the equation will not factor over the set of real numbers? Consider

3. Your insertion point (i.e., cursor) should be immediately after the word Consider.
4. From Dreamweaver's Insert menu, click on Table. In the Table dialog, dimension your table so that it has 1 row and 3 columns. Set the Table width to 100 percent, and the Border thickness to 0 pixels. Leave the other options at their default values, as shown here, and click OK:

5. Click in the left-most cell of the table. (Hereafter, we'll refer to the cells as cell 1, cell 2, and cell 3, from left to right.) In the bottom half of the Properties panel group, you can adjust the table settings. (You don't have to do this for every display equation -- only the first one. Just follow the steps carefully.)
   • We don't want to change anything for cell 1 except width. Click in the box marked W and type in 10%.
   • Click in cell 2. In the Properties panel group, set Horiz to Center and Vert to Bottom. Click in the box marked W and type 80%.
   • Click in cell 3, and make sure the cursor is flashing in cell 3. (Depending on where you click, it may still be flashing in cell 2. If that's the case, click again in cell 3.) In the Properties panel group, set Horiz to Right and Vert to Bottom. Click in the box marked W and type 10%. Press Enter or Return to accept these values.

6. Now we need to save our empty 3-cell table as a Dreamweaver snippet, so we can insert it easily and already-formatted next time.
    

   On the Dreamweaver Tag selector, click on <table>.
   In the Code panel group, make sure the Snippets tab is showing. Click on the New Snippet icon. (Note: In Dreamweaver 8 and Dreamweaver CS3, this is located in the Files panel group.
   The Snippet dialog appears, with the HTML code for the table shown in the Insert before section. Name your snippet something descriptive -- Numbered Equation would be good. You can leave Description blank, but check the Insert block radio button. Click OK.

7. In the table we inserted in step 3 above, click in the middle cell and insert the equation
   y = x² + 9. (Create it in MathType, save it as a GIF, and insert it into the table as before.) Click in the right cell and enter the number -- (1) in this case.
8. To continue with the text of your document, simply click in the white space below the table and continue typing.
9. For the next numbered display equation you need to insert, all you need to do is to go to the Snippet tab on the Code panel group, find the snippet you just saved, and either double-click it (Windows) or drag it to where you want it in your document (Windows or Macintosh).

Tip: You're probably not going to number an equation unless you need to refer to it in the text of the web page. In such a reference, why not use Dreamweaver to assign a named anchor to the equation number (or to the equation itself), then hyperlink the reference to the anchor? This gives your reader a convenient way to see the equation you're referring to, even if it's a screen or two away. The easiest way to insert a named anchor is to click on the Named Anchor icon in the Common category of Dreamweaver's Insert bar.

An advanced method for inserting inline equations into a web page

This method takes advantage of Dreamweaver's support for Cascading Style Sheets, level 2 (CSS2). If you use this method, it is important to realize that not all browsers support CSS2. Netscape 6.0 and later (including Mozilla, Firefox, SeaMonkey, and Camino), Internet Explorer 4.0 and later, Safari 1.0 and later, Opera 5.0 and later, and AOL 4.0 and later all support CSS2. Earlier versions of these browsers do not support CSS2. Browsers not listed may or may not support it. If you use this method and your pages are viewed with a web browser that does not support CSS2, your equations will be shown on the web page, but will not be adjusted vertically at all.

Warning: You may mix the basic and advanced methods for inserting inline equations in the same document, but you should not employ both of these methods on the same equation, as the results will be unpredictable and will vary by browser.

1. If you completed the above section on inserting numbered display equations, and have not clicked below the table, do so now. Type this text: From equation (1) it is clear that when. (Do not include the period.)
2. Create this equation in MathType, but do not insert it in your document yet:
3. In MathType's Preferences menu, click on Web and GIF Preferences.
4. In Web and GIF Preferences, we recommend for now keeping the Bitmap resolution at 96 dpi (this is discussed in the Basic AppNote), Color at its default setting, and Smooth edges (anti-aliasing) and Transparent unchecked. (See the MathType documentation for additional information about these settings.)
5. The section of this dialog that is most important to us at this point is the bottom section. Click the checkbox next to Copy HTML/text to clipboard on GIF file save.
6. Remember, our example file is named example.htm, and our GIFs are saved in a folder titled example_files. With that in mind, change the Text to copy: to read thus (changed item in red):

<img src=example_files/$(URLFileName) height=
$(HEIGHT_PX) width=$(Width_PX)>

Warning: It's important that you maintain the correct relative path in the <img> tag, otherwise your equations won't display in your web page. For your files, replace example_files/ with the name and path to the folder containing your equations.

7. With the cursor just inside the closing bracket [and after (Width_PX)], press the spacebar and type this text: style="position:relative; top. Press the spacebar and click on > to the right of Paste Variable.
8. You'll see a long list of items that can be inserted into the <img> tag, and in the last section you'll see several items beginning with the words Baseline in... Click on Baseline in points.
9. Type pt after the close parentheses.
10. Finally, insert a double quote mark immediately before the closing bracket, which should be where your insertion point is after step 9.
11. Your Web and GIF Preferences dialog now looks like this:

12. In the MathType File menu, save your equation, making sure to save it as a GIF. When you save the equation, the block of text in your "Text to copy" box (above) is placed onto the clipboard, ready to be pasted into your document.
13. To insert the new equation into your document, click at the point in the Code view where you want your equation to be, and paste the contents of the clipboard (Ctrl+V on Windows or Command-V on Mac). If you are using Dreamweaver MX 2004, you can paste the equation into Design view. If you are using Dreamweaver 8 or Dreamweaver CS3, you must paste into Code view (or into the Code section of Split view). Pasting the equation into Design view in either of these versions will paste the equation, but will leave off the vertical positioning information.
14. Save the file and view it in your browser. It should look like this (opens in new window or tab).

See if you can complete the sample document so that it looks exactly like this (opens in new window or tab). Since the first inline equation was aligned with absmiddle alignment, you may want to go back and align it with relative positioning as described in this article.

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