Standard Customizations

Microsoft HTML Help : Standard Customizations

Standard Customizations

These are the standard customizations that you can apply to HTML Help through ePublisher Pro:

Creating See Also Links

Modifying the Appearance of the See Also Button

Customizing Hyperlink Colors

Adding a Logo

Modifying Company Contact Information

Displaying Company Contact Information

Disabling Autonumbering in Output

Modifying Page.asp

Creating See Also Links

HTML Help supports the creation of See Also links. Creating See Also links in ePublisher Pro requires distinctly different procedures for documents in Word and documents in FrameMaker. See “Creating See Also Links in FrameMaker Source Documents” on page 21 or “Creating See Also Links in Microsoft Word Source Documents” on page 23 for the correct procedures.

See Also links may be placed after any page break header. See Also links must link to a header with page break functionality. Unless users indicate that new HTML pages are to be created at specific points in the content, the source document will be transformed into one HTML page. By associating a page break with specific paragraphs or paragraph styles users may create new HTML pages.

One of the benefits of creating new HTML pages is the ability to present information to readers in smaller chunks, thus limiting the amount of scrolling needed to read any particular page.

Creating Page Breaks in Output in ePublisher Pro:

1.	Open the project.

2.	Select View > Style Designer.

3.	Click on Paragraph Styles.

4.	Click on the style for which you wish to create a page break.

5.	Click on the Options tab.

6.	Assign a value to the Page Break Priority option.

Selecting a higher-priority number (e.g., 1) instructs ePublisher to create a new HTML page (or page break) when this paragraph or paragraph style is encountered.

Selecting a lower-priority number (e.g., 2) instructs ePublisher to create a new HTML page only if the preceding paragraph did not create a new HTML page.

7.	Regenerate your project for changes to take effect.

Creating See Also Links in FrameMaker Source Documents

Users may create See Also links between source documents. There are three stages in the process to create See Also links.

Creating Paragraph and Marker Tags Inside the Source Document

Assigning Paragraph and Marker Tags Where Appropriate

Creating Paragraph and Marker Tags Inside the Source Document:

1.	Create a unique paragraph style called See Also. The design choices made in the paragraph designer will be reflected in the text of the See Also button. To modify the appearance of the button itself, see “Modifying the Appearance of the See Also Button” on page 25.

2.	Create a marker called SeeAlsoLink.

3.	Create a marker called SeeAlsoKeyword.

4.	Proceed to “Assigning Paragraph and Marker Tags Where Appropriate:”

Assigning Paragraph and Marker Tags Where Appropriate:

1.	Enter the desired text for the See Also button on a separate line in the source document where you wish for the button to appear. Assign to it the paragraph style SeeAlso created in step 1 of the “Creating Paragraph and Marker Tags Inside the Source Document:” procedure above.

2.	Assign the SeeAlsoLink marker created in step 2 of the “Creating Paragraph and Marker Tags Inside the Source Document:” procedure above to the desired text of the See Also button.

3.	Assign the SeeAlsoKeyword marker created in step 3 of the “Creating Paragraph and Marker Tags Inside the Source Document:” procedure above in the text location to which the See Also button should send the user.

4.	Proceed to “Enabling See Also Functionality in ePublisher:”

Enabling See Also Functionality in ePublisher:

If paragraph and marker styles are created after a project has been created, the user will need to rescan the documents in the project for the changes to take effect.

1.	Open the project in ePublisher Pro.

2.	Select View > Style Designer.

3.	Click on the Paragraph Styles tab.

4.	Select the See Also paragraph style.

5.	Click on the Options tab.

6.	Change the value of the See Also Name to Enabled.

7.	Click on the Marker Styles tab

8.	Confirm that the value for the SeeAlsoKeyword marker style is set to “See Also Keywords” and the value for the SeeAlsoLink marker is set to “See Also Link Keywords.”

9.	Regenerate your project for changes to take effect.

Creating See Also Links in Microsoft Word Source Documents

Users may create See Also links between source documents. There are two stages in the process to create See Also links.

Preparing the Source Document

The procedure detailed below makes use of WebWorks Transit for Microsoft Word. The WebWorks Transit menu allows you to add markers and apply conditions to your source document. For more information about WebWorks Transit please see the WebWorks Transit User Guide.

Preparing the Source Document:

1.	Create a unique paragraph style called See Also in Word. The design choices made in the paragraph designer will be reflected in the text of the See Also button.

2.	Select Initialize Menu from the WebWorks Transit menu in Word.

3.	Enter the desired text for the See Also button on a separate line in the source document where you wish for the See Also button to appear.

4.	Assign the paragraph style See Also (created in step 1 above) to the text created in step 3.

5.	Place your cursor inside the text with the See Also paragraph style.

6.	Click the Markers icon in the WebWorks Menu of Word.

7.	Scroll to the SeeAlsoLink marker in the Configure Markers window. Enter a keyword in the value field. Make note of this keyword for future reference.

8.	Click Okay to insert the marker.

9.	Assign the SeeAlsoKeyword marker in the text location the See Also button should direct the user.

10.	Proceed to “Enabling See Also Functionality in ePublisher:”

Enabling See Also Functionality in ePublisher Pro:

If paragraph and marker styles are created or assigned after a project has been created, the user will need to rescan the documents in the project for the changes to take effect.

1.	Open the project in ePublisher Pro.

2.	Select View > Style Designer.

3.	Click on the Paragraph Styles tab.

4.	Select the See Also paragraph style.

5.	Click on the Options tab.

6.	Change the value of the See Also Name option from “Disabled” to “Enabled.”

7.	Click on the Marker Styles tab

8.	Confirm that the value for the SeeAlsoKeyword marker style is set to “See Also Keywords” and the value for the SeeAlsoLink marker is set to “See Also Link Keywords.”

9.	Regenerate your project for changes to take effect.

Modifying the Appearance of the See Also Button

The color of the See Also button’s background and borders may be modified. Each button border must be modified separately. The procedure to modify each of the See Also button colors is the same; the only difference is where the desired Hex code is entered.

Changing the Color of the See Also Button:

1.	In Windows, open your project folder. Create the folder structure displayed in Figure 3. For customizations on the target level, this file structure should be created in the Targets directory. For customizations on the project level, this file structure should be created in the Formats directory.

Figure 3: Folder Structure for Modifying the See Also Button

2.	Navigate to ePublisher Pro\Formats\Microsoft HTML Help 1.x\Transforms in your installation directory.

3.	Select and copy content.xsl.

4.	Paste content.xsl into the Transforms folder created inside your project folder in step 1.

5.	Open the content.xsl file placed in the project directory.

6.	Find the block of markup shown in Figure 4.

Figure 4: Markup for Modifying See Also Button

7.	Make one or more of the following modifications to change all or part of the See Also button. The letters in Figure 4 correspond to specific parts of the button available to modify. See Table 2 for details on which letter affects each part of the button.

Table 2: Button Margin Hex Locations
Letter	Button Section
A	Modifies the overall background.
B	Modifies the left margin. The first Hex number affects the outside left margin, and the second hex number affects the inside left margin.
C	Modifies top left corner.
D	Modifies the top margin. The first Hex number affects the inside top margin and the second Hex number affects the outside top margin.

8.	Save content.xsl.

9.	Regenerate your project for changes to take effect.

Customizing Hyperlink Colors

Hyperlink color settings are stored in webworks.css. The HEX color values of a link (e.g., a:link:active, a:visited, a:link:hover, and a:link) can be replaced with any color HEX value.

Changing the Color of Hyperlinks:

1.	In Windows, open your project folder. Create the folder structure displayed in Figure 5. For customizations on the target level, this file structure should be created in the Targets directory. For customizations on the project level, this file structure should be created in the Formats directory.

Figure 5: Folder Structure for Changing the Color of Hyperlinks

2.	Navigate to ePublisher Pro\Formats\Microsoft HTML Help 1.x\Pages\css in your installation directory.

3.	Select and copy webworks.css.

4.	Paste webworks.css into the CSS file created inside your project folder in step 1.

5.	Open the webworks.css file placed in the project directory.

6.	Find the following block of markup:

a:link:active { color: #0000CC}

a:link:hover { color: #CC0033}

a:link { color: #3366CC}

a:visited { color: #9999CC}

7.	Replace any of the color values with the HEX value you would like to use.

a:link:active: controls the color of the link when it is selected.

a:link:hover: controls the color of the link when the user hovers over the link.

a:link: controls the color of unvisited links.

a:visited: controls the color of links that have already been visited.

8.	Save webworks.css.

9.	Regenerate your project for changes to take effect.

Adding a Logo

If you add a logo image to your project, the logo will display alongside your company contact information on the top and/or bottom of the output pages in your Help system. There is a three-step process in order to get your logo image to display in your output. First, you must place the image that will be used as the logo in the User Files directory; next, you must select the image in Format Settings; finally, you must enable company information to display by using the Style Designer.

Adding a Logo:

1.	In ePublisher Pro, select View > User Files.

2.	Place the logo image into this directory.

3.	Select Format > Format Settings.

4.	Click on the value field next to the Company logo image setting.

5.	Type in the name of the logo image (e.g., logo.gif) or click on the button to select the image from the User Files directory.

6.	Click OK to close the Format Settings dialog box.

7.	Select View > Style Designer.

8.	Click on the Page Styles tab.

9.	Select the first Default page style.

10.	Click on the Options tab.

11.	Enable the company information for the top and/or the bottom.

12.	Close the Style Designer.

13.	Regenerate project for changes to take effect.

Modifying Company Contact Information

You can add your company’s contact information to each output page in your Help system. The company contact information can display on the bottom and/or top of your Topic pane. You specify where the company contact information displays by enabling the Company info displayed at top or Company info displayed at bottom options in the Style Designer.

With HTML Help, users may specify a company’s name, e-mail address, phone number, fax number, and create a link to a webpage. The user may enter any information in any field. The information displays in the following order:

Adding a web page creates a link in the Company Name to that webpage. A mailto: link can be added in the e-mail Address section.

Once you have specified your company’s contact information, you will need to enable the company info display options in the Style Designer. For more information, see “Displaying Company Contact Information” on page 39.

Modifying the Company Name

In addition to adding a company name to your navigation bar, you may modify the font and size of the text.

Adding a Company Name:

1.	Select Format > Format Settings.

2.	Find the setting Company name.

3.	In the Value field, enter the company’s name (e.g., Quadralay Corporation).

4.	Click OK to close the Format Settings dialog box.

In order to display company information on the output pages, you must have the company information option enabled in the Style Designer. For more information, see “Displaying Company Contact Information” on page 39.

Modifying the Appearance of the Company Name:

The procedure to modify the appearance of text in the navigation bar requires markup to be changed in one place for text appearing at the top of the output page and another place for text that appears at the bottom of the output page.

1.	Open the page.asp file placed inside the project directory as detailed in “Modifying Page.asp” on page 40.

2.	Modify the text appearing at the top or bottom of the page.

a.	To modify the appearance of the company name when it appears at the top of the page, locate the following markup:

...

b.	To modify the appearance of the company name when it appears at the bottom of the page, locate the following markup:

...

3.	Choose from the following options to modify your company name information.

a.	Change the font-family by inserting the following markup in the table data element after `text-align:left;`:

font-family:webdings;

Substitute your preferred font family for “webdings.”

b.	Change the font size by changing the number in the following markup:

font-size:16px;

The user may specify the font size to be in points, inches, centimeters, etc.

Modifying the Company e-Mail Address

In addition to adding an e-mail address to your navigation bar, you may modify the font and size of the text.

Adding a Company e-Mail Address:

1.	Select Format > Format Settings.

2.	Find the setting Company e-mail address.

3.	In the Value field, type in the e-mail address (e.g., info@webworks.com).

4.	Click OK to close the Format Settings dialog box.

Modifying the Appearance of Company e-Mail Address:

1.	Open the page.asp file placed inside the project directory as detailed in “Modifying Page.asp” on page 40.

2.	Modify the text appearing at the top or bottom of the page:

a.	To modify the appearance of the company e-mail address when it appears at the top of the page locate the following markup:

...

b.	To modify the appearance of the company e-mail address when it appears at the bottom of the page locate the following markup:

...

3.	Choose from the following options to modify your company e-mail information.

a.	Change the font family by inserting the following markup in the table data element after `text-align:left;`:

font-family:webdings;

Substitute your preferred font family for “webdings.”

b.	Change the font size by changing the number in the following markup:

font-size:12px;

The user may specify the font size to be in points, inches, centimeters, etc.

Modifying the Company Phone Number

In addition to adding a phone number to your navigation bar, you may modify the font and size of the text.

Adding a Company Phone Number:

1.	Select Format > Format Settings.

2.	Find the setting Company phone number.

3.	In the Value field, type in the phone number (e.g., 1-800-555-5555).

4.	Click OK to close the Format Settings dialog box.

Modifying the Appearance of Company Phone Information:

1.	Open the page.asp file placed inside the project directory as detailed in “Modifying Page.asp” on page 40.

2.	Modify the text appearing at the top or bottom of the page:

a.	To modify the appearance of the company phone number when it appears at the top of the page locate the following markup:

...

b.	To modify the appearance of the company phone number when it appears at the bottom of the page locate the following markup:

...

3.	Choose from the following options to modify your company phone information.

a.	Change the font-family by inserting the following markup in the table data element after `text-align:left;`:

font-family:webdings;

Substitute your preferred font family for “webdings.”

b.	Change the font size by changing the number in the following markup:

font-size:12px;

The user may specify the font size to be in points, inches, centimeters, etc.

Modifying the Company Fax Number

In addition to adding a fax number to your navigation bar, you may modify the font and size of the text.

Adding a Fax Number:

1.	Select Format > Format Settings.

2.	Find the setting Company fax number.

3.	In the Value field, type in the fax number (e.g., 1-800-555-5555).

4.	Click OK to close the Format Settings dialog box.

Modifying the Appearance of Company Fax Information:

1.	Open the page.asp file placed inside the project directory as detailed in “Modifying Page.asp” on page 40.

2.	Modify the text appearing at the top or bottom of the page.

a.	To modify the appearance of the company fax information when it appears at the top of the page locate the following markup:

...

Creating Page Breaks in Output in ePublisher Pro:WebWorks_WriteArrow(WebWorksRootPath, "wwdd1280582", false);

Creating Paragraph and Marker Tags Inside the Source Document:WebWorks_WriteArrow(WebWorksRootPath, "wwdd1261155", false);

Assigning Paragraph and Marker Tags Where Appropriate:WebWorks_WriteArrow(WebWorksRootPath, "wwdd1261296", false);

Enabling See Also Functionality in ePublisher:WebWorks_WriteArrow(WebWorksRootPath, "wwdd1262146", false);

Preparing the Source Document:WebWorks_WriteArrow(WebWorksRootPath, "wwdd1265906", false);

Enabling See Also Functionality in ePublisher Pro:WebWorks_WriteArrow(WebWorksRootPath, "wwdd1265933", false);

Changing the Color of the See Also Button:WebWorks_WriteArrow(WebWorksRootPath, "wwdd1266722", false);

Changing the Color of Hyperlinks:WebWorks_WriteArrow(WebWorksRootPath, "wwdd1158115", false);

Adding a Logo:WebWorks_WriteArrow(WebWorksRootPath, "wwdd1279686", false);

Adding a Company Name:WebWorks_WriteArrow(WebWorksRootPath, "wwdd1244246", false);

Modifying the Appearance of the Company Name:WebWorks_WriteArrow(WebWorksRootPath, "wwdd1262222", false);

Adding a Company e-Mail Address:WebWorks_WriteArrow(WebWorksRootPath, "wwdd1231022", false);

Modifying the Appearance of Company e-Mail Address:WebWorks_WriteArrow(WebWorksRootPath, "wwdd1237902", false);

Adding a Company Phone Number:WebWorks_WriteArrow(WebWorksRootPath, "wwdd1231281", false);

Modifying the Appearance of Company Phone Information:WebWorks_WriteArrow(WebWorksRootPath, "wwdd1236389", false);

Adding a Fax Number:WebWorks_WriteArrow(WebWorksRootPath, "wwdd1244552", false);

Modifying the Appearance of Company Fax Information:WebWorks_WriteArrow(WebWorksRootPath, "wwdd1244561", false);

Creating Page Breaks in Output in ePublisher Pro:

Creating Paragraph and Marker Tags Inside the Source Document:

Assigning Paragraph and Marker Tags Where Appropriate:

Enabling See Also Functionality in ePublisher:

Preparing the Source Document:

Enabling See Also Functionality in ePublisher Pro:

Changing the Color of the See Also Button:

Changing the Color of Hyperlinks:

Adding a Logo:

Adding a Company Name:

Modifying the Appearance of the Company Name:

Adding a Company e-Mail Address:

Modifying the Appearance of Company e-Mail Address:

Adding a Company Phone Number:

Modifying the Appearance of Company Phone Information:

Adding a Fax Number:

Modifying the Appearance of Company Fax Information: