Skip to Content - Skip to Navigation

Intermediate-Level Training for Web Maintainers: Session Outline

Before We Get Started

Review

Covered in “The New Basics”

  • Login
  • Updating existing pages
  • Posting News
  • Posting Events
  • Getting Help and Contacting the Web Team
We’re presuming you’ve been using these skills and that you are comfortable with them.

In This Session

  • Creating New Pages and Sections
  • CMS Navigation and Menus
  • Section Home Pages
  • Resizing Images for the CMS
  • Using Other File Types
  • Top Five Web Team Tips

Creating New Pages and Sections

  • On our CMS, Folder = Section
  • Generally, new pages go in existing sections (not your home folder)
  • You can also add new subsections to existing sections

Create a New Folder

  • Go to the “For Students” folder in “Webology ___”
  • Create a new folder and name it after yourself (e.g., “Joe”—no apostrophes, please)

Add a Content Block

  • Go into the folder you created and create a new content block
  • Name it “___s Internships” (e.g., “Jens Internships”—avoid apostrophes)
  • Cut and paste the content from the first section of the Word doc
  • Remember, in Ektron, pages are made of content blocks

Content Block Tips

  • Choose a meaningful title (if possible, use keywords someone might search for)
  • Write a summary
  • Always use Paste Text to paste from Word
  • Use styles for Consistency and Google Findability

CMS Navigation and Menus

Navigation: All the links, labels, and other elements that provide access to pages and help people orient themselves while interacting with a given website

Navigation Includes

  • Menus
  • Labels
  • Page titles
  • URLs
  • Link Text
  • Breadcrumbs
  • Search Box
  • A–Z Index
  • Site Map
  • Image Maps
  • Linked Images

Navigation Answers Two Basic Questions

Where am I?

Where can I go?

  • We need to answer these questions on every page, in a consistent way.
  • Every page sets expectations for the whole site.

How the Menu System Works

  • Websites are made of sections (folders)
  • Sections contain
    • Pages
    • Other sections
  • Every section has a section home page

Three Ways to Move

  • Down—Through the menu
  • Up—Through the breadcrumbs
  • Across—In the body of the page

Add Your Page to a Menu

  • Add your page to the menu in the folder above (“For Students”)
  • When a folder has one item, it doesn’t need a menu
  • When there’s no menu in a folder, we show the menu from the folder above.

Create Another Page

  • Use the second section of the Word document
  • Apply styles
  • Preview
  • How do we reach this one?

Adding a Menu

  • View —> Menu
  • Click the +
  • Give it a name
  • Add pages (including the section home page)

Do

  • Check for other menus first
  • Put every page on a menu

Don’t

  • Have more than one menu per folder
  • Edit the names of menu items (change the page titles instead)
  • Put non-webpages on the menu (no Word docs)

Section Home Pages and Navigation Pages

Section Home Page Can Be:

  • Just Content
  • Navigation
  • Content and Nav

Navigation Page Can Be:

  • Table of Contents
  • Collection
  • Free Form

Table of Contents

Pros

  • Easy to make
  • Completely automatic

Cons

  • Can change the URL of your page
  • Alphabetical order only

Collection

Pros

  • Display in any order
  • Mostly automatic
  • Doesn’t change page URL

Cons

  • A little harder to set up
  • Can’t preview until published
  • Need to remember to add new pages to collection

Free Form

Pros

  • Can create a more usable and unique presentation

Cons

  • “Unique” might mean harder to use
  • More work to maintain
  • Not automatic at all

Additional Navigation Bits and Pieces

  • Headlines: short title on menu, long title on page
  • “Learn More” box
  • Ask Web Team to create breadcrumbs

Resizing Images for the CMS

Digital Images Have Two Kinds of Size

  • Dimensions: Height and width in pixels
  • File Size: Size in KB or MB

They are separate—a picture from your camera is too big in both ways

Resizing

  • Chose the right file type
  • Change the dimensions
  • Save for Web (compress)

File Types

Photographs

  • JPG

Line Art (Solid Colors)

  • PNG (usually smaller)|
  • GIF (for transparency)|

All of these formats are compressed for web use. Using the wrong file type for your image can result in an image that is too big, too grainy, or both.

Dimensions

Always use 72 dpi

Standard widths:

  • 550px (full page)
  • 270px (half page)
  • 200px (for news posts)
  • 130px (for thumbnails)
  • Height can vary

Save for Web

  • Lots of options here to set compression level
  • It’s easier to use www.resize2mail.com or another on-line service

On the Web, HTML is best

  • Understood by everyone on the Web
  • Faster
  • Better searched by Google
  • Automatic printed versions
  • 1 in 10 users doesn’t have Adobe Reader
  • 1 in 10 doesn’t have Office

If You Must Use Non-HTML

  • Load them into the Content area of the workarea
  • Set a title and summary
  • Don’t put them on the menu

If you must update PDF and Office Docs

  • Don’t make a new content block—that will create a new URL
  • Open the old content block for editing and “browse” to choose a new file from your computer

Top Five Web Team Tips

Use a Quicklink Every Time

  • If it is on the CMS, use a quicklink—otherwise, you risk broken or untestable links
  • Where is it? (examples)
    • URSA: Registrar
    • Academic Calendar: Registrar

Avoid Insider Abbreviations

  • Outsiders (our audience) don’t know what they mean
  • Screen readers may try to pronounce them
  • Users searching the web won’t search for our local abbreviations

Avoid URLs in Text

  • Hard to read
  • Don’t always suggest what’s on the other side of the link
  • Missing an opportunity to feed keywords to Google
  • Printed versions print out the URL

Only Use mailto: Links on E-mail Addresses

  • E.g., “e-mail Joe Bloggs (jbloggs@iup.edu)”
  • Breaks expectation that links to go pages
  • Many users (especially students) use webmail and can’t use mailto: links
  • Writing out the e-mail allows easy cut and paste

Use Good Headlines for News Items

  • Good headline tells the story alone
  • Get keywords in the title—it’s the best place for them
  • Don’t: “Jones Publishes Article”
  • Do: “Jones Publishes Solution to Global Warming”

Summary

  • Creating New Pages and Sections
  • CMS Navigation and Menus
  • Section Home Pages
  • Resizing Images for the CMS
  • Using Other File Types
  • Top Five Web Team Tips

Step-by-step directions are available at www.iup.edu/web/howto

  • Web Team
  • Sutton Hall, Room 316
    1011 South Drive
    Indiana, PA 15705
  • Phone: 724-357-3062
  • Fax: 724-357-5512
  • Office Hours
  • Monday through Friday
  • 8:00 a.m. – 12:00 p.m.
  • 1:00 p.m. – 4:30 p.m.