BUG 6

home *** CD-ROM | disk | FTP | other *** search

/ BUG 6 / BUGCD1997_09.BIN / INTERNET / StyleMak / helpuse.ht_ / helpuse.ht

Wrap

Text File | 1997-07-28 | 33KB | 306 lines

<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN"> <html> <head> <title>StyleMaker Help</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <meta name="GENERATOR" content="Microsoft FrontPage 1.1"> </head> <body bgcolor="#FFFFFF"> <style type="text/css"></style><div align=center><center> <table width=75%> <tr><td width=100%><img src="dsmlogo.jpg" align=bottom width=445 height=75> <a name="1">What is the Preview Browser?</a> The Preview Browser 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. This allows you to know exactly how your homepage will look as you create a style, before you publish it on the Internet. 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 necessary by checking the <a href="#6">'Auto Refresh'</a> checkbox. <a name="26">Configuring StyleMaker</a> This enables you to configure StyleMaker to meet your needs and preferences. To view the Settings dialog, press <img src="CONF.gif" align=bottom width=16 height=16> above the Item Previewer. <a name="2">Loading a Homepage from disk</a> This enables you to preview your homepage through the preview browser while you create, modify and tweak your Style Sheet. 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. <a name="3">Saving a Homepage with a Style</a> This function will insert the Style Sheet into the correct position in the homepage currently loaded in the Preview Browser. To save your homepage with the current style, press <img src="save.gif" align=bottom hspace=4 width=14 height=14>above the <a href="#1">Preview Browser.</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 <a href="#4">Apply To</a> function. <a name="4">Applying/Adding a Style Sheet to a number of HTML documents (Apply To)</a> This function allows you to insert the current style sheet into any number of HTML documents on disk. To use this function, press <img src="apply.gif" align=bottom hspace=4 width=15 height=17>above the <a href="#1">Preview Browser</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 Add button, which will add it to the list. If you wish to add all HTML files from a particular dicrectory, use the Add All button. Use the Remove button if you wish to remove a file from the list. Use Remove All to remove all files from the list. Once you have made your file selection, press the OK button. <a name="5">Viewing Homepage HTML with Style Sheet source</a> 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. Press <img src="notepad.gif" align=bottom hspace=4 width=13 height=16>to view the contents of this file with Notepad. NOTE: Modifying and saving 'tempdsm.htm' within Notepad has no effect, as it is just overwritten when the homepage is refreshed. <a name="6">What does the 'Auto Refresh' checkbox do?</a> This checkbox, located on the far right hand side of the screen (not visible in resolutions of 640x480 or lower), forces StyleMaker to refresh to current homepage loaded in the <a href="#1">Preview Browser </a>whenever you modify an Item's properties. For example, if you were to change the foreground color of an Item, then StyleMaker would automatically refresh (reload) the current page with the new foreground color. <a name="7">What are Style Sheets?</a> Style Sheets 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 , , and <ADDRESS> is not necessary. The style of your web page's content will totally rely on what you define in your style sheet. 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 HTML. 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. StyleMaker's purpose is to eradicate this obstacle by incorporating a friendly graphical interface for you to quickly and effectively design your style sheets. Learn more about StyleMaker<a href="whatdsm.htm"> here</a>. <a name="8">Creating a simple sheet</a> This brief guide will allow you to modify the properties of HTML tags (eg, : Weight: Bold, Font: Times New Roman, Style: Italic). Question: Do you want to preview the sheet with your own homepage? Answer: No. I'll just use the test page <blockquote> > Press <img src="new.gif" align=bottom hspace=4 width=11 height=13>from the Styles tab </blockquote> Yes. How do I do it? <blockquote> > <a href="#2">Load a homepage</a> from disk </blockquote> Say you wanted all the text between the and tags to appear Italic Time New Roman font, as well it appearing bold. Simply.... 1. Press Add New Item from the <a href="#20">Styles tab</a> 2. Enter or select B from the list 3. Press OK 4. Click the <a href="#21">Font tab</a> 5. Select the Font checkbox, and select Times New Roman from the drop-down list, or type it manually. 6. Select the Style checkbox, and select Italic from the drop-down list, or again, enter it manually. You will now see that the text in the <a href="#14">Style Item Preview Area</a> has now changed to Times New Roman Italics, and that the Refresh button has turned red above the Preview Browser area. 7. Press <img src="refresh.gif" align=bottom hspace=4 width=13 height=16>(above the Preview Browser area). The page you selected, or the test page, will have now reloaded and will contain all bold text in Italic Times New Roman. Now, repeat the same process from Step 1 with your own Items. You might decide that you want to add an Item 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. 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 <a href="#10">save the style to disk</a> (if you want to load it up again later), <a href="#11">save the HTML to disk</a> (saves without current homepage - non retrievable in this version), or <a href="#12">add the style to the presaved styles</a> list (for quick retrieval). <a name="9">Creating an Advanced Sheet</a> 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. Creating an advanced sheet is all to do with specifying Items. 1. Press Add New Item from the <a href="#20">Styles tab.</a> 2. Specify your Item Tags within Tags It is possible to specify tags within tags as Items. For example, if you wanted all (bold) text to appear as Italic - Times New Roman, but only inside (paragraph) tags, then you would specify the new Item as P B. Likewise, if you wanted all text within the tags to appear Italic - Times New Roman, but only inside tags, then you would specify the Item 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). Class as Selector 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 means that all the text after it, until the P tag is closed with , will be affected with the style you create for it. And you could then specify P.anotherclass, and insert into your document, and its style would be different to that of P.mynewclass (providing you create the style differently). ID as Selector 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 or 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). 3. Modify font, color, text and border properties for the Item 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 Item in StyleMaker it doesn't make the corresponding text in your document alter through the <a href="#1">Preview Browser</a>, we recommend not using this property until an update of the browser, which does support it, is available. 4. Follow on from Step 7 on creating a<a href="#8"> simple style sheet</a>. <a name="13">Loading a Style</a> StyleMaker can load a format specifically designed for its use. All files of its kind have the extension DSM. To load a Style, press <img src="open.gif" align=bottom hspace=4 width=16 height=13>from the Styles tab. <a name="10">Saving a Style </a> 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). 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. To save a Style for quick retrieval, we recommend using the <a href="#12">Presaved Styles</a> option. <a name="11">Saving a Style as HTML</a> 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, <a href="#3">save a homepage with a style.</a> To save a style as HTML, click Save As... from the HTML tab. <a name="12">Adding a Style to 'Presaved Styles'</a> This pull-down menu, located in the Styles tab, enables quick retrieval of common styles used. Some sample styles are included with StyleMaker. To add a style to this menu, press the Add button along side it, and enter the title of the style. This name can be anything you want, not limited by file names. <a name="14">Style Item Preview Area - What is it?</a> Similar to the <a href="#1">Preview Browser</a>, it displays how your styles will look, but this preview area displays one Item 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. The Style Item Preview Area is located above the main program tabs. <a name="15">What are Items?</a> Items are basically a definition for each element of your Style Sheet. Each Item contains a set of properties (font, colors, borders etc) which define the element's appearance. Your Style Sheet is totally made up of Items, and an Item can be added or removed from the Style Sheet at will. To find out more about how they work, we suggest <a href="#8">making a simple style sheet.</a> <a name="16">Selecting an Item</a> By selecting (clicking) an Item from the list, you are retrieving all of its various properties into their respective selectors, including font, color, text and border properties. The Style Item Preview Area is also updated when you select an Item from the list. <a name="17">Adding an Item</a> To add an Item to the current Style Sheet, click Add Item from the Styles tab. <a name="18">Removing (deleting) an Item</a> To remove an Item from the current Style Sheet, select the Item you wish to remove from the list and click Delete from the Styles tab. <a name="19">Duplicating an Item</a> A new Item's default properties can be acquired from an existing Item (therefore duplicating) by clicking Add Item from the Styles tab, and selecting the Acquire Defaults checkbox from the dialog that appears. Select an existing Item from the list, enter the new Item name, and click OK. <a name="20">Styles Tab</a> This tab is the program's nerve centre - when you select an Item here, or load a style sheet for example, all the various font, color, text and border properties will be updated. <a href="#10">Save a Style Sheet</a> <a href="#12">Add a Style Sheet to the presaved list</a> <a href="#13">Load a Style Sheet</a> <a href="#16">Select an Item</a> <a href="#17">Add an Item</a> <a href="#18">Remove an Item</a> <a name="21">Font Tab Properties</a> 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). For those more comfortable with a standard Windows font selection dialog, click the Font... button to adjust the various font properties. <a name="22">Color Tab Properties</a> 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. You can also pick a color from the palette below the sliders, by using the Windows color dialogue (click "Palette..."), or by loading the foreground and background colors from the <BODY tag in a HTML document (click "From HTML"). You can add the current color to the common color list by clicking the Add button. 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). <a name="23">Alignment Tab Properties</a> 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. All numeric based properties are measured in Points (pt). <a name="26">Border Tab Properties</a> 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 use the Up/Down arrows to increase/decrease its value. All properties are measured in Points (pt). Please note that in this version the border properties have no affect on the Style Item Preview Area, but will still appear in your Style Sheet. <a name="24">Advanced Tab Properties</a> elect 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. All numeric based properties are measured in Points (pt). Please note that in this version the advanced properties have no affect on the Item Previewer, but will still appear in your Style Sheet. <a name="25">HTML Tab</a> 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. You can copy the HTML source to the clipboard, or you can even save it to a separate file from this tab if you wish. </td></tr> </table> </center></div> © 1997, Danere Group. </body> </html>