Unit 2:
Creating, Editing, and Submitting
Content
Unit Objectives
•
Log in to CommonSpot
•
Review the CommonSpot Interface
•
Create a New Page
•
Add Content to a Page
•
Work with the Rich Text Editor
•
Apply Styles and Tags to Content
•
Submit Content for Publication
•
Accessing the My CommonSpot Dashboard
•
Creating a New Page
•
Adding and Editing Content
•
Working with the Rich Text Editor
•
Submitting a Change for Publication
Unit Topics
2011 Fig Leaf Software
2-1
Fast Track to UW-Stout Content Management
Accessing the My CommonSpot Dashboard
Authoring within CommonSpot can only be performed through
CommonSpot's browser-based dashboard system which is referred to as
“My CommonSpot”
In order to access this interface, you must log in with the “Open My
CommonSpot” checkbox checked, or you can click on the icon which will
become visible post-login on each page.
In order to modify content, you must be using one of the following
supported browsers:
•
Microsoft Internet Explorer 8
•
Mozilla Firefox 3 or 4
•
Microsoft Internet Explorer 9*
•
Mozilla Firefox 5*
* requires CommonSpot 6.2
Note: Prior to logging into CommonSpot, you should disable your
browser’s pop-up blocker.
Figure 1: The My CommonSpot Dashboard (default view)
2-2
©2011 Fig Leaf Software
Unit 2: Creating, Editing, and Submitting Content
Logging into CommonSpot
You can reach the CommonSpot login prompt by navigating to the
following url:
http://cmsauth.uwstout.edu/login.cfm
The login screen, depicted in Figure 2, requires you to enter your User ID
and Password. You will use a User ID and Password, provided to you via
email to log in. Note that using the Change Password feature, while
present, will not affect your account.
Figure 2: The CommonSpot Login Screen
©2011 Fig Leaf Software
2-3
Fast Track to UW-Stout Content Management
Accessing My CommonSpot
After login, if you did not click on the “Open My CommonSpot”
checkbox, a small icon will appear in the upper right corner of every web
page.
Clicking on the icon, depicted in Figure 3, opens the CommonSpot Content
Server menu, depicted in Figure 4, which enables you to access My
CommonSpot as well as edit the current page.
Figure 3: The CommonSpot
Action Icon
2-4
©2011 Fig Leaf Software
Figure 4: The CommonSpot
Action Menu
Unit 2: Creating, Editing, and Submitting Content
Introducing My CommonSpot
You can think of the My CommonSpot dashboard, depicted in Figure 5, as
your “to do” list as it provides the following information:
•
Links to content requiring your approval
•
Pages where you have made changes but not submitted them for
publication
•
Notifications of changes that have been referred back to you as part of
the approval process
•
Notifications of content that has expired
•
Reminders about pages that need to be updated
•
Pages that are scheduled to be published in the future
Figure 5: My CommonSpot
From here, you can also define shortcuts for adding new content to your
site as well as define search criteria for locating content that you want to
keep in focus.
©2011 Fig Leaf Software
2-5
Fast Track to UW-Stout Content Management
Reviewing the CommonSpot Menu Bar
CommonSpot's primary menu bar, depicted in Figure 6, exposes a variety
of functions that enable you to create and upload content, locate content,
execute reports that help with quality assurance, and perform
administrative tasks, such as creating a subsite.
Figure 6: The CommonSpot Primary Menu Bar
Clicking on a menu heading reveals the following options:
Menu
Description
My CommonSpot Links to your “to do” list.
My Content
This is where you find the content that you have
created, including pages, registered external url's,
and uploaded files such as PDF's.
New
Enables you to create new pages, register external
url's, and upload files.
Tools
Provides options for locating different types of
content.
Reports
Contains helpful reporting tools that reveal pages
with broken links, pages waiting for approval, pages
with errors, and content approval processes that are
blocked by expired users or non-contributors.
Admin
Enables you to manage user accounts as well as
create and manage new sites and subsites.
Help
Contains online reference materials for contributors,
administrators, and developers. It also details which
version of CommonSpot has been installed and any
patches which may have been applied.
Note: Only administrators will have access to the Reports and Admin
menu options.
2-6
©2011 Fig Leaf Software
Unit 2: Creating, Editing, and Submitting Content
Walkthrough 2-1: Logging into CommonSpot
In this walkthrough, you will perform the following tasks:
•
Open your web browser
•
Log into CommonSpot
•
Access the CommonSpot Content Server menu (Entrance Tab)
•
Access the My CommonSpot Portal
Steps
Log Into CommonSpot
1. Open either Firefox or Internet Explorer to the following url:
http://cmsauth.uwstout.edu/login.cfm
2. Enter your User ID and Password.
3. Leave the Open My CommonSpot checkbox unchecked.
4. Click the Login link.
5. You will be directed to the University of Wisconsin-Stout home page.
6. Note the CommonSpot icon located in the top right corner of the page.
7. Click on the CommonSpot icon and select My CommonSpot.
– End of Walkthrough --
©2011 Fig Leaf Software
2-7
Fast Track to UW-Stout Content Management
Creating a New Page
CommonSpot pages are built on a template architecture that has been
designed to ensure consistency between your web pages. Common page
elements such as menus and layout options have been developed for you
and are not editable, thereby allowing you to focus on your content and
messaging. Changes to a template affect all descendent pages, enabling
your organization to make global changes to your site very quickly.
The values that you set for page options - specifically the Title Bar caption
and Page description will appear within Google and other search engines
so you should think carefully about what text might be the most
appropriate for enticing potential customers to click on your link.
Inactive pages are automatically hidden from the site's navigation menus
and are inaccessible to the public.
To begin the page creation process, from the silver bar at the top of the
CommonSpot Dashboard click the “New” button and then select “Page”
from the drop down menu.
Figure 7: Menu choices available when clicking the New
button from the CommonSpot Dashboard
Selecting a Subsite
A subsite is a directory that contains similar information. You can search
for information within a subsite and it also influences breadcrumb
navigation, page layout, and the final page URL.
As illustrated by Figure 8, CommonSpot will then ask you for the subsite
that you would like to create the page in. During this training class, you
will create pages in the cs_training subsite. However, in the live
environment you will be assigned permissions to author within specific
subsites.
2-8
©2011 Fig Leaf Software
Unit 2: Creating, Editing, and Submitting Content
Figure 8: The CommonSpot Create Page Wizard - Subsite selector
Selecting a template
Next, you will be asked to select a template. The UW-Stout site
implements the use of “soft templates” where layouts can be swapped
easily without data loss in most cases. This will be covered more in the
Custom Page Properties section.
Figure 9: The UWStout.edu Template Gallery
Entering Standard Metadata
Standard Metadata represents basic information about a page. Consult the
table below for more information about a page's standard metadata.
©2011 Fig Leaf Software
2-9
Fast Track to UW-Stout Content Management
Figure 10: Entering Standard Page Metadata
Field
Description
Name
The file name of the page. You should not enter
spaces or special characters within this field.
Title
The label that CommonSpot will use in displaying
your page within its search results output.
Title Bar Caption This text appears in the title bar of your web browser
and serves as the default text when a user bookmarks
your page. Its contents significantly influence your
placement within Google, so place customerattracting keywords in this field.
2 - 10
Description
The text that appears underneath the Title Bar
Caption within search engine results. Limit your
description to 80 characters or fewer.
Category
A high-level category for your page. You can search
for content by category, however, choosing a
category does not affect content layout or output.
Keywords
A comma-delimited list of keywords that can be used
to locate your content.
©2011 Fig Leaf Software
Unit 2: Creating, Editing, and Submitting Content
Entering Custom Page Properties
The Custom Properties form, depicted in Figure 11, enables you to select
various page layouts. Which layout to choose will depend somewhat on the
content of the page. Layouts can be swapped easily from the Custom
Metadata Design Options tab.
Figure 11: The Custom Page Properties window showing choices
for the Design Options tab
When the fields in the Custom Properties window have been filled out,
click the Save button to have CommonSpot create the page.
©2011 Fig Leaf Software
2 - 11
Fast Track to UW-Stout Content Management
Walkthrough 2-2: Creating New Pages
After this walkthrough, you will know how to perform the following tasks:
•
Create a new page
•
Add content to the page
•
Be familiar with the correct page layout
Steps
Create a New Page
1. From the CommonSpot menu bar, select New > Page.
2. Select the appropriate subsite for the page to reside. For training, select
the cs_training subsite and click Next.
3. By default, the template “UW-Stout CMS Base Templates” will be
selected. Click Next on the Template Gallery dialog box.
4. Enter the following standard page properties:
• Name: Put your name in the page name to make it unique (eg.
bob-training-page)
• Title: Type your name in the page title to make it easier to find
later (eg. Bob's Training Page)
•
Title Bar Caption
•
Description
•
Category: CommonSpot Pages
5. Click the Next link
2 - 12
©2011 Fig Leaf Software
Unit 2: Creating, Editing, and Submitting Content
Enter Custom Properties
6. On the Design Options tab, select TwoColumn-20-80. A detailed
explanation of the various layouts in the Design Options tab is
discussed in Unit 3.
Figure 12: Design Options tab in Custom (Metadata) Properties
7. Click the Content Options tab.
©2011 Fig Leaf Software
2 - 13
Fast Track to UW-Stout Content Management
Figure 13: Content Options tab in Custom (Metadata) Properties
8. Review the various choices with the instructor. These options will be
discussed in greater detail in Unit 3. Click the Utility Options tab.
Figure 14: Utility Options tab in Custom (Metadata) Properties
9. In the Utility Options tab, uncheck the ShareThis Widget checkbox
and click on the Taxonomy tab.
2 - 14
©2011 Fig Leaf Software
Unit 2: Creating, Editing, and Submitting Content
Figure 15: Taxonomy tab in Custom (Metadata) Properties
10. Click on the Browse Taxonomy... button.
Figure 16: Browse Taxonomy screen in Custom (Metadata)
Properties
11. Select a few taxonomy terms by clicking on the checkbox to the left of
a term.
12. Click the Save button to return to the Taxonomy tab in Custom
Properties.
13. Click on the Related Links tab.
©2011 Fig Leaf Software
2 - 15
Fast Track to UW-Stout Content Management
Figure 17: Related Links tab in Custom (Metadata) Properties
14. Click the Browse Related Pages... button.
15. Based on the taxonomy terms you selected in the Taxonomy tab, you
will be shown a list of pages that have the same taxonomy terms.
Select the pages to be shown in the Related Links area by placing a
checkmark next to the page name.
Note: Most pages in the site have not been assigned taxonomy terms
yet so finding related pages during training may be difficult. Choosing
a taxonomy term of “Academic Deadlines” should produce some
results.
16. Click the Save button to return to the Related Links tab.
17. Click the Save button to create your page.
– End of Walkthrough –
2 - 16
©2011 Fig Leaf Software
Unit 2: Creating, Editing, and Submitting Content
Adding and Editing Content
Editable content on a CommonSpot page is segmented into a series of page
elements. In order to start the data entry process, you must select one of the
following options from the View menu of the CommonSpot menu bar,
depicted in Figure 18:
•
Work on this Page (My Changes)
Switches to “author” mode,
displaying any changes that you have
made to the page.
•
Work on this Page (All Changes)
Switches to “edit” mode, enabling
you to make changes to both your
content as well as work-in-progress
content that was authored by other
Figure 18: The View Menu
contributors.
Each element type has a special purpose and data entry form associated
with it. As indicated by Figure 19, editable elements are denoted by the
presence of an icon that hovers over their upper left corners. Clicking on
the icon displays a context-menu of available editing options.
Figure 19: Element controls while viewed in “Work on this Page
(My Changes)” mode (Formatted Text Block)
©2011 Fig Leaf Software
2 - 17
Fast Track to UW-Stout Content Management
Working with the Rich Text Editor
Use the Formatted Text Block, depicted in Figure 13, to enter content for
the page. CommonSpot's Rich Text Editor is robust enough to support very
large amounts of text, as well as images, hyperlinks, tables, and lists.
Content can be typed in manually or copied and pasted from other sources
like web pages, Word documents, or other documents. Pasted content can
also be cleaned up using tools in the Rich Text Editor to maintain
consistency with the look-and-feel of the site.
Figure 20: The Formatted Text Block
The Styles Toolbar in the Formatted Text Block
To maintain consistency throughout the site, the use of style sheets is
implemented to control a specific design and look-and-feel. The Formatted
Text Block includes drop-down selectors to allow text and images to be
assigned different design characteristics beyond the default. The Styles
toolbar, depicted in Figure 21, enables you to format your content by
selecting the block tag to use or its associated style.
Figure 21: The Styles Toolbar
2 - 18
©2011 Fig Leaf Software
Unit 2: Creating, Editing, and Submitting Content
Styling your Text
To apply styles to your text, select your content using your mouse and then
choose one of the formatting options from the toolbars. Applying a style
usually results in either the addition of an HTML tag to your document or a
CSS class attribute getting added to a pre-existing tag. As indicated by
Figure 22, code changes will appear in the Tag Inspector of the RTE.
Figure 22: Text Styles are indicated by the Tag Inspector
You can remove styles by completing the following steps:
1. Click anywhere within the text that has been styled
2. If the text had a CSS style applied, click on the Remove Classes link in
the Tag Inspector. Otherwise, click on the Remove Tag link in the Tag
Inspector.
©2011 Fig Leaf Software
2 - 19
Fast Track to UW-Stout Content Management
Inserting an Image
Clicking on the Insert Image button reveals the Image Properties dialog,
depicted in Figure 23, which is one of CommonSpot’s common dialogs. It
can be invoked from any element that renders an image (image grid, textaround-an-image, the Rich Text Editor, and so on) or directly from the
Image Gallery.
Figure 23: The Image Properties Dialog
This dialog provides a convenient and common interface for managing the
properties of an image. From this dialog, contributors can:
•
•
•
•
Upload an initial image for an
element
•
•
Replace the image with another
•
image
Edit the current image by
uploading a new version of the
element (not this is different
than uploading an entirely new
image)
•
Specify the image’s display size
Specify the image’s alignment
Specify the image’s Alt text,
which is necessary in order to
built accessible sites
Specify a link target when the
user click and/or rolls over the
image
Specify a rollover image
(optional)
Depending where the Image Properties dialog was invoked, it may or may
not display all of the fields shown.
2 - 20
©2011 Fig Leaf Software
Unit 2: Creating, Editing, and Submitting Content
Clicking the Choose button displays the Choose Image dialog, allowing
you to choose an image from a gallery of “public” uploaded images or any
image previously uploaded by the current user. You can search for images
based on their metadata, keywords, tags, and subsite in which the image
was originally uploaded.
Executing a search displays the Choose Image – Search Results page,
depicted in Figure 24. From here you can insert an image into the RTE by
clicking on the image and then clicking on the Use Highlighted Image link.
Figure 24: Image Search Results Dialog
Uploading an Image
Clicking on the New... button in the Image Properties dialog (Figure 23)
invokes the Upload New Image dialog box, depicted in Figure 25.
©2011 Fig Leaf Software
2 - 21
Fast Track to UW-Stout Content Management
Figure 25: Uploading a New Image
From here you can select an image from your local machine or network,
enter metadata (description, category, and keywords), and select the
directory in which to upload the image. Lastly, be sure the “Include in
Public Image Gallery” checkbox is checked so that other content editors
can reuse the image on their pages and web administrators can edit your
images to make them web-friendly, if necessary.
Figure 26: Selecting a file and entering metadata for upload
2 - 22
©2011 Fig Leaf Software
Unit 2: Creating, Editing, and Submitting Content
Walkthrough 2-3: Using the Rich Text Editor (RTE)
In this walkthrough, you will perform the following tasks:
•
Create different content types in the RTE
Steps
Add various content types to the Rich Text Editor
element
1. In the light blue center portion of the page, click on the text Click here
to define the formatted text block. The Formatted Text Block
element will be displayed.
Before applying styles to any content, we have to enter some content in
the Rich Text Editor.
2. Click in the empty white area of the Rich Text Editor to begin entering
content.
3. First, type H2 Title Example on the first line and press ENTER.
4. On the next line, type By {your name} (replacing {your name} with
your actual first and last name) and press SHIFT+ENTER (hold down
the SHIFT key while pressing the ENTER key).
5. Next, type today's date using the format “mmmm d, yyyy” (e.g. Sept.
9, 2011) and press the ENTER key.
6. Type H3 Subtitle Example and press ENTER.
7. Next, type the following: This is the story lead-in teaser. This is
typically bolded and provides a short summary of the story to
follow.
8. Press ENTER.
9. On the next line, type the following: Full story or standard page
content goes here. Paragraphs are separated by pressing ENTER.
For line breaks, use SHIFT+ENTER.
10. Press ENTER.
11. Next, type H3 Hyperlinked Subtitle and press ENTER.
Inserting a Block Quote
12. To insert a Block Quotation you must first insert the Block Quote tag
by selecting it from the Snippets selector. Click on the
Insert Snippet button in the second row of the RTE
toolbar.
©2011 Fig Leaf Software
2 - 23
Fast Track to UW-Stout Content Management
13. In the Insert HTML Snippet dialog, select block quote (if not already
selected) and click Save.
14. The text “Edit this blockquote text” will already be highlighted so type
the following: This quotation is using the Block Quote tag. It will
display using bold and italic text when the tag is applied. – {your
name}
15. Press ENTER.
16. Click the Decrease Indent button to start the next
line.
Note: Depending on your browser and screen size,
the Decrease Indent button may not be visible in
the top row. It may be necessary to click on the
Add/Remove Buttons at the far left on the top row
of the toolbar to expose the Decrease Indent button.
Inserting a Table
17. Insert a 3x2 table by clicking on the down-arrow
next to the Table icon in the second row of the RTE
toolbar.
18. In the grid below, highlight a 3x2 area and
click to insert the table into the content area.
19. Click in the cell of the first row, first column
and type Column1, Row1.
20. Position the cursor in the next cell to the left
by clicking on the left-arrow key (or TAB)
on the keyboard or clicking in the cell with
the mouse.
21. Type Column2, Row1.
22. Move to the next by clicking the left-arrow
on the keyboard or clicking in the cell with the mouse.
23. Type Column1, Row2.
24. Continue filling in the remaining cells using the same naming
convention as above. Moving across the next should be Column2,
Row2, followed by Column1, Row3, and then Column2, Row3.
Inserting an Image
25. Scroll up towards the top of RTE and click to place the cursor at the
beginning of the teaser paragraph starting with “This is the story leadin teaser”.
26. Click the Insert Image button.
27. Click the Choose... button.
28. Pick an image from the Image Gallery and click the Use Highlighted
Image link.
2 - 24
©2011 Fig Leaf Software
Unit 2: Creating, Editing, and Submitting Content
Note: It is recommended all images be size 200 pixels wide by 200
pixels high (200x200) to maintain consistency with all images
throughout the site. This also keeps the weight of the page small for
users with slower internet connections or viewing from mobile devices.
29. Click Save to insert the image on the page.
30. Click on the image and, using the Styles
selector in the second row, click on the
style floatLeft.
31. Click Save to view your content on the
page.
Note that most of the text looks the same
because no special formatting has been applied to any content yet.
The table reflects one way of displayed tabular content. In the next
walkthrough, you will apply a different class to the existing table to
modify its appearance.
©2011 Fig Leaf Software
2 - 25
Fast Track to UW-Stout Content Management
Walkthrough 2-4: Applying Tags and Styles to
Content in the Rich Text Editor
In this walkthrough, you will perform the following tasks:
•
Apply different HTML tags to content types
•
Learn to apply styles to specific content types to change the layout and
formatting
Steps
Applying the Headline – H2 tag
1. Click on the yellow plus icon and
select Text to re-open the Formatted
Text Block.
2. Using the mouse, highlight the first
line of text H2 Title Example.
3. In the Styles toolbar, click on the Tags
select box (the one with “Paragraph” as
the default) and select Heading 2.
Applying the Subscript tag for Bylines
4. Highlight the Byline and Date lines and click on the Subscript
button in the top row of the RTE.
Note: Depending on your browser and screen size, the
Subscript button may not be visible in the top row. It may
be necessary to click on the Add/Remove Buttons at the
far left on the top row of the toolbar to expose the
Subscript button.
Applying the Headline – H3 tag
5. Highlight the text H3 Subtitle Example and apply the tag Heading 3.
Applying the Bold (Strong) tag
6. Highlight the entire next paragraph starting with
“This is the story lead-in teaser.” and apply the
Bold (Strong) tag by clicking on the “B” button
in the top row of the Rich Text Editor.
Applying the H3 with Hyperlink
7. Highlight the text H3 Hyperlinked Subtitle and apply the tag
Heading 3.
2 - 26
©2011 Fig Leaf Software
Unit 2: Creating, Editing, and Submitting Content
8. With the text still highlighted, click on the Insert Link
icon in the second row of the RTE toolbar.
9. From the Insert Formatted Text Block Link window,
click the Choose... button and find a page to link to. Click Use
Highlighted Page and then Save to finish linking your page.
Applying alternate row colors to a Table – the “Data”
class
10. Using the mouse, click anywhere in the 3x2 table created earlier.
11. In the Tag
Inspector in the
lower area of the
RTE, click on
the text
<TABLE> to select it.
12. In the Styles drop-down in the RTE toolbar, select data. The text in the
Tag Inspector should change to
“<TABLE.data>”.
Changing the alignment for an image
13. Click on the image you placed earlier.
14. In the Styles selector, click on the item floatRight.
15. Click the Save button to save your work and view the changes on the
page.
©2011 Fig Leaf Software
2 - 27
Fast Track to UW-Stout Content Management
Figure 27: Completed page at the end of Walkthrough 2-4 (Work
on this Page - My Changes mode)
Notice that the content on the page looks slightly different than it does
in the Rich Text Editor. CommonSpot's Rich Text Editor is not 100%
WYSIWYG (What-You-See-Is-What-You-Get). When viewing your
page for layout and formatting purposes, use the Preview mode in the
top corner of the page to accurately see how your page will look when
published.
16. At your leisure, return to the Rich Text Editor and experiment with
adding more content, apply tags and styles, positioning the image to
align to the left, and/or reverting the table to its default view without
the alternating row colors.
– End of Walkthrough --
2 - 28
©2011 Fig Leaf Software
Unit 2: Creating, Editing, and Submitting Content
Submitting a Change for Publication
Before content can be published, it must first be submitted. Depending on
whether an approval workflow has been set up, the content might require
approval by one or more individuals or groups. Even if you have approval
rights for the content you are editing, you still have to put your revisions
through the publication process.
To publish your changes, click on any yellow icon on the page and select
Submit Page, as depicted in Figure 29.
Figure 28: Submitting changes for
approval/publication
Alternately, CommonSpot 6.x also puts a “Submit” button at
the top right corner of a page that has works in progress.
Both function the same.
The Submit All Changes for Publication dialog box, similar to the one
depicted in Figure 30, appears.
Figure 29: Submitting Changes for Publication
If a list of personnel responsible for content approval appears at the top of
the dialog box, your content will not go live until they officially sign off on
it. Prior to clicking the Submit link you should enter a publication
comment that notes the nature of the changes that you made.
Turning on the checkbox “Treat content change as major” causes the page
to appear in reports that use that criteria as a filter condition.
©2011 Fig Leaf Software
2 - 29
Fast Track to UW-Stout Content Management
Walkthrough 2-5: Submitting Content for
Publication
In this walkthrough, you will perform the following tasks:
•
Submit pages for publication
•
Submit a page into the approval process
Steps
Publish a Page
1. Click on any yellow icon and select Submit Page.
2. Or, click the orange Submit button in the top right
corner.
3. Enter a publication comment, if necessary, to indicate you completed
work as best you could.
4. Click the Submit button.
– End of Walkthrough --
2 - 30
©2011 Fig Leaf Software
Unit 2: Creating, Editing, and Submitting Content
Unit Summary
•
Specific browsers must be used to author content in CommonSpot.
•
My CommonSpot contains your 'to-do' list as well as shortcuts that
enable you to more quickly complete common tasks.
•
The Formatted Text Block element enables you to author content using
a WYSIWYG editor
•
The RTE enables you to format text, insert images, add hyperlinks, and
upload files.
•
Published changes are added to the page's version history.
©2011 Fig Leaf Software
2 - 31