Code objects are normally not visible on your web pages because they are intended to hold code instead of displayable objects. But when you publish your project containing code objects (and CSS positioning is not turned off), they are converted into standard SiteSpinner HTML <div> blocks. When published, these code objects will have a z-index, page position coordinates, and dimensions. SiteSpinner will even mark the code object’s <div> block as visible, even if there is nothing to display.

Normally you would use a shape object (e.g., a rectangle) to build a frame holder for another page object. By default, the shape is converted into an image when your project is published. A code object can also be used as a frame holder, but does not have the overhead of being converted into an image. When published, SiteSpinner will convert any border or fill property into CSS code. [Note: The rectangle shape can be forced to be HTML/CSS code instead of an image by turning off the Anti-Alias and Re-Render options in the Quick Editor.]

So why use a code object as a frame holder if the rectangle shape will do the same thing? Quite often, my projects contain scripts. When this occurs, why not use the code object instead of putting another object on the work page? This works fine, but only if the script does not perform some action to display another object on your page. For example, a script designed to display Google adsense, or a DHTML navigation menu, will not work as a frame holder since it is already designed to hold something visible. Caution must be used with this technique. Inadvertently deleting or cutting the code object to change a frame property may remove an important script.

To use the code object as a frame holder, adjust the code object dimensions to surround the desired object. This can be done by using the geometry editor or by dragging the code object screen border to the desired size. You can use the Quick Editor tool to add a border and/or fill in the background. If you decide to use an image to fill the background of a code object, the selected image will not appear on the work page. The code object is basically a text object, and is treated as such of the work page.

Examples

The most common use of a filled rectangle is as a frame for another object, such as an image or text object. Let’s first consider framing an image using conventional methods.

In this example, the top image is framed by two filled rectangles; one uses a colored background and the other is a tiled image. The image on the bottom has been framed by two code boxes, using the same fill properties as their rectangle counterparts.

When displayed on a web page, the two images are virtually identical. The real difference is the time taken to load the page in your visitor’s browser. The top image consists of 3 images (since the default SiteSpinner action is to turn re-render off and anti-alias on) of about 51KB. If re-render is turned on, a merged file of about 92KB is created. The code object frame example only consists of the original image of about 19KB, and about 300 bytes of CSS code. If you had several images or even a few larger images, the saving in page load time could be significant.

Code object frames can be used with any SiteSpinner object. In the following example, 3 text links have been framed by a code object filled by an image.

In this example, the code object actually contains the following CSS style code:

<style type="text/css">
  #oobj30 { border: solid 5px blue; }
</style>

where Oobj30 is the code object’s object name. This CSS style code will allow the code box to give itself a 5 pixel, blue border. Of course, the normal SiteSpinner tools could be used to do the same thing, but this shows that the code object can do two things at once.