|
|
|
|
|
Modifying the Appearance of an HTML Page
The content that exists in your original source document is important and is what is ultimately going to be used to build and create your online documentation. However, it is also important to present the information in such a way that those who read it will be able to easily understand the content.
Because of this, layouts for print and online content are usually very different. ePublisher allows you to format your source document to optimize for a print environment, while using ePublisher Pro’s powerful tools to create content that is optimized for online displays.
Unlike printed content, online documentation can include extra navigation features, follow different rules regarding the number of page breaks (there are no paper pages, after all), as well as include unique page layouts for unique information.
While each online output format can vary in the types of files that are delivered, most output formats are based on HTML. Thus, when deciding on how to present your content for online delivery, it is important to consider the layout of your content on an HTML page.
In ePublisher, the overall look and feel of your output is controlled by Page Styles. By modifying the properties of Page Styles with the Style Designer, you will be able to modify the appearance of each page of your output to reflect changes, such as if navigation buttons should appear on every page, or where contact information or your company logo should appear.
The first thing you will need in order to create unique page layouts is to ensure that your output is creating more than one HTML page. This is done by creating page breaks at specific paragraphs or paragraph styles.
Creating New HTML Pages (Page Breaks)
Unless you have explicitly indicated that new HTML pages are to be created at specific points in your content, your source document will be transformed into one HTML page. By associating a page break with specific paragraphs or paragraph styles and specifying a page break handling behavior, you will be able to create new HTML pages.
One of the benefits of creating new HTML pages is that you will be able to present information to your readers in smaller chunks, thus limiting the amount of scrolling needed to read any particular page.
To create page breaks:
|
|
If you want to modify one specific paragraph, highlight the paragraph you wish to modify in the Preview pane. Next, open the Document Designer. |
|
2. |
From the Options tab, select a value for Page break priority. |
By default, selecting a higher-priority number (e.g., 1) indicates that you always want to create a new HTML page (or page break) when this paragraph or paragraph style is encountered.
By selecting a lower-priority number (e.g., 2), you are indicating that you want to create a new HTML page only if the preceding paragraph did not create a new HTML page.
To set page break handling behaviors:
|
1. |
From the Format menu, open Format Settings and locate the Page break handling setting. |
|
2. |
Set the Page break handling value to Never, Always, Combine, or If not previous. Below is a brief description of each behavior: |
|
|
Never - Page break priority for paragraphs will be ignored when generating output. |
|
|
Always - Page break priority for paragraphs will not be weighed (i.e. 1 will not be given a higher priority than 2). To create a page break, the page break priority should be set to a number greater than 0. |
|
|
Combine - Creates multiple output pages when paragraphs with the same page break priority occur in sequence. For example, if you have output that consists of three |
|
|
If not previous - Creates a single page when paragraphs with the same page priority occur in sequence. For example, if you have output that consists of three |
Displaying Company Information in an HTML Page
Most HTML-based output formats support adding company information, such as company name, e-mail address, and company logo, as part of a page layout. Once you have included your company information, you can select different locations in which to place the content.
To input your company information:
|
1. |
In ePublisher, go to Format > Format Settings. You will be updating up to six different fields, such as company e-mail address, company fax number, etc. If you do not see these items in your list of format settings, the output format that you are using does not support this feature. |
|
2. |
Click in the text field next to the company information you wish to include as part of your output: |
|
|
Company email address – The output will display a hyperlink that will display the e-mail address as you type it as well as a |
|
|
Company fax number – The output will reflect the fax number as you entered it. |
|
|
Company logo image – To include the company logo image, ensure that the image you want to use is included in the User Files directory. Press F12 on the keyboard to open the User Files directory if you need to verify that the image is present, or if you need to copy the image to the directory. The image will display at the top of all the company information |
|
|
Company name – The output will reflect the company name as you entered it. If you enter the company URL in Company webpage, the name of the company will be made into a hyperlink that will point to the URL used in Company webpage. |
|
|
Company phone number – The output will include the company phone number as you entered it. |
|
|
Company webpage – Enter the entire URL, or Web address, including the prefix (e.g., |
|
3. |
Click OK to save your information. |
To display your company information:
|
1. |
Open the Style Designer and click on Page Styles. Choose the page style you wish to modify. |
|
|
Company info displayed at top – Choose to display your company information at the top of the HTML page (Enabled) or to hide this information (Disabled). |
|
|
Company info displayed at bottom – Choose to display your company information at the bottom of the HTML page (Enabled) or to hide this information (Disabled). |
|
|
Company information will not display in the Preview pane; to view how this will look in the chosen output format, you will need to generate output. |
Setting the Background Color of an HTML Page
In terms of the CSS box model, "background" refers to the background of the content and the padding areas. If you modify the padding for a particular character style to increase or decrease in size, you will also see the background color area increase or decrease in size.
To set the background color of an HTML page:
|
2. |
From the Properties tab, click on Background. |
|
3. |
Select a color from the color chooser in the drop-down menu, or, if you know the RGB value of a color, enter that value in the Color text field. |
Setting the Background Image of an HTML Page
The background image for an HTML page is set “behind” any other layout element. Thus, if you have set a background color for the HTML page, you will not be able to see the background image.
To set a background image for an HTML page:
|
1. |
Press F12 on the keyboard to open the User Files directory. Ensure that the image you want to use as your background image is present in this directory. If it isn’t, you will need to copy the image to this directory. |
|
3. |
From the Properties tab, click on Background. |
|
4. |
Under Background Image, from Image:, choose the image you wish to use; only files that are present in the User Files directory will be displayed. |
|
5. |
From Tiling:, select if you would like the background image to Repeat, Repeat horizontally, Repeat vertically, or not repeat. |
|
6. |
From Scrolling:, select if you want your image to remain in one fixed location as a user scrolls through a page (fixed), or if you want the background image to scroll in conjunction with the content (Scroll). |
|
7. |
Under Position, enter a custom horizontal or vertical value to position the image, or choose a value from the drop-down menu next to Horizontal or Vertical. |
Setting the Border of an HTML Page
Borders are lines that can be drawn around any or all of the four sides of an HTML page, either individually or in conjunction with each other. Keep in mind that not all browsers render border styles the same way; some may not differentiate dotted lines from solid lines, for example, or the size and spacing of the dots in a dotted line may appear differently between browsers and operating systems. Some browsers may not render them at all. If you choose to use this feature, you should test the results in various browsers to verify that it works as expected.
In terms of the CSS box model, increasing or decreasing padding for an HTML page will increase or decrease the space between the content within the page and the border of the page.
To set the border style and color for an HTML page:
|
2. |
|
3. |
From Border:, choose which sides of the page will display a border. |
|
4. |
From Color:, select a color from the color chooser in the drop-down menu, or, if you know the RGB value of a color, enter that value in the Color text field. |
|
5. |
From Style:, choose the type of border you wish to display (e.g., solid line, dotted line, etc.) |
|
6. |
From Width:, choose the width of the border. |
Adjusting the White Space around an HTML Page
There are two different ways that you can adjust the white space around an HTML page in all directions: with Margin or with Padding.
In terms of the CSS box model, modifying the padding property will adjust the space inside of the border area; that is, if you have created a border (or background color) for an HTML page and you increase the size of the padding, the border will, in effect, move away from the center of the page.
Modifying the margin property will adjust the space outside of the border area; that is, if you have created a border for a page and you increase the size of the margins around it, the border will remain the same distance from the center of the page, although the position of the content may be altered since there will be an increase of white space between the modified edge of the page and other elements.
To set the margin of an HTML page:
|
2. |
|
3. |
Enter a value and select a unit of measure for the Left, Right, Bottom, or Top margin. |
To set the padding of an HTML page:
|
2. |
From the Properties tab, click on Padding. |
|
3. |
Enter a value and select a unit of measure for the Left, Right, Bottom, or Top margin. |
Adjusting the Layout and Appearance of a Page
The layout and overall appearance of your HTML pages is what gives your output its look and feel. Content must not only be well-written, but it needs to be presented in such a way that a reader can easily find and understand the information.
ePublisher Pro provides several different ways to modify the look and feel of your online content, to help you optimize your content for online delivery.
Using a Custom CSS Document
You can use existing CSS documents to modify the appearance of content instead of using the Style Designer and Document Designer. By using style names in your source document that mirror those in use in your custom CSS document (e.g., Heading1, ProceedureTitle, etc.), you will ensure that the appearance of your content will use the defined CSS document; no other association between styles will be necessary.
To use a custom CSS document with your project:
|
1. |
Press F12 on the keyboard to open the User Files directory. Ensure that the .css file that you want to use is present in this directory. If it isn’t, you will need to copy the file to this directory. |
|
3. |
From the Options tab, click on the drop-down menu for Custom document css file. Select the .css file from the list of available items in the User Files directory. |
Modifying the Appearance and Location of Additional Features
There are several different navigation features that you can include with various output formats. Not all output formats support all of the navigation features. If the active format you are using does not support a navigation feature, the option will not appear as part of the ePublisher Pro interface.
Modifying the Appearance and Location of Breadcrumbs
If you have created breadcrumbs for your online output, you have several options for how this feature can appear.
To modify the location of the breadcrumb trail:
|
3. |
Choose to show (Enabled) or hide (Disabled) a breadcrumb trail at the top of a page from Breadcrumbs shown at top of page. By default, this is set to Enabled. |
|
4. |
Choose to show (Enabled) or hide (Disabled) a breadcrumb trail at the bottom of a page from Breadcrumbs shown at bottom of page. By default, this is set to Disabled. |
|
6. |
Click on Navigation. |
|
7. |
Under Breadcrumbs, Alignment, choose to display the breadcrumb trail justified to the Left or Right, or Center it on the page. |
To modify the separators between entries in the breadcrumb trail:
|
3. |
Click on Navigation. |
|
4. |
Under Breadcrumbs, choose the separator to appear between the breadcrumb entries. By default, the separator will be a colon (:). |
Choosing the Location of Navigation Buttons
If you have included navigation buttons in your online output, you have several options for where the navigation will appear.
To modify the location of navigation links:
|
3. |
Choose to show (Enabled) or hide (Disabled) navigation links at the top of a page from Navigation links shown at top of page. By default, this is set to Enabled. |
|
4. |
Choose to show (Enabled) or hide (Disabled) navigation links at the bottom of a page from Navigation links shown at bottom of page. By default, this is set to Disabled. |
|
6. |
Click on Navigation. |
|
7. |
Under Navigation Alignment, choose to display the navigation links justified to the Left or Right, or Center them on the page. |
Choosing the Location of Your Company Information
If you have included your company information as part of your project, you have several options for where and how to display this information. For more information on how to add your company information to your output, see “Displaying Company Information in an HTML Page” on page 53.
To set the alignment of your company information:
|
|
Company info top alignment – If you have displayed the company information at the top of the page, you can choose to align the information to the Right, Center, or Left. |
|
|
Company info bottom alignment – If you have displayed the company information at the bottom of the page, you can choose to align the information to the Right, Center, or Left. |
Associating an HTML Page with a Page Style
By default, HTML output is associated with the Default page style in ePublisher Pro. Thus, you will not have to do anything special to associate HTML pages with the Default page style. However, if you want to have more than one page layout, you will need to use additional page styles. To create additional page styles, and to associate an HTML page to a specific page style, you will need to modify your source document.
To create a new page style or associate a page style with an HTML page:
|
1. |
From your source document, find the paragraph that will be the first paragraph of the desired new HTML page. |
|
2. |
Insert a PageStyle marker in that paragraph. If the PageStyle marker doesn’t already exist in you source document, follow these steps: |
|
1. |
Right-click in the desired paragraph and choose Marker... from the right-click menu. |
|
2. |
From Marker Type: do one of the following: |
|
4. |
If the MarkerStyle marker does not exist, choose Edit..., then type PageStyle as the new marker name, click Add, then click Done. |
|
6. |
Click New Marker to insert the new PageStyle marker into the source document. |
|
9. |
From the Document Manager, right-click on the document that has the new page style marker. Choose Scan Selected from the right-click menu. |
|
10. |
Open the Style Designer. Click on Page Styles. The value you used to define the PageStyle marker will appear in the list of page styles. |
|
1. |
Click in the desired paragraph, then click the Marker |
button in the WebWorks toolbar. If the toolbar is disabled, you may need to initialize it by going to |
2. |
Choose PageStyle from the list of markers. In the Value: field, enter the name of the new page style you want to use. |
|
3. |
Click OK. |
|
6. |
From the Document Manager, right-click on the document that has the new PageStyle marker. Choose Scan Selected from the right-click menu. |
|
7. |
Open the Style Designer. Click on Page Styles. The value you used to define the PageStyle marker will appear in the list of page styles. |
