Content Management System Training

Sections

Introduction | Navigation | Editing | Formatting | Files and Images | Linking | Publishing| Newsletters

Introduction

The Department of Education uses the Hannon-Hill Cascade Server Content Management System (CMS). This guide is designed to familiarize you with the CMS so you can maintain web page content.

Start by signing into the CMS. Browse to http://cms2-app.content.uci.edu:8080 as shown below. Log in with your UCInetID and campus password. Your campus password is the one required for the Webmail system. Your DoE password will not work in the CMS.

 

login


Navigating through the CMS

After logging into the CMS, you should see a page similar the one below. This is the Cascade Server home page from which you will access and manage all your web pages. You can click on the Home icon on the task bar near the top left to get back to this page at any time.

post login



nav On the left side of the page is a navigation pane.  Shown are all folders and files immediately available to DoE Users. Folders may contain more folders or files.

Clicking a folder will display its contents in the View pane to the right as a well as beneath it in the navigation pane. Clicking the plus  next to a folder in the navigation pane will only display its contents underneath it in the navigation pane.  To hide the contents of the folder, click the minus. Your specific folder of web pages will be sent to you in an email.

navFor this guide you will use a training folder under the Department of Education folder. In the navigation window, click the Department of Education folder, then click on the training folder. The picture to the right shows how the navigation window should appear.

The contents of the training folder will be displayed underneath it in the navigation pane and to the right in the View pane. Find and click on the index page under the training folder. Once selected, a preview of the index page should display in the View pane similar to the picture below.

 

index

 

Editing Pages in CMS


To edit a page in the CMS, find it in the navigation pane, click on it, then click the Edit tab as shown in the picture below.

tabs

 

Clicking the Edit tab starts up a simple graphical editor used by the CMS. Your display should now appear similar to the picture below. Note that the Edit tab is now highlighted, indicating you are in Edit mode.

editor

 

Add a few lines of your own to the index page as shown in the picture below. Place your cursor somewhere and change some content. Get a feel for using the simple graphical editor to change the content of a web page.

edit box

 

When you are finished with your changes, click the Submit button near the bottom of the browser window as shown in the picture below. Your changes will be submitted to the CMS and your document window will change back to a preview of the changed page under the View pane. See further below. SPECIAL NOTE: YOU MUST CLICK THE SUBMIT BUTTON TO SAVE THE CHANGES YOU HAVE MADE. IF YOU BROWSE AWAY FROM THE EDIT PANE WITHOUT CLICKING THE SUBMIT BUTTON, YOUR WORK WILL BE LOST!!!

submit

Your new changes to the index page should now appear on the View pane The pane automatically switches from Edit pane to View pane upon clicking Submit. You should see a green "edit successful" confirmation bar near the top. Note that your changes have been saved in the CMS but are not on your real web site. That will happen later when you Publish the page.

edit preview

 

Formatting

The department templates have predefined headers and styles.  This helps you create a professional looking page quickly and easily. Most pages you create will use the existing headers and styles.  Practice creating a header on the index page in the training folder. Navigate to the index page again if you are not already there, then click on the Edit tab to start up the simple graphical editor again. Click and drag across some text in the page to highlight it, then click on the drop down menu arrow near the top right of the Edit pane as shown below.

header 2

Selecting "Heading 2" will make the text appear as follows:

preview

 

You can experiment with different styles in the index file to get a feel for what you can do with your pages.

 

Files and Images

Step1. Upload a File

The CMS allows you to upload files and images you wish to link into your pages. The process for uploading a file is identical to the process for uploading an image. To upload an image, navigate to the folder where you want the image to be using the navigation pane, then click on the New drop-down menu button on the top menu bar as shown:

menu

A New File Create pane will be displayed:

new

Make sure the parent folder is where you want the image to be in the CMS. If not, click it and change it.  Then click the Browse button.  This will launch a file selection window to find the file on your computer you wish to upload to the CMS.

choose

For this guide we'll show uploading the "ugly test image.jpg" file. Once you've found the file you wish to upload, click on it and click Open, then click Submit near the bottom of the page.  You'll see a confirmation that the file has been created on the server.Apreview of it will displayed in the View pane, similar to what is shown below.

success

 

Step 2. Insert a file/image in a Page

To add an image to a page in the CMS, navigate to the page and click on the Edit tab again.  Then click the "Insert/edit image" button. Its icon has the look of a tree as shown below. Try this on the index page.

insert

After clicking the "Insert/edit image" button a window will pop up:

pop-up

Internal or External tells the CMS if the file to insert is internal on the CMS or external on another server on the web.  In almost all cases, you will upload the image to the CMS as above and use an internal link to the file.  Assuming we will use the ugly test image.jpg file just uploaded, click the brackets next to the image icon:

browse

This will launch a new window to choose a file in the CMS.  The file we're looking for is in the images folder within the training directory.  Find the images folder and select the only image in there.

selection

It will then ask you to confirm your selection and display a preview of the file/image:

confirm

Click Confirm and the window/tab should close.  Back on the page with the editor on it you'll see that the path of the image has been automatically added to the pop-up window.  Add descriptive text in the alternate text field and click the Insert button. 

done

The image will then appear in the Edit pane for the index page:

editor image

Click the Submit button and the image should now appear in the View pane.

preview

 

Linking to Files or Other Pages

To create a link to a file or another page, click on the Edit tab and highlight the text you would like to make into a link. Then click the "Insert/edit link" button as shown below. The icon look like a small chain or link.

button

 

An "Insert/Edit Link" window will pop up:

insert

 

The CMS defaults to creating the link to a file or page inside the CMS. If linking to an external file or page, click the External radio button. Enter or copy-and-paste the web address to the file, image. page or whatever into the box that appears.  If linking to an internal file or page, internal will already be selected.  Click the brackets to browse for the file/page internal on the CMS. 

path

Once you've found the file you wanted, confirm it and then click the Insert button.  

Your link will then appear in the page under the Edit pane:

editor

Click the Submit button. The page with the new link will be shown in the View pane.

preview

 

Publishing

Publishing copies your page from the CMS to a department web server. There are two department web servers at the moment, a test web server and a production web server. The production web server is what the world sees. Do not publish there until you have verified your work on the test web server first. In some cases you may not be able to publish to the production web server. You may have to contact someone else to publish your work to the production web server, after they have verified that everything is correct.

The test web server is at http://128.200.191.172. The production web server is at http://www.gse.uci.edu.

To publish, navigate to the page you wish you publish, then click the Publish tab as shown below.

tab

The Publish pane will be displayed with one or more destinations showing.  You'll should always publish to the test web server first. After publishing your changes to the test server, make a final check at http://128.200.191.172 to make sure everything worked correctly.  Then publish to the real production server or have your approver do so for you.

In the example below, the first line is for the production server. You need to uncheck it the first time[s] you publish. Leave the second line selected. It is for the test web server.

destinations

Click the Submit button.  You should see the following confirmation message at the top of the page, letting you know that your publish command was sent and that the web site will be published shortly.

success

To check on the progress of your Publish, click on the swirly drop down button at the top left of the Cascade Server window, just under the "Cascade Server" title. Click on the Publisher option and then on the Active Jobs option. The page shows all jobs cued for publishing. You should see your job in the list, unless it already published!  After it is done browse to http://128.200.191.172/training/index to see the results of the examples done in this guide.

Newsletters

Note: This section assumes proficiency in CMS operations. 

First, if you don't already have a newsletter folder under your main directory, create one now.   You should keep all newsletter related things within there.  Creating a newsletter for an email is very similar to just creating a page except for a few key differences:

edit

  1. Under the edit tab on the page, click system and make sure that "Maintain absolute links when publishing" is checked.
  2. Also under the edit tab, make sure that the newsletter configuration is selected. (keep in mind, this is a blank template, no headers, logos - everything will have to be added by manually)
  3. Publish the page, either to the test server or production server, whichever suits your purposes. 
  4. Go to that pages webaddress (should be something like test server: 128.200.191.172/yourDirectory/newsletter/newsletterpagename).
  5. Right click somewhere on the page and click view source/view page source.
  6. Highlight all the text that comes up.
  7. Paste that text into an email.
  8. Send the email to just yourself first, to ensure it works.
  9. If there are any issues, contact tech help.

 

 

Created: Mark Keating 8/10/10

Revised: Rock Hunter 2010/08/17

Mark Keating 2010/09/07