1 / 37

Maximize Design Potential with Page Templates | Easy Layout Customization

Learn how to utilize page templates effectively for diverse designs, without coding hassle. Discover the benefits of replacements, conditions, and layouts for personalized layout creation.

brewerd
Download Presentation

Maximize Design Potential with Page Templates | Easy Layout Customization

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Power HourMay 2010Page Templates Ben Allums Jesse Wiles

  2. Power Hour – May 2010 Agenda • Survey Results • Page Templates • What are page templates? • What can I do with them? • How do they work? • How can I make them my own? • Can we make this easier? • Webinars of Interest

  3. Power Hour – May 2010 Survey Results

  4. Survey Results When to meet:

  5. Survey Results Topics to cover:

  6. Survey Results Topics to cover: • Context-sensitive Help

  7. Power Hour – May 2010 Page Templates

  8. Page Templates • What are page templates? • What can I do with them? • How do they work? • How can I make them my own? • Can we make this easier?

  9. Page Templates • What are page templates? • What can I do with them? • How do they work? • How can I make them my own? • Can we make this easier?

  10. What are page templates? • Page layouts defined with XML • Usable for XML, HTML, and Text page designs • Safe to customize without fear of upgrade hassles • No XSLT or JavaScript coding required

  11. What are page templates? Comprised of three parts: • Replacements • Conditions • Layout Layout Replacement Condition

  12. What are page templates? Replacements Content <h1>Title</h1><div class=“Body”>The beginning… Previous <a href=“previous.html”><imgsrc=“prev.gif” /></a> Next <a href=“next.html”><imgsrc=“next.gif” /></a> Company Name WebWorks Company Logo <imgsrc=“logo.gif” /> Email info@webworks.com

  13. What are page templates? Conditions Header Exists Header, Footer Exist Footer Exists Index Exists TOC Exists Email Exists

  14. What are page templates? Layouts TOC Exists Index Exists Index <a href=“index.html”><imgsrc=“index.gif” /></a> TOC <a href=“toc.html”><imgsrc=“toc.gif” /></a> Content <h1>Title</h1><div class=“Body”>The beginning…

  15. Page Templates • What are page templates? • What can I do with them? • How do they work? • How can I make them my own? • Can we make this easier?

  16. What can I do with them? • Enable designers to build complex layouts • “Pour” your content into page designs • Maintain designs outside of XSL transforms

  17. What can I do with them? Why make replacements and conditions separate? • Allows you to think about each aspect and the effect on layout separately • Allows you to define replacements that are never used • Enables layout to vary based on available conditions

  18. What can I do with them? Vary designs NavigationExists TOC Exists Index Exists TOC Index Content

  19. What can I do with them? Vary designs TOC Index TOC Index Content Content

  20. What can I do with them? Vary designs NavigationExists TOC Exists Index Exists TOC Index Content

  21. What can I do with them? Vary designs Content Content

  22. Page Templates • What are page templates? • What can I do with them? • How do they work? • How can I make them my own? • Can we make this easier?

  23. How do they work? Nuts and bolts • Define conditions and replacements in XSL • Transforms\pages.xsl • Define layout in page template • Pages\Page.asp • Apply conditions and replacements to page template • Transforms\pages.xsl • Shared\common\pages\pagetemplate.xsl • Used in other places too! • Transforms\wrappers.xsl • Transforms\popups.xsl

  24. How do they work? Conditions and Replacements in XSL • Replacements • <wwpage:Replacement name="title“ value="{$ParamSplit/@title}" /> • <wwpage:Replacement name=“content"> <xsl:call-template name="Content-Content"> … </xsl:call-template> …</wwpage:Replacement> • Conditions • <wwpage:Condition name="header-exists" /> • <wwpage:Condition name="keywords-exist" />

  25. How do they work? Layout replacements and conditions in the page template • Page.asp<html …> <head> <meta wwpage:condition="keywords-exist“ name="keywords" content="keywords“wwpage:attribute-content="meta-keywords" /> <title wwpage:content="title">Title</title> </head> <body> <div wwpage:replace=“content”>Content goes here!</div> </body></html>

  26. How do they work? Markup to know: • Replacements wwpage:content • <div wwpage:content=“content”>Put content in here!</div> • <div>Replacement content!</div> wwpage:replace • <div wwpage:replace=“content”>Replace div</div> • Replacement content! wwpage:attribute-{attribute} • <meta name="keywords" content="keywords“wwpage:attribute-content="meta-keywords" /> • <meta name="keywords" content=“Replacement content!“ />

  27. How do they work? Markup to know: • Replacements (special) wwpage:attribute-{attribute}=“copy-relative-to-output” • <script src="scripts/expand.js“wwpage:attribute-src="copy-relative-to-output"></script> • <script src=“../../scripts/expand.js“</script> wwpage:attribute-{attribute}=“relative-to-output” • <script src="wwhdata/common/context.js“wwpage:attribute-src="relative-to-output"></script> • <script src=“../../wwhdata/common/context.js“</script>

  28. How do they work? Markup to know: • Conditions wwpage:condition • <br wwpage:condition="company-info-top" clear="all" /> • <br clear="all" />

  29. Page Templates • What are page templates? • What can I do with them? • How do they work? • How can I make them my own? • Can we make this easier?

  30. How can I make them my own? • Variables • Define variable name in the Style Designer • Embed into page template with “wwvars:{variable name}” • <div wwpage:content=“wwvars:PubDate”>00/00/0000</div> • <div>05/27/2010</div> • Define your own replacements and conditions • Pages • Transforms\pages.xsl • Images (full size from thumbnails) • Transforms\wrappers.xsl • Popups (if supported by the format) • Transforms\popups.xsl

  31. Page Templates • What are page templates? • What can I do with them? • How do they work? • How can I make them my own? • Can we make this easier?

  32. Can we make this easier? • Multiple page templates • Page.asp for pages • Image.asp for image wrappers • Popup.asp for popups • Select page template in Style Designer • May need to leverage per target settings • Fallback to Page.asp if requested template missing • Other ideas?

  33. Power Hour – May 2010 Webinars of Interest

  34. Webinars of Interest Show Me: • Learn what the ePublisher platform can do for you right out of the box. • Hosted by members of the WebWorks staff • Repeats on the third Thursday of every month Sign-up at http://www.webworks.com/Resources/Events/Show_Me/Archive/

  35. Webinars of Interest Study Hall: • Open forum for ePublisher users to ask questions and request help on custom projects • Hosted by members of the WebWorks development staff • Repeats on the 2nd and last Wednesdays of every month Join at http://www.webworks.com/Resources/Events/Study_Hall/

  36. Webinars of Interest Archives: • Power Hourhttp://www.webworks.com/Resources/Events/Power_Hour/Archive/ • Show Me!http://www.webworks.com/Resources/Events/Show_Me/Archive/

  37. Power HourMay 2010Page Templates Ben Allums Jesse Wiles

More Related