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.

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® Pro

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

  1. 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.

  2. Select File>Open File

    OR

    Press the CTRL+O keyboard shortcut

    The Open dialog box will appear.

  3. Browse for the *.HTM, *.HTML, or *.TXT file that is the source for the external web page you wish to import.
  4. 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.

  1. Click the Save and Close button.

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

  2. Move and scale the code object to fit the boundaries of the page’s Target Resolution Guide Border. (For more information, see Target Resolution Guide Border, Move Object, and Scale Object.)
  3. 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® Pro 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® Pro. 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:

  1. 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.

  2. Enter the following functional code in the Code Editor:

    <SCRIPT LANGUAGE=”JavaScript”>

    					alert(“Hello World!”);
					</SCRIPT>
  3. Click the Save and Close button.

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

  4. 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.

  1. In the Work Window, click to select the code object which you want to target to specific output formats.
  2. Press the ALT+O keyboard shortcut

    OR

    Click the Object Editor button:  in the Object Bar.

    The Object Editor dialog box will open.

  3. Click the Options menu.
  4. In the Exclude from target output section, click to checkmark the output formats you do not want the code object to be available in.
  5. 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.

 Previous Next