Tutorial on UC Merced's Content Management System

Introduction

UC Merced's Interim Content Management System (CMS) was built to allow easy authoring and management of UC Merced web sites. This tool gives site owners the ability to create, update and manage menus, content and features for their sites.

If you would like to create a site that makes use of the Interim CMS please contact webrequests@ucmerced.edu

Accessing the CMS

  1. To access the Interim Content Management System you will need the Username and Password provided to you by the Web Master. Navigate to the CMS now using the previous link.

    If you've forgotten your password or need other technical help contact webrequests@ucmerced.edu
  2. Below you will see the Content Management System Login Screen, enter your username and password and press login

    Please Note: This is never your UCMNetID and Password.

  3. Once logged in you will see a list of sites you have access to edit, for this tutorial we will be using the site webtest43. Click on the site you wish to edit.

Site Information Manager

  1. Select the Site Information Manager. Here you can change your site information.

    If it is not already correct, enter your preferred site name and home page header.

  2. Once you have entered your Site Information, press the Submit Site Into button.

Adding Content

  1. Now you will be back at the site menu, the last menu item is the Content Manager, this is where you will do most of your editing and adding of content. Select this menu item.

    Adding Pages

    1. If this is a new site, you may not have any pages in your content manager. To add pages, click on the Create new content link at the top or bottom of the page.
    2. You will be prompted to add a Content System Title and a Content Title.

      The first, Content System Title, is the name you will use to manage the page in the Content Management System.

      The second, Content Title, will be the title that is displayed on the page. It is common to have the titles the same, but not necessary.

    3. You have to fill both title fields, if you leave one blank it will prompt an error.
    4. Here we have entered Student Services for both titles. Enter the title you would like to have for you page.

Using FCKeditor to Edit Content

The FCKeditor is a WYSIWYG (What You See Is What You Get) HTML editing tool. For a more detailed overview of all the icons used by the editor, please view the FCKeditor User's Guide.

In this section we will be covering some of the more commonly-used functions of the FCKeditor. You will probably recognize many of the buttons on the panel, as they look and act similar to those in programs such as Microsoft Office.

  1. Adding Headers
    In the second row of the FCKeditor you will see a drop-down box labeled Style, this box will allow you to choose a header style for your pages' sections. It is good practice to use these headers for section titles.

    In the content box below, enter the text you would like for your first header, on this page we have entered Introduction. Now highlight the text and go to the Style drop-down box and select the type of header you would like to use. In this case we have selected Header 4.


    To remove the header, repeat the same steps: highlight the text, pull down the drop-down box and select the header style currently being used.
  2. Adding Links
    Now let's add some content and links to our page. In the FCKEditor the first two buttons in the last row are for adding and removing Links. Select the first button to add a link.

    1. A popup window opens which will allow you to easily add the specifications for the link.
    2. In the drop-down box choose which kind of link you would like to add. If the link you are choosing is an external link (outside of the page you are currently working on), you will want to choose URL.

      The second option, Anchor in this page allows the user to jump to a specific point in your page.

      If you want to add a link to allow users to send an email, choose the third option E-Mail.

      For this tutorial we will select URL.

    3. Generally your Protocol will remain http:// but to know for sure, check the page that you are linking to. In the text box you will enter the URL, in this case we have entered it.ucmerced.edu. Once you are happy with your URL press OK.

  3. The next button allows you to put an Anchor in your page. This is a link that points to different areas within the same page. This can be useful for creating a Table of Contents or a Back To Top link.

  4. Using the Source File
    Let's check out our Source File for our page. The first button on the FCKeditor is the Source button. This allows you to view the html source file for the current page. Occasionally you may need to refer to this page for more complex problems, but for most part you should not need to use this button.

    Go ahead and press the Source button. In the content box below you will see all the html for you page. When you are done, press the Source button again.
  5. Previewing
    Now would be a good time to preview your content. The button circled below is the Preview button. Press it now to see how your page will look so far. When you are done looking at the preview, just close the browser window that popped open.


  6. Removing All Formats in Content
    Let's say you want to start from scratch and remove all the formatting currently on your page. The first button in the area circled below is a Select all button, which selects all of the content on the current page you are editing. Press the Select All button.

    The next button removes all the formatting from your current page, once all of the content is selected press the Remove Format button.
  7. Undoing Actions and Searching Content
    Let's put the formatting back onto your page. To do this, press the Undo button, which is the first of the two circled below. The second button is the Redo button. Following the Undo and Redo buttons is a Search button.

    The last button is to Replace specific text in the content of the page you are currently editing.

  8. Adding Tables
    Now let's create a table. Press the Table button, it is circle below.
    1. A popup window will appear. On the left side you can enter the table's number of Rows and Columns, on the right you can enter the table's total width and height.

    2. In this window you can also specify the table's border size, 1 is the default but it can be changed anywhere between 0 and 99 - however a large border is generally not recommended.

    3. On the right are Cell spacing and Cell padding. Cell spacing provides spacing between each cell. Cell padding provides spacing within each cell.
      Cell Spacing:
      Cell Padding:
    4. The drop-down box below the border size attribute allows you to chose the alignment of the table (left, right or center).
    5. The table Caption is similar to providing a title for your table. The text is centered above your table and the font bolded.
    6. The last attribute, Summary, provides an alt tag to your table, which shows up when you hover over the table.
    7. Once you are happy with the setup of your table, press the OK button. If you decide you no longer want a table, press the Cancel button.
  9. Saving Your Changes
    Once you are done adding content, press the Submit button below the content window or you can press the Save button in the FCKEditor.

Creating Your Menu

  1. Now we will create the menu for our site. Back at the Site Menu you will see the menu item Menu Manager, click on this link to manage your menu items.
  2. In the menu manager window you will see four columns, Sub Menu, Edit, Activate/Inactivate and Sort Order.

  3. Let's add a new menu item.
    1. First select the Create a New Menu link on the bottom of the menu Manager window.
    2. Now you will need to enter some information about your new menu item.
      1. Decide on a Menu Title, for this new menu item we have selected User Services
      2. Then you will need to enter a Sort Order. Sort Order allows you change the order that each menu item will be displayed in. The numbers do not have to be in a sequential order, but the menu items you wish to be towards the bottom of our menu list need to have a larger sort order number.

        As a tip, if there is an item you know you will always want on the bottom make its sort order large, like 100, so that it will always have a higher sort order number.

        Note: How the menu items line up in the Menu Manager is how your menu items will appear on the Home Page. For this menu item we have decided on Sort Order 8.
      3. Now you will need decide which content will be linked to this menu item. The drop-down box titled Select Existing Content allows you to choose which content page will be linked to this menu item.

        For now, select the page that you created in the previous steps, for our menu item we have selected Student Services.
      4. If instead of being linked to a page already created in your site, a menu item can be linked to an external link. Use the Link to URL: option, in the text box enter the URL you would like the menu item to link to.
      5. Once you are happy with your new menu item, press the Create button.
    3. Continue these same steps until you have several menu items created, linked to pages in your content.
    4. In the Menu Manager window, there are some other things to note about your menu items.
      1. Sub Menu - is a list of menu items currently available for you to use in you site. Clicking on a menu item will display items that are currently under that menu.
      2. Edit - allows you to change the menu item's title, select which content will be associated with this menu item, and enter the sort order rank for this menu item.
      3. Activate/Inactivate - is a toggle to allow the menu item be active or inactive on your site. What is currently displayed is the option available for the page.

        For example in the menu item below, MyUcmerced is currently an active menu item we can choose to inactivate it by selecting the option inactivate.

Creating Site Features

  1. Now we will look at creating a feature for your page. Back at the Site Menu select the menu item Feature Manager.

    Site owners can use the Feature Manager to easily control the features that appear on the right and left sides of their pages.

    If multiple features are active for a site, a feature will be selected at random on each page load. Depending on the site template being used, features can contain a title, content, image, and a link embedded in the title.
  2. Let's create our first feature, select the Create a new feature link.
  3. If we are creating a feature to be placed on the Left side we do not enter any titles. If we want to create a feature to be placed on the Right side of our page we do need to enter titles.
    We are going to create on on Right side, so we will enter titles.

  4. Generally the feature is just an image so you don't need to worry about adding any content along with the image.
  5. Now we will complete the remainder of the attributes of the feature. Since we already decided the feature will go on the right hand side, select Right from the Feature Location: drop-down box.
  6. Next we will select the image to be associated with the feature, the drop-down box Feature Image: allows you to select from the folder \images\features which you can upload images via FTP. In this case we have chosen the image ASsidebarpic.jpg.
  7. After we have selected the image, we can add a URL to the feature in the Feature URL: text-box. In this case we have added the URL http://it.ucmerced.edu.

    If you choose not to add a URL, leave the text-box blank.
  8. Finally, we have to decide if we are ready to make the feature active. If so, in the Feature Active: drop-down box select Yes.

    If you would like to wait before making the feature active, select No from the drop-down box.
  9. Once you have completed all the steps and happy with your new feature, press the Submit button.

Uploading Documents and Images

Uploading images can seem complicated, but its quite easy once you understand the tools. To upload images and other files, such as PDF's you will need to use an FTP client, a good one is FileZilla. Once you download the program to your computer, you will need to set it up.

Be sure to get your username, password, and site name from the Web Master before you start. If your not sure email webrequests@ucmerced.edu The host address is always 169.236.253.30..

Whatever program you use, be sure to only enter your username and password while logging into the FTP server. You want to take precautions to not embed your username and/or password into the FTP files.

  1. To access the FTP server you will need the host (169.236.253.30), username and password which you should have received when you requested to create your website. When you open FileZilla you will see three text boxes to fill in, Host, Username and Password. Once those are filled in press Quckconnect, the button just to the right of the text boxes.

  2. Once you are connected you will see two boxes in the middle of the window, one will be labeled local site: and one will be labeled Remote site:.
  3. We'll start with the Remote Site side first. On the right hand side, if you are not already in your site's folder you will need to navigate to it. All the sites are in alphabetical order, so scroll down until you see the name of your site.

    Now that you are in your site you will see the folders and files of your site in the window below. Navigate until you find the folder you want to put your image or file into.

    If you are adding an image for a feature, navigate to the \images\features folder and upload an image there.

    It's good practice to keep all of your images in one folder, all your PDF files in another folder, etc. Keeping similar file types together makes managing your site later on easier. Images not used in a feature should be kept separate from those used in features.

  4. Now locate the file that you want to transfer over to the FTP server. This will be on your local machine, the computer you are currently working on. The window on the left, local site: will have a path to you local computer, below that you will see a list of folders on your computer. Select the folder that the file you which to transfer is located in.

  5. Once the folder is selected, you will see a listing of files and folders within that folder. Go ahead and find the folder/file you want to transfer over to the FTP server, this would most likely be an image or PDF file.
  6. Once it is selected, drag the file over to the folder in the Remote Site window.

  7. Continue this process until you have transfered all of your files to the FTP server.
  8. Once you are done, be sure to disconnect from the server. To do so, go to Server -> Disconnect.

Getting More Help

If you need further help with the CMS, have design questions, technical questions or you would like to request your own site email Web Requests at webrequests@ucmerced.edu.


Looking for help?

We offer a number of tutorials and FAQs available in the Guides & FAQs section.

If you have any questions, problems, or comments, please contact the IT Help Desk via email at helpdesk@ucmerced.edu, via phone at 209.228.HELP (4357), or visit them in the Classroom and Office Building room 132A.