SiteSpiinner Pro Tutorials: Previews

Previews

Previewing consists of two stages:

SiteSpinner builds the required files to a temporary folder
Your computer displays the html page for the current workpage in your browser.

In this tutorial we examine the various preview options available, and other topics relating to previews:

Default browser -- what it is, and how to set it
Built-in Opera browser -- on the preview tab
Small screen mode and preview width -- for mobile
Combined CSS -- for desktop and mobile
Preview in other browsers
Define a new browser
Opera Desktop browser
Opera Mini browser
The Preview files -- changing the preview folder, viewing and deleting files.
Adding files to the preview folder

Default browser

The basic preview from the hot keys F7 and F8, or the spyglass buttons, uses your default browser for the preview -- that is the one that should open if you double-click on an html or htm file. On a new computer, this will usually be Internet Explorer.

Sometimes after uninstalling a browser, nothing happens when you double-click an html file, or Windows will start a dialog asking what program to use to open the file. You can follow this dialog, or open the browser you want and look for the setting that makes this browser the default. Eg:

IE8: Files > Tools > Internet Options > Programs tab > Make Default button
Firefox: Tools > Options > Main tab > Check Now button
Opera: Tools > Preferences > Advanced > Programs > Check if Opera is default browser on startup

Follow the above steps if you want a different default browser to your current one. If a browser other than the three listed above, you will need to search for the equivalent feature that makes it the default.

Other ways of setting a default browser are:

Set your Windows File Association for html and htm files
Via the Windows Start Button > Set Program Access and Defaults

Built-in Opera browser

SiteSpinner Pro has the Opera browser built right into it. This means that to view your site in Opera, you don't need to have Opera actually installed. To preview the page, just click the Preview tab at the top left of your workspace. This should show two tabs like this:

Compared to the preview via hot key F8 or the double-page spyglass button, you can't preview "All". This means that links may not necessarily show the destination page. In this regard, the Opera preview is like a single page preview -- it previews only the current page. If the non-working links are a problem, use Preview All (double-page spyglass button or hot key F8). This will build all pages of the project, so that they are accessible to any browser including the built-in Opera browser.

When you click the preview tab, you will see a simple browser toolbox (shown above). Some of the buttons you will already be familiar with, as they have brothers in your normal browser. Those buttons are "rectangled" in red: forward a page, back, reload, stop and print -- we won't consider them further here.

But we will consider the other controls. The first is the one is the handheld button:

Small screen mode and preview width

The "Toggle small screen mode" button (rectangled above) activates the Opera Small Screen Rendering (SSR) mode. The same mode is available from the stand-alone Opera browser main menu > View > Small screen (Shift + F11 in that browser).

Associated with SSR mode is a drop-down list to control the size of the small screen.

Select the size you want and the size of the small preview panel will change immediately, with scrollbars if necessary.

In the same manner, with small screen mode toggled off, you can control the width of a desktop preview.

Combined CSS

The normal project mode here is "Combined". Because SiteSpinner Pro uses CSS to control the layout of both mobile and desktop displays, "Combined" sets the browser to use this CSS, and depending on the context, it will use either the mobile or the desktop CSS.

If you don't want this, but rather want the browser to use only Mobile CSS or only Desktop CSS, choose one of the other settings the Project Options > General tab > Publish Format group -- this will give you the setting permanently (next image).

Preview in other browsers

On the top of your workpage in the Publish toolbar is a drop down list of browsers, headed by the default. If you have other browsers installed, it will show these too. Select whichever browser you want, then to preview, click one of the preview spyglass buttons or hot keys.

To add another browser to the list, or amend the way the browser starts up, see the next section.

Define a new browser

The image above shows the settings to define a new browser -- available from the main menu > Options > Preview Options. There is a drop-down list of browsers already set up -- this should show the commonly used browsers if you have them installed.

There are buttons to add a new browser and remove or edit an existing one. Removing a browser removes it only only as far as SiteSpinner Pro is concerned -- it doesn't uninstall it from your computer. There is also a button to restore the browser list to the original -- in case you screw up badly.

A checkbox allows you to set the standalone version of Opera to operate from the Preview tab instead of the built-in one. The advantage of this is that the standard Opera plug-ins like sound will work too -- they don't from the built-in Opera.

The Edit button allows you to edit your browser settings. Clicking on it should produce a display like this:

The Executable box hold the path and name of the browser, here firefox.exe -- or it would if the edit box was big enough. Although you can type directly into the Executable box, we suggest you use the small browse button (rectangled) -- this avoids the possibility of typos. When browsing for a browser, you will be looking for a file of type .exe in the install folder(s) for your browser, usually under C:\ProgramFiles\.

The parameters shown in the image above "[%PATH%][%FILE%]" are computer-speak for the file path and file name of the file to be displayed:

The [%PATH%] is the path to your preview folder
The [%FILE%] is the name of the current page showing in your workpage

To avoid problems, wrap the whole thing in double quotes -- some browser need them and some don't.

Normally you wouldn't change either parameter, but you can for special purposes. Suppose you want to always preview some page elsewhere on your hard disk. Then you might enter something like this instead: "C:\MySpecial Folder\MySpecialFile.html".

Opera desktop browser
The Opera desktop browser has features that allow you test the mobile versions of your pages. In the desktop version, use View > Small screen. If your page does not have a handheld CSS, this will use Small Screen Rendering to reformat the page in the same way as the Opera Mobile browser. Resize the window to see how it works at different resolutions. If your page has a handheld CSS, it will use that, in the same way as Opera Mobile. You can also use View > Fit to width, to see the reformatting for different sized devices.

Opera Mini browser http://www.operamini.com/demo/
Real Opera Mini, running inside a phone emulator. To view your site, select the menu > address and enter the URL for the page you want to view. To view your page in Opera mini once it is online, add this link to your page:

The Preview files

As explained previously, when you preview a page or project, SiteSpinner first generates the html page or pages required then your computer opens the current page in your default browser, or whatever other browser you have set.

The default location for the html pages (preview files) is a temporary folder under your Windows user name, shown in the left-hand edit box of the image below. In the process, SiteSpinner will, if necessary, create a Geometry folder to store any image files it creates.

There are automated clean-up program that will delete temporary folders -- this means your preview files! Generally it won't matter if everything is deleted -- but it does mean that you have to preview "All" again.

This is unlikely to cause a problem if you work on single small projects; however, if you have two or more interlinked projects, or large projects that take a while to fully build, or you keep special files in your preview folder, you may wish to avoid this automatic deletion. Do so by changing the location of your preview folder -- click the Browse button and follow the dialog. You can use an existing folder or create a new one -- but make it outside the Temp folder!

Other options here allow you to:

Reset to Default: sets your preview folder back to the Temp folder
View Files: opens a normal Windows Explorer window. Not only can you you view the files, you can also copy and paste to or from.
Delete Files: will delete everything in the folder, even files you might have write-protected.

Some good reasons to delete preview files:

Free up disk space
You want to know what files your page creates. Delete preview files, preview your page, then go see what files have appeared
If you have more than one project, you may need to avoid confusion between projects
Your projects may preview faster -- if you have many months of clutter.

Adding files to the preview folder

Sometimes, you will use special code that requires files (often images) to be in a particular place on your site. Blank link types do this too. Often this will be the root folder of your site. Or it may be a folder under your root folder, perhaps called images/, not to be confused with the one called image/ used by SiteSpinner.

This poses a problem in preview, because unless you make changes to the code or links, previewing will give "file not found" errors. Fortunately, for previewing, the root folder is just the preview folder itself -- the one that contains your html files. So the answer for files that will be in your site's root folder, is to duplicate them in your preview folder.

For other folders under the root folder, say /images, duplicate the images folder in your preview folder, and put any special images you want there. You could use this arrangement for any folders that are at different levels below the root folder of your site.
The idea is to duplicate the folder structure of your site in your preview folder, considering the preview folder as the root folder. Then you can preview normally.

To put something in your preview folder, use the View Files button. Then you will be able to create any special folders inside your preview folder, alongside the existing geometry/ folder. Use Windows Explorer to copy the special files into the correct places of your preview folder.

Doing this won't actually create the folders or files on your site -- the only reason is to allow you to preview.

As the preview folder is a temporary folder, it is subject to deletion during cleanup operations. For this reason, only put files there that you can afford to lose. Or shift the location of your preview folder. See Preview files.

The Embed File or Media tutorial has an example of a Flash object that expects two images in the root folder.