To create a web page, you can use the Web Page Wizard command (Ctrl/W) or the Instant Web Page command (Shift/Ctrl/W) both of which can be found under the Thumbnail menu.
Web Page Generator
Web page creation is performed in the following way. The web page generator:
- Reads the images from the current location (source location).
- Optionally copies them to your specified output folder.
- Copies the browser thumbnails to the output folder as JPEG files (optionally under a subfolder).
- Creates a HTML document (default file name
index.htm) which presents the images as clickable thumbnails. - Optionally creates separate web pages for each image with navigation links to the next and previous pages, and to the main page.
The Web Page Wizard allows you to set up the creation process by providing all the information the generator needs to create a web page of your design. Once the Wizard has been completed, the settings are saved (for that location ).
The Instant Web Page command then provides a quick way to re-create the page using the same settings. If you have not run the Wizard for a given location, the Instant Web Page command will generate a page using sensible defaults for all the settings.
Web Page Wizard - Details
The Web Page Wizard contains many settings which can be used to alter and fine-tune the appearance of your web page.
Web Page Wizard - Page 1
Wizard Page 1
Page 1 introduces the Wizard.
- The Import Settings button allows you to import the settings that you may have saved on a previous run of the Wizard. See Page 10.
At the bottom of this and all other pages, you are shown the folders that will be used:
- Source image location is the location of the source images. This is the current location of the browser from which the Wizard was launched.
- Main HTML output file is the full path to the HTML file which will be created. The folder can be changed on Page 2, and the name of the file can be changed on Page 3.
- Folder for thumbnail files shows where the thumbnail files will be copied to. This is usually the same as the HTML file output folder, but it can be changed on Page 4.
- The Safe saves option, when enabled, causes PMIO to ask for your permission to overwrite the HTML file.
- The Clean Up button is enabled if the Wizard has been run before with the same output folder. It allows you to automatically delete all the files that were placed in the output folder by a previous run of the Wizard.
- The Preview button allows you to run the generator and get a preview of the web page that would be created using the current settings.
Web Page Wizard - Page 2
Wizard Page 2
- The Image Folder Properties button provides a quick way to lauch the location properties dialog for the current location. This lets you set or edit the HTML memo.
- The Change Output Folder button allows you to choose a different output folder for the copied images and HTML files. It's usually a good idea to store the output separately from your original images, perhaps in a subfolder called Web. If you do not change this, then the images will not actually be copied, and as a result, the Resize option on Page 9 will not be available. This is because PMIO can only resize copies of the images, not the originals. PMIO strives to never modify your original image files.
- In the diagram above, you can see the result of changing the output folder to
C:\Temp\Big Ben
Web Page Wizard - Page 3
Wizard Page 3
- Generate HTML file lets you change the name of the HTML file.
- Compatibility lets you choose how file names should be encoded in the generated HTML files. DOS uses MS-DOS file names with backslashes. UNIX uses UNIX-compatible file names with forward slashes. This is the default and can usually be left as is. Macintosh is not yet implemented but is intended to provide extra compatibility when the web page is viewed on Macintosh computers.
- Heading lets you set the page heading. Any HTML code is allowed here.
- Title lets you set the page title. This appears in the browser title bar. It does not allow HTML tags.
- Description is intended for META tags that give a description of the page.
- Keywords is intended for META tags that provide keywords for search engines. Separate keywords with a comma.
Web Page Wizard - Page 4
Wizard Page 4
- Optional subfolder for image files on web server allows you to specify a subfolder on the server where you will later place the image files. Usually this can be left blank.
- Optional subfolder for thumbnail files allows you to specify a subfolder where the thumbnails will be placed relative to the HTML output folder.
- In the diagram above, you can see the result of changing this setting to
thumbs.
Web Page Wizard - Page 5
Wizard Page 5
- The main web page is generated from a standard template in the PMIO installation folder. You can click Edit Template to launch your default text editor and edit the template. This is an advanced feature for users who need more control over the final page. You can use this to add special HTML to all main web pages created by the Wizard, to add style sheets or a background image, and so on. The template file contains a list of rules which should be followed to avoid corrupting it. If it does become corrupted, the Wizard will attempt to recreate it.
- The Customise HTML Body button allows you to set up the body of the web page according to your own design. If you click this button, the following dialog will appear:
Customise HTML Body Dialog
Customise HTML Body Dialog
Thumbnails and Images
This group allows you to control the appearance of the thumbnails and images on the main web page.
- BORDER= allows you to enable or disable the border around the thumbnails and to control the size of the border.
- ALT= allows you to enable or disable the ALT tags on the thumbnails and to control the text that is displayed when the mouse hovers over the thumbnail in the web browser. For more information on setting the text, see Format Specifiers.
- Use WIDTH and HEIGHT in IMG tags allows you to enable or disable the use of WIDTH and HEIGHT in the IMG tags. If enabled, this generates the information necessary for the web browser to display the web page in the correct proportions before the thumbnail images load.
- Generate links to images / web pages allows you to enable or disable the generation of links. If disabled, the thumbnails will not be linked to the images.
Table Layout
This group allows you to control the layout of the table in the body of the web page.
- Images per row allows you to control the number of thumbnails that appear across the web page.
- Label thumbnails using the following format allows you to enable or disable the caption below the thumbnails, and to control the caption text. For more information on setting the text, see Format Specifiers.
- TABLE allows you to change the HTML code that will be placed inside the TABLE tag.
- TR allows you to change the HTML code that will be placed inside the TR tag. This can be used, for example to specify a style class.
- TD allows you to change the HTML code that will be placed inside the TD tag. This can be used, for example, to specify a style class or alignment method.
- The Reset Lists button resets the drop-down lists to their default state.
- The Preview button allows you to run the generator and get a preview of the web page that would be created using the current settings.
- The OK button accepts your settings and closes the dialog.
- The Cancel button cancels the dialog without accepting your settings.
- This button changes to Close after the Preview button has been clicked. This is because the preview operation needs to save your settings so that the generator can use them.
- The Help button displays this help page.
Web Page Wizard - Page 6
Wizard Page 6
- Use a special format for the thumbnail file names allows you to override the default thumbnail format and use your own. For more information on setting the format, see Format Specifiers.
Web Page Wizard - Page 7
Wizard Page 7
- Create a separate web page for each image allows you to generate a separate HTML document for each image. The HTML memo of each image will be included on each generated page. These documents can be connected with next and previous links (see Page 8 ). For more information on setting the HTML file name, see Format Specifiers.
- Each page is generated from a standard template in the PMIO installation folder. You can click Edit Page Template to launch your default text editor and edit the template. This is an advanced feature for users who need more control over the final page. You can use this to add special HTML to all image pages created by the Wizard, to add style sheets or a background image, and so on. The template file contains a list of rules which should be followed to avoid corrupting it. If it does become corrupted, the Wizard will attempt to recreate it.
Web Page Wizard - Page 8
Wizard Page 8
This page only appears if your are creating separate web pages for each image. Otherwise it is skipped. It allows you to specify the HTML and order for generating the Previous, Next and Back links on each individual web page. You can enable or disable the generation of the links by clicking the check-boxes, and you can change the order of the links by changing the numbers 1, 2, and 3.
Web Page Wizard - Page 9
Wizard Page 9
Resize the copied images to allows you to enable or disable image resizing. If enabled, the images are resized after being copied to the output folder. You can choose a target width and height from the drop down lists or type them in. You can also choose to have the images automatically sharpened (recommended).
The JPEG Settings button takes you directly to the JPEG Preferences so that you can change the JPEG quality of the resized images.
Web Page Wizard - Page 10
Wizard Page 10
The Export Settings button lets you save the Wizard settings to a file so that you can re-use them again for a different location in the future (see Page 1 ). This is because each location remembers its own settings but you often want to use the same settings in more than one place.
Show new page in default web browser allows PMIO to launch your web browser to show you what it has generated after clicking Finish.
Add a link to Pink Mouse Productions allows the generator to include on your web page a link to our home page at Pink Mouse Productions. We ask that if possible, you leave this option enabled. Note: This option can only be disabled by registered users.
Once you get to the last page, the Next button changes to Finish and you can click it to begin the web page generation process. If you have opted to resize the images, you will see the following progress window while the images are resized.
Resizing Progress
This procedure can take a long time if you have many images, and you can cancel it if you wish.
Online Tutorials
There are online tutorials for this and other PMIO functions.