Tour Overview Introduction Collage Basics Collage Basics (Templates and Tools) Computer...

Tour OverviewIntroduction

Collage Basics (Templates and Tools)

Computer Configuration

Bookmark Collage

Getting Started Tour

Collage Terminology

Basics Configuration Bookmark Tour Terms

IntroductionThe 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.


Collage BasicsPage 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.


Collage BasicsPage 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/

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/


Col 1 Col 2 Col 3

http://www.csp.edu/CE/



Collage BasicsEdit and Live View


Edit ViewPreview & 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.

Collage Basics 3 Column Template (Live)


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.


Computer Configuration1. 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 projectBasics Configuration Bookmark Tour Terms

Bookmark Collagehttp://collage.csp.edu

1.Enter your network username and password

2.Click Login


http://collage.csp.edu/


Choose the Homepages project and click OK.


Getting Started TourHow 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)



• 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)


Getting Started TourPage 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.


Getting Started Tour Page Anatomy – frequently used web page fields

1. Click the Image

2. Click the banner button

Editing your image cont’d.


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.

Getting Started TourUploading 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

Getting Started TourSelecting 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.



Heading

Content

4. Enter a Heading for your page

5. Enter your page content



Optional custom navigation

You have 2 choices in Navigation. A consistent navigation that is called Default and an alternate navigation that is called Custom.

Getting Started TourPage Anatomy – 3 column template

Editing the “Homepage” Template

This field is only available by choosing 3col Metadata

The optional 3rd column will only work on your web page if you choose: Metadata > template >3col.

Getting Started TourPage 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


Getting Started TourPage Anatomy - Review

Reviewing the “Homepage” Template

1. Enter your Name

2. Enter your college

3. Click to edit the Image4. Enter the Heading

5 Enter the ContentThis 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 navigationThis field is only available by choosing 3col

Metadata


Getting StartedPreviewing Default Banner

1. Select web Folder 2. Select index file 1. Select Preview


Getting StartedEditing the Default Banner

1. In the left column click on your web folder (e.g. _Faculty_Template)

2. Click on the _Banners folder



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


Getting StartedPreviewing the Default Banner

1. Click your folder

2. Check the checkbox

3. Click Preview



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


Getting StartedEditing File Metadata

From the drop down menu choose Metadata.


Getting StartedEditing File Metadata

1. Select the Banners drop down arrow and select Default.

2. Click OK


Getting StartedPreview Metadata Changes

To Edit the banner image, enter a new image of your choice.

For further details see slides 25-28.

Preview your banner changes. For further details see slide 37.

Revie

wBasics Configuration Bookmark Tour Terms

Getting StartedMetadata 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


Getting StartedCreating a Folder

How to create a 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.


Getting Started Creating Default Navigation


2. Click the _Navigation folder

3. Click the linked file default

Getting StartedCreating Default Navigation

1. Select the text “Default Faculty Navigation” and Type your navigation links

2. Select the Link button

Getting StartedCreating 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.


Getting StartedEditing Contact Information


2. Click the _ContactMe folder

3. Click the linked file ContactInfo


Getting StartedEditing 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


TerminologyBasic Web

• CMS: Content Management System

• Homepage: The first page of your web site (http://www.csp.edu).

• Live: A page address that can be viewed on the internet.


http://www.csp.edu/

TerminologyComputer 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.


TerminologyLogin

• 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.


TerminologyCollage 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”


TerminologySaving

• 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.


TerminologyGoing 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.


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.


Contact Us

Lea Motz

[email protected]

LTC 009

X 8278

Melissa Huber

[email protected]

LTC 009

X 6296

Please direct questions or suggestions on this tutorial to [email protected] or x8748


mailto:[email protected]

mailto:[email protected]

mailto:[email protected]?subject=Faculty%20Training%20Tutorial

Tour Overview Introduction Collage Basics Collage Basics (Templates and Tools) Computer...

Documents

Transcript of Tour Overview Introduction Collage Basics Collage Basics (Templates and Tools) Computer...