Content Management System (CMS) CMS-1 Last edited on February 03, 2016 by Haesung Park
Welcome! Analyst Programmer Web Tech. Trainer Web Services Office of Information Technology 240.567.3123 haesung.park@montgomerycollege.edu Content Management System Training 2
Web Services Team Web Services Team Joseph Bilzor, Analyst Programmer, x73044 Marc Bolea, Web Graphic Designer, x73134 Sharon Burke, Analyst Prog. Web Architect, x74301 Haesung Park, Analyst Prog. Web Tech. Trainer, x73123 Tzu-Yin Shiau, Analyst Programmer, x73041 Content Management System Training 3
Class Description: CMS-1 CMS = Content Management System CMS -1 Introduction to CMS Learn the most essential skills required to create and maintain department Web sites Requires CMS credentials to login to CMS Class guidebook Materials available online http://cms.montgomerycollege.edu/cms/howto/ Content Management System Training 4
Key learning from CMS-1 Understanding of CMS Basics Understanding of CMS Editors Upload files and images to the Document Management System (DMS) Create Hyperlinks Preview and Publish web content Content Management System Training 5
Browsers and OS options Supported Browsers Mozilla Firefox Google Chrome Operating Systems Windows 7 Mac Content Management System Training 6
New Website New website Submit a request CMS Accounts and CMS Web Space Request Form http://cms.montgomerycollege.edu/oit/wsrf.aspx Review Resource Requirements with IT Approval for a New Folder for website Email info to requestor Create your website Content Management System Training 7
Where CMS Work is Done CMS Staging site: http://staging.montgomerycollege.edu!!!! Your published content will go live on the production server at every hour CMS Production site: http://cms.montgomerycollege.edu Content Management System Training 8
CMS Key Terminology Assets - Graphics or documents you have uploaded to the CMS Content Blocks - A web site consists of several pages - Each page is made up of one or more blocks of content Content ID - Each content block has a specific content id Document Management System (DMS) - Assets management system Workarea - Central location to perform most tasks managing your website Content Management System Training 9
Web Content Text as Web Content: Written for the Web Have good internal links Written for a global audience Multimedia Web Content: Animation Images Sound Video Content Management System Training 10
Views in CMS Four Main Views Workarea Folder-View Workarea Content-View Content Block Edit-View Staging Site Preview & Production Site View Content Management System Training 11
Four Main Views in CMS Workarea Folder-View When you click on your folder, you will find a list of your Content Blocks and Assets (pdfs, docs, images, etc.) Content Management System Training 12
Four Main Views in CMS Workarea Content-View When you click on a content block title in the folder area, the Workarea Content View for that item will display. This is a preview only. Content Management System Training 13
Four Main Views in CMS Content Block Edit-View When you open a content block in the editor, all of the text and image styles will be displayed and you will be able to edit the page. Content Management System Training 14
Four Main Views in CMS Staging Site - Preview and Production Site View These views will accurately represent your content. It is best to develop the habit of checking page layout on the Staging site. Note the grey Ektron toolbar at the top of the window. Content Management System Training 15
Six tabs at the top The Workarea Content tab is where content editors create and manage content for their website
Creating a new Content Block How to create a Content Block? In Workarea Click New Click HTML Content Provide Title Click on PUBLISH Content Management System Training 17
Searching for Content Its easy to find your content in CMS if you know the content ID (ie., 57895) Use content ID to do an advanced search for a specific webpage s content ID, ie., 57895 How? Click on the Action button to begin your search Then choose Advanced Search and Content ID Content Management System Training 18
Content ID Unique identifier for a content block http://cms.montgomerycollege.edu/athletics/generic.aspx?id=57895 Content Management System Training 19
Search for Content ID Content Management System Training 20
Editing Content After creating new HTML content, to make changes to existing HTML content, you will need to EDIT it To edit existing content, click the desired content you wish to edit from your work area and click on the EDIT button Content Management System Training 21
Logging in Logging In Need login credentials: User Pwd http://staging.montgomerycollege.edu/cmslogin.aspx Content Management System Training 22
Logging Out Logging Out Close the Workarea window Click on the logout button on the Ektron toolbar OR if you are given the original menu, click on the logout button. Content Management System Training 23
Your Practice Folder Your Practice Folder for this class (Good for next 6 Months!) Content tab EDU CMS Training Today s date (YY-MM-DD) Your Name opens content-blocks displayed in the right panel Content Management System Training 24
Your Practice Folder Content Management System Training 25
Editing Content Open the Editor Click on your content block, the content block edit-view will appear Click on the EDIT button, the editor will open Content Management System Training 26
Editing Basics 6 Buttons Publish Check In Undo Checkout Save Cancel Preview Content Management System Training 27
Editing Basics Button Descriptions Publish Check-In Undo Checkout Save Cancel Preview Publish the content to the website Will copy to CMS production in hour Save and check-in content This updates content in DB and exits editor Allows you and other uses to continue changing content Close editor without saving changes Return content to its state prior to checkout Saves content WITHOUT leaving editor Close editor WITHOUT saving changes Leaves content in checked out state & returns to Workarea view Preview current content within its template in a new browser Only available once you are in edit mode Content Management System Training 28
Content Status Indicator In Workarea, make note of the Status column A: Published O: Open I : Checked in
Content Status Indicator Unique identifier for a content block Content Management System Training 30
Website Templates What is website template? A website template is a pre-designed webpage (Ready-Made) Allow to quickly build a website without the need to create webpages from scratch (Save-Time) Consistency throughout all College departments Websites (Unity, Professional) Content Management System Training 31
Templates Types Department Template Single/static left navigation shared by all subpages Best for basic sites Department2 Template Top/static menu with changing left navigation for each subpage Best for more complex sites Content Management System Training 32
Templates: Department Content Management System Training 33
Templates: Department2 Content Management System Training 34
Template Basics Header Menu Area Main Content Area Content Block http://cms.montgomerycollege.edu/edu/department.aspx?id=15426 Content Management System Training 35
Content Blocks: Header Department Header consists of 3 content blocks Department Banner Image Department Title Department SubTitle Content block names must not be changed! CMS templates use the exact names when loading headers into a browser! Content Management System Training 36
CMS Editing Toolbars CMS have two editing toolbars Aloha Simple / basic editor actions Inspector Advanced editing actions Content Management System Training 37
The Inspector Tool Inspector hides at the bottom of your screen when you re editing content Content Management System Training 38
Editing Basics: Aloha Aloha Toolbar (Simple and Basic actions) Bold Italic Font sizes for headings/paragraph Create/manage hyperlinks Pin the toolbar anywhere in your work area
Applying Styles: Aloha Editor Aloha Toolbar (Simple and Basic actions) Unordered lists Bullets Arrows Dashes Squares Ordered lists Numbers Letters
Editing Basics: Inspector Inspector (Advanced actions) - Text manipulation Underline, strikethrough, uppercase, lowercase, Text alignment, left/right, center, justify Text color - Image manipulation Sizing, deletion, position, Add borders to images Changing spacing
Editing Basics: Inspector Span The inspector Style Selector in the Basic tab enables you to chose styles you can apply to the <span> tag. Click anywhere in a paragraph, and then apply styling properties Working with Span is tricky and takes some practice Hint: Look for the Tags in inspector to make sure you re within the span you just created
Editing Basics Spacing Double Spacing is default. SHIFT+ENTER for single space ENTER for double space If you make a mistake, CTRL-Z works as an Undo
Exercise 1: Text Styling Change size of text Using Aloha s toolbar Change color of words / SPAN Using Aloha s toolbar and the Inspector Practice using styling Double-spacing / single-spacing Enter for double-space Shift + Enter for single-space Creating and style bullets Unordered and Ordered lists Content Management System Training 44
Working with Images Images and files are called Assets Assets are uploaded and stored in the Document Management System (DMS) Remember to include ADA compliance: All graphics should have alternative text (ALT-tags) to be accessible to people with disabilities. Content Management System Training 45
Working with Images Inspector modify image size, position text wrapping around the image to delete an image Content Management System Training 46
Exercise 2: Inserting & Editing Images Insert an image into the Document Management System (DMS) Insert the image into a content block Edit the image using Inspector Delete an image using Inspector Content Management System Training 47
Working with Documents Documents that change often should be overwritten by updated documents Example: Academic Calendar PDF document for 2014 Academic Calendar would be overwritten by 2015 Academic Calendar PDF Eliminates need for rebuilding links Only works with PDF Content Management System Training 48
Exercise 3: Uploading Documents Insert a document into the Document Management System (DMS) Overwrite an existing document with a new document Content Management System Training 49
Working with Hyperlinks What is hyperlink? something you click on (word, image or graphic), when you click on it, it automatically sends the viewer to another destination provide a convenient way to connect information so that readers can find their way around the Web <a href='http://www.example.com/ >Title of Link</a> Content Management System Training 50
Working with Hyperlinks Types of Hyperlinks: External Hyperlink Links to a page outside of the Montgomery College web site Internal Hyperlink Links to a page within the Montgomery College web site Content Management System Training 51
Working with Hyperlinks Documents/files or images can be hyperlinked to the following: Web pages outside the CMS (external links) Another MC Unit s CMS content block and document asset (internal links) Email address Your other CMS content blocks and document assets Content Management System Training 52
Exercise 4: Practice Hyperlinks Make an external hyperlink that opens in a new browser window Make an internal hyperlink Remove the hyperlink using Inspector Create a hyperlink and apply a button style using Inspector Content Management System Training 53
CMS Resources http://cms.montgomerycollege.edu/cmsresources/ http://cms.montgomerycollege.edu/cms/howto/ http://cms.montgomerycollege.edu/webdiy/ Process checklists, request forms, help documentation, style guides, web standards, training schedule, project blog, etc Content Management System Training 54
EDU Redesign OmniUpdate Status Timeline Training / Workshop Planning & Writing Your Web Content Class http://cms.montgomerycollege.edu/cms/howto/ Web Content Migration Edu re-design blogs http://blogs.montgomerycollege.edu/edu/redesign/ Content Management System Training 55
Feedback Feedback http://staging.montgomerycollege.edu/cms/classfeedback/ Thank you for attending! Content Management System Training 56