Using Dreamweaver Templates to AuthorHTML-based Help Topics

for Web Applications

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

Dreamweaver Splash

Typical Dreamweaver Authoring

Web Sites Web Pages One-off HTML Help Topics

HTML-Based Help Application: Collapsed

HTML-Based Help Application: Expanded

Template-based Overview Topic

Template-based Page Topic

Template-based Task Topic

Template-based Field Topic

Template-based Note Topic

Table of Contents (One Off)

Index (One Off)

Search (One Off)

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

Help Architecture

PortalPage.htm(object in focus)

HelpPopup.htm(shell)

Help.js

Help.css

Func.inc

Help popup params& content page URL

HTML stylesJS code

ASP code

Content.htm(object help)

Help pagesfor formatting

Page.htm

Content.htm,Overview.htm,or Process.htm

Note.htm

See Also

Customer Note

See Also

Field.htmTask.htm

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.

Template Creation: Dreamweaver

Template Creation: Dreamweaver

Overview Template: Dreamweaver

Page Template: Dreamweaver

Task Template: Dreamweaver

Field Template: Dreamweaver

Note Template: Dreamweaver

Building a Dreamweaver Template

1. Layers2. Layout Tables3. Regions4. Snippets5. Assets6. Extensions7. Behaviors8. Cascading Style Sheet

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.

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

Layers: Example

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.

Layout Tables: Benefits for Help Authors

Provide structure and flexibility Work well with layers Provide expandable borders for editable regions Provide invisible borders

Layout Tables: Example

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.

Locked Regions

Editable Regions

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

Editable Regions: Creating

Editable Regions: Plain Text

Editable Regions: Plain Text

Editable Regions: Ordered/Unordered Lists

Editable Regions: Ordered/Unordered Lists

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.

Repeating Regions: Creating

Repeating Regions: Task Topic Links

Repeating Regions: Task Topic Links

Repeating Regions: Task Topic Links

<a href="help.aspx?topic=EnterMapID">Task 1</a>

Repeating Regions: Field Topic Links

Repeating Regions: Field Topic Links

Repeating Regions: Field Topic Links

<span class="hh" onmouseover="xt('EnterMapID');" onmouseout="xt();">Field Name</span>

Repeating Regions: See Also Links

Repeating Regions: See Also Links

Repeating Regions: See Also Links

<a href="help.aspx?topic=MPporABT010">About MAPICS Portal</a>

What Is a Snippet?

Snippets are small, reusable pieces of code that that can dragged and dropped into a template or web page.

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

Snippets: Example

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.

Assets: Benefits for Help Authors

Save time authoring Create once and reuse multiple times Create a Library of frequently used Items Assets include

ImagesColorsURLsFlashShockwaveMoviesScriptsTemplates

Assets: Example

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.

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

Extensions: Extension Manager

Extensions: Example

Extensions: Example

Extensions: Dreamweaver Exchange

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.

Behaviors: Benefits for Help Authors

Use same functionality as web application JavaScript based Requires no programming whatsoever

Behaviors: Example

Behaviors: Example

…onClick="window.open('Note.aspx?topic=EnterMapID‘…

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.

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

CSS: Template Level

CSS: Project Level

PortalPage.htm(object in focus)

HelpPopup.htm(shell)

Help.js

Help.css

Func.inc

Help popup params& content page URL

HTML stylesJS code

ASP code

Content.htm(object help)

Help pagesfor formatting

Page.htm

Content.htm,Overview.htm,or Process.htm

Note.htm

See Also

Customer Note

See Also

Field.htmTask.htm

Authoring an HTML-based Help Topic

1. Selecting a Template2. Filling in the Template3. Testing the Topic

Selecting a Template

Filling in the Template: Before

Filling in the Template: After

Testing the Topic

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.

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/