Copyright: ®1998 Terry Lee Rasmussen


Contents

Introduction

Welcome to Web Thumbnailer's Help file!  Web Thumbnailer is a simple application to use, making the often tedious task of creating thumbnails and placing them on a web page a snap!  However, if you really want to get into all of Web Thumbnailer's functions and options, then keep looking -- and good luck with those thumbnails!

Procedures (How to...?)

Click on any of the links below to learn how to perform certain functions with Web Thumbnailer.

•	Overview

•	What is a Thumbnail Image Table?

•	Saving Thumbnails and Images

•	How do I place my thumbnails in a particular order?

•	What do I do after I have created my Web Page?

•	Modifying a Generated HTML Document

Screen Shots

Click below on the name of the screen you want to know more about.

•	Web Thumbnailer's Main Screen

•	The "Generate HTML" Screen

•	The "HTML Editor" Screen

•	The "Preferences" Screen

References

Menus

Index

Glossary


Menus

Jump to the various menu items using the links below.

File Menu

HTML Menu

Images Menu

Listing Menu

Windows Menu

Help Menu

Context Menus


File Menu

Open Image Directory

Provides an interface to select a directory.  All supported image files within this directory will be loaded and displayed as thumbnails.

Open an Image

Provides an interface to select a single image file.  This file will be loaded and displayed as a thumbnail image.

Clear All Thumbnails

Selecting this menu item causes Web Thumbnailer to destroy all loaded thumbnails.

Preferences

Shows the Preferences screen.

Exit

Exits Web Thumbnailer.


HTML Menu

Generate HTML Code...

Once all desired thumbnails are loaded, this menu options allows the user to configure the display of his/her thumbnails by way of fine-tuning HTML Tag data.  This fine-tuning is accomplished via the Generate HTML screen, which consists of a graphical interface to easily modify HTML data.

Editor...

Shows the HTML Text Editor.  Displayed in this manner, the Editor can be used to edit any HTML file.  The Editor will not display HTML code for the visible thumbnails unless it is entered via the Generate HTML screen (see above).


Images Menu

Save Thumbnails

This menu item allows the user to immediately save all displayed thumbnail images.

Save Images

The Save Images menu option allows the user to copy all full-size images (upon which the thumbnail images are extracted) to a specific directory.  This can be extremely useful as a matter of simple organization in the event where many thumbnails are displayed, all loaded from images that reside in various directories.


Listing Menu

Alignment

This menu option allows the positioning of the Listing window either at the top, bottom, left or right of Web Thumbnailer's Main screen.  If the Listing window is placed at the bottom of the screen, the status bar will move to the top of the screen; otherwise the status bar is always located at the bottom of the screen.

Hide

Check this menu item to show the Listing window; check it to hide the Listing window.


Windows Menu

Cascade

Arranges windows (except the Thumbnail Listing window) in a manner where all windows will overlap in a diagonal pattern.

Tile

Arranges windows (except the Thumbnail Listing window) in a manner where thay are displayed overlapping in columns and rows.

Mosaic

Arranges windows (except the Thumbnail Listing window) in a manner where they are displayed side-by-side; they do not overlap.

Toolbar

Check this menu item to display the Main screen's toolbar.  Uncheck it to hide the toolbar.

Status Bar

Check this menu item to display the Main screen's status bar.  Uncheck it to hide the status bar.


Help Menu

Contents

Displays this Help File.

Registration

Displays the Registration screen; this provides information on how to register your copy of Web Thumbnailer.  If you have already registered, it displays your registration number.

About

Displays Web Thumbnailer's About screen.


Context Menus

Below are descriptions of a number of context menu items that can be accessed in Web Thumbnailer by right-clicking on an object.

View Image at Full Size

The current Thumbnail Image (whether it is clicked on or highlighted in the Thumbnail Listing window) will be expanded to its normal size in a new window.  Click on this new window to remove it from Web Thumbnailer's desktop; this must be done before anything else can be done in Web Thumbnailer.

Show Thumbnail

The highlighted Thumbnail Image will be made the current window  The window's caption will flash for a few seconds, making it easier to locate.

Remove Thumbnail

The current Thumnail will be removed (deleted).

Properties

This show the standard Windows Properties Dialog Box for the selected file.

Hide This Menu

Hides the current context menu.


Index

#

8-bit color depth

A

Arranging Thumbnails in a Particular Order

Arranging Windows after Loading

B

Background Properties Tab

C

Cancel

Close

Contents

Context Menus

currently selected thumbnail

D

Directions

Directory Thumbnail Load

DragonWorks HTML code

Duplicate Image Warning

Duplicate Images Notification

E

Editor

F

File Menu

Finishing Up

Font Properties Tab

Full Page Code

G

Generate Code Button

Generate HTML

Generated HTML Code

Generating HTML Code

Glossary

H

Help Menu

HTML Editor Menus

HTML Editor

HTML Menu

HTML Page Code

HTML Parameters

HTML Text Editor

I

Images Menu

Index

J

JPG

L

Listing menu

Listing window

Listing window

Loaded Thumbnail

M

Main Screen

Maximum Thumbnail Size

Menus

Modifying a Generated HTML Document

O

Open HTML File

Order

Overview

P

PNG

PNG

Preferences

Preferences

S

Save HTML File

Save Images Preferences

Save Images

Saving Images

Saving PNGs

Saving Thumbnails and Images

Saving Thumbnails as PNGs

Saving

Saving

Status bar

T

Table Properties Tab

Thumbnail count

Thumbnail Image Table

Thumbnail Listing

Thumbnail Order

Thumbnail Properties Tab

Thumbnail Size

toolbar

V

View HTML File

W

Web Thumbnailer's Main Screen

Windows Menu


Glossary


Background Properties Tab

The tab defines information for the table background.  Refer to the option descriptions below the screen shot.

Background Image

If a picture or image is desired to be displayed as the table background (behind all thumbnails and associated text), check the "Use Background Image" checkbox and press the Browse "..." button to locate a valid image file.  The file, if valid, will be displayed in the picture box in the lower right of the Tab.

Background Color

If no image is selected to be the background image file, then a color will be the background.  By default, this will usually be the background color of the entire web page.  If you do not wish to use the default color, uncheck the "Use Default Background Color" check box and select a color using the Color Button below the check box.  The default color can always be re-instated by re-checking the "Use Default Background Color" check box.

Caution:  If the "Use Background Image" check box is selected, the background image will take precedence over the background color.


Cancel

This closes the Generate HTML screen.  Any parameters for individual thumbnails (see the "Thumbnails" tab) that have been modified from the default values in this screen will be lost.


Close

Closes the currently open screen.


Directory Thumbnail Load

Determines whether thumbnail images are organized once they are loaded.  Please refer to the Windows Menu for descriptions of the organization choices.


DragonWorks HTML code

This is a link to DragonWorks Software that is displayed above your table of thumbnail images.  This line of HTML code is only generated in unregistered versions of Web Thumbnailer.  This code can be removed if desired.


Duplicate Images Notification

If this preference is checked, Web Thumbnailer will display a message every time an image is attempted to be loaded that already has a corresponding thumbnail image displayed.  The image will therefore not be loaded.  Uncheck this preference if you do not wish to be notified of this event.


Finishing Up

Now that you have saved your thumbnail web page creation, you're done with Web Thumbnailer; but let's make sure you have used a couple of Web Thumbnailer's time-saving functions first...

Make sure that you have also used Web Thumbnailer to easily save your collection of thumbnail images and their associated images to easy to locate folders.  (Web Thumbnailer asks whether you would like to save these immediately after you save your web page HTML code in the HTML Editor Screen.  Remember that saving your HTML code does not automatically save your thumbnails!  And even though you already have your full-size images somewhere on your hard drive, let Web Thumbnailer copy them to another directory you choose.  This way you don't have to hunt for all of those images again when you need them!)

Lastly, just use your standard FTP file transfer application to upload your thumbnails, images and web page to your server.  Good Luck!


Font Properties Tab

This tab defines font properties for the Web Thumbnailer generated image table.  The list following the screen shot describes all of the options within this tab.

Font Size

This determines the font size of any text displayed in the thumbnail image table.

Font Bold

This determines whether the font used in the thumbnail image table is bolded or not.

Font Type

This option determines the font used in the thumbnail image table (if text information is displayed).  The web page's default font will be used if the "Default" checkbox is selected.  If this checkbox is unchecked, then the font listed after the "Other" label will be used.  This non-default font can be selected by pressing the button after the "Other" label.  (Caution:  if a non-default font is used, be sure it is a common one.  Users can only see this particular font if it is installed on their local computer.)

Font Color

This option determines the color of the font used in the thumbnail image table.  The web page's default color can be used by checking the "Default" checkbox.  If this is not selected, then the color shown by the "Other" box will be used.  This can be changed by pressing the button next to the "Other" box.

Display File Name

Checking this option will display below the thumbnail the file name of the full-sized image that the thumbnail represents.

Display Image Size

Checking this option will display below the thumbnail the size (in pixels) of the full-sized image.

Display File Size

Checking this option will display below the thumbnail the file size (in kilobytes) of the full-sized image.


Full Page Code

Checking this option informs Web thumbnailer to generate a complete HTML document around the thumbnail image table.  Use this if you intend the generated page to be a stand-alone web page; otherwise the generated thumbnail image table HTML code can be copied and pasted into any HTML web page.


Generate Code Button

Press this button when you have set all of your desired parameters and wish Web Thumbnailer to generate your web page/thumbnail image table.


Generate HTML
The Generate HTML Screen

Below is a screen shot of the Generate HTML Screen in action.  Click on the screen and refer to the descriptions following the screen shot to learn about all of the options in this screen.

Parameters section

This section lists variables for creating your thumbnail image table/web page and saving thumbnails and full-sized images.

"Web Site Image Directory"

List the directory on your web site where you wish to place your full-sized images.  (This is usually called "images".)  For example, if your complete URL (web address) where you wish to store your images is "http://www.Majordomo.net/dragonworks/images", then enter "images" here.  Do not place your entire URL as Web Thumbnailer will then not be able to temporarily save your thumbnails to disk so you can preview your generated web page.

"Web Site Thumbnail Directory"

This is the same as the "Web Site Image Directory", except this is the directory where you wish to place your thumbnail images.  This can be identical to the directory entered in "Web Site Image Directory".

Options Tabs section

This section contains modifiable variables and options that determine the appearance of your web page and thumbnail image table.  Follow the links below for information on the Tabs.

Table Properties Tab

Background Tab

Font Properties Tab

Thumbnail Properties Tab


Table Properties Tab

This Tab provides parameters for the general appearance of the table in which your thumbnail images will be displayed.  Descriptions of its various elements follow the sample screen shot below.

Columns

This adjusts the number of columns in the thumbnail image table.

Rows

This adjusts the number of rows in the thumbnail image table.

Suggested Number of Cells

This is the text area to the right of the Columns and Rows adjustment boxes.  In this area you will always find a comment informing you of how many more cells (determined by mutiplying Columns and Rows) are needed to display all of your thumbnail images.  If too many cells are present, it will inform you of how many "empty" cells there will be in your thumbnail image table.  The comment will always be accurate as you change Column and Row values.

Border

This determines the border thickness (in pixels) surrounding your table and cells.

Border Color

This is the color of the table border.  Select the "Default" option to use the browser's default color for table borders.  If the "Default" option is not selected, then Web Thumbnailer will use the color specified; this can be selected using the color button to the right of the color indicator.

Cell Spacing

This determines the amount of space between cells in the table.

Cell Padding

This values determines how much space between the cell edges and its contents, namely the thumbnail image.


Thumbnail Properties Tab

This tab displays a number of options that can be assigned to each individual thumbnail image.  Use the horizontal scroll bar on the right side of the tab to change from one thumbnail to another.  The corresponding option values will change accordingly.

Refer to each of the option descriptions below the screen shot for information on individual options.

Caption

The text displayed in place of the thumbnail while the thumbnail is loading.

Horizontal Spacing

The space between an image and the text to its left or right.

Vertical Spacing

The space between the image and the text below (or above) it.

Border

The border thickness (in pixels) that surrounds the thumbnail image.  The color of the border will depend on the default link color.

Link

The file name of the full-sized image to which the thumbnail links.  Changing this name will cause the full-sized image to be saved under this name when the full-sized images are saved.

Default Frame

The name of the default frame in which the full-sized image will be loaded.  If left blank, the image will load in the same window as where the thumbnails are displayed.  (The user can then return to the thumbnails by pressing his/her browser's "Back" button.)


Generated HTML Code

This section of HTML Code is generated by Web Thumbnailer as a direct response to your thumbnails and HTML preferences as assigned in the Generate HTML screen.


HTML Editor
The HTML Editor Screen

Below is a screen shot of the simple text editor that is included with Web Thumbnailer.  From here you can save and view your completed thumbnail web page.  Click on areas of the screen shot to learn about its functions.


HTML Editor Menus

File Menu

The Open, Save, View and Close functions can all be accessed here.  They all function the same as their counterpart buttons along the bottom of the HTML Editor screen.

Edit Menu

Standard Edit functions are provided for in this menu:  Cut, Copy and Paste.  For the Cut and Copy functions to be enabled, text within the HTML Editor must be highlighted.  All functions work with the standard Windows Clipboard.


HTML Page Code

This section of HTML Code (along with a footer at the end of the HTML document) is generated if the "Include Full Page Code when Generating HTML Code" option is selected in the Generate HTML screen.


Loaded Thumbnail
Loaded Thumbnails

These are examples of thumbnails generated by Web Thumbnailer.


Main Screen
Web Thumbnailer's Main Screen

Below is a screen shot of Web Thumbnailer's Main Screen.  Click on various areas of the image to learn more about it.


Maximum Thumbnail Size

These parameters specify the maximum size (in pixels) of the displayed thumbnail images.  Regardless of these values, all loaded images will retain their aspect ratios.  Thumbnails already created by Web Thumbnailer will not be affected by changes in these values; subsequently created thumbnails will be affected.


Modifying a Generated HTML Document

The HTML Code (as viewed in the HTML Editor) can be modified directly; however, it is recommended that any changes needed are accomplished via the Generate HTML screen.  The HTML code can then be "recompiled".  The reason for this is that any manual changes to, for instance, thumbnail and file names will not be taken into account when those files are saved.

The web page that Web Thumbnailer generates, once saved, can also be modified by other HTML editors (text and graphical interface based), such as Hot Dog or Front Page Express.  Simply save the file in Web Thumbnailer's HTML screen and then load that file with the third-party editor.


Open HTML File

Opens any HTML document.  The Document is loaded into the HTML Editor for editing.  The file can be saved by using the "Save" button.


Overview
Web Thumbnailer Overview

Web Thumbnailer makes creating proportional thumbnails for your web pages easy -- it even creates the HTML code for you!  Follow the few easy-to-follow steps below to create your own thumbnail web page.

1 	Start Web Thumbnailer

2 	From the "File" menu, choose either "Open Image Directory" or "Open an Image" to load in supported image files.  Choose "Open an Image" if you want to load in a particular single image.  Or select "Open Image Directory" if you want to load in all images within a certain directory.  With the latter, just click on a directory and then select any file within it.

3 	Your thumbnails have now been created, and you are ready to determine which ones you wish to display on your web page.  Simple!  If you don't want an image, just close its window; if you want an image, keep its window open.

4 	Now your ready to define some options for your web page.  From the "HTML" menu, select "Generate HTML Code...".  This opens the Generate Code screen.  In this screen you can establish your desired look for your table of thumbnail images; colors, fonts, displayed thumbnail information and table arrangement is all modifiable, in addition to other items.

5 	Once you have the look of your web page determined, press the "Generate Code" button.  This will bring up the HTML Editor screen containing the HTML code needed to display your web page.  From here you can see what your table of thumbnails will look like (press the "View" button), save your web page and its associated images (press the "Save" button), or return to the Generate Code screen to redefine some of your HTML parameters.

6 	Once you have saved your web page HTML code and its associated files, you're done with Web Thumbnailer!  Just load the saved files up to your web site with an FTP application (or equivalent).


Preferences
The Preferences Screen

Below is a screen shot of the Preferences Screen.  Click on any area that you wish to receive more information about...


Save HTML File

Saves the currently displayed HTML File.  If the Editor screen was reached by generating HTML Code (via the Generate Code screen), the user will also be asked whether he or she wishes to save the current thumbnails and their related full-size images.  (These last two functions operate the same as the "Save Thumbnails" and "Save Images" menu items.)


Save Images Preferences

Web Thumbnailer offers several choices when it comes time to saving the thumbnails it has generated.  Refer to the items below for detailed descriptions.

Save Thumbnails as:

Specify the type of file format in which the thumbnail images will be saved.  The two selections are JPG (JFIF standard as "defined" by the Joint Photographic Experts Group) and PNG (Portable Network Graphics format).  The JPG format allows better compression (resulting in a standard thumbnail size of 3-4 K), whereas the PNG format can be stored in a 8-bit (256 colors) or 24-bit (True Color) format.  Both formats are readily supported by all major browsers.

File Name Prefix:

Each thumbnail is saved with a "prefix" to differentiate it from the full-sized image it represents.  For example, if a thumbnail for the image "Chihuahua on the Beach.jpg" was generated, when the thumbnail is saved it would be saved with the prefix and the original file name ("WT_Chihuahua on the Beach.jpg").  This prefix can be defined here; the default is "WT_".

Progressive Format:

If selected, the thumbnails will be saved in a progressive sub-format of JPG or PNG.  This means that as the image is displayed over a communications link (such as the internet) they will be displayed very quickly in a low-resolution image followed by gradual improvement of detail.

Color Depth:

Applies to the PNG file format only.  PNGs can be saved in 256 colors (8-bit) or in millions of colors (24-bit).  8-bit images will result in smaller file sizes.  See Saving PNGs for more details.

Quality (Compression):

Applies to the JPG file format only.  JPGs can be saved with varying degrees of compression.  A value between and including 5-100 may be entered.  A value of 100 gives the best quality (little compression).  A value of 5 will give poor quality (but high compression).  A value of 75 is usually considered "normal".


Saving PNGs

A quick note about saving thumbnails as PNGs:  When a thumbnail is saved using 8-bit (256 colors) Color Depth, the actual color depth of the thumbnail is changed.  If these thumbnails were in turn saved as PNG 24-bit or JPGs, they would be saved as 24-bit images, but the color depth would in reality still be 8-bit.  In order to restore the full color depth of the thumbnails, they must be re-generated (opened) by Web Thumbnailer.


Saving Thumbnails and Images

Saving thumbnails and full-sized images can be accomplished in two separate ways.

1)  Saving Thumbnails and Images without generating HTML code

From the Images Menu of the Main Screen, the user can save either thumbnails or full-sized images that the displayed thumbnails are associated with.

2)  Saving Thumbnails and Images after generating HTML code

Once HTML code is generated, viewed, and approved, press the "Save" button (in the HTML Editor screen).  The HTML code will be saved as a HTML document.  The user will then be questioned as to whether or not he or she wishes to save (first) the displayed thumbnails and (second) the associated full-sized images.  If you intend to use the saved HTML document, it is imperative that these images are saved.  The thumbnails must be saved (as they were generated by Web Thumbnailer), and it would be a good idea to save the full-sized images as well, even though they were loaded from files already existing on your hard drive.  It is much easier to save the full-sized images in one directory (possibly along with the thumbnails) and have easy reference to them in the future, than to have to search through possibly dozens of directories on your hard drive at a later date trying to find all of the files needed for the thumbnails.

For both of the above procedures, select a directory (from the save dialog box which appears) in which to save the thumbnails and images.


Status Bar

Along the bottom of the main screen is a status bar that displays information about the number of thumbnails displayed, and the currently selected thumbnail image.


Thumbnail Image Table
What is the Thumbnail Image Table?

The "Thumbnail Image Table" is an HTML Table (Table Tag), comprised of cells, columns and rows, that Web Thumbnailer creates based upon your thumbnails and parameters that you specify.  Each thumbnail image will reside in a cell.  The total number of cells will be determined by the number of rows and columns.

The table object performs the task of keeping your thumbnail images organized nicely.  It also has the added benefit of being supported by all major internet browsing software.


Thumbnail Listing

The Thumbnail Listing displays a list of the thumbnails currently open in Web Thumbnailer's Main Screen.

Thumbnails within the list can be deleted by right-clicking the desired thumbnail and choosing the "Delete" menu.  Other functions can also be accessed by right clicking on any listing.

The order the thumbnails are listed in is the order in which they will be displayed on the generated web page.  By default, all thumbnails are listed alphabetically by file name.  They can also be easily ordered by File Size and Path Name by clicking on the corresponding column headings at the top of the list.  If a custom ordering is desired, uncheck the "Auto Sort" checkbox, highlight the desired list item to move, and then press the "Up" and/or "Down" buttons (next to the Auto Sort checkbox) until the list item is in the desired spot.  The "Up" and "Down" buttons can be used with any thumbnail listed in the Thumbnail Listing.  To return the listings to sorted order, re-check the "Auto Sort" checkbox.


Thumbnail Order

The order in which the thumbnails are listed in the Thumbnail Listing window (found in the Main screen) is the order in which they will be displayed on the generated web page.  By default, all thumbnails are listed alphabetically by file name.  They can also be easily ordered by File Size and Path Name by clicking on the corresponding column headings at the top of the list.  If a custom ordering is desired, uncheck the "Auto Sort" checkbox, highlight the desired list item to move, and then press the "Up" and/or "Down" buttons (next to the Auto Sort checkbox) until the list item is in the desired spot.  The "Up" and "Down" buttons can be used with any thumbnail listed in the Thumbnail Listing.  To return the listings to sorted order, re-check the "Auto Sort" checkbox.


Toolbar

Along the top of Web Thumbnailer's Main screen is a toolbar that allows the user quick access to functions found in the Main screen's menus.  The toolbar's buttons and their related menu item are specified below.

•	Open Directory -- File\Open Image Directory

•	Open Image -- File\Open an Image

•	Save Images -- Images\Save Images

•	Save Thumbs -- Images\Save Thumbnails

•	Generate Code -- HTML\Generate HTML Code...

•	Listing Align -- Listing\Alignment...

•	Cascade -- Windows\Cascade

•	Tile -- Windows\Tile

•	Mosaic -- Windows\Mosaic

If not all of the toolbar buttons are visible, try maximizing the Main screen or trying a larger screen resolution.

The toolbar may be hidden by de-checking the "Toolbar" menu item beneath the Windows menu.


View HTML File

The currently displayed HTMl Document or code will be displayed by your default Web Browser (such as Microsoft Internet Explorer or Netscape Navigator).