Copyright: 1998 John E. Christgau


Contents
The Castle's SplitImage™

© 1998 John E. Christgau

Tutorial

Basic File Creation and Editing

Advanced Topics

Basics

Creating a New File

Opening an Existing Document File

The Preferences Dialog

Setting General Preferences

Setting HTML Preferences

Changing Colors

The Main Editor Window

Creating a hyperlink in an image cell

Creating ALT text for an image cell

Creating a subdocument from an image cell


Opening an Existing Document File

How to open an existing document

There are two ways to open an existing document file:

1. Select File|Open... from the File Menu

2. Click the Open button on the toolbar


Setting General Preferences

General tab of the Preferences Dialog

Use this tab of the Preferences Dialog to set the general operating options.

File Name and Number Separator

This is the character or characters that separate the file name from the numbering that indicates what cell the image file is for. This is also the separator between the main cell and the subdocument cell.

For example: If you use the default of an underscore ( _ ), the filename for an image in row 1, column 1 with a base name of test generated as a jpeg would be: test_11.jpg

File Numbering

These two options select whether you like to have the files use numbers, the default, or letters. In the above example, if you select letters, the filename would be: test_aa.jpg

Maximize documents when Opened or Created

Selecting this option will cause the document windows to maximize inside the application window when they are either opened or created.

Save Images As

This section is for choosing the output format for the generated image files.

You can select either windows BMP format or the internet standards of JPEG or GIF format.

JPEG Format Options

Compression Quality

Select the output quality of the generated images. The higher the number the better the image and larger the file. The smaller the number, the poorer the image quality and smaller the file.

Use Progressive Display

This option will create JPEGs that are "interlaced".

GIF Format Options

Use Interlaced File Format

This option will create GIF files that are "interlaced". This is similar to the JPEG option: Use Progressive Display.

Use Transparent Color

Select this option to create "Transparent GIFs". You can see through a certain color of the image to whatever is behind the image. To change the color that represents the transparent color you can either click the Change... button or double-click on the color sample.


Setting HTML Preferences

HTML Tab of the Preferences Dialog

Use this tab of the Preferences Dialog to set if and how HTML files are created when you select File|Generate Images... from the File Menu or click the Generate Images button on the toolbar.

Generate HTML Table code for images

Select this item to enable HTML table code creation

Code Indent

Sets the size of the indent used when generating the HTML code

Image File Root

Sets the root directory for the image files. Usually this is set to images. When the HTML code is created, the IMG tags use this as the basis for the SRC parameter.

For example: If you use images as the Image File Root, the IMG tag for an image file called test_11.jpg would look like this:

  <img src="images/test_11.jpg">

Show Links with a mark in the cell

Use this option to put an indicator in a cell that is either a link or a subdocument. Link cells have one small box in the upper right corner and subdocument cells have two small boxes in the upper right corner.

Display HTML after creation (requires IE browser)

This simply opens the HTML file in a window after the images and HTML code has been generated.


Changing Colors

Color tab of the Preferences Dialog

Use this tab of the Preferences Dialog to set or change the colors for the main application background as well as the background of the document editors.

You can either click the Change... button or double-click on the color samples.


Creating a Hyperlink in an Image Cell

Right click in the cell and choose Edit Cell... from the popup menu.

NOTE: If the cell is a subdocument, this option is disabled.

You can also double click the cell to get to the Edit Cell dialog. But, if the cell is a subdocument cell, this will take you to the tab representing that subdocument.

Edit Cell Dialog

Check the HREF check box and enter the parameter value in the text box next to it. You need to enter it the way the HREF parameter expects it.

For example: to link to your index.html page, you would enter: index.html

To link to a page on another site, you would enter: http://www.thecastle.com/software.html


Creating ALT Text for an Image Cell

Right click in the cell and choose Edit Cell... from the popup menu.

NOTE: If the cell is a subdocument, this option is disabled.

You can also double click the cell to get to the Edit Cell dialog. But, if the cell is a subdocument cell, this will take you to the tab representing that subdocument.

Edit Cell Dialog

Check the ALT check box and enter the text for the value in the text box next to it.


Creating a Subdocument from an Image Cell

Right click in the cell and choose Create Sub-Document... from the popup menu.

NOTE: If the cell is already a subdocument, this option is disabled.

You will now have a new tab in the document window for the subdocument. You can split and edit this as if it were a whole document on its own. The only limitation is that you cannot make a subdocument in a subdocument.


Creating a New File

How to create a new document

There are two ways to create a new document file from an image:

1. Select File|New... from the File Menu

2. Click the New button on the toolbar


Basic File Creation and Editing


Basic File Creation and Editing

How to create a new document and use the editing features

Follow these ten simple steps to create your first SplitImage document:

Create the Main Document

1. Select File|New... from the File Menu or click the New button on the toolbar

2. Select an image file to load and click Open

The main document is now displayed.

Create More Rows and Columns

3. Right Click in the picture and select Split Column from the popup menu

4. Right Click in one of the two cells in the picture and select Split Row from the popup menu

5. Adjust the sizes of the rows/columns by clicking and dragging the split bars on the edges of the main document

You now have a 2 row by 2 column document with the rows and columns sized the way you want them.

Create a Hyperlink in a Cell

6. Double click in a cell to bring up the Edit Cell Dialog

7. Click HREF and type test.html into the edit box

8. Click ALT and type Test into the edit box

9. Click OK or press Enter

You have just created a hyperlink to a document call test.html with the ALT text "Test"

Create a Subdocument in a Cell

10. Right click in a different cell and choose Create Sub-Document..

The program creates the subdocument and takes you to the approprate tab in the main document. You can divide this up as you did the main document. You can also create links for each of the subdocuments cells. The two limitations are that you cannot create a subdocument inside a subdocument and you cannot resize the main documents rows/columns while there is a sub document.

TIP: Double-clicking in the cell with the subdocument while on the main document tab will take you to this tab as well.


Advanced Topics

How to use the advanced document editing features

There are several advanced features for document editing.

SubDocuments

A subdocument is a "table within a table" in HTML terms. The basic idea is to take a cell in the main document and divide it up into smaller sections.

For example: If you create a main document that is a 2 by 2 table. The main website logo or image is in the first cell. Next to that is the further home page title. Below the first cell, you would create a subdocument that is made up of the separate menu options for your website, each with a link to the appropriate page.

see also: Creating a subdocument from an image cell

The Processor Tab of the Row Column Editor Dialog

Use this tab of the dialog to create divisions in a document that are either a certain size for each row/column or a certain number of rows/columns.

For example: If you want to create divisions for each of 8 menu options inside an image and each menu options is 20 pixels in height and the width of the image is 100 pixels, there are two options.

1. Select Create Evenly Spaced Columns and Rows and put 1 in for the columns and 8 in for the rows.

2. Select Create Columns and Rows of Specific Size and put 100 in Column Width and 20 in Row Height.