Quick Start Lab February 2006 Colby College ITS

Before we Start… CommonSpot contributors can: Edit only existing content…or… Edit and create content only on existing pages…or… Edit and create pages and content Which of these you do determines which tasks you will need to know This hands-on tutorial will walk you through all of these functions Because we will be doing so many different things, we will start by creating a dummy page and elements This page – and any changes we make on it – will be deleted at the end of the tutorial February 2006 Colby College ITS

Four Things to Remember Quick Start Lab Four Things to Remember February 2006 Colby College ITS

Four Things that will “Get” You Pop-up windows The Author System Logging in Author mode February 2006 Colby College ITS

Pop-Up Blocking Pop-Up blocking prevents unwanted pop-up windows CommonSpot uses pop-up windows for dialogs For CommonSpot to work properly, pop-up blocking must be disabled Disabling pop-up blocking for a CommonSpot site will not affect blocking for other web sites February 2006 Colby College ITS

Authoring System www.colby.edu author.colby.edu User view No access to authoring or publishing author.colby.edu Author view Access to authoring and publishing functions February 2006 Colby College ITS

Logging In In order to access the functions you need to edit your CommonSpot pages You must be LOGGED IN to the Colby site Click LOGIN in the upper right corner of the Colby Banner February 2006 Colby College ITS

Author Mode Three modes in CommonSpot Read Edit Author You MUST be in Edit or Author to do anything but “read” your page February 2006 Colby College ITS

Author System Start a browser window Enter the authoring system author.colby.edu/[…your page URL…] Do you see any icons? Login to the Colby site Now do you see icons? Bookmark this page February 2006 Colby College ITS

Terms, Screen and Icons Quick Start Lab February 2006 Colby College ITS

Terms Icons Ghost text Elements Above the fold Content well 1. 3. 2. 4. 5. February 2006 Colby College ITS

CommonSpot Screen (1) 1. Title Bar The text ie puts at the top of the browser window Activation Status and Banner When you want the page published Breadcrumbs “You are Here…” Title The text CS puts at the top of the page Table of Contents Left navigation list Content The information on the page goes here Icons Function menus 2. 7. 3. 4. 5. 6. February 2006 Colby College ITS

CommonSpot Screen (2) Menu Icons Display menu Role menu Page menu 1. a b c Menu Icons Display menu Role menu Page menu February 2006 Colby College ITS

Icon Menus You will use these the most Display Options Role Options Page Mgt. Options February 2006 Colby College ITS

Author Mode Click on a text element Does anything happen? Click on the Page Management icon Do you see “Page Properties”? Click on the Mode icon Select “Author” mode Now Click on the Page Management icon Now click on a text element Click Cancel February 2006 Colby College ITS

Quick Start Lab Creating Pages February 2006 Colby College ITS

Creating a Dummy Training Page (1) Click the Page Mgt. icon Click on Create New Page Click Next to create the page directly “under” your home page Select: Colby | Generic Templates OR If your department has specific templates listed Select your departmental template listing February 2006 Colby College ITS

Creating a Dummy Training Page (2) If you selected Generic Templates Click on Basic Template February 2006 Colby College ITS

Creating a Dummy Training Page (3) Name URL-appropriate Lowercase, no spaces Title Display name on page Click on orange arrow Enter keywords Set confidentiality Optional Publication date Expiration Reminder Click Next February 2006 Colby College ITS

Creating a Dummy Training Page (4) Check Include in TOC This will automatically include your new page on the home page’s left navigation bar Leave it unchecked if you want to create your navigation bar by hand Show Siblings will list all pages at the same level Click Finish February 2006 Colby College ITS

Creating a Dummy Training Page (5) Your new page is created Note the green status bar Uncheck “Activate when published” Bookmark this page February 2006 Colby College ITS

The Green Status Bar Status Bar Activation button Activation interrupt 1. a b Status Bar Activation button Activation interrupt February 2006 Colby College ITS

Quick Start Lab Working with Elements February 2006 Colby College ITS

Creating Dummy Training Elements (1) Return to your department page Can you see any icons? What should you do? Click on the Mode icon Click on Author Click on the first element’s Element Properties icon Click on Copy Element Return to your new page Go into Author mode February 2006 Colby College ITS

Creating Dummy Training Elements (2) Click on ghost text “Click to insert new element” Click on “Insert the copied element” Repeat these steps with different elements until you have 3 or 4 elements on your new page You now have a page to work with for this training February 2006 Colby College ITS

What was Changed? Note the change on the page Click on Mode icon Click on Read Are the changes there? How do we make them appear? February 2006 Colby College ITS

Work in Progress Icons – … + Yellow circles Symbol depends on nature of the element They indicate action required in order to “publish” Click on the WIP icon next to your new element Click on one WIP icon Select Submit Entire Page… Discard Change would delete all the edits you have done so far Click on Mode Icon Click on Read Now look at your page – … + February 2006 Colby College ITS

Deleting an Element Click on the Element Properties icon on one of your page elements Click on Delete Element Click OK Now look at page Go into Read mode Is the element still there? Go to Author mode Click on yellow WIP icon with minus sign Now check your page in Read mode Return to Author mode February 2006 Colby College ITS

Content Well Layout Element Click on this icon Click on Layout Properties… Click on Background Image Click New Browse to any image on your computer Click Open Click Next Click Finish Look at your page! Click on the icon Click on Layout Properties Click on “Clear the background image” icon Click Finish Now look at your page February 2006 Colby College ITS

Element Properties Icon Click on this icon for the bottom-most element on your page Move this element: Up Down To Top To Bottom Click Element Name Enter “bottomelement” Click Finish February 2006 Colby College ITS

Edit Content Icon Click on this icon for any element on your page Click on “Edit…” What happens? Edit some of the text Click Finish What does the element look like now? Edit Content February 2006 Colby College ITS

Going Directly to Edit Click anywhere in/on the element What happens Make another edit Click Finish February 2006 Colby College ITS

A Word About Element Creation As a RULE… CommonSpot does not put you INSIDE an element that you have selected to create It, instead, inserts GHOST TEXT to represent a placeholder for the element You must then click on the GHOST TEXT to enter the element to edit it February 2006 Colby College ITS

Quick Start Lab Text Elements February 2006 Colby College ITS

About Text If you need to insert text that is formatted in any way (bold, underlined, linked to some other file, or including an image) Use one of the “formatted” text elements If all you need to do is enter straight text Use one of the “simple” text elements February 2006 Colby College ITS

Creating Text Elements Click on ghost text “Click to insert new element” Click on Text Elements We will create Formatted text block Formatted text block (without header) Simple text block Simple text block (without header) Creation Loop Click on each of the text block types in turn Click on ghost text to edit the element Type text wherever you can in form Until you have 4 text blocks Compare elements on the page February 2006 Colby College ITS

Quick Start Lab Image Elements February 2006 Colby College ITS

About Images Where to find… Sizes Two ways to create: Public gallery, ones your department has uploaded, ones you have uploaded Establish a policy for your web pages Sizes Size images BEFORE using them Two ways to create: From a formatted text block From create element ghost text February 2006 Colby College ITS

Creating Image Elements (1) Element Creation Click on ghost text “Click to insert new element” Click on Image Elements Creation Loop Click on in turn: Single Image Single Image without header Text around an image Single Image Create a single image element Click on placeholder graphic Click on Gallery Find your name under Owner Click Show Images Click on image you uploaded earlier Click Finish Click on header to edit it February 2006 Colby College ITS

Creating Image Elements (2) Single Image (without header) Create a single image element without header element Click on placeholder graphic Click New Browse to an image on your computer Click Open Click Next Click Finish Text around an image Create a Text around an image element Click on placeholder graphic Click on Gallery Find your name under Owner Click Show Images Click on either image you uploaded earlier Click Finish Compare elements on the page February 2006 Colby College ITS

Quick Start Lab Hyperlink Elements February 2006 Colby College ITS

About Hyperlink Elements Two ways: From a formatted text block From create element ghost text And a whole list of things you can link to Documents Other pages Other places on the same page eMail addresses February 2006 Colby College ITS

Creating Hyperlink Elements (1) Click on one of the formatted text blocks you created earlier to edit it Highlight a word or phrase Click on the hyperlink icon February 2006 Colby College ITS

Creating Hyperlink Elements Existing External Page Click Link to Existing Page, Uploaded Document or URL Click Next Click External URL Enter http://www.google.com Click Finish 3 times Publish your change Click on linked text What happens? Click Cancel Click on Mode icon Click on Read What happens now? Return to Author mode February 2006 Colby College ITS

Creating Hyperlink Elements Existing Internal Page Click Link to Existing Page, Uploaded Document or URL Click Next Experiment with Gallery and Page Finder to see what you can find Click Jump Click down arrow next to No Jump Click “bottomelement” Click Finish 3 times Publish your changes Click on linked text What happens? Click Cancel Click on Mode icon Click on Read What happens now? Return to Author mode February 2006 Colby College ITS

Creating Hyperlink Elements E-Mail Link (1) Click on a different element to edit it Type in: Contact: your name Highlight your name Click on Link icon Click E-Mail Link Click Next Type in your email address Publish your changes Go into Read mode Click on link February 2006 Colby College ITS

Creating Hyperlink Elements E-Mail Link (2) Return to Author mode Re-edit same element Highlight link text Click Link icon Click Next After email address type: ?subject=help request Click Finish twice Publish the change Go into Read mode Click on link Note subject line February 2006 Colby College ITS

Creating Hyperlink Elements New Uploaded Document Return to Author mode Edit any element Enter Click here to view document Highlight here Click Link icon Click Link to New Uploaded File Click Next Browse to some document on your computer Click Open Enter title and keyword information Click Next Click Finish Publish the change Go into Read mode Click on link February 2006 Colby College ITS

Where Did the Document Go? Return to Author mode Click Page and Template Mgt. icon Click My Pages Expand My Pages Expand My Documents Click check box next to the document you just uploaded Click Delete Selected Pages… What happens? Click OK anyway February 2006 Colby College ITS

Creating Hyperlink Elements New Page from Template Edit any element Enter Meet our staff here Highlight here Click Link icon Click Link to New Page from Template Click Next 2 times Select a basic template or your departmental template Complete page creation forms (2) Click Finish Publish the change Go into Read mode Click on new link February 2006 Colby College ITS

Quick Start Lab Managing Pages February 2006 Colby College ITS

Managing Pages (1) Click on Page and Template Mgt icon Click on My Pages Expand My Pages Expand My Documents Cancel Stops whatever action was underway Move Reopens the Create Page dialog You can only move pages to sites you have permission for Delete Deletes the selected page Inactive Page Indicator Work in Progress Indicator Edit this page February 2006 Colby College ITS

Managing Pages (2) Check boxes beside all pages and documents you have created for this tutorial Click on Delete Selected Pages… Click OK Congratulations! All evidence of your activity has now been removed February 2006 Colby College ITS

Training Resources Tutorials Online instructions http://author.colby.edu/administration_cs/its/instruction/cstrain/ Tutorials Online instructions February 2006 Colby College ITS

Questions. Comments. Contact: Mel Regnell Mel. Regnell@colby. edu ext February 2006 Colby College ITS