Table of Contents 1. RedDot CMS Project Builder Training Beginning Concepts RedDot

Transcription

1 Table of Contents 1 RedDot CMS Project Builder Training Beginning Concepts 2008 RedDot

2

3 Privacy Policy Confidential & Proprietary This information is intended for the use of the individual or entity to which it is addressed and may contain information which is privileged, confidential or subject to copyright. Any unauthorized use, disclosure, distribution, or copying of this communication by anyone other than the intended recipient is strictly prohibited. If you receive this document in error, please notify us immediately so that we may arrange for its return. Notice of Copyright The RedDot Logo, the RedDot brand and the RedDot product names including RedDot CMS, RedDot XCMS and RedDot LiveServer and their associated modules are either registered trademarks or trademarks of Open Text Corporation. All other brand and product names mentioned herein are trademarks of their respective owners. Disclaimer The code and examples provided by the RedDot Education Center are not official components of the RedDot Content Management Server, RedDot LiveServer, or any product sold or supported by RedDot or Open Text. As such they are not supported or guaranteed by RedDot or Open Text. Before using any of the code or examples, read the documentation carefully. Version Inquiries Please direct any questions to: RedDot Solutions Corporation One Battery Park Plaza New York, NY T) F)

4

5 Table of Contents v Table Of Contents Introduction to CMS Project Builder Training... 1 What is Content Management?... 1 RedDot CMS Concepts... 2 Content Editing... 2 Administration... 3 Server Management... 4 Training Concepts and Components... 4 System Architecture... 6 Logging In... 7 Logon to RedDot CMS... 7 Administering CMS Server Manager Server Manager: Purpose Server Manager: Interface Components Creating, Importing and Exporting Projects Create a Project Exporting a Project Import a Project Remove Project Lock Creating Users Definition of a User Create User Creating Groups Create New Group Add Users to Groups In the Role of an Editor Import Project SmartEdit Interface Top Menu in SmartEdit Mode Left Menu in SmartEdit Mode Administering Projects: SmartTree SmartTree Mode - Interface Components Left Menu Buttons in SmartTree Mode Main Menu Buttons in SmartTree Mode Clipboard Content Class and Page Essentials Definition of a Content Class and Pages Definition of Template Using Content Classes to Create Pages Different general types of Content Classes Folders and the Asset Manager Asset (File) Folders Create Project Folders Content Class Folders Create Content Class Folders External File System Folders Stylesheet Folders Templates and Template Editor Configure Template Template Editor Interface Placeholder Types Content Elements Meta Elements... 86

6 Table of Contents vi Structural Elements Block Mark Types Repeating or Looping Block Marks Single Block Marks Create CMS Design Patterns Project Create New Project Connect to New Project Create Asset Manager Folder for Images Import Images into Asset Manager Create Asset Manager Folder for Downloadable Content Import Files into Asset Manager Table of Contents Pattern Create Table of Contents Content Class Add SmartEdit Support for Table of Contents Create Table of Contents Page Simple Teaser Pattern Create Simple Teaser Content Class Add SmartEdit Support for Simple Teaser Create Document With Teaser Content Class Add SmartEdit Support for Document with Teaser Create Simple Teaser Page Create Document With Teaser Pages Complex Teaser Pattern Create Complex Teaser Content Class Add SmartEdit Support for Complex Teaser Create Complex Teaser Page Connect Document With Teaser Pages Page Organizer Pattern Create Page Organizer Content Class Add SmartEdit Support for Page Organizer Create Ad Block With List Content Class Add SmartEdit Support for Ad Block With List Create Ad Block With Image Content Class Add SmartEdit Support for Ad Block With Image Create Page Definition for Page Organizer Preassign Content Classes for Ad Block Create Page Organizer Page Create Pages for Ad Block Download Organizer Pattern Create Download Item Content Class Create Download Organizer Content Class Add SmartEdit Support for Download Organizer Preassign Content Class for Download List Create Download Organizer Page FAQ Organizer Pattern Create FAQ Item Content Class Create FAQ Organizer Content Class Add SmartEdit Support for FAQ Organizer Preassign Content Class for FAQ List Create FAQ Organizer Page Navigation Pattern Enable Navigation Manager Create Foundation Content Class Add SmartEdit Support for Foundation Create Page Definition for Foundation

7 Table of Contents vii Configure Foundation as Master Page Create Navigation Content Class Create Navigation Area Create Foundation Page Build Navigation Structure Create Additional Foundation Pages Patterns Worksheet Table of Contents Exercise 1, Part Exercise 1, Part Exercise Exercise Exercise Exercise Exercise Glossary of RedDots Glossary of Terms

8

9 Introduction to CMS Project Builder Training Objectives What is Content Management? RedDot CMS Concept Training Concept and Components What is Content Management? Introduction to CMS Project Builder Training 1 For virtually any company, the internet presence and/or the running of an intranet have become part of dayto-day life. The web server has become the hub for customer and employee information. However, the growth of the number of documents and HTML webpages being created has introduced its own problems. The effort required to manually maintain data and links has increased exponentially to the amount of documents. This is where a Content Management System fits in to the equation. A Content Management System enables the systematic editing of internal and external information. As it is distributed over a standardized medium (web browser), employees are able to work with greater efficiency and productivity for the benefit of the company. By breaking down management roles into Editors and Administrators of the system, and providing different interfaces for both, RedDot CMS allows everyone involved in content management to efficiently accomplish their tasks. The RedDot Content Management System helps to manage professional websites, by supporting the automatic creation, management and organization of content by integrating the following functionality. Document management, enabling the administration of large numbers of documents and publications Centralized management of the content layout, look and feel Decentralized content creation Separation of content and layout Link management to ensure valid hyperlinks Workflow managing work and business processes Managing User authority and general access rights Import interface for the integration of available data Publishing interface to one or more web servers The most important aspect central to a web project that is managed by a Content Management System is the separation of layout and content. In many instances the layout is predetermined by an organization's corporate design. As a result is rarely necessary to re-design the layout of every single document. However, it does mean that if the corporate design changes it will have to change over hundreds or thousands of webpages. Without centralized layout management, this would be an enormous amount of work

10 Introduction to CMS Project Builder Training 2 RedDot CMS Concepts RedDot CMS consists of a content editing system, an administration system, and a server management system. Content Editing In the traditional world of webpage production, an HTML editor produces content as well as layout. The creation of webpages is normally achieved using a graphical HTML editing tool. In this classical model the HTML editor can only produce complete webpages where both layout and content are simultaneously managed. This requires considerable effort. The RedDot CMS Editor works purely with the content of a webpage. An Editor in RedDot CMS is anyone and everyone who publishes content on an intra/internet. The CMS Editor not only creates new content such as text, images etc, but is responsible for re-using existing content. RedDot CMS provides Editors with an optimized working environment. The RedDot CMS editing system is based on the RedDot SmartEdit Technology. SmartEdit Technology enables users to easily create and change content. With SmartEdit Technology, complex websites and intranets can be managed in a simple manner. Editors simply surf to the webpages they want to add, edit, or delete content. Red dots appear and indicate the areas where changes can be made. RedDot SmartEdit is so simple and intuitive that site Editors can learn to use it without extensive training resulting in rapid acceptance among users and a fast return on investment. SmartEdit Mode is a What You See is What You Get or WYSIWYG interface. This means that Editors create and modify content while working in an environment that looks like the webpage they are working on. The red dots control access to certain portions of the site, and allow access to elements that they can change. The RedDot SmartEdit Technology is the simplest, quickest and safest method of creating and/or editing content in an intranet or internet. The Editor logs on using a web browser, navigates to a site that requires content opens the site in editing mode. All areas that can be edited are indicated with a red dot. By clicking on the corresponding red dot, the Editor is shown windows that match the type of content being edited. After completing the desired editing, the Page is either published and sent directly to the live production server or sent into the Workflow process for approval by another User.

11 Introduction to CMS Project Builder Training 3 Since Editors are only allowed to change specifically configured content, you can enforce the layout of the site. This also means that the Editors do not need any HTML or web knowledge. As long as they can navigate, click, and enter content, they can work with this interface. RedDot CMS provides interfaces for editing many kinds of content, from media and images, to option lists and rich text. Since the RedDot CMS interface is browser-based, there is no need to install any client software. You have access control through Workflow and Authorizations. If multiple users try to edit the same content, the first User will get access and the remainder will not be able to click the red dots, receiving a message that the initial User is editing the Page. These functionalities add up to an extremely robust editing environment. Administration A RedDot CMS Administrator has the responsibility of ensuring that the Editors are presented with an optimized production process, so that the work processes are executed as smoothly as possible. A number of tools are available to enable the Administrator build and manage a website or intranet project. The interface for this administration is called RedDot SmartTree Mode.

12 Introduction to CMS Project Builder Training 4 Server Management A RedDot CMS Server Manager has the responsibility for maintaining several aspects of the installation. Server Managers create Users, Groups and Projects. They also configure server settings such as license keys and mail server. The aim of this course is to give RedDot Content Management Server Administrators a complete understanding of the components and functionality of the RedDot Content Management Server (CMS) software, and to apply this knowledge to real-life situations. Training Concepts and Components Since each Administrator of RedDot CMS may have different needs, the topics of this training are organized into modules. A module is a lesson on a particular topic. While most modules contain exercises that you should complete, some are only for explanation and reference. To help you plan your approach, the modules can be broken down into four basic groups: Beginning Concepts These topics get you started with RedDot CMS. You learn how to log in, create Users and Groups, manage the server and configure a Project. These are largely explanatory modules, designed to give you a feel for the interface. You should be able to complete this module in about 1-2 hours. Template Basics Once you have your bearings, you will learn how to implement RedDot Content Management within a sample website. Template Basics is broken up into several puzzles. Each puzzle is designed to demonstrate specific core template concepts. The puzzles cover using the main Placeholder types and widely used design patterns. These are hands-on exercises. You should be able to complete this module in about 1.5 days.

13 Introduction to CMS Project Builder Training 5 Training Website: EduSite This is a full website that applies the concepts covered in Template Basics to a single website. In addition, this site covers CMS features that provide an enormous amount of functionality and greatly improve the efficiency and effectiveness of the implementation. Depending on how many of the exercises you attempt, you should be able to complete this module in about days. Workshop: BizCom This is a full website that utilizes many of the concepts covered in the Template Basics and EduSite, but is an independent Project. You can use this site to replace some of the EduSite exercises as well. Depending on how many of the exercises you attempt, you should be able to complete this group in about days. Please keep in mind that there are a large number of factors determining how long it takes to complete a Module and you should use these estimates only in very general terms. You must complete the Beginning Concepts and Template Basics before moving to the other groups. EduSite builds on the Core, introducing more complex, advanced and important concepts. The Workshop reiterates much of the content in the Template Basics and EduSite, but the Project is larger and more challenging. Many of the concepts in the EduSite Project are expanded in the Workshop. The SmartEdit concept is what makes RedDot CMS such a useful tool for content Editors. Configuring a site with this SmartEdit functionality is the job of the RedDot CMS Administrator (you). The role of the RedDot CMS Administrator requires web development experience and a solid knowledge of HTML. You must integrate your site by breaking it down into editable components that the Editors can access and reuse. This process takes several days to learn, but once you have learned it, you will be ready to begin implementing your Project. Once the Project is built, you will need to educate your Users on how to work with the SmartEdit system. This is a simple process and we will show you several techniques for doing this. As you go through these exercises keep in mind that you are trying to learn a toolkit: a set of methods that you have available for completing all the tasks that need to be done. We will try to show you as many methods as possible, but more importantly, we will try to show you how to come up with your own. Your job is to get RedDot Content Management integrated with a website, and you will learn how to do that. Let's get started.

14 System Architecture System Architecture 6 Objectives Physical RedDot CMS Components Technical Overview Especially for those who will administer RedDot CMS, it is important to understand the system architecture. RedDot CMS is a staging environment, meaning it is separate from the live web server. RedDot CMS resides on a Windows 2000/2003 server. To store information, it uses an MS SQL or ORACLE database. RedDot CMS uses client-server architecture. This means that users of RedDot CMS (Authors, Administrators, etc.) all connect to a single server when working. The architecture can be seen in the sketch below. Access to RedDot CMS is through a web browser over IIS. The RedDot CMS Graphical User Interface (GUI) is displayed in the browser itself. As a result, it is not necessary to install any client software or download any applets. This means that any computer that has a browser installed can be a RedDot CMS Client. Users of RedDot CMS log in to the system via their web browser. Once logged in, they can complete any tasks necessary for editing or administering content. RedDot CMS can integrate users from LDAP or NTDomain. It can read and write content from external database sources as well. Since the RedDot CMS is not inherently connected to the live web server, and pushes content to the web by publishing and generating static files, RedDot CMS is a staging environment. All content, once published, does not reference RedDot CMS in any way. The live server or production server is not a component of RedDot CMS. RedDot CMS can publish to any web server, such as Apache, MS IIS, or Netscape.

15 Logging In Logging In 7 Objectives Log on to RedDot CMS Explore Left Menu Open Server Manager Before you can do anything in RedDot CMS, you need to log in to the system. Your User name and password are usually specific to RedDot CMS, but this can be synchronized with your NT Domain or LDAP server as well. Logon to RedDot CMS 1. Log in to RedDot CMS by navigating to the URL of your RedDot CMS Server, which usually looks like: 2. Enter the User Name and Password provided to you. The default is admin for both.

16 Logging In 8 3. Click Start to log in. Once you log in, you will usually see the Web Content Management Homepage. This is the central menu for all the tasks that you have within RedDot CMS. You can instantly see if there is anything that you have waiting to be completed. There is a Left Menu with several options. These options do the following:

17 Logging In 9 Homepage This is what you are currently looking at. Web Content Manager Once you have selected a Project that you would like to work on, this button will take you to that specific Project. You do not have to select a Project every time you log in. RedDot CMS remembers the last Project you worked on. Asset Manager This is a repository for your digital assets within the Project that you are working on. You can use the link here to populate the Asset Manager with files, or simply browse. We will discuss the configuration of the Asset Manager in detail shortly. Main Menu This option contains several sub options which are very important. These sub options are: Projects This screen allows you to choose the Project you wish to work on. A Project generally corresponds to a website. User Settings You can change your User information here, as well as your preferred editing mode. Server Manager You will have this option if you have been configured as a Server Administrator. We will cover the Server Manager in detail shortly. Some of the tasks of the Server Administrator are creating and managing Users, Projects, Groups, licenses, and server maintenance In the main screen you may notice some grayed-out options. These options are the features of our XCMS components, which provide additional Document Manager, Business Process Manager, Collaboration, and Search capabilities. These components are not included as part of this course. Since we cannot do anything else until we set up a real User and create a Project to work on, we need to select Server Manager first. 4. Select the Main Menu button in the Left Menu and then click Server Manager in the pop-up window.

18 Logging In You will now see the SmartTree in the Server Manager view.

19 Administering CMS Server Manager Objectives Purpose of Server Manager Explanation of Interface Components Administering CMS Server Manager 11 Using the Server Manager, System Administrators can manage all server settings. For example, Administrators can delete, import, and copy Projects, add Users and Groups, or configure the RedDot CMS database. Server Manager: Purpose Once logged in, the RedDot Server Manager can be selected from the Main Menu button. While there are no specific tasks you will complete right now, we suggest that you follow along so that you can get a feel for the interface. The Server Manager is organized as a tree, with branches that correspond to different types of areas that you can manage. You can navigate through this central tree by clicking the to expand a node. You can collapse a node with the icon. This tree structure will let you quickly find whatever you are looking for. To the right of the tree is the Action Menu. For any object selected in the tree, you will be presented with a list of possible actions that can be performed on or from this item. This menu is context-sensitive, meaning you will only be shown actions for the selected object. Underneath the Action Menu is the Clipboard. Double-clicking on a tree entry will paste the entry to the Clipboard. This entry can then be referenced, copied and used at other positions in the tree. The Clipboard will retain its contents as part of the Project state, so your Clipboard will not change after log out. The arrow next to the check box in the Clipboard will locate and display the selected object in the tree. The use of the Clipboard will be discussed in later exercises.

20 Server Manager: Interface Components Administering CMS Server Manager 12 Let's look at the tree in detail. It is broken down into several branches, each with a different group of functionality. These groups are: Administer RedDot Content Servers This manages the various connections to RedDot CMS. You can use this area to change the license of the server, configure mail server settings, set up session timeouts, view certain processes and several others. Administer Users and Groups This area allows you to manage the Users and Groups. You can view these by Project and globally. Users can be imported from LDAP or NT Domain as well as managed by RedDot CMS.

21 Administering CMS Server Manager 13 Administer Projects This area allow you to manage the Projects on this and other CMS servers. You can create, copy, import, export and delete Projects. Projects roughly correspond to a website. Administer XCMS Projects In addition to the basic Web Content Management functionality, we offer XCMS add-ons that provide a Document Manager, a Business Process Manager, Collaboration and Search capabilities. These components are not included as part of this course. Administer Plug-Ins Using the RedDot CMS API, you can build your own functionality in the RedDot CMS interface for you and your Users. This area allows you to import and configure these Plug-Ins.

22 Administering CMS Server Manager 14 Administer Database Servers This section allows you to manage the connectivity to the RedDot CMS databases. You can also configure external database drivers so that you can read content from these external sources. Administer User-Defined Jobs You can create your own procedures and schedule them within RedDot CMS. This allows you to launch scheduled tasks using the RedDot CMS API or with calls to external procedures or scripts. You can use this to automate backup or cleanup jobs and many others.

23 Creating, Importing and Exporting Projects 15 Creating, Importing and Exporting Projects Objectives Definition of a Project Create a New Project Learn to Import and Export Projects A Project is a collection of all the information involved in setting up a website to be content managed. This incorporates everything needed to build webpages, define settings, publish information, Workflows, Authorizations, etc. In general, although information can be shared between Projects, everything that shares a similar look and feel should be in the same Project. Create a Project In order to integrate your site with RedDot CMS, you will need to create a Project. 1. Select the Main Menu button in the Left Menu. 2. Click Server Manager in the pop-up window. 3. Expand the section Administer Projects. 4. Select the Projects node.

24 Creating, Importing and Exporting Projects Click the link Create Project from the Action Menu. 6. In the field Project name enter a name for the Project, RedDot CMS Training Project. The Database name will automatically become the same as the Project name. The option box Activate versioning determines whether versioning should be activated for the Project. This is necessary for Redlining to work, and to be able to roll back to previous versions of Pages. This is checked by default. The RedDot content server is the location where RedDot CMS Professional is installed. Unless the RedDot CMS installation is a server cluster, there will be only one choice here. If there are more, consult the System Administrator. The Database server is the server containing the RedDot CMS database, and should be left at the default value.

25 Creating, Importing and Exporting Projects The Language Variant should be set to United States. The option boxes refer to folders that will be created in the Project database for storing Assets and Content Classes (the blueprints for webpages in the site). These folders can be modified, and more can be created in the Project interface. Leave the default values. 8. Uncheck the Publishing target. This will be configured individually for the Project. Once the Create Project screen disappears it may take a few moments for the Project to show up in the list. The Project listing will not automatically refresh so you may want to wait a minute, then collapse and expand the listing. The Project should be visible. If the Project has a label next to it saying it is locked, this means it is still being created. Wait another minute, collapse and expand the node again.

26 Creating, Importing and Exporting Projects To get to the Project, click the Homepage button in the Left Menu Main Menu button Projects link. Your Project should be in this listing as a link. NOTE Although you should not complete the following steps at this time, they are included so that you will have them for reference. Exporting a Project All RedDot CMS Projects can be exported as a folder in the file system. This allows you to back up Projects and move them to other servers. 1. Select the Main Menu button in the Left Menu. 2. Click Server Manager in the pop-up window. 3. Expand the section Administer Projects. 4. Expand the Projects node. 5. Select the Project you want to export.

27 Creating, Importing and Exporting Projects Click Export Project from the Action Menu. 7. Click Search to set up an export folder. 8. In the screen that appears, navigate to the desired location by clicking on the names of drives and folders. 9. In the input box, enter the name of the directory to store the export to. 10. Click Create Directory. 11. Select your new directory with the radio button and click OK. 12. Click OK. If your functionality is enabled you will be ed when the export is complete. If not, please wait a few minutes and it should be finished.

28 Creating, Importing and Exporting Projects 20 Import a Project 1. Select the Main Menu button in the Left Menu. 2. Click Server Manager in the pop-up window. 3. Expand the section Administer Projects. 4. Select the Projects node. 5. Select Import Project. On the screen that appears, name the Project as desired. The database name will change automatically.

29 Creating, Importing and Exporting Projects Click the Search link to choose the source. This folder should be the result of an Export Project. 7. Browse to the desired folder by clicking the drive and folder names. 8. Select the desired folder with the radio button. Note that administrative settings such as Users and Groups can be imported and exported as well. 9. Click OK. 10. Click OK to complete the import.

30 Creating, Importing and Exporting Projects 22 Remove Project Lock All imported Projects will be locked against publication to prevent them from starting their publishing jobs. Please review Publishing to get more information on what this means. 1. Select the Main Menu button in the Left Menu. 2. Click Server Manager in the pop-up window. 3. Expand the section Administer Projects. 4. Expand the Projects node. 5. Choose the Project you want to unlock. 6. In Edit Project Lock check Unrestricted release of project. 7. Click OK. The lock will be removed and the Project can be published.

31 Creating Users Creating Users 23 Objectives Definition of a User Create a New User User Licenses and Roles Anyone who is a part of the Content Management process needs to be a RedDot CMS User. This gives them a login, as well as access to certain Projects, license levels to control that access, and roles within the individual Projects. Each User can also choose the language of the interface, and several other features of their environment. Definition of a User Users can have several types of License levels: Administrator - This User can configure every aspect of a Project and works in SmartTree Mode. Template Editor - This is an add-on to the Administrator license that gives the User access to change and create Content Classes. Server Manager - This is an add-on to the Administrator that allows the User access to the Server Manager (used to configure Projects, Users, etc.) Editor - This User can configure the content of a Project and works in SmartEdit Mode. Translation Editor - This is an add-on to the Editor (Administrator as well) license that gives the User a special view for translating the contents of Projects. Visitor - This User can preview a site, but has no access to change the content. Based on the License level, the User then has roles within each Project to which they are assigned. Administrator - This license breaks down into two roles. Administrator - This role can change every setting of a Project Site Builder - This role can work in SmartTree Mode, but can not change higher-level Project settings. Editor - This license breaks down into two roles. Editor - This role can use all functionality in SmartEdit Mode. Author - This role can not be an approver in a Workflow. Visitor - This license is the same as the role. Users are found in the Administer Users and Groups branch of the Server Manager. This branch allows the Administrator to create new Users with different access privileges to a Project. User/Groups by Projects - This view will enable the Administrator to configure Users and Groups related to specific Projects. Directory Services - This allows Administrators to configure a User import from an external User server. Users - This allows Administrators to create and configure Users. Groups - This allows Administrators to maintain the Groups globally. All imported Projects will be locked against publication to prevent them from starting their Publishing jobs. Please review Publishing to get more information on what this means.

32 Creating Users 24 Create User A created User must have the following assigned information: User Details (Name, Password, ) Project(s) assigned Group Membership (if necessary) Authority (License Level) Project Role 1. Select the Main Menu button in the Left Menu. 2. Click Server Manager in the pop-up window. 3. Expand Administer Users and Groups, and select Users. 4. Click Create User in the Action Menu. 5. In the User name field choose and enter a name to use (trainee) when logging on to RedDot CMS. For reference, please see the screenshot below for the completed form. 6. Enter the Full Name of the User, (First Last). 7. Enter any comment describing the User in the Description field.

33 Creating Users Enter the Address in the appropriate field, as RedDot CMS needs this to enable the Workflow facility to function. notifications can also be sent in response to certain tasks. This is extremely useful for notifying Administrators and Users without requiring them to log on. If the User has been brought into RedDot CMS via an external directory service, the service will appear in the drop-down list, e.g. LDAP, NT Domain. This lets you know that the User account is not being set from within RedDot CMS. You will only use RedDot to configure the license level and Project settings for the User. Since you are creating a User within RedDot CMS, the directory service will be set to RedDot, meaning all aspects of the User account are controlled within RedDot CMS. 9. In the Password field choose a password for logging on to RedDot CMS. The password can be changed at a later date. Use alphanumeric characters. Spaces and special characters are not allowed. The minimum is four characters. 10. Choose an Interface Language from the dropdown list Choose an appropriate Locale. This will be used to control certain character and format settings. 12. You can choose the mode for editing content in SmartEdit Mode as default or pop-up. The left and top menus are not a part of the interface in the pop-up view, rather, each option from the top menu and the Left Menu is available with a right mouse-click. 13. For now, leave this option, SmartEdit navigation as Default. 14. Click on Next. (Clicking OK will save the User, and the User will need to be selected and edited to complete the configuration) 15. Allocate the general licenses as shown below. Click Next.

34 Creating Users 26 SmartTree This allows you to administer and configure Projects. Check this option. SmartEdit This is the standard editing interface. Since this is a more restrictive interface, you will automatically be granted this once you check SmartTree. Template Editor This can be given to SmartTree Users, allowing you to edit Content Classes and their Templates (layouts). Check this option. Translation Editor This is a special interface for SmartEdit Users, allowing them the more easily translate the content in Pages between different languages. Check this option. Server Manager This is what you are using right now to administer RedDot CMS. Check this option. Asset Manager This allows you to use a special interface for managing digital assets like images and media files. Check this option. Document Manager, Collaboration Manager, Business Process Manager These are grayed-out. They are the add-on components of XCMS, and grant additional Content Management functionality. They are not part of this course.

35 Creating Users Assign the User to the Project you just created, RedDot CMS Training Project. The Roles are as follows: Ad - This role can change every setting of a Project. Si - This role can work in SmartTree Mode, but can not change higher-level Project settings. Ed - This role can use all functionality in SmartEdit Mode. Au - This role can not be an approver in a Workflow. Vi - This role has no editing capability, only a preview. TP - This role allows you to edit Content Classes and their Templates (layouts). TL - This role grants access to the translation interface. Set the Roles to Administrator (Ad) and enable the Template Editor (TP) and Translation Editor(TL). 17. Click on OK. The User is complete. 18. Log off and log back on with your new trainee User. For later exercises, you will need a few more Users. You can create these Users now. Using the steps outlined above, create a User named trainingeditor, license level SmartEdit/Asset Manager, role of Ed. Create another User named trainingapprover, license level SmartEdit/Asset Manager, role of Ed. Both Users should be assigned to the RedDot CMS Training Project.

36 Creating Groups Creating Groups 28 Objectives Definition of a Group Create a New Group Add Users to Groups Groups are used to organize users for the purposes of Authorizations and Workflow. Groups contain a number of Users. When Authorizations and Workflows are applied to each Group, they will cascade to the Users in the Group. This allows you to create fewer Authorizations and Workflow packages, since you can apply them to Groups instead of individual Users. Groups are server-wide and can be a part of multiple Projects. Create New Group To create the Groups you will need for your Project: 1. Select the Main Menu button in the Left Menu. 2. Click Server Manager in the pop-up window. 3. Expand the section Administer Users and Groups.

37 Creating Groups Find and expand Users/Groups by Projects. 5. Find the RedDot CMS Training Project that you created, expand it. 6. Select Groups. 7. Click Create Group in the Action Menu. 8. Name the Group Training.Administrators. You can fill in an address for the Group if you want. Note that Groups can have a single address, which is usually configured on the main server as an alias to certain members of the Group. Click OK.

38 Creating Groups 30 Add Users to Groups 1. Locate your current User under the Users node of the Project instead of the Groups node. 2. Put your User into the Clipboard by double-clicking it. 3. Expand the Groups node of your Project. 4. Select the Training.Administrators Group.

39 Creating Groups Click Connect to Users in Clipboard. This will put your User into this Group. Using the above steps create a new Group called Training.Editors and add the trainingeditor User you created previously to this Group. 6. Using the above steps, create a new Group called Training.Approvers and add the trainingapprover User you created previously to this Group.

40 In the Role of an Editor In the Role of an Editor 32 Objectives Explore SmartEdit Interface Import a Project Before you can become a RedDot CMS Administrator, it is important for you to gain a better understanding of the role of an Editor in a Project and to start thinking about how you can configure your Project to accommodate more efficient content editing. We have provided you with a sample Project that has already been completed. You will import this Project and then take a few minutes to navigate though it as an Editor. Imagine that you have been given the task of creating a new press release and changing some content in the existing ones. Are you able to do it? You should use this as an opportunity to appreciate the viewpoint of an Editor, someone with no HTML knowledge, someone who only knows that they need to modify the content of their site. Once you have imported the Project, click through the links and the red dots as an Editor would. Is this site easy to navigate? Is there a clear correlation between a dot and its function? Are there directions for everything, or are certain functions unclear? Remember that the goal of this Project is to set up a site in such a way that anyone can contribute content, regardless of technical background, but in such a way that the site layout is maintained and checks are placed on content. One of the main points of the training Project is to illustrate that there are many ways of accomplishing the same task in RedDot CMS. Much of the time, choosing a method is limited by the specifics of the situation or by personal preference. Some of the training sections are not set up in the best way. Think about this while navigating the Project. How can the site structure be improved? What other ways are there to accomplish a given task? The training Project is designed to teach as many different techniques as possible so that every option will be available to you. Import Project Using the steps provided below, Import the sample Project. Once the Import is complete (the link to the Project in the Component Manager will be clickable), select the Project and enter in SmartEdit Mode. To Import the sample Project: Select the Main Menu button in the Left Menu. 1. Click Server Manager in the pop-up window. 2. Expand the section Administer Projects.

41 In the Role of an Editor Select the Projects node. 4. Select Import Project. 5. On the screen that appears, name the Project RedDot CMS Training Sample. The database name will change automatically.

42 In the Role of an Editor Click the Search link to choose the source. This folder should be the result of a Project Export. 7. Browse to the CMSTrainingExport folder by clicking the drive and folder names. 8. Select the desired folder with the radio button. Note that administrative settings such as Users and Groups can be imported and exported as well. 9. Click OK. 10. Click OK to complete the Import. You will automatically be configured as a Project Administrator with privilegesliges.

43 In the Role of an Editor 35 SmartEdit Interface All imported Projects will be locked against publication to prevent them from starting their publishing jobs. 1. To remove the lock, select the Main Menu button in the Left Menu. 2. Click Server Manager in the pop-up window. 3. Expand the section Administer Projects. 4. Expand the Projects node. 5. Choose the Project you want to unlock, RedDot CMS Training Sample. 6. Select Edit Project Lock, and set it to Unrestricted release of project. 7. Click OK. The lock will be removed and the Project can be published. 8. Click the Homepage button in the Left Menu. 9. Click the Main Menu button in the Left Menu.

44 In the Role of an Editor Select the Projects Menu. 11. Select RedDot CMS Training Sample. 12. Click OK. 13. The Homepage for the Project appears. 14. Click Web Content Manager in the Left Menu to enter SmartTree Mode. Since you are an Administrator you have access to both SmartEdit and SmartTree Modes.

45 In the Role of an Editor Click the SmartEdit button in the Left Menu to begin editing content. 16. Navigate through the site as you would a normal website. 17. You can open Pages for editing by clicking the red dot.

46 In the Role of an Editor Then click the newly appearing red dots to edit the specific content. Make changes to the content. See what parts of the interface make sense, and what doesn't. This will help you understand the kinds of questions your Editors may ask. Top Menu in SmartEdit Mode When a Page is opened for editing, you will see a Top Menu.

47 In the Role of an Editor 39 These functions will be covered in detail within their relevant exercises. While most of these functions will not make sense yet, here is a general outline of their purpose: Properties You can change the published filename of the Page, and some of its identifiers. Actions You can edit content, publish, delete, approve, and preview Pages here. Linking You can set up schedules and content rotation here. Keywords You can assign keywords to Pages, enabling the reuse of content. Notes This is used to leave notes about the Page for other Users. Page Information This will tell you all sorts of information about the Page, such as who created it, when it was created, etc. Left Menu in SmartEdit Mode In SmartEdit Mode, the Left Menu contains additional buttons.

48 These are: In the Role of an Editor 40 Homepage This is the central menu for all the tasks that you have within RedDot CMS. You can instantly see if there is anything that you have waiting to be completed. SmartEdit This switched you to the editing mode. SmartTree This is the current view. This is not available to normal Editors. Translation Editor If you are configured as a Translator for this Project, you can use this button to access the Translation interface. Search This allows you to search for Pages in the Project based on a large number of criteria. Tasks This brings up a listing of all Pages that you need to take some action on before they can be published. Main Menu - This launches the Main Menu. The options in the menu are described below. Help - This launches the help window. You can use this to get more information about any option in RedDot CMS. Language - This is a dropdown list that allows you to switch between the available languages in the Project. Log off - End your RedDot CMS Session. The Main Menu window also has some additional items. Projects - This screen allows you to choose the Project you wish to work on. A Project generally corresponds to a website. User Settings - You can change your User information here, as well as your preferred editing mode. Server Manager - You will have this option if you have been configured as a Server Administrator. We will cover the Server Manager in detail shortly. Some of the tasks of the Server Administrator are creating and managing Users, Projects, Groups, licenses and server maintenance. New Page - This will create a new Page in the Project, but will not attach it to any link. We do not recommend that you use this feature. Categories and Keywords - This allows you to configure the Categories and Keywords feature. This is covered in a later exercise. This feature is not available to Editors. Display Settings - This allows you to switch the current version of the site. For example, if you have an HTML and Print version of the site, you can use this area to switch the view between them.

49 Administering Projects: SmartTree 41 Administering Projects: SmartTree Objectives Explanation of SmartTree Interface Components SmartTree Mode is the administrative access for a Project. It is broken into branches that represent different functional areas of a Project. Now that you have created a new User and Project, you can begin to work on building the pieces of the Project. This means you will need to become familiar with the areas of SmartTree Mode. Knowing how to navigate this mode is essential to being able to properly integrate a website. Navigate to SmartTree Mode for your Project as follows: 1. Select the Main Menu button in the Left Menu. 2. Click the Projects link. 3. Select the RedDot CMS Training Project. 4. Click OK. 5. The Homepage for the Project appears.

50 6. Click Web Content Manager in the Left Menu to enter SmartTree Mode. Administering Projects: SmartTree 42 Since you are an Administrator you have access to both SmartEdit and SmartTree Modes.

51 Administering Projects: SmartTree 43 SmartTree Mode - Interface Components The different components of SmartTree Mode will be covered in detail when the relevant portions are being used in the exercises. Here is an overview of the different branches: Administer Project Settings Change the general configuration and setup of Project variants, language variants, folders, databases and publishing destinations. Also view all authorization, Workflow, and publishing packages. Administer Content Classes Change the Content Class configurations including the corresponding elements.

52 Administering Projects: SmartTree 44 Administer Project Publication Configure the general settings for publishing a Project. Configure scheduled publishing jobs. Alter the process of existing jobs and read or delete job reports. Browse Navigation Browse only the navigational components of the Project. No Pages will be shown. This will be useful later, once you have built up some of the Project Structure. Administer Project Structure Build the structure of the Project. Configure the Pages and links. Since this is a new Project, There are no Pages to look at here. Compare this tree structure with the tree in RedDot CMS Training Sample. Specifically look at the Content Classes and the Project Structure. This will give you an idea of what the finished Project will look like.

53 Administering Projects: SmartTree 45 Left Menu Buttons in SmartTree Mode Homepage - This is the central menu for all the tasks that you have within RedDot CMS. You can instantly see if there is anything that you have waiting to be completed. SmartEdit - This switched you to the editing mode. SmartTree - This is the current view. This is not available to normal Editors. Translation Editor - If you are configured as a Translator for this Project, you can use this button to access the Translation interface. Search - This allows you to search for Pages in the Project based on a large number of criteria. Tasks - This brings up a listing of all Pages that you need to take some action on before they can be published. Main Menu - This launches the Main Menu. The options in the menu are described below. Help - This launches the help window. You can use this to get more information about any option in RedDot CMS. Language - This is a dropdown list that allows you to switch between the available languages in the Project. Log off - End your RedDot CMS Session. Main Menu Buttons in SmartTree Mode Projects - This screen allows you to choose the Project you wish to work on. A Project generally corresponds to a website. User Settings - You can change your User information here, as well as your preferred editing mode. Server Manager - You will have this option if you have been configured as a Server Administrator. We will cover the Server Manager in detail shortly. Some of the tasks of the Server Administrator are creating and managing Users, Projects, Groups, licenses, and server maintenance. New Page - This will create a new Page in the Project, but will not attach it to any link. We do not recommend that you use this feature. Categories and Keywords - This allows you to configure the Categories and Keywords feature. This is covered in a later exercise. This feature is not available to Editors. Display Settings - This allows you to switch the current version of the site. For example, if you have an HTML and Print version of the site, you can use this area to switch the view between them.

54 Administering Projects: SmartTree 46 To the right of the tree is the Action Menu. For any object selected in the tree, you will be presented with a list of possible actions that can be performed on or from this item. This menu is context-sensitive, meaning you will only be shown actions for the selected object. Clipboard Underneath the Action Menu is the Clipboard. Double-clicking on a tree entry will paste the entry to the Clipboard. This entry can then be referenced, copied, or otherwise used at other positions in the tree. The Clipboard will retain its contents as part of the Project state, so your Clipboard will not change after log out. The arrow next to the check box in the Clipboard will locate and display the selected object in the tree. The use of the Clipboard will be discussed in later exercises.

55 Content Class and Page Essentials Objectives Definition of a Content Class Definition of Page Definition of Template Using Content Classes to create Pages Different general types of Content Classes Definition of a Content Class and Pages Content Class and Page Essentials 47 Content Classes are sets of information that describe different types of data that can be in a RedDot CMS web Project. Consider web content such as a list of webpages linked in a left navigation. The content of this section can be broken down into a few different pieces: There is the content that must be edited by an Author, such as the text and images. There is the structural component that provides the links to the Pages.

56 Content Class and Page Essentials 48 There is another structural component that provides the overall webpage layout. There may be other components, such as information blocks in the right column of the webpage, headers, footers, and the components described above may break down into several smaller components. Each component of the site can have a Content Class which defines the type of content that makes up that component. A Content Class is like a blueprint for the content of a webpage or a piece of a webpage. It contains all the design information, layout information, some administrative information, and the specifications for the content that belongs to that piece. It does not contain any content of its own.

57 Content Class and Page Essentials 49 The specification for a single content element is called a Placeholder or Element. Each Content Class can contain as many Placeholders as desired. Placeholders have a variety of types and settings that allow the Administrators to control the content that can belong to a Content Class. A Content Class is used to create Instances, which do have content, and are based on the specifications of the Content Class. Instances each have their own unique set of content. Instances are also called Pages. Each Page contains the content stored in its Placeholders, plus three identifiers: Globally Unique ID (GUID) - This is a large string that is generated when the Page is created. It is not editable. Page ID - This is an integer representing the order the Page was created in the Project. It is not editable. Headline - This identifies the Page in the Project. It is not Page content, but you can choose to display it on a Page. It is non-unique, and entered by whoever creates the Page. Definition of Template In order for Instances to be useful in a website, they must have a layout that organizes the Placeholders into a recognizable form, such as HTML. To accomplish this, a Content Class must have a Template.

58 Content Class and Page Essentials 50 Templates define layouts for the content in a Content Class. Each Content Class can have multiple Templates. This allows the content to be published in multiple formats. The Templates are markup-based, meaning that they can be any format, and are not based on any proprietary language. When a Content Class is used to create an instance, and there is a Template for the Content Class, the resulting instance is called a Page. Using Content Classes to Create Pages A Content Class can create an unlimited number of Pages, each with a unique set of content, but all having the content types specified in the Content Class, and sharing the layouts defined in the Templates. Here is an example to illustrate the relationship between a webpage and a Content Class. Start with a webpage in plain HTML. In HTML, the content and layout are fused.

59 Content Class and Page Essentials 51 Since this is an HTML-formatted webpage with several different types of content, we will need to create a Content Class and a Template for that Content Class. To create Elements for the content, we need to identify the types of content in the Page. This Page consists of some short text fields, longer text fields, images, and anchors. There are corresponding Placeholders for each of these types. These Placeholders are broken down into three categories: Content, Structure, and Meta. These types will be described in detail later. In the Template for this Content Class, we can remove the content and insert the properly configured Placeholders.

60 Content Class and Page Essentials 52 This means that for each instance of the Content Class, the Template will organize and format the content into the HTML layout. The result is that webpages can now be built that will all share this layout, but will have unique sets of content. To modify the look and feel of the webpages, you only need to change the Template, and the Pages based on the Template will change as well. Different general types of Content Classes Since a Content Class usually represents only a portion of the design for a complete webpage, each Page is not the same thing as a webpage. A complete webpage will frequently consist of several Pages. In this example, the complete webpage is made up of 7 smaller Pages, the foundation or framework, left navigation, center content area, header, footer, and 2 right navigation blocks. In addition to containing Elements and Templates for layout, Content Classes can contain Notes fields that will allow Editors and Administrators to discuss the Page as part of Workflow.

61 Content Class and Page Essentials 53 Much of the task of configuring the Templates consists of identifying the different sections and content of webpages, so that the website can be most efficiently built. To this end, webpages can be broken down into Content, Structure/Organization, and Foundation. Pages centered around presentation of User -defined data are the Content-type Pages. Pages centered around linking to or providing organization to other Pages are called Structure-type Pages. The code structures that defines the layout of complete webpages are called Foundation-type Pages. You will notice this naming convention used in the exercises. Using it will help you organize your own Content Classes.

62 Folders and the Asset Manager 54 Folders and the Asset Manager Objectives Definition of a Folder Types of Folders Create Folders for the Project Folders are used to provide organization for Content Classes and Digital Assets. When a Project is created it is usually given default folders for Content Classes, Files, and Images. In SmartTree Mode, under the Project Settings, these folders can be configured and more can be created. You can create as many folders as desired. Asset (File) Folders Each Asset Folder is displayed in the Administer Project Settings section of SmartTree for a Project. From this location, files can be uploaded to the folder, and the folder settings can be configured. Asset Folders can be kept in the database, or they can be mapped to a folder in the file system of the server. You can move a folder the database to the file system, but not the other way around. It is also important to note that files maintained in the file system will not be included in Project Exports. Asset folders can be shared with other Projects, allowing either full or read-only access to the assets. All RedDot CMS has a special interface called the Asset Manager that provides an intuitive, user-friendly environment for viewing and selecting files as content. This interface also allows you to create user-defined attributes for the content in the folder. This means that you can have text associated with the file, that can be used as content, or simply to help when searching for a file in the folder. An important note is that versioning of the assets, meaning the ability to roll back to previous versions of the files, is available only when using the Asset Manager, and only when using file system storage. You can reduce the number of versions stored at any time. Another important note is that you can nest folders underneath each other only when using the Asset Manager, and only when using file system storage. The Asset Manager interface can be configured on any Asset Folder. In this exercise, we will use database storage for one folder, and file system storage on the others. We will also configure Asset Manager for the Image-based folders, where thumbnails would be important, but we will not implement it for the basic file folder. The default folders included one folder called Files, and one called Images. We will add a third folder called Icons, underneath Images, and configure both those folders with the Asset Manager interface. We will create a User-defined Attribute called Caption that we will use as content later. We can also use it to help us search for the file within Asset Manager.

63 Folders and the Asset Manager 55 Create Project Folders 1. In SmartTree Mode, expand Administer Project Settings. 2. Expand the Folders node in the tree to see the available folders. Each one is labeled with its type. All the folders were by default, created in the database. This was done so that we can enable versioning and folder nesting on it.

64 Folders and the Asset Manager Select the Images folder. 4. Click Transfer Data Storage in the Action Menu. 5. Click Select to search for the File System Path. 6. Browse to the desired folder (C:\CMSTrainingFiles...)by clicking the drive and folder names. 7. Select the desired folder with the radio button. 8. Click OK. 9. Leave the defaults and click OK. You will be prompted with a Database Changes are Irreversible window. 10. Click OK to continue. The conversion is complete.

65 Folders and the Asset Manager With the Images folder selected, click Edit Folder in the Action Menu. The Create/Edit Folder will appear. 12. Select Asset Manager for Type. 13. Click Next.

66 Folders and the Asset Manager You can now enable versioning by selecting the Versioning checkbox. 15. Click OK. The label on the folder will change to Asset Manager. You can now create a subfolder. 16. Click Create Subfolder in the Action Menu. 17. Enter Icons for the Name, and click in the text box for Directory Name for File System. It will automatically take the name you just entered.

67 Folders and the Asset Manager Click OK. The subfolder cannot be directly edited, and takes all the same properties of the parent folder. 19. Select the Images folder. 20. Click Add Attribute in the Action Menu. 21. Enter Caption for the Name. 22. Click OK. You will now be able to tag all content in the folder with this Attribute. Let's test this now. 23. Select the Images folder.

68 Folders and the Asset Manager Click Edit Folder Content. 25. Click on Select File from Local File System and browse for a file (tasi1a.jpg). You will be prompted to enter a Caption. You can leave this blank if you wish. 26. Enter a value of Taz for the Caption attribute. 27. Click OK. The thumbnail view of the file appears in the main window. 28. Selecting the file name will select the image and show you information about it in the right side of the Asset Manager, and will give you some options in the lower right side.

69 Folders and the Asset Manager Selecting the image thumbnail itself will open up a full view of the image. 30. Click on Crop Image. 31. This will bring up a window that allows you to crop out any portions of the image that you like, and save the file as itself, or as a new file. 32. Click Cancel. 33. Click on Edit Attributes. This will bring up a window that allows you edit any User-defined attributes you have created.

70 Folders and the Asset Manager Click OK. 35. Replace Thumbnail will allow you to browse for a separate thumbnail file for this image. 36. Refresh Thumbnail and File Information will simply update the window. You do not need to do either of these at this time. If you have not enabled Versioning, you will have the option to Update File, which will prompt you to upload the same file. If you have enabled Versioning, you will need to Check Out the file and save it locally before you can Check In the file, which will replace it and create a new version. If you accidentally Check Out, you can Undo Check Out to fix it. With Versioning enabled you can also Show Versions of the file, which will allow you to Preview old versions and Reset Version to any previous version. You do not need to do any of these at this time.

71 Folders and the Asset Manager 63 You can also Delete File, if you no longer want it. You do not need to this at this time. You can switch the view from Thumbnail to List, which will help consolidate the files into a more compact view. Selecting any item in the list will display information and a thumbnail in the right side of the window. Switch Folder will allow you to navigate to any subfolders or parent folders. 37. Close the Asset Manager.

72 Folders and the Asset Manager 64 If you find that some thumbnails do not display properly, or if file information seems to be missing, you may want to choose Update Asset Manager in the Action Menu. This will refresh all the information. If you check Replace individual thumbnails, this will refresh the thumbnails as well. 38. For comparison to the Asset Manager, select the Files folder, which is not configured with the Asset Manager. 39. Click Edit Folder Content. 40. This interface is much simpler and does not have all the functionality of the Asset Manager. 41. Click on Select File from Local File System. 42. Browse for a file (stylesheet.css). Note that this is a very simple interface that is useful mostly when you are not working with images.

73 Folders and the Asset Manager 65 Content Class Folders Each Content Class folder is displayed in the Administer Project Settings section of SmartTree for a Project. These folders are used to organize the Content Classes into groups. Each Content Class folder will show up under the Administer Content Classes branch of the tree so that it can be used. By keeping the number of Content Classes in a folder small, it becomes much easier to locate one for any purpose. Frequently, Content Classes are grouped in folders based on the function they serve within a site This not only makes it easier for Administrators to locate a desired Content Class, but it becomes easier for Editors to choose the ones they want to use for creating Pages. Since Content Classes are not assets, and are a component of the Project, they are always stored in the database. Content Class folders can be shared, but they are read-only and cannot be edited in anything but the original Project. By default, we have a Content Class folder called Content Classes. We will rename this to Foundation. We will also create two new Content Class folders called Structure and Content. Create Content Class Folders 1. In SmartTree Mode, expand Administer Project Settings.

74 Folders and the Asset Manager Expand the Folders node in the tree to see the available folders. Each one is labeled with its type. 3. Select the Content Classes folder. 4. Click Edit Folder in the Action Menu. 5. Change the Name to Foundation. 6. Click OK.

75 Folders and the Asset Manager Select the Folders node in the tree. 8. Click Create Folder in the Action Menu. 9. Enter Structure for the Name. 10. Choose Content Class Folder as the Type. 11. Click Next. Note that you have the option to use the Content Classes in other properly configured Projects. Leave the default, as database. 12. Click OK.

76 Folders and the Asset Manager Repeat the above 4 steps to create another Content Class Folder called Content. 14. Repeat the steps again to create another Content Class Folder called Other. External File System Folders RedDot CMS has interfaces for certain external Document Management systems. Using the External Publication folder type, you can enable this functionality. This functionality is not part of this training. Stylesheet Folders Stylesheet folders are used to provide Stylesheet parameters to the RedDot CMS Text Editor. Since we have not discussed this functionality yet, we will cover Stylesheet folders later. NOTE All folders can be shared with other Projects by selecting the folder under the Folders node in Administer Project Settings and clicking Edit Share in the Action Menu.

77 Folders and the Asset Manager 69 Once Projects are specified in the next screen, Administrators in the other Projects can create new folders using the techniques used above and select the option to link them to the shared folder in another Project. When they select the shared folder, the link to the other Project is created and the new folder in their Project shows up with a special icon indicating shared status. Digital Asset folders can be read-only as well as writeable, but Content Class folders are always read-only.

78 Templates and Template Editor 70 Templates and Template Editor Objectives Review Template concepts Using the Template Editor Templates are used to specify layout for a Content Class. The Placeholders that have been defined for the content are placed in these Templates. These Templates are then used to provide the structure for Instances of the Content Class. Since the Templates represent a physical layout of code, there needs to be a way to configure this Template code. Templates are created with the Template Editor, which is a part of the RedDot CMS application. The Template Editor enables editorial control over the layout of Pages. The Template Editor is used to configure layout information, as well as define and edit the Placeholder types within the Content Class. The Template Editor is not a design tool. The design of the web page should be laid out beforehand with any desired HTML editor. Configure Template 1. Select a Content Class (or a Template from the Templates node of a Content Class). 2. Click Edit Template. 3. Paste the desired code into the Template Editor, or import existing code from a file. 4. Remove the code that should be represented by Placeholders and create or insert the appropriate Placeholders. The Placeholders in the Templates can be fine-tuned for the specific task at hand (for example, a text Placeholder must not exceed a specified length or only specified values are allowed for a field). By suitable placement of the elements the Editor can be allowed any degree of freedom during the editing process of a Page. The Template Editor is used to create a Template from existing HTML code by inserting Placeholders at suitable positions. The code can be a complete HTML web page or an extract from an HTML web page, such as TABLE area, or even a single character. Practically any type and amount of code can be used as a Template.

79 Templates and Template Editor 71 Template Editor Interface The top bar is formatting, containing cut, paste, find, and replace functions. The lower bar contains the RedDot CMS functions. Green Button Create Placeholder Red Button Delete Placeholder (from the Template, not from the Content Class) Gray Button Edit Placeholder Placeholder menu insert any Placeholder you have already created into the code RedDot Placeholders menu insert the dot corresponding to a Placeholder Block Marks used to specify the range of certain Placeholders by selecting a block of code in the Template Code area this is the code of the Template Once created, a Template can be used as often as desired. Changing the code later in a completed Template will affect all Pages that were created on the basis of this Template. This means that only the Templates (not the Pages) need to be modified in a site re-design.

80 Placeholder Types 72 Placeholder Types Objectives Define Placeholder Types This Module is intended to provide you with some reference material on the different types of placeholders, and does not have an exercise. There are three genres of placeholders, Content, Meta, and Structure. Content placeholders are for text, images, media, and other related data. They correspond directly to editor-configured information that would be visible on a Page. Meta placeholders are for content that is not edited directly, but provided by RedDot CMS, about Pages or Assets. Structure placeholders include basic hyperlinks, more powerful link generating tools, and objects that can hold other pages, similar to frames or includes. These are used to build and organize the structure of the RedDot CMS site, and provide the navigation between the pages. Knowing how to use and configure these placeholders is vital to smooth implementation. Not every placeholder is commonly used or necessary. The following is an explanation of some of the more common placeholders, how they work, and their use within a Content Class. When creating a placeholder, either in the Template Editor or directly in the Content Class, there are generally two screens involved. The first allows you to pick the name and type of the placeholder. The next screen is the specific configuration for that type of placeholder. While each placeholder type is different, there are many properties shared by each. Content Elements In the following table, all element types are listed which you can use for editorial processing in your project. These elements are called content elements:

81 Placeholder Types 73

82 Placeholder Types 74 Standard Field - This is a very multi-purpose element. It can contain short Text information (255 characters or less), Date, Time or Number, depending on a configuration setting. There is an option to make this type of field mandatory so that it must have content within an Instance. It also has a field for default content, can be hidden from editors, and can also be hidden from the published page. Please note the Do not convert characters to HTML setting. If you check this, editors will be allowed to type HTML tags into field. Also, Language-variant independent content means the value for this field will be the same across all languages.

83 Placeholder Types 75 Text - This element is used when a full-featured text-editor is necessary for editing content. Much like a word processor, the interface for entering content is called the Text Editor. This interface allows editors to work with a word-processor-like environment, but the resulting content is HTML. The Text editor can contain text of unlimited length, and has a set of featured for formatting and modifying text.

84 Placeholder Types 76 These features include bold, italic, table, links, images, and spell check. Each feature can be turned on and off for a particular element. Stylesheets for the content can be included in the editor as well. There is an ASCII mode for text that will disallow all formatting. Details on using the Text Editor are in the Text Editor Module.

85 Placeholder Types 77 Details on using the Text Editor are in the Text Editor Module.

86 Placeholder Types 78 Image - This element is used to insert image content. It can be configured to look in any one of the asset folders and can have one file assigned by the administrator for all Instances (such as a banner image), or different values for each Instance, assigned by editors (such as press release images). It can be configured to write out an entire <img> HTML tag or just put the path and filename of the associated asset into a Page.

87 Placeholder Types 79 It also has settings for file size and dimension limits, as well as conversion settings to multiple formats. If the image is larger than the scale setting, RedDot CMS will create a new image via scaling.

88 Placeholder Types 80 Each Image Placeholder is tied to a folder that it can get content from. You can either preassign the content, allow an editor to choose it, or both.

89 Placeholder Types 81 Media - Similar to Image, this element is used to insert all other assets such as PDF, DOC, SWF, MPG, and CSS. It contains many of the same settings as Image, but since there is no generic media HTML tag, it can only put the path and filename of the asset into a Page.

90 Placeholder Types 82 Headline - This element has very few settings. Its purpose is to allow the Headline of any page to appear as content on that page.

91 Placeholder Types 83 Option List - This element is used to provide editors with a set of fixed content choices from a drop-down selection. Each selection is configured as a Name/Value pair.

92 Placeholder Types 84 The editor sees the name when choosing a selection, and the associated value is inserted as the content. This element can also be made mandatory, and can have a default selection as well.

93 Placeholder Types 85 Database Content - This element reads a single field in from a database table. It must contain settings for the Database to read from, the Table within the database, and the Field name. It is not user configured, although you can enable write access to the database in the Reading and Writing from External Databases Module. Using several of these placeholders, any desired records from an external database can be retrieved and published as part of the project.

94 Placeholder Types 86 Meta Elements Info - This element can provide a variety of information about a Page, including Creation Date, Modification Date, Author and more. It is not user configured, and is automatically populated. If this placeholder is configured for a Content Class that can display content within a target container, the info of the page inside the target container can be viewed as well.

95 Placeholder Types 87 Attribute - This element can provide a variety of information about an Asset, including Creation Date, Modification Date, Author, File Name and more. Any user-defined attributes related to the asset can be displayed as well. While these attributes may be entered by the user, the element itself is not user configured, and is automatically populated based on the information in the Media Catalog. Structural Elements In the following table, you find all element types available for linking your pages and creating the project structure. These elements are called structural elements.

96 Placeholder Types 88

97 Placeholder Types 89 Anchor - This element is a link to a Page. When a page contains an anchor, and that anchor is connected to another page, a hyperlink will appear on the first page, linking to the second one. Anchors can be configured to generate complete HTML ANCHOR(A) tags, or they can simply generate the path and filename (URL) of the linked page. They can also be used to link across Project and Language Variants. Anchors have a Dynamic option which allows editors and administrators to create multiple anchors on a page as needed. For example, using the dynamic option, one Anchor placeholder could be used to create a set of 5 links on a page, and 10 links on another page. To avoid broken links, unless an Anchor is connected to a page, it will not appear when previewed or published.

98 Placeholder Types 90 Container - This element is like a cross between an Server Include and an HTML Frame. A container is used to allow Pages to be put inside of other Pages. Like an include, it does not actually appear on the viewed page, but delivers its content and disappears. However, unlike an include, Containers can hold as many pages as desired, and are processed at publishing time, which means they are not part of the Page code.

99 Placeholder Types 91 Like a frame, Containers have a target property that allows links to target linked pages to a container for display purposes. Unlike a frame, this functionality is generated at publishing time. Containers are used to generate the skeleton of a site, allowing the smaller content pieces to flow together. Since it can hold many Pages, this is called a MultiLink element. List - This element is used to generate teaser links.

100 Placeholder Types 92 It has two main functions - It generates hyperlinks to however many pages are connected to it. It also can pull content off of those content pages and use that content to format the link. Consider a press release teaser that contains the date, an abstract of the full content, and a link to the full content. Using a list, you can create the link, and pull the desired information off the full content Page to format the teaser. Since a List can connect to as many pages as desired, it is a MultiLink element.

101 Block Mark Types 93 Block Mark Types Objectives Define Block Mark Types This Module is intended to provide you with some reference material on the different types of Block Marks, and does not have an exercise. Certain Block Marks are used as a way of identifying the start and end points of repeating structural components within a Template. Other Block Marks do not specify repeating structures, but indicate or tag areas of code that should have special properties. Repeating-type Block Marks wrap up an area of code that contains certain types of placeholders, and in general, each placeholder that uses Block Marks has a dedicated type. Single Block Marks indicate certain code for particular processing, but do not involve any repeating structures. It is very important to realize the Block Marks do not do the task that the placeholder does, i.e. List Block Marks do not create a link to content and pull in records. Block Marks merely specify the range of certain types of placeholders. The placeholders themselves do the real work. Repeating or Looping Block Marks List - These Block Marks wrap code that represents a single link within a List. When the List connects to pages, the Block Marks specify the begin and end points of the loop that creates the code for each link in the List. The block marks also specify the range that the List uses to search for content to pull in as teaser information. Anything outside the Block Marks does not get pulled in from the content pages. Dynamic - These Block marks are used with Anchors and Containers that have the Dynamic property enabled. Similarly to List Block Marks, they specify the begin and end points of the code used to represent each instance of the dynamic Anchor or Container.

102 Block Mark Types 94 Database Query - These block marks get placed around a group of Database Content elements that represent all the information that should be returned for a single record in a table. When a Page is created, the Block Marks allow the elements to read each record and loop over the code, providing a structure for each record. These Block Marks are also used for Project Content. Hit List - These Block Marks work very similarly to the List Block Marks, only they refer to content that comes from a database. They wrap up code that represents the structure of a link, and allow that code to repeat for each linked record. They are the begin and end loop markers for links to database records. Hit List Block Marks also specify the range of pulled-in teaser information. Breadcrumb - These block marks specify the begin and end points of the repeating link structure used with Breadcrumb functionality. By placing an anchor and a delimiter inside the block marks, the breadcrumb can be generated for however many site levels exist. Single Block Marks Preexecuting Script Block - These Block Marks indicate code that should be run using the Active Template functionality. If the functionality is enabled, the code inside these block marks will be executed when the page is published, and the results inserted instead.

103 Block Mark Types 95 Conditional - These Block Marks check to see if there are any empty placeholders inside them within a Page. If any empty placeholders are found, the code inside the Block Marks is removed. SmartEdit Mode - These Block Marks indicate code that should be displayed only when a project is being displayed in SmartEdit Mode. These Block Marks allow content to be displayed for editors that will not be published, and are frequently used to provide in-line documentation for content creators. SmartEdit Mode Page Closed - These Block Marks indicate code that should be displayed only when a project is being displayed in SmartEdit Mode, and the Page being viewed is closed for editing, meaning the Open Page dot has not yet been clicked. These Block Marks allow content to be displayed for editors that will not be published, and are frequently used to provide in-line documentation for content creators. SmartEdit Mode Page Open - These Block Marks indicate code that should be displayed only when a project is being displayed in SmartEdit Mode, and the Page being viewed is opened for editing, meaning the Open Page dot has been clicked, and all the content dots are visible. These Block Marks allow content to be displayed for editors that will not be published, and are frequently used to provide in-line documentation for content creators. Not in SmartEdit Mode - These Block Marks indicate code that should be displayed only when a project is not being displayed in SmartEdit Mode, meaning the page is either being previewed or published. These Block Marks allow content to be published that is not visible to editors. Create CMS Design Patterns Project Objectives Create a new project A Project is a collection of all the information involved in setting up a web site that will be content managed. This incorporates everything needed to build pages, plus settings, publishing information, Workflows, Authorizations, etc. In general, although information can be shared between Projects, everything that shares a similar look and feel should be in the same project. In order to integrate your site with RedDot CMS, you will need to create a project. This lesson covers the

104 Create CMS Design Patterns Project 96 necessary steps in creating a new CMS project for the CMS Design Patterns Web Site. Create New Project 1. Navigate to the CMS Server Manager by selecting the Main Menu button in the Left Menu and then click Server Manager in the pop-up window.

105 Create CMS Design Patterns Project Expand the Administer Projects node. 3. Select the Projects node. 4. In the Action Menu click Create Project. 5. The Create Project window appears. Set the following values: Field Value Description Test project Unchecked Unchecking this property allows the project to be published. Project name CMS Design Patterns Activate versioning Unchecked You can activate these later through the Action Activate archiving Unchecked Menu in the Server Manager.

106 Create CMS Design Patterns Project 98 RedDot content server [leave default value] The RedDot server is the server where RedDot CMS is installed. Unless the RedDot CMS installation is a server cluster, there will be only one choice here. If there are more, consult the system administrator. Database server [leave default value] The Database server is the server containing the RedDot CMS database, and should be left at the default value. Database name CMS Design Patterns The Database name will automatically become the same as the Project name. Language variant United States (English - ENU) Content Classes checked Checking this value creates a default Content Class type folder called Content Classes. Images unchecked These option boxes refer to folders that will be Files unchecked created in the project database for storing Assets. These folders can be modified, and more can be created in the project interface. Unchecking these values will keep these default folders from being created. ftp://localhost unchecked This will be configured individually for the project. 6. Make sure your window matches the settings below:

107 Create CMS Design Patterns Project Click the OK button to continue. 8. You will see the new project in the tree. Once the project creation screen disappears it may take a few moments for the project to show up in the list. The project listing will not automatically refresh so you may want to wait a minute, then collapse and expand the listing. The project should be visible. If the project has a label next to it saying it is locked, this means it is still being created. Wait another minute, collapse and expand the node again. Connect to New Project 1. In the Left Menu click Homepage. To connect to the project that you just created you need to access the Main Menu. This option is not available in the left-hand menu of the Server Manager so you must switch to a different module of CMS.

108 Create CMS Design Patterns Project In the Left Menu click Main Menu. 3. The Main Menu window appears. Click Projects.

109 Create CMS Design Patterns Project The Project Selection window appears. Click CMS Design Patterns. 5. In the Left Menu click Web Content Manager.

110 Create CMS Design Patterns Project You can confirm that you are working on the CMS Design Patterns Project by looking right above the Smart Tree. Here you will see the name of the actual project that you are working on. Create Asset Manager Folder for Images The images for this project are going to be stored in an Asset Manager type folder. Upon initial creation of the CMS Design Patterns project there was an option to create an Images folder. You did not choose that option because it would have created a File Folder type folder that is not ideal for storing images. 1. Navigate to the Folders node: Expand the Start node Administer Project Settings Project Folders 2. In the Action Menu click Create Folder.

111 Create CMS Design Patterns Project The Create/Edit Folder window appears. Set the following values: Name: Images Type: Asset Manager 4. Click the Next button to continue. 5. The Edit Folder Settings window appears. Click the OK button to continue.

112 Create CMS Design Patterns Project You will see the new folder in the SmartTree. Import Images into Asset Manager 1. Next select the Images folder Start Administer Project Settings Project Folders Images

113 Create CMS Design Patterns Project In the Action Menu click Import Assets. 3. The Import Assets window appears. Set the following values: notification: unchecked Import path: [training files directory]\digital assets\content images\ 4. In the Action Menu click Edit Folder Content. You will see the images in the Asset Manager.

114 Create CMS Design Patterns Project 106 When you import a large number of images it may take a few moments for them all to appear in the Assset Manager. The Asset Manager will not automatically refresh so you may want to close the Asset Manager, wait a minute, then reopen it. Click OK to close the Asset Manager Create Asset Manager Folder for Downloadable Content You will also need to create an Asset Manager folder for downloadable content (PDF files used in a later exercise). In order to do this, follow the steps you performed in creating the Asset Manager folder for your images: 1. Navigate to the Folders node: Expand the Start node Administer Project Settings Project Folders 2. In the Action Menu click Create Folder. 3. The Create/Edit Folder window appears. Set the following values: Name: Download Files Type: Asset Manager 4. Click the Next button to continue. 5. The Edit Folder Settings window appears. Click the OK button to continue. 6. You will see the new folder in the SmartTree.

115 Import Files into Asset Manager Create CMS Design Patterns Project Next select the Download Files folder Start Administer Project Settings Project Folders Files 2. In the Action Menu click Import Assets. 3. The Import Assets window appears. Set the following values: notification: unchecked Import path: [training files directory]\digital assets\download files 4. Click the OK button to continue.

116 Table of Contents Pattern 108 Table of Contents Pattern Objectives Create Content Class to create Table of Contents Pages Create project start page This chapter covers creating a content class that can be used to create "table of contents" Pages. In addition this chapter covers creating an instance of the content class and making the instance the project start Page. You will create a Headline placeholder type for the text at the top of the page. In order to create the hyperlinks displayed in the Table of Contents, you will use an Anchor placeholder. When the Content Class is created, the number of items in a particular table of contents page is unknown, and needs to be determined for each individual instance. By marking the anchor element as being a dynamic element you will allow the author or editor of a page to determine the appropriate number of links in the page. After adding an anchor element to the content class you will mark that element as being a dynamic element. You will use block marks to instruct RedDot CMS exactly what content is dynamic. You will also include a Headline type placeholder within the dynamic blockmarks to the right of the Anchor. This placeholder will pull in the content of the Headline of the connected page.

117 Table of Contents Pattern 109 Create Table of Contents Content Class 1. Navigate to the Administer Content Classes node: Start Administer Content Classes Content Classes 2. In the Action Menu click Create Content Class with Template 3. The Create Content Class with Template window appears. Set the following values: Name: Table of Contents Description: Contains links to the individual exercises and intro text 4. Click the OK button to continue. This will create the Content Class and open the new blank template in the RedDot Template Editor. You can also import an HTML file created in another application such as Dreamweaver as the basis for the template, or use a template exported from an existing Content Class.

118 Table of Contents Pattern The RedDot Template Editor window appears. 6. Launch Internet Explorer. From Favorites > CMS Project Builder, choose 01 RedDot CMS Patterns. 7. Right-click the page and choose View Source from the context menu. Next, go to the Edit menu choose Select All (Ctrl - A) and then Edit >Copy (Ctrl C). 8. Next, paste the code into the Template Editor

119 Table of Contents Pattern Delete the text inside the <title> HTML tag. The title of the page will change for every instance of this Content Class so it should be replaced with a Headline type placeholder. Every Page in CMS is given a Headline at creation time, and this can optionally be used for display purposes. 8. Position the cursor inside the <title> HTML tag. 9. Click the Create Placeholder button. 10. The Edit Element window appears. Set the following values: Element name: head_title Type: Headline Since this is a Headline and it represents the title of the page, call the Placeholder head_title. This is a traditional naming convention, and should help you keep track of the type and function of each Placeholder. 11. Click Next to go to the configuration screen. Creating a Placeholder usually involves two screens. On the first screen, you name and choose the type of the Placeholder. On the second screen, you configure the settings for the Placeholder, based on its type.

120 Table of Contents Pattern The Edit Headline Element window appears. We ll leave the default settings and Click the OK button to continue. There are many options that you can configure here. Some of them will be explained as you progress through the exercises. In addition, you can get detailed information on these options by consulting the RedDot CMS product manuals or clicking the Help button in the configuration screen of any Placeholder. 13. In the Template Editor you will see the new Placeholder inside the <title> HTML tag. The placeholder shows up in the format <%Placeholder%>. You can edit the Placeholder by placing the cursor anywhere inside it and clicking the gray Edit Placeholder button. You can remove the Placeholder from the code by placing the cursor anywhere inside it and clicking the red Delete Placeholder button (although this doesn't actually delete the placeholder permanently. It just deletes it from its location on the page and it will still be available in the dropdown window). You can use the Placeholders drop-down menu to put the Placeholder anywhere in the code.

121 Table of Contents Pattern Delete the text "RedDot CMS Patterns - Table of Contents" in between the <h1> tag. 15. Position the cursor inside the empty <h1> tag. 16. From the Placeholders dropdown list select head_title. If there is content that appears multiple places on your page you can insert the same Placeholder throughout your Template to display that content. Since the Page s headline appears not only in the body of the Page but also in the <title> tag, you will reuse the existing head_title Placeholder. 17. In the Template Editor you will see the head_title placeholder inside the <h1> HTML tag. 18. Delete the text in the <div> tag after the <h1> tag and place your cursor within the <div>. 19. Click the Create Placeholder button. 20. The Edit Element window appears. Set the following values: Element name: text_description Type: Text 21. Click the Next button to continue.

122 Table of Contents Pattern The Edit Text Element window appears. Enter a description and click the OK button to save the Placeholder. 21. Delete all but one of the <li> HTML tags. You will use an Anchor placeholder to create the hyperlinks displayed in a Table of Contents Page. By marking the anchor element a dynamic element you will allow the Author or Editor of a page to determine the appropriate number of links on the page. After adding an Anchor element to the Content Class you will mark that element as being a dynamic element. You will use Block Marks to instruct RedDot CMS exactly what content is repeating so you only need to leave one instance of the repeating HTML code in your template. 22. Use the mouse to select the entire <li> HTML tag.

123 Table of Contents Pattern From the Block Marks dropdown list select Dynamic. For every hyperlink generated, you want to include HTML markup; specifically, an enclosing <li> tag. This looping behavior corresponds to the Web Design pattern generally known as a "repeater". In order to tell CMS where this repeating code begins and ends, you will use Dynamic Block Marks. The Block Marks will also tell CMS where to look for content to be pulled from connected Pages. 24. In the Template Editor you will see block marks around the <li> HTML tag. 25. Delete the anchor HTML tag inside the <li> HTML tag. 26. Now you will create the Anchor placeholder used to generate hyperlinks. Position the cursor where the text you just deleted was. 27. Click the Create Placeholder button.

124 Table of Contents Pattern The Edit Element window appears. Set the following values: Element name: anc_link Type: Anchor 29. Click the Next button to continue. 30. The Edit Anchor Element window appears. Set the following values: Dynamic element: checked Transfer element content of following pages: checked The Dynamic element setting will enable the number of hyperlinks generated by the Anchor placeholder to increase or decrease, at the direction of a project Admin or SmartEdit user. The Transfer element content of following pages setting enables you to pull in and display the contents of a connected Page. In this case, you will be pulling in the content of each connected Page's head_title placeholder, which will appear beside each hyperlink in the Table of Contents Page. 31. Click the OK button to continue. 32. Delete the remaining text inside the <li> HTML tag, leaving only the anc_link Placeholder and the hyphen. 33. Position the cursor where the text you just deleted was. 34. From the Placeholders dropdown list select head_title.

125 Table of Contents Pattern In the Template Editor you will see the head_title placeholder inside the <li> HTML tag. You can reuse the head_title placeholder as shown above because the Dynamic Block Marks hide any placeholders between them from the parent Page. The head_title placeholder within the Block Marks are scoped to Pages connected to the anc_link placeholder. If a connected Page contains a Placeholder with a matching name, the contents of that Placeholder are pulled in to the parent Page. Add SmartEdit Support for Table of Contents In this section you will learn how to create a simple end-user interface by adding RedDot placeholders ( red dots ) to the Table of Contents template. The first RedDot Placeholder you need in any template is the Open Page dot; this is necessary in order to open a page for editing. Any other dots on the page will be hidden until the page is opened. Once the page is opened, the Open Page dot changes into a Close Page dot and is used to close the page and save changes. 1. Position the cursor inside the body tag before the <h1> tag 2. From the RedDot Placeholders dropdown list select Open Page.. 3. Next with the cursor placed after the code you just added,

126 Table of Contents Pattern Select RedDot_head_Title from the RedDot Placeholders dropdown list. 5. Next position your cursor in the <div> tag before the text_description placeholder. 6. Select RedDot_text_Description from the RedDot Placeholders dropdown list. 7. Place the cursor inside the <li> tag as shown below. 8. Select RedDot_anc_Link from the RedDot Placeholder dropdown list.

127 Table of Contents Pattern This is what your Template code should look like: <html> <head> <title><%head_title%></title> </head> <body> <!IoRedDotOpenPage><!IoRedDot_head_Title><h1><%head_Title%></h1> <div> <!IoRedDot_text_Description><%text_Description%> </div> <ul> <!IoRangeDynLink> <li> <!IoRedDot_anc_Link><%anc_Link%> - <%head_title%> </li> <!/IoRangeDynLink> </ul> </body> </html> 10. Click the OK button to save the template. Create Table of Contents Page 1. Navigate to the Project node: Start Administer Project Structure Project 2. In the Action Menu click Create and Connect Page. Only one Page can be connected to the Project node. This page is typically referred to as the Start Page.

128 Table of Contents Pattern The Edit Headline window appears. Enter the following value: RedDot CMS Patterns - Table of Contents 4. Click the OK button to continue. 5. In the SmartTree you will see the newly created Page. Click The page to make sure it is selected. 6. With the RedDot CMS Patterns Table of Contents page selected, click Edit Elements via Form on the Action Menu. 7. Enter the following text in the text _Description area: This project is designed to teach you how to understand and model common design patterns in web sites that are managed by RedDot CMS. Almost all websites incorporate these patterns. By being able to identify these patterns you will be able to build CMS projects in a consistent and reliable manner. This web page is itself, an example of a design pattern named Table of Contents. This pattern is mainly used for project start pages in CMS projects. The pattern displays a series of links, with the link text being customizable and the title of the following page displayed next to the link. 8. Click the OK button to continue.

129 Table of Contents Pattern To view the RedDot CMS Patterns Table of Contents Page in Page Preview mode, click the Page and select Show Page Preview on the Action Menu:

130 Simple Teaser Pattern 122 Simple Teaser Pattern Objectives Work with Content Elements Work with List Elements Understand the content transfer capabilities of List Elements In a similar fashion to the Table of Contents, the Simple Teaser pattern is used to create links as needed, and to pull in content from the linked Pages into the parent Page. In the following exercise, you will use a List Placeholder to accomplish this. Although both the List and Dynamic Anchor Placeholders are used to create links dynamically, there are a few important differences between the two: Unlike a Dynamic Anchor, a List does not need to be "expanded" when adding more links. Any number of Pages may be added to List, and the links to the Pages will be generated automatically. This ease of use can make the List Placeholder a better choice for situations where SmartEdit users need to add, remove, or sort Pages on a regular basis for a given section. As you've seen in the Table of Contents exercise, the link text for an Anchor will default to the Anchor Placeholder's name; each Anchor must be renamed in order to display the appropriate text. In contrast, the default behavior for a List Placeholder is to use a connected Page's Headline as the link text for that Page. Again, this contributes to the List Placeholder s overall ease of use. While expanding a Dynamic Anchor will create a new Anchor element in the SmartTree, adding a Page to a List does not. This means that if individual links need to be configured in the SmartTree, Anchors must be used.

131 Create Simple Teaser Content Class Simple Teaser Pattern Navigate to the Administer Content Classes section. Select Content Classes 2. Click Create Content Class with Template under the Action Menu Enter the following value: Name: Simple Teaser Description: Use to create a page which contains links, pulling in teaser text from connected pages. 3. Click OK 4. On the published site, click the Exercise 1 - Simple Teaser link on the RedDot CMS Patterns - Table of Contents page to navigate to the Simple Teaser page. 5. View and copy the source code from this page. Then paste the code into the Template Editor. 6. Delete the text inside the <title> HTML tag and position the cursor within the tag

132 Simple Teaser Pattern Click the Create Placeholder button. 8. The Edit Element window appears. Set the following values: Element name: head_title Type: Headline 9. Click Next to go to the configuration screen. 9. On the resulting Edit Headline Element screen, enter a description. Leave all other settings at their default values. Click OK to continue. 10. The text in the <h1> tag is the same as the page title text. Replace the text in the <h1> tag with the head_title Placeholder. 11. Delete the text in the <div> tag and leave the cursor within the tag 12. Click the Create Placeholder button

133 Simple Teaser Pattern Set the following values: Element name: text_description Type: Text 14. Click the Next button to continue. 15. On the resulting Edit Headline Element screen, enter a description. Leave all other settings at their default values. 16. Click the OK button to continue. 17. Delete all but one of the <li>...</li> HTML blocks. 18. Delete the <a> tag in the <li> block and click the Create Placeholder button. The Edit Element window appears. Enter the follow values: Element name: list_pages Type: List 19. Click Next.

134 Simple Teaser Pattern On the Edit List Element screen, select the following options Transfer element content of following pages: checked. 21. Click OK to continue. 22. Each link created by the list_pages Placeholder will be followed by a hyphen (padded on either side with a space) and some text pulled from each connected Page. This teaser text will be styled as italic by an enclosing <span> tag. Leave the spaces and hyphen as they are, and preserve the <span> tag as well, removing the text within it. Leave the cursor positioned within the <span>: 23. The content to be pulled in ("transferred") from connected ("following") pages will be represented on those pages by a placeholder named stf_teaser. Here, you will create a new Placeholder with the same name, so that CMS knows what content from following pages you want to transfer to the parent page. Create a new Placeholder and Set the following values: Element name: stf_teaser Type: Standard Field 24. Click Next to continue.

135 Simple Teaser Pattern On the Edit Standard Field Element screen, select the following option: Do not use in form: checked The content of this element will not be controlled by this page but will be pulled from the following page. With this check box selected, you cannot edit the content of this element when using the Edit via Form method. 26. Enter a description and click the OK button to save the stf_teaser element. 27. As was the case with the Dynamic Anchor in the Table of Contents, You must surround the List Placeholder (and any associated Placeholders and markup) with Block Marks. Select the entire <li> tag. 28. From the Block Marks dropdown list select List. 29. Your Template code should appear as shown below:

136 Simple Teaser Pattern 128 Add SmartEdit Support for Simple Teaser Next, you will add RedDots to the Simple Teaser template in order to make a Page of this type editable in SmartEdit mode. The editable content on a Simple Teaser Page consists of the head_title, text_description, and list_pages elements. 1. Position the cursor after the opening <body> tag and select Open Page from the RedDot Placeholders dropdown list. 2. Position the cursor before the h1 HTML tag and select RedDot_head_Title from the RedDot Placeholder dropdown list. 3. Position the cursor before the text_description Placeholder. From the RedDot Placeholders dropdown list, select RedDot_text_Description: 4. Position the cursor after the opening <ul> tag:

137 Simple Teaser Pattern Select RedDot_list_Pages from the RedDot Placeholders dropdown list. 6. Next, add some text describing the purpose of the list_pages Placeholder: <span style="color:red">[add/remove/sort pages]</span> Select the entire span: Next, you are going to wrap the markup you just added in Block Marks which will ensure that the text is only visible in SmartEdit mode, and only when the Page is open for editing. 7. Select SmartEdit Mode Page Open option from the Block Marks dropdown list. 8. Your Template code should appear as shown below: 9. Click the OK button to save the template.

138 Simple Teaser Pattern 130 Create Document With Teaser Content Class You have just created a Content Class (Simple Teaser ) used to create Pages which link to other CMS Pages and pull in teaser text from them. In this exercise, you will create the Content Class (Document with Teaser) used to generate these connected Pages. 1. Navigate to the Administer Content Classes Node and select Content Classes. 2. Click Create Content Class with Template on the Action Menu. 3. The Create Content Class with Template screen comes up. Enter the following: Name: Document with Teaser Description: Contains header, teaser, body text and image 4. Click the OK button to continue (leave the Template Editor window open). 5. On the published site, click the Exercise 1 - Simple Teaser link on the RedDot CMS Patterns - Table of Contents page to navigate to the Simple Teaser page. Then click the New York link to navigate to the New York page. View and copy the source code from this page, then paste the code into the Template Editor. 9. Delete the text inside the <title> tag and position the cursor within the tag. 7. Click the Create Placeholder button.

139 Simple Teaser Pattern The Edit Element window appears. Set the following values: Element name: head_title Type: Headline 9. Click Next. 10. On the Edit Headline Element screen, enter a description, leave other options at their default values, and click OK to save the Headline element. 11. Delete the text in the <h2> tag and leave your cursor in the tag. 12. From the Placeholders dropdown list, select head_title. 13. Delete the text in the first <div> tag and leave the cursor within the tag. 14. Click the Create Placeholder button and set the following values: Element name: stf_teaser Type: Standard Field 15. Click the Next button to continue. 16. The Edit Standard Field Element screen comes up. Enter a description, leaving all other options at their default values. 17. Click the OK button to save the Standard Field element.

140 Simple Teaser Pattern Delete the text in the second <div> tag: 19. Click the Create Placeholder button. 20. On the Edit Element window, set the following values: Element name: text_description Type: Text 21. Click the Next button. 22. On the Edit Text Element window, enter a description. Leave all other options at their default values. 23. Click the OK button to save the Text element. 24. Delete the whole <img> tag bearing in mind that an image of width not exceeding 400px needs to be created. CMS will create the whole image tag. 25. Click the Create New Placeholder button and set the following values: Element name: img_main Type: Image 26. Click the Next button to continue.

141 Simple Teaser Pattern On the Edit Image Element screen, set the following values: Use the following scaling and conversion settings: selected Image width: Automatic maximum scaling: 400 When scaling an image in this way, CMS scales the original image down according to the longest dimension of the image (preserving the image s aspect ratio), generates a new image file with the proper dimensions and publishes that file out wherever the relevant Image Placeholder appears in the template. The new filename will consist of the original filename with the new dimensions and the rdax string appended (eg myimage.jpg myimage_rdax_400x300.jpg ). 26. Scroll down to the HTML Properties of the Edit Image Element window and set the following values: Width: Automatically insert in page: checked Height: Automatically insert in page: checked Border: 1 Folder: Images

142 Simple Teaser Pattern 134 When an Image type placeholder is inserted in the template CMS generates an <img> tag with only the src attribute (<img src= image.gif >). To insert the width and height attributes without specifying an exact value (inserting values into the form) you need to check the value Automatically insert in page and CMS will insert the values for you. Inserting the value of 1 for the border will insure that the border attribute will be included in the <img> tag and its value will be 1. Specifying the Images folder will direct Editors and Authors to that Asset Manager folder when they go to insert an image. 27. Click the OK button to continue. 28. Your Template code should appear as shown below: Add SmartEdit Support for Document with Teaser 1. Position the cursor after the opening <body> tag and select Open Page from the RedDot Placeholders dropdown list. The resulting Template code is shown below: 2. Position the cursor within the <h2> tag and select RedDot_head_Title from the RedDot Placeholders dropdown list. The resulting Template code is shown below: 3. Position the cursor inside of the first <div> tag and to the left of the stf_teaser Placeholder. Select RedDot_stf_Teaser from the RedDot Placeholders dropdown list. The resulting Template code is shown below:

143 Simple Teaser Pattern Place the cursor before the text_description Placeholder. Select RedDot_text_Description from the RedDot Placeholders dropdown list. The resulting Template code is shown below: 5. Place the cursor before the img_main Placeholder. Select RedDot_img_Main from the RedDot Placeholders dropdown list. The resulting Template code is shown below: 6. Your completed Template code should appear as shown below: 7. Click the OK button to save the template. Create Simple Teaser Page 1. Navigate to the RedDot CMS Patterns Table of Contents page Start Administer Project Structure Project RedDot CMS Patterns - Table of Contents 2. Select the anc_link Element.

144 Simple Teaser Pattern On the Action Menu, click Edit Link Properties. 4. In the Edit Link Properties window, set the following value: Link name: Exercise 1 5. Click OK to save the change. 6. With the Exercise 1 Element still selected, click Create and Connect Page on the Action Menu. 7. Click on Simple Teaser from the List of Content Classes. 8. On the Edit Headline screen, enter the headline of the Simple Teaser page. Simple Teaser 9. Click the OK button to continue.

145 Simple Teaser Pattern The Simple Teaser Page appears in the SmartTree. 11. With the Simple Teaser Page still selected, Click on Edit Elements via Form on the Action Menu 12. The Edit Elements via Form screen appears. Enter the following text in the text_description area: The simple teaser pattern is used when you want to link to a detail page but display text values from the detail page in the calling page. In this example the link text is the headline of the following page. Following the link is the teaser text from the detail page. 13. Click the OK button to continue.

146 Create Document With Teaser Pages Simple Teaser Pattern Select the list_pages Element in the SmartTree. 2. Click the Create and Connect Page link on the Action Menu. 3. Click on Document with Teaser from the List of Content Classes. 4. In the Edit Headline window, type New York in the Enter the headline: field. This will be the Headline for the new Page created. 5. Click the OK button to continue. 6. The New York Page appears below the list_pages Element in the SmartTree.

147 Simple Teaser Pattern Click the New York Page and select Edit Elements via Form on the Action Menu. 8. Set the following information for the New York Page. Headline: New York. You need to select an image for the img_main Element. To select an image, click the Pencil icon: 9. On the Media Asset Management window, locate the nyc.jpg file. Clicking on a thumbnail opens a popup window to preview the image; you must click the name beneath a thumbnail to select the image for use. Information about the image file appears on the right side of the window. Select the nyc.jpg text below the appropriate thumbnail.

148 Simple Teaser Pattern 140 Information for this image file is shown on the right side of the window: 10. Click the OK button to continue. 11. You are returned to the Edit Elements via Form window. Enter the following values: stf_teaser: With over 8 million people, New York City is the largest city in the United States. text_description: At New York, we think we know how to leverage virally. Think super-visionary. Without bloatware, you will lack accounting. Is it more important for something to be B2C or to be fractal? What does the term "R&D" really mean? If you reinvent intra-cyber-perfectly, you may have to brand microholistically. Our technology takes the best aspects of XSL and SMIL. Quick: do you have a dot-com strategy for handling unplanned-for relationships? We constantly exploit killer, long-term CAD. That is a remarkable achievement when you consider the current and previous fiscal year's financial state of things! Without biometrics, you will lack CAE. The metrics for accounting are more wellunderstood if they are not clicks-and-mortar. At New York, we believe we know how to matrix cyber-efficiently. We think we know that if you target efficiently then you may also synergize intuitively. Your budget for generating should be at least one-tenth of your budget for targeting. We believe we know that it is better to incentivize intracompellingly than to transform extensibly. The capability to monetize wirelessly leads to the aptitude to synergize globally. What does the commonly-used buzzword "eyeballs" really mean? What do we unleash? Anything and everything, regardless of anonymity! Your budget for e- enabling should be at least one-third of your budget for reinventing. Without adequate functionalities, co-branded user interfaces are forced to become innovative. We have come to know that if you utilize dynamically then you may also transition intuitively. Your budget for monetizing should be at least twice your budget for maximizing.

149 Simple Teaser Pattern Click the OK button to save your changes to the New York Page and continue. 13. To connect another city page, Toronto, we will follow the previous steps 1 through 9 that we used to create the New York Page. Select the list_pages Element in the SmartTree. 14. Click the Create and Connect Page link on the Action Menu. 15. From the List of Content Classes screen, click on Document with Teaser. 16. In the Edit Headline screen, enter the following value:

150 Simple Teaser Pattern The Toronto Page is added under list_pages. Select the Toronto Page. 18. On the Action Menu, click on Edit Elements via Form. 19. The Edit Elements via Form window appears. Set the following values: img_main: Toronto.jpg stf_teaser: Toronto is the economic capital of Canada. text_description: At Toronto, we realize how to grow holistically. Our technology takes the best features of Dynamic HTML and XML. We have come to know that if you synthesize strategically then you may also maximize proactively. Imagine a combination of XHTML and Perl. What do we enable? Anything and everything, regardless of reconditeness! We pride ourselves not only on our blog-based feature set, but our newbie-proof administration and easy operation. Think proactive. Think opensource. Think integrated. But don't think all three at the same time. The power to harness intuitively leads to the capacity to mesh holistically. We realize that it is better to streamline strategically than to syndicate extensibly. If all of this may seem misleading to you, that's because it is! At Toronto, we understand how to mesh globally. We will multiply our aptitude to orchestrate without devaluing our capability to synergize. It seems dumbfounding, but it's accurate! We have come to know that it is better to reinvent transparently than to generate proactively. Imagine a combination of PGP and XSLT. The paradigms factor can be summed up in one word: world-class. The power to reinvent intuitively leads to the power to e-enable intuitively. We think that most bricks-and-clicks entry pages use far too much ActionScript, and not enough Unix. We pride ourselves not only on our feature set, but our user-proof administration and newbie-proof configuration. If all of this seems amazing to you, that's because it is! Imagine a combination of XSL and J2EE. 20. Click the OK button save your changes to the Toronto Page and continue. 21. To add the third city to the list, we will again repeat the previous steps. Select the list_pages Element in the SmartTree.

151 Simple Teaser Pattern Click on Create and Connect Page on the Action Menu. 23. Select the Content Class Document with Teaser from the List of Content Classes. 24. Enter the following value in the Edit Headline window: Mexico City 25. The Mexico City Page appears under list_pages. Select the Mexico City Page. 26. On the Action Menu click on Edit Elements via Form. 27. The Edit Elements via Form window appears. Set the following values: img_main: mexico-city.jpg stf_teaser: Founded by the Aztecs in 1325, Mexico City is the oldest continually settled city in the western hemisphere. text_description: Mexico City has refactored the idea of user communities. Imagine a combination of RDF and CSS. The supply-chains factor is killer. A company that can maximize fiercely will (someday) be able to brand correctly. We have come to know that it is better to target proactively than to drive virtually. We believe we know that it is better to innovate intuitively than to maximize seamlessly. We apply the proverb "Never look a gift horse in the mouth" not only to our user communities but our ability to iterate. A company that can innovate correctly will (at some point in the future) be able to extend defiantly. What does the commonly-accepted buzzword "sticky" really mean? We usually exploit one-to-one project management. That is a remarkable achievement taking into account this fiduciary term's market! Think B2C2B. Have you ever wanted to drive your world-class feature set? Instantly? What do we embrace? Anything and everything, regardless of obscureness! Think holistic. We always morph web-enabled reporting. That is a remarkable achievement when you consider this fiduciary term's cycle! Our feature set is unparalleled in the industry, but our 1000/60/60/24/7/365 affiliate-based, one-to-one customer-directed, synergistic implementation management and user-proof use is often considered a terrific achievement. We will enhance the ability of models to brand. Without meticulouslyplanned returns-on-investment, real-world co-branded bandwidth are forced to become bricks-andclicks. Our technology takes the best features of XForms and XMLHttpRequest. We usually envisioneer dot-com sticky power shifts. That is an amazing achievement when you consider today's conditions! Without meticulously-planned media sourcing, synergies are forced to become interactive. Without appropriate angel investors, power shifts are forced to become clicks-andmortar. We constantly empower six-sigma virtual, 24/7 infrastructures. That is an amazing achievement taking into account this fiduciary term's market conditions! Click the OK button to continue.

152 Simple Teaser Pattern It is considered a Best Practice to rename important Structural Elements in order to make the SmartTree easier to navigate. Right now the List Element containing your city pages is named list_pages. To rename the Element, first click the list_pages node. 29. Click on Edit Link Properties on the Action Menu. 30. In the Edit Link Properties window, Set the following value: Link name: List of Cities 31. Click the OK button to continue. 32. By default, a List Element will arrange connected Pages in Last in, First Out order. To rearrange the order of the city pages, select the List of Cities Element: 33. Click the Edit Page Order link on the Action Menu.

153 Simple Teaser Pattern To change a Page s order in a List, select the Page and use the arrows on the left to move the Page up or down. Change the order of the Pages to the following: New York Toronto Mexico City 35. Click the OK button to continue. 36. To preview the Simple Teaser page, click the Simple Teaser Page in the SmartTree. 37. On the Action Menu, click the Show Page Preview link. Preview the Simple Teaser Page. Verify that each of the links leads to a city page and pulls in the teaser text from each page.

154 Complex Teaser Pattern 146 Complex Teaser Pattern Objectives Connect to pages using the List Placeholder Connect to pages in the Clipboard Reuse content from existing Pages and control the presentation of the content The purpose of this exercise is to expand upon the concepts in the previous lesson. In the previous lesson we were able to use information on following pages to create teaser text on the home page. In this exercise we will not only grab the text information on the following pages, we will also grab the images from their corresponding pages and scale them down to create a thumbnail preview of the actual images. The complex teaser pattern is similar to the simple teaser pattern. Both are used when you want to link to a detail page but display values from the detail page in the calling page. The complex teaser pattern is different because it displays more content from the detail page, and uses a different presentation for the content. Create Complex Teaser Content Class 1. Navigate to the Content Classes folder. Start Administer Content Classes Content Classes 2. On the Action Menu, click the Create Content Class with Template link.

155 Complex Teaser Pattern In the Create Content Class with Template window, enter the following values: Name: Complex Teaser Description: Use to create a Page of links which pull in teaser text and images. 4. The Template Editor window appears. Leave it open. 5. On the published site, click the Exercise 2 - Complex Teaser link on the RedDot CMS Patterns Table of Contents page. View and copy the source code from the Complex Teaser page and paste it into the Template Editor. 6. Delete the text within the <title> tag and leave your cursor in the tag. 7. Click the Create Placeholder button. 8. The Edit Element window comes up, Set the following values: Element name: head_title Type: Headline 9. Click the Next button to continue. 10. In the Edit Headline Element window, enter a description, leaving all other options at their default values, and click the OK button to continue. 11. Delete the text within the <h1> tag. Placing the cursor in the tag, select head_title from the Placeholders dropdown list. 12. Delete the text in the <div> tag following the head_title Placeholder and leave the cursor inside it. 13. Click the Create Placeholder button. 14. In the Edit Element window, set the following values: Element name: text_description Type: Text 15. On the Edit Text Element screen, enter a description, leaving all other options at their default values, and click the OK button to continue.

156 Complex Teaser Pattern There are three <div> tags between comment tags <!-- START TEASER BLOCK --> and <!-- END TEASER BLOCK --> Delete two of the <div> tags leaving just one. 17. Highlight the entire <div>: 18. From the Block Marks dropdown list, select List. The <div> is now enclosed within List Block Marks: 19. In the <div> tag delete the entire <img> tag. 20. Leave the cursor where the text was just deleted and click the Create Placeholder button. 21. In the Edit Element window, enter the following values: Element name: img_main Type: Image 22. Click the Next button to continue. 23. On the Edit Image Element screen, set the following value: Do not use in form: checked 24. Under the Scaling and Conversion section, enter the following settings: Use the following scaling and conversion settings: selected Image width: Automatic maximum scaling: Under the SmartEdit Properties, enter a Description.

157 Complex Teaser Pattern Under the HTML Properties section set the following values: Width: Automatically insert in page: checked Height: Automatically insert in page: checked Border: 1 Folder: Images 27. Click the OK button to save and continue. 28. Delete the whole <a> tag following the Image Placeholder and leave the cursor where the tag was deleted. 29. Click the Create Placeholder button. 30. In the Edit Element window, set the following values: Element name: list_pages Type: List 31. Click the Next button to continue.

158 Complex Teaser Pattern In the Edit List Element window, set the following values: Transfer element content of the following pages: checked 33. Click the OK button to save and continue. 34. Delete the line of text after the <br /> tag and leave the cursor there. 35. Click the Create Placeholder button. 36. In the Edit Element window, set the following values: Element name: stf_teaser Type: Standard Field 37. Click the Next button to continue. 38. In the Edit Standard Field Element window, set the following options: 39. Enter a Description. 40. Click the OK button to continue. 41. Your Template code should appear as shown below:

159 Complex Teaser Pattern 151 Add SmartEdit Support for Complex Teaser 1. Position the cursor after the opening <body> tag. 2. From the RedDot Placeholders dropdown list, select the Open Page Placeholder. 3. Position your cursor after the opening <h1> tag and select RedDot_head_Title from the RedDot Placeholders dropdown list. 4. Place the cursor before the text_description Placeholder inside of the <div> tag and select RedDot_text_Description from the RedDot Placeholders dropdown list 5. Position your cursor right after the closing </div> tag and insert RedDot_List_Pages from the RedDot Placeholder dropdown list. 6. After the RedDot Placeholder you just added create a span tag to describe the function for this particular RedDot. Also include a <br /> tag in front to separate the RedDot from the teaser text. <br><span style= color:red >[add/remove/sort pages]</span> 7. Next, you need to tell CMS to display the markup you just inserted only when the Page is open in SmartEdit mode. Highlight the entire br and span tag. From the Block Marks dropdown list, choose SmartEdit Mode Page Open. 8. The relevant portion of your Template code should appear as shown below: 9. Click the OK button to save the template.

160 Complex Teaser Pattern 152 Create Complex Teaser Page 1. In the SmartTree, navigate to the Exercise 1 Link. Start Administer Project Structure Project RedDot CMS Patterns Table of Contents Exercise 1 2. Exercise 1 is a Dynamic Link and can be expanded. Click on Exercise 1 to select it. On the Action Menu, click on Expand Dynamic Link 3. In the Expand Dynamic Link window, set the following values: Add dynamic link(s): 1 New link name: Exercise 2 4. Click the OK button to continue. 5. With the Exercise 2 Link select, click Create and Connect Page on the Action Menu. 6. In the List of Content Classes window, click Complex Teaser. 7. On the Edit Headline screen, set the Headline as follows: Complex Teaser

161 Complex Teaser Pattern A new Complex Teaser Page is created under the Exercise 2 link. 9. To fill in the text on the Complex Teaser Page, select the Complex Teaser Page in the SmartTree. 10. On the Action Menu, click Edit Elements via Form 11. The Edit Elements via Form window appears. Set the following values: text_description: The complex teaser pattern is similar to the simple teaser pattern. Both are used when you want to link to a detail page but display values from the detail page in the calling page. The complex teaser pattern is different because it displays more complex value (such as images) from the detail page. 12. Click the OK button to continue. Connect Document With Teaser Pages The Complex Teaser Page will have 3 Document with Teaser Pages linked to it. These Pages were already created in Exercise 1. You can place these Pages in the Clipboard and connect them to the list_pages Element on the new Complex Teaser Page you just created. This is one method which CMS provides for reusing existing content in multiple places. 1. Expand the Exercise 1 Link in the SmartTree. 2. Expand the List of Cities Element. 3. Double click each Page under the List of Cities Element to send them to the Clipboard. 4. Go to the Clipboard area and check New York, Toronto and Mexico City

162 Complex Teaser Pattern Select the list_pages Element on the Complex Teaser Page: 6. On the Action Menu, click Connect to Pages in Clipboard. 7. The three pages appear under the list_pages Element. 8. To put the Pages in the right order, select the list_pages Element. 9. Click on Edit Page Order in the Action Menu. 10. Arrange the Pages in the following order: New York Toronto Mexico City 11. To view the Complex Teaser Page in Page Preview mode, select the Complex Teaser Page in the SmartTree and click the Page Preview link on the Action Menu.

163 Page Organizer Pattern 155 Page Organizer Pattern Objectives Introduction to the Foundation Page concept Work with Containers Use Page Definitions The Page Organizer pattern is used when blocks of content need to be reused in a website. The ad block in on the right side of this example demonstrates this requirement. A CMS author should be able to add, remove and sort the ad blocks. Once an ad block has been created it can be reused throughout the website. By creating these ad blocks as separate CMS pages, it becomes easy to reuse the ads wherever they are needed. This exercise also introduces the Foundation pattern. This pattern consists of two components: Foundation and Leaf. A Foundation Page describes the different sections of a web page (in this example there is a content area and an advertisement area). A Leaf page is one which popupates the sections. Finally, this exercise covers Page Definitions. Without Page Definitions building projects using Foundation pages is a very tedious and manual process. As you are becoming more familiar with CMS, these exercises will contain fewer screenshots when not introducing new concepts or features. You can always go back and review the processes covered in the previous exercises if you need to.

164 Create Page Organizer Content Class Page Organizer Pattern Navigate to the Content Classes Folder in the SmartTree: Start Administer Content Classes Content Classes 2. Click the Create Content Class with Template link on the Action Menu. 3. The Create Content Class with Template Window appears. Set the following values: Name: Page Organizer Description: Contains header, descriptive text, body container and right side containers. 4. Click the OK button 5. The Template Editor window appears. Leave it open. 6. On the published site, click the Exercise 3 Page Organizer link on the RedDot CMS Patterns Table of Contents page. View and copy the source code from the Page Organizer page and paste it into the Template Editor. 7. Delete the text in the <title> tag and leave the cursor in it. 8. Click the Create Placeholder button. 9. In the Edit Element screen, set the following values: Element Name: head_title Type: Headline 10. Click the Next button to continue. 11. Enter a description, leave all other options at their default values and click the OK button. 12. In the <body> area, delete the text in the <h1> tag and leave the cursor in the tag. 13. Select the head_title Placeholder from the Placeholders dropdown list. This shows up in within the <h1> tag. 14. Delete the text in the following <div> tag and leave the cursor within the tag. 15. Click the Create Placeholder button. 16. In the Edit Element window, set the following values: Element name: text_description Type: Text 17. Click the Next button to continue. 18. Enter a description, leave all other options at their default values and click the OK button.

165 Page Organizer Pattern Next, locate the <div> tag with id= contentarea and delete all the code within this <div>.take note of the HTML comments to help you out. 20. Leave the cursor within the <div> tag and Click the Create Placeholder button. 21. In the Edit Element screen, set the following values: Element name: con_contentarea Type: Container 22. Click the Next button to continue. 23. In the Edit Container Element screen, leave all other options at their default values and click the OK button. 24. Locate the <div> tag with id= adarea and delete the code within the tag: 25. Position the cursor within the tag and click the Create Placeholder button. 26. In the Edit Element window, set the following values: Element name: con_adarea Type: Container 27. Click the Next button to continue In the Edit Container Element screen, leave all other options at their default values and click the OK button.

166 Page Organizer Pattern 158 Add SmartEdit Support for Page Organizer 1. Position the cursor after the opening <body> tag. 2. From the RedDot Placeholders dropdown list, select Open Page. 3. Add a descriptive span tag to tell SmartEdit users to click the Red Dot to edit the Page. Position the cursor right after the <!IoRedDotOpenPage> RedDot Placeholder and type in the following code: <span style= color:red >[click to edit foundation]</span> 4. Highlight the entire <span> tag you just added. 5. From the Block Marks dropdown list, select SmartEdit Mode Page Closed. This ensures that the descriptive text is only displayed in SmartEdit mode when the Page is closed. 6. Go to the next line and add a descriptive span tag to tell the editor to click to save changes made to the Page. Type in the following code: <span style= color:red >[click to save changes]</span> 7. Highlight the entire <span> tag you just added. 8. From the Block Marks dropdown list, select SmartEdit Mode Page Open. This ensures that the descriptive text is only displayed in SmartEdit mode when the Page is open for editing. 9. Position the cursor before the opening <h1> tag. 10. Select RedDot_head_Title from the RedDot Placeholders dropdown list. 11. Position the cursor in the <div> tag before the text_description Placeholder. 12. Select RedDot_text_Description from the RedDot Placeholders dropdown list. 13. Place the cursor in the <div> tag with id=adarea. 14. Select RedDot_con_AdArea from the RedDot Placeholders dropdown list.

167 Page Organizer Pattern Add a span tag containing some descriptive text about the function of the Red Dot you just added. <span style= color:red >[add/remove/sort pages]</span> 16. Highlight the entire <span> tag you just added. 17. From the Block Marks dropdown list, select SmartEdit Mode Page Open. This ensures that the text is only displayed in SmartEdit when the Page is open for editing. 18. Click the OK button to save the template. Create Ad Block With List Content Class Next, you will create the Content Class for the part of the Page that contains the bulleted list with links to some helpful Web sites. As you can see there is a Headline, some text, and a series of links (which you will use a List Element to create). This exercise will demonstrate the capability of the List Element to create links to external URLs in addition to CMS Pages. 1. Navigate to the Content Classes folder and select it. Start Administer Content Classes Content Classes 2. In the Action Menu, click Create Content Class with Template.

168 Page Organizer Pattern In the Create Content Class with Template window, set the following value: Name: Ad Block with List Description: headline, description text and list 4. Click the OK button to continue. 5. The Template Editor window comes up. Leave it open. 6. On the published site, click the Exercise 3 Page Organizer link on the RedDot CMS Patterns Table of Contents page. View the source code for the Page Organizer page and copy the code from <!--START AD BLOCK WITH LIST --> to <!--END AD BLOCK WITH LIST -->. Paste this copied code into the Template Editor. 7. Delete the text in the <h4> tag. 8. Click the Create Placeholder button. 9. In the Edit Element window set the following values: Element name: head_title Type: Headline 10. Click the Next button to continue. 11. In the Edit Headline Element window, enter a description, leave all other options at their default values, and click the OK button to continue. 12. Next delete the text within the <div> tag and leave your cursor inside the tag. 13. Click the Create Placeholder button. 14. Set the following values in the Edit Element window: Element name: text_description Type: Text 15. Click the Next button to continue. 16. In the Edit Text Element window, enter a description, leave all other options at their default values, and click the OK button to continue. 17. Delete all but the first of the <li> tags. 18. Delete the <a> tag within the <li> tag as well. Place the cursor inside the <li> tag. 19. Click the Create Placeholder button. 20. In the Edit Element window, set the following values: Element name: list_pages Type: List 21. Click the Next button to continue.

169 Page Organizer Pattern In the Edit List Element window, leave all other options at their default values, and click the OK button to continue. 23. Select the entire <li> tag. 24. From the Block Marks dropdown list, select List. The <li> tag is now enclosed in List Block Marks: Add SmartEdit Support for Ad Block With List 1. Position the cursor before the <h4> tag. 2. From the RedDot Placeholders dropdown list, select Open page. 3. With the cursor still at the same position, select RedDot_head_Title from the RedDot Placeholders dropdown list. 4. In the <div> tag, position the cursor before the text_description Placeholder. 5. Select RedDot_text_Description from the RedDot Placeholders dropdown list. 6. Place the cursor after the opening <ul> tag. 7. From the RedDot Placeholders dropdown list select RedDot_list_Pages. 8. Leave the cursor after the RedDot Placeholder you just added and create a span containing some descriptive text regarding the new Red Dot: <span style= color:red >[add/remove/sort links]</span> 9. Highlight the entire <span> tag. 10. Select SmartEdit Mode Page Open from the Block Marks dropdown list. 11. Your finished Template code should appear as shown below: 12. Click the OK button to save the Template.

170 Page Organizer Pattern 162 Create Ad Block With Image Content Class Next, you will create the Content Class for the section of the page below the section you just created with the links. As you can see the section is similar to the Content Class previously created but contains an image rather than a series of links. 1. Navigate to the Content Classes folder and select it. Start Administer Content Classes Content Classes 2. In the Action Menu, click Create Content Class with Template. 3. In the Create Content Class with Template window, set the following values: Name: Ad Block with Image Description: headline, description text and image 4. Click the OK button to continue. 5. The Template Editor window comes up. Leave it open. 25. On the published site, click the Exercise 3 Page Organizer link on the RedDot CMS Patterns Table of Contents page. View the source code for the Page Organizer page and copy the code from <!--START AD BLOCK WITH IMAGE --> to <!--END AD BLOCK WITH IMAGE -->. Paste this copied code into the Template Editor. 6. Delete the text in the <h4> tag. 7. Click the Create Placeholder button.

171 Page Organizer Pattern In the Edit Element window set the following values: Element name: head_title Type: Headline 9. Click the Next button to continue. 10. In the Edit Headline Element window, enter a description, leave all other options at their default values and click the OK button to continue. 11. Delete the text in the <div> tag. 12. Click the Create Placeholder button. 13. Set the following values in the Edit Element window: Element name: text_description Type: Text 14. Click the Next button to continue. 15. In the Edit Text Element window, enter a description, leave all other options at their default values and click the OK button to continue. 16. Delete the entire <img> tag and leave the cursor in the enclosing <div> tag. 17. Click the Create Placeholder button 18. In the Edit Element window, set the following values: Element name: img_main Type: Image 19. Click the Next button to continue. 20. On the Edit Image Element window, set the following values: Use the following scaling and conversion settings: selected Image width: Automatic maximum scaling: 180 Folder: Images 21. Enter a Description. 22. Click the OK button to continue.

172 Page Organizer Pattern 164 Add SmartEdit Support for Ad Block With Image 1. Position the cursor before the <h4> tag. 2. From the RedDot Placeholders dropdown list, select Open page. 3. With the cursor still at the same position, select RedDot_head_Title from the RedDot Placeholders dropdown list. 4. In the <div> tag, position the cursor before the text_description Placeholder. 5. Select RedDot_text_Description from the RedDot Placeholders dropdown list. 6. Place the cursor in the <div> tag that contains the img_main Placeholder. 7. From the RedDot Placeholders dropdown list select RedDot_img_Main. 8. Your completed Template code should appear as shown below: 9. Click the OK button to save the template. Create Page Definition for Page Organizer Page Definitions allow you to pre-populate structural elements (Anchors, Lists, Containers) on a Page at creation time. In this exercise, you will create a Page Definition that pre-populates the con_contentarea of a Page Organizer Page with a Document with Teaser Page. 1. Navigate to the Page Organizer Content Class Start Administer Content Classes Content Classes Page Organizer 2. Expand the Page Organizer node.

173 Page Organizer Pattern Select Page Definitions. 4. In the Action Menu, click the Create Page Definition link. 5. In the Create Page Definition window, enter the following value: Name: Page Organizer and Document with Teaser 6. Click the Next button to continue. 7. The Edit Page Definition window appears. Expand the Content Classes node in the right column. 8. Drag the Document with Teaser content class from the right column to the left column and drop it on the con_contentarea in the left Column. This pre-populates the con_contentarea with the Document with Teaser content class. 9. In the Page definition column, right click the newly created page definition. Select Edit headline to rename it.

174 Page Organizer Pattern In the Edit Headline window, set the following value: Headline: CHANGE HEADLINE Click OK to save the change. The new default Headline is displayed within the Page Definition: 11. Click the OK button to save the Page Definition and continue. Preassign Content Classes for Ad Block Preassigning Content Classes allows you to specify the Content Classes which may be connected to a given Structural Element. The con_adarea Container in the Page Organizer Content Class has two Content Classes created specifically for it. The Container will have those two Content Classes preassigned to it making it impossible to connect Pages of any other type to the con_adblock. 1. Navigate to the Structural Elements node in the Page Organizer Content Class: Start Administer Content Classes Content Classes Page Organizer Structural Elements 2. Expand the Structural Elements node. 3. Select con_adarea. 4. On the Action Menu, click Preassign Content Classes. 5. The Preassign Content Classes window opens with a list of all the Content Classes created in the project. Check the following Content Classes: Ad Block with Image Ad Block with List 6. Click the OK button to continue.

175 Page Organizer Pattern 167 Create Page Organizer Page 1. Navigate to the Exercise 2 Link in the SmartTree: Start Administer Project Structure Project RedDot CMS Patterns Table of Contents Exercise 2 2. On the Action Menu, click Expand Dynamic Link 3. In the Expand Dynamic Link window, set the following values: Add dynamic link(s): 4 New link name: Exercise 4. Click the OK button to continue. 5. Four additional Links are added with the name Exercise. Select the first of the new Links and click Edit Link Properties in the Action Menu. 6. In the Edit Link Properties window set the following values: Link name: Exercise 3 7. Click the OK button to continue. 8. With Exercise 3 link still selected, click Create and Connect Page on the Action Menu. 9. The List of Content Classes window appears. Click the Page Organizer and Document with Teaser Page Definition. 10. In the Edit Headline window, enter the following value: Enter the Headline: Page Organizer 11. Click the OK button to continue. 12. In the SmartTree, select the Page Organizer Page. 13. Click on Edit Elements via Form on the Action Menu.

176 Page Organizer Pattern In the Edit Elements via Form window set the following values: text_description: The page organizer pattern is used when blocks of content need to be reused in a website. The ad block in on the right side of this example demonstrates this requirement. A CMS author should be able to add, remove and sort the ad blocks. Once an ad block has been created it can be reused throughout the website. By creating these ad blocks as separate CMS pages, it becomes easy to reuse the ads wherever they are needed. This exercise also introduces the foundation pattern. This pattern consists of two components: foundation and leaf. A foundation page describes the different sections of a web page (in this example there is a content area and an advertisement area). The leaf page is the name given to the page that popupates the sections. Finally, this exercise covers page definitions. Without page definitions building projects using foundation pages is a very tedious and manual process. 15. Click the OK button to continue. 16. Select and expand the con_contentarea Container Element. 17. Select the Page within this Container: 18. On the Action Menu, click Edit Elements via Form 19. In the Edit Elements via Form window, set the following values: text_description: Due to the cost effective critical paths and fiscal dialogue, what has changed is the pace of change. Leading indicators would seem to suggest that web sites have possibilities for future technical advances. It is fiscally true that the binary-compatible bleeding edge touches base on the paradigms. We are ahead of the the standards in protocols power curve. We're going forward on the error-free gating factor. A corporation can hardly help but to establish an action item for the constraints, which goes to show that the Internet service provider (in a manner unique to our company) negotiates committees. On a company-wide basis, the implementation enhances the marketing protocols. 20. Click the OK button to continue. Create Pages for Ad Block 1. Select con_adarea on the Page Organizer Page. 2. On the Action Menu, click on Create and Connect Page. 3. The List of Content Classes window opens and only the two pre-assigned Content Classes are available. Select Ad Block with List. 4. In the Edit Headline window, set the following value: Enter the headline: Interesting Websites

177 Page Organizer Pattern Click the OK button to continue. 6. Click the Interesting Websites page and select Edit Elements via Form on the Action Menu. 7. In the Edit Elements via Form window, set the following values: Text_Description: This ad block demonstrates how to allow a CMS author to create links to external sites. 8. Click the OK button to continue. 9. Click the list_pages Element on the Interesting Websites page 10. On the Action Menu select Add URL. 11. In the Add URL window set the following values: Link name: RedDot URL: Target: _blank 12. Click the OK button to continue.

178 Page Organizer Pattern With the Page Organizer Page selected, click the SmartEdit Button on the Left Menu to add more links in SmartEdit mode. 14. The OpenPage RedDot signifies that the page is currently closed and not ready for editing. Click the OpenPage RedDot on the Interesting Websites Page. This opens the Page for editing. 15. Click the MultiLink RedDot next to [add/remove/sort links] to add more links.

179 Page Organizer Pattern On the Edit Link Element window opens, click Add URL. 17. In the Add URL window, set the following values: Link name: RedDot Community. URL: Target: _blank 18. Click the OK button to continue. 19. To add one more link you will repeat the previous steps. Click the MultiLink RedDot next to [add/remove/sort links]: 20. The Edit Link Element Window opens, click Add URL. 21. In the Add URL window, set the following values: Link name: Open Text URL: Target: _blank 22. Click the OK button to continue. 23. To sort the links in the right order, click the Multilink RedDot next to [add/remove/sort links]. 24. In the Edit Link Element window, click Edit Page Order. 25. On the Edit Page Order window, sort the links in the following order: RedDot RedDot Community Open Text 26. Click the OK button to continue.

180 Page Organizer Pattern To add more pages to the Ad Block column, click the OpenPage RedDot at the upper left corner of the Page Organizer Page: 28. On the Ad Block column, click the MultiLink RedDot next to [add/remove/sort pages]. 29. In the Edit Link Element window, click Create and Connect Page. From the List of Content Classes select Ad Block with Image. 30. In the Edit Headline window, enter the following value: Enter the headline: New Products 31. Click the OK button to continue. 32. On the Top Menu, click the Actions link. 33. On the Page Actions screen, click Edit Elements via Form. 34. On the Edit Elements via Form window, set the following values: img_main: dinosaur.jpg text_description: This ad block allows a user to select an image. 35. Click the OK button to continue. 36. Repeat the previous steps to add the New Services page. To add an additional page to the Ad Block column, click the RedDot on top of the page next to [click to edit foundation] to open the page.

181 Page Organizer Pattern At the Ad Block section, click the RedDot next to [add/remove/sort pages]. 38. On the Top Menu, click the Actions link. 39. In the Edit Link Element window, click Create and Connect Page. 40. From the List of Content Classes select Ad Block with Image. 41. In the Edit Headline window, enter the following value: Enter the headline: New Services 42. Click the OK button to continue. 43. On the Top Menu, click the Actions link. 44. On the Page Actions screen, click Edit Elements via Form. 45. On the Edit Elements via Form window, set the following values: img_main: book.jpg text_description: Another image ad block. 46. Click the OK button to continue. 47. To sort the Pages in the Ad Block column in the right order, click the OpenPage RedDot next to [click to edit foundation]. This opens up the Page. 48. Click the MultiLink RedDot next to [add/remove/sort pages]. 49. In the Edit Link Element window, click on Edit Page Order. 50. In the Edit Page Order window, sort the Pages in the following order. Interesting Websites New Products New Services 51. Click the OK button to continue. 52. To view the Page Organizer Page in Page Preview mode, click on the Actions link on the Top Menu.

182 Page Organizer Pattern On the Page Actions window, select Page Preview. 54. When done, click the Close button to close the Page Actions window.

183 Download Organizer Pattern Objectives Create a Content Class without Template Enhance SmartEdit ease of use Download Organizer Pattern 175 The Download Organizer pattern is used in situations where multiple CMS pages are needed but not necessarily wanted. The example below demonstrates this. Multiple pages are needed because you need to support a variable number of sections. But you never reuse the blocks of content the way you do when using the page organizer pattern. This pattern allows the CMS author to edit all of the blocks at once (meaning the author does not have to open each block individually like with the page organizer pattern). Another important thing to note about this pattern is it is not a replacement for the teaser patterns. While each block is a separate CMS page, you are not able to navigate directly to those pages. From an end-user perspective, this approach enhances ease-of-use, because it will result in easier editing of multiple Pages in a List. Create Download Item Content Class 1. Navigate to the Content Classes folder under Administer Content Classes node. Start Administer Content Classes Content Classes 2. On the Action Menu, click Create Content Class. Note that you are not choosing Create Content Class with Template! 3. In the Create Content Class window, set the following values: Name: Download Item Description: contains individual placeholder elements used in download organizer 4. Click OK to save the Content Class.

184 Download Organizer Pattern In the SmartTree, select the Download Item Content Class and expand the node. 6. Select the Content Elements node. 7. On the Action Menu, click Create Element. 8. In the Create Element window, set the following values: Element name: head_title Type: Headline Click the Next button to continue. 9. In the Edit Headline Element window, enter a description, leave all other options at their default values and click OK to continue. 10. With the Content Elements node still selected, click Create Element on the Action Menu. 11. In the Create Element window, set the following values: Element name: med_downloadfile Type: Media 12. Click the Next Button to continue. 13. In the Edit Media Element window, enter a description and be sure to set the following option: Folder: Download Files 14. Leave all other options at their default values and click OK to continue. 15. With the Content Elements node still selected, click on Create Element on the Action Menu 16. In the Create Element window set the following values: Element name: stf_description Type: Standard Field 17. Click the Next button to continue. 18. In the Edit Standard Field Element window, enter a description, leave all other options at their default values and click OK to continue.

185 Download Organizer Pattern Next click the Meta Elements node. 20. Click on Create Element on the Action Menu. 21. In the Create Element window, set the following values: Element name: att_downloadfilemodificationdate Type: Attribute 22. Click the Next button to continue. 23. In the Edit Attribute Element window, select the following options: Attribute selection: Modification date Locale: United States (English) Date format: 26-Dec Click the OK button to continue. 25. With the Meta Elements node still selected, click Create Element on the Action Menu 26. In the Create Element window set the following values: Element name: att_downloadfilename Type: Attribute 27. Click the Next button to continue 28. In the Edit Attribute Element window, enter the following value: Attribute Selection: File name 29. Click the OK button to continue. 30. With the Meta Elements node still selected, click Create Element on the Action Menu.

186 Download Organizer Pattern In the Create Element window set the following values: Element name: att_downloadfilesize Type: Attribute 32. Click the Next button to continue 33. On the Edit Attribute Element screen, set the following values: Attribute Selection: File size, Kbytes 34. Click the OK button to continue. Create Download Organizer Content Class 1. Navigate to the Content Classes folder and select it. Start Administer Content Classes Content Classes 2. In the Action Menu, click Create Content Class with Template. 3. In the Create Content Class with Template window, set the following value: Name: Download Organizer Description: contains list of files for downloading 4. Click the OK button to continue. 5. The Template Editor window comes up. Leave it open. 26. On the published site, click the Exercise 4 Download Organizer link on the RedDot CMS Patterns Table of Contents page. View and copy the source code for the Download Organizer page. Paste this copied code into the Template Editor. 6. Click OK to save the Template.

187 Download Organizer Pattern 179 The content in the Download Item Pages will be used to populate the Download Organizer Page. Since the two Content Classes will be sharing content, we can put the Elements of the Download Item Content Class in the Clipboard and connect them to the Download Organizer Content Class. 7. Clear any items from the Clipboard. 8. Navigate to the Download Item Content Class and expand it. Start Administer Content Classes Content Classes Download Item 9. Expand the Content Elements node. 10. Double click the following Elements to place them in the Clipboard: head_title med_downloadfile stf_description 11. Expand the Meta Elements node under the Download Item Content Class. 12. Double click the following Elements to put them in the Clipboard: att_downloadfilemodificationdate att_downloadfilename att_downloadfilesize

188 Download Organizer Pattern Select the Download Organizer Content Class and expand the node. Start Administer Content Classes Content Classes Download Organizer 14. Click the Content Elements node. 15. Check only head_title in the Clipboard and click Connect to Element in Clipboard on the Action Menu. 16. Check only med_downloadfile in the Clipboard and click Connect to Element in Clipboard on the Action Menu 17. Check only stf_description in the Clipboard and click Connect to Element in Clipboard on the Action Menu. 18. Now click the Meta Elements node and perform the following operations: 19. Check only att_downloadfilemodificationdate in the Clipboard and click Connect to Element in Clipboard on the Action Menu. 20. Check only att_downloadfilename in the Clipboard and click Connect to Element in Clipboard on the Action Menu 21. Check only att_downloadfilesize in the Clipboard and click Connect to Element in Clipboard on the Action Menu 22. To finish editing the Download Organizer Content Class, click Download Organizer under the Administer Content Classes node. 23. Select Edit Template from the Action Menu.

189 Download Organizer Pattern Delete the text in the <title> tag and leave the cursor in the tag. 25. From the Placeholders dropdown list, select the head_title Placeholder. 26. Delete the text in the <h1> tag and leave the cursor in the tag. 27. From the Placeholders dropdown list select head_title. 28. Delete the text in the <div> tag and leave the cursor in the tag. 29. Click the Create Element button. 30. In the Edit Element window set the following values: Element name: text_description Type: Text 31. Click the Next button to continue. 32. In the Edit Text Element window, enter a description, leave all other options at their default values and click OK to continue. 33. Delete all the Content Block areas but one. 34. Highlight the code from <! START CONTENT BLOCK --> TO <! END CONTENT BLOCK --> 35. Select List from the Block Marks dropdown list. 36. Delete the text in the HTML comment in the <span> tag and leave the cursor in it. 37. Click the Create Placeholder button. 38. In the Edit Element window, set the following values: Element name: list_downloaditempages Type: List 39. Click the Next button.

190 Download Organizer Pattern In the Edit List Element window, select the following options: Transfer element content of following pages: checked Insert path and filename only: checked 41. Click the OK button to continue. 42. Delete the text in the <td> tag next to the <td> tag for the title label as shown below and leave the cursor in the tag. 43. Select head_title from the Placeholders dropdown list. 44. Delete the text in the <td> tag next to the <td> tag for the description label and leave the cursor in the tag. 45. Select stf_description from the Placeholders dropdown list.

191 Download Organizer Pattern Locate the <td class= label >. Delete the href value in the <a> tag within it and leave the cursor there. 47. Select med_downloadfile from the Placeholders dropdown list. 48. Delete the link text for the <a> tag and leave the cursor there. 49. Select att_downloadfilename from the Placeholders dropdown list. 50. Delete the text in the <td> tag next to the <td> tag for the size label and leave the cursor in the tag. 51. Select att_downloadfilesize from the Placeholders dropdown list. 52. Next to the att_downloadfilesize Placeholder add a space and type kb next to it. 53. Delete the text in the <td> tag following the date <td> and leave the cursor in the tag.

192 Download Organizer Pattern Select att_downloadfilemodificationdate from the Placeholders dropdown list. Add SmartEdit Support for Download Organizer 1. Position the cursor after the opening <body> tag 2. Select Open Page from the RedDot Placeholders dropdown list. 3. Position the cursor before the <h1> tag. 4. Select RedDot_head_Title from the RedDot Placeholders dropdown list. 5. Position the cursor before the text_description Placeholder. 6. Select RedDot_text_Description from the RedDot Placeholders dropdown list. 7. Your completed Template code should appear as shown below: 8. Click the OK button to save the template.

193 Download Organizer Pattern 185 Preassign Content Class for Download List 1. While the Download Organizer Content Class node is still selected, expand the node. 2. Select Structural Elements and expand the node. 3. Select list_downloaditempages and click Preassign Content Classes in the Action Menu. 4. In the Preassign Content Classes window, check Download Item from the list of Content Classes. 5. Click the OK button to continue. Create Download Organizer Page 1. Navigate to the RedDot CMS Patterns Table of Contents Page in the SmartTree: Start Administer Project Structure Project RedDot CMS Patterns Table of Contents 2. Select the next link after Exercise On the Action Menu select Edit Link Properties. 4. In the Edit Link Properties window enter the following value: Link name: Exercise 4 5. Click the OK button to continue. 6. With the Exercise 4 Link still selected, click Create and Connect Page on the Action Menu. 7. In the List of Content Classes window, select Download Organizer. 8. In the Edit Headline window, set the following value: Enter the Headline: Download Organizer 9. The Download Organizer Page is created. Select the Download Organizer Page in the SmartTree. 10. On the Action Menu click Edit Elements via Form. 11. In the Edit Elements via Form window set the following value: text_description: This project is designed to teach you how to understand and model common design patterns in web sites that are managed by RedDot CMS. Almost all websites incorporate these patterns. By being able to identify these patterns you will be able to build CMS projects in a consistent and reliable manner.

194 Download Organizer Pattern 186 This web page is, itself, an example of a design pattern named Table of Contents. This pattern is mainly used for project start pages in CMS projects. The pattern displays a series of links, with the link text being customizable and the title of the following page displayed next to the link. 12. Click the OK button to continue. 13. Select the list_downloaditempages on the Download Organizer Page. 14. On the Action Menu select Create and Connect Page. 15. In the Edit Headline window enter the following value: Enter the headline: Product Click the OK button to continue. 17. In the SmartTree, select the Product 1 Page. 18. In the Action Menu click on Edit Elements via Form. 19. In the Edit Elements via Form window set the following values: med_downloadfile: press1.pdf stf_description: We are pleased to announce that a proactive critical path takes the initiative. 20. Click the OK button to continue. 21. Select the list_downloaditempages on the Download Organizer Page to add another Page. 22. On the Action Menu select Create and Connect Page. 23. In the Edit Headline window enter the following value: Enter the headline: Product Click the OK button to continue. 25. In the SmartTree, select the Product 2 Page. 26. In the Action menu click on Edit Elements via Form.

195 Download Organizer Pattern In the Edit Elements via Form window set the following values: med_downloadfile: press2.pdf stf_description: Now that the merger is complete, the world-class growth years bravely impact the world wide web. 28. Click the OK button to continue. 29. Select the list_downloaditempages Element on the Download Organizer Page to add a third Page. 30. On the Action Menu select Create and Connect Page. 31. In the Edit Headline window enter the following value: Enter the headline: Product Click the OK button to continue. 33. In the SmartTree, select the Product 3 Page. 34. In the Action Menu click on Edit Elements via Form. 35. In the Edit Elements via Form window set the following values: med_downloadfile: press3.pdf stf_description: The corporation deliverables enable the drag and drop neophytes, which leads us to believe that the teams will ramp up progress on a strategic next generation system. 36. Click the OK button to continue 37. To sort the Pages in the right order, select the list_downloaditempages Element. 38. On the Action Menu select Edit Page Order. 39. In the Edit Page Order window, sort the pages in the following order: Product 1 Product 2 Product Click the OK button to continue. 41. To view the Download Organizer Page in Page Preview mode, select the Download Organizer Page, and select Show Page Preview on the Action Menu.

196 FAQ Organizer Pattern 188 FAQ Organizer Pattern Objectives Use the Info Element to generate jump marks Reuse Content Elements The FAQ pattern is a variation of the Download Organizer pattern. The aspect of the FAQ pattern that is distinct is that name anchors (or jump marks ) are used to allow the visitor to the website to navigate the page. As was the case with the Download Organizer exercise, this exercise is done in two parts: 1. Create a Content Class to represent an individual FAQ item. Again, you will use a Content Class without a Template. 2. Create a Content Class used to organize FAQ Item Pages. This Page will be responsible for the presentation of the FAQ Item content. Create FAQ Item Content Class 1. Navigate to the Content Classes folder in the SmartTree. Start Administer Content Classes Content Classes 2. On the Action Menu, select Create Content Class (Note: without Template!) 3. In the Create Content Class window set the following values: Name: FAQ Item Description: contains individual placeholders to be used in FAQ Organizer 4. Click the OK button to continue. 5. Select the FAQ Item Content Class and expand the node.

197 FAQ Organizer Pattern Click on Content Elements. 7. On the Action Menu select Create Element. 8. In the Create Element window set the following values: Element name: head_title Type: Headline 9. Click the Next button to continue. 10. In the Edit Headline Element window, enter a description, leave all other options at their default values and click OK to continue. 11. With Content Elements still selected, click on Create Element on the Action Menu. 12. In the Create Element window set the following values: Element name: text_answer Type: Text 13. Click the Next button to continue. 14. In the Edit Text Element window, enter a description (leave other settings at their default values). 15. Click the OK button. 16. Select the Meta Elements node under the FAQ Item Content Class. 17. On the Action Menu select Create Element. 18. In the Create Element window set the following values: Element name: info_pageid Type: Info 19. Click the Next button to continue. 20. In the next window, select the following value: Content: Page: ID of Page 21. Click the OK button to continue.

198 Create FAQ Organizer Content Class FAQ Organizer Pattern 190 Notice that since the FAQ Organizer is pulling in content from the FAQ Item Pages, you will be reusing Elements from the FAQ Item. 1. Navigate to the Content Classes folder. Start Administer Content Classes Content Classes 2. On the Action Menu click on Create Content Class with Template. 3. In the Create Content Class with Template window, set the following values: Name: FAQ Organizer Description: page with jump marks 4. Delete the code in the Template Editor. Leave it open. 5. In the published site, navigate to the FAQ Organizer page. View and copy the source code from the FAQ Organizer page and paste it into the Clipboard. 6. Click the OK button to save the Template. 7. In the Clipboard area, clear all the elements in the Clipboard. 8. Select FAQ Item content class and expand the node. 9. Select the Content Elements node and expand the node. 10. Double click on head_title to place it in the Clipboard. 11. Double click on text_answers to place it in the Clipboard. 12. Select FAQ Organizer content class from the list of content classes and expand it. 13. Select the Content Elements node. 14. Check the head_title element in the Clipboard.

199 FAQ Organizer Pattern On the Action Menu, click on Connect to Element in Clipboard. The head_title element is connected to the head_title element in the Clipboard. 16. Uncheck head_title and check text_answers. 17. With the Content Elements node still selected, on the Action Menu click on Connect to Element in Clipboard. 18. Select the FAQ Organizer content class node. 19. Click on Edit Template on the Action Menu. 20. Delete the text within the <title> tag and leave the cursor in the tag. 21. From the Placeholder dropdown list, select head_title. 22. Locate the Named Anchor HTML -tag with attribute name = top and delete the text in the tag. 23. With the cursor in between the Anchor tag, select head_title from the Placeholders dropdown list list. 24. Delete the all of the text in the following div tag and leave the cursor in the tag. 25. Click the Create Placeholder button. 26. In the Edit Text Element window set the following values: Element name: text_description Type: Text 27..Click the Next button to continue. 28. In the next window enter a description, leave the default values and click the OK button to continue 29. Delete all span HTML tags with id faqlink but one.

200 FAQ Organizer Pattern Highlight from <! START FAQ LINK --> to <! END FAQ LINK --> 31. From the Block Marks dropdown list, select List. 32. Delete the text in the comment tag following the span tag and leave the cursor there. 33. Click the Create Placeholder button. 34. In the Edit Element window, set the following values: Element name: list_faqitempages Type: List 35. Click the Next button to continue.

201 FAQ Organizer Pattern In the Edit List Element window, set the following values: Transfer element content of following pages: checked Insert path and file name only: checked 37. Click the OK button to continue. 38. In the following a tag, delete the numeric characters in the href value and leave the cursor there. 39. Click the Create Placeholder button. 40. In the Edit Element window, set the following values: Element name: info_pageid Type: info 41. Click the Next button to continue. 42. In the next window, select the following value: Content: Page: ID of Page. 43. Click the OK button to continue.

202 FAQ Organizer Pattern Delete the text in the Anchor HTML tag and leave the cursor in the tag. 45. Select head_title from the Placeholders dropdown list. 46. Delete all but one of the HTML div tags with class= faqitemblock. 47. Highlight the remaining div tag with class faqitemblock 48. Select List from the Block Marks dropdown list. 49. Delete the text in the comment tag and leave the cursor in the tag. 50. From the Placeholder dropdown list, select list_faqitempages. 51. In the Anchor HTML tag, delete the numeric characters after section in the href value and leave the cursor there. 52. Select info_pageid from the Placeholders dropdown list. 53. Delete the text in the Anchor HTML a tag and position the cursor in the tag. 54. Select head_title from the Placeholders dropdown list. 55. Delete the text in the div class with class answer and leave the cursor in the tag.

203 FAQ Organizer Pattern From the Placeholder dropdown list, select text_answer. 57. Place your cursor in the text_answer Placeholder and click the Edit Placeholder button. 58. In the Edit Element window, click the Next button to continue. 59. In the Edit Text Element window, select the following value. Do not use in form: checked 60. Click the OK button to continue. Add SmartEdit Support for FAQ Organizer 1. Position the cursor after the body tag. 2. Select Open Page from the RedDot Placeholders dropdown list. 3. Position the cursor before the h1 tag. 4. Select RedDot_head_Title from the RedDot Placeholder dropdown list. 5. Position the cursor before the text_description Placeholder. 6. Select RedDot_text_Description from the RedDot Placeholder dropdown list. 7. Click the OK button to save the template.

204 Preassign Content Class for FAQ List FAQ Organizer Pattern With the FAQ Organizer content class node selected, click and expand the Structural Elements node. 2. Select list_faqitempages. 3. On the Action Menu, click on Preassign Content Classes. 4. In the Preassign Content Classes window, select FAQ Item from the list of content classes. 5. Click the OK button to continue. Create FAQ Organizer Page 1. Navigate to the RedDot CMS Patterns Table of Contents page node link node. Start Administer Project Structure Project RedDot CMS Patterns Table of Contents 2. Select the next link after Exercise On the Action Menu select Edit Link Properties. 4. In the Edit Link Properties window enter the following value: Link name: Exercise 5 5. Click the OK button to continue. 6. With the Exercise 5 node still selected, click on Create and Connect Page on the Action Menu. 7. In the list of Content Classes window, select FAQ Organizer. 8. In the Edit Headline window, set the following value: Enter the Headline: FAQ Organizer

205 FAQ Organizer Pattern The FAQ Organizer page is created. Select the FAQ Organizer page node. 10. On the Action Menu click on Edit Elements via Form. 11. In the Edit Elements via Form window set the following values: Headline: FAQ Organizer text_description: The faq pattern is a variation of the content organizer pattern. The aspect of the faq pattern that is distinct is that jumpmarks are used to allow the visitor to the website to navigate the page. 12. Click the OK button to continue. 13. Select the list_faqitempages node underneath the FAQ Organizer page. 14. On the Action Menu, click on Create and Connect Page. 15. In the Edit Headline window, set the following value: Enter the headline: Topic Click the OK button to continue. 17. With the list_faqitempages still selected, click on Create and Connect Page on the Action Menu to create Topic In the Edit Headline window, set the following value: Enter the headline: Topic With the list_faqitempages still selected, click on Create and Connect Page on the Action Menu to create Topic In the Edit Headline window, set the following value: Enter the headline: Topic To sort the page order, while list_faqitempages is still selected, click on Edit Page Order on the Action Menu. 22. In the Edit Page Order window, sort the pages into the following order: Topic 1 Topic 2 Topic Click the OK button to continue.

206 FAQ Organizer Pattern Select the Topic 1 page. 25. On the Action Menu, click on Edit Elements via Form. 26. In the Edit Elements via Form window, set the following value: text_answer: Truly we must. We are all impressed to see that superscalar IHVs (using the latest in multimedia technology) sync up with the leader in visual systems technology. In order to obtain cutting edge protocols, we took a close look at the internet service providers to understand what they mean. Let us not deceive ourselves into thinking that solutions-oriented teams are going to compatibly take the initiative. We feel that the key players will enable the neophyte. The competitive opportunities enhance an action item, notwithstanding that binary-compatible internet service providers empower the global village. We have been looking into motif-compliant customer focus. We are all impressed to see that the drop dead date closes the loop on the issue of the environments. As always, the digital world wide web gets up to speed on signage. We're going forward on benefits. Let us not deceive ourselves into thinking that media authoring raises a flag over (and by the way this is all in my report) teams. The cutting edge eye candy can hardly help but to give rise to interactive team players. We are pleased to announce that a culture change probably gets up to speed on feature-rich benefits. It's so clear that an executive advisory board is a lightweight price point; we are convinced the integrated leadership position enables the paper trail. As Ed McCracken states in a recent report about synergistic protocols, " benefits will succeed." Truly we must. 27. Click the OK button to continue. 28. In the SmartTree, select Topic On the Action Menu, click on Edit Elements via Form. 30. In the Edit Elements via Form window, set the following value: text_answer: Customers need the committees, and we fulfill that need with the lightweight ongoing support for increased productivity. It used to be true that an environment raises a flag over the collateral big picture, however throughout the fiscal year we have seen that the marketing solution utilizes each and every one of you. A value-added web browsing tool enables the alliances. Can we indeed say that communication is not going to create the dialogues? We have been looking into superscalar growth years. The customers can hardly help but to give a clear channel towards committees, which leads us to believe that partnerships work effectively. The solutions-oriented guesstimates interface with the opportunity and in view of the fact that teamworkoriented application frameworks engender human resource allocation we clearly can conclude that the drop dead dates take ownership of an open architecture. We have been looking into the collaborative leadership position. We're going forward on an established standard key player. We are all impressed to see that CDE-compliant deliverables engender the established standard growth years. Surely, we can conclude that interactive benefit indicates that excellence is going to continue to realize the benefits of ISVs. It is fiscally true that interoperable critical paths establish an action item for the best systems in the world. In order to obtain an IHV, we took a close look at opportunity to understand what it means. Time frames are not going to grow a team player. A major action item for this fiscal quarter is the CDEcompliant action items. Thanks to the recent reorganization, lightweight plug-ins are going to encapsulate the state of the art sweet spots. The superscalar challenges work effectively (take a surf on our World Wide Web site for more on this) and in view of the fact that the established standard 90% solutions will ramp up progress on the value-added national information infrastructure we clearly can conclude that a strategy blows them away. Surely, we can conclude that a disclosure indicates that the teamwork-oriented drop dead date gives rise to a schedule. 31. Click the OK button to continue.

207 FAQ Organizer Pattern In the SmartTree, select Topic On the Action Menu, click on Edit Elements via Form. 34. In the Edit Elements via Form window, set the following value: text_answer: Having first verified that a team-building corporation continues to realize the benefits of a technological action item, a careful examination of personal digital assistants reveals that embedded scripting languages leverage multimastering. If we can foresee the benefits of the emerging environment, then the enterprise deliverable will assure us feature-rich key players. We must put focus, focus, and refocus in place so that the interoperable web impacts legacies. Thanks to the recent reorganization, standards touch base on quality control. It used to be true that the world-class alliances take the initiative, however throughout the fiscal year we have seen that the motif-compliant dealer channels inevitably enhance a writeoff. Having all of you that are fiscal, it follows that corporation open architectures have possibilities for future technical advances. Having the platforms that are interactive, it follows that an executive is going to continue to realize the benefits of the execution. In order to assure that opportunity can ride the wave of the IHVs, we must be certain that the first class dealer channels engender first class core competencies. In order to obtain the solution, we took a close look at the paradigm shift to understand what it means. Task-driven turnkey systems are not going to get up to speed on focus, focus, and refocus. Let us not deceive ourselves into thinking that the committees do the right thing about the open architecture. The constraints establish an action item for win-win focus. Now what was I saying? As a company, we have a firm grip on mips. So, massively parallel staffing has possibilities for future technical advances. Surely, we can conclude that a unix environment indicates that platforms create... uuum... game authoring. Surely, we can conclude that compatible deliverables indicate that growth years are not going to sign up for the zero bug count. Leading indicators would seem to suggest that dealer channels sign off on the best systems in the world. The human resource allocation is not each and every one of you. A major action item for this fiscal quarter is the national information infrastructure. We will rapidly take the lead in cutting edge missions, only to speed ahead of the pack in the competitive field of corporate titans. 35. Click the OK button to continue. 36. To preview page select the FAQ Organizer page node, and click on Show Page Preview on the Action Menu:

208 Navigation Pattern 200 Navigation Pattern Objectives Introduction to the Navigation Manager Introduction to Render Tags Create a simple, level-aware Navigation Menu The Navigation pattern introduces building navigation using CMS. This exercise covers using the Navigation Manager and Render Tags. Enable Navigation Manager 61. Navigate to General Settings under Administer Project Settings. Start Administer Project Settings General Settings 62. On the Action Menu, click on Edit Settings. 63. In the Edit Settings window set the following value: Activate Navigation Manager: checked 64. Click the OK button to continue.

209 Navigation Pattern 201 Create Foundation Content Class 1. Navigate to the Content Classes folder and select it Start Administer Content Classes Content Classes 2. On the Action Menu select Create Content Class with Template. 3. In the Create Content Class with Template window enter the following value: Name: Foundation Description: contains left side navigation, headline and body text 4. Click the OK button to continue. 5. Delete all the code in the Template Editor window. Leave the Template Editor open. 6. On the published site, click the Exercise 6 Navigation link on the RedDot CMS Patterns Table of Contents page. View and copy the source code for the Navigation page. Paste this copied code into the Template Editor. 7. Delete the text within the <title> tag and leave the cursor in the tag. 8. Click the Create Placeholder button. 9. In the Edit Element window, set the following values: Element name: head_title Type: Headline 10. Click the Next button to continue. 11. In the Edit Headline Element window, enter a description, leave all other options at their default values and click OK. 12. Locate the <h1> tag after the <div id= foundationarea > and delete the text in the <h1> tag. 13. With the cursor in the <h1> tag, select head_title from the Placeholders dropdown list. 14. Delete the text in the next <div> tag and leave the cursor in the tag. 15. Click the Create Placeholder button. 16. In the Edit Element window, enter the following values: Element name: text_description Type: Text

210 Navigation Pattern Click the Next button to continue. 18. In the Edit Text Element window, enter a description, leave all other options at their default values and click the OK button to continue. 19. Locate the <div id= navarea > tag and delete the code in the div. 20. Place the cursor inside the <div> tag and insert the following code: <%!! Navigation:OutputArea(LeftNavigation)!!%> The code will be displayed in blue. This piece of code is called a Render Tag. It will be used by the Navigation Manager to generate navigation links. 21. Locate the <div id= contentarea > and delete the code within the div. 22. With the cursor inside the <div>, click the Create Placeholder button. 23. In the Edit Element window, enter the following values: Element name: con_contentarea Type: Container. 24. Click the Next button to continue. 25. In the Edit Container Element window, leave the default values and click the OK button to continue. 26. Click the OK button to save the Template. 27. Expand the Foundation Content Class node. 28. Select Structural Elements from the SmartTree. 29. On the Action Menu, click on Create Element. 30. In the Create Element window, enter the following values: Element name: list_navigation Type: List 31. Click the Next button to continue. 32. In the Edit List Element window, leave the default values and click the OK button.

211 Add SmartEdit Support for Foundation Navigation Pattern Select the Foundation Content Class in the SmartTree. 2. On the Action Menu, click on Edit Template. 3. Position the cursor after the opening <body> tag. 4. From the RedDot Placeholders dropdown list select Open Page. 5. Position the cursor before the <h1> tag. 6. Select RedDot_head_Title from the RedDot Placeholders dropdown list. 7. Position the cursor before the text_description Placeholder. 8. Select RedDot_text_Description from the RedDot Placeholders dropdown list. 9. Position the cursor before the con_contentarea Placeholder. 10. Select RedDot_con_ContentArea from the RedDot Placeholders dropdown list. 11. Your completed Template code should appear as shown below: 12. Click the OK button to save the template. Create Page Definition for Foundation 1. Navigate to the Foundation Content Class in the SmartTree: Start Administer Content Classes Content Classes Foundation 2. Expand the Foundation Content Class node. 3. Select Page Definitions. 4. In the Action Menu, click Create Page Definition. 5. In the Create Page Definition window, enter the following value: Name: Foundation and Document with Teaser

212 Navigation Pattern Click the Next button to continue. 7. On the Edit Page Definition window, expand the Content Classes node in the right column. 8. Drag the Document with Teaser Content Class from the right column to the left column and drop it on the con_contentarea in the left column. This pre-populates the con_contentarea with the Document with Teaser Content Class. 9. In the Page Definition column, right click the Page which appears on the con_contentarea Link. Select Edit Headline to change the default Headline. 10. In the Edit headline window, enter the following value: Headline: Enter Body Headline 11. Click the OK button to continue. Configure Foundation as Master Page 1. Select the Foundation Content Class that was just created. 2. On the Action Menu select Master Page Settings. 3. In the Master Page Settings window select the following values: Use as master page: checked list_navigation: selected. 4. Click the OK button to continue.

213 Navigation Pattern 205 Create Navigation Content Class 1. Navigate to the Content Classes folder and select it: Start Administer Content Classes Content Classes 2. On the Action Menu select Create Content Class with Template. 3. In the Create Content Class with Template window set the following values: Name: Navigation Description: left hand navigation of page 4. Click the OK button to continue. 5. Delete all the code in the Template Editor window. 6. Type, or Copy + Paste the following code into the Template Editor: <ul> <li> <reddot:cms> <if> <query valuea="context:currentindex.id" operator="==" valueb="context:lastindex.id"> <htmltext> <a class="selected" href="<%!! Context:CurrentIndex.GetUrl()!!%>"> <%!! Context:CurrentIndex.Headline!!%> </a> </htmltext> </query> <query type="else"> <htmltext> <a href="<%!! Context:CurrentIndex.GetUrl()!!%>"> <%!! Context:CurrentIndex.Headline!!%></a> </htmltext> </query> </if> </reddot:cms> <navigation:nextlevel> </li> </ul> 7. Click the OK button to save the Template. Create Navigation Area 1. Navigate to the Project node under Browse Navigation and select it. Start Browse Navigation Project

214 Navigation Pattern On the Action Menu, click on Navigation Areas. 3. In the Navigation Areas window, right click on Navigation Areas under the Navigation area column. 4. In the fly out menu select Create area. 5. In the Create Navigation Area window, enter the following value: Name: LeftNavigation 6. Click the Save button to continue. 7. Expand the Content Classes node under the Content Classes column on the left. 8. From the list of Content Classes, select and drag Navigation Content Class and drop it on LeftNavigation on the Navigation area:

215 Navigation Pattern The Content Class properties window pops open. Select the following values: All levels Selected: Selected & not selected 10. Click the OK button to continue. 11. Click the Close button to exit the Navigation Manager window Create Foundation Page 1. Navigate to the last Exercise Link on the Administer Project Structure node: Start Administer Project Structure Project RedDot CMS Patterns - Table of Contents Exercise 2. On the Action Menu, click on Edit Link Properties. 3. In the Edit Link Properties window, set the following value: Link name: Exercise 6 4. Click the OK button to continue. 5. With Exercise 6 still selected, click on Create and Connect Page on the Action Menu. 6. In the List of Content Classes window, select Foundation and Document with Teaser. 7. In the Edit Headline window, enter the following value: Enter the headline: Navigation 8. Click the OK button to continue.

216 Navigation Pattern 208 Build Navigation Structure 1. Navigate to the Project node under the Browse Navigation node. Start Browse Navigation Project 2. On the Action Menu, click on Navigation Structure. 3. In the Navigation Structure window, click the blue bar to reveal the right column. 4. In the right column, right click in the area below Navigation structure (auxiliary tree): 5. Choose Disconnected Pages. You should now see the Navigation Page on the right hand side. 6. Right Click again and choose Adopt Page

217 Navigation Pattern Click the Close button 8. With the Project node still selected click on Navigation Structure under the Action Menu. You should now see the page in both panes of the window 9. Right Click the Navigation page on the left side of the window under the Navigation structure column 10. On the fly out menu, select Create Page. 11. In the Create Page window, enter the following values: Foundation and Document with Teaser: selected Headline: Colors 12. Click the OK button to continue. 13. Right click again on the Navigation node. 14. On the fly out menu, select Create Page. 15. In the Create Page window, set the following values: Foundation and Document with Teaser: selected Headline: Places 16. Click the OK button to continue. 17. Select the Places Page node and use the arrow buttons to put the Pages in the following order. Colors Places

218 Create Additional Foundation Pages Navigation Pattern Right click the Colors Page. 2. Select Create Page from the fly out menu. 3. In the Create Pages window, enter the following values: Foundation and Document with Teaser: selected Headline: Primary Colors 4. Click the OK button to continue. 5. Again, right click the Colors Page. 6. Select Create Pages from the fly out menu. 7. In the Create Pages window, set the following values: Foundation and Document with Teaser: selected Headline: Secondary Colors 8. Click the OK button to continue. 9. Right click the Places page. 10. On the fly out menu, select Create Page. 11. In the Create Page window, enter the following values: Foundation and Document with Teaser: selected Headline: Countries 12. Click the OK button to continue. 13. Right click the Primary Colors Page. 14. Select Create Pages from the fly out menu. 15. In the Create Pages window, set the following values: Foundation and Document with Teaser: selected Headline: Red 16. Click the OK button to continue. 17. Again, right click the Primary Colors Page. 18. Select Create Pages from the fly out menu. 19. In the Create Pages window, set the following values: Foundation and Document with Teaser: selected Headline: Blue 20. Click the OK button to continue. 21. Right click the Primary Colors Page. 22. Select Create Pages from the fly out menu.

219 Navigation Pattern In the Create Pages window, set the following values: Foundation and Document with Teaser: selected Headline: Yellow 24. Click the OK button to continue. 25. Right click the Secondary Colors Page. 26. Select Create Pages from the fly out menu. 27. In the Create Pages window, set the following values: Foundation and Document with Teaser: selected Headline: Green 28. Click the OK button to continue. 29. Right click the Secondary Colors Page. 30. Select Create Pages from the fly out menu. 31. In the Create Pages window, set the following values: Foundation and Document with Teaser: selected Headline: Orange 32. Click the OK button to continue. 33. Right click the Secondary Colors Page. 34. Select Create Pages from the fly out menu. 35. In the Create Pages window, set the following values: Foundation and Document with Teaser: selected Headline: Purple 36. Click the OK button to continue. 37. Right click the Countries Page. 38. Select Create Pages from the fly out menu. 39. In the Create Pages window, set the following values: Foundation and Document with Teaser: selected Headline: North America 40. Click the OK button to continue. 41. Right click the North America Page. 42. Select Create Pages from the fly out menu. 43. In the Create Pages window, set the following values: Foundation and Document with Teaser: selected Headline: United States 44. Click the OK button to continue.

220 Navigation Pattern Right click the North America Page. 46. Select Create Pages from the fly out menu. 47. In the Create Pages window, set the following values: Foundation and Document with Teaser: selected Headline: Canada 48. Click the OK button to continue. 49. Right click the North America Page. 50. Select Create Pages from the fly out menu. 51. In the Create Pages window, set the following values: Foundation and Document with Teaser: selected Headline: Mexico 52. Click the OK button to continue. 53. Click the Close button to save the Navigation Structure. 54. The result of building the Navigation Structure can be seen in the SmartTree (excerpt shown here):

221 Patterns Worksheet 213 Patterns Worksheet Table of Contents Name: Elements: Content Class

222 Patterns Worksheet <html> 2 <head><!-- PageID 1 - published by RedDot > 3 <title>reddot CMS Patterns - Table of Contents</title> 4 </head> 5 <body> 6 <h1>reddot CMS Patterns - Table of Contents</h1> 7 <div> 8 <P> This project is designed to teach you how to understand and model common design patterns </P> 9 </div> 10 <ul> 11 <li><a href="ex1.htm">exercise 1</a> - Simple Teaser</li> 12 <li><a href="ex2.htm">exercise 2</a> - Complex Teaser</li> 13 <li><a href="ex3.htm">exercise 3</a> - Page Organizer</li> 14 <li><a href="ex4.htm">exercise 4</a> - Download Organizer</li> 15 <li><a href="ex5.htm">exercise 5</a> - FAQ Organizer</li> 16 <li><a href="ex6.htm">exercise 6</a> - Navigation</li> 17 </ul> 18 </body> 19 </html>

223 Patterns Worksheet 215 Exercise 1, Part 1 Name: Elements: Content Class Content Class Name: Elements:

224 Patterns Worksheet <html> 2 <head><!-- PageID 2 - published by RedDot > 3 <title>simple Teaser</title> 4 </head> 5 <body> 6 <h1>simple Teaser</h1> 7 <div> 8 <P>The complex teaser pattern is similar to the simple teaser pattern...</p> 9 </div> 10 <ul> 11 <li> 12 <a href="new-york.htm">new York</a> - <span style="font-style:italic;"> 13 With over 8 million people, New York City is the largest city in the United States. 14 </span> 15 </li> <li> 18 <a href="toronto.htm">toronto</a> - <span style="font-style:italic;"> 19 Toronto is the economic capital of Canada. 20 </span> 21 </li> <li> 24 <a href="mexico-city.htm">mexico City</a> - <span style="font-style:italic;"> 25 Founded by the Aztecs in 1325, Mexico City 26 </span> 27 </li> 28 </ul> 29 </body> 30 </html>

225 Patterns Worksheet 217 Exercise 1, Part 2 Name: Elements: Content Class

226 Patterns Worksheet <html> 2 <head><!-- PageID 3 - published by RedDot > 3 <title>new York</title> 4 </head> 5 <body> 6 <!-- START DOCUMENT WITH TEASER BODY --> 7 <h2>new York</h2> 8 <div style="font-style:italic;"> 9 With over 8 million people, New York City is the largest city in the United States. 10 </div> 11 <div style="margin-top:10px;"> 12 <P>At New York, we think we know how to leverage virally </P> 13 </div> 14 <div style="text-align:center"> 15 <!-- image width should not exceed 400px --> 16 <img src="images/nyc_rdax_400x300.jpg" border="1" width="400" height="300"> 17 </div> 18 <!-- END DOCUMENT WITH TEASER BODY --> 19 </body> 20 </html>

227 Patterns Worksheet 219 Exercise 2 Name: Elements: Content Class Content Class Name: Elements: 1 <html> 2 <head><!-- PageID 6 - published by RedDot > 3 <title>complex Teaser</title> 4 <style> STYLE DEFININITIONS </style> 5 </head> 6 <body> 7 <h1>complex Teaser</h1> 8 <div> 9 <P>The complex teaser pattern is similar to the simple </P> 10 </div>

228 Patterns Worksheet <!-- START TEASER BLOCK --> 12 <div class="teaserblock"> 13 <img src="images/nyc_rdax_100x75.jpg" width="100" height="75"> 14 <a href="new-york.htm">new York</a> 15 <br/> 16 With over 8 million people, New York City is the largest city in the United States. 17 </div> 18 <!-- END TEASER BLOCK --> 19 <!-- START TEASER BLOCK --> 20 <div class="teaserblock"> 21 <img src="images/toronto_rdax_100x75.jpg" width="100" height="75"> 22 <a href="toronto.htm">toronto</a> 23 <br/> 24 Toronto is the economic capital of Canada. 25 </div> 26 <!-- END TEASER BLOCK --> 27 <!-- START TEASER BLOCK --> 28 <div class="teaserblock"> 29 <img src="images/mexico-city_rdax_100x75.jpg" width="100" height="75"> 30 <a href="mexico-city.htm">mexico City</a> 31 <br/> 32 Founded by the Aztecs in 1325, Mexico City is the oldest continually settled city in the western hemisphere. 33 </div> 34 <!-- END TEASER BLOCK --> 35 </body> 36 </html>

229 Patterns Worksheet 221 Exercise 3 Name: Elements: Content Class Name: Elements: Content Class Name: Elements: Content Class

230 Patterns Worksheet <html> 2 <head><!-- PageID 7 - published by RedDot > 3 <title>page Organizer</title> 4 <style> 5 StYLE DEFINITIONS 6 </style> 7 </head> 8 <body> 9 <div id="pageorganizerarea"> 10 <h1>page Organizer</h1> 11 <div> 12 The page organizer pattern is used when blocks of content need to be reused in a website 13 </div> 14 <div id="contentarea"> 15 <!-- START DOCUMENT WITH TEASER BODY --> 16 <h2>content Area Leaf Page</h2> 17 <div style="font-style:italic;"></div> <div style="margin-top:10px;"> 20 Due to the cost effective critical paths and fiscal dialogue 21 </div> <div style="text-align:center"> 24 <!-- image width should not exceed 400px --> 25 </div> 26 <!-- END DOCUMENT WITH TEASER BODY --> 27 </div><!-- END contentarea--> 28 <div id="adarea"> 29 <!-- START AD BLOCK WITH LIST --> 30 <div class="ad"> 31 <h4>interesting Websites</h4> 32 <div>

231 Patterns Worksheet <P>This ad block demonstrates how to allow a CMS author to create links to external sites.</p> 34 </div> 35 <ul> 36 <li><a href=" target="_blank">reddot</a></li> 37 <li><a href=" target="_blank">reddot Community</a></li> 38 <li><a href=" target="_blank">open Text</a></li> 39 </ul> 40 </div> 41 <!-- END AD BLOCK WITH LIST --><!-- START AD BLOCK WITH IMAGE --> 42 <div class="ad"> 43 <h4>new Products</h4> 44 <div> 45 <P>This ad block allows a user to select an image.</p> 46 </div> 47 <div> 48 <!-- max image width is 180px --> 49 <img src="images/dinosaur_rdax_180x107.jpg" width="180" height="107"> 50 </div> 51 </div> 52 <!-- END AD BLOCK WITH IMAGE --> 53 </div><!-- END adarea --> 54 </div><!-- END pageorganizerarea --> 55 </body> 56 </html>

232 Patterns Worksheet 224 Exercise 4 Name: Elements: Content Class Name: Elements: Content Class

233 Patterns Worksheet <html> 2 <head><!-- PageID 15 - published by RedDot > 3 <title>download Organizer</title> 4 <style> 5 STYLE DEFINITIONS 6 </style> 7 </head> 8 <body> 9 <h1>download Organizer</h1> 10 <div> 11 <p>the content organizer pattern is used in situations where multiple CMS pages </p> 12 </div> 13 <!-- START CONTENT BLOCK --> 14 <div class="contentblock"> 15 <span style="display:none"><!-- 16.htm --></span> 16 <table> 17 <tr> 18 <td class="label">title:</td> 19 <td>product 1</td> 20 </tr> 21 <tr> 22 <td class="label">description:</td> 23 <td> 24 We are pleased to announce that a proactive critical path takes the initiative. 25 </td> 26 </tr> 27 <tr> 28 <td class="label">link:</td> 29 <td><a target="_blank" href="downloads/press1.pdf">press1.pdf</a></td> 30 </tr>

234 Patterns Worksheet <tr> 32 <td class="label">size:</td> 33 <td>19.21 kb</td> 34 </tr> 35 <tr> 36 <td class="label">date:</td> 37 <td>28-nov-2007</td> 38 </tr> 39 </table> 40 </div> 41 <!-- END CONTENT BLOCK --> 42 <!-- START CONTENT BLOCK --> 43 <div class="contentblock"> 44 <span style="display:none"><!-- 17.htm --></span> 45 <table> 46 <tr> 47 <td class="label">title:</td> 48 <td>product 2</td> 49 </tr> 50 <tr> 51 <td class="label">description:</td> 52 <td> 53 Now that the merger is complete, the world-class growth years bravely impact the world wide web. 54 </td> 55 </tr> 56 <tr> 57 <td class="label">link:</td> 58 <td><a target="_blank" href="downloads/press2.pdf">press2.pdf</a></td> 59 </tr>

235 Patterns Worksheet <tr> 61 <td class="label">size:</td> 62 <td>14.25 kb</td> 63 </tr> 64 <tr> 65 <td class="label">date:</td> 66 <td>28-nov-2007</td> 67 </tr> 68 </table> 69 </div> 70 <!-- END CONTENT BLOCK --> 71 <!-- START CONTENT BLOCK --> 72 <div class="contentblock"> 73 <span style="display:none"><!-- 18.htm --></span> 74 <table> 75 <tr> 76 <td class="label">title:</td> 77 <td>product 3</td> 78 </tr> 79 <tr> 80 <td class="label">description:</td> 81 <td> 82 The corporation deliverables enable the drag and drop neophytes </td> 84 </tr> 85 <tr> 86 <td class="label">link:</td> 87 <td><a target="_blank" href="downloads/press3.pdf">press3.pdf</a></td> 88 </tr>

236 Patterns Worksheet <tr> 90 <td class="label">size:</td> 91 <td>19.02 kb</td> 92 </tr> 93 <tr> 94 <td class="label">date:</td> 95 <td>28-nov-2007</td> 96 </tr> 97 </table> 98 </div> 99 <!-- END CONTENT BLOCK --> 100 </body> 101 </html>

237 Patterns Worksheet 229 Exercise 5 Name: Elements: Content Class Name: Elements: Content Class

238 Patterns Worksheet <html> 2 <head><!-- PageID 19 - published by RedDot > 3 <title>faq Organizer</title> 4 <style> 5 STYLE DEFINITIONS 6 </style> 7 </head> 8 <body> 9 <h1><a name="top">faq Organizer</a></h1> 10 <div> <P>The faq pattern is a variation of the content organizer pattern...</p> </div> 13 <div id="faqjumpmarks"> <!-- START FAQ LINK --> 16 <span class="faqlink"> 17 <!-- 20.htm --> 18 <a href="#section19">topic 1</a> 19 </span><!-- END faqlink --> 20 <!-- END FAQ LINK --> <!-- START FAQ LINK --> 23 <span class="faqlink"> 24 <!-- 21.htm --> 25 <a href="#section19">topic 2</a> 26 </span><!-- END faqlink --> 27 <!-- END FAQ LINK --> 28

239 Patterns Worksheet <!-- START FAQ LINK --> 30 <span class="faqlink"> 31 <!-- 22.htm --> 32 <a href="#section19">topic 3</a> 33 </span><!-- END faqlink --> 34 <!-- END FAQ LINK --> </div><!-- END faqjumpmarks --> <!-- START FAQ ITEM --> 39 <div class="faqitemblock"> 40 <!-- 20.htm --> 41 <a name="section19">topic 1</a> 42 <div class="answer"> 43 <P>Truly we must. We are all impressed to see that </div> 45 <div class="backlink"> 46 <a href="#top">...back to top</a> 47 </div> 48 </div><!-- END faqitemblock --> 49 <!-- END FAQ ITEM --> 50 </body> 51 </html>

240 Patterns Worksheet 232 Exercise 6 Content Class Name: Elements: 1 <html> 2 <head><!-- PageID 23 - published by RedDot > 3 <title>navigation</title> 4 <style> 5 STYLE DEFINITIONS 6 </style> 7 </head> 8 <body> 9 <div id="foundationarea"> <h1>navigation</h1> 12 <div>the navigation pattern introduces building navigation using CMS...</div> 13

241 Patterns Worksheet <div id="navarea"> 15 <ul> 16 <li> 17 <a class="selected" href="ex6.htm">navigation</a><ul> 18 <li><a href="colors.htm">colors</a><ul> 19 <li><a href="primary-colors.htm">primary Colors</a><ul> 20 <li><a href="red.htm">red</a> 21 </li> 22 </ul><ul> 23 <li><a href="blue.htm">blue</a> 24 </li> 25 </ul><ul> 26 <li><a href="yellow.htm">yellow</a> 27 </li> 28 </ul> 29 </li> 30 </ul><ul> 31 <li><a href="secondary-colors.htm">secondary Colors</a><ul> 32 <li><a href="green.htm">green</a> 33 </li> 34 </ul><ul> 35 <li><a href="orange.htm">orange</a> 36 </li> 37 </ul><ul> 38 <li><a href="purple.htm">purple</a> 39 </li> 40 </ul> 41 </li> 42 </ul> 43 </li> 44 </ul><ul> 45 <li><a href="places.htm">places</a><ul>

242 Patterns Worksheet <li><a href="countries.htm">countries</a><ul> 47 <li><a href="north-america.htm">north America</a><ul> 48 <li><a href="united-states.htm">united States</a> 49 </li> 50 </ul><ul> 51 <li><a href="canada.htm">canada</a> 52 </li> 53 </ul><ul> 54 <li><a href="mexico.htm">mexico</a> 55 </li> 56 </ul> 57 </li> 58 </ul> 59 </li> 60 </ul> 61 </li> 62 </ul> 63 </li> 64 </ul> 65 </div><!-- END navarea --> 66

243 Patterns Worksheet <div id="contentarea"> <!-- START DOCUMENT WITH TEASER BODY --> 70 <h2>home Page</h2> 71 <div style="font-style:italic;"></div> 72 <div style="margin-top:10px;"> 73 <P>Due to the cost effective critical...</p> 74 </div> 75 <div style="text-align:center"> 76 <!-- image width should not exceed 400px --> </div> 79 <!-- END DOCUMENT WITH TEASER BODY --> </div><!-- END contentarea --> </div><!-- END foundationara --> 84 </body> 85 </html>

244 Glossary of RedDots 236 Glossary of RedDots OpenPage RedDot Opens the page in editing mode. Individual red dots appear for each element that is available for editing. ClosePage RedDot Closes a page from editing mode, saving all changes. Edit RedDot Allows editing of an element. Editing content element opens a text editor, while image content elements open the Asset Manager. Form RedDot Allows use of a form interface to edit all elements on a page. Mandatory RedDot Designates elements on a page that must contain content. SaveElement RedDot Saves content that has been edited using DirectEdit. SmartDrop Add text, tables or graphics by dragging files from MS Windows Explorer onto the red square. Translate RedDot Opens content requiring translation into the Translation Editor. Link RedDot Allows changes to link properties of an element. MultiLink RedDot Allows editing of a list or container. AddPage / AppendPage RedDot AddPage allows you to insert Pages at the top of a manually sorted container. AppendPage is used to add Pages to the end of a manually sorted container. ReleasePage RedDot Identifies a page submitted for release. LockedPage RedDot Identifies pages or elements being edited by other users. Keyword RedDot Allows users to assign keywords and categories to content.

245 Glossary of Terms 237 Glossary of Terms Action Menu This is a context specific menu that will allow users to perform various actions on Pages. Some examples of actions that can be performed using the Action Menu are previewing Pages, publishing Pages, and deleting Pages. In SmartEdit, the Actions menu is accessible via the Page menu. SmartTree uses the upper right column to display Action menu links. Action Menu options available to users can be limited by using Authorizations. Active Templates RedDot CMS Templates that contain scripts designed to run prior to publishing are referred to as Active Templates. These allow you to execute scripts that change the display of content based on the value of a placeholder or perform other complex actions and still allow you to publish static HTML pages. Administrator (Ad) The Administrator user is able to perform all activities in RedDot CMS. Typically, Administrators use the SmartTree interface to build templates and structure the project. Workflows, authorizations, publication settings, and general server maintenance are among the Administrators set of responsibilities. Administrators can also provide and edit content. Asset Manager In the RedDot CMS interface, files are managed in folders that can be configured to appear as lists or thumbnail views. The Asset Manager can contain many types of files but it is most often used for images. It is possible to view the contents of Asset Manager folders by clicking the Asset Manager button in the left menu. Asynchronous Jobs Some tasks, such as publishing, run asynchronously, or in the background. Custom jobs can also be assigned to run on schedule in the background and are monitored as Asynchronous Jobs in the Server Manager or Project settings. Author (Au) Using the SmartEdit interface, Authors serve as primary content providers. They are often referred to as RedDot CMS end-users since they are responsible for the creation and reuse of content. Authorization Package The Authorization Package allows a RedDot Administrator or Site Builder to limit access to sections of the Project. These limits are set to apply to users and groups of users in RedDot CMS. Blockmarks Blockmarks are used to perform logical functions on sections of code in the RedDot Template Editor. You can use them to create looping structures, conditional logic, pre-executing scripts, and to set sections of code to appear only within the RedDot CMS environment. Breadcrumb Breadcrumbs display a hierarchical link-path of the current page as it appears in the structure of the site. The Main Link path, which represents the Main Link of each page in the page hierarchy, is used to determine what link elements are used in the Breadcrumb. Clipboard This is a region of the RedDot CMS SmartTree and Server Manager interfaces that is used to store references to tree nodes. Since you can only select one node at a time in the tree, the clipboard can be used for interaction between two or more nodes in the tree. Connect to Existing Page Content Contributors can reuse existing Pages by connecting them to links in other parts of the project structure. Container Containers, similar to iframes and server-side-includes, are structural placeholders that can contain multiple Pages.

246 Glossary of Terms 238 Content Class Content Classes contain Templates and Placeholders, which are used to describe the structure and content elements in CMS Pages. Administrators and Site Builders create Content Classes that allow Editors and Authors to focus on creating and editing content. Some Content Classes are used to describe foundation structures for web pages and other Content Classes describe smaller pieces that appear in one section of a webpage. Content Class Authorization Package These authorizations determine who has permission to access certain Content Classes. This restriction can be placed on any users or groups in the Project and limits editing and usage. Content Class Folder These folders are used to organize Content Classes. Content Element Placeholders that hold static content are known collectively as Content Elements. Examples of content elements are Text, Headline, and Image. Create and Connect Page This is the command that Content Contributors use to add a new Page to a RedDot Project and to connect that new Page to a link. Detailed Authorizations Detailed Authorization Packages allow a RedDot Administrator or Site Builder to limit access to specific Pages, links, or content elements. DirectEdit Content providers are able to directly edit placeholder content in SmartEdit without requiring them to open a separate dialog window. Holding down the Ctrl key and clicking the Edit RedDot produces a solid red bounding box around the element to be edited. DirectEdit is enabled on individual placeholders and is available for Standard Fields (type: numeric, text, and time), Text elements, and Headline elements. Disconnecting a Page This removes a Page from a link but does not delete the Page permanently. Drop Zone When drag and drop is enabled on a placeholder, a red square or Drop Zone indicates where a user can drag a file for entering content into a RedDot CMS Placeholder. Dynamic Element Designating an element as dynamic allows you to create multiple instances of that item on a single page. This is most often associated with creating dynamic anchors where multiple links are needed and that each link requires its own workflow, authorizations or publication settings. Edit Elements via Form Clicking this link in SmartEdit or SmartTree will allow a user to modify all editable content elements on a Page from a single dialog window. Editor (Ed) Editors are similar to Authors with one exception: the Editor can be designated as an approver in a workflow process. External Application Folder This type of folder allows files to be accessed from an external document management system such as Hummingbird DM. Favorites RedDot CMS allows you to store certain tree nodes as favorites. They may consist of content classes, structural elements, and pages. File Folder Non-image files are normally stored in File folders, which present files as a list. Images may be stored in File folders but you will not be able to view them as thumbnails. Folder Authorization Package This can be applied to folders to restrict usage and modification of their contents. Foundation Content Class The Foundation Content Classes represent the outermost Content Class and typically contain the top-level HTML elements.

247 Glossary of Terms 239 GUID Everything in RedDot CMS has a global unique identifier or GUID that is assigned automatically. GUIDs are generally used for development purposes when working with RQL. Due to their uniqueness, Page GUIDs are used by RedDot CMS as the default file names when publishing unnamed html files. (Example RedDot CMS GUID: 221B2282B2D E78234F130BC8) Headline Each RedDot CMS Page requires an identifying Headline, which serves as a non-unique name. Without a Headline, it would be difficult to distinguish one page from another in SmartTree. Headlines can optionally be used as content in Pages and are typically found in elements such as <title> or <h1> <h6>. Homepage This is part of the RedDot CMS interface that allows you to access workflow tasks for Pages individually. Keyword Linking When Pages are connected to a multilink element with Keyword Linking, they are connected to the list based on the keywords assigned to the Page and the element. For example, pages with the Keyword, Highlights will be automatically connected to a List element that is assigned the Highlights Keyword. Keywords and Categories Keywords are meta-data that can be assigned to Pages. They are organized by Categories. Multiple Keywords, from any Category, can be assigned to any Pages in a Project. Keywords are commonly used on Pages for link automation via Keyword Linking. Language Variant Each Project has a default language, which is usually decided during creation of the Project. However, a second set of content can co-exist with the primary content as a variant. Both variant share the same Content Classes, Templates and pages, but the content itself is in another language or a localized version of the main language. For example, you may have a website presented as United States English and decide to have the same website presented as UK English, French, and Japanese. List These structural elements are able to have multiple CMS pages connected. The list is a link to these other CMS pages. In addition to being able to display the link to these other CMS pages, the list is able to display content from the connected CMS pages. Lists are typically used for creating content teasers and navigation. Main Link CMS Pages can be linked in multiple places. The first link element where a page is connected is usually its Main Link. The definition of a Page s Main Link can be changed through the Linking and Appearance Schedule dialog. A Page s Main Link is used by RedDot CMS during publishing to determine the order in which Pages are published. The main link will affect what appears in the Breadcrumb path. The Main Link of a Page will have an effect on workflow and preview precedence. Meta Element Placeholders that access information about the CMS Pages and assets are known collectively as Meta Elements. Examples of Page metadata, accessible through Info placeholders, include Page ID, Original Author, and Keywords. Some examples of asset metadata, which are made available by Attribute placeholders, include file size, width, and file name. Navigation Manager RedDot CMS contains an easy-to-use tool for creating dynamic navigation menus with a drag-anddrop interface. The Navigation Manager makes projct architecture a more rapid and visual experience. Online Help If you are unsure how to use a feature in RedDot CMS, online help is available by clicking the Help button on the left menu. Page A RedDot CMS Page is not the same thing as a published web page. It is an instance of a Content Class or a piece of a published web page. A published web page may consist of one or more RedDot CMS Pages put together, like a puzzle, to create a larger whole. Page Definition Breaking up web pages into managagle pieces can result in complex Pages that require many steps to create. Page Definitions reduce the amount of effort required to construct web pages by creating multiple RedDot Pages in a single step.

248 Glossary of Terms 240 Page ID Every RedDot page is automatically assigned an internal page ID that uniquely identifies it for the RedDot Content Management Server. Page Lock Pages that are being edited by a user are locked from being edited by other users to prevent conflicts. Page Menu The Page Menu is the gray menu that appears at the top of an open Page in SmartEdit. It is only visible if a RedDot Page is open for editing. These links allow you to act on a Page in various ways. Page Preview This shows you what a page would look like as if it were published. Pages Saved as Draft These Pages are incomplete, working versions of pages that will not be publishable until they are submitted for release. Pages Waiting for Correction These Pages have been rejected during workflow and require editing before they are released for publishing. Pages Waiting for Release Pages waiting for release are waiting for an approving user to approve the content. Permanent Page Preview This provides a persistent preview dialog window that displays changes in real-time. Placeholders Placeholders are objects that generically describe content, links, and metadata. This is how RedDot CMS separates content from markup in templates and ensures the reusability of sections of web pages. When Editors and Authors click RedDots, they are editing Placeholders. Managing content in this way allows site editors to update content without requiring HTML skills. Placeholders are also known as elements. Plug-ins Plug-ins allows custom links to be added to action menus. Plug-in links are connected to a script that performs a task in CMS. Project A Project is comprised of assets, structure, Content Classes, and various settings to control and manage content. A single RedDot CMS project may contain one or more web sites. Each project can consist of one to two databases, a project database and an optional archive database. Project Variant A Project Variant is a version of a project. Examples of Project Variants are HTML, XML and PDF versions of a project. The content being presented in different Project Variants is identical, only the presentation of that content differs. Templates are used to define the presentation of content. A single Content Class can have multiple templates (for example, HTML, XML and PDF templates). The Project Variant tells CMS which template to use when a page is being viewed or published. Project Variant Authorization Package This type of authorization can control the ability of users to view and publish Project Variants. Publication Package Publication Packages are used to apply certain publication rules to sections of your website. Those rules define where you are publishing to and what structure the sections of your site will take on the live web server. Publication Structure This is the directory structure of the live web server. This structure is used to map virtual folders in RedDot CMS with folders on the live web server. Publishing Job Automated publishing is handled though Publishing Jobs, which are scheduled to run at regular intervals or can be run manually.

249 Glossary of Terms 241 Publishing Target This is the root folder for published pages on your live web server. You may have one or more publishing targets that enable you to push content to any style of live web environments. Publishing targets allow you to specify the web server to which you are publishing. Publishing targets also allow you to publish from RedDot CMS directly to RedDot LiveServer. RDExecute This command is used for pages containing scripts that are intended to run on the live web server. This is used within RedDot CMS Templates to allow you to preview scripts in the RedDot CMS environment as if it were being executed on the live web server. Redlining Content changes are visible across different versions of pages using Redlining. New content is highlighted in green and deleted content appears as red text with a strikethrough. Released Pages These are pages that have been released from workflow and are ready to be published. Render Tags A specialized syntax has been developed to allow Administrators the ability to create Conent Classes that are used for Navigation Manager. Administrators can determine the functionality and appearance of each navigation level using Render Tags. RQL RedDot Query Language is the RedDot CMS API or Application Programming Interface. Developers use it to shortcut existing RedDot CMS functionality in stand-alone scripts, plug-ins, user defined jobs, and Active Templates Server Administrator This is a type of administrator who generally focuses on server maintenance and user management. IT Server Administrators are often given this responsibility and may rarely use the SmartEdit or SmartTree interfaces. Server Manager The Server Manager is the interface that is used to manage users, projects, database connections, plugins, and server jobs. Site Builder (Si) Almost identical to Administrators, Site Builders can manage most aspects of a project. However, they do not have permission to change the Start Page or access Action Menu items of the Project node. This role is typically assigned to someone on the project team who will build templates and maintain the project structure, leaving higher-level administration tasks to Administrator level users. Sitemap Name By default RedDot CMS uses Page Headlines as the link text appearing in RedDot CMS generated sitemaps. You can override the default behavior and use your own sitemap name by specifying one in the Page properties. This value can only be set in SmartTree and is not available in SmartEdit Page properties. SmartDrop Content can be dragged and dropped into placeholders in the SmartEdit interface. This feature is enabled on individual Standard Field, Text, and Headline placeholders and produces a square Drop Zone next to the element's Edit RedDot. When used with images, the dragged image is added directly into the RedDot CMS Asset Manager. SmartDrop is also able to convert MS Excel files to HTML tables. SmartEdit This is the environment primarily used by Editors and Authors and displays the project as a web page with RedDots to click and enter content. SmartTree The Administrator interface that shows the entire RedDot Project in a tree view. Start Page The first Page that you see in the work area of the RedDot interface is referred to as the Start Page. In SmartTree, this is the page connected to the Project node under Administer Project Structure. In SmartEdit, the Start Page is the first Page you see after logging in. Structure Element Placeholders that represent links and link like elements, are known collectively as Structure Elements. These are nodes of the Project tree where Pages can be connected and define the structural relationship of the Project. Examples of Structure Elements include Anchors, Containers, and Lists.

250 Glossary of Terms 242 Stylesheet Folder This type of folder stores CSS (cascading stylesheet) files. These stylesheets are available through the CMS Text Editor. Stylesheets can be imported or directly entered into special folders that allow you to preview what the stylesheet will look like on a web page. This is generally used when you want to apply a stylesheet to a text placeholder allowing your users to pick from a list of classes to style content. This is useful in that you can restrict most of the formatting options in the Text Editor and still give users options for formatting while conforming to company standards of look and feel. Target Container Target Containers are typically the primary content area, which has been designated as an eligible receiving zone for content, and is not unlike an empty box. A link, when clicked, will target and populate this container with a RedDot Page. Tasks Tasks represent various stages of the content management business process. Pages waiting for release and Pages waiting for correction are examples of Tasks. Template Templates contain the code that describes the layout of Pages in CMS. Templates allow you to create many Pages that share the same structure. If you need to make a change to a Page layout or design you can simply modify the Template and your content remains the same. It is possible to have many Templates in a single Content Class that describe the format of the same content in different ways. This enables you to display your content in different media such as HTML for your website, WML for display on a mobile device, or plain text for printers. Template Editor The Template Editor is a module of the RedDot CMS Interface that can be assigned to various user levels. It is typically assigned to Administrators and Site Builders to edit template markup as well as structure projects in SmartTree. However, you may have Designers and members of your content management team who understand HTML can edit Templates through SmartEdit. By creating this type of user role, you can give them permission to modify existing templates while restricting the ability to create new Content Classes. Interface components of the Template Editor provide access to Placeholders, RedDot Placeholders, and Blockmarks. Text Editor RedDot CMS has a built in Text Editor that enables you to enter and format large blocks of text in Text placeholders. Translation Editor If your website has more than one language version and you are designated as a translator, you can use the Translation Editor features to easily manage multilingual content. Content is generally developed in one language and then translated into others. The CMS Translation Editor is a special interface that allows translators to efficiently target content that needs to be translated from one language to another. RedDots in the Translation editor are presented as waving flags. When clicked, you are given a split view of source language content and fields for translated content. Translator (TL) RedDot CMS has an interface designed to provide a simple environment for the translation of content called the Translation Editor. Translation is typically outsourced to contractors who specialize in translation of web content. Unlinked Pages These are Pages that do not exist anywhere in the project structure. They are similar to an HTML file sitting on a web server that no other HTML web page links to. User-Defined Jobs These jobs can be event controlled or occur at scheduled intervals. They are used to execute RQL commands, run external applications, and scripts that are referenced via URLs. Visitor (Vi) Some users external to the content management process may wish to preview pages built in RedDot CMS. They have use of SmartEdit to preview pages but they do not have the ability to modify content using RedDots. Web Content Manager The Web Content Manager consists of the SmartTree and SmartEdit interfaces. Workflow Any business process related to web content can be managed with Workflows. Actions, such as submitting a Page for release or deleting a Page, can trigger a business process, sometimes requiring one or more levels of approval before content is published. XCMS Document Folder This type of folder is used to create a connection to the RedDot XCMS Document Manager.