Creating Web Pages from Canvas X Documents

Any document that you create in Canvas X Draw can be exported for the Web in a matter of seconds. To export a document as one or more Web pages, save the document in HTML format.

Canvas X Draw does not support opening and editing of HTML Web pages; therefore, always save your documents in Canvas X Draw format (.CVX) before you export Web pages. Saving in Canvas X Draw format means you can edit the original and export again in HTML.

To Save a Document in HTML Format:

  1. Open the Canvas X Draw document that you want to save as one or more Web pages, and then choose File | Save As.
  2. In the directory dialog box, select HTML file format.
  3. Select a location to save the files, enter a file name, and click Save.
  4. In the HTML Options dialog box, select options for saving the Web pages. (See HTML Options.)
  5. Click OK to save them.

HTML Options

General options

Create new folder: Organizes files for a Web page by placing them in a new folder in the specified location. The name that you enter when you are saving a Web page is used for the folder’s name.

Put images in subfolder: Creates a subfolder for the image files.

Separate pages: Available for multi-page Canvas X Draw documents; creates a Web page from each page. Page names will become the file names. If you do not select this option, then Canvas X Draw exports all pages as one HTML file.

Generate navigation file: If you select Separate pages, you may wish to activate this option; generates navigation aids placed on the top and left side of each Web page. These links are created from the index name of each Web page.

Use external style: Select this option to create an external style sheet for Web pages that you are saving. An external style sheet can make it easier to edit styles manually and can also reduce the size of individual HTML files because the complete style information is not included in each Web page file.

Not available if Table Layout is active since Table Layout doesn’t use global CSS definition.

File format: Two types available: HTML 4 and XHTML 1, with only a few differences between them. XHTML documents differ in the document’s header and have some additional tags in the data stream (such as end-tags for image objects).

Layout mode: Three modes are available for both file formats.

  • Table Layout: Allows all Canvas X Draw objects to be organized into cells of an HTML table. All overlapping objects are rendered and exported as bitmaps. Although table mode may produce less efficient HTML output, it is accepted by all major browsers.
  • CSS2 (Cascading Style Sheet): Graphics and text objects will be positioned using the “absolute position” property (defined by the CSS2 specification). In this mode, objects can overlap each other without the need for you to render them. Some browsers have problems dealing with CSS2 format.

CSS properties are also used in the Table Layout but only for text formatting not for positioning.

  • Table Layout Centered: HTML output is the same as the standard “Table Layout”; however, table is centered in a browser.

Text options

Render Text: Rendering converts text objects to images to ensure that text appears the same on the Web. Rendered text can’t be selected as text on a Web page.

  • Automatically: Canvas X Draw decides when to render text.
  • Always
  • Never: Preserve all text as text objects.

Image options

Image format:

  • Automatic: Canvas X Draw chooses the file format for images. (See How Images are Handled.)
  • JPEG or GIF: Select either option to save all images in one format or the other.

JPEG quality: Four JPEG quality levels are available:

  • Best: Least compression (100% quality).
  • Fine: 90% quality.
  • Good: 75% quality.
  • Draft: Most compression (50% quality).

Anti-aliasing: Smoothes the edges of rendered vector objects and text objects.

  • Finest: Uses up to 256 shades between each pair of colors. Images with more than 256 colors should be saved in JPEG format to preserve the full range of shades. If necessary, Canvas X Draw uses JPEG format if you select the Automatic Image Format option.
  • Fine: Uses 64 shades per pair of colors. Medium uses 16 shades per color pair. Coarse uses four shades per color pair.
  • Medium
  • Coarse
  • None: No anti-aliasing.

Select Save this setting as default to save the current settings in the dialog box for all documents. Otherwise, Canvas X Draw saves the settings for the current document only.

Save these settings as default

If you have never selected the save settings option, clicking Default will switch the dialog box settings to the Canvas X Draw default.

Metatags

When Canvas X Draw creates an HTML file from a document, it uses metatags in the HTML file header to include data entered in the document Properties dialog box. This data includes information such as Title, Subject Keywords, Author, and Category from the fields on the Summary tab in the Document Properties dialog box.

To Add Metatags to a Document:

Choose File | Properties and click the Summary tab. Enter any keywords in the fields.

How Images are Handled

Canvas X Draw uses compression and color reduction to optimize images for faster display on Web pages. All graphic objects are exported as RGB images in GIF or JPEG format. You can choose the image format or allow Canvas X Draw to decide this option for you. (See Image Options described in the table above.)

When you select Automatic from the Image format menu, Canvas X Draw exports RGB Color and CMYK Color images as RGB (24-bit) images using JPEG compression. Indexed mode images, which use a maximum of 8 bits of color information per pixel, are exported in GIF format. Black and White images are exported as Indexed images (8-bit). Canvas X Draw exports Grayscale images as Indexed images (8-bit) or JPEG-compressed RGB images, using the format that it determines will produce the best results.

How Slices are Exported

If slices are available in the Canvas X Draw document at the time of HTML export, then Canvas X Draw will design the document layout to conform to the slices. Canvas X Draw will also accept an individual slice’s setting when it renders and names the images. (See Exporting Slices and Slicer Export Options.)

Slices are used only when Table Layout is activated.

How Animated GIFs and Web Buttons are Handled

When exporting animated GIFs, one GIF file will be produced for each animated GIF.

Regarding Web buttons, one image for each Web button’s state will be exported. This group of images will be linked together using Java scripting.

You cannot overlap these objects in Table Layout mode. If that happens, then an Animated GIF or Web button will be rendered and exported as a simple image. You can overlap the objects in CSS Layout mode only.

EXIF Extension (JPEG)

EXIF is the abbreviation for Exchangeable Image File, a format that is a standard for storing interchange information in digital images using JPEG compression. Almost all new digital cameras use the EXIF annotation, storing information on the image such as shutter speed, exposure compensation, F number, what metering system was used, if a flash was used, ISO number, date and time the image was taken, white balance, auxiliary lenses that were used, and resolution.

Canvas X Draw allows digital photographers quick and easy access to most of the information that is attached to these images. After being imported into Canvas X Draw, the attached data may be viewed by choosing Image | DCS information (EXIF). This command is disabled if the image does not contain EXIF data.

You can also view the EXIF data via a context menu. Select the image and right-click to open the menu. This command will not appear if the JPEG file does not contain EXIF data.

An option to include or remove EXIF data when exporting JPEG images has also been included in the Export Preview.

The EXIF option is available from the Export Preview window. If an image does not contain EXIF data, then the option is grayed out as shown in this example.

Using the Save to Web Command

The easiest way to create Web pages in Canvas X Draw is to save a Canvas X Draw document using the Save to Web command.

Prior to exporting your document as an HTML file, we recommend that you make certain to save your original project as a Canvas X Draw file. You can then edit the original Canvas X Draw document if you want to make changes at a later date.

To Save a Web Site Using Save to Web:

  1. Choose File | Save to Web to open the Save to Web dialog box, which contains controls for range, as well as image and html export.
  2. Select the export range by enabling an option in the What to save section.
  3. Select either Auto, GIF, or JPEG for the image export in the Format for saving images section.
  4. Open the HTML output method menu and select either HTML 4 with Table Layout or CSS2 Layout.
  5. Select an anti-aliasing method to smooth the edges of objects that Canvas X Draw renders for export. Coarse uses the least number of colors and Finest uses the most.

See also: