This workshop shows you how to create a document and publish it to the World Wide Web.

Your Web page will contain the following elements:

A tiled, patterned background.

A progressive, JPEG image map

Go to next page

You can completely change the look of your Web page by adding a tiled background. To create the pattern that is tiled across the background of your Web page, create a new image and apply a Texture fill.

  1. Click File menu, New.
  2. In the Create A New Image dialog box, choose 24-Bit RGB Color from the Color Mode list box.
  3. Choose Inches from the Units list box, and type 1 in the Width and Height boxes.
  4. Type 96 in the Resolution box, and click OK.

Go to next page

There is a vast array of fills to choose from. Try to imagine how your Web page will look with the fill you choose tiled over the background. Think of a color theme, or decide if you want a dark background with light text, or a light background with dark text.

Follow the instructions below to apply a Texture fill.

  1. Click Edit menu, Fill.
  2. In the Edit Fill And Transparency dialog box, click the Texture Fill button.
  3. Click the Edit button.
  4. Choose Styles from the Texture Library list box.
  5. Choose Fiber from the Texture List window, and click OK.
  6. Click OK again to apply the fill to your image.

Go to next page

Save your image to the JPEG file format.

  1. Click File menu, Save.
  2. In the Save An Image To Disk dialog box, choose the folder that you want to save the file in from the Save In list box.
  3. Type a name for the file in the File Name box, e.g., TILE.JPG.
  4. Choose JPEG Bitmaps (JPG) from the Save As Type list box, and click Save.
  5. In the JPEG Export dialog box, type 50 in the Compression box.
  6. Type 15 in the Smoothing box, and click OK.

Go to next page

Image maps are commonly found on Web pages. You can use Corel PHOTO-PAINT to create images that are used as image maps.

Click here to open a sample image.

This image will be used to create an image map.

Go to next page

Create a mask selection on the image and create an object from it.

  1. Click the Rectangle Mask tool from the Toolbox.
  2. Drag over the red Corel logo in the bottom-left corner of the image. A mask marquee now surrounds the logo.
  3. Click Object menu, Create, Object: Copy Selection.

Tip

There are three circles in this image that can be defined as clickable regions. Add text or images to these circles to create labelled buttons.

Go to next page

Use the Publish To Internet command to save your image as an image map.

  1. Click File menu, Publish To Internet.
  2. Type http://www.corel.com/ in the URL box, type Corel in the Comments box, and click OK.
  3. In the Export An Image To Disk dialog box, type a filename for the image in the File Name box. (The name "MYIMAGEMAP" is recommended.)
  4. Choose JPEG Bitmaps (.JPG) from the Save As Type box, choose the same folder where you saved the tile image earlier, and click Save.
  5. Click OK in the message box to merge the object with the background.
  6. In the JPEG Export dialog box, type 40 in the Compression and Smoothing boxes.
  7. Enable the Progressive check box, and click OK.
  8. In the Save Map File dialog box, type a name for your document in the File Name box, e.g., MYFILE.
  9. Type a name for the map file in the Map Name box, e.g., MYFILE, and click OK.

Go to next page

To finish creating your Web page, edit the .HTM file in a word processor or text editor.

  1. Open the .HTM file, e.g., MYFILE.HTM, in a word processor or text editor.
  2. Change the HTML code <BODY BGCOLOR="#FFFFFF"> to <BODY TEXT="#FFFFFF" BACKGROUND="TILE.JPG"><CENTER>, where TILE.JPG is the name you gave to the tile image.
  3. Change the code <IMG SRC="MYIMAGEMAP.JPG" ALT="Clickable Image" USEMAP="#myfile"></A>to <IMG BORDER=0 SRC="MYIMAGEMAP.JPG" USEMAP="#myfile"></A>
  4. Save the .HTM file.

Note

The .HTM file was automatically saved to the current directory, so it should be located in the same folder as your JPEG tile image.

Go to next page

Add text to the Web page by typing in the .HTM file. The <BODY TEXT="#FFFFFF"> tag makes the text white against your tiled background.

Open the .HTM file in a Web browser to view the results. You can add text and other graphic elements to your Web page as you like.

Now you have learned how to create your very own Web page containing a tiled background and a clickable image map.

Click here for more workshops.