SiteSpinner Tutorials banner
Virtual Mechanics Logo
SiteSpinner
®
Code

Raw code, as we use the term here, is special unformatted text. The term "code" is often used also to refer to the CSS or HTML code that SiteSpinner creates when you preview or publish your project. We use the term "raw" to make it clear that here we are mostly discussing code that you enter.

In this tutorial, we cover the following topics:

Introduction to code
Some simple examples
Slightly more complex example  (CSS)
Code copy instructions
Header code
Edit a custom header
Body code
Body tag code
CSS positioning
Positioning code via code type -- preferred
Positioning code via special geometry names -- deprecated
Dimensions of a code object
Code View window
Viewing created code in your browser
If the code doesn't work


Introduction to code

Compared to titles and text, SiteSpinner will pass on raw code without modification. Raw code is thus best suited to adding banners, shopping carts, counters or other code that needs to be used without any modification. It helps a lot if somebody else has already written it!

Create a code object with one of these actions:
Any of these actions will open the Text Editor with a subset of the usual text-editing  commands. It will display Code in the drop-down "Text Type" box on the menu bar.

SiteSpinner does not check for errors in the code you enter. Take care to ensure that the code is valid -- errors when you preview or publish your project are often caused by invalid code. Sometimes the code itself will work, but the object after the naughty code will malfunction. See Z-order.

You can also enter code as normal text (Rich Text); this is best for something that is mostly text but which in which you may want to enter occasional code -- say to make a line or show a small embedded image like a smiley.
Code mode
SiteSpinner logo
Code button
Code mode
Some simple examples

Before we get into the trickier stuff, let's start with are a few simple examples of code objects. These all do something slightly useful. To test, just copy and paste the code on the right into a code object on your own page. Or experiment right here!






Description                                            Code

Horizontal line like the one above

  
A button -- this one does nothing apart from look pretty



A Javascript alert box, useful for debugging. Test it here

<HR>

<INPUT TYPE="submit" VALUE="A Button">
<SCRIPT type="text/javascript">
alert("Just testing")
</SCRIPT>

SiteSpinner does not touch any code you place in a code object. The code will show as text on your workpage. When you preview or publish, your browser will run the code and show the result -- hopefully the result you are looking for.



Slightly more complex example  (CSS)

If you give a text object a colored background with the Quick Editor > Shading tab, as we did with the grey boxes just above right, you'll see that the text starts exactly at the left hand margin. You can control the padding, the gap between the margins and the start or end of the text, with the CSS code below. Change the padding from 20 pixels (px) each side to whatever other value you want, Use it cautiously, as it causes a deviation from WYSIWYG -- your preview will differ slightly from what you see on your workpage.

Copy and paste the following code into this page as a Code object of type "in CSS" and then preview -- note the differences in the grey boxes, and also in the other text objects on this page. Not all the changes are desirable!






Code copy instructions
The code you deal with will normally be more complex than that above. Nearly always, someone else will have already written it, and they will give you some instructions like these:
.dfltt{padding-left:20px; padding-right:20px}


Header code

For an improved new method of adding header code, see Positioning code by code type.

For existing projects you may instead choose to add header code via the old method:
You won't see this code on your workpage -- but it should do its stuff when you preview or publish.

You can have only one custom header on a page, so if you find yourself wanting more than one, join the various bits of code together to make one larger header.

Page Editor Button
Preview current page
Preview all pages
Edit a custom header
The window for the Custom Header is quite small and not easy to edit. To edit the header normally in the Text Editor, do this:
Body code
To paste code into the body of your page:
Code button
Text Editor Save and Close
Preview current page
Body tag code

Less commonly, you may get an instruction  like this:
"Include this code in the <body> tag", and then will follow some code like this:
<body onLoad="SomeFunction()">

The intention of this code is to execute the Javascript function SomeFunction() when the page is fully loaded. The name SomeFunction will vary but will always match the name of a function elsewhere in the code.

Methods of handling a body tag from within SiteSpinner are:
The modification looks like this:

     <SCRIPT type="text/javascript">
     SomeFunction()
     </SCRIPT>

Use the code as a normal code object on your page. Use the "To Front" button to move the code down the bottom of the finished page. (See Positioning on page) This ensures that the code does not execute until the earlier part of the page has loaded.

Another possibility is to try the code object with a special Code Type.



Positioning on page

For any object, there are two kinds of positioning:
Z-order may be important for code objects -- if one code object depends on another in order to run properly, that "another" should be lower in the z-order (nearer the back). If you have code that may need to run as the page is loading, it should be as near the back of the page as you can make it. You can even put it in the header.

Control code objects' placement accurately in the z-order with the Front/Back button set on the bottom toolbar:
 With four front/back buttons, you have very fine control over the exact z-order position of any code object within the body of your page.

Most times, you won't have to worry about all this. But do consider it if your code fails to run properly.




Z-order buttons
CSS positioning

Cascading Style Sheets (CSS) allow SiteSpinner to accurately control the left/right and up/down position of objects on your published or previewed page (your finished page).  

Like any other object, a code object is wrapped in HTML <div> </div> tags on your finished page. This allows the code rectangle on your workpage to define the physical representation (x,y position and width/height) of the code on your finished page. E.g., if your code will display an image on screen, place the code rectangle (its bounding box), where the image will display.

If "In Body" code has no physical representation on the screen -- i.e. it does not generate a fixed visible image, put CSS positioning off -- you save a hundred bytes or so of finished page size. Without CSS positioning, any visible objects will start displaying at the top left corner of your page, and work down from there in the z-order. So turn CSS off only for invisible code objects.

Moving objects like cursor trails can also have CSS positioning off -- the code itself has all the positioning information it needs.

Turn off CSS positioning by either of:
No CSS button
Positioning code via code type -- preferred

There is an older method of positioning code on your pages, but for new projects we suggest you use the method discussed here.

There will be occasions where you need raw code to be positioned at a certain place in the code on your finished page -- perhaps at the very beginning or the very end, or maybe in the CSS. Simply select the place you want from the drop-down list box at the top of the Code Editor.

You can have multiple code objects in each location in the finished code; they simply appear one after another, in the order you created them. The order follows the z-order, so if you want a different order, change the z-order.
Code button
Code placement options
Because you can place code in the header too, this replaces the older method of using a Custom header in the Page Editor > Header tab -- and is much more flexible.

If you want the same code on more than one of your pages, make the code object an include.

There are examples of each type on this page. Use the Code View window to view the code, or in preview, use your browser > View Source function.

Where you have two or more code objects fighting for one position in the page, precedence is determined by the z-order. The one lower in the z-order, further up the page, will appear first in the finished code. The "In Body" position within the body of your page is determined entirely by z-order.

CSS positioning matters only for "in Body" code; for other code types, the master position control is the Code Type selection.
Positioning code via special geometry names -- deprecated

"Deprecated" is a word we have always wanted to use, but have not been able to until now! It means that this feature is obsolete for new projects, but is still in place for compatibility with older existing projects. So if you are working on a new project or are prepared to modify an old one, skip the rest of this section and move back to Positioning code by code type.

In the past, you may have wanted to place code outside the header and main body of your page. SiteSpinner had, and still has three special geometry names that allow you to do this. Each of these geometry names must be in upper case as shown below: Note -- these are geometry names, not object names. It is convenient to do the naming in the Text Editor -- replace the default rtfxxx number as you create the code object. All these objects ignore the CSS positioning settings, but will remain visible on your workpage, and will not be affected by where you place them in the z-order.

TOPMOST
  This code appears at the very top of the page -- even before the header

BELOWBODY
This code appears immediately underneath the closing </body> tag

BOTTOMMOST
  This code appears as the last thing on the page -- below the closing </html> tag. Note the spelling -- a double M in BOTTOMMOST

This page has a "do nothing" code object of each type. View the code for this page and see if you can spot them.

You can have multiple specials of each type. Suppose you want another TOPMOST:
Code button
Dimensions of a code object

Make a code object any size (dimensions) you like. For objects that appear in a fixed place on screen, make the code the same size as its physical representation. E.g., if the code will display an image of a certain size, make the code object the same size as the image. This makes it a little more visual on the workpage.

Otherwise, you could make the code object quite small, and place it in a margin or in the gap between paragraphs.

There are two ways you can change the size of the code object:
If you resize the code object with the mouse, you change the width and height of the object.  If you are annoyed by your code objects flopping to some favored dimensions  whenever you edit them, you may have set the scale by dragging while holding down the Alt key. So in the Quick Editor:
Scale changes do not affect any clones of the code object, but width and height changes do.
Code View window

The Code View window makes it possible to view the code that SiteSpinner creates. It is a read-only view -- if you want to add or change code of your own, do so via a Code object.

Open the Code window with one of:
Hover your mouse over any of the Code View buttons to see the tool tip that briefly describes the use of that button.

Resize the Code window by dragging the center bar left or right.





The Refresh button refreshes the code view after you make changes to your workpage, and want to see what that has done to the code.

The Relative Path button shows the path to any file in the code -- the advantage of the relative path is that is it is compact, showing the path relative to the location of your .ims project file. For files that SiteSpinner itself creates, they will show as if in the ./geometry folder in your SiteSpinner preview folder.

The Header Code button allows you show or hide the header. Use this if you want to see the header code -- often it contains a lot of CSS which may not be of interest. Also related to this, you can show only the mobile CSS, only the desktop CSS or the default Combined CSS -- both lots of CSS together. The settings controlling this are in the Project Options > General tab.

See also:
Relative URLs -- making your site portable
Save your project with relative paths



Viewing created code in your browser
Another way of viewing the code that SiteSpinner creates is to preview or publish your page, then use your browser's View > Source function. This also allows you to edit the code, which may be useful on occasion.


Toggle Code Window
Code Window toolbar
If the code doesn't work

If the code doesn't work: