Creating Web Pages from Canvas X Draw Documents

Creating Web Pages from Canvas X Draw Documents

Creating Web Pages from Canvas X Draw 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 (.CVD) 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.
  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 Subfolders: 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 Sheet: 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.

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.

  • Centered Table: 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 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 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.

    • Related Articles

    • Creating Web Pages from Canvas X Documents

      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 ...

    • Creating Web Pages from Canvas X Documents

      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 ...

    • Creating Web Pages from Canvas X Draw Documents

      Creating Web Pages from Canvas X Draw 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 ...

    • About Canvas X Draw Documents

      About Canvas X Draw Documents In Canvas X Draw, you can create several different types of documents: Illustrations Publications Presentations Animations For technical illustrations, the Illustration document type provides all the features and tools ...

    • About Canvas X Draw Documents

      About Canvas X Draw Documents In Canvas X Draw, you can create several different types of documents: Illustrations Publications Presentations Animations For technical illustrations, the Illustration document type provides all the features and tools ...