Code Positioning

Regular code objects are placed between the <body>
and <body> tags.

You can adjust the position of a code object within
the HTML (or SVG) text by moving it with the Z-order buttons. ‘To Back’
will place it a the top. To Front will place it at the bottom. Back and
forward will move it up or down by one object.

Sometimes you may have a need for code outside
the body or header tags. There is a special case for code objects that
have one of a set reserved geometry names. Using one of these in a code
object will place the code outside the body tags. The names are TOPMOST,
BOTTOMMOST, and BELOWBODY. They must be all capital letters. Any code
having a geometry name that begins with one of these will be used as follows.

The geometry name is the name displayed in the dropdown name
list in the Code Editor dialog box. This is not the same as the object
name.

TOPMOST
– places the contents of the code object before all other text on a web
page.

BOTTOMMOST
– places the contents of the code object below all other text on a web
page.

BELOWBODY
– places the contents of the code object just below the closing </body>
tag.

Only the contents of the code object are used.
No CSS positioning code is added.

You can have more than one of each type of special code placements
by appending suffixes (e.g., TOPMOST, TOPMOSTA, and TOPMOSTtwo will all
be placed topmost on the page(s) they occupy). This will allow more than
type per project or multiple per project.

If there is more than one of a type on a page, no linefeed
is placed between them. Place a linefeed in the code if you need one.

Importing External Web Page Code into SiteSpinner™

The following procedure explains how to import
the source code from an existing web page into a SiteSpinner™ project
page:

With the page to which you want to import your external web page open
in the Work Window, click the Code button: in the Components Bar

OR

Select Object>Code.

The Text Editor dialog box in Code Edit
mode will open.

Select File>Open File

OR

Press the CTRL+O keyboard shortcut

The Open dialog box will appear.

Browse for the *.HTM, *.HTML, or *.TXT file that
is the source for the external web page you wish to import.

When the file name is displayed in the File name field, click
the Open button.

The dialog box will close, and the source code of
the external web page will appear in the Code Editor window.

If a message box appears
asking if you would like to copy the <HEAD> and <BODY> tags
from the imported HTML file, click No.

Click the Preview Current Page button: on the Preview Bar to view the imported web page.

Locate any missing
resource files (e.g., images, multimedia, etc.) in their original resource
directory and copy them to your SiteSpinner™ project directory. You may
use the Change Image Directory dialog box to help you remap the locations
of resource files. For more information, see Change
Image Directory Dialog Box.

You may now finish the web project in SiteSpinner™. Add
additional text, titles, image, multimedia, and other objects. If necessary
move them on your page so that they are located in the positions you want
them in the Z-order (layer) above the code object containing the imported
web page source code. You may need to preview the page frequently as you
work. Use the Gather All Files option when you publish the project. (For
more information, see Publishing Projects.)

Adding Functional Code to a Page

You can add scripts or other functional code to
your web page using the Code Editor. The following procedure shows
a simple example, adding the familiar “Hello World” message box using
JavaScript:

With the page to which you want to add functional code open in the
Work Window, click the Code button: in the
Components Bar

OR

Select Object>Code.

The Text Editor dialog box in Code Edit
mode will open.

Enter the following functional code in the Code Editor:

<SCRIPT LANGUAGE=”JavaScript”>

alert(“Hello World!”);
</SCRIPT>

Click the Save and Close button.

The code object will appear as a placeholder on the
page.

Click the Preview Current Page button: on the Preview Bar to view the page with the JavaScript
message box.

Targeting Code to Specific Output Formats

You can target the code to a specific output format.
Use this option to target SVG code to SVG publishing and HTML code to
HTML publishing, for example.

In the Work Window, click to select the code
object which you want to target to specific output formats.

Press the ALT+O keyboard shortcut

OR

Click the Object Editor button: in
the Object Bar.

The Object Editor dialog box will open.

Click the Options menu.

In the Exclude from target output section,
click to checkmark the output formats you do not want the code object
to be available in.

When you are finished, click OK. The dialog
box will close, and the selected code object will be added to the page
only in the output formats you did not select in step 4.