CommonSpot Basics: Training Guide
This workshop is intended to introduce the UW-Eau Claire content contributor to the CommonSpot
concepts, tools and methods needed to maintain web sites. Content Contributors will be able to add and
manipulate images, move elements and edit existing content after completing this workshop.
Materials







CommonSpot Basics: Training Guide (white)
CommonSpot Basics: Exercises (pink)
Common Spot Basics: Copy Text (yellow)
CommonSpot Tip Sheet (white)
CommonSpot Terms (purple)
Configuring Your Browser for CommonSpot (green)
CommonSpot Quick Reference Guide (white)
Setup


Open Internet Explorer and browse to http://www5.uwec.edu/playground
When instructed, each participant will go to their assigned site, linked from the sidebar of the
Playground home page
o The link named TextCopy.txt will be used later to copy text into the Rich Text Editor
o Click the link named Circle of Faces image. Then right-click or Ctrl-click (Mac) on the
displayed image and save it to your desktop. Then use the browser back button to
return to The Playground site
o The link named PaintSupplies.doc will be used later to upload and link on the Activities
page
Outline
Part 1: Web Publishing Process
 Types of Content
 Types of Web Publishers
 Approval Process
 Content States
 Tools
o Browser
o Logging in
o CommonSpot Menu Bar
o Customizable Left Panel
o Pending Actions
Part 2: Using CommonSpot to Maintain a Site
 Image Gallery
 Containers
 Elements
 Rich Text Editor
 Linking
The CommonSpot Intermediate workshop will provide the content contributor with the skills needed to
create new content, change layouts and add extra functionality.
CommonSpot Basics
Part 1: Web Publishing Process
Types of Content
All of CommonSpot’s content is edited and published within the context of the Web page. No client
software besides the browser is required, nor is it necessary to navigate to a separate application or URL
to manage content. Participants, from developers to content contributors, are provided with a series of
intuitive and dynamic User Interface components and menus that allow them to participate in the
creation and management of the site, all within the context of the page.
Pages, Sites and Subsites
Every CommonSpot site is made up of individual HTML pages. Each of these pages contains content in
different structures. A page’s structure relies on the underlying template to drive the layout
characteristics of the page. This structure contains CommonSpot elements that make up the content of
the page. All page content, other than images or other native document files are stored in a database,
allowing a separation of content from display.
A site is the starting location of all pages belonging to an entity. A subsite in CommonSpot is any distinct
grouping of pages within a site, stored in a folder or directory in a static page site. Think of subsites as
your main navigational areas.
Images
Another form of content that can exist in CommonSpot is images. Images can be part of page content, but
they are stored in the image gallery. The image gallery is a central repository of image files that are
categorized for searching. Each image in the gallery is versioned and can be updated, in turn updating all
pages that use that image.
Uploaded Files
CommonSpot can also manage non-HTML content. Publishers can easily upload Word documents, PDFs,
PowerPoint presentations, and other documents directly to the Web site. These files are versioned and
managed by CommonSpot just like normal CommonSpot pages. Audio and video files, however, are stored
on a separate server more ideally suited to this type of media.
External Pages
External pages are those not created by CommonSpot. The Register External Page item from the
Properties & Actions menu provides the ability to organize and classify these external URL pages. A user
can assign each of these pages standard and custom properties that then appear in Page Index elements
and the Page Finder and Page Gallery functions.
2
CommonSpot Basics
Types of Web Publishers
The tasks you perform in CommonSpot depend on the type of Web publisher you are. Here are the types
provided by CommonSpot:
 Content Contributor
o
A person who maintains the content of a Web site
 Site Owner
o
The person who assigns permissions to individuals and makes top-level decisions about
the site
 Site Developer
o
The site developer is most often a member of Web Development Services but can be
given to a person associated with the site who has the skills and time to take on this role
after completing training. This person makes decisions about the design and content of
a site and needs to understand the complexities of templates, design and usability
As a content contributor, you will log into your site with Internet Explorer or Firefox. Using the set of tools
provided by CommonSpot, you will select the content area to be modified and through a set of dialogue
boxes and options, make the desired changes.
Approval Process
Depending on your needs, you may have your site set up to use an approval process. For example, if you
employ a student content contributor or prefer to have oversight of content changes, you may choose to
designate a content approver. If so, you will encounter the additional state of Pending Approval,
described below.
Content States
CommonSpot manages all content in a database repository and separately manages the state of each
individual element. Content for elements can exist in one of three states – Published, Work In Progress,
and Pending Approval.
• Published content is the current content and is generally available for viewing by anonymous
or authenticated users.
• Work In Progress is any newly created or modified content that is in progress and not ready for
public distribution. It has also not been submitted for publication by the author. In Read mode,
only the author of the changes can see the content. Others with Edit or Admin permission may
view Work In Progress content, but only in Edit mode. Otherwise, it is not accessible. Your Work
in Progress content is indicated by a yellow icon , (the plus sign indicates newly added content;
the curved arrow indicates a change to content).
• Pending Approval is Work In Progress content awaiting approval. It has been submitted for
publication by the author of the changes and is progressing through the workflow approval
process, pending one or more approvals. Your Pending Approval content is indicated by a green
icon
(the curved arrow indicates a change to existing content).
3
CommonSpot Basics
As content for each element is managed separately, it is possible to have elements on the same page in
different states. For example, an author could have two text blocks and an image on a page, one text
block could be Work in Progress, one Pending Approval and the image element could be current.
CommonSpot displays different icons for the various states, to enable users to better manage the content
creation and publication process. Clicking on each of the icons brings up an applicable menu.
It is important to remember that only one user can be in Work or Approve mode on the same page at one
time. So if you are done editing a page, simply switch back to View mode, to allow others to enter Work or
Approve mode on the page.
Also remember that each element can have work in progress changes from only one user at a time.
CommonSpot keeps track of what content you have changed, and no one will be able to edit any
elements that you have modified (in the Work in Progress or Pending Approval states) until your revisions
are published or discarded. Users with Edit or Admin rights can take ownership of those changes, making
them their own work in progress, but everyone else has to wait until their changes are resolved before
editing those elements.
You can easily access your Work In Progress pages through Pending Actions, described later in this
document.
Tools
Browser
A browser is the only application needed to publish web pages. See the handout “Configuring Your
Browser for CommonSpot” for the types and versions of qualified browsers for CommonSpot use.
Certain settings need to be set (such as allowing popups) to ensure full compliance with CommonSpot
functions. See the handout for instructions.
Note: Be sure to close your browser at least once a day. Memory leaks can slow your computer down
significantly.
Logging In
A brief description of the server environment is required. During training you will work in a single server
development environment, www5.uwec.edu/site/pagename. You will not have exactly the same
experience as in the multi-server production environment where live pages reside on www.uwec.edu and
authoring pages reside on www2.uwec.edu.
Browse to the location of the page being edited. Login by selecting the User Login Key icon at the bottom
of the page

In the Publisher Login dialog box, type your UW-Eau Claire
username and password to connect
4
CommonSpot Basics

You will find a pencil icon at the top right-hand corner of your screen
.
o Select the icon and it will slide out a complete menu.
 View Page in CommonSpot
 This will open the CommonSpot interface in View Mode--You will see the
content on the authoring server, rather than the production server
o The other items in the Slide-out Menu are shortcuts to common features. Later, after you are
comfortable with the new interface, they will probably become more useful
It is important to note that once you are logged in, if you are inactive for too long, you will be logged off
automatically.
CommonSpot Menu Bar
When the user is logged into the site, user interface components are added to the page to guide the user
in performing his/her tasks. The main tools and page-level options are contained within the CommonSpot
Menu Bar. All of the menu options and icons are context-specific depending on the permissions of the
user logged in.
After selecting View Page in CommonSpot, you will see the multi-level ribbon toolbar on the left of your
screen, shown below. The Top Bar contains a Quick Find feature. The second level contains the
CommonSpot Dashboard tools, with information specific to your site. The third level contains pagespecific tools. The fourth level contains a dynamic bread crumb bar. Selecting a folder from it will display
a complete subsite listing.
T=Top Bar
D=Dashboard
P=Page Specific
B=Bread Crumb
5
CommonSpot Basics
Customizable Left Panel
Another feature, displayed when you select the icon found on the left of your screen and shown to
the left, is the Customizable Left Panel. One click on the icon toggles it on, the next click toggles it
off. The options found here may also be available in other locations. Try all these options and
eventually, you will discover which tool locations suit you best!
By default, the Page Tools feature is displayed. Perhaps the most interesting
tool in this collection is Referring Pages. Find out here which other
CommonSpot pages are linking to this page.
Select the Page View option to see a summary of changes for the current
page. The Published Version tool displays the last published version of the
page in read mode.
Other options, from left to right, are found in the selector at the bottom of
this panel. They include:
Page Details – Similar to but slightly different than
Properties >> Details…
Can Deactivate Page here
Page Contributors – Lists all who have edited this page
Page Versions – Shows version history
Page Performance - Disregard
Community – News from the CommonSpot Community
Customize Left Panel – Allows you to modify and save changes to the displays in this panel
Pending Actions
Connecting to My CommonSpot from the dashboard will expose a user’s to-do-list. It conveniently
provides a list of work that is outstanding or pending an individual user’s action.






Changes Pending My Approval - listing of content requiring approval
My Changes – newly created or modified content made by me that is in progress and not
ready for public distribution
Changes to My Content – listing of content that has been modified by another
Notifications – various notifications that affect me (e.g., broken links,etc.)
Changes to My Groups’ Content – changes made by others belonging to a group that I am a
member of
Changes Pending My Groups’ Approval – changes by group members requiring approval
6
CommonSpot Basics
Part 2: Using CommonSpot to Maintain a Site
Image Gallery
CommonSpot maintains a database of images that are available for placement on your pages. There are
two groups of images:


Those that are available to all CommonSpot content contributors and developers
Those that are available to you alone or to selective users
Content contributors can add images to your own site’s Image Gallery. You are able to designate these
images as public images; that is, to be available to all CommonSpot users. Or you can assign permissions
for selective access to these images.
You can also select images from the public Image Gallery. If you have a really great image you think all
UW-Eau Claire content contributors would benefit from, contact Julie Poquette (poquetjm@uwec.edu) to
have it added to the public Image Gallery
One way to get to the Image Gallery: Tools » Find Images…
Containers





Containers are the basic building blocks used for laying out and positioning page elements
A Container element holds other elements (including other containers), so it provides
opportunities for controlling your layout
The Container element is similar to a <div> tag because it provides extremely flexible positioning
A Container element can hold one or more other elements, positioned vertically one below the
other
A Container element menu will look like this:
Elements
Elements are units of content or layout that can be added to a CommonSpot page. CommonSpot’s use of
elements greatly simplifies the user’s ability to create exciting, media rich Web pages. Intuitive wizards
help guide the user through the process of presenting elements on the page and submitting content.
CommonSpot leverages the efficiency and flexibility of a modular system by separating form from
content. Instead of storing Web pages as static chunks of HTML code, CommonSpot keeps the content
and the structuring elements in different databases, assembling and serving up Web pages on the fly as
the relevant URLs are requested. This unique approach enables any number of authors participating in the
7
CommonSpot Basics
creation and management process to re-use elements endlessly, in a myriad of combinations, to create
Web pages tailored to the precise needs of every department.
The element is a predefined object or logic that defines how content will be rendered when presented on
the page. CommonSpot’s gallery of versatile structuring elements provides an exhaustive list of ways in
which to present information on a Web site from a simple Text Block to a drop down list of links, text
around an image to a hierarchical menu.
Elements simplify contributing content. Each element has a set of wizards or dialogs that prompt the user
through all of the associated content options.
IMPORTANT NOTE : Wherever possible, apply Style options to the Element, NOT the Container. Some
exceptions apply.
Using Elements
CommonSpot elements handle everything from plain text and images to hypertext links, PowerPoint
presentations, and video clips with equal facility. Most authors will find the application’s suite of elements
sufficient for their every need. However, it is also possible to construct new elements for specialized
purposes. In fact, you will find several elements that have been custom built for UW-Eau Claire content
contributors.
Content contributors build Web pages either by choosing a template containing the desired elements or
by inserting appropriate elements from the Element Gallery dialog onto a page.
Element Gallery Dialog
To insert an element onto a page, whether you are starting
from a blank page or modifying an existing template or page,
you simply click on the ghosted text Click to insert new
element which will automatically open a second window
displaying the Element Gallery Dialog. Elements are
categorized by their function to make it easy to find what you
need.
When you open the Element Gallery dialog, the lists are
collapsed with only the category names displayed. To open a
particular category’s list, click on its name in the gray bar. To
open all the categories at once and view the complete gallery,
click the Expand all link.
Each element is listed with its name in boldface and a brief
explanation of its function. When you find the element you
need, click on its name to insert it onto your page. If you want to leave the gallery without making a
selection, click the Close button.
8
CommonSpot Basics
Moving an Element
The order of elements within a layout cell can be changed. To move an
element up or down one position, click the Element Tool icon and select
Move Up or Move Down from the menu. To move an element to the top or
bottom of the layout cell, click the Element Tool icon and select Move to
Top or Move to Bottom from the menu.
Deleting an Element
To delete an element from a page or template, click the Element Tool icon
for the element, and select Delete… from the menu.
You will be prompted with a warning message. Click Yes to proceed with the
deletion of the element.
If you are deleting an element that had previously been approved and
published, you will need to approve the deletion in order for the change to
become effective. Click the icon
in order to submit the deletion for publication.
If you are deleting an element that has not yet been published (still Work in Progress), the deletion will be
immediately effective.
Rich Text Editor
The Rich Text Editor is used to create and revise
Formatted Text Block elements. You can control
the layout using standard HTML numbered and
unnumbered list structures, forced new lines and
paragraph breaks, type choices (face, size, and
style), embedded links and images, etc.
You can use the Rich Text Editor directly for
composition, or you can copy text from other
software and paste it into the editor window.
However, use caution when copying directly from
a Word document. It is best to copy text into a
text editor such as Notepad or TextEdit to strip invisible characters from the content.
9
CommonSpot Basics
Linking
You can use CommonSpot to make text or graphic elements be a link, or to make part of the text in a
formatted text block element be a link. Those links can be to:




External web resources that are not part of the CommonSpot content management system. You
are encouraged to register these links if you intend to use the same link repeatedly. They are
then referred to as Registered External Links
Existing CommonSpot pages
Jump Links (e.g., target links to other places in the same or different page)
Uploaded documents within CommonSpot (e.g., Word or PDF files or Excel spreadsheets)
Registered External Links
CommonSpot uses a registration system for links to non-CommonSpot pages or sites that are commonly
used on this campus. These are registered on a global subsite managed by Web Development Services
that we call, RegExternalLinks. While it takes a little more effort to use this linking feature, it is beneficial
to do so if the exact link is used on more than a couple of pages in your site.
The advantage of using Registered External Links is that if the link should ever change, it can be corrected
in one central location rather than going to every location where the link is used.
When you need to use such a link, it is best to check to see if the resource has already been registered
and then use it. One way to see if a link exists is through one of the Dashboard reports.
1.
2.
3.
From Reports » Pages, Templates, Uploaded Docs and Registered URLs…, in the Subsite: field,
locate and select the RegExternalLinks subsite
From the Show: section options, deselect all but Registered URLs, then select Filter
You will see a list of sites that can be used as a managed registered link
Bookmark Links (formerly known as Jump Links)
A "Bookmark" link will require two steps to complete, unless you are using an established jump
destination.
1. Mark the jump destination location within the receiving page
2. Use the jump destination to create a link to the jump destination on the sending page where the
link is to be found.
Marking Bookmark Destinations
Marking bookmarks uses a named page element and requires that you break content into multiple
Formatted Text Blocks, since the destination can only jump to the start of the text block and not to a spot
within the text.
A. Name a page element
10
CommonSpot Basics
a.
b.
c.
d.
e.
f.
g.
Navigate to the page with the element you wish to mark, and confirm that you are in
Work mode
Scroll down to the element
Click on the element properties icon
for the existing element that you want to mark.
Select Name... from the menu
The name you give the element must have no special characters (periods, hyphens, and
underscores should be OK, but not spaces or question marks, etc.). Be sure that the
label you give does not duplicate one used anywhere else in the same page. The name is
case sensitive
The name you give will be the visible text in the Jump destination selection menu when
building the link
Select Save
Using Bookmark Destinations
1.
2.
3.
4.
5.
6.
Navigate to the sending page that is to
contain the jump link. The link can go to a
destination within the same page, or to a
different page
Select an existing link to edit it or create a
new one. This could be text or an image
If the bookmark is to go to a different page,
first create (or edit) the link to go to the
correct page
Select Bookmark to pop-up the set of
Bookmark choices. Observe that the name
you gave your element is now available as a
choice. Choose it and Select Bookmark
Note: the NAME attribute is a casesensitive term
Finish the link editing process
Linking to an Uploaded Document
CommonSpot uses a versioning system for uploading files. There are separate methods for uploading a
new document, and uploading a new version of an already uploaded document. Using the wrong method
can cause problems once the file is linked on a page. In order to avoid these problems, you must have an
orderly process for retaining source documents, use proper file naming techniques and use the correct
upload technique.
Source Documents
Word, PowerPoint, Xcel, PDF and other document file types must be uploaded into the CommonSpot
framework in order to be linked. The space they occupy cannot be “seen” as they could with
Dreamweaver sites. You cannot edit them in the space they occupy.
11
CommonSpot Basics
Therefore it is important to keep the original files in a location readily available to all who will be
maintaining the Web site. In most cases, your departmental “s” drive is probably the best place, under a
folder named CommonSpotUploads or something similar.
File Names
You must comply with stricter file names for documents that will be uploaded into CommonSpot.
 Do not uses spaces or special characters
 Do not insert a period (e.g., do NOT use org.chart.doc)
o In the example above, CommonSpot will change the period that follows org into a dash
 For documents that are updated often, where you always want the most current version of the
document linked (e.g., handbooks, policies and org charts) , use a short, meaningful, timeless
name, without dates or other descriptors.
o Avoid names like orgChart090823.doc
o Instead use currentOrgChart.doc or just orgChart.doc
o It’s OK to keep older versions of the same document. Just be sure to rename it carefully
or store them elsewhere to avoid confusion
 For documents such as Newsletters and other dated materials that don’t change, it does make
sense for the file name to contain dates
Upload Techniques
Usually, if you are modifying a file that is already linked in the system, you do NOT want the file name to
change. You may have a link in a printed document and you want that link to continue to work. Others
may bookmark the link or link to it from another site. Using the normal upload option would cause a
change in the filename and so the link would break
Upload New Document Option
 This is the option found under New » Uploaded Document…
 When a new document is uploaded into CommonSpot it retains its file name which becomes the
link
 A problem can occur if you upload another document with the same name, or upload the same
document a second time. CommonSpot will treat it as a unique document by giving it a different
name – it will use the same source name but append _1, _2, etc as needed
o To get CommonSpot to link to this new document, you must change the link on the
CommonSpot page after uploading the document. In other words, CommonSpot does
not manage this kind of upload
Upload New Version Option
 Use this option when you need to modify an existing uploaded document (whether linked or not)
 This task can be completed using the report, Reports » Pages, Templates, Uploaded Docs &
Registered URLs…
o Use the Subsite: field to narrow your search to the closest subsite
o Use the filter criteria in the Show: region by deselecting all but Uploaded Documents
o From the Metadata & Security icon of that document, select Upload New Version…
o Browse to locate the new version of the uploaded document and then Save
 Caution: be sure that the source document has the SAME NAME as the uploaded document
o The Upload New Version option will change the uploaded filename to the source
filename if different
12