To access this command, choose File | Export HTML or click the Export HTML button in the Internet toolbar.. Doing either opens the same Export HTML dialog, shown in Figure 28-6, which ha
Trang 1Publishing Web Documents
The Publish To The Web command is used to export your CorelDRAW document to web page file format To access this command, choose File | Export HTML or click the Export HTML button in the Internet toolbar Doing either opens the same Export HTML dialog, shown in Figure 28-6, which has options for you to set exactly how your web page content will be exported The tabbed dialog looks like and is arranged similarly to CorelDRAW’s Print Options dialog
You’ll find everything you need to save your web page and images You can also use options to upload your page and the image content to a web server The dialog itself is divided into six option areas ranging from General to Issues You can also view a detailed Summary of the exported content and any web export preflight issues that CorelDRAW detects Use the Browser Preview button to check the appearance of your web page; by default, CorelDRAW launches Internet Explorer for previews The sections that follow provide a close look at all the options available
Setting General Options
Use the General tab to set options such as the destination folder for your exported files You can specify a separate subfolder for your graphics, or remove the default subfolder name
FIGURE 28-6 You can use these options for total control over how your page content will be
exported
Trang 2(images\) to have the graphics saved in the same folder as your HTML document To give
the graphics subfolder the same name as the HTML document, select “Use HTML name for
image sub-folder.”
As for the HTML Layout Method area, the best choice for the majority of users is the
HTML Table (Most Compatible) method If you’re using the export filter to export the
HTML code only for an image map (rather than for an entire web page), you should select
Single Image With Image Map
Examining Web Page Details
The Details tab, shown next, provides information regarding exactly what you selected for
export and what the exported file(s) will be named If you want, you can apply unique page
titles and/or HTML filenames to your exported web pages by clicking the existing fields and
typing in the current names
Ill 28-9
28
Trang 3Reviewing Web Images
The Images tab, shown in Figure 28-7, provides a detailed list of the images that will be exported and their default filenames For a thumbnail preview of each image, click the Image Name To change the type of format to which an image is exported, click the field adjacent to the Image Name under the Type heading
To change the settings used for each type of exported image, click and then choose from the Type drop-down list This dialog is where you choose an export format for GIFs, JPEGs, and PNGs
Setting Advanced HTML Options
The Advanced tab provides options for maintaining links you may have made to external files, including JavaScript in your HTML output, and for adding cascading style sheets (CSS) information in your web page If you’re using rollovers, be sure to choose the
JavaScript option
FIGURE 28-7 Use the Images tab to locate a bitmap and to change the type of file
CorelDRAW exports
Trang 4Browsing the Web Page Export Summary
The Summary tab, shown in Figure 28-8, provides information on the total size of your web
page and on how long it will take users to download your page at various modem speeds The
information is then itemized for each HTML page and image, so you can see if something in
particular (such as a large image) might cause an unnecessarily long download time
Preflight Web Issues
The Issues tab, shown in Figure 28-9—where an object that’s off the web page has been
flagged—detects and displays potential HTML export problems by using a series of
preflight conditions Preflight issues are found and displayed according to the options set
throughout the Publish to the Web dialog, most commonly regarding issues surrounding
color model use, text compatibility issues, and image size and resolution The top portion
of the Issues tab lists any found issues, while the bottom portion offers suggestions for
correcting the problems Images should be RGB for web images
28
FIGURE 28-8 The information in this page helps you to measure download times against
connection speeds for each of your web pages
Trang 5To change the issues the preflight feature detects, click the Settings button to open the Preflight Settings dialog, and then click to expand the tree directory under Issues To Check For, shown here You can also use options in this dialog to Add (+) saved preflight issue sets
or to Delete (–) existing issue sets in the list HTML preflight rules are a function only of the web document HTML that you are exporting If you have, for example, more than three issues flagged, it’s often a good idea to make a mental note of the problems, cancel out of the Export HTML dialog, and then manually correct the issues in your drawing
Ill 28-10
FIGURE 28-9 Use this page to troubleshoot problems and to resolve them before exporting
Trang 6Setting Web Publishing Preferences
CorelDRAW gives you complete control over your web-publishing preferences by enabling
you to set Export HTML options These options let you predetermine many of the settings
used when your documents are exported to HTML format, as described earlier To access
these options, open the Options dialog (CTRL+J), click to expand the tree directory under
Document, and click Export HTML, shown next
When this Options page is selected, you’ll see three options for setting conditions under
which object position and white space are handled when your web page is exported:
● Position Tolerance Here you can specify the number of pixels that text objects
can be nudged to avoid creating very short rows or narrow columns when the page is converted to HTML during export Position Tolerance can be set within a range of 0 (the default) to 100 Increasing this value adds extra space
● Image White Space Here you specify the number of pixels an empty cell may
contain before being merged with an adjacent cell to avoid unnecessary splitting of graphic images
● Position White Space This option controls the amount of white space to be added to
simplify your exported HTML document By default, the white space is set to 4 pixels
● Image Map Type Choosing Client for the Image Map Type is best because client
image maps provide faster interaction with your user than server image maps do
Only use Server if your provider specifically requests it
Ill 28-11
28
Trang 7Exporting Images for the Web
Although you can specify PNG, GIF, and JPEG file formats for images in your HTML page, you don’t have access to nearly the variety of compression types or transparency options unless you pass your images through File | Export for Web This is a process separate from Export HTML, and to get images that feature transparency so they “float” against a page background, follow this procedure:
1. Export your HTML document and allow images to be exported to the Images folder CorelDRAW creates
2. Export images you’d like to treat as special elements—such as PNGs and GIFs with transparent backgrounds—using File | Export for Web
3. Save these files and then replace the ones in the Images folder with your new files, using the same filenames as the ones in the Images folder
Create a graphic you’d like to appear on a web page against a background, and follow these steps to learn how to export the graphic with transparency
Exporting a Graphic with Transparency
1. Select the graphic on the page with the Pick tool If the graphic has a background, don’t select the background and you’ll save a step
2. Choose File | Export for Web
3. In the Export for Web dialog, choose GIF from the Format drop-down list
4. Click the eyedropper tool to select it, and then click over the background in the GIF preview pane, not the one marked “Original” at its bottom You can arrange the preview panes to top and bottom, left and right, or other multiple views by clicking the buttons in the upper left of this dialog
5. Click the Makes The Selected Color Transparent button; in a moment, you’ll see the preview of the graphic with a checkerboard background indicating the transparent areas of your intended export
6. Because GIF images can drop out only one color and not a range of colors, if the background of your document isn’t black, consider using one of the Matte colors, selected from the Matte mini-palette If, for example, your web page is solid blue, choose solid blue Doing this has nothing to do with the color you selected to drop out as the background color, but instead has to do with fringing You choose a compatible background color from the Matte colors to disguise aliased edges around your graphic
Trang 87. Set the unique number of colors for the export By default, it’s 256, but to save
transfer time, many simple graphics can look fine using 128 or even 32 colors You
specify the number of colors from the Number Of Colors drop-down below the
preview of the Color Palette, or you can type a value into the box
8. If you need to resize the graphic, use the Percentage boxes in the Transformation
field of this dialog But think twice about this: your HTML page won’t display the
image properly if you’re replacing, for example, a 400×300-pixel GIF that CorelDRAW
just exported to the Images folder with a new graphic that’s 375×285 pixels
9. Click Save As, and after you’re done, replace the original exported image with this
one, renaming the file to match the original filename See Figure 28-10 for the
location of the features used in this tutorial
28
FIGURE 28-10 Export at the file size and with the options you need with the Export for
Web dialog
Click color to be dropped out Make the selected color transparent.
Trang 9Swapping graphics into an HTML page has to be done with precision The filename, the file type, and image dimensions have to be identical, because the image dimensions are written into the HTML code And very few artists want to backwards-correct an HTML document!
Web Text Options
Fonts that you use when designing a web page will not always show up on a visitor’s web browser: web browsers such as Internet Explorer, Mozilla Firefox, and Apple’s Safari are almost completely dependent on which typefaces are installed on the visitor’s computer There is no true “default” font for the Web, but over the years, Microsoft has quietly
provided your system—and tens of millions of others—with system fonts that you basically can be assured reside on more than 90 percent of all computers used to surf the Web Here are the current “web safe” typefaces:
Ill 28-12
It’s considered discourteous on the Web to post long sections of text as bitmap graphics: visitors can’t copy or bookmark the text, and it violates the rules of accessibility—text-to-speech readers can’t decipher text-as-graphics, and indexing services will ignore what to you might be valuable information Therefore, when you create paragraph text for a web page, use one of the typefaces listed in the previous illustration, for at least two more important reasons:
● Your web page will load more slowly with text displayed as a graphic instead of as editable text
● Small text, such as 10 point, probably will not be legible Consider that a screen pixel is approximately 1/72 inch, and a typographic point is approximately equal in size to one pixel Therefore, 10-point text has to be rendered to screen using only
10 pixels in height That’s the size of the font previews on CorelDRAW’s Fonts drop-down list, and many of the fancier fonts are not legible at this size as bitmap renders
Trang 10Figure 28-11 is an example of a web page layout, and as you can see, the text for the
business hours is small and formatted as paragraph text This text needs to be exported as
text and not as a bitmap On the other hand, the name of the fictitious spa, and the elegant
headlines above business hours can be exported as bitmap graphics, especially if the
designer wants to retain the style of the typeface
Follow these steps with any web page layout you have that contains text, to learn how to
make the document conform to web standards for text
Formatting Text for the Web
1. Format any text you want to be editable text on the web page using the fonts
enumerated earlier
2. The first thing to do is to check to see that any text you want displayed as text on the
web page is paragraph text Select any text in question with the Pick tool, and then
choose Text from the menu If the command Convert To Paragraph Text is available,
choose this command If it’s not available, the text is already paragraph text, and it’s
easy to spot on the page because a nonprinting frame is around paragraph text
28
FIGURE 28-11 Text that uses distinctive typefaces has to be exported as bitmaps to retain its
look on the Web
Needs to be a bitmap graphic
Needs to be a
bitmap graphic
Needs to be a
bitmap graphic
Paragraph text
can be Tahoma.