1. Tour Overview Introduction Collage Basics Collage Basics (Templates and Tools) Computer Configuration Bookmark Collage Getting Started Tour Collage Terminology BasicsBasics Configuration Bookmark Tour TermsConfiguration BookmarkTourTerms

2. Introduction The Goal of this tutorial This tutorial covers basic information. The goal of this tutorial is to show you how to edit your homepage. Editing your homepage will cover all of the basic steps to create a web page. BasicsBasics Configuration Bookmark Tour TermsConfiguration BookmarkTourTerms

3. Collage Basics Page Templates (Preview ) There are 4 page templates. (Homepage, 2col, 3col, & FullScreen) 1.The “Homepage” 2 column template with photo. 2.The “2col” template with no photo. BasicsBasics Configuration Bookmark Tour TermsConfiguration BookmarkTourTerms

4. Collage Basics Page Templates cont’d (Preview ) There 4 page templates. 3.The “3col” template showing 3 columns. An example of a page using the 3 column template: http://www.csp.edu/CE/ http://www.csp.edu/CE/ 4.The “Full Screen” template is used for content that causes the design to distort. No photo available Example of a Full Screen: http://www.csp.edu/local/ BasicsBasics Configuration Bookmark Tour TermsConfiguration BookmarkTourTerms Col 1Col 2 Col 3

5. Collage Basics Edit and Live View BasicsBasics Configuration Bookmark Tour TermsConfiguration BookmarkTourTerms Edit View Preview & Live View Note the differences between the editing view and when the page goes live. You edit fields in Collage similar to editing fields in Microsoft Publisher.

6. Collage Basics 3 Column Template (Live) BasicsBasics Configuration Bookmark Tour TermsConfiguration BookmarkTourTerms

7. Collage Basics Primary Editable Fields The 4 green boxes to the left are editable fields, within every page template. Available templates: Homepage, 2col, 3col, FullScreen The 5 green boxes to the right are editable fields, within the homepage template only. BasicsBasics Configuration Bookmark Tour TermsConfiguration BookmarkTourTerms

8. Computer Configuration 1.Enable your java settings by: –Go to Tools->Options-> click on the “Advanced” tab. Match the following: 2.If you have pop-up blocking software turned on, allow pop-ups from this site http://collage.csp.edu 3.If a security warning pops up, click “Always Run” or “Grant Always” 4.Click OK to Log into the Homepages project BasicsBasics Configuration Bookmark Tour TermsConfiguration BookmarkTourTerms

9. Bookmark Collage http://collage.csp.edu http://collage.csp.edu 1.Enter your network username and password 2.Click Login BasicsBasics Configuration Bookmark Tour TermsConfiguration BookmarkTourTerms

10. Getting Started Tour Choose the Homepages project and click OK. BasicsBasics Configuration Bookmark Tour TermsConfiguration BookmarkTourTerms

11. Getting Started Tour How to View Files in Collage 1.Click The Content tab. 2.Click the “+” to expand the Homepages project. 3.Click your web folder to view your files. (e.g._Faculty_Template) BasicsBasics Configuration Bookmark Tour TermsConfiguration BookmarkTourTerms

12. Getting Started Tour All folders preceded by an underscore are required. (e.g. _Banners, _Images, _ContactMe, _Navigation) Folders with an underscore and their files are required for your page templates. (e.g. navigation, banners, contact info) BasicsBasics Configuration Bookmark Tour TermsConfiguration BookmarkTourTerms

13. Getting Started Tour Page Anatomy – frequently used web page fields Editing the frequently used fields on the “Homepage” Template. 1. Enter your Name 2. Enter your college 3. Click to edit the Image You can only edit the fields outlined with dotted lines. BasicsBasics Configuration Bookmark Tour TermsConfiguration BookmarkTourTerms

14. Getting Started Tour Page Anatomy – frequently used web page fields 1. Click the Image 2. Click the banner button Editing your image cont’d. BasicsBasics Configuration Bookmark Tour TermsConfiguration BookmarkTourTerms

15. Getting Started Tour Uploading a New Image 1. Click on the _Images folder. If the images or New Image button in the right pane does not display. 2. Click New Image button 3. Browse to your file and click Open. See next slide.next slide

16. Getting Started Tour Uploading a New Image 1. Click on the folder if the images in the right pane do not display. 2. Select the appropriate image 3. Enter a description of the photo to meet legal web site requirements. 4. Click OK

17. Getting Started Tour Selecting an Uploaded Image 1. Click on the folder if the images in the right pane do not display. 2. Select the appropriate image. 3. Enter a description of the photo to meet legal web site requirements. 4. Click OK.

18. Getting Started Tour Page Anatomy – frequently used web page fields Editing the frequently used fields on the “Homepage” Template. Heading Content 4. Enter a Heading for your page 5. Enter your page content

19. Getting Started Tour Page Anatomy – frequently used web page fields Editing the frequently used fields on the “Homepage” Template. Optional custom navigation You have 2 choices in Navigation. A consistent navigation that is called Default and an alternate navigation that is called Custom.

20. Getting Started Tour Page Anatomy – 3 column template Editing the “Homepage” Template This field is only available by choosing 3col Metadata The optional 3 rd column will only work on your web page if you choose: Metadata > template >3col.

21. Getting Started Tour Page Anatomy – template fields This content is pulled from the folders preceded by an underscore and is part of your page template. This information is edited in the appropriate file. Contact Information: This information is pulled from the _ContactMe folder and can not be edited here. Default Navigation: This information is pulled from the _Navigation folder and can not be edited here. Banner: This information is pulled from the _Banners folder’s files and can not be edited here. You can change banners by choosing the Metadata for that web page. Web Author: This information is pulled from the _ContactMe folder and can not be edited here. Banner Contact info Navigation Web Author BasicsBasics Configuration Bookmark Tour TermsConfiguration BookmarkTourTerms

22. Getting Started Tour Page Anatomy - Review Reviewing the “Homepage” Template 1. Enter your Name 2. Enter your college 3. Click to edit the Image 4. Enter the Heading 5 Enter the Content This information is pulled from the _ContactMe folder and edited in the _ContactMe folder. This information is pulled from the _Navigation folder and edited in the _Navigation folder. Optional custom navigation This field is only available by choosing 3col Metadata BasicsBasics Configuration Bookmark Tour TermsConfiguration BookmarkTourTerms

23. Getting Started Previewing Default Banner 1. Select web Folder 2. Select index file 1. Select Preview BasicsBasics Configuration Bookmark Tour TermsConfiguration BookmarkTourTerms

24. Getting Started Editing the Default Banner 1. In the left column click on your web folder (e.g. _Faculty_Template) 2. Click on the _Banners folder BasicsBasics Configuration Bookmark Tour TermsConfiguration BookmarkTourTerms

25. Getting Started Editing the Default Banner You have 11 banners including your Default banner. The default banner will appear on all pages unless you change the web page Banner Metadata. Click the default linked file BasicsBasics Configuration Bookmark Tour TermsConfiguration BookmarkTourTerms

26. Getting Started Previewing the Default Banner 1. Click your folder 2. Check the checkbox 3. Click Preview BasicsBasics Configuration Bookmark Tour TermsConfiguration BookmarkTourTerms

27. Getting Started Editing the Default Banner This is the live page preview. To Change this banner select the pages Metadata. 1. Click your web folder 2. Check the Checkbox 3. Select Metadata BasicsBasics Configuration Bookmark Tour TermsConfiguration BookmarkTourTerms

28. Getting Started Editing File Metadata From the drop down menu choose Metadata. BasicsBasics Configuration Bookmark Tour TermsConfiguration BookmarkTourTerms

29. Getting Started Editing File Metadata 1.Select the Banners drop down arrow and select Default. 2.Click OK BasicsBasics Configuration Bookmark Tour TermsConfiguration BookmarkTourTerms

30. Getting Started Preview Metadata Changes To Edit the banner image, enter a new image of your choice. For further details see slides 25-28.25-28 Preview your banner changes. For further details see slide 37.37 Review BasicsBasics Configuration Bookmark Tour TermsConfiguration BookmarkTourTerms

31. Getting Started Metadata Options The Name field is where you can name the title of your file. Experiment with the web page preview for Navigation & Template Metadata. It is not covered in this tutorial. Ignore these fields BasicsBasics Configuration Bookmark Tour TermsConfiguration BookmarkTourTerms

32. Getting Started Creating a Folder How to create a folder 1. Click your web folder 2. Click the New Folder button 3. Name your folder and click OK. 4. Click the button New Document to create a new document. 5. Click on your documents linked name, make a change, save & close the file. BasicsBasics Configuration Bookmark Tour TermsConfiguration BookmarkTourTerms

33. Getting Started Creating Default Navigation 1. Click your web folder 2. Click the _Navigation folder 3. Click the linked file default

34. Getting Started Creating Default Navigation 1.Select the text “Default Faculty Navigation” and Type your navigation links 2.Select the Link button

35. Getting Started Creating Default Navigation 1. Select your web folder 2. Navigate to the file you created. 3. Select your file 4. Click OK If you do not type your navigation in the web page you can enter the name of your link here. BasicsBasics Configuration Bookmark Tour TermsConfiguration BookmarkTourTerms

36. Getting Started Editing Contact Information 1. Click your web folder 2. Click the _ContactMe folder 3. Click the linked file ContactInfo BasicsBasics Configuration Bookmark Tour TermsConfiguration BookmarkTourTerms

37. Getting Started Editing Contact Information Enter the following: 1.Name 2.Job Title 3.Office # 4.Fax # 5.E-mail Address 6.Web Author 7.Exit and Save Remember BasicsBasics Configuration Bookmark Tour TermsConfiguration BookmarkTourTerms

38. Terminology Basic Web CMS: Content Management System Homepage: The first page of your web site (http://www.csp.edu).http://www.csp.edu Live: A page address that can be viewed on the internet. BasicsBasics Configuration Bookmark Tour TermsConfiguration BookmarkTourTerms

39. Terminology Computer Setup Pop up blocker: Windows that pop up using Collage need to be enabled by your browser. Active X: A program Collage uses that requires installation and allowed to run. Java: A program that Collage uses that requires installation. BasicsBasics Configuration Bookmark Tour TermsConfiguration BookmarkTourTerms

40. Terminology Login Network Username & Password: The same information you use to log onto your computer. Project: There are 2 projects. A project where your department web pages are stores and a project where your faculty web pages are stored. BasicsBasics Configuration Bookmark Tour TermsConfiguration BookmarkTourTerms

41. Terminology Collage Interface Project: There are 2 projects. A project where your department web pages are stores and a project where your faculty web pages are stored. Refresh: A link you click that will refresh the Collage interface to show you changes. Preview: What your page should look like when it goes to the live web site. Metadata: Custom page options are available using “Metadata” BasicsBasics Configuration Bookmark Tour TermsConfiguration BookmarkTourTerms

42. Terminology Saving Check Out: When Collage opens a file it Checks it out displaying a “lock” icon, not allowing users to edit that document until you check it back in. Check In: When you want to save your changes “Check In” your files in Collage. BasicsBasics Configuration Bookmark Tour TermsConfiguration BookmarkTourTerms

43. Terminology Going Live All changes must be approved. You must click on the square (in the same row as your file) to approve your changes. After your changes are approved it will display the version number (e.g. 2.) Live: Content that all users can view from an internet browser. BasicsBasics Configuration Bookmark Tour TermsConfiguration BookmarkTourTerms

44. Terminology - Collage Approved Documents ONLY approved versions appear on your live web site. Approved documents are the final version of a page you are working on. If you work on a page 5 times you will have 5 versions. You can roll back to any version of the document at any time. BasicsBasics Configuration Bookmark Tour TermsConfiguration BookmarkTourTerms

45. Contact Us Lea Motz motz@csp.edu LTC 009 X 8278 Melissa Huber huber@csp.edu LTC 009 X 6296 Please direct questions or suggestions on this tutorial to motz@csp.edu or x8748motz@csp.edu BasicsBasics Configuration Bookmark Tour TermsConfiguration BookmarkTourTerms