line
Using dynamic HTML
line

You can use dynamic HTML by using the samples provided by TopPage. You can create a new Web page that contains dynamic HTML. Or you can insert an element for dynamic HTML into the Web page you are currently editing.

This section contains the following topics:

Related HTML tags <SCRIPT></SCRIPT>
<DIV ID= STYLE= ></DIV>


Vocabulary Vocabulary dynamic HTML

The latest technology for creating animated Web pages. In the past, to create animated Web pages, you had to either create an animation GIF image or write a program in another file. However, dynamic HTML requires only an HTML file.


Note Note Netscape Navigator 4.0, Microsoft Internet Explorer 4.0, or a later version of these browsers can display dynamic HTML. Decide whether to use dynamic HTML, considering the purpose or target readers of your Web pages.



Creating a new Web page that contains dynamic HTML

This method uses templates provided by TopPage. You can view a new Web page with Netscape Navigator 4.0, Microsoft Internet Explorer 4.0, or a later version of them.

  1. Select New from the File menu to open the New dialog box.

  2. Click the Application tab, which contains Web page templates using the latest technology. The Web page titles that begin with <S> use style sheet technology, and those that begin with <D> use dynamic HTML technology.

  3. Select a template beginning with <D>, and click the OK button.

    Application tab

    The Web page you selected opens in the TopPage editor.

    The page opens

  4. Click the Preview tab to check the movement.

    Preview

    Tip Tip Another way to check the movement of the dynamic HTML is to select Save As from the File menu to save all the files composing the Web page and view the page on your Web browser.

  5. To edit the page, click the Normal or HTML Source tab, and edit it, as you do with other Web pages.


Inserting an element for dynamic HTML into the Web page

In this method, you create a layout frame in any position you like, select an effect of dynamic HTML, and enter text within the layout frame, to make animated text. You can also make an animated image the same way.

Vocabulary Vocabulary layout frame

The area where you apply the dynamic HTML effect. Some Web browsers refer to this as a layer.


Vocabulary Vocabulary effect

Such movements as:
  • Fade-in
  • Fade-out
  • Jump
  • Bounce
  • Float
These effects are described in JavaScript.


  1. Click the Insert layout frame icon icon to display the dialog box for creating dynamic HTML.

  2. If necessary, change the position (Left and Top) and size (Width and Height) of the layout frame.

  3. Select the background color from the Color list box. (You can select the background image by clicking the Browse button next to Image.)

    Layout Frame tab

  4. Click the Effect tab, which contains a list of effects of dynamic HTML.

  5. Select one of effects under Effect, and select one of patterns under Pattern:

    Effect tab

    Tip Tip If you select an effect on the Effect tab, and if you click the Sample preview button, you can view the sample image as animated.

    If you select the Repeat check box, you can set it to repeat the same animation. You can also change the speed using the Speed slider.

  6. Click the OK button to close the Layout Frame dialog box and to create a layout frame.

    Colored layout frame

  7. Click the layout frame, and enter text inside it. (Or insert an image instead of text.)

    Layout frame with text

  8. Click the Preview tab to check the movement.

  9. To display the Layout Frame dialog box again for reediting, click the layout frame using the right mouse button, and select Layout Frame Attributes from the pop-up menu.

    Tip Tip If you create multiple layout frames, or if it is difficult to select a layout frame that has a color similar to the background, select Layout Frames List from the View menu to display the following dialog box:

    List of layout frames

    Select the target layout frame from this list, and click the Edit button to display the Layout Frame dialog box of the target layout frame.

    To delete a layout frame, select a layout frame from this list, and click the Delete button. If you delete all the layout frames within a Web page, all the script code for the dynamic HTML is automatically deleted.

Tip Tip Have fun and challenge your creativity!

The advantage of dynamic HTML is that it is flexible. For example, you can create complex movements by creating multiple layout frames and entering different text or images into them. In particular, if you insert an animation GIF image, you can combine both the animation of the image and the effect of dynamic HTML. [Ref.] "Creating animation GIF"