|
|
|
|
|
Using the Style Designer and Document Designer
The Style Designer and the Document Designer are tools that allow you to make modifications to paragraphs and tables. Additionally, the Style Designer provides a way to modify other aspects of your output, such as page layout and adjusting image properties.
When to Use the Style Designer
The Style Designer is used to define the appearance of the online content, such as the color or font face of a paragraph style, the style of a table border, a page layout, or the file format your images will use when converted to HTML.
These modifications are made by association with the styles present in your source document. By using styles in your original source document, you can exercise a great deal of control over the appearance and behavior of your generated output. The ePublisher engine intelligently senses the styles that are present in the source document and presents a list of these styles through the Style Designer found in ePublisher Pro. From here, you can modify the output by controlling the content through the styles listed.
For example, if you are using a style called Heading 1 in your source document, ePublisher will sense this and pull this information into your project. When you open the Style Designer in ePublisher Pro, you will see a list of all the styles that are used in your project’s documents, including Heading 1. If you select Heading 1 from the list of styles, you will be able to modify all content using the style Heading 1 in your online output.
However, keep in mind that by using ePublisher, you are only making modifications to your online output; your source document will not be affected. ePublisher is essentially a filter that transform your source document into any number of online outputs.
Opening the Style Designer
To access the Style Designer, first ensure that you have an open project. Then, click on the Style Designer 
button, located on the main ePublisher Pro toolbar.
Viewing Style Names in the Style Designer
When opening the Style Designer the Paragraph Styles pane is displayed, which shows the names of all paragraph styles used in your source document. You can easily switch to other views that show character styles, table styles, graphic styles, etc., by clicking on the corresponding button located below the styles pane.
The style names that appear in the styles pane are the same as those used in your source document with the additional style, Prototype. The Paragraph Styles pane displays paragraph styles, the Character Styles pane displays character styles, and so forth. By selecting a style listed in the styles pane, you can specify properties and options that will be included in your online output.
|
|
Your project may also contain some additional styles that you didn’t explicitly create such as |
Organizing and Managing Styles
While exploring the Style Designer, you may notice that your paragraph styles are do not have any hierarchy. One of the most powerful and time-saving features of the Style Designer is the ability to create a hierarchy of similar styles. This feature allows you to set style properties once and have them become inherited by child styles.
All style properties of a parent style are inherited by its children. If you make any changes to a parent’s properties, the changes will apply to all children of that parent.
Because of this structure, it is easy to globally change the properties associated with all (or specific) styles. For example, if you want to ensure that all styles use a sans-serif font, you could select the Prototype paragraph style and make this change with the Style Designer. All child styles of Prototype, which is essentially all styles, would then use a sans-serif font.
However, each child style can supersede the value of a property inherited from its parent. Once a value of a particular property is set at the child level, changes you make to the parent for that property will no longer affect that child.
For example, if a child style has been modified to have a particular property of Bold, setting the parent property to Regular will not change the Bold setting for the child property.
|
|
Only style properties are inherited from a parent style and can be view in the Preview. Additional functionality or features, such as those from the Options tab, are not inherited. |
To access child styles from the Style Designer:
If, when using the Style Designer, you see a plus sign [+] to the left of a style name, this indicates that this style is a parent style. To view the list of styles related to the parent style, click on the plus sign [+].
To create a parent/child relationship between two existing styles:
To reorganize parent/child relationships between existing styles, first click on the style that you want to be the child style. Then, drag and drop the style to place it on top of the style you want to be the parent style.
Updating a Project to Reflect New Styles
Your ePublisher Pro project is based upon a source document. This source document can go through content updates as well as structural updates. To ensure that your ePublisher Pro project is using the same styles that exist in your source document, it is important to occasionally scan your documents.
To scan your source documents::
|
2. |
Select Scan Selected from the right-click menu. |
When to Use the Document Designer
The Document Designer works in conjunction with the Preview pane. After selecting a section in the Preview pane, you will be able to modify the appearance of the selection by using the Document Designer.
Whereas the modifications made with the Style Designer are on a global scale – affecting all content associated with a particular style – changes made with the Document Designer are localized to specific content selections made in the Preview pane. These changes will not affect any content that may be associated with that particular style; the modifications made with the Document Designer are localized and apply only to the selected content. Modifications made with the Document Designer are based on selections; modifications made with the Style Designer are style-based.
All modifications made with the Document Designer have precedent over any other modification. That is, if you modify a paragraph with the Document Designer to reflect a 12-point typeface, but later decide that you want to use the Style Designer to affect that section and give it a 13-point typeface, the modifications made through the Document Designer will take effect. This is similar to how Cascading Style Sheets work; if there is a style conflict, the property that is most closely associated with the item, in this case a selected paragraph, takes precedence.
The Document Designer allows you to apply all the same properties and options as the Style Designer for paragraphs and tables.
WARNING: Changes made through the Document Designer are not kept if you save your project as stationery.
Opening and Closing the Document Designer
The Document Designer is, by default, docked to the upper-right section of the ePublisher Pro workspace. However, since the workspace is customizable, you can move the Document Designer to other areas of the workspace or even float it as a separate window.
To open the Document Designer, place your cursor over the Document Designer tab. To keep the Document Designer open while you work, click on the pin icon in the upper right-hand corner of the Document Designer.
To close the Document Designer, first make sure that it is not pinned open. Then, click anywhere in your ePublisher Pro workspace. In a second or two, the Document Designer will automatically close.
Modifying Output with CSS
The properties of CSS can be used to specify positioning and clipping of a style or selection, designate the HTML tag to use, and indicate the type of cursor to use in the online output. The Style Designer and Document Designer both offer an easy, intuitive interface to make modifications to your output with CSS.
Many of the modifications that are made through ePublisher Pro are based upon CSS properties and attributes. Although the Style Designer and Document Designer make interfacing with CSS much easier, you will likely find a basic understanding of CSS helpful in achieving your desired effects.
This User Guide is designed to give you a basic understanding of how the ePublisher Pro interface relates to basic CSS principles. Additionally, there are many books from third-party publishers, as well as complete documentation available on the Internet, maintained by the World Wide Web Consortium (W3C), that offer a more in-depth exploration of CSS.
Because your online output is HTML- and CSS-based, you might notice that the appearance of your output may be inconsistent between different browsers. This is a limitation of HTML and of CSS, as not all browsers have implemented the standards defined by the W3C in a consistent manner.
Futhermore, not all output formats support all of the abilities of HTML or CSS. In these instances, the incompatible modifications are disabled (grayed out) or not displayed in the ePublisher Pro interface.
Understanding the CSS Box Model
In accordance with the CSS2 specification, each element on a Web page generates its own invisible rectangular box, sometimes referred to as a box model. This box delimits the space that the element will occupy in the page layout and consists of a content area surrounded by optional blocks related to any border, margin, or padding around the content. For example, consider the following HTML snippet of a paragraph from a Web page:
<p>That's one small step for a man, one giant leap for mankind.</p>
Since this is a paragraph, the text uses a <p> tag and is contained in a P box, or paragraph box. Assuming this paragraph has only a margin applied to it (and no border or padding), its box can be represented as follows:
Other paragraph blocks, heading blocks, table blocks, and so forth may precede or follow this paragraph, and all blocks will fit together inside a page block, which contains all other elements of the page. Boxes usually correspond to HTML <h>, <p>, or <div> tags and often contain inline elements within them. Inline formatting, such as a bold word within a sentence, creates inline invisible boxes within the paragraph text.
For Western languages, the boxes, and therefore the content within them, are arranged in a left-to-right, top-to-bottom flow, which is called normal flow. Normal flow can be reversed for Eastern languages that flow from right to left. All styles are included in the normal flow unless you move them outside using the Float or Positioning properties. With float and position, you can create multi-column pages and other layouts that, in CSS1, required the use of tables. For more information on the CSS2 visual formatting model and normal flow, see the W3C documentation at:
http://www.w3.org/TR/REC-CSS2/visuren.html
The properties described in this section are all based on the visual formatting model, and each property relates to the box surrounding the selected style. Many property values are computed relative to the selected element’s containing box.
Inheriting Style Properties
When designing properties for your online output, you may realize that many of the elements of your design have similar properties. Or, perhaps, you realize that the property for a particular element is best described in the original source document; your settings in ePublisher Pro should revert back to those settings. The inheritance pop-up menu, which is available in the Style Designer and located next to each property and value, is designed to address this particular task.
You can use the inheritance pop-up menu to specify a precise value for a property or to specify where a property will inherit its value from. The inheritance pop-up menu is a contextual menu that will only display options that are valid for the property selected.
Explicit
Choose the Explicit menu option to ignore all inheritance values and use the characteristic you manually specify using the fields on the Properties tab.
Do not emit
Choose the Do not emit menu option if you do not want WebWorks ePublisher Pro to produce any styling output for a particular element. This is particularly helpful when trying to troubleshoot a design issue and determine which property or element is associated with the issue.
Inherit from parent style
Choose the Inherit from parent style menu option to inherit the value for a particular property from the parent style.
For example, let’s say that your Heading 1 style in your source document uses 16-point bold text, and you have specified that the Heading 2 style is a child of Heading 1; however, you have specified that the Heading 2 style is 12-point bold text. By choosing the Inherit from parent style option next to the Font size option, Heading 2 will inherit its formatting from Heading 1, its parent style, and now reflect a 16-point font size.
Document paragraph style
Choose the Document paragraph style menu option to inherit the exact value for a particular property from the style used in your source document.
For example, let’s say that in your source document, you have defined the paragraph style Heading 3 with the following style properties: 13-point font, Arial font and bold; however, in one section of your document, you have manually modified one of your Heading 3 titles by changing the font size to 16-point. Although you have explicitly defined Heading 3 with a 13-point font, you can opt to have ePublisher Pro use the 16-point font by choosing the Document paragraph style menu option.
Essentially, by choosing this menu option, you are telling ePublisher to pick up the exact formatting used in your source document, regardless of what you explicitly defined as the style properties for each style in the source document style settings.
Document style catalog
Choose the Document style catalog menu option to inherit the value, as specified in the source document settings, of a particular property. When you use the Document style catalog menu option, any manual modifications made to the style in the source document are ignored.
For example, let’s say that in your document, you have defined the paragraph style Heading 1 with the following style properties: 16-point font and Arial font; however, in one section of your document, you have modified one of your Heading 1 titles by changing the font to Times New Roman. In this case, by choosing Document style catalog, you are telling ePublisher to ignore any manual modifications you have made to the source document, and to only pick up the style information as specified in the source document style settings.
