This tutorial shows you some tips on how to create drawings for, and publish drawings to, the Internet. You have access to many features for creating drawings with powerful, visual impact for the World Wide Web.

Select a topic:

Common World Wide Web terms explained

Creating your drawing for the Internet

Publishing your drawing to the Internet

The Internet has become a standard medium of communication for commerce (e.g., you can advertise, post your resume, or seek employment), current events, and even for unpublished poets.

The World Wide Web is a hypertext information system that allows users to navigate through information on the Internetusing a browser as a graphical interface.

Select an option:

What is a Web server?

What is a browser?

What is HTML?

What is a Uniform Resource Locator (URL)?

The computers that store Web documents and run software that make the documents available are called servers.

To publish documents on the World Wide Web, you need a server that stores the HTML documents and relays information to Web browsers that make requests for your documents. A browser is software that displays HTML documents and graphics. The browser reads the HTML documents and displays the information between the tags according to the specifications set by the tags.

When someone points their browser to your Web document, the browser talks to your server to get that document and then display it.

A browser is computer software that interprets HTML (Hypertext Markup Language) tags, displays Web pages, runs Java programs, and more. A browser can be used to view Web pages (HTML documents). CorelDRAW comes with color palettes for two common browsers: Netscape Navigator and Microsoft Internet Explorer. Using one of these color palettes to create the your drawings ensures the colors in your drawings will display properly on the World Wide Web.

HTML (Hypertext Markup Language) is a system of tagging information. To create a document that Web browsers can read and display, you need to create an HTML document. You can create an HTML document by typing in the HTML codes manually in any text editor, using a Web-authoring tool such as Corel Web.DESIGNER, or using software with filters that automatically insert HTML codes when you save the document, such as CorelDRAW.

If you're familiar with using styles or tags in word processors, you'll have no problem with the concept of assigning tags to text.

An HTML document is a text file that contains special tags that explain how the text in the document is to be displayed, where graphics are placed, and where links to other documents (such as graphics files) occur.

To learn more about HTML tagging, select an option:

Basic tagging

Tagging graphics

Tagging image maps

Anatomy of an HTML file

The tag you assign to a title looks like this:

<TITLE>My Web Page </TITLE>

The tag is made up of an open angle bracket (<), characters that describes the tag's action (in this example the action is to make the text a title), and a closing angle bracket (>). Most tags occur in pairs. HTML tags don't contain specific style information such as the font, size, and spacing. The way text is displayed depends on the browser and computer setup of the person viewing your document.

Back to page one

The following is an example of a reference to a .GIF graphic, "GIFGRAPHIC.GIF and a .JPG graphic, "JPEGRAPHIC.JPG."

<IMG SRC= "GIFGRAPIC.GIF">

<IMG SRC= "JPEGRAPHIC.JPG">

It's a good idea to keep your HTML document in the same folder as your .GIF or .JPG files. This way, you won't need to reference the entire path name of your graphic.

Back to page one

An image map is a hypergraphic found in an HTML document that contains clickable areas that link to sites on the World Wide Web. When you click one of the clickable areas (also called hot spots) in the image, the browser displays the site referenced at that point. An image map graphic is made up of a bitmap (the image) and a series of coordinates describing the location of the hotspots on the bitmap (the map).

The following is an example of a portion of an HTML document with an image map created in CorelDRAW:

<IMG SRC = "GRAPHICNAME.GIF" USEMAP = "#GRAPHICNAME.GIF" BORDER = 0>

<AREA SHAPE=POLYGON COORDS="100, 0, ..." HREF=http://www.corel.com/corelweb/index.htm ></MAP>

<MAP NAME = "GRAPHIC NAME.GIF">

Back to page one

To understand how HTML files are put together, it helps to see an example like the one below.

IMG SRC = " MYWEBDOC.GIF"

indicates that a graphic is to appear here and identifies the name of the file.

USEMAP = "#MYWEBDOC.GIF"

indicates that the graphic is an image map.

<MAP NAME = " MYWEBDOC.GIF">

indicates the name of the image map.

<AREA SHAPE=POLYGON COORDS="100, 0, 150, 100, . . ."

HREF=http://www.corel.com/corelweb/index.htm ></MAP>

identifies the shape of the graphic and matches the URL to the pixel coordinates of the graphic.

The final </MAP> tag indicates the end of the image map information.

Back to page one

A URL is an address on the Internet where a Web document resides. It is made up of four components:

http://www.corel.com/news/
index.htm

1. http - identifies the protocol to use
2. www.corel.com - indicates the server to connect to
3. news - indicates the directory
4. index.htm - indicates the filename

Each hyperlink in an HTML document has an associated URL. When a user clicks a hyperlink, the user is brought to the document to which the URL associated with that link points.

You can create powerful graphics that look great on web pages and you can insert internet objects like pop-up menus, submit buttons, Java applets, and more.

Select an option:

Inserting Internet objects

Converting paragraph text to HTML text

Assigning a URL to an object

Graphics and color

CorelDRAW provides a variety of preconfigured Internet objects that you can insert in your HTML Web document. These preconfigured Internet objects are user interface (UI) controls that assist you in performing tasks such as searches and data collection. The objects include items like Java applets, radio buttons, submit buttons, check boxes, text edit boxes, pop-up menus, and more.

Click Edit menu, Insert Internet Object, and click the object you want.

To create HTML-compatible text in CorelDRAW, you must first type Paragraph text, then convert the Paragraph text to HTML text. You can edit the HTML text in your published document directly in a Web browser. Any non-HTML-compatible text in your document is converted to bitmaps when you publish your document to the Internet.

Click here to open a sample file.

1. Select the Paragraph text object with the Pick tool.
2. Click Text, Make Text HTML Compatible.

You can create a hyperlink from any text or graphical object in your Web document to another document published on the World Wide Web by assigning that document's Uniform Resource Locator (URL) to the selected object. You can assign a URL to the selected object using the Internet Objects toolbar, the Internet page in the Object Properties Docker window, or the object's right mouse button context menu.

This procedure shows you how to assign a URL using the Internet Objects toolbar.

Click here to open a sample file.

1. Click View menu, Toolbars.
2. In the Toolbars dialog box, enable the Internet Objects check box.
3. Click OK.
4. Select an object with the Pick tool.
5. In the Internet Address list box, do one of the following: type the URL to which you want to create a link or choose a URL from the list.
6. Press ENTER.

Note

When someone opens your drawing in a web browser and clicks on the object, the document associated with the URL assigned to the object is displayed.

When you create images for the Web, it's important to use the right graphics and color palette.

Graphics are saved separately from the Web pages on which they appear. When you view a Web page, the browser retrieves and displays each graphic on the page.

You can save your drawings as graphics or as Web pages on which graphics appear.

Also, browsers only support certain colors, so it's important to use these colors when creating your drawings.

This procedure shows you how to choose the correct color palette to create your drawings and how to save your drawings as Web-ready graphics.

Select an option:

Creating your drawing using the right color palette

Saving your drawings as Web-ready graphics

When you're ready to begin constructing your Web document, it's important that you choose a color palette that contains Internet-safe colors. Web browsers such as Netscape Navigator and Microsoft Internet Explorer each use their own 256-color palette to display images. Both of these palettes contain identical colors. To ensure the colors you use in your Web document display correctly in a browser, you should design using either palette.

Click View menu, Color Palette and click either Netscape Navigator or Microsoft Internet Explorer.

Back to page one

The two most common image file formats for the Web are GIF and JPEG.

This procedure shows you how to decide which format best suits your changing needs.

Select an option:

GIF

JPEG

The GIF format is ideal for line drawings and graphics with few colors or sharp edges.

GIF supports up to 8-bit color (256 colors) and allows you to store custom palettes with your image.

The GIF format also offers several advanced Web-publishing options, including transparent backgrounds and interlacing.

All bitmaps are rectangular, but you can specify transparent areas in the graphic to create the illusion that it is a different shape when it appears in your HTML document. The transparent areas appear in the color and pattern of the Web browser's background color.

An interlaced image displays a little at a time as it downloads, allowing users to cancel the download if they wish.

Procedure for saving as a transparent or interlaced GIF

Follow the steps below to save your drawing as a transparent or interlaced GIF.

Click here to open a sample file.

1. Click File menu, Export.
2. Double-click the folder where you want to save the file in the Save In list box.
3. Choose CompuServe Bitmap in the Save As Type list box.
4. Type a filename in the File Name box.
5. Click the Export button.
6. In the Bitmap Export dialog box, choose one of the following from the Color box: Black And White, 16 Colors, Grayscale(8-bit), or Paletted(8-bit).
7. Enable the Dithering check box.
8. Do one of the following to specify the dimensions of the bitmap: choose a size from the Size list box or type values in the Width and Height boxes.
9. Enable the Maintain Aspect Ratio check box to maintain the proportion of width to height.
10. Choose one of the options in the Resolution list box or type values in the Horizontal and Vertical boxes. Enable the Identical Values check box to make the horizontal and vertical values the same.
11. Enable None or Normal in the Anti-aliasing section.
12. Click OK
13. In the GIF Export dialog box , enable the Interlace button (optional).
14. Enable one of the following Transparency buttons to define which colors are transparent when viewed in a Web browser: None or Image Color.
15. Click the color you want to be transparent on the Color Palette, or enter its index number in the Index box.
16. Click OK.

Back to page one

JPEG is the best format for saving images with broad tonal ranges, such as photographs or scanned images. JPEG supports up to 32-bit color (16.7 million colors). JPEG files support lossy compression, providing high-quality images with a high level of compression. You can choose a display quality ranging from high to very low quality reproductions. The higher the image quality, the larger the file size. JPEG images normally require some decompression time before they display on screen, but you can choose to display them a little at a time as the image downloads from the server, allowing users to decide if they want to wait to see the whole image or cancel the download.

Procedure for saving your drawing as a .JPG file

Follow the steps below to save your drawing as a .JPG file.

Click here to open a sample file.

1. Click File menu, Export.
2. Choose .JPEG Bitmaps (JPG) from the Save As Type list box.
3. Choose a folder where you want to save the image from the Save In list box.
4. Type a name for the image in the File Name box, and click the Export button.
5. In the Bitmap Export dialog box, choose one of the following from the Color box: Grayscale(8-bit), Paletted(8-bit), RGB Color(24-bit), CMYK Color(32-bit).
6. Enable the Dithering check box.
7. Do one of the following to specify the dimensions of the bitmap: choose a size from the Size list box or type values in the Width and Height boxes.
8. Enable the Maintain Aspect Ratio check box to maintain the proportion of width to height.
9. Choose one of the options in the Resolution list box or type values in the Horizontal and Vertical boxes. Enable the Identical Values check box to make the horizontal and vertical values the same.
10. Enable None or Normal in the Anti-aliasing section.
11. Click OK
12. In the JPEG Export dialog box, enable the Progressive check box, or the Optimize check box (optional).
13. Adjust the Compression slider.
14. Adjust the Smoothing slider.
15. Choose an encoding method from the Sub Format list box: Standard (4:2:2) or Optional (4:4:4).

Back to page one

When you're satisfied with the construction of your Web document, you can use the Publish To Internet command (File menu) to publish the document to your choice of three formats. You can publish to HTML, Corel Barista or as a single image.

When you publish your document to HTML, CorelDRAW creates an HTML file identical to the source CorelDRAW document.

Documents saved in the Java-based, Corel Barista format are saved as Java applets.

When you publish your document as a single image, CorelDRAW creates an image map from your drawing.

Select an option:

Publishing to HTML

Publishing to Corel Barista

Publishing to a single image

You can publish projects you create directly to HTML.

Each graphic on a Web page is actually an individual graphic file that exists separately from the HTML document. When you export your drawing as HTML two types of files are created: an .HTM file containing all the HTML code and .GIF files for all your graphics. Each graphic is brought onto the page by the <IMG> tag in the .htm file when the document is displayed on screen.

To create images that display well in Web pages, you must save the image in a file format that is readable by Web browsers. GIF and JPEG are the most common file formats.

When you publish to HTML, you have the choice to save the graphic in the GIF or JPEG format. CorelDRAW creates an HTML document that contains the reference to the GIF or JPEG bitmap and any URL (Uniform Resource Locator) information that you've assigned to graphics.

Click here to open a sample file.

1. Click File menu, Publish To Internet.
2. Click the Publish to Internet button.
3. In the Publish To Internet dialog box, enable the HTML button.
4. Choose the folder in where want to save your published HTML document from the HTML Folder list box.
5. Type the name of the folder where you want to save the bitmaps in your document in the Image Folder box.
6. Click the Export All Pages button if you want to export all of the pages in a multipage Web document.

Notes

The HTML Folder list box keeps a history of the last folder used (default), the folder containing your source .CDR file, and the default CorelDRAW .CDR folder. However, you can click the Browse button to choose a different folder.

The Image folder is a subfolder of the HTML folder. If you leave the Image Folder box blank, the bitmaps are saved in the HTML folder.

Tip

To choose whether your graphics are exported as .GIF or .JPG files, use the Publish to Internet wizard to export your drawing (to access the wizard options, press the Next button instead of the Use Internet Dialog button.)

Corel Barista is a Java-based publishing technology that lets you publish Web documents in Java Programming Language. This means you can use all the features in CorelDRAW when publishing to the World Wide Web without the limitations of HTML.

You can view documents published in Corel Barista format in your Web browser. To display your Web document, place the Corel Barista .CLASS files in the same folder as your Web document. The Corel Barista .CLASS files are installed in the DRAW8 subdirectory called BARISTA when you install CorelDRAW.

When you export to Corel Barista, text in your document is converted to curves to maintain the properties you assigned to it.

Click here to open a sample file.

1. Click File menu, Publish To Internet.
2. Click the Publish to Internet button.
3. In the Publish To Internet dialog box, enable the Corel Barista button.
4. Choose the folder where you want to save your published Corel Barista document from the HTML Folder list box.
5. Click the Export All Pages button if you want to export all of the pages in a multipage Web document.

Note

The HTML Folder list box keeps a history of the last folder used (default), the folder containing your source .CDR file, and the default CorelDRAW .CDR folder. However, you can click the Browse button to choose a different folder.

Tip

To choose whether your graphics are exported as .GIF or .JPG files, use the Publish to Internet wizard to export your drawing (to access the wizard options, press the Next button instead of the Use Internet Dialog button.)

When you publish your document as a single image the entire file is exported as a .GIF or .JPG file - which ever you specify.

Click here to open a sample file.

1. Click File menu, Publish To Internet.
2. Click the Publish to Internet button.
3. In the Publish To Internet dialog box, enable the Single Image button.
4. Choose the folder where you want to save your published HTML document from the HTML Folder list box.
5. Type the name of the folder where you want to save the bitmaps in your document in the Image Folder box.
6. Click the Export All Pages button if you want to export all of the pages in a multipage Web document.