ektron 101: the basics - hamline university web viewprogram pages are one of the more ... above...

EKTRON 101: THE BASICS

Table of Contents

INTRODUCTION...........................................................................................................................................................2

TERMINOLOGY............................................................................................................................................................2

WHY DO SOME PAGES LOOK DIFFERENT THAN OTHERS?..........................................................................................5

LOGGING IN................................................................................................................................................................8

Choosing an edit mode.........................................................................................................................................10

Edit in context mode (easy editing).......................................................................................................................10

Edit mode (advanced editing)...............................................................................................................................11

TEXT EDITS................................................................................................................................................................13

Adding and changing text.....................................................................................................................................13

Adding headers.....................................................................................................................................................14

Font colors............................................................................................................................................................14

LINKS.........................................................................................................................................................................15

Creating a link.......................................................................................................................................................15

Removing a link.....................................................................................................................................................18

UPLOADING A PDF OR DOCUMENT..........................................................................................................................19

HOW DO MY CHANGES APPEAR ON THE SITE?.........................................................................................................22

RESOURCES...............................................................................................................................................................23

Questions?

Marketing Communications [email protected]

mailto:[email protected]

INTRODUCTION

Ektron CMS400.NET is a web content management system that Hamline has purchased to create, edit, and organize web pages.

A web content management system is a computer application designed to simplify the publication of web content to websites and mobile devices, allowing content creators to create, submit and manage content without requiring technical knowledge.

The web teams in Marketing Communications and Information Technology Services work together to manage the Hamline website in Ektron and to provide access to, training for, and best practices in web design and web content management.

Marketing Communications and Information Technology Services rely on assistance from web editors across the university to assist with building and updating specific pieces of the university website.

Some web editors are Hamline employees whose job duties include website management for their particular department or school. Other web editors are volunteers who assist the department’s primary web editor with small updates.

TERMINOLOGY

Web terminology is complex and can be a mystery to first-time web editors, especially because terms can vary based on the content management system AND the way the website has been designed. Here are some helpful definitions for terms you will hear in the context of Hamline’s website.

Common web terms

Page: An individual page within either the website or a section site.

URL: Also known as the address of a particular page. This is the “www.hamline.edu.....” text in the address bar of your browser.

Browser: The particular application you are using to view a website. The most common browsers are Internet Explorer, Firefox, and Chrome.

Link: A word, phrase, or image that takes you to another page when clicked.

Page elements

Hamline webpages are built using individual blocks of content, which sometimes have their own unique terminology. Please see the screenshot below, it points out the names of many of these elements.

NOTE: Some of these elements you will be able to edit – some you will need to contact Marketing Communications or your office’s primary web editor for assistance.

Right Menu: The list of links that appears on the right column of a section site. Marketing Communications must make any changes or additions to your right menu. The individual links in the menu are called menu items.

Top Menu: The ever-present horizontal drop-down of links at the top of all Hamline webpages. Marketing Communications has control over the top menu.

Title Bar: The colored bar across the top of the page that displays the department name. This is required on all pages.

Main Content Block: A block that holds the main text and content of the page in the middle column.

Contact Us Block: The box that appears below the right menu that includes address, email, and phone contact information for the department.

NOTE: The contact us block is actually the same piece of content on all pages in your website – if you change the text on one page, that change will appear on all other pages automatically!

Banner: An image or series of images that live at the top of Front Page and Program Page types. Program Page banners include text and links to other areas of that office’s site. Banners are required on Front and Program pages.

Feature Box: Small boxes that appear along the bottom of a Content, Front, or Program page. These are designed to help promote announcements, events, etc. and require a pre-sized image, text, and a link to the featured page. These are optional.

Form: Also referred to as a webform. A form is a series of fields on a page that users fill out and submit. The most common is a web-to-email form where the user enters content that generates an email to a Hamline person or office.

News list: A listing of news items, generally from the Hamline Newsroom or Inside Hamline.

Events list: A listing of events from the university events calendar.

WHY DO SOME PAGES LOOK DIFFERENT THAN OTHERS?

There are several different page layouts that have been created for Hamline University. Sometimes web editors can use different page layouts (also called page types) to change the appearance of a page.

Generally speaking, these page types are all made up of the same blocks or pieces, just laid out in a different way.

NOTE: The page type will NOT affect how you make basic edits to the text!

Content Page

The majority of the pages you will encounter are content pages. Content pages are the simplest page layout and contain fewer design elements than other pages.

Example of a content page:

Note: Sometimes content pages will have a photo at the top of the middle column.

Program Page

Program pages are one of the more complicated page layouts in the Hamline website. Not only do they have a program banner spanning the top of the page, but they also have a row at the bottom of the page that hold special blocks of content. Program pages were also designed to function as department or office homepages. They should be used sparingly for that purpose.

Example of a program page layout:

Front Page

Front page layouts look much like a content page, except that they have a long and skinny photo across the top of the page (a front banner).

Front pages were designed to be used for a department or office’s homepage. They should be used sparingly for that purpose.

Example of a front page layout:

Other pages

These are the three most common page types in the Hamline website. There are many other page types that you might encounter:

School pagePolicy pagePortal pageBlank page

News itemAthletics pageHome page

LOGGING IN

Ektron can be accessed at http://www.hamline.edu/login.aspx You can save this as a Bookmark or Favorite in your web browser for easy access, or you can always find a link by going to the Faculty & Staff page and looking under the Logins section.

Enter your Novell Username and Password in the appropriate fields and click the Login button.

You will be taken to a page with three buttons: logout, workarea, and preview.

For now, don’t click on any of these buttons!

The only time you’ll need to click on one of the above buttons would be when you need to upload a PDF or Word document. Please skip down to Uploading a PDF.

Getting to the page

The easiest way to make text, link, and image edits is by navigating to the actual page you want to change. If you know the URL of the page you want to edit, type in the URL in your address bar. If not, go to the homepage and navigate to the page you wish to edit.

The page will take a moment to load in edit mode. You will know it’s ready when you see silver access points ( ) appear on the page.

How do I get into edit mode?

Silver access points appear in the top left corner of content blocks that you have permission to edit. Hovering your cursor over the silver access points displays a dropdown menu that you will use to access edit mode:

http://www.hamline.edu/login.aspx

Choosing an edit mode

When you hover your cursor over one of the silver access points, a dropdown list should appear. There are many different options, but only two that you will ever use: edit in context and edit:

Edit in context: this is the “easy editing” option. In this mode, you make your changes right in the page. In this mode, you can:

1. Edit text, including bolding and italicizing2. Edit links3. Add a photo

Edit: this is the “advanced editing” option, with many more text editing options than you get with “edit in context.” The content block will open in the Ektron workarea in a new window. The text and images appear in a WYSIWYG (“what you see is what you get”) editor, similar to Word.

We suggest that you stick to the easy editing option (edit in context), unless you can’t make your change with the available editing options.

Edit in context mode (easy editing)

Once you’ve selected Edit in context, the page will refresh to display the editing options at the top of the content block:

These options include:

SaveSpellcheckCreate LinkBreak Link

Insert ImageBoldItalicize

Cancel

Your editing options in context are limited. You can add or change text, make or break a link, upload and add an image, and bold or italicize text. Any other changes will need to be made in the workarea by choosing edit mode.

Edit mode (advanced editing)

When you hover over the silver access point and choose Edit, you’ll have access to more text editing options than you get with Edit in context.

The content block will open in the Ektron workarea in a new window. The text and images appear in a WYSIWYG (“what you see is what you get”) editor, similar to Word:

Saving your changes

At the top of the page, you’ll see a gray toolbar with the following buttons:

This is how you will save your changes once you’ve made them. There are three important buttons:

Publish ( ) will save your changes and close the window. You will be redirected to your page, which will refresh and display the changes you have made. When you Publish, your changes will go live within ten minutes or less.

Save ( ) will simply save your changes but not close the window. Save regularly to prevent loss of data.

Cancel ( ) will cancel any changes you have not saved and close the window.

You will also see several tabs underneath the gray toolbar. You should always work in the Content tab:

The WYSIWYG editor

To make edits in the advanced editing mode in Ektron, you will use the WYSIWYG (What You See Is What You Get) blue toolbar:

There are many more buttons here than you will generally ever need or want to use. The important buttons for you to locate are, from left to right:

Spellchecker

Insert Link

Remove Link

Add Header

Bold

Italic

Numbered List

Bulleted List

TEXT EDITS

Adding and changing text

NOTE: You can add and edit text in either Edit in context or in Edit.

Type in text

Place your cursor in the content block and start typing. You can highlight words or phrases and click the Bold or Italicize buttons to add formatting.

Copy and paste text from an outside program:

1. Copy or cut the content you want to paste2. Right click in the page where you want to paste text3. Select “paste plain text” 4. A popup window will appear: paste your content here and click OK.

Why do I have to choose “Paste plain text?”

Microsoft Word and other outside applications add a lot of invisible coding to text. This coding will get pasted along with your content into Ektron. This results in a number of issues with your text; the font and styling will not follow Hamline brand guidelines, you will be unable to change the font and styling on the text, the Word coding will break other elements on the page, your text and copy will no longer meet accessibility requirements for certain browsers and screenreaders, etc.

Any text additions or edits you make must follow Hamline’s editorial guidelines. Please keep a copy of the guide with you when you work on your website. You can find a copy of the guide at www.hamline.edu/styleguide/.

http://www.hamline.edu/styleguide/

Adding headers

NOTE: You can add headers only in Edit.

Headers are an important aspect of your content because they allow a viewer to scan text quickly and easily. They also are clues that search engines like Google look at to understand what your page is about.

There are three sizes of header available in Ektron:

Header 1 The largest header size, this should only be used ONCE on every page as the “title” at the top of the main content block.

Header 2 Can be used multiple times within the main content block. It is especially good when used as a subhead for dividing content into sections that contain multiple subsections

HEADER 3The smallest header size, this appears in all capital letters. It can be used multiple times within the main content block, or as the primary header for contact or related links blocks.

To format text into one of these sizes, follow these steps:

1. Highlight the text you would like to resize

2. Click on the Apply Style box. You’ll see the options pictured.

3. Click the appropriate header size.

4. You can also select the “Normal” setting from the drop-down box. This will turn larger sized text back to the default size.

Font colors

All font colors have been precoded by Marketing Communications to be consistent with Hamline’s brand. Changes in font color should not be made by web editors, as this will disrupt the color uniformity built throughout the site.

LINKS

NOTE: You can add and remove links in either Edit in context or in Edit. The process is the same in both modes.

Creating a link

There are three different types of links you might want to create:

1. Link to a page2. Link to a file3. Link to an email address

LINK TO ANOTHER PAGE

1. Highlight the text you want to link, then click on the Hyperlink Manager ( ). The Hyperlink Manager box will appear.

2. Copy and paste in the URL of the page you want to link to in the URL field:

3. If you are linking to a non-Hamline page, please select New Window in the Target drop-down.

4. Click OK.

LINK TO A FILE


2. Click on the gray button with the three dots to the right of the URL field:

3. In the popup window that appears, there’s a dropdown field in the middle of the upper gray bar – make sure that “Files” is selected:

4. Navigate to the folder your file lives in and double-click.

NOTE: The folder structure was created to be as intuitive as possible, so if you aren’t sure where your file lives, please contact the primary web editor for your area.

5. Double click on the file.

6. When the Hyperlink Manager window appears again, select New Window from the Target drop-down:

7. Click OK.

LINK TO AN EMAIL ADDRESS


NOTE: When possible, type out the actual email address as the link text. Many people use web-based email clients these days, including Hamline students. A web-based email client will not automatically open an email address link in a new email like GroupWise does.

2. At the top of the Hyperlink Manager window, click on E-mail:

3. Type in the email address in the Address field and click OK.

Link best practices

Using keywords in your links is one of the most important things you can do for search engine optimization. If you are linking to a page within your site, think about what keywords apply to that page, and use them in the link text.

Do not use “Click here” for your link text! There are two main reasons for this:

1. Imagine you are a normal web visitor, scanning down a page with a lot of links. How do you know at a glance which link you want to click on if they all say “click here”?

2. Google the words “click here” and look at what kinds of results you get. This is to demonstrate how link text informs search engines – if you are trying to optimize your pages or documents for search engines, using “click here” is not doing you any favors. Use your keywords instead!

Finally, if at all possible, type out any email addresses that you would like to link to. Remember that many web-based email clients, including Gmail, will not open a new message when someone clicks on an email link. Spell out the email address to make it easier for students to copy and paste your email address into a Gmail email message.

Removing a link

To get rid of an existing link, click on it and select Remove Link ( ).

If this button is grayed out when you click on the link, you may need to select Hyperlink Manager ( ) first and click Cancel. This should make the Remove Link appear for use.

UPLOADING A PDF OR DOCUMENT

Whenever possible, new text and information should be added to the website in pages instead of by uploading PDFs and other documents. However, when this is not possible (as in the case of paper forms or handbooks), uploading a PDF is the best option.

1. Follow the instructions for Logging in.

2. When you arrive at the screen with the three buttons, click on the Workarea button:

This will open the same editing workarea that you see when you choose the advanced edit mode to edit content, but with a blank right half of the screen.

3. In the upper right hand corner of your screen, you will see a series of tabs:

4. Select the Content tab.

5. You should see some folders listed in the far left column. You will need to navigate through these folders to get to the appropriate folder to put your document in:

The folder structure was created to be as intuitive as possible, so if you’re not sure where to upload your document, please contact your primary web editor or the Marketing Communications team at [email protected].

6. Click on the appropriate folder (which should be titled “Documents”) you want to upload your document to. You’ll see a gray toolbar at the top of the right-hand panel of the screen. This gray toolbar is where you will find the button for uploading documents:

7. Click on the Add assets ( ) button. This allows you to upload files from your computer into the folder.

DO NOT use this to upload images – contact your primary web editor for assistance.

8. The Document Management System pop-up will appear. The DMS functions in a different way depending on what browser you’re using:

a. Internet Explorer 8 has the most convenient upload system for uploading multiple documents to a folder. You can browse through your computer and check a box next to each file you want uploaded:

You can also upload a single document by choosing the default “File Upload” button.

b. Firefox 3.16 also has a drag-and-drop multiple document upload system, although you will be prompted to download and install an add-on:

mailto:[email protected]

You can also upload single files.

c. Google Chrome only allows single file uploading:

9. Once you have your file(s) selected, click the Upload button.

Overwriting an Existing PDF or Document

1. Go to your Documents folder in Ektron and click on the asset you want to replace

2. Click the Edit button

3. Click the Choose File button and browse to your new file (The file you’re uploading must have the same name as the existing one)

4. Click Publish ( ) in the upper left corner to save your changes.

HOW DO MY CHANGES APPEAR ON THE SITE?

Any time you make a change to a piece of content and click Publish (in the advanced Edit mode) or Save (in the easy Edit in Context mode), Ektron makes that change on any page where the content piece appears.

The Synchronize (or Sync) process occurs once every hour. Ektron will find and deploy all Published/Saved changes to content.

RESOURCES

Brand identity guidelines

It is important to make sure the university website meets the brand identity guidelines established by Marketing Communications. This includes:

Any text additions or edits Use of the logo and other images Typography and color

Please refer to the guide when you work on your website. You can find a copy of the guide at www.hamline.edu/styleguide/.

List of web editors across the university

Marketing Communications will maintain an updated list of web editors online at the Ektron training website. Other web editors can then direct questions to the appropriate person.

Requesting assistance

If you find that you need help with your website, your first contact should be your area’s primary web editor. Primary web editors have received complete Ektron training, and should be able to handle most issues that come up.

If you are a primary web editor in need of assistance, the Web Team is happy to help. Simply fill out the web project request form at www.hamline.edu/webrequest. Please be as specific as possible about what you need done, and make sure to allow a few days for assistance.

http://www.hamline.edu/webrequest

http://www.hamline.edu/styleguide/

Piperline directory information

All listings of faculty and staff on the web are pulled directly from Piperline, so it is important to make sure that your department’s Piperline directory listing is accurate and up to date.

Individuals should maintain their directory profile information by logging in to Piperline and choosing the Personal Information tab.

Departmental lists are maintained by a section “owner.” To find out who that person is in your department, please check with your supervisor or contact Human Resources.

Directory images are managed by Web Services. If you would like to have a new photo uploaded into Piperline, please submit a web request form at www.hamline.edu/webrequest and follow the instructions on emailing your photo to our staff.

http://www.hamline.edu/webrequest