Content Management System (CMS)
CMS-1
Welcome!
2 Content Management System Training
Analyst Programmer | Web Tech. Trainer
Web Services
Office of Information Technology 240.567.3123
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
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/
4 Content Management System Training
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
Browsers and OS options
Supported Browsers
̶Mozilla Firefox
̶
Google Chrome
Operating Systems
– Windows 7
– Mac
6 Content Management System Training
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
Where CMS Work is Done
CMS
Staging
site:
http://
staging
.montgomerycollege.edu
CMS Production
site:
http://
cms
.montgomerycollege.edu
8 Content Management System Training
!!!! Your published content will go live on the production server at every hour…
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
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
Views in CMS
Four Main Views
̶ Workarea Folder-View
̶ Workarea Content-View
̶ Content Block Edit-View
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.)
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.
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.
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.
The Workarea
Six tabs at the top
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
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 ID
Unique identifier for a content block
Search for Content ID
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
Logging in
Logging In
– Need login credentials:
• User • Pwd
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.
Your Practice Folder
Content Management System Training 24
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
Editing Content
Content Management System Training 26
Open the Editor
̶ Click on your
content block
,
̶ the content block
edit-view
will appear
̶ Click on the
‘EDIT’
button,
Editing Basics
6 Buttons
̶ Publish ̶ Check In
̶ Undo Checkout ̶ Save
̶ Cancel ̶ Preview
Editing Basics –
Button Descriptions
Publish
Publish the content to the website Will copy to CMS production in hour
Check-In
Save and check-in content
This updates content in DB and exits editor
Allows you and other uses to continue changing content
Undo Checkout
Close editor without saving changes
Return content to its state prior to checkout
Save Saves content WITHOUT leaving editor
Cancel
Close editor WITHOUT saving changes
Leaves content in checked out state & returns to Workarea view
Preview
Preview current content within its template in a new browser Only available once you are in edit mode
Content Status Indicator
In
Workarea,
make note of the ‘Status’
column
– A: Published – O: Open
Content Status Indicator
Unique identifier for a content block
30 Content Management System Training
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
32
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
34
Templates:
Department2
Template Basics
Header
Menu Area
Main Content Area “Content Block”
Content Blocks:
Header
Department Header
consists of
3 content blocks
– Department Banner Image
– Department Title
– Department SubTitle
Content Management System Training 36
Content block names must not be changed!
CMS templates use the exact names when loading headers into a browser!
CMS Editing Toolbars
CMS have
two editing toolbars
̶
Aloha
Simple / basic editor actions
̶
Inspector
The Inspector Tool
Content Management System Training 38
Inspector
“hides” at the
bottom of your screen
Editing Basics:
Aloha
Aloha Toolbar
(Simple and Basic actions)
– Bold – Italic
– Font sizes for headings/paragraph – Create/manage hyperlinks
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
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
Exercise 1:
Text Styling
Content Management System Training 44
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
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.
Working with Images
Inspector
– modify image size,
– position
– text wrapping around the image
– to delete an image
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
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
Exercise 3:
Uploading Documents
Insert a document into the Document
Management System (DMS)
Overwrite an existing document with a new
document
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>
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
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
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
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…
54 Content Management System Training
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
Feedback
56 Content Management System Training
Feedback
http://staging.montgomerycollege.edu/cms/classfeedback/
