SiteSpinner Tutorials banner
Virtual Mechanics Logo

Here are some terms used in these tutorials without always explaining exactly what they mean.

If you look at diagonal lines on your screen, you may see that they look jaggy -- not completely smooth. This is a built-in result of how the lines are rendered (drawn) on screen -- one pixel at a time. If you draw a diagonal line on graph paper by either filling in the squares completely, or leaving them completely empty, you will see a similar effect.

Anti-aliasing is the process of filling in along jaggy edges with shades that are midway between foreground and background colors. This gives a smoother looking line but also makes it more blurry. You can even anti-alias horizontal and vertical lines -- the effect then is just to make them more blurry.

In order for anti-aliasing to be really successful, you have to anti-alias against a background that matches your final background. If you anti-alias against a white background, then use the same image against a colored background, you will see a white halo effect.

Anti-aliasing done successfully, always results in an image file.

Modern computers anti-alias all larger text drawn on screen -- and they do a good job. For this reason a title made as a Text object can look sharper than one made as a Title object with anti-alias on.  (The implication here is that sometimes SiteSpinner does not do as good a job of anti-aliasing as it might.)

Big four (browsers)
The four most popular browsers are Internet Explorer, Mozilla Firefox/Netscape, Safari  and Google Chrome (in about that order). If your pages look good in those four browsers, you have more than 95% of your viewers covered. As Firefox and Netscape both use the the same engine for their browsers, you need preview in only one of the pair. Opera, the one built into SiteSpinner Pro, is in fifth place.

IE is by far the most prevalent browser -- the big ONE. Needless to say, it is essential that your pages look good in that. That means you must hold your nose and test with it.

Case sensitive
File names can be sensitive to whether they are capitalized or not. Upper or lower case.

On some servers, a file called "MyImage.jpg" can be different to "Myimage.jpg". This is because the server is running under UNIX, a different operating system to the Windows on your home computer. 

Because  Windows is not case sensitive, your project may preview beautifully. However when you upload to your server you may find a broken link. The link may point to a file "MyImage.jpg", but the file on your server may really be "Myimage.jpg" -- an entirely different animal when it is on the server.

When referring to web pages, "code" usually means HTML (Hyper-Text Markup Language -- special text that tells the browser what to put on the page.)  When you preview or publish your project, SiteSpinner creates all the HTML code needed.

You can have other code in your pages too, most notably Javascript that you enter as Code objects.

CSS (Cascading Style Sheets)
CSS is a way of separating the formatting and positioning of objects on your page from the content. In practical terms for SiteSpinner,  it controls the position of objects on your finished page, and very accurately too -- to the exact pixel. In the old days people used tables to control positioning, but with SiteSpinner and CSS most of that is no longer needed.

CSS gives you good control over visual aspects of your pages -- things like fonts and spacing -- and a whole lot more.

The default setting is the initial setting of some control. You can change it if you want, but you don't have to. e.g. Drop a rectangle on your workpage and its default setting is 100 pixels wide x 100 high. Often you will change this setting.

The default background color of your pages is solid white. Often you will not change this setting.

DHTML (Dynamic HTML)
Compared to regular HTML, DHTML is used by SiteSpinner Pro to make web pages with animation. It uses a combination of and CSS and Javascript.

Export Progress Log
When you publish your project, a window appears on screen showing the names of all files built and transferred to your local publish folder, and possibly also to your web-site. This is the export progress log. If publishing reports any errors, they will appear at the end of the log, with more details inside.

FTP (File Transfer Protocol)
FTP is a method of transferring files between computers over the Internet. To FTP files to your site means to upload them using the FTP built into SiteSpinner, or to upload them with some other program that has FTP capability.

While you normally use FTP for upload, you can also use it for download. It also has capabilities to browse and manage files on your server, allowing you to do such things as delete and rename files.

SiteSpinner has its own FTP built into it and uses that when you publish to your site or browse to it. Windows has FTP built into it, or you may prefer to use a separate program that has more features. One common and popular one is the freeware FileZilla.

Gradient fill
A gradient fill is a color that changes gradually from one shade to another - like this one:

High Render
High Render controls how the objects are displayed on your workpage (= high resolution). The only reason to turn it off is if your workpages update slowly. The downside is that your workpage view may then deviate from what you see when you publish. One-pixel lines may not display. This setting does not affect the published pages.

Set High-Render from the Quick Editor > Object tab or the Main Menu > Options.

HTML (HyperText Markup Language)
The code that tells your browser how to display a web page's words and images. You'll find it nearly everywhere on the web -- SiteSpinner creates HTML code when you preview or publish your project.

An i-frame is like a window frame on your page. What you see in that window is another page. This can be another page of your site, a page of any other site on the web, or an image or text file. Or indeed any other kind of file that your visitor's browser is equipped to handle.

When frames were first added to web pages, you had devote the whole page to the frames -- this page was and still is called the "frameset".  More recent developments allow you to place frames inline in a regular html page as well -- hence the abbreviation i-frame. I-frames can do most things the old frames could do, but more conveniently.

Javascript is a simple programming language for web pages. It can drive animation and such things as mouseovers and popups. For HTML pages built wth SiteSpinner Pro, you will often find a file, vmhtm25.js included in your project which contains most of this code in one place.

Media Type
The media type is the type of equipment (desktop or mobile) to view your pages. If you know the media type, you can design your web pages for that particular type. Some possible types are:
The browser will know what kind of system it is formatting for, and can report that to the code processing the web page. Then the code can alter its formatting to suit the media type.

Media Query
Sometimes Media Type is not enough to identify the device reading a web page. If so, a Media Query can help further. A Media Query consists of a media type and one or more expressions to limit the scope of the CSS. Among the media features that can be used in media queries are "width", "height", and "color". By using Media Queries, presentations can be tailored to a specific range of output devices without changing the content itself. For mobile design, we are particularly concerned with screen size -- e.g., we might regard anything with a screen width of 320 pixels wide or less is as mobile.

PNG 32 image format
A welcome addition to SiteSpinner is the PNG 32 image format. The color range is the same as for regular PNG (really PNG 24) which uses three color channels, each allowing 256 shades of Red, Blue and Green. PNG 32 adds a fourth color channel -- the so-called "alpha channel". This gives 256 levels of transparency ranging from fully transparent to fully opaque.

The advantage PNG 32 is that it is dynamic -- wherever the image is located, the current background can show through the transparent or translucent parts.

The workpage view gives a good idea of what your finished page will look like. But not always. Previewing allows to to look quickly at how the finished page will appear in a browser of your choice. Nearly always, this will exactly match how the final published page will look on your site.

Publishing is the act of converting your project file into HTML code and supporting files, mainly images. You can publish both to your local publish directory on disk and to your website.

Render and re-render
Render=draw on screen. All objects when displayed on screen are rendered or drawn.
When SiteSpinner re-renders an object, it usually modifies the object in some way, then re-draws the image on screen. The practical effect of this is that re-rendering an object always creates an image file, which will then form part of your web-page.

Put re-render off if you don't want SiteSpinner to create an image file. Sometimes this will have no effect -- if SiteSpinner can't do what you want without an image file, it will create one anyway.

If you make a permanent group of a group of objects, you may want to put re-render on in order to create a fresh composite image. Often this composite will be smaller than the sum of all the individual images -- so will load more quickly.

Root or Root Folder
The root folder of your site, is the one where your .html files are located. For a fresh site, it is not particularly clear just which is the root folder. It can have a variety of names like "wwwroot", "public_html" or "httpdocs". For a fresh site, the folder will be nearly empty -- often your host will put a page there saying your site is "coming soon". This can have several names, index.html (or.htm)  or default.html (or .htm). If you find such a page, that is confirmation that you are in the correct folder -- your root folder.

SVG (Scalable Vector Graphics)
An improved method of displaying graphics on web pages. SVG has never been very popular for desktop use -- however it is coming into its own for mobile use. SVG gives smoother animation than HTML and provides extra animation features like dynamic rotation and color changes. It requires that your browser be set up for SVG. Opera and some mobile browsers have it built in, while others, like IE8 require plug-ins. To install the free Adobe SVG viewer in IE8, (no support after Jan 2009) download it from here:

1. When you are displaying a page inside an i-frame, the target is the i-frame where the page is to be displayed. The name of the target is the geometry name of the i-frame. You can change the geometry name to make it easier to remember. See i-frame.

2. When you are designing a web page, you may have a particular size of browser window in mind. This is also referred to as a "target" size. Set the target size in the Project Options >  General tab -- 800x600 is a good choice for most purposes.

URL (Uniform Resource Locator)
A URL is a way of uniquely identifying anything on the Internet, be it file, image, or web page. Because it is unique, by definition, no two items can have the same URL.

The URL can be full or relative. In SiteSpinner you can enter just page names into the URL field of a link -- the assumption then is that the rest of the URL is the same as that of the page with the link. So a page link is relative to the current page.

What You See Is What You Get -- Pronounced wizzy-wig

When you work with SiteSpinner, what you see on your workpage is usually what you get when you preview or publish. Some items, like Code objects are not WYSIWYG, because they show their action only when you  preview or publish your page. When on your workpage, they show in a similar manner to text.

SiteSpinner logo
Gradient shading sample