You Can Take Your HAT Off
•Download as PPS, PDF•
0 likes•1,251 views
The document discusses using Dreamweaver templates to author HTML-based help topics for web applications. It covers what Dreamweaver templates are, how to build them using layers, layout tables, regions, snippets, assets, extensions, behaviors, and CSS. It also discusses authoring template-based help topics and testing them.
You Can Take Your HAT Off
- 1. Using Dreamweaver Templates to Author HTML-based Help Topics for Web Applications
- 2. Agenda Authoring an HTML-based Help Application Using Dreamweaver Templates What Is a Dreamweaver Template? Building a Dreamweaver Template Layers Layout Tables Regions Snippets Assets Extensions Behaviors Cascading Style Sheet Authoring a Template-based HTML Help Topic
- 4. Typical Dreamweaver Authoring Web Sites Web Pages One-off HTML Help Topics
- 5. HTML-Based Help Application: Collapsed
- 6. HTML-Based Help Application: Expanded
- 12. Table of Contents (One Off)
- 13. Index (One Off)
- 14. Search (One Off)
- 15. Why Did We Do This? Help Authoring Tools didn’t meet our requirements Zero client footprint Distributed environment ASPX integration with web application Help Authoring Tools didn’t offer Dreamweaver benefits Help as just another web application No separate help installation No black box compile Price break Better control over appearance No additional code, DLLs, or Libraries
- 17. What Is a Dreamweaver Template? 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.
- 25. Building a Dreamweaver Template Layers Layout Tables Regions Snippets Assets Extensions Behaviors Cascading Style Sheet
- 26. What Is a Layer? 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.
- 27. Layers: Benefits for Help Authors Precisely define page layout Fewer files than frames Layers work better in an ASPX environment Multiple layers can be stacked and hidden
- 28. Layers: Example
- 29. What Is a Layout Table? 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.
- 30. Layout Tables: Benefits for Help Authors Provide structure and flexibility Work well with layers Provide expandable borders for editable regions Provide invisible borders
- 32. What Is a Region? 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.
- 33. Locked Regions
- 34. Editable Regions
- 35. Editable Regions: Benefits for Help Authors Define structured content that may appear more than once in a help topic Maintain structural integrity while allowing help authors the freedom to add information Embed formatting of ordered and unordered lists in the template Embed standard link formatting in the template Embed customized Javascript in the template
- 37. Editable Regions: Plain Text
- 38. Editable Regions: Plain Text
- 39. Editable Regions: Ordered/Unordered Lists
- 40. Editable Regions: Ordered/Unordered Lists
- 41. Repeating Regions 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.
- 43. Repeating Regions: Task Topic Links
- 44. Repeating Regions: Task Topic Links
- 45. Repeating Regions: Task Topic Links <a href="help.aspx?topic= EnterMapID "> Task 1 </a>
- 46. Repeating Regions: Field Topic Links
- 47. Repeating Regions: Field Topic Links
- 48. Repeating Regions: Field Topic Links <span class="hh" onmouseover="xt(' EnterMapID ');" onmouseout="xt();"> Field Name </span>
- 49. Repeating Regions: See Also Links
- 50. Repeating Regions: See Also Links
- 51. Repeating Regions: See Also Links <a href="help.aspx?topic= MPporABT010 "> About MAPICS Portal </a>
- 52. What Is a Snippet? Snippets are small, reusable pieces of code that that can dragged and dropped into a template or web page.
- 53. Snippets: Benefits for Help Authors Save time authoring Create once and reuse multiple times Use existing snippets Develop your own snippets Work with programmers to develop complex snippets Notes: Snippets embedded in a template become part of that template If necessary, newly developed snippets can be ported to help authors desktops
- 55. What Is an Asset? 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.
- 56. Assets: Benefits for Help Authors Save time authoring Create once and reuse multiple times Create a Library of frequently used Items Assets include Images Colors URLs Flash Shockwave Movies Scripts Templates
- 57. Assets: Example
- 58. What Is an Extension? 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.
- 59. Extensions: Benefits for Help Authors Add significant functionality to Dreamweaver Go beyond simple Snippets or Assets Use existing extensions for free or for pay Work with programmers to develop extensions
- 64. What is a Behavior? 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.
- 65. Behaviors: Benefits for Help Authors Use same functionality as web application JavaScript based Requires no programming whatsoever
- 67. Behaviors: Example …onClick="window.open('Note.aspx?topic= EnterMapID ‘…
- 68. What Is a Cascading Style Sheet? 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.
- 69. CSS: Benefits for Help Authors More powerful and flexible than HTML styles Allows you to make page updates site-wide Style information exists in a separate file
- 72. Authoring an HTML-based Help Topic Selecting a Template Filling in the Template Testing the Topic
- 74. Filling in the Template: Before
- 75. Filling in the Template: After
- 77. Questions and Answers Books Halstead, Brad and Summers, Murray S. 2003. Dreamweaver MX Templates. Indianapolis, IN: New Riders Publishing. Lowery, Joseph W. 2002. Dreamweaver MX Bible. Indianapolis, IN: Wiley Publishing, Inc. Weisner Associates, Inc. 2000-2001. "Creating HTML-Based Help with Macromedia Dreamweaver." (self-study courseware) Winwriters, Inc. 2002. Proceedings from The Web Help JumpStart Conference . Cambridge, MA: August 19 & 20, 2002.
- 78. Questions and Answers Websites Helpweavers - http://www.helpweavers.com/ Dreamweaver MX Exchange - http://www.macromedia.com/cfusion/exchange/index.cfm#loc=en_us&view=sn120&viewName=Dreamweaver%20Exchange Dreamweaver MX Support - http://www.macromedia.com/support/dreamweaver/ MSDN Library - http://msdn.microsoft.com/library/ Fireworks MX Support - http://www.macromedia.com/support/fireworks/ Flash MX Support - http://www.macromedia.com/support/flash/