TopStyle Tutorial 3

Setting Up the Preview Page

Next, you will set up the Sample.html file as a preview page for TopStyle. By default, TopStyle generates its own preview page based on the styles you have defined. But you can also specify your own preview page to see how the styles will look in in a specific HTML file.

Click the toolbutton shown to the left in the Preview toolbar at the bottom of the TopStyle window (or choose Preview-->Select Preview File from the Menus). In the dialog, browse again to find the file Sample.html in TopStyle's help\Tutorial\Samples folder and click Open. You will now see the Sample.html page appear in the TopStyle preview window, which appears below the editing window.

At this point, you will see the sample file as it is rendered without any style properties applied. As you add properties to the style sheet, you will see their effects in the preview. At any point, you can return to the view with styles by clicking the icon shown to the left of this paragraph (on the Preview toolbar, beside the Select Preview File icon).