Presentation is loading. Please wait.

Presentation is loading. Please wait.

Customizing Editable Regions and Building Templates

Published byLindsay Fisher Modified over 6 years ago

Similar presentations

Presentation on theme: "Customizing Editable Regions and Building Templates"— Presentation transcript:

1 Customizing Editable Regions and Building Templates
Robert Kiffe, Senior Customer Support Engineer Brian Laird, Web Developer Manager I

2 Agenda OU Campus Overview Page Tagging Building a Page Using XSL
OU Campus Templates

3 OU Campus Overview

4 OU Campus Overview Basic Setup: two separate servers (Decoupled)
Staging (OU Campus) Production (Web Server) Publishes out ‘static’ website Production website operates independent of OU Campus

5 Static Website? Pages can still utilize server-side scripts for ‘dynamic’ content Folder/File structure Each folder-name represents a part of the URL Ending the URL on the folder will load the ‘default’ or ‘index’ page for that folder

6 Static Website Architecture
Example Architecture ( /admissions /transfer-students index.html Website URL: or

7 Dynamic Content? Apache/IIS Includes <!--#include virtual="/footer.inc" --> Server-Side Code PHP C# (ASP.NET) ColdFusion Etc. Section Nav Page Content Global Header Global Footer

8 Unique Page Content Metadata Visible Regions Title Meta content
Textual Content Images/Galleries/Media News/Events Listings Content Widgets Etc. <html> <head> <title>Page Title</title> <meta name="Description" content="Sample" /> </head> <body> <h1>Heading</h1> <p>Content</p> <img src="kitten.jpg" alt="Kitten" /> </body> </html>

9 Page Tagging

10 Page Tagging Overview Defines editable elements on a page
Specialized Comment Tags or XML Nodes Original comment format: <!-- com.omniupdate.div --> New comment format: <!-- ouc:div --> New node format: <ouc:div> Unique to OU Campus Tags are utilized in “Preview” and especially “Edit” page states

11 Properties Ex. <ouc:properties>…</ouc:properties>
Defines editable elements outside traditional content areas Examples: Title (<title>Page Title</title>) Metadata Page Layout Options (PCF only) Form-like Data Entry (PCF only) Availability of properties can be restricted by group Extends the same page to be used for different uses

12 Region Dividers Ex. <ouc:div label="content" group="Admins" button-text=“Content">…</ouc:div> Must close at the end of the region Multiple editable regions can be associated with a page, but “label” attribute must be unique Must include the following attributes: Label Group ‘Button-text’ identifier or ‘Path’ for include files Use “Path” attribute to define the path to a local file in ‘staging’, to simulate a server-side include

13 Editors Source Code Editor Example: <ouc:div …><ouc:editor wysiwyg="no" /> Code … </ouc:div> Must self-close (if node) Must be placed at the start of an editable region Two Types of WYSIWYG Editors (choice is set by administrators): Classic JustEdit Important Attributes: wysiwyg = yes (default) | no (Source Editor) | asset (Asset Chooser) css-path = link to local CSS file to style editor contents css-menu = link to local text file to populate ‘styles dropdown’ Additional attributes used depending on editor type

14 Side Topic: ‘Styles Dropdown’
Text file that is used for adding ‘classes’ to HTML objects in the WYSIWYG “block” setting will apply the class to the parent ‘block-level’ tag (ex. Paragraph, Divider (div), Image, etc.) Non-”block” (leaving blank) will default the class to being “in-line”, which means the WYSIWYG will wrap highlighted content in a SPAN with selected class Format: .class[TAB]Friendly Name[TAB]block(optional) Examples: .blue Blue Title block .highlight Text Highlight Example Output (‘Highlighted’ was selected): <h1 class="blue“>Blue Title<span class="highlight">Highlighted</span></h1>

15 MultiEdit Regions Text Field Example: <ouc:div label="department" group="Everyone" button="hide"> <ouc:multiedit type="text" prompt="Department" alt="Type in the department name." />Mathematics</ouc:div> Allows for form-like content entry Content conforms to a specific structure Can’t be used with <ouc:editor> in the same <ouc:div> node

16 Additional Tags Direct Edit Button: <!-- ouc:ob --><-- /ouc:ob --> Full-page Source Editor Button: <!-- ouc:efp --><-- /ouc:efp --> DateTime Stamp: <!-- ouc:date --><-- /ouc:date -->

17 Hands-On: Tagging an HTML Page

18 Building a Page Using XSL

19 XML + XSL = HTML XML Page Content Separates ‘Content’ from ‘Design’
Adjustable layouts and optional features ‘Transform’ simplistic content into more complex Create multiple output ‘products’ for each page, including PDF Works with most Server-Side Scripting Languages XSL Global Header Section Nav XML Page Content Global Footer

20 XSL Architecture PCF links directly to template- specific XSL file
Common.xsl builds basic page structure Use ‘Import Priority’ to override common content with template- specific content No logic checks required for template type Allows for rapid construction of new ‘one-off’ templates interior.xsl common.xsl variables.xsl functions.xsl Import Priority landing.xsl

21 One Template to Rule Them All?
Group ‘template layouts’ based on their use-cases Don’t overwhelm content editors with too many settings that don’t apply Properties shows all fields MultiEdit shows all fields Shared regions can be built in common.xsl for re-use interior.xsl Or landing.xsl

22 Creating New Pages in OU Campus
OU Campus Templates Creating New Pages in OU Campus

23 Template Components Template Image Template Control File Template File
Visual display for the user Template Control File Template File

24 Template Control File (TCF)

25 Terminology TCF = Template Control File Can contain 4 lists:
Variable List – Data Entry Directory List – Folder Creation Template List – File Creation Navigation List – Navigation Updates May use multiple TMPLs to create multiple files Multiple TCFs can reference a single TMPL May be used to pass Access Settings Can create RSS items Can only be edited in “Source Editor”

26 Terminology TMPL = Template File Used to create any file type
Can use ‘echo’ variable statements to collect data entered in TCF Ex. <!--%echo var="title" --> Fill out with as much or little starting data (or content) as desired. Can only be edited in Source Editor

27 Creating New Pages in OU Campus
Hands-On: Creating New Pages in OU Campus

28 Thank you. Robert Kiffe rkiffe@omniupdate.com Brian Laird
outc18.com/surveys

Download ppt "Customizing Editable Regions and Building Templates"

Similar presentations

WEB DESIGN TABLES, PAGE LAYOUT AND FORMS. Page Layout Page Layout is an important part of web design Why do you think your page layout is important?

WEB DESIGN TABLES, PAGE LAYOUT AND FORMS. Page Layout Page Layout is an important part of web design Why do you think your page layout is important?
A really fairly simple guide to: mobile browser-based application development (part 1) Chris Greenhalgh G54UBI / 2011-02-21 1Chris Greenhalgh

A really fairly simple guide to: mobile browser-based application development (part 1) Chris Greenhalgh G54UBI / Chris Greenhalgh
Customizing the MOSS 2007 Search Results November 2007 Rafael Perez.

Customizing the MOSS 2007 Search Results November 2007 Rafael Perez.
SEO Best Practices with Web Content Management Brent Arrington, Services Developer, Hannon Hill Morgan Griffith, Marketing Director, Hannon Hill 2009 Cascade.

SEO Best Practices with Web Content Management Brent Arrington, Services Developer, Hannon Hill Morgan Griffith, Marketing Director, Hannon Hill 2009 Cascade.
Objective 107.02 Understand web-based digital media production methods, software, and hardware. Course Weight : 10%

Objective Understand web-based digital media production methods, software, and hardware. Course Weight : 10%
Intermediate Level Course. Text Format The text styles, bold, italics, underlining, superscript and subscript, can be easily added to selected text. Text.

Intermediate Level Course. Text Format The text styles, bold, italics, underlining, superscript and subscript, can be easily added to selected text. Text.
Macromedia Dreamweaver 4 Foundation Level Course.

Macromedia Dreamweaver 4 Foundation Level Course.
Tutorial 6 Working with Web Forms

Tutorial 6 Working with Web Forms
Macromedia Dreamweaver 4 Advanced Level Course. Add Rollovers Rollovers or mouseovers are possibly the most popular effects used in designing Web pages.

Macromedia Dreamweaver 4 Advanced Level Course. Add Rollovers Rollovers or mouseovers are possibly the most popular effects used in designing Web pages.
Outline IS400: Development of Business Applications on the Internet Fall 2004 Instructor: Dr. Boris Jukic Table, Forms, Metatags and Frames.

Outline IS400: Development of Business Applications on the Internet Fall 2004 Instructor: Dr. Boris Jukic Table, Forms, Metatags and Frames.
Understanding Page Template Components Lila Bronson Training Manager, OmniUpdate, Inc.

Understanding Page Template Components Lila Bronson Training Manager, OmniUpdate, Inc.
Creating New Page and Section Templates Robert Kiffe Senior Web Developer, OmniUpdate, Inc.

Creating New Page and Section Templates Robert Kiffe Senior Web Developer, OmniUpdate, Inc.
Drupal Workshop Introduction to Drupal Part 1: Web Content Management, Advantages/Disadvantages of Drupal, Drupal terminology, Drupal technology, directories.

Drupal Workshop Introduction to Drupal Part 1: Web Content Management, Advantages/Disadvantages of Drupal, Drupal terminology, Drupal technology, directories.
Scottish Legal Aid Board Content Management using OpenCms Martin Spinks CTO Navyblue Tuesday, March 16, 2010.

Scottish Legal Aid Board Content Management using OpenCms Martin Spinks CTO Navyblue Tuesday, March 16, 2010.
Adagio4 Web Content Management EP Information Offices.

Adagio4 Web Content Management EP Information Offices.
INTRODUCTION TO DHTML. TOPICS TO BE DISCUSSED……….  Introduction Introduction  UsesUses  ComponentsComponents  Difference between HTML and DHTMLDifference.

INTRODUCTION TO DHTML. TOPICS TO BE DISCUSSED……….  Introduction Introduction  UsesUses  ComponentsComponents  Difference between HTML and DHTMLDifference.
OU Campus Intermediate Training Workshop. Agenda Administrator Overview and Roles Administrator Controls Administrator Configuration Setting Up Access.

OU Campus Intermediate Training Workshop. Agenda Administrator Overview and Roles Administrator Controls Administrator Configuration Setting Up Access.
Configuring Social Media, Google Analytics, and Gadgets Lila Bronson Training Manager, OmniUpdate, Inc.

Configuring Social Media, Google Analytics, and Gadgets Lila Bronson Training Manager, OmniUpdate, Inc.
Lesson 13: Building Web Forms Introduction to Adobe Dreamweaver CS6 Adobe Certified Associate: Web Communication using Adobe Dreamweaver CS6.

Lesson 13: Building Web Forms Introduction to Adobe Dreamweaver CS6 Adobe Certified Associate: Web Communication using Adobe Dreamweaver CS6.
© Cheltenham Computer Training 2001 Macromedia Dreamweaver 4 - Slide No 1 Macromedia Dreamweaver 4 Advanced Level Course.

© Cheltenham Computer Training 2001 Macromedia Dreamweaver 4 - Slide No 1 Macromedia Dreamweaver 4 Advanced Level Course.

Similar presentations

Ads by Google