Web Ambassador Training on the CMS Learning Objectives Upon completion of this training, participants will be able to: Describe what is a CMS and how to login Upload files and images Organize content Create folders and landing web pages Create and edit web pages Modify existing web pages and content What is a Content Management System? A Content Management System (CMS) is used to build a website. With Content Management Systems, ordinary people can contribute content to a website without the help of a computer geek. CMSs run over the Web, so you do not need to install any special software on your computer. A CPCC website contains various kinds of content, including text, photos, and images. These can exist in many forms: documents, news items, events, videos, audio files, any types of file and data that can be uploaded or created on a website. Content can also be uploaded from your local computer. You create folders on a CPCC website to hold content and to create a navigation structure. Content Management Systems allows website administrators and designers the ability to create unique site designs. Here's an overview of the Content Management System layout, and some design examples. What does a CPCC website look like? For years there has been a consistent design for the default Content Management System appearance. The default design looks generally like this: In the default design, the navigation menu is in the left area, and usually appears as an indented list of folders in the site. There also may be a set of tabs in the Log In, Location Information strip near the top. 1
Logging into CMS It is recommended: To use Mozilla Firefox when editing your CPCC website Contact the ITS Helpdesk after this training session for editing access to your CPCC website When you have been granted access to edit your CPCC website from the Helpdesk, you should go to your CPCC website, and add /edit to the end of the URL, i.e. http://www.cpcc.edu/pd/cmstraining/edit and login with your CPCC credentials. After logging in, if you go to a folder where you have rights, you'll see a header strip that has a green color with tabs for contents, view, edit, rules, and sharing: You'll be able to explore to find the differences between these tabs, but here are descriptions to help you start: Contents - shows a list of items in a folder View - shows the view an anonymous web surfer would see Edit - shows a panel for changing a view Rules - shows a panel for controlling how an item is created and managed Sharing - shows a panel for setting rights of other users to see or edit content You also see menus in the lower part of the green header strip, Display, Add new..., and State: Explore these also. Here are basic descriptions of these menus: Display - shows menu choices for setting the display type (list view, summary view, etc.) Add new... - shows menu choices for adding content items (images, pages, folders, etc.) State - shows menu choices for setting publication state (private, or public) These menus and tabs will offer the main ways you interact with the Content Management System. You will become very familiar with them as you learn more about managing a CMS- powered website. 2
Adding Content A general overview of how to add new content items in the Content Management System, including definitions of each standard content type New content items are adding via the Add New... drop- down menu: Adding content in the Content Management System is done placefully, which is to say that you must navigate to the section of your CPCC website that you wish the new content to reside before you use the Add New... drop- down menu. You can of course cut, copy, and paste content items from one section to another if necessary. Content Types In the Content Management System, you can use a number of Content Types to post certain kinds of content. For example, to upload an image you must use the Image content type. Below is a list of the available content types in order of their appearance, and what each are used for: File A File in the Content Management System is any file you wish to upload with the intent that it can be downloaded by your site visitors. Common examples are PDFs, Word Documents, and spreadsheets. Folder Folders work in the Content Management System much like they do on your computer. You can use folders to organize your content, and to give your CPCC website a navigation structure. Image The Image content type is used for uploading image files (JPG, or PNG) so that you can insert them into pages or other page- like content types. Page A Page in the Content Management System is one of the simplest content types available. Use Pages to write the bulk of your web pages on your CPCC website. Title Nearly all content types in the Content Management System have two fields in common: Title and Description. The Title of content items, including folders, images, pages, etc., can be anything you want - - you can use any keyboard characters, including blanks. Titles become part of web address for each item you create in the Content Management System. Web addresses, also known as URLs, are what you type in a web browser to go to a specific location in a website (Or, you would click your way there), such as: www.mysite.com/about/personnel/sally/bio or www.mysite.com/images/butterflies/skippers/long- tailed- skippers 3
Web addresses do have restrictions on allowed keyboard characters, and blanks are not allowed. The Content Management System does a good job of keeping web addresses correct by using near- equivalents of the Title that you provide, by converting them to lowercase, and by substituting dashes for spaces and other punctuation. The web address of a given item is referred to as the short name in the CMS. When you use the Rename function, you'll see the short name along with the title. The fields will vary according to the content type. For instance, the Link content type has the URL field. The File content type has the File field, and so on. Description The Description appears at the top of pages, just under the Title. Descriptions are often used in conjunction with a variety of Folder and Collection views (such as Standard and Summary). Adding Folders Adding folders to a CPCC website is the basic way of controlling the organization of content. You have undoubtedly created folders (directories) on your computer's hard drive. Personal computers use a hierarchy of folders to structure and organize the programs and files on the hard drive. In the Content Management System, folders are essentially used the same way, except that they are created on the CPCC website, for organizing content in the Content Management System's built- in storage system. Folders are added by clicking the Add new... drop- down menu. Select Folder from the menu: You should now see the Add Folder screen: 4
Fill in the Title, which is required, as indicated by the red square. The Description is optional; you can always come back to the edit panel if you need to add a description of the folder. Descriptions are useful when a site visitor uses the search - results will display with both the Title and Description of the item. You also notice tabs along the top: Default, for entering the Title and Description fields, Categorization, for specifying categories that apply to the folder (you may know these as keywords), Dates, for setting the time period when the folder should be available for view on the website, Ownership, for specifying the creator and/or contributors for the content item, Settings, for allowing comments about the item and whether it shows in the navigation menu for the website. These tabs are standard, so you'll see them when you click other content types. Be sure to click Save at the bottom of the page when you are finished. This will complete the folder creation process. Adding Images Adding images to a CPCC website is a basic task that may involve a little work on your local computer, but is essential, because photographs, maps, and custom graphics are so important on websites. Remember to use web- standard file formats for all images. Acceptable formats include: JPG, JPEG, and PNG. Do NOT use BMP formats as these are not widely supported by web browsers. When you are ready to upload an image, use the Add new... drop- down menu (You will only see the Add new... menu after logging in): 5
After clicking to add an Image, you'll see the Add Image panel: The Title and Description fields (field, as in "data input field") are there, as with adding a Folder, and at the bottom there is a place to upload an image. Let's look at the three input fields individually: Title - Use whatever text you want, even with blanks and punctuation (the Content Management System handles web addressing). Description - Always a good idea, but always optional. Leave it blank if you want. Image - The Image field is a text entry box along with a Browse... button. You don't have to type anything here; just click the Browse button and you'll be able to browse your local computer for the image file to upload (Remember: You need to remember where you keep your images on your computer). For images, at a minimum, you will browse your local computer for the image file, then click Save at the bottom of the page to upload the image to the website. You'll have to wait a few seconds for the upload to complete. A preview of the uploaded image will be shown when the upload has finished. Images and files that are uploaded into the Content Management System have their IDs (URLs) based on the title that is given to the image (instead of the file name of the image or file). Since the title field is not required, if you do not fill it out, the name of the item will default to using the name of the file in place of the title. Adding Pages To add a page, use the Add new... menu for a folder: Select Page from the drop- down menu, and you'll see the Add Page panel: 6
The Title and Description fields are there at the top. Fill each of them out appropriately. There is a Change note field at the bottom, also a standard input that is very useful for storing helpful memos describing changes to a document as you make them. This is useful for pages on which you may be collaborating with others. The middle panel, Body Text, is where the action is for pages. The software used for making Pages in the Content Management System, generically called visual editor, is a most important feature allowing you to do WYSIWYG editing. WYSIWYG editing - - What You See Is What You Get - - describes how word processing software works. When you make a change, such as setting a word to bold, you see the bold text immediately. People are naturally comfortable with the WYSIWYG approach of typical word processors. 7
Adding Files Files of various types can be uploaded to CPCC websites. Choose file in the Add new... menu for a folder to upload a file: You will see the Add File panel: Click the Browse button to navigate to the file you want to upload from your local computer. Provide a title (you can use the same file name used on your local computer if you want). Provide a description if you want. When you click the save button the file will be uploaded to the folder. Example file types include PDF files, Word documents, zip files. Files on the CPCC website are treated as just files and will show up in contents lists for folders, but there will not be any special display of them. They will appear by name in lists and will be available for download if clicked. There are specialized add- on tools for CPCC websites that search contents of files. If you are interested in this functionality, ask the CPCC helpdesk. Setting Basic Properties The tab panels available on each content item have fields for basic information. Any content item, when clicked by a user with edit rights for the item, will show a set of tabs at the top for setting basic properties: 8
These basic properties tabs are: Default - shows the main data entry panel for the content item Categorization - shows a panel for creating and setting categories (keywords) for the item Dates - shows the publishing date and expiration date for the item Ownership - shows a panel for setting creators, contributors, and any copyright information for the item Settings - shows a small panel for setting whether or not the item will appear in navigation menus and if comments are allowed on the item The input fields under these tabs cover basic descriptive information called metadata. Metadata is sometimes called "data about data." The Content Management System can use this metadata in a multitude of ways. The Dates panel has fields for the publishing date and the expiration date, effectively start and stop dates for the content if you wish to set them: The Settings panel has fields that may vary a bit from content type to content type, but generally there are input fields controlling whether or not the item appears in navigation, or if there are comments allowed, and other similar controls: Recommendations To keep files in a document folder, and keep images in a images folder both of which are excluded from navigation You don't always need fields such as publishing and expiration dates, language, and copyrights, but these data should be specified when appropriate. A content management system can only be as good as the data completeness allows. 9
Managing Content The contents tab is the place where content items such as folders, files, images, and pages can be copied, cut, pasted, moved, renamed, etc. Cut/Paste Moving items from one area to another on a website is a common task. Often this need arises with placement of content in the wrong folder. Copy/Paste A copy/paste operation is identical to the cut/paste operation, except that there is no removal of content from the original folder. It works as you would expect it to work. Editing Content Editing website content works the same as adding content - - usually the data entry and configuration panels for the content are the same for editing as for adding. Of course, when we edit an item of content, the item already exists. Click the Edit tab for an item and you will see the data entry panel for the item, along with the existing values of the item's data. The Edit panel for a folder simply shows the title and description input areas. Often a description is not provided for a folder, so the only thing changed is the title. If you do wish to give a description, which is a good idea for distinguishing folders in a list, the description can be text only - - there is no opportunity for setting styling of text, such as bold, italics, or other formatting. This keeps the descriptions of content items as simple as possible. Reordering Items The contents tab contains functionality for quick and precise reordering of items in a folder. Consider the following folder, called "Skippers," for holding information about this type of butterfly. Often, when we add content items, we don't initially get them in the order we want. The desired ordering is not always alphabetical, but in this example we can assume so. Below you see the Skipper butterfly subfolders are not in alphabetical order: 10
To move the top item named "Spread- winged Skippers" to the bottom of the list, one would click within the Order column on the left (containing the "double- colon" symbols) and drag the row to the desired position: Dragging and dropping is done by holding the mouse button down as you move the item. The item that is being moved turns yellow as it is being moved: 11
When the mouse button is released, the item stays where it was dropped: To see the reordering change in the left- side navigation, refresh the web page by clicking on the browser refresh icon, or force refresh by pressing Ctrl + F5 on the keyboard at the same time. Inserting Images The editor allows you to insert image files stored on the website into your web page, using the toolbar: button on the Clicking this button launches the Insert Image dialog: 12
The dialog displays: A folder navigation list. An object navigation list, from which you can select your image file. Image preview, and options for alignment (Inline, Left, or Right), size and captions. In the example above, an image of a water lilies was selected Water lilies.png (rather large one, at its original size of 800*600 pixels). According to the "Image alignment" option you choose (Inline, Left, or Right), the image will be placed in your page. You may also choose the size of the image you need. This is especially convenient when you deal with large images, as there is no need to use Photoshop or other external image editing application to crop or change the size of an image. The "Image size" dropdown list provides a choice between many sizes and formats: 13
Inserting Links Inserting internal, external and anchor links. Internal Links Select a word or phrase, click the Insert/edit link icon, and the Insert/edit link panel will appear: You use this panel by clicking on Home or Current folder to begin navigating your department website to find a folder, page, or image to which you wish to make a link. External Links Select a word or phrase, click the Insert/edit link icon, select External under Libraries, and the External link panel will appear. Type the web address of the external website in the box after http://. When you press return or leave the field a preview will appear to check the address. If you paste in the web address, make sure you don't have duplicate http:// at the beginning of the address. Then click ok. The external link will be set to the word or phrase you selected. Inserting Tables Inserting, updating and deleting tables, columns, rows and cells. Tables are handy for tabular data and lists. To add a table, put your cursor where you want it and click the Inserts a new table icon. You'll see the Insert/Modify table panel: 14
Setting rows and columns is straightforward. You can add a summary of the table in the Summary field if you like. After the table has been created you can click in a cell to show table resizing handles: In the table above, the cursor has been placed in the "Special Leader" cell, which activates little square handles around the edges for resizing the entire table. It also activates the other table controls in the toolbar which, lets you edit properties of a row or a cell, lets you add and remove rows or columns and lets you split and merge cells. 15