University of New Brunswick | UNB - CMS GuideCascade Content Management System LearnIT Instruction Page|6’ ’ IntegratedTechnologyServices|2009’ 3.2 TheCascadeMenus

Revised March 8, 2010 Copyright © 2010 Integrated Technology Services

Cascade Content Management System (CMS) User Guide & Instruction

2010

The Cascade Content Management System (CMS) User Guide provides quick explanations and instructions for the most commonly used features of UNB’s web site creation and maintenance software. It is part of the UNB Content Developer’s Toolkit, which also includes the UNB Information Architecture Guide and the UNB Style Guide. The Cascade Content Management System (CMS) User Guide provides quick explanations and instructions for the most commonly used features of UNB’s web site creation and maintenance software. It is part of the UNB Content Developer’s Toolkit, which also includes the UNB Information Architecture Guide and the UNB Style Guide.

Cascade Content Management System LearnIT Instruction

2010 | Integrated Technology Services Page | 1

Table of Contents 1 INTRODUCTION.................................................................................................................. 3

1.1 ABOUT THIS GUIDE ...............................................................................................................3 1.2 WHAT IS A CONTENT MANAGEMENT SYSTEM?...........................................................................3

2 LOGGING INTO CASCADE.................................................................................................... 4

3 CMS INTERFACE NAVIGATION ............................................................................................ 5

3.1 THE DASHBOARD..................................................................................................................5 3.2 THE CASCADE MENUS ...........................................................................................................6 3.3 CASCADE ASSET NAVIGATION..................................................................................................7

3.3.1 Folder Structure ....................................................................................................7 3.3.2 System Folders and Index Page.............................................................................8

4 CREATING A FOLDER........................................................................................................... 9

4.1 EDIT > SYSTEM.....................................................................................................................9 4.2 EDIT > METADATA ..............................................................................................................10 4.3 INDEX PAGE.......................................................................................................................10 4.4 RENAMING FOLDERS ...........................................................................................................10 4.5 CHANGE FOLDER LOCATION ..................................................................................................11

5 CREATING A PAGE ............................................................................................................ 12

5.1 PAGE TYPES.......................................................................................................................12 5.1.1 Standard – Side Nav............................................................................................12 5.1.2 Standard – No Side Nav ......................................................................................12

5.2 CREATING A NEW PAGE .......................................................................................................13 5.2.1 Page Display Name .............................................................................................14 5.2.2 Page Title ............................................................................................................15 5.2.3 Summary .............................................................................................................15 5.2.4 Keywords.............................................................................................................15 5.2.5 Author .................................................................................................................15

5.3 RENAMING PAGES ..............................................................................................................16 5.4 CHANGING A PAGE’S LOCATION.............................................................................................16 5.5 LOCKING PAGES .................................................................................................................16

6 USING THE CONTENT EDITOR ........................................................................................... 19

6.1 ADDING TEXT CONTENT TO YOUR PAGES.................................................................................19 6.1.1 Copying Text........................................................................................................19

6.2 ADDING IMAGES AND DOCUMENTS ........................................................................................20 6.2.1 Sizing Images for the Web ..................................................................................20 6.2.2 Uploading an Image or Document File................................................................20 6.2.3 Inserting Images..................................................................................................22 6.2.4 Styling Images.....................................................................................................22


Page | 2 Integrated Technology Services | 2009

6.3 ADDING HYPERLINKS............................................................................................................23 6.3.1 Internal Links.......................................................................................................23 6.3.2 External Links ......................................................................................................24 6.3.3 Anchored Links ....................................................................................................25

6.4 INSERTING TABLES ..............................................................................................................26 6.4.1 Select a Table Class .............................................................................................27 6.4.2 Advanced Table Options .....................................................................................28 6.4.3 Editing Tables......................................................................................................29 6.4.4 Adding a Header Row .........................................................................................29 6.4.5 Deleting a Row / Column ....................................................................................30 6.4.6 Column Width .....................................................................................................30 6.4.7 Merging Cells ......................................................................................................31

6.5 SPELL CHECKER ..................................................................................................................32 6.6 LINK CHECKER ....................................................................................................................32

7 BUILDING THE SIDE NAVIGATION MENU .......................................................................... 33

7.1 ADDING A PAGE .................................................................................................................33 7.2 ADDING A FOLDER ..............................................................................................................33 7.3 ADDING AN EXTERNAL LINK ..................................................................................................34 7.4 CHANGING THE ORDER ........................................................................................................34 7.5 EXAMPLE MENU.................................................................................................................35

8 PREVIEWING AND PUBLISHING ........................................................................................ 36

8.1 PREVIEW YOUR WORK.........................................................................................................36 8.2 PUBLISH YOUR WORK .........................................................................................................37 8.3 RENAMING AND MOVING ASSETS ..........................................................................................38

8.3.1 Unpublish an Asset..............................................................................................38 8.3.2 Rename the Asset ...............................................................................................38 8.3.3 Change Asset Location ........................................................................................38 8.3.4 Re-‐publish the Renamed/Moved Asset ...............................................................38

9 ADVANCED FEATURES ...................................................................................................... 39

9.1 VERSIONING ......................................................................................................................39 9.2 ADDING/EDITING NEWS AND EVENTS .....................................................................................40 9.3 EDITING THE AD BLOCK........................................................................................................42 9.4 CHANGING YOUR HOMEPAGE SLIDESHOW ...............................................................................43 9.5 EDITING THE STORY BLOCK ...................................................................................................44 9.6 CHANGING YOUR SITE'S PAGEBANNER IMAGES.........................................................................45 9.7 INSERTING VIDEOS (FLASH, YOUTUBE)....................................................................................45 9.8 INSERTING GOOGLE CALENDAR, GOOGLE MAPS........................................................................46 9.9 ADDING A PHOTO GALLERY...................................................................................................46 9.10 ADDING A USER-‐FILLABLE FORM............................................................................................46 9.11 ADDING E-‐COMMERCE FEATURES ..........................................................................................46

10 NEED HELP?...................................................................................................................... 47



1 Introduction 1.1 About this Guide The Cascade Content Management System (CMS) User Guide provides quick explanations and instructions for the most commonly used features of UNB’s web site creation and maintenance software. It is part of the UNB Content Developer’s Toolkit, which also includes the UNB Information Architecture Guide and the UNB Style Guide. The UNB Web Style Guide is available on C&M’s site: http://ww.unb.ca/advancement/communications/web/guides.html

1.2 What is a Content Management System? The Cascade Content Management System is an easy-‐to-‐use tool for creating and maintaining high-‐quality UNB websites. Because Cascade is a web-‐browser based system, it works on any modern browser on multiple operating systems. Cascade works with Internet Explorer 7 and 8, Firefox 2 and 3 as well as Safari 3 and 4. UNB’s CMS allows users to easily create great looking websites in minutes. It is the only supported method for developing official UNB websites. To get started with the UNB CMS, users or units need to submit a request to UNB’s Web Operations Group for a new site or to have an old UNB site migrated. An online request form can be found at https://eservices.unb.ca/applications/webrequest/.



2 Logging into Cascade To log into the Cascade Server CMS, go to https://cms.unb.ca/. The username and password are your UNB Login ID and Password. Only check the Remember Me option if you are on a private computer. Do not use the Remember Me option on a public machine.

Note: If you are working off-‐campus, you will require virtual private network (VPN) access to access the CMS from outside of the UNB network.

1. For Window users, download the free Nortel VPN client here: http://www.unb.ca/helpDesk/swdownloads/showfiles.cgi?security

2. For Mac users, contact [email protected] to request the VPN software (it currently must be

purchased).



3 CMS Interface Navigation 3.1 The Dashboard

The dashboard is the first screen you will see every time you log in. It offers quick access to the following areas:

Workflows Not currently in use.

Locks Displays pages that you may have checked out. Only the person who originally locked a document or a system administrator can unlock it. You may also email [email protected] and ask for it to be unlocked.

Messages These are notifications from the CMS (published content, alerts, review dates for expiring content). You can also use it to send other users/coworkers messages.

Drafts Saved draft copies of your content.

Recent History Provides links to the last items you accessed.

The dashboard also has the folder structure of the UNB Web Information Architecture, located on the left hand side (much like the directory listing on a Windows machine – [e.g. Windows Explorer]).

Tip: To return to the Dashboard at any time click Home in the blue menu bar in the upper left corner of the screen.



3.2 The Cascade Menus

On the Cascade toolbar you will find:

Cascade Logo

Search: Gives the ability to search throughout the content, assets and meta data. Publisher: This is where you can view which pages are scheduled to be published or which publishing orders are being processed automatically by the system at any given time.

Preferences Dependant on your level of access you will see various administrative task options. You may leave all Preferences at the default.

Home Returns you to the Dashboard.

New

Page External link File Folder

From the public menu (create a page from template) (used for navigation) (upload an image, document, or another type of file) (create a folder within your site)

History Tracks where you have been giving you a session activity report (the same feature as My Recent History on your Dashboard).

Help

View forums, help guide and more. Note that UNB has customized the CMS so not all Help’ documentation accessible from this button will apply. You may refer to the CMS User’s Guide, Style Guide and/or the Information Architecture Guide for UNB CMS help.



3.3 Cascade Asset Navigation Folders are where content (e.g. pages, images, files – known as assets) are stored both within the CMS and on the UNB.ca web server. Folders and sub-‐folders are used to help organize content for complex sites. When you log into Cascade, you will only see the folders you have been granted access to. If you are building a site for the first time, you will find this folder in the public/webdev /YOURSITENAME/ folder; where YOURSITENAME is your UNB unit name.

To view or open an asset, click once on it. Once a folder is selected, you will see its contents listed on the right hand side, as well as underneath it in the folder list.

3.3.1 Folder Structure

In the image above, the public/engineering folder is open and you can see the other assets (folders, files and pages) that are inside of it. 1. Web pages appear with a blue page icon. 2. Folders appear as folder icons. 3. External links appear as globes. 4. Images and other files like PDFs appear as orange square image icons. Note: Files do not have “.htm” or “.html” file extensions. The system will add the “.html” when the page is published.



3.3.2 System Folders and Index Page

When the Web Operations Group builds your basic site, it will include several important system folders: _internal and _resources. It will also include an index page, which is the homepage for your site. 3.3.2.1 _internal The _internal folder stores items that control the look of your site’s news and events block, ad block, homepage slideshow and more. You can learn more about the homepage slideshow and the various blocks in the Advanced Features section of this guide. 3.3.2.2 _resources The _resources folder is where your images, PDFs and other downloads are stored.

• It is important to keep your images, PDFs and other downloads organized in your resources folder. You can create additional folders here to organize content.

3.3.2.3 index This is the homepage for your site, which the Web Operations group will help you build. It can contain elements such as an image slideshow, ad block, new stories and more. More information can be found in the Advanced Features section of this guide.



4 Creating a Folder When you want to create a new folder you must first select the folder you wish to place the newly created folder into.

On the menu bar click New/Public/Folder. Change the System name. (see 4.1 Edit > System) Edit the Metadata and set the Display Name. (see 4.2 Edit > Metadata below) Click Submit to save your folder.

4.1 Edit > System The System Name is the name of the folder within Cascade, and will also become part of the URL.

Web file and folder names are more restrictive than regular files.

In Cascade Server and on any web server, file and folder names should contain only lower case letters, numbers, underscores and if necessary, hyphens (-‐).

Web file and folder names should never contain spaces. Spaces will result in broken links. When naming files in Cascade Server, do not put “.htm” or “.html” at the end (the system will

add “.html” when the page is published). Also, note that Cascade Server does not allow you to have a folder and a file in the same

location with the same name. Keep in mind that the file and folder names become part of the web address (URL), so try to

keep them relatively short and descriptive. Make sure the options “Include when publishing and indexing” are checked when you create the

folder.



4.2 Edit > Metadata Metadata fields are default fields within the CMS that offer additional information about an asset (e.g. a folder) that helps to classify or describe the asset.

For a new folder, the only field you need to complete is Display Name. The Display Name is a user-‐friendly name and is used in the web page navigation. It will be part of your site’s side navigation and is usually short and descriptive. Display names should not be more than two or three words.

4.3 Index Page Every folder requires a ‘landing page’ called an index page (Page with Side Nav) to run the pages in the folder. This page is created like any other page. See Creating Pages next section.

4.4 Renaming Folders If at all possible, try to permanently name files when you create them, so as to avoid renaming them later. If you need to rename a folder prior to publishing, follow these steps:

1. Select the folder. 2. Click on the Edit button > System and update the System name. 3. Click Submit.



4.5 Change Folder Location If you want to change the folder location prior to publishing:

1. Click on the folder you wish to move. 2. Click the Edit tab. 3. Click the Parent Folder‘s yellow folder or public link address. 4. In the Browse window, click on the appropriate new folder location. 5. Click the Submit Button.



5 Creating a Page 5.1 Page Types There are currently two standard page types you may use. The only difference between them is whether or not they include the side navigational menu.

5.1.1 Standard – Side Nav

This is the most common page type, and the one you should use by default. It includes a side navigational menu that will be dynamically built for you.

5.1.2 Standard – No Side Nav

This page does not contain a side navigational bar, and allows the content to span the full width of the page. The most common use of this page type would be for a news article.



5.2 Creating a New Page 1. First, select the folder where you want to place your new page.

2. In the blue menu at the top, choose New > Public > Page and select the type of page you want

to create.

3. In the New Page -‐ Create screen under System > System Name, give the page a new name.

Note that the fields labeled in bold with the small yellow star are required entry fields. See 4.1 Edit > System, on creating proper file names. Page names must be composed of all lowercase letters, and the only special characters

allowed are digits, hyphens and underscores. If you attempt to create a page with an invalid name, you will receive this error message:

4. Click Submit. If the spell-‐checker or link-‐checker comes up, review the results, and then click Submit

again (see Chapters 6.4 and 6.5 for more information).



5. Once the new page is created and named update the Metadata under Edit > Metadata. Metadata is data within the CMS that offers additional information about an asset (e.g. a

page) that helps to classify or describe the asset. Common fields such as title, summary, or keywords provide quick information about the content contained inside of a particular asset. The metadata that a user enters for assets can be used for display purposes on site pages. The fields include:

All fields are mandatory for UNB

Display Name short name of the asset (typically four words or less) Title title of the asset

Summary synopsis of the asset Teaser a short enticing phrase about the asset – same as summary

Keywords words or phrases about the asset Description description of the asset – same as summary

Author person or organization responsible for the asset (Jim Row/ITS)

5.2.1 Page Display Name

The Display Name is a user-‐friendly name and is used in the web page navigation. It will be part of your site’s side navigation and should be short and descriptive. Display names should not be more than two or three words.



5.2.2 Page Title

The title is important for properly identifying the web page. The title is not displayed on the web page itself, but is used in several different ways:

It is displayed on the title bar at the top of the web browser. It is displayed in the program button in the task bar at the bottom of a Windows display. It is used to identify a web page when the page is bookmarked. It is used to identify a web page in search engine results.

5.2.2.1 Title Guidelines Make sure the title states specifically, but briefly, what the content represents.

Do not use the exact same title for more than one page. Titles should be descriptive yet brief. Keep in mind that in some circumstances, the title text

may be cut off, so people may only see the first several words. You do not need to include your department name except when necessary to avoid confusion

with other pages on the UNB site. (E.g. The title “Contact us” could be ambiguous -‐ does it mean contact UNB or contact your department? -‐ so that would be a case when you would want to use the department name as part of the title, like “Contact Integrated Technology Services”.)

UNB will automatically be added at the start of your page title (UNB | ...).

5.2.3 Summary

Please enter a short two sentence summary. This may be the first two sentences of your content.

5.2.4 Keywords

Keywords are important tools to help improve a site’s or a page’s ranking in both outside search engines (Google, Bing, Yahoo, etc) as well as UNB’s internal web search engine. There are UNB generic keywords that can be used by clicking on the tag icon next to the keyword text field, but you must still add in custom keywords that pertain to your pages content. (150 characters or less)

5.2.5 Author

Please enter your first and last name.



5.3 Renaming Pages If at all possible, try to permanently name files when you create them, so as to avoid renaming them later. If you need to rename a page prior to publishing, follow these steps:

1. Select the page. 2. Click on the Edit button > System and update the System name. 3. Click Submit.

5.4 Changing a Page’s Location If you want to change the page location prior to publishing:

1. Click on the page you wish to move. 2. Click the Edit tab. 3. Click the Parent Folder‘s yellow folder or public link address. 4. In the Browse window, click on the appropriate new folder location. 5. Click the Submit Button.

5.5 Locking Pages If you’re planning on making more than a minor edit to a page, you should lock it first. This will prevent other users from making changes to it before you’re done, and will also prevent it from being published out to the live web server before you’re ready. Once a page has been locked, it can only be unlocked by the user who initially locked it, or by an administrator.

1. Navigate to the page you wish to lock. Under the View-‐>Lock tab, click “Check-‐out this asset”.

2. A green “Operation successful” message will display at the top of the page and it will reload. You are now seeing the “Working Copy”. You can switch back and forth between viewing the original and the working copy by clicking the “Current” and “Working Copy” links under the View tab.



3. When you edit the page, the changes will only be made to the Working Copy. You can see this is happening because a green “Working Copy” icon will be displayed under the Edit tab.

4. You may make any edits you wish to the Working Copy as you normally would, and save your

changes when done (see Chapter 6 – Using the Content Editor)

5. You can compare the Working Copy to the Current version by clicking the “Compare with Current” link under the View tab. Any new additions to the page will be displayed in green, and deletions will be shown in red with a strikethrough. For example:

6. When you are happy with your changes (or wish to discard them and start over) you need to go back to the View-‐>Lock tab.

7. If you want to discard your changes, click “Break the lock and discard changes”. This will remove all the changes you’ve made to the page and unlock it.

8. If you’re happy with the changes and want to save them, click “Commit changes”. 9. You will be presented with a Comments box. You should enter a sentence or two describing the

changes you made. These comments will show up under the Versions tab later, so if you need



to revert to a previous version in the future it will be easier to locate the right one if you put in some meaningful comments.

10. Once you’ve submitted your changes, the page will be unlocked.



6 Using the Content Editor Select a page and click on Edit-‐>Content.

The content editor in Cascade, used to format your page content, is much like what you would find in a word processing application such as Microsoft Word. Many features are similar to those you are already familiar with.

Top Row Icons – Left To Right Insert Custom Character

Subscript Superscript Bold Italic

Underline Strikethrough Alignments (left, center, right, justify)

Styles (select a predefined style)

Format (select a formatting style such as Heading 1 paragraph etc.)

Bottom Row Icons -‐ Left To Right Paste from Word Find and

Replace Spell Check Bullets Numbered List

Decrease/increase Indent

Undo/Redo Link and Unlink Insert/Edit Anchor Insert Picture

Toggle table borders. Horizontal Rule Insert Table Clean up Messy Code Remove Formatting Toggle full screen.

6.1 Adding Text Content to Your Pages When the page is created, you can start using the editor to enter in page text. The editor is much like a word processor.

6.1.1 Copying Text

If you want to take content from an existing site or another document, please follow these steps:

1. Copy the text you wish to paste into Cascade Server from a web page, Word, etc. 2. Open Notepad (Textedit in Mac OS X) (Start – Programs – Accessories – Notepad). 3. In Notepad, go to Edit – Paste (or Ctrl+V or right click / Paste). You will see your text without the

formatting. 4. In Notepad, go to Edit – Select All (or Ctrl+A) to highlight the text. Go to Edit – Copy (or Ctrl+C or

right click/ Copy) to copy it. 5. On the Cascade edit screen, place your cursor where you want to place the text and go to Edit –

Paste (or Ctrl+V or right click / Paste). 6. This process will remove any of the unnecessary tags, styles or coding that might come with the

content.



WARNING: Do NOT use the Paste from Word button, or attempt to paste Word content directly into your page. It does not work properly, and will corrupt your page.

Tip: For best results always create and style your document within Cascade’s Editor.

1. Format content much like you would a Word document.

i. For basic page element formatting instructions see the UNB Style Guide. Headings and paragraph styles are listed under the “Styles” drop down.

2. After you have formatted the document, click on the Submit button. i. This does not publish your work out to the live web server. Changes will only be seen within

Cascade when work has been published out.

6.2 Adding Images and Documents

6.2.1 Sizing Images for the Web

• It is important to properly size your images for the web. You can do this using either a desktop-‐based program such as Photoshop or using free, web-‐based image editing services such as http://www.picnik.com

• If you have recently had images taken by UNB’s media services group ([email protected]), you can request that the images be sent to you “web-‐ready”.

• All images must be 72 dots per inch (dpi) and in the RGB color. As a general rule, images placed in pages should be 300 to 320 pixels wide by no more than 400 pixels high. All images should be in JPG, PNG, or GIF format.

• For more information on the sizing of various images and on image content suggestions, please consult the UNB Style Guide and/or Communications and Marketing group ([email protected]).

6.2.2 Uploading an Image or Document File

Before you can use a new image on a page or add a link to a document, you must first upload the file. See section 6.2.1 for guidelines on image sizes and formats. You may also upload document files such as PDFs or spreadsheets as needed. Put all image files in your img folder located underneath the _resources folder, which already exists. You may create additional folders under _resources as needed (for example, you can create a pdf folder to store your PDF documents).



Note: If you want to upload a file to a certain folder (e.g. _resources/img/), you must first select the folder you wish to upload to.

1. First, make sure your file is named appropriately. File names may only consist of letters (lower

or uppercase), digits, hyphens and underscores. Spaces and other special characters are not allowed. If you attempt to upload a file with an invalid name, you will get an error message.

2. Select the folder where you want to place your new file. 3. In the blue menu bar at the top, go to New > Public >File. 4. In the File Upload section, click the Browse button.

5. Choose the file you wish to upload and click Open. 6. Click the Submit button.

When the upload is complete, you will see the name of the file appear in the file list on the left and a preview (if available) on the right.

The file will use the original filename as the System Name by default, so you don’t need to fill it out.

Metadata is not required for files at this time. If you need to upload a new version of a file -‐ find it in the list on the left, click on it, click on

Edit, then upload it again.



6.2.3 Inserting Images

1. Be sure that you have already uploaded the image you wish to insert (instructions above), then open the page in edit mode and click where you want the image.

2. Click the Insert/edit Image toolbar button. 3. In the Insert/Edit Image window click the orange square Browse button.

The Please choose a File window will display for you to select the image. 4. In the column on the left, locate the image you want and click once on

it. 5. Click the Confirm button.

6. Back in the Insert/Edit Image window, you need to fill in the Alternate Text box. If you choose an image caption style, this text will be used for the caption below the

image. It is also required for accessibility, and will allow visitors using screen-‐reader software to

have the image description read to them. Try to write something based on the overall content of the page, as well as what the

image represents (e.g. If a picture has students in front of a building, instead of putting "Students", try "Students gathering in front of Hazen Hall.").

Tip: When creating the ALT information: Be brief, Be clear, Be contextual.

7. Always leave the Width,Height,Vertical Spacing and Horizontal Spacing boxes blank. 8. In the Border Width box, type a zero (0). 9. Click the Insert button. 10. To edit an image after it has been inserted, click on the image, then click the Insert/edit Image

button. 11. To delete an image, select it and press Delete.

6.2.4 Styling Images

If you need to add a caption to an image, or would like to change its alignment, there are pre-‐made styles you may use.

1. Insert your image. 2. Click on the image and go to “Styles’” on the tool bar.



3. To align and add a caption to the image select from captionleft, captionright or captioncenter. 4. To align the image without a caption select from imageleft, imageright or imagecenter.

Tip: The caption styles mentioned above will use the ALT text as the caption.

6.3 Adding hyperlinks

6.3.1 Internal Links

1. If you are linking to another page or file inside the CMS to which you have access, select the text that you want to be linked (where people will click).

2. Click the Insert/Edit link button on the toolbar.

3. Click the blue page icon. In the Choose > Browse window, navigate to the page you want to link

to and click the Confirm button. You may also create a link to a document file (such as a PDF) that you uploaded previously.

4. Normally links should open in the same window, but if you need to you may change the

"Target" to "New Window". 5. The Title attribute does not need to be used on every link, but may be used for the ones that

need to provide the user with additional detail. The title attribute should provide the end user a bit more clarification on what the link actually does. (e.g. if you had a link called “Stats” the title attribute could be “Statistics on Student Enrollment 08-‐09”) Please note, this is only supplementary information, nothing crucial should be hidden from the user.

6. Leave the Class alone. 7. Click the Insert button.



6.3.2 External Links

1. To link to an external (non-‐CMS) web site, or a CMS site to which you don’t have access, select your text and click on the Insert/Edit Link button and go to the External tab.

2. In the “Link” box, type or paste the address of the page you want to link to. Be sure to include

the “http://” at the beginning.

3. Click Insert to create the link.

6.3.2.1 Linking to Faculty/Staff Email Addresses

Instead of providing contact information for UNB faculty/staff directly on your site, it is better to create a link to the appropriate entry in the UNB Phone Book. This way if the person ever changes their email address, phone number, office location, etc then you don't need to worry about having outdated information on your site.

1. Go to https://phonebook.unb.ca 2. Using the search form, find the record of the person you want to link to.

3. Right-‐click on the icon and choose "Copy Link Location" in Firefox, or "Copy Shortcut" in Internet Explorer. This will copy the address for this record to your clipboard.

4. Create an External Link on your page in Cascade (see above) and paste in the address in the Link field. It will look something like this: https://phonebook.unb.ca/index.cgi?dn=dW5iQ2FJZD0wYzc1Nzc3NjlkMmNlNTAwZDQxZjE3OTBhM2JhN2VjMGI5YmQ4MDA4LG91PXBlb3BsZSxkYz11bmIsZGM9Y2E=

5. If you are having trouble finding the person's record in step #2, it's possible that they have suppressed their record from public view. In this case, try searching the internal phonebook page at https://phonebook.unb.ca/everyone. This version of the phonebook shows more records, but requires a valid UNB Login ID and Password in order to access it.



6.3.2.2 Linking to Student Email Addresses If you are linking to a student email address, you must have prior written consent from the student. When linking to a student, you first need to determine if the address needs to be public for anyone in the world to see, or if it should only be available to members of the UNB community. For UNB only, visit https://phonebook.unb.ca/everyone and follow the same steps as for creating a Faculty/Staff link. Students are not visible through the public interface at https://phonebook.unb.ca, which is why you must use the "everyone" version. To make the address public, you must create an External Link with the Link field set to mailto:<STUDENTEMAILADDRESS> (for example, mailto:[email protected])

6.3.3 Anchored Links

Where links point to resources, anchors define an address inside a document.

1. To insert an anchor, place your cursor where you want the link to go and click the Insert/edit Anchor button.

2. In the “Anchor name” box, type a name for the anchor with no spaces (e.g., myanchor) and click Insert.

The anchor will be represented by a little icon when viewing the page within Cascade, but it will not appear on the live/published version of the page.

3. To link to the anchor, highlight the text that you want to be linked and click the Insert/edit link

button.

Click on the External tab. In the “Link” box, type a pound sign (#) followed by the name of your anchor, with no spaces, e.g., #myanchor.



6.4 Inserting Tables To insert a table on a page in Cascade, click where you want the table, then click the Insert a new table button.

Tip: Press Enter a couple of times before inserting the table, to make sure that you have at least one blank line above and below the table. (You can delete them later.)

Property Description Cols (columns) Enter in the numeric value of columns needed Rows Enter in the numeric value of rows needed Cellpadding Handled by the style sheet (leave blank) Cellspacing Adds space, measured in pixels, between the cells. Alignment Handled by the style sheet (leave blank) Border Handled by the style sheet (leave blank) The Width and Height Handled by the style sheet (leave blank) Class Select a pre-‐designed table layout (see Select a table class) Table caption Used for large tables to provide an adequate summary of the table contents.

The stylesheet is a set of rules embedded in all UNB web pages that control things like font styles, sizes, colors and spacing. It provides a common look and feel to all UNB pages.



6.4.1 Select a Table Class

From the drop down Class list select one of the following table styles.

6.4.1.1 contentable

6.4.1.2 plaintable



6.4.1.3 datatable

6.4.1.4 plain

6.4.2 Advanced Table Options

On the Advanced tab, please use the Summary properties when inserting a table. The Table summary attribute should be added as an overview of the body data for screen readers / people with visual impairments. Adding in the summary tag also assists with users receiving better search results. All the other options should be left the way they are because the main UNB web settings will override most of these settings.



6.4.3 Editing Tables

To access all of the table-‐editing options in Cascade, left-‐click in a table cell, then right-‐click and you will see the menu shown here:

6.4.4 Adding a Header Row

If the first row of your table contains column headers, you need to specify that it’s a header row in order for it to be styled properly.

1. Left click in the first cell of your header row to place your cursor inside it. 2. Right click and choose Cell-‐>Table cell properties.

3. Set the Cell type field to “Header”.

4. From the dropdown at the bottom left, choose “Update all cells in row”. Click Update.



6.4.5 Deleting a Row / Column

If you need to delete a table row or column, please first click into a cell on the row or column you wish to remove.

1. Click inside one of the cells you wish to remove. 2. Right click and choose > Row/Column > Delete row / Remove Column.

6.4.6 Column Width

Assigning a specific column width (leaving this blank will automatically space the column evenly) can be achieved by first selecting the column.

1. Click inside the column (one cell) you wish to update the column width. 2. Right click and choose > Table Properties > and assign a Width (percentage or pixel amount)

In the above example, the user is updating the header cell’s width. Please notice the two-‐highlighted sections. One indicates the header row, the other area is where you assign the width of the column.



6.4.7 Merging Cells

If you need to merge cells within a table, first select the first cell in front of the cells you wish to merge..

3. Click inside the cell you wish to merge with other cells (the first cell in which you wish to merge the others to).

4. Right click and choose > Cell Properties > Merge table cells 5. Enter in either the number of columns or rows you wish to merge.



6.5 Spell Checker After saving a page, the Spell Checker will run automatically. If it finds any errors, it will present you with a screen like this:

For each error found, you have four options to resolve it.

1. You can click inside the text box under the Modify column and manually correct the spelling. This is useful if none of the Suggestions are correct.

2. Choose the correct spelling from the Suggestions dropdown. 3. If you are sure you have spelled the word correctly, you can click the Add button to add it to the

spell checker dictionary. Then it won’t be flagged as an error in the future. 4. Finally, you can choose to ignore the error.

Once you’ve resolved (or ignored) all the errors, click Submit to proceed.

6.6 Link Checker The Link Checker will run automatically following the Spell Checker and report any errors with the links on your page. If it finds any problems it will display a screen like this:

You have two options to resolve the errors – either modify the link, or ignore it. If the broken link is to another Cascade asset, you can click the blue icon under the Modify column and choose the correct asset. If the link is to an external resource, click in the text box and correct the link manually. Sometimes the Link Checker may report a link as invalid when you know it is correct. This could happen if the remote website is temporarily unavailable. In this case, you can just select Ignore to leave the link as-‐is. Click Submit to save your changes when done.



7 Building the Side Navigation Menu Your site’s side navigational menu is built dynamically based on the way your pages and folders are structured. The Display Name in the asset’s metadata is used to create the link in the menu, which is why it’s important that it be entered properly.

7.1 Adding a Page If you would like a page to be included in your side navigation:

1. Click on Edit 2. Click on Metadata 3. Make sure the Display Name contains the label you wish to use in the menu. 4. In the Custom Metadata at the bottom of the window select “Include in Side Menu”

Note: Do not click on any of the other options -‐ they are not a part of your site’s navigation.

7.2 Adding a Folder In order to add a folder to the side menu the process is essentially the same as for adding a page. However each folder must contain a page named index. This is the landing page for the folder, and must be present otherwise your menu will not function properly. You can create the index page the same way you would create a normal “Standard – Side Nav” page. Follow the same steps as in 7.1 to add the folder to the side menu. Then go the index page within your folder and perform the same steps to add it to the menu. Important: make sure that you use the same Display Name for both the folder and the index page.



7.3 Adding an External Link If you need to add a link in your menu to something that is not in the CMS (such as an old page on the UNB site, or even an external site) you need to create an External Link.

1. First, select the folder where you want to place your link. 2. On the menu bar, select New/public/External Link.

Much like all the other assets you create, you must give the external link a Display Name and a System Name.

3. To add the link to your site’s side navigation: On the Metadata screen, in the Custom Metadata section, check the “Include in Side Menu”

option (see section 7.1).

7.4 Changing the Order By default, assets get added to the menu in the order they were initially created. You can easily change the order:

1. Click on the folder containing the assets you wish to re-‐order. 2. On the right under View-‐>Contents, click on the Order column to sort the assets. 3. You can then move assets higher or lower by using the arrow icons under the

Actions column.



7.5 Example Menu

This is an example menu from the Faculty of Engineering. Each of the links in the menu comes from the Display Name attribute in the metadata. You can see now how the System Name and Display Name are related. A folder may have a System Name of depts but appear in the menu with its Display Name of Departments. Note that not all assets in the engineering folder appear on the menu. The only ones that show up have the “Include in Side Nav” check box selected. When you click on a menu link that points to a folder, the menu will load the folder’s index page and expand to show the contents.



8 Previewing and Publishing 8.1 Preview Your Work Before publishing your changes to the web server, you should preview your work to make sure it looks the way you want. Click on your page and go to View -‐> Preview. This will show you your page as it will appear when published. If you see any problems, you can go back and edit the page again.



8.2 Publish Your Work 1. In the column on the left, click on the file you wish to publish, and then click the Publish tab.

If you only have several pages to publish, please do not publish your entire folder, as that can negatively affect the overall performance of the system.

The only time a whole folder should be published is if everything in it is new or changed or if you have made changes that will affect your side navigation.

2. Leave the “Generate a publish report message” box checked and click the Submit button.

3. Depending on how busy the Cascade system is, it may take some time before your page is

actually published. You will be sent a message once the publishing is complete, which you can view by clicking on Home in the menu bar then on the “Messages” tab.

4. You should always review the publish report to ensure your page was published properly. If no

issues were encountered, you should delete the message to keep your inbox clear. If you do encounter an issue you’re unable to solve, please contact [email protected] and include the error message.

5. Once publishing is complete, you can view your page at http://www.unb.ca/path/to/your/site where “path/to/your/site” is the path to your site in Cascade under public. So if your site was located at /public/webdev/mysite/ then it would be available on the web at http://www.unb.ca/webdev/mysite/



8.3 Renaming and Moving Assets If at all possible, try to permanently name files when you create them, so as to avoid renaming them later. If you need to rename a folder follow these steps to ensure that there are no “orphaned” folders/files left on the server:

8.3.1 Unpublish an Asset

There are only a few cases where you’d want to unpublish an asset: 1) it was not supposed to be published in the first place, 2) you are deleting it from the system, 3) you are renaming it. To rename/move published assets you must first unpublish them.

1. In the column on the left, click on the asset you wish to rename. 2. Click the Publish tab. 3. Under Options > Publish Mode change the “Publish Mode” from Publish to Un-‐publish. 4. Click the Submit button.

8.3.2 Rename the Asset

1. In the column on the left, click on the asset you wish to rename. 2. Click the Edit tab. 3. In the blue bar under the Edit tab, click on System. 4. In the “System Name” box, change the name. 5. Click the Submit button.

8.3.3 Change Asset Location

If you want to change an asset’s location:

1. Click on the asset you wish to move. 2. Click the Edit tab. 3. Click the Parent Folder‘s yellow folder icon. 4. In the Browse window, click on the appropriate new folder location. 5. Click the Submit Button.

8.3.4 Re-‐publish the Renamed/Moved Asset

1. Publish > Publish Mode > Submit



9 Advanced Features 9.1 Versioning If you need to undo changes to an asset, you can use the Versioning feature. You can undo your last change, or even go back to a previous version from days or weeks before. The last 20 versions are kept in the CMS. One use of Versioning would be if you wanted to temporarily make a change to a page (perhaps to promote an event) then revert it back to its previous version when the event is over.

1. Select your page. 2. Click on the Advanced tab / Versions.

3. From the list select which version you want to go back to (the Last Modified On column will tell

you when each version was saved and by whom).

4. You now have a number of options (not all are available on each version)

Newer: switches to the next newest version. Older: switches to the next oldest version. Current: switches to the current version. Activate: activates the version being viewed and makes it the new current one. Delete: permanently deletes the version being viewed. Compare with Current: compares the version being viewed with the currently active one, highlighting any changes.



9.2 Adding/Editing News and Events If requested during your initial site setup, the homepage of your site will contain a News & Events box on the lower right beneath the side navigational menu.

To edit the links that appear in this section, navigate to _internal/xml/news_and_events/items within your site’s folder and click the Edit tab. Each News/Event item is contained within a block on this form.

-‐ If you only have one item and wish to add another click the small plus sign found under the News/Event title/link box.

-‐ If you have more than one item you can change the order of the items by clicking on the small

black arrows in the upper left of each block to move that block up or down.

-‐ To delete an item, click the minus icon. -‐ To insert a new item, click the plus icon on the item above where you want to add the new one.

For example, if you want to add a new item between items #1 and #2 then click the plus icon on item #1. A blank item will appear below.

-‐ To update a News/Event item, simply change the information in the fields.

First you must specify whether each item is "News" or an "Event".

The Title field contains the text that will appear in the News & Events box on your site. Enter something short and attention grabbing.



You must also specify either an Internal Link or an External Link for your item.

Internal: If you’re linking to another page within Cascade, click the blue page icon beside Internal Link and navigate to the desired page.

External: If you’re linking to something outside of Cascade, enter the full URL (including http://)

in the External Link field. When adding an Event:

First add it to the main UNB Events Calendar so it’s available for anyone to view. You can do this by visiting https://www.unb.ca/sweb/srim/news/event/add.cgi.

Use the External Link field to add the link to your event (such as

http://www.unb.ca/news/event-‐details.cgi?id=13151) Please use only one method for creating a link. If you specify both an Internal Link and an External Link, only the Internal one will be used. You also must specify a Start Date/Time and End Date/Time for the item. Your item will only be displayed during this time period.

When you have completed the desired changes to the News/Events page, scroll to the bottom and click Submit to save them.

Your site's index page will be automatically published every hour, adding and removing news and events items as needed. If you wish to see the changes reflected immediately, you can publish the index manually.



9.3 Editing the Ad Block The homepage of your site will contain a small ad block in the upper right corner. You can use this space to highlight important news or events happening in your area. The ad block can be used to promote upcoming events, to promote a downloadable brochure or to point to a new service or feature of your site. In order to modify this ad, you will need to create a new JPEG image (using Photoshop or another image editor) that is 245 pixels wide and 229 pixels high.

Upload the image to your site’s _resources/img/ad folder and then publish it. To edit the ad block, navigate to _internal/xml/ad/ad within your site’s folder and click the Edit

tab.

1. Click the brown icon beside Image to browse and select the new ad image you uploaded above. 2. Enter the appropriate alternate text in Image Alt Text to describe your image (or what it links

to). 3. Depending on what it is you wish to link to from the ad block, use one of the following three

fields.

Internal Page: If you want to link to a page within your site click the blue icon to browse and select the target page.

Internal File: If you want to link to a document within your site (for example a PDF) click the brown icon to browse and select the target document.

External Link: To link to something outside of Cascade enter the full URL (including http://) in this field.

Tip: Only create one type of link. If you specify more than one type, Cascade will only use the first one. If you don’t want to have your ad link to anything, just leave all three fields blank.

4. When you are done making the desired changes, scroll to the bottom of the page and click

Submit to save them. 5. Republish the home page of your site (index) in order to see your changes on the web.



9.4 Changing Your Homepage Slideshow The homepage of your site contains an editable dynamic slideshow. Each time someone visits your page, a random image is loaded. You may optionally present a list of numbered buttons below the slideshow to allow visitors to flip between all available slides. The maximum number of slides you can have in a slideshow is 7.

In order to modify the slideshow, you will need to create new JPEG images (using Photoshop or another image editor) that are 672 pixels wide and 232 pixels high. Please contact Communications & Marketing for help modifying your slideshow images.

1. Upload the slides to your site’s _resources/img/slideshow/ folder and publish them. 2. To edit the slideshow, navigate to _internal/xml/slideshow/slideshow within your site’s folder

and click the Edit tab.

3. If you want to display the slide numbers in the bottom right of your slideshow, check the Show slide numbers? box at the top, otherwise leave it unchecked.



Each slide is contained within a block on this form.

-‐ Change the order of the slides by clicking on the small black arrows in the upper left of each block to move that block up or down.

-‐ To delete a slide, click the minus icon. -‐ To add a new slide, click the plus icon on the slide above where you want to add the new one.

You may also edit existing slides by simply changing the information in the fields.

Image: Click the brown icon to browse and select the slide image you wish to use. Alt Text: Enter appropriate alternate text to describe your image.

You may optionally choose to have some of your slides be links. You can either choose an Internal or an External link. Remember to republish any new or changed slide images as well as your main index page after making any changes.

9.5 Editing the Story Block The homepage of your site may be configured to include a dynamic story block at the bottom of the page. This block is used to present interesting stories about your area. Each time someone loads the page, a random article will be loaded. Visitors can cycle through the available stories by clicking the numbered links below the thumbnail image. If Communications & Marketing has prepared a profile about a student, faculty, researcher or alumni associated with your group, you can request a copy be placed on your unit’s homepage. Communications & Marketing can also provide training, advice and feedback if you would like to prepare your own stories.



9.6 Changing Your Site's PageBanner Images Each page on your site will have a page banner image at the top underneath the global navigational menu. This image must be stored in the main folder of your site, and be called pagebanner.jpg

If you wish to edit this image, create a new one with the same dimensions in your favorite image editor (922 pixels wide by 126 pixels high). Communications & Marketing can provide help creating new banner images for your site. 1. Navigate to pagebanner.jpg in your main site folder and click the Edit tab. 2. Click Browse and choose the new image from your computer that you just created. 3. Click Submit to upload it and overwrite the existing version. 4. Republish the pagebanner.jpg and all pages in your site to start using the new image. If you wish, you may have a different pagebanner.jpg for each folder within your site. To do this, you need to upload the banner into the folder. Then any pages in that folder will use this banner image instead of the one in your main site folder.

9.7 Inserting Videos (Flash, YouTube) Send an email to [email protected] outlining all of your requirements and where the current page is located. Please also state if you have your video converted for the web (reduce in size) or the location of the YouTube video (URL).



9.8 Inserting Google Calendar, Google Maps Send an email to [email protected] outlining all of your requirements and where the current page is located.

9.9 Adding a Photo Gallery Send an email to [email protected] outlining all of your requirements.

9.10 Adding a User-‐Fillable Form Send an email to [email protected] outlining all of your requirements (email address of the recipient for the results, form fields, etc.) and where the current page is located.

9.11 Adding E-‐Commerce Features Send an email to [email protected] outlining all of your requirements and where the current page is located.



10 NEED HELP? If you need any advice on your content, please contact Communications & Marketing ([email protected]). For all other problems, please contact ITS Solutions at [email protected]. Be sure to include the URL of your site as well as a full detailed description of your issue.