Working with the Redesigned UW-Eau Claire Web
Contents
Plan your Strategy!.................................................................................................................................................................. 2
Log in to CommonSpot and Prepare to Edit ........................................................................................................................... 2
Create a Story.......................................................................................................................................................................... 3
Include Media for Stories and Pages ...................................................................................................................................... 4
Editing a Story ......................................................................................................................................................................... 4
Create a Registered External Link ........................................................................................................................................... 5
Use a Registered External Link ................................................................................................................................................ 5
Create a Button within the Rich Text Editor ........................................................................................................................... 6
Add an Image within the Rich Text Editor .............................................................................................................................. 6
Create a New Page .................................................................................................................................................................. 7
Insert and Move an Element on a Page (e.g. Row Offset) ...................................................................................................... 8
Using the Row Offset Element ................................................................................................................................................ 8
Edit an Element on a Page ...................................................................................................................................................... 8
Publish or Discard Element Changes....................................................................................................................................... 8
Insert a Video Element on a Page and Adding New Videos .................................................................................................... 9
Create Featurette Elements on a Page ................................................................................................................................. 10
Copy and Paste an Element .................................................................................................................................................. 10
Image Slider and Configuring the (top of page) Manual Slider Option ................................................................................ 11
1
Plan your Strategy!
TIP: The redesigned public website requires a great deal of advanced planning,
because the content needs to be purposeful and care needs to be taken to preserve
the ability to resize pages (responsive design) and reuse content (COPE: Create Once,
Publish Everywhere). The following questions should be asked (and answered!)
before creating something for the website:
1.
2.
3.
4.
5.
Is the content appropriate for the public website?
a. Is it helpful to our main targeted audiences (prospective students
and parents, continuing students, faculty/staff, alumni, business and
community)
b. Should it be available to the world, or would it make more sense to
have it on a site accessible only to UW-Eau Claire community?
Where should the content be stored and how will people get to it?
a. Does it need to be in a separate subsite? (request this from
WebDev via the Help Desk)
b. Does it need to be in the general navigation menu (request this
from WebDev via the Help Desk)
c. How can people successfully find this information by searching?
(consider keywords to use and headings, when applicable)
Should this information be available for reuse on another site or page?
(utilize the Story System)
How will we attract attention to the info and easily identify it? (prepare
images and other multi-media, such as video)
Will we be referring to other information on the web such as:
a. Our new redesigned website (link to CommonSpot pages)
b. Our old website (create registered URLs and link to them)
c. Outside sources (create links to unregistered URLs and check them
regularly)
Log in to CommonSpot and Prepare to Edit
PREPARATION: Turn off your browser’s pop-up blocker for www2.uwec.edu. Refer to
the handout provided during the Basics workshop.
1.
2.
3.
4.
5.
Open Firefox 31 esr. Use the latest qualified version. (This version is
available in the UWEC Application Catalog.)
Navigate to the page you wish to edit.
Select the key icon at the bottom of the page
When prompted, enter your UW-Eau Claire username and password.
You will find a pencil icon at the top right-hand corner of your screen
. Select the icon and select Work on this Page or View Page in
CommonSpot from the slide-out menu. (If the pencil icon doesn’t show
up, press F5 button to refresh the page. If this doesn’t work, exit from
Firefox and try going in again, including the sign-in.)
6. Navigate to a page by doing the following:
a. From the Dashboard Menu Bar, select Admin » Subsite
Administration…
b. Choose the folder and select Next
c. Click on the number of Pages link and select the desired page
7. These steps are to be used in preparation for each task in this guide.
TIP: Use View in the Page Specific Menu Bar to change work modes
2
2.
Choose Add Story from the tools pane
3.
Complete the customized properties
Create a Story
PREPARATION: Before creating a story you’ll always want to have the following
planned and possibly created: story content, image, registered links, video
TIP: Creating a story is one of the best ways to allow your content to be
easily shared and re-used on our website!
1.
2.
3.
4.
5.
6.
7.
8.
9.
Navigate to the stories subsite of the desired department
Expand the tools pane on the left of the CommonSpot screen and
choose Add Story from the UWEC Systems Tools section. (If you
receive a red error message saying you must be in the stories subsite
(and you are!) and need permissions (and you have them!) press the F5
key to refresh your screen.)
Meta Data (required)
a. Title: Keep it short and sharable in about 100 characters.
b. Publication Date: Today’s date or prior will publish the story
immediately. Generally to set date in the near future to provide
preview opportunities.
c. Add Keyword: Optional
d. Expiration Date: When the story will be removed from the publiclyaccessible story feed
e. Unit: Where the story lives, generally the current unit
f. Is this Story an Announcement: Choose this if the story should
appear under the announcements headings
Syndication (optional)
a. Selected Story Types: Select from the predefined categories
b. Audiences: Choose audiences targeted (these will be displayed in
feeds for the selected audience on pages other than homepage)
c. Recommended for…: Choose options as appropriate to notify the
IMC staff that you recommend the story for a page
Content (required)
a. Excerpt: Will be used as a short description or preview of the story
when it is displayed in feeds and featurettes
b. Article: Enter the story in the rich text editor window
People (optional)
a. People in the story: Add names of people in the story as they
should appear on a web page
Media (required)
See separate instructions.
Videos (optional)
TIP: If you add a video to a story, the video will replace the image at the
top of the page where the full story is displayed. The defined image will
still display on links to the story.
a. Search or select from Available Videos, or click Add New Item to
add a video
Select Submit to create the story.
3
Include Media for Stories and Pages
Stories and pages require a number of images defined so the stories and
pages can be used in featurettes as needed.
1. Large Image: Choose a large image to upload. Picture must be at least
1920x1080. Use the slider at the bottom to zoom in and out, and drag
the background around the image to specify the selected area. Click
Crop and then Save.
2. Additional images: Use the Build from Source (crop) button to crop
subsequent images similar to the Large Image.
a. Large, medium and small images are displayed as the featured
image based on the screen size. Medium and small images are also
used in featurettes when the screen is a medium or small size.
b. The Homepage Image will display if a story is on the primary
university homepage
c. The thumbnail image will be in feeds displayed on the side of
webpages and on the archive page which will show the thumbnails
for the latest created stories.
d. The 4:3 image will be displayed in featurettes when the screen size
is considered to be large.
3. Image Alt Text: Used by screen readers and will be displayed when
hovering over an image. (45 characters max)
TIP: Use this option for including the cut line for a photo until we have a
separate option for that info.
4. Image Caption: Used for the homepage image and will display in a
banner at the bottom of the image in some circumstances. (40
characters max)
Editing a Story
1.
2.
3.
Navigate to the Stories subsite of the desired department
a. From the Dashboard Menu Bar, select Admin » Subsite
Administration…
b. Choose the appropriate stories folder and select Next
c. Click on the number of Pages link and select the Stories page
Expand the tools pane on the left of the CommonSpot screen and
choose Edit Stories from the UWEC Systems Tools section
From the Manage Stories screen, select edit for the desired story.
TIP: Notice this is where you have options to add, delete, preview, and copy
stories
4
Create a Registered External Link
Managed links are references to links that CommonSpot knows about. For
example, if we link to UW-Eau Claire pages outside our department site (but
on our UWEC site) by using the selection process, when these pages move or
change names, CommonSpot auto-corrects our link. The problem is that
until more UW-Eau Claire departments are converted to the redesigned
website, ALL those pages are on the old website and therefore not
recognized by CommonSpot. The same benefit can be had by using
Registered External Links, which are managed links for popular nonredesigned pages.
To create a Registered External Link in the system, use the following steps.
1.
2.
3.
4.
From the Dashboard Menu Bar, select New » Registered URL…
From the Register URL pop-up, either select the destination subsite
(where this Registered URL will be stored) from the list or use Subsite
Search » Next. (Next will default to the current subsite.) (Normally you
will store this on your departmental site.)
Fill in the properties in the Register New URL pop-up, in particular:
a. URL: This is the link to the page’s URL, e.g.
http://www.uwec.edu/LTS/
b. Title: Will appear on lists, similar to page names.
c. Category: Generally keep the default of “Content Page”
d. Keywords: Select keywords from a link. Used when searching
for links
e. Publication Date: Generally can use the default of today
f. Include In: Uncheck this.
g. Expiration Date: Optional; generally not used
Select Next to continue through Spell Check and creation of the URL.
Use a Registered External Link
Use a Registered External Link
1.
Within the Rich Text Editor highlight the text for the link.
2.
3.
Select the
Link icon in the tool bar.
In the Insert Formatted Text Block Link pop-up Link Action >> Type: pull
down, select Registered URL, then Choose…
Enter search criteria and select Include Child Subsites, then Filter
If you find the link you need, highlight it, then select Use Highlighted
Content at the bottom of the pop-up.
Save. Save again to finish out of the Rich Text Editor and submit your
changes.
4.
5.
6.
5
Create a Button within the Rich Text Editor
You can highlight an action by formatting it as a clickable button within your
content.
1. Within the Rich Text Editor, position your cursor and create a
Link
to the desired location.
2. Highlight the text for the link.
3. In the No CSS style pull down, select the button style.
4. Finish out of the Rich Text Editor and submit your changes. (Image will
not appear formatted until it is viewed on a stories or content page.)
Add an Image within the Rich Text Editor
In addition to defining the main “top” image for a story or page, you can
enter images within your text.
1. Within the Rich Text Editor, position your cursor to where you want your
image.
2. Select the
Image icon in the tool bar.
3. Click Choose… if you want to use a previously uploaded image or New…
to upload an image.
4. Select the image
5. In the No CSS style pull down, select the desired style, probably floatleft-fifty-percent or float-right-fifty-percent.
6. Finish out of the Rich Text Editor and submit your changes. (Image will
not appear formatted until it is viewed on a stories or content page.)
TIP: Including high resolution photos in a story can be very challenging as far
as formatting, since the delivered Rich Text Editor doesn’t show how these
will appear. An enhanced alternative has been requested. In the meantime,
using the preview option on the Manage Stories page will quickly let you
view your story.
6
Create a New Page
PREPARATION: Before creating a page you’ll always want to have the following
planned and possibly created: subsite for the page, navigation to the page, image,
content (possibly including registered links and video). If the destination subsite or
navigation doesn’t exist, request it from IMC.
NOTE: It is often easier to copy a similar page than to create a new page
1.
2.
From the Dashboard Menu Bar, select New » Page…
From the Create Page pop-up, either select the destination subsite from
the list or use Subsite Search » Next. (Next will default to the current
subsite.)
3. Select your template from the list (For most sites, this will be the “-Unit”
template), then Next.
4. Fill in the properties in the Create New Page pop-up:
a. Name: This will determine the page’s URL. Lower-case only,
connect words with hyphens (no underscores or spaces)
b. Title: Will appear as the large heading on your page. Mixed case and
spaces are encouraged. Optimize for SEO.
c. Title Bar Caption: Will display in browser tabs. Mixed case and
spaces are encouraged. Copy from Title.
d. Category: Generally keep the default of “Content Page”
e. Keywords: add as appropriate; helpful for finding pages internally
f. Publication Date: choose something in the future if you don’t want
the page to go live immediately
g. Confidentiality: Keep the default of Public
h. Include In: Unused. Keep Page Indexes checked for future usage
i. Expiration Date: optional; include if you want the page to become
inactive on a specified date
5. Select Next to continue to required Custom Properties
6. General tab
a. Use Dynamic Title: Set to false except for story system show.cfm
pages
b. Canonical URL: Generally leave blank
7. Page Addons
a. Image Slider: Would be used in place of a featured image
b. Show Featured Image: Check if you want the image to be displayed
c. Show Contact Card: Check if you want contact info to be displayed
8. Page Features
a. Featured Images, Alt Text, and Caption: Required; see Including
Media for Stories and Pages
b. Page Excerpt Title: Title when the page is used in a featurette (30
character max)
c. Page Excerpt: Content when a page is used in a featurette (255
character max)
d. Featurette Button Override Text: this will replace the “more” on a
button directing to a page (30 character max)
9. MetaCards (optional; used if you want to define social media specifics)
a. Facebook MetaCard Information: optional
b. Twitter MetaCard Information: optional
10. Select Save at the bottom of the pop-up and the page will be displayed
11. Add the Row Offset element to the main container of the page (unless
there are special needs for the page)
12. Make any needed changes and submit them to activate the page.
NEW: Your site name and UW-Eau Claire will be programmatically added to the Title
Bar Caption; this is changed from the former system where you were encouraged to
format it as “PageTitle, YourSiteName, UW-Eau Claire”
7
Insert and Move an Element on a Page (e.g. Row Offset)
1.
2.
3.
4.
5.
Determine the region of the page in which you wish to place the
element. This will be marked by the dashed lines around a container
element
New elements are initially placed at the bottom of the container and
can later be moved into the correct position.
Select Click to insert new element at the bottom of the Container.
From the Element Gallery pop-up, choose the element category, then
select the title of the desired element.
a. e.g., Text Elements » Formatted Text Block (without header)
To move the element into position,
a. Select the element icon
in the upper left corner of the element,
then select more
b. Use these options to move the element into place: Move Up, Move
Down, Move to Top, Move to Bottom
Using the Row Offset Element
STRATEGY: In order to avoid the blue navigation pane, you’ll normally want
to have your content entered into the right-hand two-thirds of the screen.
The Row Offset element sets up a container indented to the proper area so
content will not be covered. It will give shading for alternating information
areas if you add more than one of these elements.
Insert a new element at the bottom of the main editing container and from
the Element Gallery pop-up, choose Miscellaneous Elements » Row Offset.
This element requires no further customization since its only purpose is to
create an offset row. You’ll see the new indented editing container.
TIP: If you want to use more than a single container to achieve alternating
shading
TIP: Make sure you add this element to the original container rather than
one of the Row Offset containers.
Edit an Element on a Page
1.
2.
3.
To expose the properties of an element, select the element icon
in
the upper left corner of the element, marked by the dashed boundary
lines. A pop-up menu will appear.
Each element’s properties vary by type of element. Most tasks will be
performed using the first option in the pop-up menu. (In this case, Text.)
Style is a special property that should be used to place margins around
the element. This is described in more detail later in this guide.
Publish or Discard Element Changes
1.
Once you have made changes to an element, a Pending Approval and/or
2.
Work in Progress icon will appear (
and/or ) depending on the
task/s you’ve completed.
From the element menu, select Submit to submit only the one change,
or select Submit Page to submit all changes.
To back out of a change, select Discard Change.
3.
8
Insert a Video Element on a Page and Adding New Videos
1.
2.
3.
4.
5.
Select Click to insert new element at the bottom of the desired
container.
From the Element Gallery pop-up, choose the Form & Data Sheet
Elements category, then select Video Chooser.
Select Click here to define the custom element data for the video
chooser.
If the video is already added, simply drag the available video over to the
Selected Videos box. Otherwise add a new video by:
a. Select the Add New Item button
b. On the UWEC Video tab, paste the video URL and select
Update Video Data. The Title and Description will auto
populate. Change it as desired.
c. Choose Keywords and Aspect Ratio as desired
d. On the Syndication tab, choose the main Unit from the
dropdown and slide associated Available Unit(s) to Selected
Units as appropriate
e. Select Submit and you will now see the video in the selected
videos area
Select the Display Options tab to define the Display Style.
Note the options to display the video or text on the right or left. The
text displayed is the Description entered earlier on the UWEC Video tab.
TIP: There are multiple options for adding videos. This element allows you
the choice of displaying the Video only (without text). Other featurettes
offer the option to insert the video on the left or right, with text, and provide
a button pointing to the source of the video.
4a.
4b. and 4c.
4d.
5.
9
Create Featurette Elements on a Page
Featurettes allow you to easily include an image, title, and excerpt of a story
or a page (and soon a Power-of-AND story) on your page, so the viewer can
simply click to see the full information.
2. Determine the region of the page in which you wish to place the
element, and insert the Row Offset element to create a new container
for your featurette element.
3. Select Click to insert new element at the bottom of the new offset
container.
4. From the Element Gallery pop-up, choose the appropriate element
category (possibly Miscellaneous, though this may change), then select
the title of the desired featurette element. Some popular ones are:
a. Left Image Featurette: Render an Image on the left and a
simple text block on the right; include a URL to a page,
document, or Registered URL.
b. Left Image Page Featurette: Image on left, words on right.
Allows you to choose a page and display the featured image as
well as the main caption.
c. Left Image Story Chooser Featurette: Image on left, words on
right. Allows you to choose a story and display the featured
image as well as the main caption.
d. Left Video Chooser Featurette: Video on left, Words on right.
Allow you to choose a video and display the video as well as
the main caption, and includes a button to the video source.
e. Right Image…. (same options, with the image on the right and
words on the left)
5. Select Click here to configure this element next to the element icon
to configure new data and Save.
Copy and Paste an Element
1.
2.
3.
4.
5.
6.
Select the element icon
in the upper left corner of the element »
select more.
Select Copy… in the expanded menu.
A Copy Element pop-up will appear. Select Close.
Determine the region of the page in which you wish to place the
element. (See Insert and Move an Element on a Page.) This could be the
current page or any other.
Select Click to insert new element at the bottom of the Container.
From the Element Gallery Pop-up, choose Paste Copied Element,
located at the top of the list.
10
Image Slider and Configuring the (top of page) Manual Slider
Option
One of the Page Addons options is to format an Image Slider. The choices
for this option will be used when the separate Show Featured Image is not
chosen. Choice of an “Automatic” option results in display of that type of
info on the slider. Choice of the Manual Slider gives the author the choice of
determining what displays, and it can contain multiple types of entries. To
configure the Manual Slider option:
1. Navigate to the desired page.
2. From the Dashboard Menu Bar, select Properties » Custom.
3. On the Page Addons tab select Manual Slider and deselect Show
Featured Image, then Save.
4. Working on the page, select Click here to define the custom element
data for the ALL-in-ONE-Chooser-Slider and enter data as appropriate.
5. Generic Info
a. First to Display: Choose which multi-media option to display
first (if left blank, it will be populated at random)
6. Pages – enter URL’s of up to two pages
7. Power-of-AND – Search for topics and drag items into the Selected
column
8. Stories – Search for topics and drag items into the Selected column
9. Videos – Search for topics and drag items into the Selected column
10. Save
11