51
385
USING ROBOHELP HTML 11
Generating output
Last updated 6/12/2014
Editing a screen layout
A screen layout has two key components, a set of screen layout pages and a CSS. The screen layout pages define the
content and the structure. The CSS defines the layout and the skin.
You can edit or customize a screen layout page in various ways. For example, you can add new screen layout pages, edit
the screen layout pages to customize the position and style of widgets on the pages, insert widgets, and so on.
Add a screen layout page (SLP)
A screen layout contains standard layout pages for displaying topic contents and search results. However, you can add
and design any number of layout pages to display other types of content, for example a home page with the TOC.
Note: You can add a Search Results page if the screen layout does not already have a SearchResults.slp file.
1 In the Project Set-up pod, right-click on the screen layout name or on an existing SLP name. Select New > Screen
Layout Page.
2 In the General tab, specify a page title and description.
3 In the Appearance tab, attach a style sheet and modify styles if required.
4 (Optional) Add background sound.
5 Click OK.
Screen layout page components
The key component of a screen layout page is a widget. A widget contains placeholders that you can be styled and laid
out using cascading style sheets. While generating output, RoboHelp converts the placeholders into standard HTML
tags with associated functionality.
Note: The look-and-feel of a widget in the output and in Screen Layout Editor might differ to some extent.
The following customizable widgets are available for achieving different functions:
LNG String
Insert this widget to add a string from the LNG file.
Note: The LNG file contains strings for various user interface elements. RoboHelp loads these strings at runtime.
Tab
Insert this widget to add a tab in a tabbed panel.
Browse Sequence
Choose options from this widget menu to insert browse sequence buttons and links in default or
custom styles.
Glossary
Insert this widget to create a placeholder for a glossary.
Index
Insert this widget to create a placeholder for an index.
Print Button
Insert this widget to add an icon for printing.
Print Link
Insert this widget to add a text link for printing.
Project Title
Insert this widget to create a placeholder for the project title.
Tabbed Panel
Insert a group of tabs in two layouts (tabs placed horizontally and tabs placed vertically (accordion)).
The default tab group consists of Table of Contents, Index, and Glossary. You can also choose Blank Horizontal Tabs or
Blank Vertical Tabs(Accordion) to insert blank tab groups.
Search
Insert the Search Options and Search Results Area widgets. The Search Options widget lets you add and style
a search box to display in the output. The option to show search results for all words specified in the search box is also
added by default.
76
386
USING ROBOHELP HTML 11
Generating output
Last updated 6/12/2014
The Search Results Area widget lets you design and style the area in which search results should be displayed. You can
add and configure components such as Search URL and Search Context.
Show/Hide
Insert the Show/Hide widget into a widget to enable end users to show or hide the widget. For example, if
you insert the Show/Hide widget into a TOC widget, the end users get the capability to show or hide the TOC in the
output.
Choose one of the following options:
•
Dual State Show/Hide
Displays different text (for example, Show or Hide) in each of the two states
•
Static Show/Hide
Displays the same text (for example, Show/Hide) in both states
TOC
Choose between Tree and Expanding Node to insert a TOC element on a screen layout page and style the various
placeholders. Tree displays TOC items in a hierarchical view. In Expanding Node, arrows next to the TOC items at each
level display the items at the next level.
Topic
Insert this widget to create a placeholder for topic contents.
TOC widget
Insert a TOC Tree widget or a TOC Expanding Node widget into a screen layout page to create and style a placeholder
for a TOC in the output.
Attributes
Class
Specifies that a Div class should be applied on the parent TOC placeholder
Child placeholders
A TOC Tree widget has the following child placeholders:
•
Open Book
Defines the look and feel of open book items in the TOC in the output. You can insert any relevant
HTML content inside this placeholder.
•
Closed Book
Defines the look and feel of closed book items in the TOC in the output.
•
Page
Defines the look and feel of page items in the TOC in the output.
•
Link
Defines the look and feel of TOC items that are linked to web addresses, email messages, multimedia files,
Usenet newsgroups, and FTP sites in the output.
Placeholder properties and attributes
Each Multiscreen or Responsive HTML widget has a set of placeholders, and each placeholder has predefined
attributes.
The following table lists various placeholders and their properties and attributes:
Placeholder
Parent
Children
Attributes
Alphabet category
Glossary
Text
class, showin
Browse sequence Back
[HTML]
[None]
class
AND Search Control
Browse sequence Nect
[HTML]
[None]
class
Closed book
TOC
Text
Icon
class, classhover, classselected
Filter Box
Glossary
Index
[None]
placeholder
107
387
USING ROBOHELP HTML 11
Generating output
Last updated 6/12/2014
Glossary
Tab Content Group
[HTML}
Glossary TermGlossary
DefinitionAlphabet CategoryFilter
Box
class, showin
Glossary Definition
Glossary
Text
class, classhover
Icon
Closed Book
Open Book
Page
Link
Note: These placeholders are
children of TOC.
Image
class, src, hoversrc, selectedsrc
Index
Tab Content Group[HTML]
Index Keyword
Index Link
Alphabet Category
Filter Box
class, showin
Index Keyword
Index
Text
class, classhover, classbookchilds
Index Link
Index
Text
class, classhover
Lng String
[All]
[None]
class
Navigation Link
[All]
[None]
class, href
Open Book
TOC
Text
Icon
class, classhover, classselected,
classbookchilds
Search Field
[All]
[None]
placeholder
Search Combo
Search Results
[None]
[None]
Search Context
Search Result Item
[None]
class
Search URL
[All]
[None]
class
Search Message
Search Results
[None]
class
Search Page Numbers
Search Results
[None]
class, ckasspagelink, classpage
Search Result Back
Search Results
[None]
class
Search Result Item
Search Results
Search Title
Search Context
class, classhover
Search Result Next
Search Results
[None]
class
Search Results
Tab Content Group[HTML]
Search Message
Search Combo
Search Result Item
Search Page Numbers
Search Result Back
Search Result Next
class
Search Title
Search Result Item
[None]
class
Placeholder
Parent
Children
Attributes
79
388
USING ROBOHELP HTML 11
Generating output
Last updated 6/12/2014
Guidelines for screen layout design
• Design the screen layouts using the standard widgets available with RoboHelp.
• Avoid reusing any image from the standard widgets or default layouts in any new screen layout.
• Define styles for all widgets in a screen layout CSS regardless of whether or not the widget is used in the screen
layout. This ensures that the look-and-feel of the screen layout is not affected if a widget is added later.
• Create only simple class styles in the CSS. Make sure that each style has a modular definition.
• Make sure that all the icons and images are present in the screen layout folder regardless of whether or not they are
used in the screen layout. The image names and formats should be in the required format.
• Specify height and width of images in px for
img
styles.
• Make sure that required style names are used in the screen layout. If you need to define additional styles in the CSS,
follow a similar naming convention but do not use 'w' as first the character. Style names starting with 'w' are reserved
for predefined widgets.
Show/Hide
[All]
[None]
class
Tab
Tab Group
[None]
class, classhover, classselected
Tab Content
Tab Content Group
[None]
class
Tab Content Group
Tabbed Panel
[None]
class
Tab Group
Tabbed Panel
[None]
defaulttab
Tabbed Panel
[HTML]
[None]
class, showin
Text
Closed Book
Open Book
Page
Link
Index Keyword
Index Link
Alphabet Category
Glossary Term
Glossary Definition
[None]
class
TOC
Tab Content Group[HTML]
Closed Book
Open Book
Page
Link
class, showin
Page
TOC
Text
Icon
class, classhover, classselected
Link
TOC
Text
Icon
class, classhover, classselected
Topic
Tab Content Group[HTML]
[None]
class
Placeholder
Parent
Children
Attributes
30
389
USING ROBOHELP HTML 11
Generating output
Last updated 6/12/2014
• Do not use absolute positioning in styles. Fluid layouts work better for Multiscreen HTML5 or Responsive HTML5
output.
• Do not use positioning attributes (for example, float) in the styles of top-level parent element of widgets. Examples
of these elements are Topic, Index, and Tabbed Panel.
• Include pseudo-class definition for hyperlink styles.
• Make sure that the font family used in styles is appropriate and taking care of supported devices
• Make sure that hyperlink styles take care of touch scenarios and include webkit proprietary attributes (for example,
-webkit-tap-highlight-color) if required.
Note: These attributes cannot be inserted through RoboHelp CSS Editor and need to be inserted manually.
• Use LNG strings for inserting generic text in screen layouts.
• Do not use any inline styling in screen layouts.
• Provide a representative image of each screen layout for use in its preview.
• Make sure that a Layout.css file includes the style definition used internally by Multiscreen or Responsive widgets.
Refer to the Layout.css file of any factory screen layout available in the Gallery folder of your RoboHelp installation.
Edit a screen layout page (SLP)
1 In the Project Set-up pod, expand the screen layout you want to edit.
2 Double-click the screen layout page. Screen Layout Editor opens. You can add new components by inserting
available widgets, change their placement, and modify their properties.
Screen layout page in Screen Layout Editor
3 Edit the screen layout page as required.
• To insert a widget, do one of the following:
• Select Insert > Multiscreen Widgets. Select a widget.
• Click a tool button on the Widget toolbar in Screen Layout Editor.
• To select a placeholder in the widget, click the placeholder name in the Tag list below the Screen Layout Editor
title bar. For example, to navigate to the LNG String placeholder in a Tabbed Panel widget, click LNG String in
the Tag list.
18
390
USING ROBOHELP HTML 11
Generating output
Last updated 6/12/2014
• To view or modify the attributes of a widget, do the following:
• Select View > Pods > Screen Layout Properties.
• Right-click and select Screen Layout Properties.
Customize the default Topic page
A new screen layout comes with two default pages, Search Results Page and Topic Page. You can customize these pages
in various ways.
Here are some examples of how you can customize the Topic page:
• Place the project title placeholder at the bottom of the page.
• Change the background color of the Topic page. Click Document in the Tag list, right-click and select Topic Borders
And Shading. Select a color and click OK.
• Customize the tabbed panel. To remove a tab, select the tab from the Tag list and press Delete. To add a tab, select
the tab before which you want to add a tab and click the Insert Tab widget. Specify the tab name.
• Replace the images in the browse sequence. Select an image in the browse sequence. Right-click and select Image
Properties. Browse and select the PNG file for the new image. Change the other image in the same way.
35
391
Last updated 6/12/2014
Chapter 13: Review and collaboration
At different stages of content development and even after delivery, you need input from various stakeholders, such as
other authors, SMEs, editors, and end users. RoboHelp enables effective collaboration among all these roles by
providing multiple ways of gathering, tracking, and addressing feedback.
Review in Design Editor
Insert your review comments directly in a project. You can also enable the Track Changes mode and edit the content.
Display the Review toolbar
The Review toolbar includes buttons for the following tasks:
• Add a review comment
• Edit a review comment
• Enable the Track Changes mode
• Accept this change and move to the next
• Reject this change and move to the next
• Move to the previous change or review comment
• Move to the next change or review comment
To display the Review toolbar:
❖
Select View > Toolbars > Review.
Enable the Track Changes mode
To review a project in Design Editor, open the project and edit the contents in the Track Changes mode.
Important: RoboHelp does not track formatting and structure changes. For example, if you underline a word or delete a
row from a table, the changes are not tracked.
❖
To enable the Track Changes mode, do any of the following:
• Select Review > Track Changes.
• In the Review toolbar, click the Track Changes icon .
Configure review settings
• To change the color of inserted text, right-click an instance of inserted text, and select Inserted Content Properties.
Select a color. Select Set Color As Default.
• To change the color of deleted text, right-click an instance of deleted text, and select Deleted Content Properties.
Select a color. Select Set Color As Default.
• To change the color of review comments, right-click a comment, and select Review Comment Properties. Select a
color. Select Set Color As Default.
21
392
USING ROBOHELP HTML 11
Review and collaboration
Last updated 6/12/2014
• To set the name you want to display as the reviewer name, select Tools > Options > General. In the Reviewer Name
box, type the reviewer name.
Note: Relaunch RoboHelp to load the modified settings.
PDF review
Create a PDF for review
The Create PDF For Review option in the Review menu lets you create a PDF that reviewers can review with the free
Adobe Reader. The PDF stores a tagged structure of the RoboHelp project, enabling you to import comments back in
the RoboHelp project.
Note: To ensure that comments are imported correctly, avoid updating the project after creating the PDF.
You can save the PDF locally or send it to the reviewers by e-mail. If you have Acrobat X Pro or above installed on the
same computer, you can upload the PDF on Acrobat.com, host your PDF on a SharePoint workspace, or share it in a
network location.
Note: An image map applied in a circle is converted as a hyperlink in the largest square inside the circle. Image maps applied
in polygons are not converted. Iframes are not converted; only placeholders appear. Tables, images, and other elements that
do not fit in a page are cropped. You can include or exclude dynamic HTML content, such as expanding text and drop-
down text, in the PDF created for review.
1 Select Review > Create PDF For Review.
24
393
USING ROBOHELP HTML 11
Review and collaboration
Last updated 6/12/2014
Various options to filter content for review
2 Use one of the following options to display the topics, master pages, and snippets that you want to include in the PDF:
Project Manager
Select this option to view the topic list in the order in which the topics appear in the Project
Manager pod. The topics you select from the list for adding in the PDF appear in the same order in the PDF.
Table Of Contents
Select this option to view the topic list from a selected TOC. Selecting the Exclude TOC Items
Not Linked To Topics option ensures that the PDF does not include any empty TOC entry.
3 (Optional) Use the check boxes to the left of topic names as well as the following options to filter the topic list
further:
Status
Select this option to filter topics based on a topic status.
Last Modified
Select this option to filter topics modified before or after a specified date or within a specified date
range.
Note: RoboHelp alerts you if you select a topic that is linked to Microsoft Word or FrameMaker document and the
content is outdated.
4 (Optional) Select Include Expanding And Drop-Down Text to include dynamic HTML content, such as expanding
text and drop-down text.
5 (Optional) Select Set Topic Status To ‘Sent for Review’ to autoset the status of the topics you have selected for review.
43
394
USING ROBOHELP HTML 11
Review and collaboration
Last updated 6/12/2014
6 Select one of the following PDF settings:
Save Locally:
Creates a PDF and saves it to a location you specify. You can use the PDF for self- review or copy it to
a shared location so other reviewers can add their feedback.
Send As E-Mail Attachment
Creates a PDF and attaches it to a new e-mail message open in your e-mail client. You
can complete the message and send it to the reviewers.
Send For Shared Review
Creates a PDF and uploads it to Acrobat.com, a network location, or SharePoint server for
shared review.
Note: This option is enabled in RoboHelp if Acrobat X Pro or above is installed on the same computer. In Technical
Communication Suite installations, the option is enabled in RoboHelp if Acrobat 9 Pro or above is installed on the same
computer.
7 Select Enabling Commenting In Adobe Reader.
Note: This option is enabled in RoboHelp if Acrobat X Pro or above is installed on the same computer. In Technical
Communication Suite installations, the option is enabled in RoboHelp if Acrobat 9 Pro or above is installed on the same
computer.
8 (Optional) Define and apply a conditional build expression to filter contents.
9 Click OK.
Embed SWFs in review PDF
To ensure that the PDF for review includes the SWFs inserted in the project, do the following:
1 Select Tools > Options > General.
2 Select Embed SWF In Review PDF.
Note: When you create a PDF for review without selecting this option, the PDF contains placeholders where SWFs are
inserted in the project.
Add comments to SWFs
If the PDF for review contains SWFs that you can play and pause, you can add comments to individual slides. However,
when RoboHelp imports the comments, it removes the slide association and places all the comments added to a SWF
file above the SWF file in Design Editor. It also displays each comment as a separate entry in Review Pane.
To indicate the context of a comment, add the slide title or text to describe the slide (for example, Command menu
slide: Move the pointer away from the selected menu item).
1 Choose Comments > Show Comment & Markup Toolbar.
2 Click Pause where you want to add a comment.
3 Select the Sticky Note commenting tool and click the slide to add the comment.
4 Click Play to continue the review.
Import comments from PDF
• Select Review > Import Comments From PDF.
• (Optional) Select Update Topic Status to ‘Reviewed’ to update the statuses of all topics that are being imported after
review to Reviewed.
Documents you may be interested
Documents you may be interested
