BushArts.com - RealDraw CSS Scripts
RealDraw has inbuilt support for exporting to a variety on non-standard formats, via its scripting ability. The most common use of this function, is to export an entire canvas as a CSS based Web Page. There are Four main components to our RealDraw web page export scripts that any user can adjust to suit their own personal project. We would suggest that a copy of the original file be made first, and work carried out only on the copy, thus avoiding any possible damage to the original. (In the script export screen, select and copy the current script, Press "New" to create a new script file, name it something you will recognize, then paste the other script into your new file, and edit away!) Script editing has an advantage over editing the Html in a web editor. Get the script right first, and your page is finished, no further work should be required. The simplest method to edit these, is to use the Script or Output tab in the css export screen. If you only want the script for the current project, edit within the Output tab, then just export it. If you want the changes you make to be available for more similiar projects, edit within the Script tab, then Save the script as mentioned above. The .mms script file is simply a text file, and could also be edited with any text editor... eg: "Windows Notepad". They are also covered within RealDraws' own Help File. If you understand HTML and CSS basics, then you will have no trouble understanding these scripts. We'll look at the scripts available on previous RealDraw CSS pages, but the basics are the same with all of the Real Draw export scripts. Below are screen shots, with line numbers added, from an older .mms script #50, taken in the script tab.Lines 1-15 Head Section
First line is usually just a description of the script.
Lines 2 and 3 Tell RealDraw that this is a script to generate a file with the extension "HTML". (Advanced users with suitable servers may like to change this to eg: .php or .shtml)
Line 4 is the "Doctype" definition required on all valid web pages. Newer Scripts are written to XHTML.
Lines 5 and 6 are the normal required Html and Head tags.
Line 7 is the page Title. Change if you do not want the browser title bar to say "My RealDraw Page".
Lines 8-15 are the required "Meta" tags.
The meta tags tell your browser all about the page, and some are used by search engines to note the "Keywords" etc relevant to your page. These are Generic only, personalize them to suit.
Lines 16-32 Stylesheet
Lines 16-32 in this script, are the Cascading Style Sheet (CSS) area. In these particular scripts, we have included several css elements that are easy to adjust. Margins, Background colours, Text alignment, Widths and Heights, etc - can all be modified here. You can also add any extra CSS that your own page needs. Lines 28-31 above are the parts that RealDraw will automatically generate.
In example of how CSS works, Line 18 above requires that any text with a No:1 heading (H1) will be in Bold Verdana Font at 12 pixels height, 14 pixels Line height, no padding, and a 5 pixel bottom margin.Note... it is preferred etiquette that a specific font size not be used in any stylesheet.
Lines 32-61 Javascript
We have excluded the Javascript from this page, as it is not relevant to what we are looking at, but you could still change the included Javascript to any other if desired.
Lines 62-79 Body Content
Lines 64-78 above is your own page content. (What the Browser will show).
Line 67 and 68 above are the RealDraw generated parts, these two lines are always placed inside the relevant page positioning tag. (In this script, they are inside the div class "content" opened on line 66, closed on line 69.)
Any valid Html, Css, Javascript etc, may be placed inside a RealDraw Script.
Whilst we have included extra text/image areas into all of these pages, (Lines 70-77 above) it is optional if you use them or not. Just adjust these parts to suit, by deleting any not required, or by adding your own text or images, directly inside the appropriate html tag. (Advanced users may like to put in an "includes" statement for example).