Mike Hamilton V.P. Product Management MadCap Software [email_address] MadCap Flare –  Controlling Document  Look and Feel ...
Slides <ul><li>Slides are available on Mike’s blog at: </li></ul><ul><li>http://madcapsoftware2.wordpress.com </li></ul>
Agenda <ul><li>What are Cascading Stylesheets (CSS)? </li></ul><ul><ul><li>CSS Basics </li></ul></ul><ul><ul><ul><li>CSS R...
Agenda <ul><li>Modifying styles </li></ul><ul><li>Applying styles to content </li></ul><ul><li>Applying a style sheet to t...
Cascading Stylesheets Introduction
What Are Cascading Stylesheets? <ul><li>A Cascading stylesheet (CSS) document is a simple text file. </li></ul><ul><li>A C...
Cascading Style Sheets (CSS) <ul><li>Style Rules </li></ul>Selector Declaration Value Property H1 {font-weight: bold} H1 {...
CSS Inheritance <ul><li>XHTML elements inherit style attributes </li></ul><ul><li><body> </li></ul><ul><li><p>Sample text<...
HTML Page Structure Document (HTML) Head Body H1 Heading Paragraph 1 Paragraph 2 Title
Cascading <ul><li>Three CSS implementations </li></ul><ul><ul><li>External </li></ul></ul><ul><ul><ul><li>Linked to an unl...
Cascading <ul><li>Order of precedence </li></ul><ul><li>Inline styles </li></ul><ul><li>Embedded style sheets </li></ul><u...
Inline CSS <ul><li>Use the STYLE attribute  </li></ul><ul><li><p>This is normal text</p> </li></ul><ul><li><p  style=“font...
Embedded CSS <ul><li>Added to the <HEAD> area of file </li></ul><ul><li>Use <STYLE> element </li></ul><ul><li><HEAD> </li>...
External CSS <ul><li>The  <LINK>  element is used to attach a CSS document to an HTML document </li></ul><LINK REL=&quot;S...
CLASS attribute <ul><li>CLASS attribute can be used to create custom styles for a set of items on a page </li></ul><ul><ul...
CLASS attribute <ul><li>Class Syntax: </li></ul><ul><ul><li>In a style sheet:  </li></ul></ul><ul><ul><ul><li>P.myclass { ...
Spans <ul><li>Spans format text within an element such as a paragraph, list, or table </li></ul><ul><li>Conceptually simil...
Divs <ul><li>Divs allow for grouping many elements together </li></ul><ul><li><div class=“indent”> </li></ul><ul><li><p>Pa...
Using Cascading Stylesheets   in Flare
Creating a Stylesheet <ul><li>Select  Project > Add Stylesheet </li></ul>
Creating a Stylesheet <ul><li>In the  Template Folders  section select  Factory Templates . </li></ul><ul><li>In the  Temp...
Modifying a Style <ul><li>Open a stylesheet. By default stylesheets are stored in the  Resources  folder in the  Content M...
Applying a Style <ul><li>Open a topic. </li></ul><ul><li>Select or click inside the content to which you want to apply the...
Applying a Stylesheet to a Topic <ul><li>Open the topic that you want to link to the stylesheet. </li></ul><ul><li>Select ...
Applying a Stylesheet to a Topic <ul><li>Select a stylesheet. </li></ul><ul><li>Click  . </li></ul><ul><li>The stylesheet ...
Font Family <ul><li>What is a Font Family?   </li></ul><ul><li>A list of alternate fonts for styles used in your project  ...
Font Family <ul><li>Font Family Guidelines   </li></ul><ul><li>Define primary font </li></ul><ul><li>Define secondary font...
Font Family <ul><li>Fonts Common to an OS   </li></ul><ul><li>Arial </li></ul><ul><li>Comic Sans MS </li></ul><ul><li>Cour...
Font Family <ul><li>Recommended Font Families   </li></ul><ul><li>Arial, Helvetica, Sans-serif </li></ul><ul><li>Verdana, ...
<ul><li>Demo   </li></ul><ul><li>Creating a Font Family in Flare </li></ul>Font Family
Font Sizing <ul><li>There are two ways to define font sizes in an HTML environment </li></ul><ul><ul><li>Fixed Font Sizing...
Font Sizing <ul><li>Fixed Font Sizing   </li></ul><ul><li>Fixed Font Sizing defines the size of fonts using absolute units...
Font Sizing <ul><li>Relative Font Sizing   </li></ul><ul><li>Relative Font Sizing defines the size of fonts using relative...
Font Sizing <ul><li>Relative Font Size Guidelines   </li></ul><ul><li>Define the size for the normal style as 100% to prov...
<ul><li>Demo   </li></ul><ul><li>Setting Relative Font Sizes </li></ul><ul><li>in Flare </li></ul>Font Sizing
Creating a Style Class <ul><li>Open a stylesheet. </li></ul><ul><li>If the Stylesheet Editor opens to the Simplified view,...
Creating a Style Class <ul><li>Click  Create Style. The Create Style dialog box appears. </li></ul><ul><li>In the  Name  f...
Creating a Style Class <ul><li>If you do not want to include a style property in the new style, click the check box next t...
Auto-Numbering <ul><li>Auto-Numbering can be used to allow for automated figure or table numbers, for government style par...
Cross-References <ul><li>Cross-references allow for an extremely elegant single-source handling of linking </li></ul><ul><...
Suggested Reading List <ul><li>Watch all of the built in Flare tutorial videos. </li></ul><ul><li>Read as much of the onli...
Suggested Reading List <ul><li>HTML, XHTML, and CSS, Sixth Edition (Visual Quickstart Guide) </li></ul><ul><li>by  Elizabe...
<ul><li>Questions? </li></ul>
Upcoming SlideShare
Loading in …5
×

MadCap Flare – Controlling Document Look and Feel with CSS

2,985 views
2,829 views

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
2,985
On SlideShare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
28
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • EXAMPLE: BASIC.HTM Go through the entire file and describe all of it – especially style sheets
  • Creates a unified look between all of your documents Provides a very easy way to change the look of several documents at once (templates) You can define characteristics for specific tags, the a subset of items with a specific tag, or all items in a “class” External vs. Embedded Embedded applies only to the current page External (“linked”) applies to all pages that are linked to it The examples in this talk use embedded so we can stay in one file Values that can be affected by a style sheet: Paragraph-level (margins, padding, border) Character-level (font, color, background color, position) Some of the attributes can be either character or paragraph level.
  • Rel=related
  • This is an easy way to affect a group of items (within a tag group or outside of tag groups) EXAMPLE: CLASS.HTM Add: P.SpecialPClass { font-weight : bold; font-size : 18pt; color : Maroon; } to style sheet Add: .GeneralClass { color : red; } to style sheet Add: CLASS=&amp;quot;GeneralClass“ to H3 tag Add: &lt;SPAN CLASS=&amp;quot;GeneralClass&amp;quot;&gt; around “Wednesday” in 1 st paragraph Replace: &lt;P&gt;Dow Jones&lt;/P&gt; with &lt;DIV ID=&amp;quot;DowJones&amp;quot;&gt; &lt;P CLASS=&amp;quot;SpecialPClass&amp;quot;&gt;Dow Jones&lt;/P&gt; &lt;/DIV&gt; Show: New York – H3 Wednesday – SPAN Dow Jones - DIV
  • This is an easy way to affect a group of items (within a tag group or outside of tag groups) EXAMPLE: CLASS.HTM Add: P.SpecialPClass { font-weight : bold; font-size : 18pt; color : Maroon; } to style sheet Add: .GeneralClass { color : red; } to style sheet Add: CLASS=&amp;quot;GeneralClass“ to H3 tag Add: &lt;SPAN CLASS=&amp;quot;GeneralClass&amp;quot;&gt; around “Wednesday” in 1 st paragraph Replace: &lt;P&gt;Dow Jones&lt;/P&gt; with &lt;DIV ID=&amp;quot;DowJones&amp;quot;&gt; &lt;P CLASS=&amp;quot;SpecialPClass&amp;quot;&gt;Dow Jones&lt;/P&gt; &lt;/DIV&gt; Show: New York – H3 Wednesday – SPAN Dow Jones - DIV
  • Font sets allow you to define a list of alternate fonts for those used in the style sheets referenced by your topics. The browser or display device will attempt to use the primary font in the font set. If it can’t find the primary font on the users system, then it will try to use the other fonts in the font set in the order they are listed. All operating systems have a unique set of system fonts and font names. Many of the fonts on your authoring workstation may not be available on the users systems. Depending on your knowledge of your users and their system configurations, you will determine which font to define as the primary font, and how many alternatives you need to provide. In this example, we will create a font set that uses a Windows system font as the primary, but also calls a Macintosh system font and a generic font type for other operating systems.
  •  
  • These are lists of standard fonts that should be available on all Windows and Mac operating systems
  • Tips: Various operating systems display fixed text sizes very differently. The 10 pt text that looks good on your desktop machine will require a magnifying glass to read on a Macintosh. This is due to differences in how operating systems render fixed size fonts. Fixed size fonts will always render differently on different platforms. This is due to different operating systems having different standards for the default points per inch (ppi).
  • Defining the size info for the normal style as 100% will force the browser or display device to render normal text in the browsers default text size. You can then define various heading sizes as a percentage of the normal text – e.g. 115%.   Since individual browsers are written to a particular operating systems, they already take the differing ppi standards into consideration. Using the default browser text size (or a percentage of the default) should provide consistent looking, legible text on any platform.
  • Update the content master page to use auto-numbering to automatically add chapter numbers to every page.
  • MadCap Flare – Controlling Document Look and Feel with CSS

    1. 1. Mike Hamilton V.P. Product Management MadCap Software [email_address] MadCap Flare – Controlling Document Look and Feel with CSS
    2. 2. Slides <ul><li>Slides are available on Mike’s blog at: </li></ul><ul><li>http://madcapsoftware2.wordpress.com </li></ul>
    3. 3. Agenda <ul><li>What are Cascading Stylesheets (CSS)? </li></ul><ul><ul><li>CSS Basics </li></ul></ul><ul><ul><ul><li>CSS Rules </li></ul></ul></ul><ul><ul><ul><li>Inheritance </li></ul></ul></ul><ul><ul><ul><li>Cascading </li></ul></ul></ul><ul><ul><li>Classes </li></ul></ul><ul><ul><li>Spans and Divs </li></ul></ul><ul><li>Creating a Stylesheet in Flare </li></ul><ul><li>Flare Stylesheet editor overview </li></ul>
    4. 4. Agenda <ul><li>Modifying styles </li></ul><ul><li>Applying styles to content </li></ul><ul><li>Applying a style sheet to topics </li></ul><ul><li>Fonts and Font Families </li></ul><ul><li>Font sizing </li></ul><ul><li>Creating a style class </li></ul>
    5. 5. Cascading Stylesheets Introduction
    6. 6. What Are Cascading Stylesheets? <ul><li>A Cascading stylesheet (CSS) document is a simple text file. </li></ul><ul><li>A CSS file contains a collection of style rules used to control the look and feel of documents. </li></ul><ul><li>A CSS style rule has two parts, a Selector and a Declaration </li></ul>
    7. 7. Cascading Style Sheets (CSS) <ul><li>Style Rules </li></ul>Selector Declaration Value Property H1 {font-weight: bold} H1 {font-weight: bold; color:black; }
    8. 8. CSS Inheritance <ul><li>XHTML elements inherit style attributes </li></ul><ul><li><body> </li></ul><ul><li><p>Sample text</p> </li></ul><ul><li></body> </li></ul><ul><li>body { font-family: Arial; } </li></ul>
    9. 9. HTML Page Structure Document (HTML) Head Body H1 Heading Paragraph 1 Paragraph 2 Title
    10. 10. Cascading <ul><li>Three CSS implementations </li></ul><ul><ul><li>External </li></ul></ul><ul><ul><ul><li>Linked to an unlimited number of files </li></ul></ul></ul><ul><ul><li>Embedded </li></ul></ul><ul><ul><ul><li>Affects only the elements in a specific file </li></ul></ul></ul><ul><ul><li>Inline </li></ul></ul><ul><ul><ul><li>Affects only the element applied to </li></ul></ul></ul>
    11. 11. Cascading <ul><li>Order of precedence </li></ul><ul><li>Inline styles </li></ul><ul><li>Embedded style sheets </li></ul><ul><li>Linked (external) style sheets </li></ul>
    12. 12. Inline CSS <ul><li>Use the STYLE attribute </li></ul><ul><li><p>This is normal text</p> </li></ul><ul><li><p style=“font-weight: bold” >This is bold text</p> </li></ul>
    13. 13. Embedded CSS <ul><li>Added to the <HEAD> area of file </li></ul><ul><li>Use <STYLE> element </li></ul><ul><li><HEAD> </li></ul><ul><li><TITLE>New Topic1</TITLE> </li></ul><ul><li><STYLE>H1{font-weight:bold}</STYLE> </li></ul><ul><li></HEAD> </li></ul>
    14. 14. External CSS <ul><li>The <LINK> element is used to attach a CSS document to an HTML document </li></ul><LINK REL=&quot;StyleSheet” REF=”example.css&quot;>
    15. 15. CLASS attribute <ul><li>CLASS attribute can be used to create custom styles for a set of items on a page </li></ul><ul><ul><ul><li>P { color:blue; margin-left:3px; } </li></ul></ul></ul><ul><ul><ul><li>P.myclass { color:blue; margin-left:3px; } </li></ul></ul></ul>
    16. 16. CLASS attribute <ul><li>Class Syntax: </li></ul><ul><ul><li>In a style sheet: </li></ul></ul><ul><ul><ul><li>P.myclass { color:blue; margin-left:3px; } </li></ul></ul></ul><ul><ul><li>In a page: </li></ul></ul><ul><ul><ul><li><P CLASS=“myclass”>Text</P> </li></ul></ul></ul>
    17. 17. Spans <ul><li>Spans format text within an element such as a paragraph, list, or table </li></ul><ul><li>Conceptually similar to character styles in MS Word/FrameMaker </li></ul><ul><li><p>This paragraph has a <span style=&quot;font-weight: bold”> boldfaced </span> word.</p> </li></ul><ul><li>This paragraph has a boldfaced word. </li></ul>
    18. 18. Divs <ul><li>Divs allow for grouping many elements together </li></ul><ul><li><div class=“indent”> </li></ul><ul><li><p>Paragraph 1</p> </li></ul><ul><li><p>Paragraph 2</p> </li></ul><ul><li><p>Paragraph 3</p> </li></ul><ul><li></div> </li></ul>
    19. 19. Using Cascading Stylesheets in Flare
    20. 20. Creating a Stylesheet <ul><li>Select Project > Add Stylesheet </li></ul>
    21. 21. Creating a Stylesheet <ul><li>In the Template Folders section select Factory Templates . </li></ul><ul><li>In the Templates section, select one of the CSS template files available. </li></ul><ul><li>If necessary, select an alternate folder for storing your new stylesheet. </li></ul><ul><li>In the File Name field, type a name for the stylesheet. </li></ul><ul><li>Click Add . </li></ul><ul><li>Click OK . </li></ul>
    22. 22. Modifying a Style <ul><li>Open a stylesheet. By default stylesheets are stored in the Resources folder in the Content Manager view. </li></ul><ul><li>When the stylesheet editor opens you can work in either the Simplified or Advanced view. tour </li></ul><ul><li>In the simple view, double click on the style you wish to edit. </li></ul><ul><li>Select a tab. </li></ul><ul><li>Select a style property to change. </li></ul><ul><li>Click OK . </li></ul>
    23. 23. Applying a Style <ul><li>Open a topic. </li></ul><ul><li>Select or click inside the content to which you want to apply the style. </li></ul><ul><li>Select View >  Style Window . The Styles window appears. </li></ul><ul><li>Click a style to apply. </li></ul><ul><li>The style is applied to the selected content </li></ul>
    24. 24. Applying a Stylesheet to a Topic <ul><li>Open the topic that you want to link to the stylesheet. </li></ul><ul><li>Select Tools > Stylesheet Links . </li></ul><ul><li>The Stylesheet Links dialog box appears. </li></ul>
    25. 25. Applying a Stylesheet to a Topic <ul><li>Select a stylesheet. </li></ul><ul><li>Click . </li></ul><ul><li>The stylesheet is added to the list on the left. </li></ul><ul><li>Click OK . </li></ul><ul><li>The stylesheet is applied to the topic. </li></ul>
    26. 26. Font Family <ul><li>What is a Font Family? </li></ul><ul><li>A list of alternate fonts for styles used in your project </li></ul><ul><li>Why are Font Families important? </li></ul><ul><li>Many fonts on your authoring workstation may not be available on the end users ’ </li></ul><ul><li>If you use a font in your Help system that does not exist on the users ’ workstation, then the browsers pick what font to use! </li></ul>
    27. 27. Font Family <ul><li>Font Family Guidelines </li></ul><ul><li>Define primary font </li></ul><ul><li>Define secondary fonts for other operating systems (UNIX, Macintosh, etc.) </li></ul><ul><li>Order is critical – list is hierarchical </li></ul><ul><li>Note: Font sets are saved with a project </li></ul>
    28. 28. Font Family <ul><li>Fonts Common to an OS </li></ul><ul><li>Arial </li></ul><ul><li>Comic Sans MS </li></ul><ul><li>Courier New </li></ul><ul><li>Marlette </li></ul><ul><li>Symbol </li></ul><ul><li>Times New Roman </li></ul><ul><li>Wingdings </li></ul>Microsoft Windows <ul><li>Times </li></ul><ul><li>Courier </li></ul><ul><li>Helvetica </li></ul><ul><li>Symbol </li></ul><ul><li>Chicago </li></ul><ul><li>New York </li></ul><ul><li>Geneva </li></ul><ul><li>Monaco </li></ul><ul><li>Palatino </li></ul>Macintosh
    29. 29. Font Family <ul><li>Recommended Font Families </li></ul><ul><li>Arial, Helvetica, Sans-serif </li></ul><ul><li>Verdana, Arial, Helvetica, Sans-serif </li></ul><ul><li>Times New Roman, Times, Serif </li></ul><ul><li>Courier New, Courier, Mono </li></ul>
    30. 30. <ul><li>Demo </li></ul><ul><li>Creating a Font Family in Flare </li></ul>Font Family
    31. 31. Font Sizing <ul><li>There are two ways to define font sizes in an HTML environment </li></ul><ul><ul><li>Fixed Font Sizing </li></ul></ul><ul><ul><li>Relative Font Sizing </li></ul></ul>
    32. 32. Font Sizing <ul><li>Fixed Font Sizing </li></ul><ul><li>Fixed Font Sizing defines the size of fonts using absolute units such as points (pt), picas (pc), inches (in), centimeters (cm), etc. </li></ul><ul><li>Because of the differences in how various types of computers display content, Fixed Font Sizing will ALWAYS cause fonts to display smaller on some systems (like the Macintosh) </li></ul>
    33. 33. Font Sizing <ul><li>Relative Font Sizing </li></ul><ul><li>Relative Font Sizing defines the size of fonts using relative units such as percentages (%), the em unit (em), numerical values (1-7), and descriptive values (xx-small - xx-large), etc. </li></ul><ul><li>Relative sizes refer to the font size of the parent element. This allows fonts to scale appropriately to different resolutions, browsers or platforms </li></ul>
    34. 34. Font Sizing <ul><li>Relative Font Size Guidelines </li></ul><ul><li>Define the size for the normal style as 100% to provide consistent looking, legible text on any platform </li></ul><ul><li>Define heading styles as a percentage of the normal text – e.g. Heading 1=120%, Heading 2=115%, etc. </li></ul>
    35. 35. <ul><li>Demo </li></ul><ul><li>Setting Relative Font Sizes </li></ul><ul><li>in Flare </li></ul>Font Sizing
    36. 36. Creating a Style Class <ul><li>Open a stylesheet. </li></ul><ul><li>If the Stylesheet Editor opens to the Simplified view, click Advanced View . </li></ul><ul><li>Select the p style. </li></ul><ul><li>Click Add Class in the Stylesheet Editor toolbar. </li></ul><ul><li>The New Style dialog box appears. </li></ul><ul><li>Type a name for the style. </li></ul>
    37. 37. Creating a Style Class <ul><li>Click Create Style. The Create Style dialog box appears. </li></ul><ul><li>In the Name field, type a name for the new style without using spaces. </li></ul>
    38. 38. Creating a Style Class <ul><li>If you do not want to include a style property in the new style, click the check box next to the value to remove the checkmark. </li></ul><ul><li>If you want the new style to be applied to the selected content, select Create style and update the source element . </li></ul><ul><li>If you do not want the new style to be applied to the selected content, select Create style without updating the source element. </li></ul><ul><li>Click OK . </li></ul><ul><li>The new style is added to the stylesheet. </li></ul>
    39. 39. Auto-Numbering <ul><li>Auto-Numbering can be used to allow for automated figure or table numbers, for government style paragraph numbering, or for automatically generating chapter numbers </li></ul><ul><li>Create a custom style class </li></ul><ul><li>Add auto-numbering to the style class </li></ul><ul><li>Use the new style class in the Master Page </li></ul><ul><li>Link </li></ul>
    40. 40. Cross-References <ul><li>Cross-references allow for an extremely elegant single-source handling of linking </li></ul><ul><li>Controlled by CSS </li></ul><ul><li>Can look like standard hyperlinks for online publishing </li></ul><ul><li>Converted to proper page number references when going to print </li></ul><ul><li>Link </li></ul>
    41. 41. Suggested Reading List <ul><li>Watch all of the built in Flare tutorial videos. </li></ul><ul><li>Read as much of the online help overview information as I could handle. </li></ul><ul><li>Build a couple or three test projects to get a feel for what is going on. </li></ul><ul><li>Coming from RoboHelp, get a copy of Scott's great book. </li></ul><ul><li>  </li></ul>MadCap Flare for RoboHelp Users by Scott DeLoach ISBN-13: 978-0615141459  
    42. 42. Suggested Reading List <ul><li>HTML, XHTML, and CSS, Sixth Edition (Visual Quickstart Guide) </li></ul><ul><li>by Elizabeth Castro </li></ul><ul><li>ISBN-13: 978-0-321-43084-7 </li></ul><ul><li>  </li></ul><ul><li>Technical Writing 101: A Real-World Guide to Planning and Writing Technical Documentation </li></ul><ul><li>by Alan S. Pringle  and Sarah O'Keefe </li></ul><ul><li>ISBN-13: 978-0970473325 </li></ul><ul><li>  </li></ul><ul><li>CSS: The Definitive Guide, Second Edition </li></ul><ul><li>by Eric Meyer </li></ul><ul><li>ISBN-13: 978-0596527334 </li></ul><ul><li>  </li></ul><ul><li>DHTML and CSS for the World Wide Web, Third Edition (Visual Quickstart Guide) </li></ul><ul><li>by Jason Teague </li></ul><ul><li>ISBN-13: 978-0-201-73084-5 </li></ul>
    43. 43. <ul><li>Questions? </li></ul>

    ×