| Oracle® Fusion Middleware Template Editor Guide for Dynamic Converter 11g Release 1 (11.1.1) E10635-01 |
|
 Previous |
 Next |
Home > Template Editor Guide for D... > Formatting
| Oracle® Fusion Middleware Template Editor Guide for Dynamic Converter 11g Release 1 (11.1.1) E10635-01 |
|
Previous |
Next |
Home > Template Editor Guide for D... > Formatting
The following topics are covered in this section:
Formatting is one of four property sheets in Classic HTML Conversion Editor used to edit templates. The settings in Formatting determine the look and behavior of a Web page created from any source document associated with the template. Most of the work is done in the Character and Paragraph tab dialogs, where you decide how text will display in a Web browser.
Among the many options in Formatting are the ability to:
Handle the special challenges posed by tables and lists
Add graphical aids to set off content and reinforce document hierarchy
Select conversion options for graphics in source documents
Associate HTML code with elements
You can open Formatting by clicking the Formatting icon (Figure 3-1) in Classic HTML Conversion Editor.
In Classic HTML Conversion Editor, you can move between the four property sheets and use them in any order. And you can check your changes in the Preview window as you make them. Also, as you pass your cursor over the content of the Preview window, a screen tip will display the name of each element.
The Character and Paragraph tab dialogs have different options available, depending on whether CSS is turned on or off in Globals. See "Cascading Style Sheets (CSS)".
Classic HTML Conversion Editor implements CSS (cascading style sheets) by means of embedded, inline styles, which you create mostly in the Character and Paragraph tab dialogs of Formatting.
CSS is template-based.
Some templates already have CSS turned on (those with "CSS" in their name).
Settings affected by CSS are in the Character and Paragraph tab dialogs of Formatting. These include settings in the Table Overrides dialog boxes.
Options in Navigation for creating text bars are also affected by CSS.
For some CSS settings, especially those in the Advanced section of the Paragraph tab dialog, browser behavior is inconsistent. You may need to experiment to see how CSS can enhance the look of your Web pages.
To enable or disable cascading style sheets:
Click the Globals icon (Figure 3-2), and then click Options to open that tab dialog.
Select the Allow CSS character and paragraph formatting check box.
Click OK.
You can use a style sheet in Dynamic Converter, either by referencing a file or by entering the complete style sheet as HTML code in your HTML file. You can do this in the HTML tab dialog of Globals. However, the results may not be what you expect.
Dynamic Converter generates CSS1- and CSS2-compatible style sheets inline. (CSS1 and CSS2 are both W3C standards. The more recently recommended CSS2 builds on CSS1.)
With CSS, you can enhance the onscreen presentation of your text. However, your browser may not handle CSS well when you print what is on the screen.
The following topics are covered in this section:
Among the options available for formatting paragraphs with CSS turned on is the addition of padding to paragraphs. Padding typically is added when you set borders, and is the amount of space between the border and actual content.
|
Note: See "Indents, Margins, Borders, and Padding" for more information on how these options relate to each other. |
To add padding to paragraphs:
Click the Formatting icon (Figure 3-3), and then click Paragraph to open that tab dialog.
From the Elements list, select the element or elements that you want to set padding for. The padding you add will apply to all paragraphs associated with these elements.
Under Advanced, click the Advanced button. A Caution dialog box may open to remind you that support for the different features in the Advanced section may vary between browsers. Click OK.
Click Borders to switch to . Then click the Padding button under Padding to open the Padding dialog box. It doesn't matter which tab you have selected on the Borders tab dialog when you do this.
In the Padding dialog box, select the tab for the border you want to set padding for: Left, Top, Right, Bottom. You can set padding for any one, any two or three, or all four borders. You can also apply the settings of any one border to all borders by simply clicking the Set All button.
Under Left, click Set left padding. Enter a value in the first text box and select the unit of measure from the list: points, inches, centimeters, or pixels. Repeat these steps to set padding for Top, Right, or Bottom.
If you want any setting in the Padding dialog to apply to all other settings, click Set All in the appropriate panel.
The Paragraph tab dialog in Formatting is used to set options for paragraphs such as alignment, first line indentation, and spacing. (You format text in the Character tab dialog.) The options available vary significantly, depending on whether CSS is turned on or off. See "Cascading Style Sheets (CSS)".
With CSS turned on, there are a number of additional settings available. Under Advanced, you can set:
Line height. See "Setting Line Height".
Background color. See "Setting a Background Color".
Background image. See "Setting a Background Image".
First line indent. See "Setting First-Line Indentation".
Borders. See "Setting Paragraph Borders".
Paragraph width. See "Setting Paragraph Width".
Among the options available for formatting paragraphs with CSS turned on is the setting of borders for paragraphs. Borders are different from indentation, margins, and padding. With those three, you inject space between the edge of your screen and the content. With borders, you can inject a rule of varying form, thickness, and color.
|
Note: See "Indents, Margins, Borders, and Padding" for more information on how these options relate to each other. |
To set borders:
Click the Formatting icon (Figure 3-4), and then click Paragraph to open that tab dialog.
From the Elements list, select the element or elements that you want to set borders for. The indentation you set will be used for all paragraphs associated with these elements.
Under Advanced, click the Advanced button. A Caution dialog box may open to remind you that support for the different features in the Advanced section may vary between browsers. Click OK.
Click Borders to switch to . Select the tab for the border you want to set: Left, Top, Right, Bottom. You can set a border for one, any two or three, or all four. You can also apply the settings of one tab to all the others by clicking the Apply these settings to all sides button.
For the selected tab, under Size, select Take from source, Don't specify, or Set to.
Take From Source means that Dynamic Converter uses what is in the source document. Don't Specify means the Web browser used to view the Web page may substitute its own default settings. With the Set To option, you can specify the size of the border you want to use.
If under Size you select Set to, enter a value in the first text box and select a unit of measure from the second: points, inches, centimeters, or pixels.
Under Style, select Take from source, Don't specify, or Use this style. If you select Use this style, select the style of border you want to use from the list.
Under Color, select Take from source, Don't specify, or Use this color. If you select Use this color, click the color button to open the Color dialog box and choose a color for the border there.
To add Padding, click the Padding button. See "Adding Padding to Paragraphs".
Classic HTML Conversion Editor can be configured to generate formatting with standard HTML tags or CSS (cascading style sheet) markup. Enabling CSS for a template changes the options available in the Character and Paragraph tab dialogs of Formatting. See "Cascading Style Sheets (CSS)".
The Paragraph tab dialog in Formatting is used to set options for paragraphs such as alignment, indentation, and spacing. (You format text in the Character tab dialog.) These options differ significantly with CSS turned off. See "Formatting Paragraphs Without CSS".
To format paragraphs with CSS turned on:
Click the Globals icon (Figure 3-5), and then click Options to open that tab dialog.
Select the Allow CSS character and paragraph formatting check box.
Click OK to return to the main window of Classic HTML Conversion Editor.
Click Formatting, and then click Paragraph to open that tab dialog.
From the Elements list, select the element or elements you want to format.
Under Alignment, select one of the three options. If you select Use this alignment, use the down arrow to select Left, Center, Right, or Justify from the box.
Under Indentation, select one of the three options for Left Side. Do likewise for Right Side. If you select Set To in either case, enter the desired value in the edit box or use the Up/Down control to set the value. Click the down arrow on the second box to select a unit of measure: points, inches, or centimeters (1 inch = 72 points).
Under Spacing, set the additional line space you want before or after each paragraph. (Note: Your browser may automatically add space between paragraphs.)
Under Special, click Render paragraph as a graphic to save the element information in a graphic format during translation. This could be useful, for example, where you are using an unusual font that users are unlikely to have available on their machines.
Under Advanced, to set advanced options such as borders and padding, click the Advanced button to open that dialog box. See "Setting Advanced Options for Paragraphs".
Under Table Overrides, click Override when in a table if you want to format the content of tables in the document differently. See "Formatting Paragraphs in Tables".
Click OK to save the changes to the template.
You can use the Preview box to see how your Web page changes with each modification. Also, as you pass your cursor over the content of the Preview window, a tool tip will display the name of each element.
Classic HTML Conversion Editor can be configured to generate formatting with standard HTML tags or CSS (cascading style sheet) markup. Enabling CSS for a template changes the options available in the Character and Paragraph tab dialogs of Formatting. See "Cascading Style Sheets (CSS)".
The Paragraph tab dialog in Formatting is used to set options for paragraphs such as alignment, indentation, and spacing. These options differ significantly with CSS turned on. See "Formatting Paragraphs With CSS".
To format paragraphs with CSS turned off:
Click the Globals icon (Figure 3-6), and then click Options to open that tab dialog.
Clear the Allow CSS character and paragraph formatting check box, and click OK to return to the Classic HTML Conversion Editor dialog box.
Click Formatting, and then click Paragraph to open that tab dialog.
From the Elements list, select the element or elements you want to format.
Under Alignment, select one of the three options. If you select Use this alignment, use the down arrow to select Left, Center, or Right from the box.
Under Indentation, select one of the four options. If you select Indent left side only by or Indent both sides by, enter the desired value in the edit box or use the Up/Down control to select the number of tab stops you want to use.
Under Spacing, set the additional line space you want before or after each paragraph. (Note: Your browser may automatically add space between paragraphs.)
Under Special, click Render paragraph as a graphic to save the element information in a graphic format during translation. This could be useful, for example, where you are using an unusual font that users are unlikely to have available on their machines.
Under Table Overrides, click Override when in a table if you want to format the content of tables in the document differently. See "Formatting Paragraphs in Tables" for more information.
Click OK to save the changes to the template.
You can use the Preview box to see how your Web page changes with each modification. Also, as you pass your cursor over the content of the Preview window, a screentip will display the name of each element.
Indentation is the only option you have for affecting the layout of paragraphs with CSS turned off. With CSS turned on, however, you can also set margins, borders, padding, and paragraph width.
When you format source documents with CSS (cascading style sheets) turned on, you enjoy a great deal of flexibility in setting indents, margins, borders, and padding for your template. See "Cascading Style Sheets (CSS)".
The illustration below shows how these formatting options relate to each other.
indent: Can be set left and right only. Creates space that represents the distance between the edge of the frame and content. (Set in the Paragraph tab dialog of Formatting.)
margin: Can be set top, bottom, left and right. Creates space that represents the distance between the indent and the border. (Click the Margins button in the Paragraph tab dialog of Formatting.)
border: Can be set top, bottom, left and right. A visual effect that represents the distance between the margin and padding. (Click the Advanced button in the Paragraph tab dialog of Formatting.)
padding: Can be set top, bottom, left and right. Represents the distance between the border and content. If you assign a background color or image to an element, the color or image will apply both to the content associated with the element and any padding you have set. (Click the Padding button on the Borders tab dialog of the Advanced dialog box.)
All these settings are zero by default.
You can set a first-line indent for any element that is negative. If, at the same time, zero is the setting for indents, margins, borders, and padding, then you will lose the beginning of the line in your the web page (unless you set a sufficient margin in the Frame Properties dialog box.)
Among the options available for formatting paragraphs with CSS turned on is setting the indentation for the first line of text in each paragraph of text. It is often helpful to set off paragraphs from each other by using a different indentation for the first line. This can be positive or negative. If you set negative indentation, you in effect create a hanging paragraph after the first line.
To set first-line indentation:
Click the Formatting icon (Figure 3-8), and then click Paragraph to open that tab dialog.
From the Elements list, select the element or elements that you want to set a first line of indentation for. The indentation set will be used for all paragraphs associated with these elements.
Under Advanced, click the Advanced button. A Caution dialog box may open to remind you that support for the different features in the Advanced section may vary between browsers. Click OK.
Under First Line Indent, on the General tab dialog, select Take from source, No indent, or Set to.
Take From Source means that Classic HTML Conversion Editor uses what is in the source document. Don't Specify means the Web browser used to view the Web page may substitute its own default settings. With the Set To option, you can control the line indentation precisely.
If you select Set to, in the first text box select the units for the indent. In the second, select the unit of measure: points, inches, or centimeters. You can set a negative value if you want to create a hanging indent.
Click OK.
If you set a negative value for the indent, be sure to create sufficient space with either indent, margins, borders, or padding. Otherwise, part of the first line of your paragraph may not be visible. See "Indents, Margins, Borders, and Padding".
Among the options available for formatting paragraphs with CSS turned on is the setting of margins. The margin is simply the distance between the edge of the screen and where text begins.
|
Note: See "Indents, Margins, Borders, and Padding" for more information on how these options relate to each other. |
To set paragraph margins:
Click the Formatting icon (Figure 3-9), and then click Paragraph to open that tab dialog.
From the Elements list, select the element or elements associated with the content you want to set line height for.
Under Margins, click the Margins button to open that dialog box.
Set the margin for Left, Top, Right and Bottom, as appropriate. In each case, select Take from source, Don't specify, or Set to.
Take From Source means that Classic HTML Conversion Editor uses what is in the source document. Don't Specify means the Web browser used to view the Web page may substitute its own default settings.
If you select Set to, enter a value in the first text box (or use the Up/Down controls to set the value) and from the second, list, choose a unit of measure: points, inches, centimeters, or pixels.
Note: If you want to apply the same margin for Left, Top, Right, and Bottom, complete the settings for just one of the four panels and click Set All.
Click OK to return to the Paragraph tab dialog.
You should verify your results carefully when setting margins. Top and bottom margins aren't dealt with uniformly by all browsers.
If you apply a top and/or bottom margin, you will increase the space between all paragraphs associated with the element you have formatted.
Among the options available for formatting paragraphs with CSS turned on is the setting of line height. Line height is the height that a line of text occupies, from its base line to the base line of the line above or below.
To set line height:
Click the Formatting icon (Figure 3-10), and then click Paragraph to open that tab dialog.
From the Elements list, select the element or elements associated with the content you want to set line height for.
Under Advanced, click the Advanced button. A Caution dialog box opens to remind you that support for the different features in the Advanced section may vary between browsers. Click OK.
Under Line Height, on the General tab dialog, select Take from source, Don't specify, or Set to.
Take From Source means that Classic HTML Conversion Editor uses what is in the source document. Don't Specify means the Web browser used to view the Web page may substitute its own default settings. With the Set To option, you can control the line height precisely.
If you select Set to, enter a value for the number of units and select a unit of measure: points, inches, centimeters, or pixels. The line height you set will be used for all lines in paragraphs associated with the element you are editing.
Click OK to return to the Paragraph tab dialog.
Line height should be set in conjunction with font size. You shouldn't set a line height of 12 points, say, if your font size is 20 points; unless, of course, you intentionally want lines of text to overlap.
Among the options available for formatting paragraphs with CSS turned on is setting paragraph width.
To set paragraph width:
Click the Formatting icon (Figure 3-11), and then click Paragraph to open that tab dialog.
From the Elements list, select the element or elements that you want to set paragraph width for. The width will be used for all paragraphs associated with these elements.
Under Advanced, click the Advanced button. A Caution dialog box may open to remind you that support for the different features in the Advanced section may vary between browsers. Click OK.
In the Advanced Settings dialog box, click Width to open that tab dialog.
Under Content Width, select Don't specify or Set to.
"Don't Specify" means that the Web browser used to view the Web page may substitute its own default settings. With the "Set To" option, you can control the width of paragraphs precisely.
If you select Set to, in the first text box select a value for the width. In the second, select the unit of measure: points, inches, centimeters, pixels, or percent. Click OK to return to Formatting.
Click OK.
How text displays in a Web page will also be affected by the use of other features. See "Indents, Margins, Borders, and Padding".
How browsers display paragraph width onscreen and print pages with this CSS setting may vary significantly.
The following topics are covered in this section:
Classic HTML Conversion Editor can be configured to generate formatting with standard HTML tags or with CSS (cascading style sheet) markup. Enabling CSS for a template changes options in the Character and Paragraph tab dialogs in Formatting. See "Cascading Style Sheets (CSS)".
The Character tab dialog in Formatting is used to format text for your Web page at the character level. Options under Font Size are different when you have the CSS functionality turned off. See "Formatting Characters Without CSS".
To format characters with CSS turned on:
Click the Globals icon (Figure 3-12), and then click Options to open that tab dialog.
Select the Allow CSS character and paragraph formatting check box and click OK.
In Formatting, click Character to open that tab dialog.
From the Elements list, select the element or elements you want to format.
Under Font Name, Font Color, and Font Size, select radio buttons for the desired options.
"Take From Source" means that Dynamic Converter uses what is in the source document. "Don't Specify" means the Web browser used to view the Web page may substitute its own default settings.
If you select Use this font, click the down arrow on the appropriate box to select a specific font.
If you select Use this size, you have several options from the box. In addition to Larger and Smaller and a range of seven sizes from xx-Small to xx-Large (analogous to the sizes numbered 1 through 7 available when CSS is turned off), there is now a Custom option.
By selecting Custom, you can fine-tune the size of text in your Web pages, using one of four units of measure: points, inches, centimeters, or percent. Enter a value for font size and select a unit of measure.
1 inch = 72 points. "Percent" means percentage of the parent element's font size. (For example, the default font size for the <P> tag is Medium.)
If you select Use this color, click the color button to open the Color dialog box to select a color.
Under Text Effects, click Effects if you want to change some of the effects used in your source document. See "About Text Effects".
Under Table Overrides, click Override when in a table if you want to format the content of tables in the document differently. See "Formatting Characters in Tables".
Click OK to save the changes to the template.
You may want to use Table Overrides when the same styles have been used for the content of tables as well as for other content in the source document.
The actual font, font size, and font color that display in a Web page are dependent on the web browser used as well as options on the user's machine.
You use options in the Character and Paragraph tab dialogs of Formatting to format the content of tables. You use options in the Tables tab dialog to format the appearance of tables.
Classic HTML Conversion Editor can be configured to generate formatting with standard HTML tags or with CSS (cascading style sheet) markup. Enabling CSS for a template changes options in the Character and Paragraph tab dialogs in Formatting. See "Cascading Style Sheets (CSS)".
The Character tab dialog in Formatting is used to format text for your Web page at the character level. Options under Font Size are different when you have the CSS functionality turned on. See "Formatting Characters With CSS".
To format characters with CSS turned off:
Click the Globals icon (Figure 3-13), and then click Options to open that tab dialog.
Clear the Allow CSS character and paragraph formatting check box.
In Formatting, click Character to open that tab dialog.
From the Elements list, select the element or elements you want to format.
Under Font Name, Font Color, and Font Size, select radio buttons for the desired options.
"Take From Source" means that Classic HTML Conversion Editor uses what is in the source document. "Don't Specify" means the Web browser used to view the Web page may substitute its own default settings.
If you select Use this font or Use this size, click the down arrow on the appropriate box to select a specific font or size.
If you select Use this color, click the Color button to open the Color dialog box to select a color.
Under Text Effects, click Effects if you want to change some of the effects used in your source document. See "About Text Effects".
Under Table Overrides, click Override when in a table if you want to format the content of tables in the document differently. See "Formatting Characters in Tables".
Click OK to save the changes to the template.
You may want to use Table Overrides when the same styles have been used for the content of tables as well as for other content in the source document.
The actual font, font size, and font color that display in a Web page are dependent on the Web browser used as well as options on the user's machine.
Options in the Character and Paragraph tab dialogs of Formatting are used to format the content of tables. Options in the Tables tab dialog are used to format the appearance of tables.
The following topics are covered in this section:
When you format characters for an element in a template, the formatting instructions apply throughout your Web pages, including to text in tables.
Ideally, you will want to use unique styles for table content. But if you use the same styles as for the rest of your source document, you can still use Table Overrides to format text in tables differently.
To format characters in tables:
Click the Formatting icon (Figure 3-14), and then click Character to open that tab dialog.
Select the element or elements you want to format for tables.
Under Table Overrides, click Override when in a table, and then click Character.
In the Character dialog box for table overrides, select the font name, font color, and font size you want to use. See "Formatting Characters Without CSS".
If you want to change text effects, click Effects and set the appropriate options in that dialog box. See "Changing Text Effects")
Click OK to save the changes to the template and return to the Character tab dialog.
You use options in the Character and Paragraph tab dialogs of Formatting to format the content of tables. You use options in the Tables tab dialog to format their appearance.
You can format both the content of tables and their appearance. You format table content in the Character and Paragraph tab dialogs in Formatting, using the Table Overrides Element, if necessary. See "Formatting Characters in Tables" and "Formatting Paragraphs in Tables". You format the appearance of tables in the Tables tab dialog.
To format the appearance of a table, you must select the element that is associated with the style that immediately precedes the table in the source document. See "Setting Up Styles to Format the Appearance of Tables" for more information on how to make the most of Classic HTML Conversion Editor's table formatting features.
To format the appearance of tables:
Click the Formatting icon (Figure 3-15), and then click Tables to open that tab dialog.
From the Elements list, select the element that immediately precedes the table in the source document.
Under Appearance, do one of the following:
if you want to format the appearance of the table, click Borders and sizing, Alignment, or Colors (all three buttons open the same property sheet, but with a different tab dialog open initially).
if you want to ensure that no tables are contained in your output, select Omit all table markup tags from output HTML. When selected, the preview window for that element becomes blank, because no output for that element will appear within a table.
Under Special, select Convert two column tables with no visible border to heading and paragraph and use this tag for the heading part, then select a heading, if you want to convert tables containing two columns and no border into headings and paragraphs.
Under Empty Cells, accept the default of Non breaking space to place a non-breaking space in the output HTML for the table. In HTML, non-breaking spaces are required in blank cells of tables to retain proper formatting. If you would rather add text than leave an empty cell, select the blank text box and enter the text you want to appear, such as "intentionally left blank."
Under Headers, select Use row headings or Use column headings if you want the first row of the table or the first column to be treated as headings on your Web pages. (For more information, see "Formatting Headings in Tables".)
Complete formatting for the table, as appropriate.
Among the options for formatting the appearance of tables are setting colors for four separate table elements: table border, cell, border, table background, and cell background.
To set colors in tables:
Click the Formatting icon (Figure 3-16).
From the Elements list, select the element that immediately precedes the table in the source document.
Click Tables to open , and then click Colors.
Under Table Border, click one of the radio buttons.
If you select Use this color, click the Color button to open the Color dialog box and select a color you want to use. Click OK to return to the Colors tab dialog in Tables.
Repeat steps 4 and 5 to set colors for table background and also cell borders and background.
Click OK.
The Preview box displays your changes.
The Paragraph tab dialog in Formatting is used to set options for paragraphs such as alignment, indentation, and spacing. For each element selected, the formatting instructions apply throughout the web page, including to paragraphs in tables.
Ideally, you will want to use unique styles for table content. But if you use the same styles for the content of tables as for the rest of your source document, you can still use Table Overrides to format paragraphs in tables differently.
To format paragraphs in tables:
Click the Formatting icon (Figure 3-17), and then click Paragraph to open that tab dialog.
From the Elements list, select the element or elements you want to format for tables.
Under Table Overrides, click Override when in a table, and then click Paragraph.
In the Paragraph dialog box for Table Overrides, select the alignment, indentation, and spacing you want to use. See "Formatting Paragraphs Without CSS".
Click OK to save the changes and return to the Paragraph tab dialog.
You use options in the Character and Paragraph tab dialogs of Formatting to format the content of tables. You use options in the Tables tab dialog to format the appearance of tables.
To use the Tables tab dialog in Formatting to format the appearance of a table, you must select the element that immediately precedes the table. This has the advantage of letting you use unique styles for the content of all your tables while retaining the option of formatting the appearance of the tables differently.
If you plan to format all the tables the same way, you need to identify the styles that precede the tables in your source documents. Then, when you are ready to use the Tables tab dialog in Formatting, simply select all the elements based on those styles. Classic HTML Conversion Editor lets you format multiple elements simultaneously, and this approach will save you time.
On the other hand, if you plan to format some tables differently, minimal editing of your source documents may be required. But you will have much greater control over how your tables display in your Web pages, as a result.
To set up styles for formatting tables:
In your source documents, create a special series of styles named, say, Table1, Table2, etc. They all can have the same attributes and be based on Normal (their attributes don't matter if you use them only for this purpose).
Assign these styles to the tables in your documents. For example, you might want Table1 to be used for certain tables that you want to appear flush left with a blue border and yellow cell background. Likewise, you might want Table2 to be used for tables that are to be centered, with extra "padding" to set the cells apart. That is, before each table in your source document, place the appropriate style. Remember, all you're entering is an empty paragraph. So you can minimize the space the paragraph occupies by setting the font size to 2 or 3 points.
Next, create new elements for those styles in your source documents. When you format the appearance of tables in the Tables tab dialog of Formatting, pick the appropriate element: Table1, Table2, etc.
Among the options for formatting the appearance of tables are setting table borders and size. Formatting borders is a three-part process of setting the border width and then adjusting both cell spacing and cell padding. Setting table size refers to setting the width of the table itself.
To set table borders and size:
Click the Formatting icon (Figure 3-18).
From the Elements list, select the element that immediately precedes the table in the source document.
Click Tables to open , and then click Borders and sizing.
Under Table Width, click the appropriate radio button to set the width of the table in your Web page. If you check Pixels or Percent, you must also enter a value in the appropriate box opposite. You can use the up/down controls to reset the values.
Under Cell width, click Take from source or Don't specify.
Under Border thickness, select one of the radio buttons. If you select Use this thickness, use the Up/Down control to set a value in the box.
Check Set Cell Spacing and enter value in the box opposite.
Check Set Cell Padding and enter a value in the box opposite.
The Preview box displays your changes.
Among the options for formatting the appearance of tables are setting table alignment. This involves setting the horizontal position of the table on the Web page and adjusting the vertical position of cell contents.
To set table alignment:
Click the Formatting icon (Figure 3-19).
From the Elements list, select the element that immediately precedes the table in the source document.
Click Tables to open , and then click Alignment.
Under Table Horizontal, click one of the radio buttons.
If you check Use this alignment, select Left, Right, or Center from the list.
Under Cell Contents, select one of the four radio buttons according to how you want to align the contents of the table vertically within the table cells.
Click OK.
The Preview box displays your changes.
When formatting the appearance of tables (see "Formatting the Appearance of Tables"), one option is to treat the first row or column of the tables as headings in your Web output. You may want to do this if the tables of your source documents do not have a distinct style (and therefore element) associated with them.
By using this formatting option, the content associated with the heading will be associated with the <TH> tag in the output and not the <TD> tag. Your browser will treat this content differently to make it more distinctive.
The use of the <TH> tag will also make the table's content more accessible to those with disabilities who are using an HTML screen reader to gain access to your Web site and navigate its contents.
To format headings in tables:
Click the Formatting icon (Figure 3-20).
Select the element immediately before the table you want to format and click Tables to open that tab dialog.
Under Headings, select Use row headings and/or Use column headings. You can use both, assuming that all the tables associated with the selected template are structured the same way and it makes sense to treat both the first column and first row of each table as a heading.
Click OK to save your changes and return to the main window.
When you view your document in the Classic HTML Conversion Editor dialog box, your table row heading and/or table column heading will now be formatted differently, according to how your browser interprets the <TH> tag. For example, in Internet Explorer 5.5 the headings will be bold, centered within each cell.
Classic HTML Conversion Editor provides three options for associating alternative text with a graphic in a source document (see "Associating Alternative Text With a Graphic From Source"). One is to use "caption text."
"Caption text" is any text that appears immediately before or after a graphic in your source document. Either portion of text can be used as alternative text in your output Web pages. It will appear onscreen when the user passes the mouse over the graphic. It will also take the place of the graphic in the event that the graphic does not display on the web page.
To create alternative text from a caption:
Click the Formatting icon (Figure 3-21), and then click Graphics to open that tab dialog.
Under Captions, click Use caption and then click the Caption button to open the Captions dialog box.
Under Caption Source, click Before the graphic or After the graphic.
Click OK.
The text immediately before or after each graphic associated with the selected template will now be used as alternative text in your Web output pages.
If you want to use the text of actual captions in this way, the captions must immediately follow the graphic (and not a figure number, for example).
If you want to use caption text for alternative text, do not select the Use alternative text from source document if available check box on the Graphics tab dialog. Otherwise, that text will be used instead.
The following topics are covered in this section:
When you work with bulleted lists, you have the option of applying the <LI> tag as a custom tag to get the list to display flush left in your Web pages.
When you first translate a list, Classic HTML Conversion Editor applies the <P> tag to the element associated with list content so that the list displays in your Web pages just as it does in your source documents. To achieve greater control over formatting, you can select Bulleted list in the Lists tab dialog in Formatting, check Strip input to first blank space or tab, and choose a bullet for the list item. See "Formatting Bulleted Lists".
With these changes, Dynamic Converter replaces the <P> tag with the <LI> tag. The bulleted list appears correctly in your Web page, with the old bullet stripped out and the new one in its place. However, the list is indented. That is because when Dynamic Converter applies an <LI> tag to each list item, it also applies the <UL> tag to the list itself, and the <UL> tag forces indentation.
If you want your list to display flush left in your Web pages, you can apply the <LI> tag as a custom tag and thus avoid use of the <UL> tag.
To apply the <LI> tag as a custom tag:
In Formatting, select the element associated with list items and open the Lists tab dialog.
Under Type, select Not a list. Check Strip input to first blank space or tab.
With the element still selected, right-click and choose Properties from the popup menu.
In the Properties dialog box, click HTML Tag to open that tab dialog.
Click Use custom tag. Enter <LI> for the tag to be used before content, and </LI> for the tag to be used after content.
Click OK, and OK again.
When you translate your source document, Classic HTML Conversion Editor will create a Web page with the bulleted list flush left. If you view the source, you will see that the <LI> tag has been applied to each list item but that no <UL> tag has been used.
Please note that by treating the list as Not a List (step 2) you won't be able to use a custom bullet.
When you format bulleted lists, you can select the type of bullet for the list.
To choose a bullet:
In the Lists tab dialog of Formatting, click Bullets.
Do one of the following,
Under Bullet Type, check Use standard bullet and select a bullet type from the list, or
Check Use custom bullet, and in the File Name text box, enter the name of the file for the bullet you want to use. Alternatively, click Gallery to select a bullet from the Gallery.
In the Alternative Text box, enter information that you would like to display onscreen in the event that the bullet doesn't display.
Click OK.
If you check Use Custom Bullet and are using a default graphics set for your template, the path and name of the graphic will appear immediately in the File Name text box. When you return to the Lists tab dialog, the bullet from that Set will display in the Bullet panel as well as in the Preview box.
The alternative text will display when (a) a user's browser is text only, (b) a user chooses to disable the browser's graphics functionality, or (c) a visually impaired user is viewing Web pages with an HTML screen reader.
If you do not add alternative text, no default text will be used.
Lists are a special kind of content consisting of a series of related items that are either numbered or bulleted. Lists must be treated a special way in Dynamic Converter to ensure they display properly in Web pages.
Best results are obtained when you use unique elements for list content. You also need to assign the <LI> list tag to these elements. The following instructions assume you have done both. If not, see the note in "Formatting Lists".
To format bulleted lists:
Click the Formatting icon (Figure 3-22), and then click Lists to open that tab dialog.
Select the element you want to format.
Under Type, select Bulleted list.
Under Bullet, select Don't specify or Use this bullet. If the latter, click Bullets to open that dialog box. (See "Choosing Bullets for Lists" for more information.)
Check Strip input to first blank space or tab if you want to strip out the original bullets from the source data.
Web browsers don't always properly display the bullets used in the source document. Choose this option to strip out the original bullets and add new ones.
Click OK.
By selecting Bulleted List, Dynamic Converter will apply not only the <LI> tag to each list item, but also the <UL> to the list itself. As a result, the list will appear indented in your Web page. If you prefer, you can avoid use of the <UL> tag and display your list flush left by applying the <LI> tag as a custom tag. See "Applying the <LI> Tag as a Custom Tag".
Lists are a special kind of content consisting of a related series of items that are either numbered or bulleted. You may have to apply special formatting instructions to a template to ensure that lists display properly in a web browser.
Among the problems:
Lists often use tabs to set off the numbers or bullets from the content, but Web browsers do not recognize tabs. So the space between the numbers or bullets and the content will be eliminated.
Solid bullets in a source document may be barely visible when translated.
The number of the first item of a numbered list may no longer be 1.
Web browsers often "double up" the numbers or bullets of a list, so you often need to have Dynamic Converter strip out the numbers or bullets in the source document.
The automatic numbering and bulleting features of word processors can create problems, too.
Dynamic Converter does not apply the <LI> list tag to lists in source documents. As a result, any list in your source document can be "passed through" during translation. Tabs may be lost and bullets may appear smaller, but otherwise the list content will display satisfactorily in your web pages.
For best results in formatting lists, you should assign the list tag <LI> to list content. To do this, you must associate a unique style with lists in the source document, which is highly recommended. If you haven not done so, you can either create a new style in the source document, or create a character pattern to search for list content. You can use patterns even if your document is styled (as long as the pattern is mapped to a unique element).
For more information, see:
Lists are a special kind of content consisting of a series of related items that are either numbered or bulleted. You may have to apply special formatting instructions to a template to ensure that lists display properly in a Web browser.
Best results are obtained when you use unique elements for list content. You also need to assign the <LI> list tag to these elements. The following instructions assume you have done both. If not, see the note in "Formatting Lists".
Click the Formatting icon (Figure 3-23), and then click Lists to open that tab dialog.
Select the element associated with the list content.
Under Type, select Numbered list.
Under Numbering Type, select Don't specify or Use this type. If the latter, select the type of numbering you want to use from the Numbering Type list.
Check Strip input to first blank space or tab to strip out numbers from the source data.
Web browsers typically add numbers to numbered lists. Choose this option to avoid having the numbers "double up" on your web pages.
Click OK.
Dynamic Converter allows you to strip to the first white space after the first character or word of each paragraph associated with a particular element.
This option typically is used to strip out the bullets a browser automatically adds to a bulleted list so that you can then add your own custom bullets. But you may also want to strip out, for example, other content such as a special paragraph numbering system in the original source document.
To strip non-list items:
Click the Formatting icon (Figure 3-24).
In the Elements list, select the element associated with the content you want to strip in this fashion.
Click Lists to open that tab dialog.
Under Type, select Not a list.
Click the Strip input to first blank space or tab check box.
Click OK.
When you translate, the content associated with this element will have been stripped of whatever precedes the first blank space or tab of each paragraph.
If your source documents contain embedded graphics, you can control how they are converted and display in Web pages. They will be converted according to the settings in the Graphics tab dialog.
Some source documents contain embedded OLE objects. Embedded OLE objects are usually accompanied by a graphic "snapshot" in the form of a Windows metafile. On both Windows and Unix, Dynamic Converter can use the metafile snapshot to convert the OLE object. When the metafile isn't available, Dynamic Converter reverts to OLE technologies for the conversion. In that event, the conversion will still succeed on Windows, but it will fail on UNIX.
To convert graphics in source documents:
Click the Formatting icon (Figure 3-25), and then click Graphics to open that tab dialog.
From the Elements box, select the element or elements associated with graphics in the source document.
Under Format, click GIF, JPEG, PNG, BMP or WBMP, depending on which format you want to convert your graphics into.
If you want to make one of the colors in the graphic transparent, click Make this color transparent and click the Color button to open the Color dialog box. Select the color and then click OK to return to the Graphics tab dialog.
Under Alignment, select the appropriate radio button to determine the alignment of graphics in Web pages.
"Center" means the graphic will be centered on a line by itself. "Top" means the top of the graphic will align with the base line of the text. "Bottom" means the bottom of the graphic will align with the base line of the text. And "Middle" means the middle of the graphic will align with the base line of the text.
Under Appearance, check Base image sizes on original graphic size if available if you want to use the original sizes of the graphics for your Web page. (For example, you may have resized a graphic when you placed it in a Word file. With this option, you can revert to the original size of the graphic for displaying in your body pages.)
Under Appearance, check Embed graphic in output page.
In the Alternate Text text box, type what you want to display in the Web page should the reader's Web browser fail to display a particular graphic. Alternatively, click Use alternative text from source document if available. See "Associating Alternative Text With a Graphic From Source" for more information.
Your decision to embed graphics in your files or use placeholders will depend on the number of graphics, their size, and so on. Also, when you embed graphics, Dynamic Converter still creates an output graphics file.
You may want to incorporate HTML or scripting code in your Web page. You can associate HTML or scripting code with a specific element of a web page or associate it globally with the page itself. To do so globally, see "Including HTML or Scripting Code in a Web Page".
To associate HTML or scripting code with an element:
Click the Formatting icon (Figure 3-26), and then click HTML to open that tab dialog.
From the Elements list, select the element you want to associate the HTML or scripting code with.
Click Include HTML or scripting code before content.
You can enter HTML code in the text box provided or select a file containing the code. Do one of the following:
Select Use the following and in the text box type the HTML or scripting code you want to associate with the element, or
Select Use the contents of this file and in the text box type the fill path and name of the file from the gallery that contains the code. Alternatively, click Gallery to locate the file containing the HTML or scripting code.
To include HTML or scripting code after the element selected, click Include HTML or scripting code after content, and repeat step 5.
The following topics are covered in this section:
Text effects are formatting attributes associated with individual characters within a paragraph. Paragraphs often contain words or phrases set in bold or italic, say, that are not part of the paragraph style. When you translate a source document, you can retain these input effects in your Web pages. You can also turn them off or map them to different output effects.
For each effect listed, the following options are available from the boxes,
From Source: Select this option if you want to retain a particular effect during translation or want Dynamic Converter to re-map the effect.
Always On: Select if you always want the effect to apply to all content controlled by the element.
Always Off: Select if you want to turn off the effect entirely so that it won't display in the web page. The effect will apply to the whole element.
If you select Always On or Always Off, the effect is removed from the current mappings box because it is no longer available for a change in mapping.
Text effects are formatting attributes associated with individual characters within a paragraph. Paragraphs often contain words or phrases set in bold or italic, say, that are not part of the paragraph style. When you translate a source document, you can map individual input effects to other output effects.
To change a text effect:
Click the Formatting icon (Figure 3-27), and then click Character to open that tab dialog.
Select the element containing the text effect you want to edit, and click Effects to open that dialog box.
In the Output Effect column, select the effect you want to change, and do one of the following,
Right-click to display a popup menu and select the new effect you want to map to, or
Click Change to open the Change Text Effects dialog box, and from the box select the effect you want to use. Then click OK.
Click OK to return to Formatting.
The effects Inserted Text and Deleted Text relate to revisions in your source document. They are mapped to Underline and Strikethrough, respectively. For revision text to display in your output pages, you must open the Options tab dialog of Globals and select the Include revision information from source documents check box. Any colors associated with revision text in your source documents will not be preserved in your output pages.
You use the Color dialog box to set colors for text and other elements of your Web page. When you open the dialog box, a sample of any default color used displays under Custom Colors.
To change a color:
Select a color under Basic Colors, or click Define custom color and use your cursor to select a color from the color matrix. You can use the color bar to fine-tune the color selected. You can also enter RGB values to specify the hue.
The Color | Solid sample box displays each color you choose.
Click Add to custom colors if you want to make the color available in future. Then click OK to accept the color and close the dialog box.
When you return to the previous dialog box, the selected color appears in place of the color sample originally displayed.
The colors that appear in your Web pages are browser dependent. Thus, the settings shown in the Color dialog box may not be exactly those that appear in your web page.
The following topics are covered in this section:
As you format a template, you may associate a number of navigation or visual aids with a specific element, for example, text bars, button bars, rules, separators, icons, and HTML or scripting code. You can control the order in which these aids appear on your web page.
To set the order of navigation and visual aids:
Click the Formatting icon (Figure 3-28), and then click Layout to open that tab dialog.
Select the element you want to set this order for.
Sample text and icons appear in the three preview windows. You can see all the possible navigation and visual aids, as well as HTML or scripting code, that you might associate with an element.
Use your mouse to drag and drop individual navigation or visual aids, or "Custom HTML," to set the order in which these should appear before or after content, or on the same line as content. You can also change alignment in this way. Or select an item and use the Reorder buttons.
Click OK.
Unlike other tab dialogs in Formatting, you can only format a single element at a time when you are using the Layout tab dialog.
See the Layout tab dialog in Globals for setting the layout order of navigation and visual aids for the Web page as a whole.
Icons are graphics you can add to Web pages to set off content. Icons, separators, and rules all can be used the same way. So in creating Web pages, you should consider the effect you're trying to achieve before deciding which to use.
To insert an icon:
Click the Formatting icon (Figure 3-29), and then click Icons to open that tab dialog.
From the Elements list, select the element you want to modify.
To insert an icon before the selected element, check Insert icon before content.
Do one of the following:
In the File Name text box, enter the file name of the icon graphic, or
Click Gallery to open the Gallery and select an icon from the graphics available in Dynamic Converter. Select one and click OK.
Under Alignment, select Flush left or With content, depending on how the icon should appear in the Web page.
To insert an icon after the element, check Insert icon after element and repeat steps 4 and 5.
In the Alternative Text box, enter information that you would like to display as a screen tip on the Web page in the event that the separator doesn't display.
If the element you are formatting is also used in tables and you do not want icons to display in those tables, check Omit icons when element is within a table.
Click OK.
The alternative text (step 7) will display when (a) a user's browser is text only, (b) a user chooses to disable the browser's graphics functionality, or (c) a visually impaired user is viewing Web pages with an HTML screen reader.
If you do not add alternative text, no default text will be used.
You can add rules to Web pages to set off content. Rules, separators, and icons all can be used the same way. So in creating Web pages, you should consider the effect you're trying to achieve before deciding which to use.
To insert a rule:
Click the Formatting icon (Figure 3-30), and then click Rules to open that tab dialog.
From the Elements list, select the element you want to modify.
To insert a rule before the selected element, check Insert rule before content.
If you have picked a graphics set as the default, the path and name of the rule from that Set will appear automatically in the File Name text box, and the rule will appear in the Preview box below. (See "Selecting a Graphics Set for a Web Page".) In which case, go to step 8. If you haven't, and the default settings are fine, go to step 7.
In the Set Width edit box, enter the percentage (of the Web browser window) for the width of the rule, or use the up/down control to set the percentage. If you selected Pixels under Width Is, the value you enter will be in pixels.
In the Set Height edit box, enter the height of the rule in pixels, or use the up/down controls to set the pixel height.
Check 3D Shading if you want to apply a 3D effect to the rule rather than color it. To color the rule, under Color, click Set color and click the Color button to open the Color dialog box. Select a color and click OK (see "Using the Color Dialog Box").
Under Alignment, select Left, Center, or Right, depending on how the rule should appear in the Web page.
To insert a rule after the element, check Insert rule after content and repeat steps 4 to 7.
If the element you are formatting is also used in tables and you do not want rules to display in those tables, check Omit rules when element is within a table. Then click OK.
You can also set rules for an entire Web page. See "Adding Rules to a Web Page".
Separators are graphics you add to Web pages to set off content. Separators, rules, and icons all can be used the same way. So in creating Web pages, you should consider the effect you are trying to achieve before deciding which to use.
To insert a separator:
Click the Formatting icon (Figure 3-31), and then click Separators to open that tab dialog.
From the Elements list, select the element you want to modify.
To insert a separator before the selected element, check Insert separator before element.
Do one of the following,
In the File Name text box, enter the file name of the separator graphic, or
Click Gallery to open the Gallery and select a separator from the Separators group of graphics.
If you have picked a graphics set as the default, the path and name of the separator from that Set will appear automatically in the File Name text box, and the separator will appear in the Preview box below. See "Selecting a Graphics Set for a Web Page".
Under Alignment, select Left, Center, or Right, depending on how the separator should appear in the Web page.
To insert a separator after the element, check Insert separator after element and repeat steps 4 and 5.
In the Alternative Text box, enter information that you would like to display onscreen in the event that the separator doesn't display.
If the element you're formatting is also used in tables and you don't want separators to display in those tables, check Omit separators when element is within a table.
Click OK.
You can also set separators for an entire Web page. See "Adding Separators to a Web Page".
The alternative text will display when (a) a user's browser is text only, (b) a user chooses to disable the browser's graphics functionality, or (c) a visually impaired user is viewing Web pages with an HTML screen reader.
Among the options available for formatting paragraphs with CSS turned on is setting a background image.
To set a background image:
Click the Formatting icon (Figure 3-32), and then click Paragraph to open that tab dialog.
From the Elements list, select the element or elements that you want to set a background image for. The image you select will be used as a background for all content associated with these elements.
Under Advanced, click the Advanced button. A Caution dialog box may open to remind you that support for the different features in the Advanced section may vary between browsers. Click OK.
Under Background Image, on the General tab dialog, select Set background image, and then click the Gallery button to locate the graphics file that you want to use. Alternatively, if you know the path and file name of the image, you can enter it directly in the text box.
Click OK to leave the Advanced dialog box and return to the Paragraph dialog box.
You can set a background color instead of an image. See "Setting a Background Color".
Among the options available for formatting paragraphs with CSS turned on is the setting of a background color.
To set a background color:
Click the Formatting icon (Figure 3-33), and then click Paragraph to open that tab dialog.
From the Elements list, select the element or elements that you want to set a background color for. The color you select will be used as a background for all content associated with these elements.
Under Advanced, click the Advanced button. A Caution dialog box may open to remind you that support for the different features in the Advanced section may vary between browsers. Click OK.
Under Background Color, on the General tab dialog, select Take from source, Don't specify, or Use this color.
"Take From Source" means that Dynamic Converter uses what is in the source document. "Don't Specify" means the Web browser used to view the Web page may substitute its own default settings. "Use This Color" lets you specify the color you want to use.
If you select Use this color, double-click the Color button to open the Color dialog box. Select the color you want to use and click OK. See "Using the Color Dialog Box" for more information.
Click OK, again, to leave the Advanced dialog box and return to the Paragraph dialog box.
You can set a background image instead of a color. See "Setting a Background Image".
The color that actually displays in the user's browser may differ from the color you select.
You have three options in Classic HTML Conversion Editor for associating alternative text with a graphic from a source document. Whatever text is used will display in your browser in the event that the graphic does not display. (The text will also be visible when the mouse is passed over the graphic on your Web page.)
To associate alternative text with a graphic from source:
Click the Formatting icon (Figure 3-34), and then click Graphics to open that tab dialog.
Do one of the following:
Under Alternative Text, click Use Alternative text from source document if available, or
Under Captions, click Use caption, and then click the Caption button, and in the Captions dialog box, click Before the graphic or After the graphic, and then click OK, or
Under Alternative Text, enter text in the Alternative Text field that you want to display in place of the graphic.
Click OK.
You must select the element associated with a graphic in order to associate alternative text with it. However, you can select multiple elements, if you like, to be sure that you edit all the appropriate elements of the template that are associated with graphics.
You can also select multiple methods of associating alternative text, that is, all three bulleted options in Step 2. In that event, Dynamic Converter will follow the order of the bulleted list items to determine what alternative text to display. In other words, if you associate alternative text with a graphic that is embedded in a source document, that text will always be used, and the other two types of alternative text, if selected, will be ignored for that graphic. If you don't specify alternative text from the source document, then caption text will be used, if it has been specified, and any alternative text entered in the Alternative Text field will be ignored. Finally, alternative text entered in the Alternative Text field will be used only if no other alternative text is specified.
One benefit of using alternative text specified in the source document is that you can have a unique piece of text associated with each graphic. This isn't generally possible when you enter text in the Alternative Text field, unless, of course, you have created a unique style (and therefore element) for each graphic.
"Caption text" refers to any text immediately before or after the graphic. For more information, see "Creating Alternative Text From a Caption".
