<p><font face="Courier New"><a name="1"><font color="#FF8000"><font size=4><strong><u>What is the <font face="Courier New"></font></u></strong></font></font><font color="#800080"><font size=4><strong><u>Preview Browser?</font></u></strong></font></font></a> </p>
<p><font face="Arial">The <strong>Preview Browser</strong> is just like your Microsoft Internet Explorer browser, except that instead of using it to explore
the Internet World Wide Web, you can use it to preview how your own HTML documents will appear with the Style
Sheet you created in StyleMaker.</font> </p>
<p><font face="Arial">This allows you to know exactly how your homepage will look as you create a style, before you publish it on the
Internet.</font> </p>
<p><font face="Arial">To use it, simply load a homepage from disk, and press <img src="refresh.gif" align=bottom hspace=4 width=13 height=16>(refresh button) whenever the background of the button
turns red, or whenever you wish to see how your page looks.You can make StyleMaker refresh the page whenever
<p><font face="Arial">This enables you to preview your homepage through the preview browser while you create, modify and tweak your
Style Sheet.</font> </p>
<p><font face="Arial">To load a homepage from disk, press <img src="open.gif" align=bottom hspace=4 width=16 height=13>and you will be shown a dialog for you to select a HTML file.</font> </p>
<p><font face="Arial"> </font> </p>
<p><font face="Arial"> </font> </p>
<p><font face="Courier New"><a name="3"><font color="#800080"><font size=4><strong><u>Saving<font face="Courier New"></font></u></strong></font></font><font size=4><strong><u> <font face="Courier New"></font></u></strong></font><font color="#FF8000"><font size=4><strong><u>a Homepage with a Style</font></u></strong></font></font></a> </p>
<p><font face="Arial">This function will insert the Style Sheet into the correct position in the homepage currently loaded in the Preview
Browser.</font> </p>
<p><font face="Arial">To save your homepage with the current style, press <img src="save.gif" align=bottom hspace=4 width=14 height=14>above the </font><font face="Arial"><a href="#1"><strong>Preview Browser</strong>.</font><font face="Arial"></a> Please note
that you will not be notified that your page has been saved. To save the current Style to a different page or number of
pages, use the </font><font face="Arial"><a href="#4"><strong>Apply To</font><font face="Arial"></strong></a><strong> </strong>function.</font> </p>
<p><font face="Arial"> </font> </p>
<p><font face="Arial"> </font> </p>
<p><font face="Courier New"><a name="4"><font color="#800080"><font size=4><strong><u>Applying/Adding<font face="Courier New"></font></u></strong></font></font><font size=4><strong><u> <font face="Courier New"></font></u></strong></font><font color="#FF8000"><font size=4><strong><u>a Style Sheet to a number of HTML documents (Apply
To)</font></u></strong></font></font></a> </p>
<p><font face="Arial">This function allows you to insert the current style sheet into any number of <strong>HTML documents</strong> on disk.</font> </p>
<p><font face="Arial">To use this function, press <img src="apply.gif" align=bottom hspace=4 width=15 height=17>above the </font><font face="Arial"><a href="#1">Preview Browser</font><font face="Arial"></a>, and a dialog box will appear (Apply To).
Users of Danere ColorMaker will be familiar with this dialog. Simply select the files (.htm, .html) from the left window, and
press the <strong>Add</strong> button, which will add it to the list. If you wish to add all HTML files from a particular dicrectory, use the
<strong>Add All</strong> button.</font> </p>
<p><font face="Arial">Use the <strong>Remove</strong> button if you wish to remove a file from the list. Use <strong>Remove All</strong> to remove all files from the list.
</font> </p>
<p><font face="Arial">Once you have made your file selection, press the <strong>OK</strong> button.</font> </p>
<p><font face="Arial">This function (not visible in resolutions of 640x480 or lower) allows you to view the contents of the StyleMaker
temporary file (tempdsm.htm) which contains your homepage (from the Preview Browser) with the Style Sheet source
included.</font> </p>
<p><font face="Arial">Press <img src="notepad.gif" align=bottom hspace=4 width=13 height=16>to view the contents of this file with Notepad.</font> </p>
<p><font face="Arial"><strong>NOTE:</strong> Modifying and saving 'tempdsm.htm' within Notepad has no effect, as it is just overwritten when the
<p><font face="Arial">This checkbox, located on the far right hand side of the screen (not visible in resolutions of 640x480 or lower), forces
StyleMaker to <strong>refresh</strong> to current homepage loaded in the </font><font face="Arial"><a href="#1">Preview Browser </font><font face="Arial"></a>whenever you modify an
Item's properties.</font> </p>
<p><font face="Arial">For example, if you were to change the foreground color of an Item, then StyleMaker would <strong>automatically</strong> refresh
(reload) the current page with the new foreground color.</font> </p>
<p><font face="Arial"><font color="#000000"><strong>Style Sheets</strong> are basically a set of definitions inserted (or linked externally) into your web page that control the
presentation of its content. Its primary advantage is that repetition of such tags as <FONT>, <STRONG>, and
<ADDRESS> is not necessary. The style of your web page's content will totally rely on what you define in your style
sheet.</font></font> </p>
<p><font face="Arial"><font color="#000000">People with experience in word processing should be familiar with style sheets, as they can save a lot of time and keep
a consistent flow of uniformity throughout a document. You'll wonder how you ever did without style sheets in <strong>HTML</strong>.</font></font> </p>
<p><font face="Arial"><font color="#000000">The concept, however, of knowing how to structure your style sheets can be quite daunting and especically time
consuming to be studying how they work, and how you should write one. <strong>StyleMaker's</strong> purpose is to eradicate this
obstacle by incorporating a friendly graphical interface for you to quickly and effectively design your style sheets.</font></font> </p>
<p><font face="Arial"><font color="#000000">Learn more about StyleMaker<font face="Arial"></font></font><a href="whatdsm.htm"><font color="#000000"> here<font face="Arial"></font></font></a><font color="#000000">.</font></font> </p>
<p><font face="Arial"><em>Yes. How do I do it?</font></em> </p>
<blockquote>
<p><font face="Arial">> </font><font face="Arial"><a href="#2">Load a homepage</font><font face="Arial"></a> from disk</font></p>
</blockquote>
<p><font face="Arial">Say you wanted all the text between the <strong><B></strong> and <strong></B></strong> tags to appear Italic Time New Roman font, as well it
appearing bold. Simply....</font> </p>
<p><font face="Arial"><strong>1.</strong> Press <strong>Add New Item</strong> from the </font><font face="Arial"><a href="#20">Styles tab</font></a> </p>
<p><font face="Arial"><strong>2.</strong> Enter <B> or select B from the list</font> </p>
<p><font face="Arial"><strong>4.</strong> Click the </font><font face="Arial"><a href="#21">Font tab</font></a> </p>
<p><font face="Arial"><strong>5.</strong> Select the Font checkbox, and select Times New Roman from the drop-down list, or type it manually.</font> </p>
<p><font face="Arial"><strong>6.</strong> Select the Style checkbox, and select Italic from the drop-down list, or again, enter it manually.</font> </p>
<p><font face="Arial">You will now see that the text in the </font><font face="Arial"><a href="#14">Style Item Preview Area</font><font face="Arial"></a> has now changed to Times New
Roman Italics, and that the Refresh button has turned red above the Preview Browser area.</font> </p>
<p><font face="Arial">The page you selected, or the test page, will have now reloaded and will contain all bold text in Italic Times New
Roman.</font> </p>
<p><font face="Arial">Now, repeat the same process from <strong>Step 1</strong> with your own Items. You might decide that you want to add an <i>Item</i> for
every tag in your document - but don't go overboard! Try modifying various properties such as foreground and
background colors, page margins, text and word spacing for some interesting results.</font> </p>
<p><font face="Arial">Once you have decided that the Style you just created works with your homepage, save the homepage to disk, and
your page is ready for publishing! If you just want to save the style itself, you can </font><font face="Arial"><a href="#10">save the style to disk</font><font face="Arial"></a> (if
you want to load it up again later), </font><font face="Arial"><a href="#11">save the HTML to disk</font><font face="Arial"></a> (saves without current homepage - non
retrievable in this version), or </font><font face="Arial"><a href="#12">add the style to the presaved styles</font><font face="Arial"></a> list (for quick retrieval).</font> </p>
<p><font face="Arial">To make an advanced Style Sheet, you don't necessarily have to possess extensive knowledge about HTML, but
rather of how it works, and how your documents are set up.</font> </p>
<p><font face="Arial">Creating an advanced sheet is all to do with <strong>specifying Items.</font></strong> </p>
<p><font face="Arial"><strong>1.</strong> Press <strong>Add New Item</strong> from the </font><font face="Arial"><a href="#20">Styles tab.</font></a> </p>
<p><font face="Arial"><strong>2.</strong> Specify your Item</font> </p>
<p><font face="Arial"><strong>Tags within Tags</font></strong> </p>
<p><font face="Arial">It is possible to specify tags within tags as Items. For example, if you wanted all <B> (bold) text to appear as Italic -
Times New Roman, but only inside <P> (paragraph) tags, then you would specify the new <i>Item</i> as P B. Likewise, if you
wanted all text within the <P> tags to appear Italic - Times New Roman, but only inside <B> tags, then you would specify
the <i>Item</i> as B P. The amount of dimensions to your specification is not limited (for example, P B ADDRESS or even P B
ADDRESS A:LINK).</font> </p>
<p><font face="Arial"><strong>Class as Selector</font></strong> </p>
<p><font face="Arial">To use a Class as Selector, you will need to get into the HTML of your document through your text or HTML editor,
and insert various tags which correspond to the Selector and Tag that you choose. By using this method, you can make
different styles for one particular tag. For example, specifying P.mynewclass, and in your HTML document inserting <P
CLASS="mynewclass"> means that all the text after it, until the P tag is closed with </P>, will be affected with the style
you create for it. And you could then specify P.anotherclass, and insert <P CLASS="anotherclass"> into your document,
and its style would be different to that of P.mynewclass (providing you create the style differently).</font> </p>
<p><font face="Arial"><strong>ID as Selector</font></strong> </p>
<p><font face="Arial">This method is probably the most widely used one. There is no specification of a HTML tag in its name, nor does it
only work for one tag in your document. ID selectors are always specified with a # preceding the name of the specification.
For example, #mynewid. Once again, you need to edit the HTML of your document, and insert the selector into your tags.
Note that your ID is not limited to one tag. For example, the text after <P ID="mynewid"> or <B ID="mynewid"> would
appear with the same style you create for it (except for B, which, by default, makes text bold - which can, in any case, be
overidden in StyleMaker by specifying Font Weight: Light).</font> </p>
<p><font face="Arial"><strong>3.</strong> Modify font, color, text and border properties for the Item</font> </p>
<p><font face="Arial">It is possible to modify such properties such as word and letter spacing in the current Style Sheet standard (CSS1)
supported by StyleMaker. However, in some browsers, not all properties are supported, thus will not be shown. If when
you modify a property of an <i>Item</i> in StyleMaker it doesn't make the corresponding text in your document alter through the
</font><font face="Arial"><a href="#1">Preview Browser</font><font face="Arial"></a>, we recommend not using this property until an update of the browser, which does
support it, is available.</font> </p>
<p><font face="Arial"><strong>4.</strong> Follow on from <strong>Step 7</strong> on creating a</font><font face="Arial"><a href="#8"> simple style sheet</font><font face="Arial"></a>.</font> </p>
<p><font face="Arial">StyleMaker can load a format specifically designed for its use. All files of its kind have the extension <strong>DSM</strong>.</font> </p>
<p><font face="Arial">To load a Style, press <img src="open.gif" align=bottom hspace=4 width=16 height=13>from the Styles tab.</font> </p>
<p><font face="Arial">StyleMaker can save to its own format (DSM) which stores all information about your style sheet. The advantage of
saving in this format is that it can be re-loaded and re-used at a later date, whereas saving to HTML is non-retrievable (in
this version).</font> </p>
<p><font face="Arial">To save your Style to disk, switch to the Styles tab and press <img src="save.gif" align=bottom hspace=4 width=14 height=14>. You will be shown a file dialog box where you can
enter the file name of your style.</font> </p>
<p><font face="Arial">To save a Style for quick retrieval, we recommend using the </font><font face="Arial"><a href="#12">Presaved Styles</font><font face="Arial"></a> option.</font> </p>
<p><font face="Arial"> </font> </p>
<p><font face="Arial"> </font> </p>
<p><font face="Courier New"><a name="11"><font color="#800080"><font size=4><strong><u>Saving<font face="Courier New"></font></u></strong></font></font><font color="#FF8000"><font size=4><strong><u> a Style as HTML</font></u></strong></font></font></a> </p>
<p><font face="Arial">This function will simply write the style sheet in HTML to a file you specify. Please note that your homepage will not be
saved with it. To do this, </font><font face="Arial"><a href="#3">save a homepage with a style.</font></a> </p>
<p><font face="Arial">To save a style as HTML, click<strong> Save As... </strong>from the HTML tab.</font> </p>
<p><font face="Arial">This pull-down menu, located in the Styles tab, enables quick retrieval of common styles used. Some sample styles are
included with StyleMaker.</font> </p>
<p><font face="Arial">To add a style to this menu, press the <strong>Add </strong>button along side it, and enter the title of the style. This name can be
anything you want, not limited by file names.</font> </p>
<p><font face="Arial">Similar to the </font><font face="Arial"><a href="#1"><strong>Preview Browser</font><font face="Arial"></strong></a>, it displays how your styles will look, but this preview area displays
one <i>Item</i> at a time. It is useful as updates are quick, and the Preview Browser does not need to be refreshed every time
you want to preview a new configuration. </font> </p>
<p><font face="Arial">The Style <i>Item</i> Preview Area is located above the main program tabs.</font> </p>
<p><font face="Arial">Items are basically a definition for each element of your Style Sheet. Each<em> </em><em><i>Item</i></em><em> </em>contains a set of properties (font,
colors, borders etc) which define the element's appearance.</font> </p>
<p><font face="Arial">Your Style Sheet is totally made up of Items, and an <i>Item</i> can be added or removed from the Style Sheet at will. To
find out more about how they work, we suggest </font><font face="Arial"><a href="#8">making a simple style sheet.</font></a> </p>
<p><font face="Arial">To remove an <i>Item</i> from the current Style Sheet, select the <i>Item</i> you wish to remove from the list and click <strong>Delete
<p><font face="Arial">A new Item's default properties can be acquired from an existing <i>Item</i> (therefore duplicating) by clicking <strong>Add Item</strong>
from the Styles tab, and selecting the <strong>Acquire Defaults</strong> checkbox from the dialog that appears. Select an existing <i>Item</i>
from the list, enter the new <i>Item</i> name, and click <strong>OK</strong>.</font> </p>
<p><font face="Arial">Select the checkbox along side the property which you intend to modify, and either use its corresponding drop down
list, enter the property value manually, or if applicable, use the Up/Down arrows to increase/decrease its value. The Size
property is measured in Points (pt).</font> </p>
<p><font face="Arial">For those more comfortable with a standard Windows font selection dialog, click the <strong>Font...</strong> button to adjust the
<p><font face="Arial">There are two properties within this tab. One for foreground color, and the other for the background color of the Item.
Both are controlled by the Red, Green, and Blue (primary color) sliders. The color gradients below each slider help you
find the color you desire.</font> </p>
<p><font face="Arial">You can also pick a color from the palette below the sliders, by using the Windows color dialogue (click "<strong>Palette...</strong>"),
or by loading the foreground and background colors from the <BODY tag in a HTML document (click "<strong>From HTML</strong>").
</font> </p>
<p><font face="Arial">You can add the current color to the common color list by clicking the <strong>Add </strong>button.</font> </p>
<p><font face="Arial">To stop one of the two properties from being included in the Style Sheet, switch to the Font tab and remove the check
from the corresponding property (foreground color or background color).</font> </p>
<p><font face="Arial">Within this tab you will find all the HTML you need to insert into your documents. Please note that StyleMaker has the
capability of inserting Style Sheets into your documents - this tab is primarily for inserting advanced style sheets into
documents.</font> </p>
<p><font face="Arial">You can copy the <strong>HTML source</strong> to the clipboard, or you can even save it to a separate file from this tab if you wish.