1. February 2006Colby College ITS Quick Start Lab

2. February 2006Colby 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

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

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

5. February 2006Colby 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

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

7. February 2006Colby 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

8. February 2006Colby 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

9. February 2006Colby 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

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

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

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

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

14. February 2006Colby College ITS Icon Menus Display OptionsRole OptionsPage Mgt. Options You will use these the most

15. February 2006Colby 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

16. February 2006Colby College ITS Creating Pages Quick Start Lab

17. February 2006Colby 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

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

19. February 2006Colby 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

20. February 2006Colby 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

21. February 2006Colby 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

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

23. February 2006Colby College ITS Working with Elements Quick Start Lab

24. February 2006Colby 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

25. February 2006Colby 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

26. February 2006Colby 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?

27. February 2006Colby 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 + – …

28. February 2006Colby 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

29. February 2006Colby 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 Layout Element

30. February 2006Colby 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 Element Properties

31. February 2006Colby 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

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

33. February 2006Colby 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

34. February 2006Colby College ITS Text Elements Quick Start Lab

35. February 2006Colby 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

36. February 2006Colby 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

37. February 2006Colby College ITS Image Elements Quick Start Lab

38. February 2006Colby College ITS About Images Where to find… –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

39. February 2006Colby 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 –Click Finish

40. February 2006Colby 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

41. February 2006Colby College ITS Hyperlink Elements Quick Start Lab

42. February 2006Colby 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

43. February 2006Colby 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

44. February 2006Colby 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 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 Click on linked text What happens now? Return to Author mode

45. February 2006Colby 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 Click on linked text What happens now? Return to Author mode

46. February 2006Colby 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

47. February 2006Colby 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

48. February 2006Colby 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

49. February 2006Colby 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

50. February 2006Colby 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

51. February 2006Colby College ITS Managing Pages Quick Start Lab

52. February 2006Colby 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

53. February 2006Colby 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

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

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