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... > Navigation
The following topics are covered in this section:
Navigation is one of four property sheets in Classic HTML Conversion Editor used to edit templates. In Navigation, you create links to help users navigate your Web pages. Among the options are the ability to:
Create a page button bar or a page text bar
Create an element button bar or an element text bar
Whichever type of navigation bar you create, a range of buttons is available for the links. The Gallery offers 28 graphics sets, each consisting of a uniquely designed set of buttons suitable for all navigation purposes. In addition to the usual links for previous page, next page, etc., Classic HTML Conversion Editor provides special-purpose links:
Specific Page: Links to any URL anywhere. See "Navigating to Another Website".
Link to Source: Lets the user open the source document used to create the Web page on which the button resides. See "Link to Source Link".
Each of these special-purpose links can be added to the navigation button bars you create.
You open Navigation from the Classic HTML Conversion Editor dialog box, and can move between the four property sheets there. You can use the property sheets in any order.
If you plan to use a default graphics set, you should pick one before you enter the Navigation property sheet. See "Selecting a Graphics Set for a Web Page".
Link properties are the properties of a navigation link you select when creating a page or element button bar. They comprise:
Link Type: The type of link you are adding to the page or element button bar. In addition to the usual links for Previous Page, Next Page, etc., Dynamic Converter offers special links for Link to Source and Specific Page. You must choose a Link Type before entering the Link Properties dialog box.
Link icon: The button, representing the link, that will display on your Web page. If you have already selected a button for a particular link, it will display in the Link Properties dialog box.
Include a link of this type: Places the link in your Web page. The Before content option places the link at the top of the Web page for a page button bar and before the selected element for an element button bar. The After content option places it at the bottom of the Web page or after the element.
File name: The path and file name for the graphic representing the link. If you have associated a graphics set with your template, the appropriate button will be selected automatically. If a button isn't automatically selected, click the Gallery button to open the Gallery and choose a button.
Alternative text: The text that displays as a screen tip when you pass your cursor over the navigation button on a Web page. Also the text that displays instead of the graphic if the user chooses to view only text in the browser.
Source page URL: Applicable only when creating a Link to Source navigation button. You can use different URLs (the default is %%TRANSIT-INPUTPATH%%), depending on the location of the source document you are linking to. See "Link to Source Link" for more information.
Specific page URL: Applicable only when creating a link to a specific page on another Web site. The complete URL for the page you are targeting is entered here. Dynamic Converter provides three links for this purpose. See "Navigating to Another Website" for more information.
There are 28 graphics sets available from the Gallery in Dynamic Converter. Each one includes a unique set of buttons for creating navigation links.
The button used for a Specific Page link varies from graphics set to graphics set. In some instances the Home button is used. Since this button is also used for a Link to Source link, you may want to consider the best selection of buttons if you happen to be using both types of links in the same navigation bar.
Among the navigation options in Classic HTML Conversion Editor are several special-purpose links that can be added to a page or element button bar. Included is the Specific Page link, which lets you link to any URL.
Among the navigation options in Dynamic Converter are several special-purpose links that can be added to a page or element button bar. Included is the Link to Source link, which lets the user open the source document used to create the web page on which the link resides.
The following topics are covered in this section:
Among the navigation options in Classic HTML Conversion Editor are several special-purpose links that can be added to a page or element button bar. Included is the Link to Source link, which lets users open the source document used to create the Web page on which the link resides.
For a user to be able to open a source document in its native format from a Web page, the application used to create the source document must be available on the user's machine.
To add a Link to Source link to a page button bar:
Click the Navigation icon (Figure 4-1), and then click Page Button Bar to open that tab dialog.
Under Link Type, select Link to Source, and then click Properties to open the Link Properties dialog box.
Select the Include a link of this type check box, and then select the Before and/or After check box.
In the File Name text box, enter the path and name of the graphic to be used for the button. Or click Gallery to locate the graphic, if necessary.
In the Alternative Text text box, type the alternative text you want to appear in your Web page (the default text is "Source Document").
Under Source page URL enter the required URL to identify the location of your source document. The default is:
%%TRANSIT-INPUTPATH%%
This "token" will work for all intranet environments where the source file is in a shared location.
Click OK to return to the Page Button Bar tab dialog. The path and file name for the navigation button now displays in the Link Icon column.
Under Align top and/or Align bottom, select Left, Center, or Right to position the graphic on the page. If several graphics are displayed in the preview boxes, you can use drag and drop to change their order. Then click OK to return to the main window.
To select or clear a button, you can also double-click in the Before or After column (in the Page Button Bar tab dialog) to change the red cross to a green check mark. Alternatively, you can right-click and choose the green check mark from the popup menu, or press Ctrl+B (Before column) or Ctrl+A (After column).
If you have picked a default graphics set for the template, a button from that Set appears in the appropriate Preview window as soon as you specify a link and leave the Link Properties dialog box. Otherwise, open the Gallery in the groups mode and select a button from the Link to Source group of graphics available. Or click Browse to locate the file you want to use.
The button used for a Specific Page link varies from graphics set to graphics set. In some instances the Home button is used. Since this button is also used for a Link to Source link, you may want to consider the best selection of buttons if you happen to be using both types of links in the same navigation bar.
Among the navigation options in Classic HTML Conversion Editor are several special-purpose links that can be added to a page or element button bar. Included is the Link to Source link, which lets users open the source document used to create the Web page on which the link resides.
For a user to be able to open a source document in its native format from a Web page, the application used to create the source document must be available on the user's machine.
To add a Link to Source link to an element button bar:
Click the Navigation icon (Figure 4-1), and then click Element Button Bar to open that tab dialog.
From the Elements list, select the element you want to associate the button bar with. Under Link Type, select Link to Source, and then click Properties to open the Link Properties dialog box.
Select the Include a link of this type check box, and then select the Before and/or After check box.
In File Name text box, enter the path and name of the graphic to be used for the button. Or click Gallery to locate the graphic, if necessary.
In the Alternative Text text box, type the alternative text you want to appear in your Web page (the default text is "Source Document").
Under Source page URL enter the required URL to identify the location of your source document. The default is:
%%TRANSIT-INPUTPATH%%
This URL will work for all intranet environments where the source file is in a shared location.
Click OK to return to the Element Button Bar tab dialog. The path and file name for the navigation button now displays in the Link Icon column.
Under Alignment, select the appropriate radio button, depending on how you want the new link to be positioned on the page. Then click OK to return to the main window.
To select or clear a button, you can also double-click in the Before or After column (in the Element Button Bar tab dialog) to change the red cross to a green check mark. Alternatively, you can right-click and choose the green check mark from the popup menu, or press Ctrl+B (Before column) or Ctrl+A (After column).
If you have picked a default graphics set for the template, a button from that Set appears in the appropriate Preview window as soon as you specify a link and leave the Link Properties dialog box. Otherwise, open the Gallery in the groups mode and select a button from the Specific Page group of graphics available. Or click Browse to locate the file you want to use.
The button used for a Specific Page link varies from graphics set to graphics set. In some instances the Home button is used. Since this button is also used for a Link to Source link, you may want to consider the best selection of buttons if you happen to be using both types of links in the same navigation bar.
When a button is associated with an element and set to align away from content, Dynamic Converter uses an HTML table to achieve this effect. If your audience uses browsers that do not support tables, you should avoid using icons, bullets, or navigation buttons that are formatted to appear away from content.
The following topics are covered in this section:
When you create a page button bar to help users navigate your Web page, you can include a special link to any URL. Classic HTML Conversion Editor lets you create three such links.
To add a specific page link to a page button bar:
Click the Navigation icon (Figure 4-3), and then click Page Button Bar to open that tab dialog.
Under Link Type, select one of the Specific Page entries, and then click Properties to open the Link Properties dialog box.
Select the Include a link of this type check box, and then select the Before and/or After check box.
In the File Name text box, enter the path and name of the graphic to be used for the button. Or click Gallery to locate the graphic, if necessary.
In the Alternative Text text box, type the alternative text you want to appear in your Web page.
This text will display as a screentip when you pass your cursor over the navigation button on a Web page. It will also display instead of the graphic if the user chooses to view only text in the browser
In the Specific Page URL text box, enter the full URL for the specific page on the Web site you want to link to.
Click OK to return to the Page Button Bar tab dialog. The path and file name for the navigation button now display in the Link Icon column.
Under Align top and/or Align bottom, select Left, Center, or Right to position the graphic on the page. If several graphics are displayed in the preview boxes, you can use drag and drop to change their order.
Click OK to return to the main window.
To select or clear a link, you can also double-click in the Before or After column (in the Page Button Bar tab dialog) to change the red cross to a green check mark. Alternatively, you can right-click and choose the green check mark from the popup menu, or press Ctrl+B (Before column) or Ctrl+A (After column).
If you have picked a default graphics set for the template, a button from that Set appears in the appropriate Preview window as soon as you specify a link and leave the Link Properties dialog box. Otherwise, open the Gallery (in the Groups mode) and select a button from the Specific Page group. Or click Browse to locate the file you want to use.
The button used for a Specific Page link varies from graphics set to graphics set. In some instances the Home button is used. Since this button is also used for a Link to Source link, you may want to consider the best selection of buttons if you happen to be using both types of links in the same navigation bar.
When you create an element button bar to help users navigate your Web page, you can include a special link to any URL. Classic HTML Conversion Editor lets you create three such links.
To add a specific page link to an element bar:
Click the Navigation icon (Figure 4-4), and then click Element Button Bar to open that tab dialog.
From the Elements list, select the element you want to associate the button bar with. Under Link Type, select one of the Specific Page entries, and click Properties to open the Link Properties dialog box.
Select the Include a link of this type check box, and then select the Before and/or After check box.
In File Name text box, enter the path and name of the graphic to be used for the button. Or click Gallery to locate the graphic, if necessary.
In the Alternative Text text box, type the alternative text you want to appear in your Web page.
This text will display as a screen tip when you pass your cursor over the navigation button on a Web page. It will also display instead of the graphic if the user chooses to view only text in the browser
In the Specific Page URL text box, enter the full URL for the specific page on the Web site you want to link to.
Click OK to return to the Element Button Bar tab dialog. The path and file name for the navigation button now display in the Link Icon column.
Under Alignment, select the appropriate radio button, depending on how you want the new link to be positioned on the page.
Click OK to return to the main window.
To select or clear a button, you can also double-click in the Before or After column (in the Element Button Bar tab dialog) to change the red cross to a green check mark. Alternatively, you can right-click and choose the green check mark from the popup menu, or press Ctrl+B (Before column) or Ctrl+A (After column).
If you have picked a default graphics set for the template, a button from that Set appears in the appropriate Preview window as soon as you specify a link and leave the Link Properties dialog box. Otherwise, open the Gallery (in the groups mode) and select a button from the Specific Page group. Or click Browse to locate the file you want to use.
The button used for a Specific Page link varies from graphics set to graphics set. In some instances the Home button is used. Since this button is also used for a Link to Source link, you may want to consider the best selection of buttons if you happen to be using both types of links in the same navigation bar.
When a button is associated with an element and set to align away from content, Dynamic Converter uses an HTML table to achieve this effect. If your audience uses browsers that do not support tables, you should avoid using icons, bullets, or navigation buttons that are formatted to appear away from content.
The formatting options for creating text bars differ, depending on whether Cascading Style Sheets (CSS) is turned on or off.
With CSS turned off, the Font panel in the Page Text Bar and Element Text Bar tab dialogs of Navigation displays as follows:
With CSS turned on, it displays as follows:
Thus, with CSS, you have additional options from the list for Use this size. In particular, by selecting Custom, you can choose both the unit of measure (points, inches, centimeters, or percentage) and a precise font size.
Among your navigation options is the ability to create a button bar to be placed on each page of your web page.
You can also create an element button bar that is associated with a specific element (see "Navigating With an Element Button Bar").
To create a page button bar:
Click the Navigation icon (Figure 4-7), and then click Page Button Bar to open that tab dialog.
Under Link Type, select the link you want to create.
For each type of link you want, double-click the red cross in the Before and/or After column, depending on where you want to place the specific link (top or bottom of the page). The red cross turns into a green check mark.
If you have picked a default graphics set for the template, a button from that Set appears immediately in the appropriate Preview window below and the path and file name for the graphic appears in the Link Icon column. Otherwise, click Gallery and select a button from the appropriate group.
To change the order of the buttons on the bar, select the button you want to move and use the Reorder arrows above the Top of Page Preview window, or simply drag and drop the graphics image.
Under Align top, select Left, Center, or Right, depending on where you want the button bar positioned. Under Align bottom, do the same.
Click OK.
In step 4, you could also right-click and choose the green check mark from the popup menu, or press Ctrl+B (Before column) or Ctrl+A (After column). Alternatively, once you select a Link Type (step 3), you can click Properties to open the Link Properties dialog box and make your selection there (see "Link Properties").
Among your navigation options is the ability to add a page text bar to your Web page. The text is drawn from headings (or other content) of the source document.
You can also create an element text bar that draws its content from headings on the Web page on which the text bar resides (see "Navigating With an Element Text Bar").
To create a page text bar:
Click the Navigation icon (Figure 4-8), and then click Page Text Bar to open that tab dialog.
Click Build a text bar from all, and from the first list, select the element to be used for building the text bar. From the second list, select the number of words to be used for each entry.
Example If you select Heading 1 and accept the default of 2 words, Classic HTML Conversion Editor creates a text bar comprising an entry for each heading at that level, using the first two words of each heading.
Click Strip input to first blank space or tab, if necessary (recommended if the element is numbered, so that only the text of the element will appear in the text bar).
Under Placement, select Top of Page or Bottom of Page.
Under Alignment, select Left, Center, or Right.
Under Font, click Use this font and select the font you want to use from the list. Then click Use this size and select Absolute, Larger or Smaller. If you choose Absolute, select a relative size from the second list.
Select Bold, Italic, and/or All Caps to complete the formatting of your text bar.
Click OK.
If you turn on Cascading Style Sheets for the template, the list for font size provides more options. In particular, you can select Custom and then choose both a unit of measure (the default is points) and a precise font size. See "Formatting a Text Bar With CSS".
The font you select for the text bar must be available on the user's machine. Otherwise, the browser will substitute a font.
Among your navigation options is the ability to associate a button bar with a specific element on your Web pages. The button bar can contain special links such as allowing the user to open the source document used to create the Web page.
You can also create a page button bar to appear at the top and/or bottom of your Web pages (see "Navigating With a Page Button Bar").
To create an element button bar:
Click the Navigation icon (Figure 4-9), and then click Element Button Bar to open that tab dialog.
From the Elements list, select the element you want to associate the button bar with. Under Link Type, select the link you want to create.
For each type of link you want, double-click the red cross in the Before and/or After column, depending on where you want to place the specific link (before and/or after the element). The red cross turns into a green check mark.
If you have picked a default graphics set for the template, a button from that Set appears immediately in the appropriate Preview window below and the path and file name for the graphic appears in the Link Icon column. Otherwise, click Gallery and select a button from the appropriate group.
To change the order of the buttons on the bar, select the button you want to move and use the Reorder arrows above the Preview window, or simply drag and drop the graphics image.
Under Alignment, select the appropriate radio button, depending on how you want the new link to be positioned in this page.
Click OK.
In step 4, you could also right-click and choose the green check mark from the popup menu, or press Ctrl+B (Before column) or Ctrl+A (After column). Alternatively, once you select a Link Type (step 3), you can click Properties to open the Link Properties dialog box and make your selection there (see "Link Properties").
The Continue links between documents check box is selected by default. As a result, users can scroll through the Web pages created from all of the source documents in a given publication. To create a formal break after the last Web page of each document, clear this check box.
When a button is associated with an element and set to align away from content, Classic HTML Conversion Editor uses an HTML table to achieve this effect. If your audience uses browsers that do not support tables, you should avoid using icons, bullets, or navigation buttons that are formatted to appear away from content.
Among your navigation options is the ability to create an element text bar to link the elements of a Web page. The text is drawn from headings (or other content) on the Web page on which the text bar resides.
You can also create a page text bar that draws its content from all the Web pages for a given publication (see "Navigating With a Page Text Bar").
To create an element text bar:
Click the Navigation icon (Figure 4-10), and then click Element Text Bar to open that tab dialog.
Click Build a text bar from all, and from the first list, select the element to be used for building the text bar. From the second list, select the number of words to be used for each entry.
Example: If you select Heading 1 and accept the default of 2 words, Dynamic Converter creates a text bar comprising an entry for each heading at that level, using the first two words of each heading.
Click Strip input to first blank space or tab, if necessary (recommended if the element selected is numbered, so that only the text of the element will appear in the text bar).
Under Placement, click Top of page or Bottom of page to place the text bar at the top or bottom of Web pages. To place the text bar before or after a specific element, click Before every or After every and choose that element from the appropriate list.
Under Alignment, select Left, Center, or Right.
Under Font, click Use this font and select the font you want to use from the list. Then click Use this size and select Absolute, Larger or Smaller. If you choose Absolute, select a relative size from the second list.
Select Bold, Italic, and/or All Caps to complete the formatting of your text bar.
Click OK.
If you turn on Cascading Style Sheets for the template, the list for font size provides more options. In particular, you can select Custom and then choose both a unit of measure (the default is points) and a precise font size. See "Formatting a Text Bar With CSS".
The font you select for the text bar must be available on the user's machine. Otherwise, the browser will substitute a font.
The following topics are covered in this section:
Graphics can enhance your Web pages in many ways. Classic HTML Conversion Editor ships with over 900 GIFs that can be selected from 28 pre-arranged Sets that contain navigation and visual aids in the same graphics style. You can also select graphics grouped in categories such as backgrounds and separators (the same categories are reflected in the folders found in the Gallery directory). You can even create your own Sets.
The Graphics Gallery has two modes: Sets and Groups. In the Sets mode (the default), you can click the options in the Sets window (Apple Butter, etc.) to view the various navigation buttons and other visual aids available in a particular style. (To view the graphic individually, click the plus box next to the Set name to open a folder and then click the graphics you want to view.)
In the Groups mode, click any plus box in the Groups window to open the folder to reveal all the graphics of a particular type available. You can select the first graphic in the group and press the down arrow repeatedly to scroll through all the options available.
Classic HTML Conversion Editor ships with over 900 GIFs for use as navigation and visual aids. Many of them are available as part of the 28 graphics sets you can choose from to ensure a consistent look to your Web pages.
Each Set consists of all the navigation buttons you'll need to create the necessary jumps between the pages of your Web page, plus a separator, a horizontal rule, a bullet, and a background. And each Set has its own distinctive design.
You can make any of the Sets your default Set for a particular template. Once you do that, graphics from that Set are immediately available from the Set at appropriate points in the program.
For example, if in Formatting you want to place a separator before the element selected, simply click the Insert Separator Before Content check box in the Separators tab dialog. The separator from the default graphics set will display immediately in the Preview window and the path and file name for the graphic will display in the File Name text box.
When you associate a graphics set with a template, the background graphic is automatically applied to all Web pages controlled by that template. You can change this, if you want, in the Colors tab dialog of Globals.
The table below lists all 19 body templates in the default project file. The graphics set listed for each body template is also associated with templates. (There are 28 graphics sets in Dynamic Converter, so not all are used.)
Template | Graphics Set |
---|---|
Academy | Aqua Weave |
Acclaim CSS | Investment |
Account | Clearing House |
Adagio CSS | Gray Tab |
Administration | Planner |
Analysis | Grouted Tiles |
Archive CSS | Scalloped |
Blank | None |
Business | Blue Bevel |
Ceremonial | Blue Mexico |
Courtesy CSS | Cranberry Script |
Executive | Gray Tab |
Introduction CSS | Blue Peach |
Lotus 1-2-3 | Royal Cloth |
Lotus Freelance | Olive |
MS Excel | Skill Set |
MS PowerPoint | Maroon Sand |
Purple Frost | Lilac Spiral |
Retrofied! CSS | Salmon Retro |
You can create a new graphics set for the Gallery and edit existing Sets. You do this in Set Properties dialog box, which is available from the Gallery dialog box when it is in the Sets mode. (Click Properties to open the dialog box.)
The following topics are covered in this section:
You can create a new graphics set in the Gallery if you don't want to use any of the Sets provided.
You can open the Gallery in different ways. If you start in Globals, click the Set tab, and then click Gallery, the Gallery is already in the Sets mode.
To create a new graphics set:
Click New to open the Set Properties dialog box.
In the Name text box, enter the name you want to use for the new Set.
Double-click any of the buttons you want to use, for example, Previous Page (top left). This will return you to the Gallery, which is now in the Groups mode.
From the Groups box, click the plus box opposite Preview Page to list all the graphics available in that category.
Click several, in turn, to see which one you want to use. Select one and click OK. You'll return to Set Properties, with the graphic you just selected in the Previous Page box.
In the Set Properties dialog box, double-click the second button you want to use, and repeat steps 4 and 5.
Repeat this procedure until you have created a graphics set that includes all the navigation and visual aids you'll need for your Web pages.
When you're done, click OK. When you return to the Gallery this time, you will be in the Sets mode and the name of the new Set will display under Sets, to the left.
If you select a rule as part of your graphics set, see "Formatting a Rule for a Graphics Set" for how to edit its size and color.
You can edit a graphics set in the Gallery at any time, whether it's a Set provided by Dynamic Converter or one you created yourself.
You can open the Gallery in different ways. If you start in Globals, click the Set tab, and then click Gallery, the Gallery is already in the Sets mode.
To edit a graphics set:
Under Sets, select the graphics set you want to edit.
Click Properties to open the Set Properties dialog box.
Double-click the graphic you want to change, for example, Index. You'll return to the Gallery, which is now in the Groups mode.
Under Groups, locate the Index group and click the plus box to display all the graphics available in that group.
Select another graphic and click OK. You'll return to the Set Properties dialog box, with the new graphic you selected now in the Index box.
Repeat these steps to edit any additional buttons you want to change.
Click OK.
Each graphics set in the Gallery has a rule as part of the Set. And when you create a new graphics set (see "Creating a New Graphics Set"), you have the option of including a rule in the Set.
In the Set Properties dialog box, you select the bar containing the rule, which activates the Properties button in the Horizontal Rule panel. You can then click Properties to open the Rule Properties dialog box.
To format a rule for a graphics set:
Opposite the Set width box, accept the default 80% or use the Up/Down control to adjust the value. If you prefer to set the value in pixels, click Pixels in the Width is panel, and then adjust the value in the Set width box.
Opposite Set height (pixels), set a value for the height of the rule in pixels. Use the Up/Down control to adjust the value, if necessary.
Click 3D Shading if you want a 3D effect for the rule. Alternatively, click Set Color in the Color panel and click the Color button to open the Color dialog box. Select a color and click OK to return to the Rule Properties dialog box.
You can check your formatting in the Sample box as you make changes.
Under Alignment, check Left, Center, or Right for the horizontal placement of the rule.
Click OK to return to the Set Properties dialog box.
If you make the graphics set your default for a template, this rule will be available throughout Dynamic Converter for the template. That is, wherever you select a rule, the settings will be automatically used. However, you can always format the rule differently for a specific use, if you want.
To rename a graphics set:
Open the Globals property sheet.
Click Set to open , and then click Gallery to open the Gallery.
Select the Set you want to rename, and click Properties to open the Set Properties dialog box.
In the Name text box, enter the name you want to use for the Set, and click OK.
Click OK to return to the Set tab dialog, and OK again to return to the main window.
You can create a new group of graphics for the Gallery, and edit new or existing groups. You do this in Set Properties in the Groups mode.
The following topics are covered in this section:
Classic HTML Conversion Editor ships with over 900 GIFs in groups or categories, such as separators and bullets. You can create a new group, if you want. You can use some of the graphics already in the Gallery or your own graphics.
To create a new group for graphics:
In the Gallery dialog box, select Groups under Mode.
Click New.
In the Name text box enter the name of the group you want to create.
In the File Name specification text box, enter a specification for the type of graphics you'll place in the group (say, *.gif). You can enter multiple specifications by separating them with a comma.
In the Directory, enter a path for the directory that contains the graphics you want to place in the new group (use the Browse button to locate the directory, if necessary).
Under Group Type, select the type of group you want to create.
Click OK.
You can edit a group of graphics in the Gallery at any time, whether an existing group or one you created yourself.
To edit a group of graphics:
Under Mode, select Groups.
Under Groups, select the group you want to edit.
Click Properties to open the Set Properties dialog box.
Edit the Name, File Name Specification, Directory, and Group Type information, as appropriate.
Click OK.