Collage Management System by kyu18973


More Info
									Web Content Management System (CMS)
Training Guide – Serena Collage

                              Document Information and Revision History
Version    Date                Author(s)                 Revision Notes
1.0        June 27-July 10     Kathy Hewak               Original

1.1        August 2, 2006      Kathy Hewak               Revised navigation labels in collage

1.2        October 18, 2006    Kathy Hewak               RightFeature.html notation re: deploy of all content
                                                         referencing RightFeature.html file
1.3        March 19, 2007      K. Hewak                  Removed incomplete summary of editing tools

1.4        June 26, 2007       K. Hewak                  Add new LeftFeature.html content

1.5        October 23, 2007    K. Hewak                  Changes to RightFeature usage; using Dreamweaver;
                                                         content revisions
1.6        April 25, 2008      K. Hewak                  Updates to reflect 5.1.3 Upgrade; IE7; Firefox
                                                         compatibility; RightFeature Include; System Check;
                                                         removal of formatting in Inline editor; removal of
                                                         appendix, removal of glossary – to be integrated into
                                                         separate guide appendix

1.7        October 14, 2008    K. Hewak                  Changes to contentsizer metadata and applied

                                     TABLE OF CONTENTS:
 1    Introduction                        ...................................................................... 3
 2 Benefits of Using CMS                  ...................................................................... 3
 3 Terms and Concepts                     ...................................................................... 3
 4 Before you use Collage: Technical Requirements ..................................6
 5 Overview of Collage                    .................................................................... 10
 6 Log in to Collage to Update Your site................................................... 12
 7    Using other Applications (like Dreamweaver) with Collage................. 13
 8 Finding Existing Web Pages ................................................................ 14
 9 Creating New Pages                     .....................................................................17
 10 Creating new folders                  .................................................................... 21
 11 Approving your Document .................................................................. 21
 12 Deploying Content: Get Your Changes Online! .................................... 22
 13 Editing Existing Web Pages using the CMS Inline Editor ..................... 25

          CMS Support Site:      
14 Uploading Documents and Folders .....................................................30
15 Creating Navigation and Site Structure ............................................... 33
16 Creating & Updating Right Feature (Column) Content ........................ 37
17 LeftFeature File – Standards & Criteria .............................................. 41
18 Instructions for Creating a Template (Layout) .................. 42
19 An alternative way to modify your layouts: Modified ContentSizer ..... 50
20 Using Dreamweaver (or any external HTML editors) with Collage ..... 55
21 Version Control                 .................................................................... 57
22 Search Tool                     .................................................................... 58
23 Adding and Modifying Metadata ......................................................... 59
24 Creating a Redirect             .................................................................... 59
25 Addendum                        ....................................................................60

1     Introduction
Serena Collage is a Web Content Management System (CMS) providing asset management, user
and task management, content contribution and deployment features.

In other words…it’s a system used to organize and create content for a web site.

2     Benefits of Using CMS
          Provides consistent, controlled layouts and top-level navigation, including search tool
          Consistent design
          No need for advanced HTML expertise to build sites inside the CMS
          No need for advanced programming to build navigation
          Version control and roll back features
          Templates used to ensure consistency and control of site-wide initiatives:
      o     Branding
      o     Top-level site navigation
      o     Site tools: privacy information, search, site index, etc.
          Ability to set files to deploy (i.e. send files to web server) automatically

Also: Layout Instructions, Ryerson Style Guide & Web Standards are clearly defined and readily
available on the CMS Support Site:

3     Terms and Concepts
3.1       Deploy Folders View
This is the advanced view that most contributors (that’s you!) will use.
We will conduct the training sessions in DEPLOY FOLDERS VIEW.

Deploy View:

          displays the web site content hierarchy
          shows all of the files in the CMS
          lists all assets in the selected directory in the right column pane

3.2    Contribution View
This is the basic view when working in Collage. If you are working in Contribution View, you
have restricted access to folders and functionality.

Contribution View:

       displays the same hierarchical display
       is restricted to containing specific document types (contribution assets)

You might use Contribution View to do one of the following:

               create a redirect (See Section 24)
               create faculty or staff bios using contribution documents (discuss your specific
               needs with Web Services)
               create news stories
3.3    Asset
3.3.1 What is an asset?
Assets are any type of file that may be published on a web site. An asset is any file or object that
is stored in Collage. This includes web pages, images, and other files such as PDF documents.

Assets share the following characteristics:
               All are version controlled
               Can be deployed to a web server
Assets are associated with particular asset types, which determine what additional
information, or metadata, you can save about them.

3.3.2 Examples of Assets
Assets can be any kind of file or folder in Collage, including the following:
               HTML, text, or server pages
               XML Contribution Documents
               CSS files
               Image files, such as GIF or JPEG files
               Links to external web sites or resources
               Master pages
               “Externally” edited assets such as Microsoft Office documents and Adobe Acrobat
3.3.3 Asset Name vs. File Name
Asset Name refers to the “title” of an asset. File Name refers to the actual name of the html or
xml asset in question.

Example: contact.html is the file name while the asset name might simply be Contact.

Note: All assets must be approved with the exception of internal and external links.
(See Section 3.5 for Approval Process)

3.4    Check In / Check Out
When you select a file to edit, you “check out” the file. This locks the file so that no one else can
modify it.

A file that has been checked out will have a lock icon beside it.

When you are finished editing the file, you must then “check in” the file, therefore removing the
lock and making it available for editing by others.

IMPORTANT: If you forget to “Check In” a file, it will not be released to the “live” site when
you attempt to deploy it.

To check in a file, either click on the username next to the lock icon or select the checkbox next
to the asset and choose “Check In” from the toolbar.
3.5    Approval
Asset approval helps ensure that no file is published before you are ready to see it on your site.
Once work on an asset is done and it is ready for publication, that asset must be approved.

Most users will deploy their own assets immediately following approval.

IMPORTANT: Folder assets CAN be deployed to the web server without approval. Folders DO
NOT require approval.

3.6    Deploy
Deployment is the process of transferring your web files (assets) to a web server. Use the deploy
process when you are ready to publish files to your site i.e.

You can choose to deploy all assets in the folder you have selected, or deploy only those assets
that have just changed.
Deployments can be scheduled to occur regularly and automatically or can be performed on
demand (i.e. manually). See how to set an auto-deploy in Section 13.3.

3.7    File Permissions Information
You will only be able to modify files within specific folders in Collage. If someone attempts to
modify a file that they do not have permissions to modify, they will receive a warning from the

If you find yourself needing to edit a file that you do not have rights to, contact Web Services and
they will liaise with the file’s content owner.

4     Before you use Collage: Technical Requirements
In order to use Collage, your computer must be properly configured. The following items must
be setup correctly before you begin.
4.1    Workstation Permissions
In order to use the Collage CMS, you will need to have access to either the C:\Work directory on
your computer, or the Documents and Settings folder associated with your user account.

If you don’t have access to either of these directories, and Collage fails to work, contact Web
Services at

This is most likely to affect you if you work in University Advancement. If you work in UA,
please contact Web Services directly.

4.2    Compatible Browsers
The following browsers are compatible with the Serena Collage CMS:

          Microsoft Internet Explorer 6.0, 7.0 (Windows)*
          Firefox 1.5 or higher (Mac OS X) **
          Netscape Navigator 7.0 on Mac computers

**Not thoroughly tested at Ryerson.

4.3   Run a System Check

1.     Open your internet browser and go to the log in page:

2.     Click on the little grey triangle at the bottom right of screen (see red arrow above)
3.     Select Options & Components

4.     Select System Checks

5.      Run both the graphics and Classic UI checks. (See below)

6.      After completing Step 5, you should get a report detailing the issue. The report will look
        something like this:

7.      If you see "No problems detected", your browser is compatible with Serena Collage. If
        you get an error, please copy (Control-C) the result to your clipboard and paste (Control-
        V) it into an email. Send your email to cms(at) Please replace (at) with @

If you are using IE 7 or Firefox 2.0 and you get the following message after running a system check:

                                  “Version: Not supported (1.6.0_03)”

                      This version of JVM will work fine with IE7 and Firefox 2.0

4.4     JVM (Java Virtual Machine)

For Collage to work properly, you must use the Sun Java Virtual Machine version 1.5.

Instructions for downloading from

        1. Please Right-Click on the link below.

       2. Select the option "Save link as..." or "Save target as..."

       3. Save the file to a location on your computer such as your desktop, My Documents,

       4. Locate the downloaded file on your computer and double-click the file.
          You must use WinZip to open the file ( You can download a trial version of
          WinZip here: - select “Try First”.

       5. Once you have extracted the .exe file from the file using WinZip, you must
          double-click on the .exe file to “run it”. Please follow the instructions once you have
          done this.
       6. Please accept the license agreement once you have opened and run the file.

4.5    Pop-up Blockers
If you have pop-up blocking enabled on your browser, you will have to allow pop-ups from the


Instructions for changing pop-up blocker settings can be found on the CMS Support site:
4.6 Install Certificates
In order to avoid certificate errors, please download the Entrust Certificate from the CCS web

Installing this certificate will avoid getting security warnings from trusted Ryerson servers.

4.7   Run ActiveX
When using Internet Explorer 7, you may see a yellow box at the top of your browser that looks
like this:

You must install the add-on. If you do not, Collage will not function properly. You should only
have to do this once in your browser of choice. However, if you work on multiple browsers or
multiple computers, you will have to install it on each - but only once.

4.8   Update Registry
Instructions for downloading:

Please “Right Click” on the link below.

Select the option "Save link as..." or "Save target as..."
Save the file to a location on your computer such as your desktop, My Documents, etc.
Locate the downloaded file on your computer and double-click on the file to run it.

5     Overview of Collage
5.1    Program Bar
       The Program Bar is accessible in the upper right corner of the Collage window.

       You can use the Program Bar to:

              Set your workstation preferences – most commonly used to change the HTML
              editor from Inline Editor to Dreamweaver, etc.
              Display the online help system
              Refresh your current view

5.2    Command Options of the Deploy Folders View
         Button         Command             Description
                        New Folder          Create a new deploy folder.
                                            You can apply different asset types to folders. E.g.
                                            Left Navigation Level One is a folder asset type.
                        New                 Create a new asset.

                                            NOTE: You cannot create new contribution xml
                                            assets from this option: you must be in Content>
                                            Contribution View to do so.
                        Upload              Create new assets by uploading documents into
                                            Collage. Create new versions of existing assets by
                                            uploading as asset of the same name.
                        Edit                Check out and edit the selected asset(s). This
                                            command opens the asset(s) in your preferred

                                            If the file is an HTML or text-based file, or a
                                            content contribution document, it may open in the
                                            Collage inline editor. This depends on whether
                                            Internal is set as your Content Editor
                                            preference for these types of document.

                                            TIP: You can also open individual files for editing,
                                            simply by the clicking the asset name in the asset
                                            list: This checks the file out and opens it in your

Check In     Check in the selected asset(s).

Check Out    Check out the selected asset(s).

Undo Check   Undo check out of the selected asset, to unlock it
Out          without creating a new version, and make it
             available to other users.

             Undo checkout discards any changes made while
             the file was checked out.
Get Copy     Place a copy of the selected asset(s) in your
             desktop work file location without checking it out.
             [example: C:\WORK\
Store Copy   Store a copy of your work file on the Collage server
             without checking it in, so that other users can get a
             copy of it.
Preview      Display a preview of the selected asset in a
             separate browser window.
Approve      Approve the selected assets.

More         Display a list of additional commands, including:

              • Copy… Copies assets to a new location
              • Move…Moves selected assets to a new location
              • Delete…removes selected assets from Collage
              • Properties…Displays asset properties
              • Explore… (Windows only): Displays the work
              file location for checked out assets
              • Verify Links… Tests all links in the selected
              • Replace…Replaces all occurrences of a file
              reference in the selected asset with a new file
Properties   Modify property values for any asset. You can
             modify any of the following while the asset is
             checked out:

             General properties:

               Asset name
               File name – TIP! This is where you rename
               a file!


                                                Page keywords
                                                Page description
                                                Page Title

                                             While viewing an asset’s Properties, you can
                                             Preview and view Source code for that asset.

                                             Version Control is available in Properties view.

                                             The Information tab allows you to view which
                                             files are referred from a specific asset.

                                             The Information tab allows you to view which
                                             files a specific asset refers to (i.e. links or

                                             Deploy History: Users who want to view the last
                                             date an asset was deployed must select the deploy
                                             map associated with the asset in order to view the
                                             Deploy History.

6      Log in to Collage to Update Your site
The web site is often referred to as the “production” or “live” web site.

The production environment is where your files will be released “live” for viewing by your online

               1. Go to in your web browser.

                   Bookmark this address!

Enter your matrix username and password and click on “Log In”

If you do not remember your matrix id and password, please contact the CCS Help Desk (6806)
to have them reset it for you.

Note: This is the same username and password you use to access your webmail,,
etc. For example, it may be something like khewak, k2hewak or kathy.hewak.

Next, select the project where your folder is located.

       >> Select Production, Production 2 or Production 3

       >> Select “Open”.

Once you have logged in successfully, select the tab called “Content”. Your folder will be located
in the Content tab, not the default “Home” tab.

7     Using other Applications (like Dreamweaver) with Collage
7.1   HTML files
      If you do not want to use Collage’s Inline Editor, you can choose to edit your HTML files
      (or xml files) in the application of your choice.

             1. To do so, click the “preferences” icon in the top right-hand corner of the
             Collage workspace

             2. In the window that appears, select the “Content Editors” icon in the left-hand

             3. Select the asset type you would like to associate with an editor. In the example
             above, we will associate HTML files with Macromedia Dreamweaver.

             Click on the text “HTML Document”.

             4. On the lower part of the screen you will see “Type”, change this to ‘User
             Defined’ in the drop-down.

                5. In the “Application” field: click on ‘Browse…’ to find the application’s
                executable (.exe) file on your computer.

                6. Once you have found the correct application on your PC, click the “Apply”

Repeat these steps for every application you will be using with Collage. Here are some common
default paths to popular applications:

Note: These paths may vary from computer to computer.

       Macromedia Dreamweaver: C:\Program Files\Macromedia\Dreamweaver MX 2004\

   Microsoft Word: C:\Program Files\Microsoft Office\Office\winword.exe
 or C:\Program Files\Microsoft Office\Office11\winword.exe

   Excel: C:\Program Files\Microsoft Office\Office\excel.exe or C:\Program Files\Microsoft

      Adobe Acrobat: C:\Program Files\Adobe\Adobe Acrobat 7.0\Acrobat\Acrobat.exe

      Adobe Photoshop: C:\Program Files\Adobe\ Adobe Photoshop CS2\Photoshop.exe

8       Finding Existing Web Pages
8.1      Let your web address be your guide!

If your site is already in the CMS, it should be easy to locate your content in Collage.
Please note that your folder will be in one of three Production folders – production,
production 2 or production 3.

       The URL tells you:

8.2    What if there is no filename in the URL?

Sometimes there is no page name in your URL, just a site name and folder.
For example:

In this case, the file you are looking for is called “index.html”
For example:

Browsers will automatically look for an index.html file if another filename is not specified in the

If you don’t see a file name in the URL, look for the correct folder, then find the “index.html”
page in that folder.

8.3    Navigate to your files

           1. Log in to Collage at:

      as described above.

           2. Click on the “Content” tab at the top of the screen.

           3. Next, make sure “Deploy Folders” is displayed (see below). If it is not, click on
               this icon to have the menu appear. Then select “Deploy Folders” from the
               drop-down menu.

           4. Browse Production, Production 2 or
              Production 3 to find the folder where your file(s) exists.

               Hint: your folder name is usually the same as your URL
               ( e.g. if your site address is
      browse for a folder called “nutrition”

               a) Click on the folder name ( Production, Production 2 or
      Production 3)

               b) Next, click on the folder name for your content area.


        To have sub-folders appear in the right-hand column, click on the folder name

       If you want sub-folders to appear in the left-hand pane, click on the    icon next to the
       folder name.

           5. Locate the file you want to edit.

               (Editing will be covered in the upcoming section: Editing Existing Web Pages
               using the CMS Inline Editor)

9     Creating New Pages
The following is an overview of the process of creating new pages in Collage.

9.1   Creating a New HTML File (web page): Step-by-Step

Once you have navigated to the folder where you want to create your HTML files, do the
following to create a new HTML file:

              1. Click the “New Document” icon to create a new HTML page in the folder.

2. In the dialog box which appears, fill in the following information:

 a) File name: This is the name of the web page. This will be the name of the page
 as it appears in the URL of your web site.

 For example: “holidays.html” would be the name for a page called “Holidays’ and
 the URL of the page might look like this:

 b) Description: Type in a short, descriptive title for the web page.

  3. Your new file will appear in your chosen folder (e.g. test.html below).

  4. Click directly on the file name to check out and open the file at the same time.
     Or, select the checkbox to the left of the filename and then select “check out”
     using the horizontal menu bar (see image below), then “edit”.

  5. Your new file will open in the Collage inline editor (shown below.)

Note: If you are using and external HTML editor such as Dreamweaver, once you
select an asset name, or select “Edit”, Dreamweaver will launch and you can edit the
file directly in Dreamweaver.

  6. Enter the page title and set the style to Heading 2 to be consistent with style.

           7. Enter the Body text.

               a) To copy and paste into this text area, first copy and paste your content into
               Windows Notepad or another plain-text editor before you copy and paste into

               This will help maintain correct paragraph and style formatting. It will also
               prevent copying extraneous Word formatting which can create poor HTML
               code & affect the display of the page in a web browser.

               CAUTION: Do not paste content directly from Word into Collage.

               b) To remove any extraneous formatting:

             - Highlight the test in the body text section of the document
             - Click on the “Clear Formatting” button on the bottom-right corner of
              the window (see screen capture above)

             c) Source View: The Source View allows you to edit the HTML directly.

           8. Next, click on the “Save” button to save your changes.

             Warning: If you click on “Exit”, you will be prompted to save your changes or
             exit without saving them. If you click on the “X” in the top right of the window,
             your file will close without saving and all edits will be lost.

           9. To view changes to your page – you can preview them within the Inline
              Editor by choosing the “Preview” tab.

           10. You will be prompted to save your changes. Please do so.

9.2   Review: Outline for Creating New HTML Pages
             1. Navigate to the folder where you want to create your new web page
             2. Create the new web page
             3. Enter the headline and the body text, either by typing or by using copy-and-
                paste from Windows Notepad (not Word)
             4. Format the body text as necessary, using “style” formatting to create a
                document structure
             5. Save the file & exit the editing window
             6. Preview the file
             7. Make sure the file is Checked In
             8. Approve the file

                  9. Deploy the file
                  10. Check your file for accuracy on your web site

Important: Filenames and folders for web pages must only contain letters, numbers, and the
underscore and dash characters.

Please avoid abbreviations, do not use spaces, avoid unsafe and reserved characters (% < > # $ & + /
: ; = ? @ { } | \ ^ ~ [ ] `) and make the filename as intuitive as possible since it will appear in your
URL/web address.

See more in Guidelines for Directory and Naming Conventions:


     10 Creating new folders
   Creating folders is as simple as creating a new file.

           1. Navigate to the folder where you want to create new sub-folders.

           2. Select “New Folder” next to the “New Document” command

           3. Fill in the fields; name, description and folder type (this will usually be the
              Default/Deploy unless you are creating navigation folders; see Section: Creating Left-
              Hand Navigation)

           4. Select ‘OK’

   11     Approving your Document
   Once you have created and edited all the content files for your site, you must “Approve” your
   assets (files).

   Find the edited document in your folder.

Click on the icon on the far right side of the row that contains your document (as shown below):

Notes on the image above:

19 refers to the last version approved

The checkmark indicates a version(s) not approved; waiting for approval

21 refers to the last saved version or current version that is not yet approved

You will then see a dialog box that reads “Asset Approved”. Click “OK” to finish.

The black checkmark will then disappear after the file is approved. This indicates that the file is
ready to be deployed to the production web server (i.e. to your web site).

12     Deploying Content: Get Your Changes Online!
The deploy procedure takes all the approved assets (files) and publishes them to the
web server, overwriting the previous version of the file(s).
12.1 Deploying Folders

1. Click the Deploy tab in the horizontal menu bar.

2. The deploy window will then be displayed.

3. Click the “Advanced…” button
4. Click the Select Folder option

5. A tree view will then be displayed.

6. By clicking on this icon   , navigate to the folder containing your assets.

7. Once you have chosen your folder, select the Deploy map associated with
your content. If you don’t choose the correct Deploy Map, your content will not deploy.
For example: Graduate Studies would be the deploy map for any content within the /graduate

8. Click “OK”.

12.2 Deploying Individual Assets

If you only need to deploy individual assets, instead of choosing the “Select Folder” option, you
would choose the ‘Select Asset’ option and navigate through the site to the specific files you wish
to deploy.

You can deploy multiple individual assets in separate folders but you will need to click directly
on a folder name in order to see the files within the folder.

Simply click on the asset name to choose it. Once you have all the assets you need, click “OK”.

12.3 Setting up an Auto-deploy

If you want to deploy a file or group of files at a specific time, you can schedule an auto-deploy.

1.     Select the Deploy Tab> Choose Schedule from the dropdown.
2.     Select the Deploy Icon>

       Fill in the details:

       - select the assets or folder

          - select the deploy map associated with the assets

          - select termination error level – always ONLY FATAL ERRORS

          - select frequency - once you have entered your dates, select   to close the calendar

          - email notification

13        Editing Existing Web Pages using the CMS Inline Editor
     1.  Log in to Collage as previously described
     2.  Next, browse to the folder in Collage that contains your web pages.
     3.  Click on the checkbox next to the file you wish to edit.
     4.  Choose the “Edit” icon from the Collage toolbar.
     5.  Collage’s Inline editor (the default setting) will open your content for editing. The
     following dialog box will appear. Choose ‘Yes”

    Note: If you have changed your preferences to open HTML files in Dreamweaver, the file
    will open in Dreamweaver instead of the Collage Inline Editor.

    6.   Once your file is open, you can now edit your page.

Caution: Please wait until the file has fully opened and is no longer loading the editing toolbar.
If you click on the page too soon, the editing toolbar may become unavailable.

If this happens click the “refresh” button at the top right corner of your page.

    7. You will notice that at the top of your window, there is a set of HTML editing tools at
    your disposal. These tools function in the same way as they would in a word processor such
    as Microsoft Word.

            To enable the editing toolbar, you must place your cursor in the text area. The
            toolbar will no longer be greyed out.
            If some editing icons are still greyed out, this means they are unavailable for a given
            field or document.
            When you are finished editing the page, click “save” or “exit” as outlined previously.
            Do not close a document by clicking on the X in the top right corner – this will close
            your document and no changes will be saved.

13.1 Resize Web Images
Before you add an image to your page, please make sure that the image has been resized. It is
recommended that you not upload original digital photos or scanned images into Collage that
have not been optimized (i.e. reduced in size) for web display.
Resizing of images and web display optimization is typically done using a photo editing
application such as Adobe Photoshop.
If an image is too large, your page will be slow to load. If it is too wide, it will not appear
correctly on your page.
13.2 Add an image to a page:

In the editing window, place your cursor where you would like the image to be inserted.

1. Click on the ‘Image” icon        in the editing toolbar.

2. When you click on        , the “insert Image” dialog box will appear:

3. If the image already exists in Collage:

a. Click on the name of the folder where the image has been uploaded.
b. Select the checkbox next to the image you wish to use.
c. Continue to Step # 6 listed below.

4. If you want to add a new image to Collage:

a. In the left-hand column, click on the “images” folder within your web folder

Note: We recommend that all images be aggregated in one “images” folder within your

b. Click on the “New Image…” button on the lower right of the window (see below).
When the image upload box appears, browse to the location on your computer where the image
file is located.

c. Once you have located the image file you wish to upload, click “OK”.

d. The image will then be uploaded to your images folder. From here the image appears in the
right-hand panel. You can then insert this image into your file as described previously.

Finally, type in descriptive text in the Alt: field. Limit: 80 characters

Note: The alt tag provides alternative text for the visually impaired or for users who have
disabled images. Alt tags improve accessibility to web content. Also, using alt tags containing
keywords can improve the search engine ranking of the page for those keywords.

To finish placement of the image, click the “OK” button.

Your image will then appear in your web page.

13.3 Creating Links using the Link Tool
13.3.1 Creating internal links

       1. While using the inline editor, click the “Link” button.
       2. Select the Internal tab

       3. Navigate to the document that you want to link to.
       4. Complete the form with your link details and click “OK”.

13.3.2 Creating External Links
       1. While using the inline editor, click the Link button
       2. Select the External tab
       3. Click the New Link button

       4. Type in a name for the URL. This could be the web address. e.g.
       5. Add the URL next to the appropriate prefix (http://)
       6. Click “OK”

13.3.3 Create a link to an Email address
Collage’s inline editor will automatically create an email link out of any email address that you
type or paste into your page. Simply type the email address in your page. e.g.

       Note: If you type an email address in a heading, it may not appear. Add your email
       addresses in the body text.

14    Uploading Documents and Folders
14.1 Upload Files Overview
External documents can be uploaded to Collage.

       o   Navigate to the folder where you want to upload the new document(s)
       o   Click the Upload button and follow the on-screen instructions

Once uploaded, the new content can be accessed in the same way as an existing document. You
can link to PDF or Word documents just as you would link to HTML files. Also, if you upload
images, you can now add them to your web pages.


Use the wildcard(*) character to upload multiple files within a directory. When you Browse
your computer to locate files to be uploaded, choose one file to ensure the path gets copied.

Example C:\WORK\ Production\_no_task\about\advancement\index.html
Then modify the file name to:
C:\WORK\ Production\_no_task\about\advancement\*.PDF

This action will copy all PDF files to Collage. Similarly, you could choose all html files by typing
*.html or all files within a directory by using *.*
14.2 Uploading and Replacing Files
This procedure will allow you to upload Word documents, images, and PDF files into Collage so
that you can access them in your web pages. Once you upload these documents, you can then
link to them or add images to your pages.
1. Log in to Collage.
2. Click on the “Content” tab and select the “Deploy Folders” view
3. Open the folder where you want to upload your files

       a. In this example, we will upload a PDF document called “Events.pdf” to the
       /faculties/business/documents/ folder.

       b. You should see the contents of the folder you wish to upload to in the right-
       hand column.
       c. Select the “Upload” button on the Collage toolbar

5. The “Upload File” dialog box will appear (see image above).

6. Select “Add Files” if in Deploy view (as in the example above) or select the “Browse…”
button (Contribution View).
7. The ‘Upload Files” or “Choose file” dialog box will then appear.

8. Browse your computer to find the document you want to upload (from your C:\ drive; D:\ or
elsewhere on your computer). Once you have selected the file, click “OK”.

9. Next, click the “Upload” button to begin the file upload.
Depending on the size or number of file(s) you are uploading, this can take several minutes.

Once the upload is complete, you will see the file(s) displayed in the folder you selected.
Notice that a newly uploaded file creates an unapproved version of the file. You must approve
the file before it will be published to live. Please refer to the section “Approving Your Document”
in this guide.

14.3 Replacing Single Files in Collage
At times, you may need to replace a document within Collage with a more recent version, while
preserving all links within Collage to that document. The following procedure describes how to
replace a single file in Collage.

       1.    Go to the folder where the file needs to be replaced.
             In this example, we will replace the “Events.pdf” with a newer version.

       2.    Click the checkbox next to the file that needs replacing.

       3.    Select the “Upload” button on the Collage Toolbar

       4.    The “Upload new copy of these assets” dialog box will appear. Select the
             “Browse…” button, and choose the location of the new files on your Desktop (or
             elsewhere on your computer)

       5.    One you have highlighted the file, click the “Open” button

       6.    Next, add a “Check in comment” to the Check-in Comment text field to explain
             why you are replacing this file. This comment will become part of the version
             history for this document

       7.    Click the “OK” button to begin the file upload

       8.    Once upload is complete, you will see the file displayed in the folder you selected.

 Note that a newly uploaded file creates an unapproved version of the file. You must approve
 the file before it will be published live to the web server. Please refer to the section
 “Approving Your Document” in this guide.

14.4 Uploading Directories/Folders:
To upload an entire folder or directory, it is a similar process to uploading individual files.
Unfortunately, there is a bug in Collage that does not allow you to Browse for folders once you
have selected the Add Directory option.

This means you must know the path to the file (e.g. C:\WORK\
Production\_no_task\about\advancement\index.html) or you can Browse within the Add
Files option, and then copy the path you require.

Once you have copied the path (highlight file path and hit Control-C), you will then Cancel Add
Files and go back and choose Add Directory. Here you will paste in your path.

15     Creating Navigation and Site Structure
Site structure determines the way in which content is organized in the website.

Within Collage, the physical structure (files and folders) also represents the logical, navigation

To create navigation, you need to create a specific type of folder. (See creating Left-hand
navigation below)
15.1 Creating Site Structure and Layouts
Layouts or templates define the combination of navigation types available.
The following outlines the types of navigation available and identifies which are optional within
the Templates:

1 - Header/Footer

2 - Top Bar Navigation

3 - Information Stream
Navigation (Optional)

4 – Information Stream
Sub Navigation

5 - Left Side Navigation

6 - Right Feature Content /
Navigation (Optional)
** This stream of navigation is only
optional for sites listed as Information
Streams (i.e. only in Undergraduate,
Graduate, etc.)

6 – Left Feature Content

The top two levels of navigation are fixed and cannot be changed. They remain consistent
throughout The following provides an overview of how to create left hand
navigation structures.

In general, all navigation is managed through the creation of specific navigation folder
15.2 Creating Left-Hand Navigation
    1. Go to the folder where you want to create navigation.
    2. Click “New Folder”. The New Folder dialog box appears.

   3. Type in the folder name - Do not add an extension
       For example: Name: contact
   4. Type in the Description. This is the label/text that appears in the navigation menu.

Note: The Description field in individual files (assets) serves a different function than the
description of folder names. When you are creating site navigation, the description you input is
what is displayed in the navigation menu. This is not the case for an index.html file, for

5. Click OK.

To preview what your navigation will look like. You must select an index.html file or another
HTML content file, and select “Preview”. This navigation menu will appear like this in your web

15.3 Creating One to Three Levels of Left Navigation

There is a specific hierarchy for varying levels of navigation within a directory.

The first level of navigation folder type should be:
        >> Left Navigation Level 1 Subfolder

The second (or secondary) level of navigation should have the following folder type:

       >> Left Navigation Level 2 Subfolder

Important: Any folder with applied secondary navigation needs to be within a level 1
navigation folder.

The third level navigation folder is:

       >>Left Navigation Level 3 Subfolder

Important: Any folder with applied tertiary navigation needs to be within a level 2 navigation

15.4 Left Navigation Root Folder

The Left Navigation Root Folder asset type should be applied to folders that contain html files
where you want the first level of navigation to appear.

For example, if you have a subfolder called /archive that is not in the left-hand navigation but
you want the site’s first level of navigation on HTML pages within /archive, then you assign the
folder the asset type: Left Navigation Root Folder.

15.5 Numbering Navigation Items:

The order in which items appear in the navigation menu is controlled by the Section number
field in the folder’s properties (Metadata).
To modify the navigation sort order:

       1. Select the folder that represents the navigation element you want to change
       2. Select “Properties”
       3. Switch from General to Metadata view

       4. Entire the desired sort order as a two-digit number

Note: It is important that you enter the two digits, as in 08 and not 8. The navigation item will
not appear properly if you do no use this format.

       5. Click Apply

16 Creating & Updating Right Feature
(Column) Content
16.1 How do I update the Right Column content?
Within Collage, the Right Feature column content is maintained
in a single file called RightFeature.html. For more information
on integrating this file into your page layout, please see
upcoming section: Instructions for creating a

Right Feature content is not, strictly speaking, a navigation
element. However, it can be used for creating site-wide navigation links. Right Feature content
is best created and maintained using any external editor such as Dreamweaver or Notepad.

However, it can be maintained using the Inline Editor.

After you have edited the RightFeature.html file, and you are ready to deploy it, you must
remember to deploy ALL OTHER HTML files in that folder or subfolder that display the
contents of the RightFeature.html file. You must deploy the entire folder’s HTML contents,
including the RightFeature.html file or your pages will not be updated.
You can have more than one RightFeature.html file in a site but you can only use one
RightFeature.html file per folder or subfolder.

16.2 Which Type of RightFeature.html File Should I Use?
If you use the Inline Editor to edit your web pages, you should use what is referred to in this
document as the “table version” of the RightFeature.html file.

If you use an external HTML editor, such as Dreamweaver, you can also use the “table version”.
If you are experienced with CSS and DIV tags, you may use the “DIV version” of the
RightFeature.html file.

From November 2007 on, all new sites will be provided with the “table version” of the
RightFeature.html file. If your site has already been created, you may choose to change the
contents of the RightFeature.html file to use what is outlined in this document for either the
“table” or “DIV” version.
16.2.1 RightFeature.html Code - Table Version
This version of the RightFeature should be used by those new to HTML or those using the Inline

If you need to create a new RightFeature.html file, you can copy the following code and paste it
into a RightFeature.html file.

If you are using the Inline Editor, you do this by clicking on the Source tab while editing the
RightFeature.html file:

Copy and remove all the existing code in this view.

Paste the following code into the source field:

<!-- right panel -->

<table id="rightfeature">

<table class="rightfeature_inside_table">

<!-- right feature header row - start -->
<tr class="rightfeature_title_panel">
<td class="rightfeature_title_text rightfeature_title_table_cell">

Header goes here

<!-- right feature header row - end -->

<!-- right feature content row - start -->
<tr class="rightfeature_content_panel">
<td class="rightfeature_content_text rightfeature_content_table_cell">

Content goes here

<!-- right feature content row - end -->



<!-- end right panel -->


IMPORTANT: Do not copy the code directly from Word into your file. Paste the code into
Notepad. Copy and paste the code from Notepad into your page. This will ensure that no
hidden code gets pasted into your RightFeature.html file.

Once you have pasted the code into your Source view, simply click on the Edit tab. Allow the

Continue to edit and save the file.

16.2.2 RightFeature.html Code - DIV Version
This version of the RightFeature should be used by those using external HTML editors who are
familiar with CSS and DIV tags.

Using your external HTML editor, replace existing source code with the following code:

IMPORTANT: Be sure to copy and paste code into Notepad first, and copy and paste from
Notepad into your file. This will prevent Word markup from appearing in your HTML.


<!-- right panel -->

<div id="rightfeature">

<!-- right feature header row - start -->
<div class="rightfeature_title_panel">
<div class="rightfeature_title_text">

Header goes here

<!-- right feature header row - end -->

<!-- right feature content row - start -->
<div class="rightfeature_content_panel">
<div class="rightfeature_content_text">

Content goes here

<!-- right feature content row - end -->

<!-- end right panel -->


16.3 RightFeature.html Q&A - DIV and Table versions

Q: What is a DIV tag?
A: The <div> tag defines a division/section in a document.

Q: Why introduce a table version of the right feature?
A: Collage's inline editor has a limited compatibility with DIV tags. Specifically, images and
links cannot be added within the boundaries of a DIV region. The table version allows inline
editor developers to have more flexibility.

Q: What is the difference between DIV regions and tables?
A: DIV regions make content easy to manage, style, and manipulate, since they are entirely
styled using Cascading Style Sheets (CSS). However, DIV tags are not fully understood by the
Collage inline editor. Tables may also be styled using CSS, but they are more structured and lack
the layout flexibility of DIV regions. Tables are compatible with the inline editor.

Q: Who should use the DIV version?
A: The DIV version should continue to be used by developers who have familiarity with DIV tags
and have access to an external HTML editor such as Dreamweaver.

Q: Who should use the table version?
A: The table version should be used by developers who use the Inline Editor, or those who are
not comfortable or not familiar with DIV tags.

Q: What is the width of the right feature area?
A: The width of the right feature area is 171px.

This information is also available:

16.4 RightFeature Include
Currently, in order to update your right feature column, you must edit your RightFeature.html
file and deploy it and ALL the files referencing it. Most often, we end up having to deploy entire
folders. This is not only inefficient but time consuming.

Using the Right Feature Include file, you will now be able to update all your Right Feature
column content with the deploy of a single file.

Instructions for Use:

17    LeftFeature File – Standards & Criteria
Content owners can include a leftfeature.html file in their layout only if they are using folders to
apply left navigation to their content. Technically, this file will only display below left navigation
and thus precludes any layout that does not apply left navigation. This file can be used in
template options 1, 2 or 3.

Content in this section should be limited to promotional items only and in general, be graphics-
based to provide a contrast between it and the text navigation above.

Examples of content appropriate for this section include:

           Feature area for photo galleries, contests, newsletter sign-up, interactive elements,
           Promotion of new features or site content

This space should not be used to build additional site navigation or to showcase news
and events text.

The maximum size of this promo area is 130px (width) x 230px (height).

More information on this feature can be viewed at the CMS Support Site:

18     Instructions for Creating a Template (Layout)
18.1 Layout Variations
There are seven common layouts. Each variation requires the manipulation of specific
required files.

Please note that the terms template and layout will be used interchangeably in this document.
The following information is also available online at:
18.2 Required Files
The following files MUST be in the root folder of your website. If you delete any of these files,
your page will display an obvious error (see below).

       1. AskRyerson.html

      - Originally created for the Undergraduate section, this file allows a module to be placed
     above the content area. If left blank (as it should be in most cases), nothing appears on
     the page above the content area.

     2. index.html

     - The file containing content for the main page of the site. This is generally the center or
     center-right area of your page. This area can contain images and text.

     3. RightFeature.html

     - A file used to populate the right column of your page. Images not exceeding 171 pixels
     can be used in this section, along with text.

     4. LeftFeature.html

     - A file used to populate the left content area below left navigation.

     See for more information on how to
     properly use the LeftFeature.html file.

     5. SectionBanner.html

     - The file containing content for the section banner of the site. This file ONLY contains
     images and must be edited using an external HTML editor, not the Inline Editor.

     6. MainNav.xml
     - Although this file is required by the master template, it's currently being phased out.
     Please leave the contents of this file as-is (i.e. empty).

     7. ContentSizer.txt
     - Determines if a page should display a right column, left column, both, or none at all.
     Values for each template are shown below.

18.2.1 Template 1: Three Column Layout

     Template Page:

     Description: Page is divided into 3 main columns: left-hand side navigation area,
     main content area and feature/highlighted content area.

     ContentSizer.txt Value: <div id="main_content_both">

     Examples: A variation of this template is currently used for Undergraduate, Graduate,
     Alumni, About Ryerson-President’s message, Campus Life, and News & Events.

18.2.2 Template 2: Four Column Layout

     Template Page:

     Description: Page is divided into 4 main columns: left-hand side navigation area, small
     content area, main content area and feature/highlighted content area.

     ContentSizer.txt Value: <div id="main_content_both">

     Examples: A variation of this template is currently used for Research & Innovation.

18.2.3 Template 3: Two Column Layout with Left Navigation Only

     Template Page:

     Description: Page is divided into 2 main columns: left-hand side navigation area, and
     main content area.

     ContentSizer.txt Value: <div id="main_content_left">

     Examples: A variation of this template is currently used for Supporting Ryerson,
     Campus Maps, Contact Ryerson, and About Ryerson.

18.2.4 Template 4: Two Column Layout with Right Feature Column

     Template Page:

     Description: Page is divided into 2 main columns: main content area and
     feature/highlighted content area.

     ContentSizer.txt Value: <div id="main_content_right">

     Examples: A variation of this template is currently used for Continuing Education.

18.2.5 Template 5: Four Column Layout with Right Feature Column

     Template Page:
     Description: Page is divided into 4 main columns: 3 main content areas and
     feature/highlighted content area.
     ContentSizer.txt Value: <div id="main_content_right">
     Examples: A variation of this template is currently used for Faculty & Staff.

18.2.6 Template 6: Portal Layout

     Template Page:

     Description: Page is divided into 2 main columns: 2 main content areas.

     ContentSizer.txt Value: <div id="main_content_none">

     Examples: A variation of this template is currently used for Future Students.

18.2.7 Template 7: Multi-Column Layout with Right Feature Column

     Template Page:

     Description: Page is divided into 3 main columns: 2 main content areas and
     feature/highlighted content area.

     ContentSizer.txt Value: <div id="main_content_none">

     Examples: A variation of this template is currently used for Careers & Jobs.

18.3 Using different layouts in the same web site
Please note that while root folders (e.g. must have all the
required files; sub-folders (i.e., automatically apply
the same files from the root folder. Therefore, sub-folders do not require duplicates of these

The exception to this appears when a different layout is required for a different subfolder. In
this case, you will need to put copies of required files in those sub-folders requiring a different
layout than the root. Most commonly, you will need to put copies of the RightFeature.html,
contentsizer.txt and a new index.html to produce a different layout than the root.

Since the required files modify the layout to all HTML files within the same folder, you can only
have ONE layout applied to that folder.

This information is also available online:

Tip: You may get copies of the required files directly from Collage. Log in to Collage, and go to
Project: Production> folder /templates.

If your web site is in the same project, you can copy these files directly to your folders by using
the “copy” command. If there are existing files of the same name, the copy command will create
a new version of the file.

If your site is in another project - Production 2 - you can select the required files and
perform a “Get Copy” function which will make a copy of those files and place them on your
hard drive in your C:\WORK\ Production\_no_task\templates folder.

You can then “Upload” the files from the C:\WORK\
Production\_no_task\templates\ location to your web site folder using Collage.

19 An alternative way to modify your layouts: Modified
A change has been made to the ContentSixer.txt file that sits in your web site's folder.

This is the file responsible for controlling the layout of your pages.

The ContentSizer.txt file controls whether a page includes left navigation, the right feature
column, both or none.

Currently, if you want a three column layout (see example:, you
must edit the contentsizer.txt file to read:

                <div id="main_content_both">

Now, to change the layout of the file, you must do the following:

1. Select the ContentSizer.txt file

2. Then select: Properties

3. Toggle from General to Metadata

4. Check out the file. [Note: You can check out the file once you selected the file as well.]

5. Modify the field called “layout” to read one of the following: left, right, both or none.

6. Select “Apply”.

The impact of this change:

Changing the ContentSizer.txt in this way means that you no longer have to modify or delete the
content of the RightFeature or Left Navigation Folders to have them NOT appear in your chosen

But, in order to use the new layout field in the metadata, you must also change the
masterpage file that is associated with your HTML files.

If your site is in Project: Production or Production 2, you must change the
masterpage file being referenced by your HTML files.

If your site is contained in Project: Production 3, you do no have to make any
changes to your HTML files, only the ContentSizer.txt file.

The fastest and easiest way to change all your files at once is by using the Search option.
19.1 Changing the Masterpage

1. Select “Search” from the dropdown list under Deploy Folders

2. Select file ‘Type’: HTML Document and ‘Search In’ your web site folder

Your search result will look like this:

3. Select the HTML files within the search results that need to have the masterpage changed.

Exclude or de-select the following files:

* RightFeatureIncluded.html
* RightFeatureContent.html
* redirect index.html

You MUST select the following files:

* Content html pages (index.html, program.html, history.html, staff.html, etc.)
* RightFeature.html
* LeftFeature.html
* SectionBanner.html

4. Once you have selected all the html files, click on the “Properties” tab

5. Check out the assets from this view

6. Once assets have been checked out, select the checkbox next to “Applied master-page” and
change it from “default” to “MasterPageContentSizer.html” and click “Apply to All”.

7. Once you have applied the new masterpage, check in all the files and approve them.

Last Check:
1. Preview your content (your HTML files).
2. Make sure all files are checked in and approved.
3. Redeploy your site.
4. Check the live site.

Special Cases:

XML files (contribution documents) are a special case.

If there are some contribution documents in your folder, you should keep the ContentSizer.txt's
metadata and the content identical.

20     Using Dreamweaver (or any external HTML editors) with
If you use an external HTML editor, such as Dreamweaver, you can continue to use this software
in conjunction with Serena Collage. For the purposes of this document, Dreamweaver will be
referenced as the preferred HTML editor.
20.1 Overview of Web Updating Process:
The same overall process applies to users who edit using Dreamweaver as it does with those
content developers using the Inline Editor. However, there are some notable changes to the
workflow process when using an external editor.

20.1.1            Log in

         Log in:

              o    User name = your matrix ID
              o    Password = the same as your matrix password
              o    Call Help Desk (6806) to reset your password
              o    Don’t give your password to anyone!
              o    Select your project – either Production or Production 2
              o    Click ‘Open”
              o    Say ‘Yes’ to security message
              o    Select the “preferences” option in the top right to change your HTML editor to
                   Dreamweaver (or other HTML editor)

              See above: Configuring Associated Applications

20.1.2            Navigate to your folder

              o    Create folders and HTML files within your folder.

This is the same process as outlined in Step-by-Step process for Creating a New Document.
Folders are created in the same way as outlined in Creating new folders and Creating Site

HTML files MUST be created in Collage to ensure that the masterpage template is
applied to those files. The HTML files, however, can be edited in Dreamweaver. Please note:
Dreamweaver will be referenced throughout this document as the external HTML editor.

Once you have created the files and folders that you want in your web site, you need to “check
out” these files for editing. This process can be done in a number of ways.

20.1.3         Editing Individual Files
For individual files, simply click on the asset name and the file (asset) will be automatically
“checked out “and the HTML editor you selected within your preferences will launch

When this happens, Collage will automatically send a copy of the selected file to your hard drive
to a folder path similar to this:

C:\WORK\ roduction2\_no_task\YOUR_FOLDER_NAME

The selected file will then open in Dreamweaver and will be ready for editing.

Note: The selected file now appears as “Checked Out” in the Collage interface.

20.1.4         Editing Multiple Files
If you want to edit multiple files at one time within Dreamweaver, simply select the checkbox
next to each of the files and choose “Check Out”.

Once you have checked out the files, select them again and choose “Get Copy” from the toolbar.

This will force a copy of all selected files to your WORK directory [ C:\WORK\

You can then launch Dreamweaver and open all the files in your work directory from within

20.1.5         Saving Changes in Dreamweaver and Previewing in Collage
Once you have checked out all the HTML files you want to edit and are working in
Dreamweaver, you simply have to “save” your work in Dreamweaver before previewing the files
in Collage.

To do this, simply toggle (ALT-Tab) back to the Collage interface, select the checkbox next to the
file and select “Preview”. This will show you what your edits will look like within the template or
layout you have selected. If you need to make additional changes, simply toggle back to
Dreamweaver, make edits, save and Preview again in Collage.

Caution: Before creating a new site/page:

- Determine how the page fits into the site structure and which folder it belongs in.
- Make sure that the navigation scheme is appropriate (i.e. how will users find the page).
- Have your page content ready.
- Decide which page layout you should use. See:

- Do not upload individual HTML files into Collage unless they were originally created in

21     Version Control
Collage features a version control system that allows you to “roll back” changes to a previous
version of a document.

To view previous versions of a document:

              1. Select an asset
              2. Click on the Properties button
              3. Click on the Version tab. The version control interface will be displayed.

The version control interface allows you to preview, and roll back to old versions of the selected
              4. Select an asset “Version” (left column) by clicking on the button for any given
              version (example: v1-v8)
              5. Click the Roll back button to roll back to the version you have chosen, thereby
              making the selected version the newest edition of the file.

Tip: In order to Roll back an asset, you must first Check Out the file. This can be done prior
to viewing the Properties or while in the Properties view.

22 Search Tool
22.1 How to Search for Assets
Search for assets when you want to find a specific asset, or a group of assets that meet specific
criteria. For example, you can search for all assets that are a specific asset type, or that have
particular metadata associated with them.
This is of particular assistance before deploying your site as it allows you to search all assets
that are unapproved, checked out, etc. without having to go into each folder or subfolder.
To search for assets:
       1. Select the Content | Search view.

       2.     Choose from the following criteria:

     Criteria             Description

     Keyword              Text that the asset name, filename, text type metadata or other
                          property contains, begins with, or ends with

     Type                 Type of asset

     Size                 Minimum or maximum size of asset, in kilobytes (KB)

     Date                 Created, deleted, approved, or last modified date
                          If any date type metadata fields are defined for the project, those
                          fields appear as search criteria here
                          To specify a date range, select the between option and enter dates
                          in the following format: mm/dd/yy
                          For example:

       User               User who created, deleted, or has the asset checked out

       Asset              How the asset is used, for example as a master page or publishable
                          If any Boolean type metadata fields are defined for the project, those
                          fields appear as search criteria here

       Approval           Approval status, such as whether the latest version is approved, or if
                          any version is approved

       Search in          Deploy folder

       Dependencies       Links to other assets
     3. Click Search to display the search results.

23       Adding and Modifying Metadata
Metadata is information about your content. The following metadata can be added to assets in
Keywords & Descriptions

To add Metadata:

1.   In Deploy View, select a top folder and “Check Out” the asset
2.   Click on Properties
3.   Select Metadata from the drop-down
4.   Enter the desired information in the fields provided

24       Creating a Redirect
Quick Definition: A redirect is a command that tells the web browser to go from one page on a
server to another location.

Creating a redirect in Collage can only be done in Contribution View

• Click the New Document button
• Select the Redirect Page type (either exernalRedirect or internalRedirect)
• Enter the address of the web page to redirect to

25 Addendum

An Addendum to this training guide, with additional information, can be found on the CMS
Support site.


To top