Tennessee State University

Website Editor Guide
OU Campus System

 

The TSU Website
is one of the top three ways that TSU
attracts and retains prospective students.

 

~~~

 

Let's all do our part
in recruiting and in representing TSU
in a positive light.

 

~~~

 

" Great Content = Great Link Building."

 

 

 

TABLE OF CONTENTS

Design Intentions

Content Guidelines

Getting Familiar with OU Campus

 

________________________________

HOW TO

Browser Version

Calendar

Google Calendar
University Main (Homepage) Calendar

Clear Cache

Deleting Images, PDFs, Documents

Editing Existing Webpages

File-naming

Forms

Google Docs

Qualtrics

Qualtrics Test

Images

Flickr Images

Resizing Images

Using an image in Word on a web page

Uploading Images

Keywords

Leftnav

Links

Anchor Tags

Logging In
New Webpages

Photo Album

Single-space Text

Uploading New PDFs/docs

Uploading While Making New Link

Videos

 

________________________________

HELPS

Troubleshooting OU Campus

Shared Web Content

Tips on Writing for the Web

Policy
Training Class Documents

 

SYSTEM/SITE
ACCESS

 

Working Remotely?
Login to the TSU Virtual Private Network (VPN) before accessing OU Campus:

Login to TSU VPN
(www.tnstate.edu/vpn)

 

Login to OU Campus
--Bring up your department web page in a browser.
Scroll to the footer and click "Last Modified".

--Login using your usual TSU network login

_____________________

Example Site to follow

TSU's Website

 

_____________________

 

Download Firefox

Download and install Firefox on your PC and use it to work within OU Campus.

                             

 

 

  



DESIGN INTENTIONS


New Paradigm

















 

 

 

 

 

 


KEY CONCEPTS

 

Think:
"Who is in my web audience & how are they
approaching my site?
How are they looking for my information?

And how can I help them find my information?"

Not:

"Let me put lots of unnecessary information to make my
department look important."

____________________________

Think:

“information"

Not:

"department"


ie. Instead of titling your page:
Office of Financial Aid”,
title it: “Paying for College”.

 

____________________________

HOW CAN I LEAD STRANGERS TO MY INFORMATION
IN A CLEAR AND CONCISE MANNER?

 

Make your site appealing & navigable to its intended users,
not to people who know how TSU is organized.
How TSU is organized is irrelevant to most of your web-users.

____________________________

Architect Your Data!
Analyze your content. Then group it into categories. Place categories on your leftnav, not "everything under the sun"!

AIMS OF NEW SYSTEM & DESIGN

- Consistency in both look and feel on ALL web pages. Same fonts on all web pages for titles, subtitles, and text. Same colors for highlighting or setting apart. The entire goal is to look like a uniform and well-maintained university.

Show examples: http://www.tnstate.edu/campus_life/

 

HOMEPAGE

The TSU homepage projects a particular image of TSU. Departments may not interrupt this image-projection by insisting that certain content be present on the homepage.


  




CONTENT GUIDELINES
















 

AIM: Consistency in both look and feel on ALL web pages.

Consistency means:

1) same font for page content (Tahoma; size 12)

2) same background color for accenting areas (#d1d7db)

3) one image above fold - 250 wide

 

FILENAMES

The filename can help you to have good URLs for marketing.

(eg. www.tnstate.edu/agriculture VS. www.tnstate.edu/agriculturalprogram )

 

PUNCTUATION

Do not use hyper-punctuation. For example: one exclamation point is enough. We are an institution of higher learning. If we cannot express ourselves with our vocabulary and normally-punctuated content, we are most to be pitied.

(ex: Use: “Good News!”

instead of: “Good News!!!”)

***Remember: the web is a publication of TSU!

 

BOLD TEXT

Do not make lots of text bold. Only headings and items that are truly being emphasized should be bolded. Ten items in a single paragraph CANNOT possibly all need to be emphasized!

 

CAPITALIZATION

Do not use ALL CAPS too frequently. It should be reserved for headings and true emphasis of words.

 

COLOR USAGE

Black is the chosen color of text.

No flashy colors. This will be strictly enforced. We aim for consistency and calmness.

To set apart a column of a table, use the background color: #d1d7db.

 

CONTACT INFO

Always offer contact info for the student to receive additional information from you.  “Contact Us” must be the last item in the leftnav….so that it is consistent across the TSU website.

 

FONT & SIZING


Tahoma 12pt

The system automatically makes your text Tahoma font – size 12.  And it handles your sub-titles and Titles automatically as well.


Web Services will be reviewing sites and will alter any
not following this consistent pattern/design.

 

 

IMAGES

1. Non-bordered images

2. No stretched/non-proportionate images

3. One main image in page content. Do not clutter page with multiple images. Keep a clean look.

4. Do not alter the Dimensions in the “Appearance” tab:

t

NOTE: You are able to copy all content from Word, Excel, etc. into OU, but not images.

 

 

MARKET TSU'S PROGRAMS –- GUIDE THE STUDENT TO APPLY TO TSU!

Offer the student opportunity to:

· contact someone in your department for more information

· “Apply Now”

….both clearly & specifically stated

Example on right-hand side: http://www.tnstate.edu/history/

 

PLACEMENT OF INFORMATION -Be Consistent!

Program information should appear in basically the same general place for every department…so that web-user knows where to look. Follow example: http://www.tnstate.edu/example

Must-haves in leftnav:

College Name OR "Adminstrative Offices"

Name of Department

"Degree Programs" (must appear in leftnav directly under Name of Department)

"Contact Us" (must be last item in leftnav)

 

REPEATING INFORMATION

Do not repeat information. Have it available clearly and easily navigable and consistent….rather than posting the same information in several different places.

 

SIMPLIFY TEXT

Make the words or phrases into links instead of text saying “Click here for details.”

For example:

Graduate Application (instead of “Click here for graduate application.”)

You’re dealing with a highly Internet-savvy audience. Treat them as such!

 

UNDERLINING

Only links should be underlined. In the web world, underlining means "this is a link".

 

BLUE LINK COLOR

Do not make text the same blue color of web-links. Web-users will think it’s a link when it’s not.

 

FICTITIOUS SITE (Can you locate the errors?)
http://www.tnstate.edu/_testadmin/accounting/

 

 




WEB SUPPORT















 

 

POST-TRAINING SUPPORT SITE: www.tnstate.edu/web


 

 

 

 

 

 

____________________________________________________________

 

FORMS

To create a form where you allow web-users to input data that is sent to you, use Google Docs or Qualtrics. Both are explained below.

 

USING GOOGLE DOCS

Go to www.docs.google.com

Set up an account for your department first. Be sure to not make the account in your own name. You may leave the university; but your department will not. ;-)

After creating an account, you can then begin to set up your form. It's fairly straight-forward.

CREATING A FORM
Choose to create a “Form”. Google Docs will lead you through it very simply.
And when finished, you’ll have an online form that saves all your submitted data into a spreadsheet on Google Docs. You’ll be able to download the spreadsheet at any time.

Here is an test example that I previously did of a Google Docs form. Of course, you’ll set yours up to acquire only the data that you want (email address, name, etc., etc.). Remember, we are not allowed by policy to obtain secure information (especially not Social Security #s).

Example Form: https://spreadsheets.google.com/viewform?formkey=dFBxUktnblZWTTRGOUN6dVNWUXRsdXc6MQ

To see the submitted entries, you will login to your Google Docs account and download the spreadsheet of all of the entries.

 

If you want to embed your form on an OU Campus webpage of yours, please get the Embed code from Google Docs. Then submit a work order on TrackIt (www.tnstate.edu/trackit) listing the embed code and noting which webpage you need it inserted on. CIT-Web Services will have to embed it on the webpage for you.

< back to top >

 

QUALTRICS: TEST NEW FORM

Okay.  So now, you can have a brand new form in Qualtrics.  You’ll find it much, much easier to use and update.  It will replace your old/existing one.  But you need to test it out first….and make sure you can access its data/form-responses, etc..  Will you do the following:

  1. Login to your Qualtrics account.  You should still have the email from Jeremy Lynch that mentioned your password.
             www.tnstate.edu/qualtrics
  2. Once you’re logged in, a yellow notification box that may appear. If so, just "X" out of it.
  3. You should see your form listed under “My Surveys”.
  4. In Qualtrics on the line for your form, click “Send”. You will see a link for your form. This is the URL that needs to go on your web page (so web users can click it to use your form).
  5. Click the URL & fill out the form (to test it). After submitting the form, look to see if you can view your results as mentioned below.

NOTIFICATION OF SUBMISSIONS
Of course, you’ll get an email each time someone submits your form.
To alter who gets an email:
Edit your form
Click “Advanced Options” on the right-hand side.
Click “Triggers” and “Email Triggers”
Click the text with “Send” in it.  (Or you can add another email via “Add Another Trigger.”)

VIEW RESULTS
In Qualtrics, click “View Results” and click “Download Data”……to download a spreadsheet of the data that has been submitted for that form.
OR
Just look at all the emails in Outlook that you have gotten from form submissions.

QUALTRICS TIPS:
The following instructions show how to create a new form in Qualtrics; but they may help you to update your existing form a bit too.
http://www.tnstate.edu/ouguide/#qualtrics

EDITING FORM
By clickinging "Edit" you can alter wording, add a new question/field, etc. anytime you like.

TIPS: The following instructions show how to create a new form in Qualtrics; but they may help you to update your existing form a bit too.
http://www.tnstate.edu/ouguide/#qualtrics

 

QUALTRICS: HOW TO CREATE QUIZ/FORM/SURVEY

First, obtain a an account on Qualtrics by contacting Jeremy Lynch in Dept of Institutional Planning.

Login to Qualtrics using the link that Jeremy Lynch (Dept of Institutional Planning) provided to you in the email from Qualtrics.

Click “Create Survey”
Click “Quick Survey Builder”
Name your Survey
If you want to store it in a particular folder name, enter the folder name.
Click “Create Survey”

Do the following for as many questions as you have:

  1. Click “Create new item”
  2. Over on the right, you’ll see a green rectangle, choose from it what type of question you are asking: Text Entry or Multiple Choice.
  3. Enter your Question.
  4. If your question is multiple choice, enter your Answers too.


REPEAT the above 4 steps for each question you have
.

Click “Preview Survey” if you’d like to preview it. (Just close this window when you’re finished previewing)
If you’d like to edit any questions, go ahead and do so.
Click “Launch Survey”
Click “Activate your survey to collect responses”
You will be provided with a link to the form that you can put on your website or in emails, etc. to ask individuals to submit your form.

Qualtrics Tips: http://lmgtfy.com/?q=create+form+in+qualtrics

Qualtrics Tips on creating forms/surveys:
http://www.qualtrics.com/university/researchsuite/basic-building/

 

TO EDIT FORM (add additional fields, change fields)
Click “My Surveys” at the top…. and then, click your form’s name in the listing that displays. 

TO SEE FORM ONLINE
When you go into Qualtrics…
click the “My Surveys” tab
Click your form in the listing
Click “Launch Survey” near the top
It provides you with the link to your survey.  This is the link that you can put on your website after you have the form working as you like it. 

 

< back to top >

 

____________________________________________________________

GOOGLE CALENDAR

Just go to Google Calendar: https://support.google.com/calendar/bin/answer.py?hl=en&answer=37005

…and create an account for your dept (unless your dept already has an acct).

Then, create your calendar.

After you create it, you’ll see it listed on the lefthand site like the screenprint below shows the “Nashville Fun” one.

 

When you see it listed there on the left-hand side,

click the arrow beside it

click “Calendar Settings”

You’ll see an “embed” code listed in a box on the page (2nd screenshot below). Copy the embed code & send it to webmaster@tnstate.edu note which web page of yours to embed it on.

 

http://www.tnstate.edu/ouguide/default_files/image001.pngDescription: http://www.tnstate.edu/ouguide/default_files/image004.jpg

 

 

< back to top >

 

____________________________________________________________

UNIVERSITY (HOMEPAGE) CALENDAR

The University uses the calendar-system, CBMS, to handle the university’s main calendar. Should you want your department's events to show up on the main university calendar and therefore on the homepage, contact Events Management.

 

 

< back to top >

 

 

CHECKING IN WEB PAGES

“My co-worker says that OU Campus says that I have a page checked out.  How do I check it back in?”

In OU Campus in your departmental folder, you’ll see the listing of all your files/web-pages…..like the screenprint below.  See how on the screenprint below, it has red locks for most every file?  Well, when you go into OU Campus, you’ll see that it has yellow lightbulbs….which means that you have the file checked out.  So, just click the yellow lightbulb to turn it to white….which will check in the file so others can edit it.

 

You’ll want to do this for every file that you have checked out.

 

http://www.tnstate.edu/ouguide/default_files/image003.png

 

< back to top >

 

 

 

 

 

PREPARING TO CREATE WEB PAGES

 

 

 

 

 

 

PLAN OF ATTACK: Review existing material and deciding what to copy onto your website.  Plan the layout of it.

 

REVIEW YOUR EXISTING CONTENT

 

First: Create a folder on your PC named “Website”.  Within it create two folders: “images” and “documents”. 

Then gather all of your PDFs, Word docs, images…everything that is not text on a webpage. Save them to your PC into the appropriate folder.

Powerpoint Slideshows  --  If you want to have all of your Powerpoint presentations in a particular folder, make a folder named “presentations” and upload your Powerpoint presentations to that folder.

HOW TO COPY IMAGES FROM WORD, ANOTHER WEBSITE, ETC. INTO OU CAMPUS:

IMAGES

Initially, right-click each image and save to your PC. Then, within OU Campus, upload your images from your PC into your “images” directory in OU. By doing this first, you’ll have your images in OU and will be able to easily add them to your pages in OU.

 

DOCUMENTS

Upload all of your PDFs and Word docs into the “documents” folder in OU Campus.

 

BEST PRACTICES

Create all your webpages first.  Then edit your leftnav. This way, when creating your leftnav, you’ll be able to browse for your new pages in order to link to them.

COPYING CONTENT FROM WORD

Be sure to always “Paste from Word” when you're copying content from SiteDoc, Word, or other packages. This is VERY IMPORTANT. It will eliminate bad characters from the source code you are pulling over from SiteDoc or Word.

 


 

 

 

 

GETTING FAMILIAR WITH OU CAMPUS

 

 

 

 

 

 

 

IMPORTANT FACTS ABOUT OU

OU has two tabs: Staging & Production.

Keep in mind:

· Web pages are handled in the “Staging” area/tab.

· Images are handled in the “Production” area/tab.

 

SYSTEM NAVIGATION

“New” and “Upload” are relative to where you are in the system.

Notice the navigation bar (breadcrumb indicating where you are in the folder levels).

 

FILE-NAMING
This is very important. All filenames MUST BE:

·         All lowercase

·         Use short filenames

·         No spaces

·         No underscores

·         Separate words with a hyphen. (though it's highly recommended that you use short names and not use hyphens)

·         Always have the extension “.pcf”. (ex. campuslife.pcf or contact.pcf)

 

RENAMING

When you rename, you’re renaming on Staging, not Production. So not until you re-publish will it take effect on Production.

 

RECYCLING

Folders cannot be re-instated if they've been deleted.

When you delete/recycle a file on Staging, it also deletes/recycle it on Production.

And just like your PC, when you delete an entire folder, everything in it gets deleted.

 

Leftnav

The leftnav is a separate file just like your pages are. So it has to be edited, saved, and published.

NOTE: When you create new web pages, OU Campus automatically puts links to them in your leftnav. But you have to publish your leftnav file in order for the leftnav to become live on your website.

Also note that you may or may not want all of the links to be in the leftnav. So, just delete those you don't want and add others you do want. When you have your leftnav as you desire it, save it and publish it (just like you do web pages).

 

Must-haves in leftnav:

College Name OR "Adminstrative Offices"

Name of Department

"Degree Programs" (must appear in leftnav directly under Name of Department)

"Contact Us" (must be last item in leftnav)

 

Note: Be sure to publish all new pages that you create before attempting to make links to them...or else you won't see them in the system and you won't be able to make links to them.

To change items on your leftnav, it's just like changing links in a Word document. You just make text into links. It's that simple.

 

To change your leftnav:

It's SIMPLE.

Just edit the file named “_leftnav.html”.

To add a new line to the leftnav, first create a new blank line where you want the new link to go.

 

How to create a new blank line (using Internet Explorer)

Go to the end of the line that is above where you want your new line.

At the end of the text, click two times (to get inside the inner box that Internet Explorer has there).

Press "Enter" on your keyboard (this creates the new blank line).

Type the text that you want in the leftnav.

Highlight the text. Right-click it and choose "Insert/edit link".

Click the red button to the right of the "Link URL" box and browse for the web page that you are making a link for.

Click it...and click "Select File".

Click "Insert".

Voila! It's that simple!

*NOTE: Your leftnav will not display your new web pages on it until you have re-published your leftnav file (_leftnav.html).

 


 

 

 

 

 

MIGRATING YOUR CONTENT

 

 

 

 

 

 

 

 

FIRST THINGS FIRST -Download & install Firefox. And use Firefox instead of Internet Explorer when working on OU Campus.

If you would like to have a leftnav file that is easy to edit, you should use Firefox.

Many of you will not have Firefox installed on your PC.

To install it, go to this link & click Download:

http://www.mozilla.com/en-US/firefox/new/?WT.mc_id=en2&WT.mc_ev=click&WT.srch=1&gclid=CKmCzqjm8acCFRFj7AodZEzHGg

Click “Run” to install it on your PC.

It’s quick & easy!

If you run into any problems with installing Firefox….or if you’re unable to install software onto your PC, please submit a ticket with the TSU HelpDesk here: http://www.tnstate.edu/cit/helpdesk.aspx

…and have at Tech come & install it for you.

  

FOR TRAINING CLASS:

http://www.tnstate.edu/_testadmin/contents

 

 

 

 

 

 

WEB SUPPORT

 

 

 

 

 

 

 

 

 

LOGIN TO OU

REMEMBER: OU Campus uses your TSU network login and password. So you never have to reset your OU Campus password. But if you login unsuccessfully 3 times into OU Campus, your OU Campus account will get locked and you must request that CIT unlock your account. Just call x7777 and ask for your OU Campus account to be unlocked.

 

KEEP IN MIND: Since the TSU network routinely notifies you to change your password...when you change your network password, you MUST re-boot your PC in order for OU Campus to re-sync with your new network password.

LOGGING IN--

 

TO LOGIN:

  • Go to the homepage for your dept/website.
  • Scroll to the bottom.
  • Click the “Last Modified” link.

If you get one of the following messages when you login, click "Continue to this website" or "I understand the risks".

Description: http://www.tnstate.edu/ouguide/documents/OU_Usage_Guide_web_files/image001.jpg

 

Description: http://www.tnstate.edu/ouguide/documents/OU_Usage_Guide_web_files/image001.jpg

  • Enter your network login and password.

I can't login! Help!

Re-boot your PC...and then try again using your current network login/password.

Just remember to always use your current network login/pass to login to OU Campus.

If you still can't login, contact x7777 or www.tnstate.edu/trackit and ask that your OU Campus account be unlocked.

 

ONCE YOU'RE LOGGED IN:

IF YOU NEED TO EDIT A PAGE:

If you logged into OU Campus via the page that you want to edit, you can click one of the little green buttons to edit your page.

 

IF YOU NEED TO EDIT A DIFFERENT PAGE

Click the little green arrow pointing to the right (to enlarge your file listing)

 

IF YOU NEED TO CREATE A NEW PAGE

Click the little green arrow pointing to the right TWICE (to enlarge your file listing so that you can get the "New" button on the upper right-hand-side.)

More on editing existing webpages

More on creating new webpages

< back to top >

 

 


UPLOADING IMAGES TO OU

 

First, you must have an image file on your PC to be able to upload it into OU Campus.

 

HOW TO PULL AN IMAGE FROM WORD DOC TO USE ON A WEB PAGE 

NOTE: if you have an image that is in a Word document that you’d like to insert onto your webpage, first save the image as an image file by doing the following:

In Word, right-click the image and choose “Save as Picture”.
Save the picture to a particular place on your PC.

(Now you have an image file on your PC that you can upload into OU Campus via the instructions below.)

< back to top >

 

UPLOAD IMAGE WHILE EDITING A PAGE

1.    While editing a page, click on the page where you want the image to be inserted.

2.    Click the "Insert/Edit Image" icon in the editor-menu.
If you get a box that wants you to "Run" software, please click "Run" to do so.

3.    Click the reddish-colored button to browse for your image

4.    Confirm in the file path that is listed that you're in your image directory: "sites / main / myDept / images"
If you're not in your images directory browse for it.

5.    Click "Upload & Edit"

6.    Browse your PC for the image you want to upload into OU Campus. Highlight it and click "Open".

7.    Now you have the opportunity to re-size it....which you'll want/need to do most every time.

 

STANDARDS FOR IMAGE SIZES

- Departmental Homepage Right-hand Boxes: 278 wide

- Web page: 250 wide

- Sizing Tip: 1 inch is approx = 100 pixels (this should help you to re-size properly)

Click "Resize".

Alter the width to one of the above standard sizes.

Click "OK"

Click "Upload As"

Click "OK"

8.    You should now see your image in the listing. Click it.....and then click "Select File".

9.    Enter an "Image Description" (ex: "Students on Lawn" or "TSU Logo")

10. NOTICE THIS:
Click the Appearance tab.
Notice the width and height fields.
NEVER alter width and height here! It will blur your image.
ALWAYS alter the width and height of your image when you're uploading the image like mentioned above.

11. Click "Insert" to insert it onto your web page.
Voila! There it is on your page!

< back to top >

UPLOAD IMAGES OUTSIDE OF THE PAGE EDITOR

1.    Click the tab at the very top entitled “Content” and click “Pages”.

2.    Click into your web folder.

3.    Click your "images" folder to go into it (so you can upload your image into it).

4.    Click the "Production" tab (upper right) because images are stored there (not in Staging)

5.    On the upper right, click “Image/Upload”.

6.    In the box that pops up, browse for your image on your PC, highlight your image, and click "Open".

7.    Click “Upload As…”

8.    Click “OK”….and your image will be uploaded.

9.    You will now have the opportunity to resize your image -- which you usually need to do -- especially if your image is large. (Remember: 250 pixels is recommended for main images on a page.)
Click "re-size" to resize your image. (Remember: 100 pixels is about 1-inch wide)

10. Click "Upload as" to upload your image (this places it into OU Campus into your "images" folder)
Make sure you like the name and press "OK"

11. Voila! Your image is now in your "images" folder.

Do this for every image in your “New_Website_Images” directory that’s for this particular web section…..in order to get all of your images into your web-area so that you can work with them while creating web pages.

When this is completed, click the “Staging” tab in the upper right to return to your webpage-editing area.

NOTE: Images must be uploaded to "Production", not "Staging".

< back to top >

 

USE TSU FLICKR IMAGES ON YOUR WEBSITE

HOW TO DOWNLOAD FROM FLICKR:

  1. First, find the image you like on the TSU Flickr site.
    (Note: If you can’t find an image that suits your department on Flickr, fill out the images request form on this page: www.tnstate.edu/web.)
  2. Click on the image until it is the main image displaying (like shown below).
    You should see 3 dots in the lower right-hand corner (as shown below in the red circle).

 

t

 

  1. Click the 3 dots on the lower right of the image…..and choose “View all sizes”.
  2. Click the link for: “Small 240”
  3. Click “Download the Small 240 size of this photo”
    …and a popup window appears in your browser.
  4. In the popup-window, click the arrow beside “Save” and choose “Save as”.
  5. Choose a place on your PC to save the image to…being sure to name it an appropriate name, and click “Save”.

    (Remember where you saved your image on your PC because you will have to know that in order to insert the image onto your web page in OU Campus!)

 

HOW TO INSERT THE FLICKR IMAGE ONTO YOUR WEBPAGE

First, login and begin to edit your web page…by following these instructions: http://www.tnstate.edu/ouguide/#editing .

Then, to insert an image onto your web page, follow the instructions “UPLOAD IMAGE WHILE EDITING A PAGE”
on this webpage: http://www.tnstate.edu/ouguide/#uploading .

Save and publish your webpage. 

Voila!  You’re finished!  And you have a new image on your web page!

 

REMEMBER THIS FOR RE-SIZING...

Be sure to not resize by altering the dimensions in the "Appearance" tab....or by simply grabbing the corner of the image and re-sizing. Both of these ways distort the image.

t

 

HOW TO RESIZE PROPERLY:
To re-size your image, you always want to re-upload it into OU Campus by choosing “Upload & Edit” (as mentioned above) and re-size while you’re uploading!

Remember, a simple rule-of-thumb is that 1-inch = about 100 pixels.  So if you re-size an image to be 250 wide, it’ll be about 2 ½ inches wide on your web page.

< back to top >


EMBEDDING VIDEOS IN WEB PAGES


If your video resides on another site (like YouTube)...
please log a ticket at
www.tnstate.edu/trackit

Please note on your ticket:

  1. the embed code for the video
  2. the web page it should be embedded on
  3. where specifically it should be embedded on the web page.

 

If your video doesn't reside on another site...
upload it into your "videos" folder. (If you don't have a "videos" folder, just click "New" and "New Folder" & name it "videos".) And then, log a ticket at
www.tnstate.edu/trackit .
Please note on your ticket:

  1. the filename of the video
  2. the web page it should go on
  3. where specifically it should be embedded on the web page.

< back to top >

 

UPLOADING DOCUMENTS TO OU

First, go into your "documents" folder….because you must be in your designated folder in order to upload into it.

On the upper right, click “upload”.

In the "File Selection" section, browse for your file/document on your PC, click it, and click "Open".

Click “Upload”

Click “OK”….and your document will be uploaded.

 

< back to top >

UPLOADING MULTIPLE FILES AT ONE TIME

To upload many files at one time, zip them all up in a zip file on your PC.

Then, in OU Campus….
Position yourself in your documents directory (or whatever directory you’re wanting to upload docs into)
Click “upload” (upper right)
Click the radio button for “zip file”
Browse for the zip file on your PC
Click “Upload”
Click “Extract”

…and the system will upload all your docs into the directory (And of course, they’ll be located in Production, not Staging.)

< back to top >

CREATING A NEW WEB PAGE

Click the “New” button in the upper right of the page to create a new web page.

Note: If you don't see the "New" button, click the little green arrow on the left one or two times until you fully enlarge your file listing. When you've enlarged it fully, you'll see the "New" button on the upper right.

 

Little Green (Collapse/Expand)Buttons:

Description: http://www.tnstate.edu/ouguide/images/LittleGreenArrows.png

 

New Button:

Description: http://www.tnstate.edu/ouguide/images/NewButton.png

< back to top >

Choose the template you desire for your page by clicking the graphic.

Enter the following information to create your new page:

Page Title
This appears on your webpage as its title, on the browser tab, and in the breadcrumb....so make it not cryptic (but just normally-reading English) :)

Description

This is important because it is the description that comes up on Google search results. Just change the part in red to be your department name:

(ex. Campus Life at Tennessee State University, Nashville, TN)

Keywords

These are the words that web-surfers would use in a search engine such as Google. Separate each by a comma.

Put every word that would apply specifically to the page content on the web page you are creating.

Use the following as an example. Just change the part in red to be the items on your specific web page:

(ex: campus, life, Tennessee, state, university, nashville, tn, university, universities, college, colleges, public, school, hbcu, southeast, tennessee state university, tsu, nashville, tennessee, state, public, TN, hbcu, black, international, program, tennessee state, nashville, state, public, african-american, tenessee, tennesee, tennesse, tennese, tenesse,tennese)

 

Author

Put your department's name (ex. Human Resources)

 

New Page Filename

All lowercase

Use short filenames

No spaces

No underscores

Separate words with a hyphen.

Always have the extension “.pcf”.

(ex. campuslife.pcf or contact.pcf)

 

Overwrite New Page

You will probably never check this unless you are replacing a page with the same name that you previously created.

 

New Page Access

Select your group to have access to this page.

 

Press the “Create” button….and wait for it to create your new web page.

*NOTE: Your leftnav will not display your new page until you re-publish your leftnav file (_leftnav.html).

Then, edit your new page by clicking the "Edit" button at the top. Then, start with #5 in the "Edit Existing Web Pages" section below:

 

EDIT EXISTING WEB PAGE(S)
(including the right-hand boxes and leftnav)

1. Pull up your web page in a browser window (IE or Firefox).

2. Look at the bottom of your webpage in the footer and click the link labeled “Last Modified…”

3. A screen pops up. (Note: If you get the error screen, just click the link to continue.)

4. Login to OU Campus (using your normal network login & pass). -How to login to OU Campus

5. You will see little green edit buttons for each section of the web page:

a) leftnav

b) page title

c) page content

d) right-hand box #1

e) right-hand box #2

Click the green edit button for the section you're wanting to edit.

6. Make your edits. (the link button to make new hyperlinks is in the upper-right of the Page Editor)

7. Save (upper left of Page Editor).

8. Review your changes to ensure you have no mistakes.

9. “Publish Now” (green button at top).

10. Click “Publish” button (another little “publish” button at the bottom).

Your change will now be live on the TSU website.

< back to top >

 SINGLE SPACING TEXT

To single-space rather then double-space:

Hold down the <Shift> key and press <Enter>.

< back to top >

EDITING CONTENT

ALWAYS after pasting, click the “Remove formatting” button (top row). This will clean up any mal-formed HTML.

After copying the content into OU, you can then alter the content on the webpage to be accurate.

Click the “Edit” button at the top and wait for the page to render. You will notice green “Edit” buttons.

Click the green “Edit” button for the section that you need to update.

Go to your TSU webpage that has the content. Copy the content directly from the webpage (IE), not from inside of SiteDoc. Paste the content into the OU editor.

**NOTE: Images will appear to copy over fine. But be not deceived. They are referencing our old web server and will display correctly now in OU, but not when we convert the system fully. So you must delete the images that copied over.

< back to top >

DELETE IMAGES THAT COPIED OVER

Delete any images that you copied from your website. And in their place, insert a new image.

**IMPORTANT: Once you’ve copied your content from the old web page into OU, click the “Clean up messy code” button. It’s an icon on the 2nd row, near the right. It looks like a paintbrush.

After clicking it, you may alter your content however you wish. Use the existing fonts to make your Title and Subtitle.

Save your file.

Publish your file (using the large green button at the top).

When you publish web pages, put the date, your name, and the change made. This may help you later to know what edits you last made to the page.

< back to top >

DELETING WEB ASSETS (IMAGES, PDFS, DOCUMENTS, VIDEOS)

 

  1. In OU Campus, click the little green arrows to expand the screen display all the way to the right (as shown in the screenprint below).

    http://www.tnstate.edu/ouguide/images/DeleteImages2.pngDescription: cid:image002.jpg@01CB17A4.C977AD10

  2. Then, click the “Production” tab (upper right)

    Description: cid:image002.jpg@01CB17A4.C977AD10

  3. Browse through your file listing to wherever your document/PDF/image is.
    In your case, look at the link you mentioned….because the link tells you where the PDF is located.  You can see that your PDF is in the “events” folder:
    http://www.tnstate.edu/events/TSU%20Event%20Facility%20Usage%20Policy%20and%20Procedures%20.pdf
  4. So, in your “events” folder, you should see it (if you’re in the “Production” tab as we already mentioned)….and you can delete it.

 

BACK UP FILES BEFORE MAKING CHANGES TO THEM

DO NOT LOSE YOUR DATA!

Before making edits to a file, back it up. On the menu list, in the Column entitled “File”, click the Backup button.

In the box that appears, type the reason you are changing the file. This may come in handy for you later if you have to bring back a backed-up file.

Press “Commit”.

Description: cid:image002.jpg@01CB17A4.C977AD10

 

UPCOMING EVENTS BOX

 

To edit "Upcoming Events", go into the file folder “includes”…and alter the file named "upcomingevents". Be sure not to change the format & spacing. Only alter the text and links because system is using that format to construct the display properly on your page. The "more" button automatically links to a page in your area named "events.aspx"….so be sure you have a page in your dir named that.

< back to top >

MAKING LINKS

Type the text that you want to make into a link.

Highlight the text that you just typed.

Click the link button in the top menu.

Beside the “Link URL” box, use the browse button to browse for the the webpage or document that you're linking to. If you're linking to a document in your web area, then, of course, you have to go into your "documents" folder in order to click on the correct document.

Once you've found the correct page or document to link to, click it.

      However, if your file/PDF/doc is not in the directory because you haven't uploaded it yet:
      Click "Upload".

      Click "Browse" to browse your PC for the PDF that you want to upload.

      Click "Upload".

      Find your document in the listing & click it.

 

Click “Select File”.
Change Target to "Open in New Window".

Click “Insert”.

…and you have your link!

 

 

ANCHOR TAGS

To make a "Table of Contents" of sorts at the top of your page (a set of links to sections further down on the web page), do the following:

 

First, you must name the sections below by bookmarking them (or anchor-tagging them).

So, scroll to the section below on the web page.

Place your cursor in front of the heading for that section.

Click the anchor-icon in the menu and name that place.

For instance, if you had a section further down on your page with the heading of "Publications",
Place your cursor in front of "Publications".
Click the anchor-icon in the menu.

Type the word "anchors" (to name that spot on the page "anchors").

Then, you want to make a link near the top of your page that links to the anchor tag you just made. To do so:

 

Somewhere near the top of your page, type the text for your link....and then highlight your text.

Click the link-icon (chain-link) in the menu.

Choose the anchor tag that you'd like to link to.....and click "Update" at the bottom.

So for our example above, you'd:
Somewhere near the top of your page, you'd type "Publications".

Highlight the word "Publications".
Click the link-icon (chain-link) in the menu.

Choose the anchor tag "publications".

Click "Update".

 

< back to top >

ALTERING LINKS

Just click your cursor anywhere in the text that is a link.
Then, click the link button (chainlink icon) in the menu.

Alter the link-URL to be what you want it to be.

< back to top >

MAKING LINKS TO OTHER DEPARTMENTS' WEB PAGES

First, bring up in a web browser the new website: http://www.tnstate.edu/

Look for the page that you need to link to. Does it even exist yet? If you find it, look at its URL…

 

(For example, if I wanted to link to: http://www.tnstate.edu/records/online_forms.aspx

Notice that the URL contains /records/online_forms.aspx.

So I then know that the web page is in the “records” area in the OU Campus system. And the web page's name is "online_forms.aspx".)

 

Then, in OU Campus, edit the page that you want to put the link on:

 

Type and then highlight the text that you’re making into a link.

Click the link button in the top menu.

Beside the “Link URL” box, use the browse button to browse for the department's directory (records, in my example) within the system. To browse, click “main” in the upper left….and browse for the department's directory. Then browse for the web page's name (online_forms.aspx, in my example) and click it.

(Note: If you were linking to a document in the Records area, you'd enter the Records department's "documents" directory, and find the document to click.

         

Click “Select File”.

Click “Insert”.

…and you have your link!

< back to top >

MAKING LINKS TO EMAIL ADDRESSES

Type and then highlight the text that you’re making into a link.

Click the mail-link button in the top menu.

In the "Recipient Email" box, enter the email address of the person that you're making an email-link for.

In the "Subject" box, enter something like "Web Question".

Click “Insert”.

…and you have your link!

< back to top >

HOW TO CREATE A PHOTO ALBUM

_________________________________________________

HOW TO CREATE A PHOTO ALBUM

If you wanting to create a Photo Album, here are instructions on initial steps to do so.

We’re using JAlbum for any photo albums. You’ll like it a lot. It’s slick…and very easy to use. Directions are below.

Here’s an example of one: http://www.tnstate.edu/x_jalbum/photoalbumcampus/album/ .

DOWNLOAD

Download JAlbum here: http://www.tnstate.edu/cit/web/software/Jalbum-install.exe

Then, install it on your PC. It’s pretty easy to use. If it asks you to publish your slideshow, don’t publish it. What we’ll do is take it from your PC & put it on our server. I’ll work with you on that after you create the slideshow. You just click “Make JAlbum” after you’ve uploaded all the pics. (btw, you can just open a folder that has all of your pics in it & drag them over to JAlbum….to get the pics into JAlbum. Then you just click “Make JAlbum”. Then save it to your PC somewhere. Then upload it

If it ever asks you to sign-in, don’t do that. You’re not wanting to use the online version…b/c it has very limited space. You’re wanting to use the software that you download to your own PC.

Give that a whirl & see if you’re able to use JAlbum.

INSTRUCTIONS

Open JAlbum on your own PC

Add photos

Drag and drop images with images from your computer to the big empty area in the jAlbum application. You can also use the "Add" button in the top left corner. jAlbum will ask for an album name and album description. Tell the story of your album and click "OK".

Choose a skin

Skins are templates that add graphics and functionality to your album. Select a skin for your album in the skin select box. Most skins come in different graphical flavours called styles. Pick a style in the style select box, to create the look you want. You can read more about skins in the skin usage tutorial.

Prepare your jAlbum for the web - Make album

Push the "Make album" button and the jAlbum app will scale your images for the web (without touching your orginals) and make your album.
The album is now saved on your computer. You can preview it with the preview button (magnifying glass) if you want.
If you're not satisfied with the result, go back and make some changes and click the "Make album" again.

COPY ALBUM

Now, with JAlbum open and your album displaying in it, in the top menu, do a “File – Save As” … and save your album onto your PC.

Then, outside of JAlbum go to the place where you saved it (via My Documents or whatever)……and copy the folder named “album”.

Then, map a drive to this location (so you can paste your album to this place):
To map a drive on a PC:
Go to "My Computer"
Click "Tools" & choose "Map Network Drive"
For "Folder: ", enter \\phlox\share2

Paste your album to this place.

If it acts like you don’t have permission or doesn’t paste, let me know. I may need to alter one more thing.

NOTIFY
Log a ticket at www.tnstate.edu/trackit stating which webpage you’d like the PhotoAlbum embedded on & we will embed it for you.

 

 

Upload New Student Catalog

  1. First, on your PC, re-name your new catalog to: Undergraduate_Catalog.pdf  (the new catalog MUST BE named this in order for this to work)
  2.  Login to this page (by pressing "Last Modified" in the footer): http://www.tnstate.edu/academic_affairs/
  3. Click the little green arrow located in the upper left (in order to view your file listing)
  4. Click (again) the little green arrow that points to the right  (above file listing) in order to expand the file listing
  5. In the file listing, navigate into your “documents” directory.
  6. Click “Upload” (upper right)
  7. Go through the prompts to locate the new catalog file on your own PC and upload it into OU Campus. 

Voila!  This page will now point to your new catalog: http://www.tnstate.edu/academic_programs/academic_resources.aspx

(Keep in mind that you may need to clear your browser’s cache in order to see the new catalog.  Instructions are below if you need to do that.

 

_________________________________

HOW TO CLEAR YOUR BROWSER CACHE
The following instructions will clear the old images from your cache. 

First, CHECK WHICH BROWSER VERSION you have by using these instructions:
       https://www.rapidreview.com/support/techdocs/html/browser_version.htm
       (Tak note of which version you have.)
Then follow these instructions based on which version you have.
       http://www.wikihow.com/Clear-Your-Browser's-Cache

(By the way, re-booting your PC will also clear your browser cache.)
A good habit to get into is to re-boot your PC each day.  That way, you’ll know that you are starting with a cleared PC and browser cache each day.

 


 

< back to top >

 

 TROUBLESHOOTING OU CAMPUS

 

Support Page: http://www.tnstate.edu/cit/web/

Breadcrumb

If the breadcrumb for your page is inaccurate, edit the Properties (Props) for your page. Change the Page Title. The breadcrumb comes from the Page Title.


HTML Validation

This site will tell you about all invalid HTML on your page…..content that may not display correctly on every browser in the world. HTML validator: http://validator.w3.org/#validate_by_input


Images

Image already exists” = message that user gets when they are not allowed to upload images to that dir.

Change to a directory that you have access to.

Can't Upload Images – First, check to make sure you're in the "Production" tab & not the "Staging". If you're in "Production", then make sure you're in the "images" folder.


Metadata
(example below):

Page Title: Student Services

Description: Student Services at Tennessee State University –Visit us for all your needs!

Keywords: tennessee state university, tennessee, state, university, nashville, tn, university, universities, college, colleges, public, school, hbcu, southeast, tennessee state university, tsu, nashville, tennessee, state, public, TN, hbcu, black, international, program, tennessee state, nashville, state, public, african-american, tenessee, tennesee, tennesse, tennese, tenesse,tennese)

** Add more words to the above list….words that are specific for your page with each separated by a comma.

 


< back to top >

 

 SHARED WEB CONTENT

 

APPLY NOW! -Invite your web users to apply to TSU right on your page!

Explore TSU for yourself.
Visit us and see the campus,
learn more about life in Nashville,
and discover the heart of our exciting TSU Tiger community.

Apply for admission, request information, or contact Tennessee State University today.

Undergraduate Admissions
P. O. Box 9609
Nashville, TN 37209

888-463-6878 toll-free
615-963-5101
615-963-2930 fax

Graduate Admissions
P.O. Box 9584
Nashville, TN 37209

615-963-5901 voice
615-963-5963 fax
   gradschool@tnstate.edu


< back to top >


 TIPS ON WRITING FOR THE WEB


Writing for the web is different from writing for print.

Tackle each existing webpage this way:

Break long paragraphs into short ones not more than about 5 lines long.

Break long, complex sentences into short ones.

Add at least one subhead….visible when the page opens.

Continue adding subheads every few paragraphs.

Present important points as bullet points.

Tips

Use plenty of titles and break-up mechanisms (like bullet points and italics).

Aim for brevity.

Be wary of too much marketing-speak.

Watch out for font-legibility problems.

Font types, Arial and Verdana, are better for small print.

Write how you speak. (It’s personal & people like it. The web is so technical & this personalizes it.)

Skill in writing still matters….even though it’s brief.

Dark text on a light background is still the easiest to read for long periods.

 

Great Article on Writing for the Web


< back to top >

 

 POLICY

 

 

CIT-Web reserves the right to make any necessary corrections to web pages not abiding by these design and content guidelines and any other issues deemed erroneous for web-publication on our higher-education site.

 

HOMEPAGE

The homepage projects a particular image of TSU. Departments may not interrupt this image-projection by insisting that certain content be present on the homepage.

< back to top >