You Can Take Your HAT Off


Published on

Using Dreamweaver Templates to Author HTML-based Help Topics for Web Applications

  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

You Can Take Your HAT Off

  1. 1. Using Dreamweaver Templates to Author HTML-based Help Topics for Web Applications
  2. 2. Agenda <ul><li>Authoring an HTML-based Help Application Using Dreamweaver Templates </li></ul><ul><li>What Is a Dreamweaver Template? </li></ul><ul><li>Building a Dreamweaver Template </li></ul><ul><ul><li>Layers </li></ul></ul><ul><ul><li>Layout Tables </li></ul></ul><ul><ul><li>Regions </li></ul></ul><ul><ul><li>Snippets </li></ul></ul><ul><ul><li>Assets </li></ul></ul><ul><ul><li>Extensions </li></ul></ul><ul><ul><li>Behaviors </li></ul></ul><ul><ul><li>Cascading Style Sheet </li></ul></ul><ul><li>Authoring a Template-based HTML Help Topic </li></ul>
  3. 3. Dreamweaver Splash
  4. 4. Typical Dreamweaver Authoring <ul><li>Web Sites </li></ul><ul><li>Web Pages </li></ul><ul><li>One-off HTML Help Topics </li></ul>
  5. 5. HTML-Based Help Application: Collapsed
  6. 6. HTML-Based Help Application: Expanded
  7. 7. Template-based Overview Topic
  8. 8. Template-based Page Topic
  9. 9. Template-based Task Topic
  10. 10. Template-based Field Topic
  11. 11. Template-based Note Topic
  12. 12. Table of Contents (One Off)
  13. 13. Index (One Off)
  14. 14. Search (One Off)
  15. 15. Why Did We Do This? <ul><li>Help Authoring Tools didn’t meet our requirements </li></ul><ul><ul><li>Zero client footprint </li></ul></ul><ul><ul><li>Distributed environment </li></ul></ul><ul><ul><li>ASPX integration with web application </li></ul></ul><ul><li>Help Authoring Tools didn’t offer Dreamweaver benefits </li></ul><ul><ul><li>Help as just another web application </li></ul></ul><ul><ul><li>No separate help installation </li></ul></ul><ul><ul><li>No black box compile </li></ul></ul><ul><ul><li>Price break </li></ul></ul><ul><ul><li>Better control over appearance </li></ul></ul><ul><ul><li>No additional code, DLLs, or Libraries </li></ul></ul>
  16. 16. Help Architecture
  17. 17. What Is a Dreamweaver Template? <ul><li>A template is a fixed page layout that can be applied to many pages. You use templates to control which page elements template users can edit. One of the most powerful uses of templates is the ability to update multiple pages at once. </li></ul>
  18. 18. Template Creation: Dreamweaver
  19. 19. Template Creation: Dreamweaver
  20. 20. Overview Template: Dreamweaver
  21. 21. Page Template: Dreamweaver
  22. 22. Task Template: Dreamweaver
  23. 23. Field Template: Dreamweaver
  24. 24. Note Template: Dreamweaver
  25. 25. Building a Dreamweaver Template <ul><li>Layers </li></ul><ul><li>Layout Tables </li></ul><ul><li>Regions </li></ul><ul><li>Snippets </li></ul><ul><li>Assets </li></ul><ul><li>Extensions </li></ul><ul><li>Behaviors </li></ul><ul><li>Cascading Style Sheet </li></ul>
  26. 26. What Is a Layer? <ul><li>A layer is a container for HTML content, usually tagged with a DIV or SPAN tag, that you can position anywhere on a page. Layers are absolutely positioned a certain number of pixels from the top left corner of the page. </li></ul>
  27. 27. Layers: Benefits for Help Authors <ul><li>Precisely define page layout </li></ul><ul><li>Fewer files than frames </li></ul><ul><li>Layers work better in an ASPX environment </li></ul><ul><li>Multiple layers can be stacked and hidden </li></ul>
  28. 28. Layers: Example
  29. 29. What Is a Layout Table? <ul><li>A layout table is a way to change the layout of a template by dividing it into vertical or horizontal sections. Layout tables are simply aligned left, center or right horizontally, in the order they are placed on the page. When the alignment of the table is set to the browser default or aligned left, then layers positioned over or around tables should retain their correct positions. </li></ul>
  30. 30. Layout Tables: Benefits for Help Authors <ul><li>Provide structure and flexibility </li></ul><ul><li>Work well with layers </li></ul><ul><li>Provide expandable borders for editable regions </li></ul><ul><li>Provide invisible borders </li></ul>
  31. 31. Layout Tables: Example
  32. 32. What Is a Region? <ul><li>A template has two types of regions: locked and editable. Locked regions are the sections of a template that have static, unchanging content, such as navigation bars or unchanging headings. Editable regions are the sections of a template that have changing content, such as paragraph text or customizable links. </li></ul>
  33. 33. Locked Regions
  34. 34. Editable Regions
  35. 35. Editable Regions: Benefits for Help Authors <ul><li>Define structured content that may appear more than once in a help topic </li></ul><ul><li>Maintain structural integrity while allowing help authors the freedom to add information </li></ul><ul><li>Embed formatting of ordered and unordered lists in the template </li></ul><ul><li>Embed standard link formatting in the template </li></ul><ul><li>Embed customized Javascript in the template </li></ul>
  36. 36. Editable Regions: Creating
  37. 37. Editable Regions: Plain Text
  38. 38. Editable Regions: Plain Text
  39. 39. Editable Regions: Ordered/Unordered Lists
  40. 40. Editable Regions: Ordered/Unordered Lists
  41. 41. Repeating Regions <ul><li>A repeating region is a section of the layout in a document that is set to repeat. A repeating region can be made editable so that the author can edit the content while the template developer maintains control of the design itself. This ability allows developers to control the appearance of a specific element, yet authors can freely repeat that specific element, changing the content as appropriate. </li></ul>
  42. 42. Repeating Regions: Creating
  43. 43. Repeating Regions: Task Topic Links
  44. 44. Repeating Regions: Task Topic Links
  45. 45. Repeating Regions: Task Topic Links <ul><li><a href=&quot;help.aspx?topic= EnterMapID &quot;> Task 1 </a> </li></ul>
  46. 46. Repeating Regions: Field Topic Links
  47. 47. Repeating Regions: Field Topic Links
  48. 48. Repeating Regions: Field Topic Links <ul><li><span class=&quot;hh&quot; onmouseover=&quot;xt(' EnterMapID ');&quot; onmouseout=&quot;xt();&quot;> Field Name </span> </li></ul>
  49. 49. Repeating Regions: See Also Links
  50. 50. Repeating Regions: See Also Links
  51. 51. Repeating Regions: See Also Links <ul><li><a href=&quot;help.aspx?topic= MPporABT010 &quot;> About MAPICS Portal </a> </li></ul>
  52. 52. What Is a Snippet? <ul><li>Snippets are small, reusable pieces of code that that can dragged and dropped into a template or web page. </li></ul>
  53. 53. Snippets: Benefits for Help Authors <ul><li>Save time authoring </li></ul><ul><li>Create once and reuse multiple times </li></ul><ul><li>Use existing snippets </li></ul><ul><li>Develop your own snippets </li></ul><ul><li>Work with programmers to develop complex snippets </li></ul><ul><li>Notes: </li></ul><ul><li>Snippets embedded in a template become part of that template </li></ul><ul><li>If necessary, newly developed snippets can be ported to help authors desktops </li></ul>
  54. 54. Snippets: Example
  55. 55. What Is an Asset? <ul><li>An asset is a piece of content, typically a graphic, movie, sound, or other media item or an auxiliary item such as a glossary. Assets allow authors to reuse commonly referenced items. </li></ul>
  56. 56. Assets: Benefits for Help Authors <ul><li>Save time authoring </li></ul><ul><li>Create once and reuse multiple times </li></ul><ul><li>Create a Library of frequently used Items </li></ul><ul><li>Assets include </li></ul><ul><ul><li>Images </li></ul></ul><ul><ul><li>Colors </li></ul></ul><ul><ul><li>URLs </li></ul></ul><ul><ul><li>Flash </li></ul></ul><ul><ul><li>Shockwave </li></ul></ul><ul><ul><li>Movies </li></ul></ul><ul><ul><li>Scripts </li></ul></ul><ul><ul><li>Templates </li></ul></ul>
  57. 57. Assets: Example
  58. 58. What Is an Extension? <ul><li>An extension is a piece of software that can be added to Dreamweaver to enhance its capabilities. There are several different kinds of extensions, ranging from small bits of HTML that you can add to the Object palette and the Insert menu, to JavaScript commands that you can add to the Command menu, to new behaviors or property inspectors or floating palettes. Extensions can be written in HTML, JavaScript, and/or C. </li></ul>
  59. 59. Extensions: Benefits for Help Authors <ul><li>Add significant functionality to Dreamweaver </li></ul><ul><li>Go beyond simple Snippets or Assets </li></ul><ul><li>Use existing extensions for free or for pay </li></ul><ul><li>Work with programmers to develop extensions </li></ul>
  60. 60. Extensions: Extension Manager
  61. 61. Extensions: Example
  62. 62. Extensions: Example
  63. 63. Extensions: Dreamweaver Exchange
  64. 64. What is a Behavior? <ul><li>A behavior is the combination of an event and an action that allows a user’s interaction with a page to change the page or cause a task to be performed. A behavior is attached to a specific element on the page. </li></ul>
  65. 65. Behaviors: Benefits for Help Authors <ul><li>Use same functionality as web application </li></ul><ul><li>JavaScript based </li></ul><ul><li>Requires no programming whatsoever </li></ul>
  66. 66. Behaviors: Example
  67. 67. Behaviors: Example <ul><li>…onClick=&quot;'Note.aspx?topic= EnterMapID ‘… </li></ul>
  68. 68. What Is a Cascading Style Sheet? <ul><li>A cascading style sheet (CSS) is a collection of formatting definitions that affect the appearance of web page elements. You can use CSS styles to format text, images, headings, tables, and so forth. </li></ul>
  69. 69. CSS: Benefits for Help Authors <ul><li>More powerful and flexible than HTML styles </li></ul><ul><li>Allows you to make page updates site-wide </li></ul><ul><li>Style information exists in a separate file </li></ul>
  70. 70. CSS: Template Level
  71. 71. CSS: Project Level
  72. 72. Authoring an HTML-based Help Topic <ul><li>Selecting a Template </li></ul><ul><li>Filling in the Template </li></ul><ul><li>Testing the Topic </li></ul>
  73. 73. Selecting a Template
  74. 74. Filling in the Template: Before
  75. 75. Filling in the Template: After
  76. 76. Testing the Topic
  77. 77. Questions and Answers <ul><li>Books </li></ul><ul><li>Halstead, Brad and Summers, Murray S. 2003. Dreamweaver MX Templates. Indianapolis, IN: New Riders Publishing. </li></ul><ul><li>Lowery, Joseph W. 2002. Dreamweaver MX Bible. Indianapolis, IN: Wiley Publishing, Inc. </li></ul><ul><li>Weisner Associates, Inc. 2000-2001. &quot;Creating HTML-Based Help with Macromedia Dreamweaver.&quot; (self-study courseware) </li></ul><ul><li>Winwriters, Inc. 2002. Proceedings from The Web Help JumpStart Conference . Cambridge, MA: August 19 & 20, 2002. </li></ul>
  78. 78. Questions and Answers <ul><li>Websites </li></ul><ul><li>Helpweavers - </li></ul><ul><li>Dreamweaver MX Exchange - </li></ul><ul><li>Dreamweaver MX Support - </li></ul><ul><li>MSDN Library - </li></ul><ul><li>Fireworks MX Support - </li></ul><ul><li>Flash MX Support - </li></ul>