Ektron Advanced

1

The Center for Instruction and Technology Last Updated: March 14, 2014

Ektron Advanced

Learning Objectives This workshop introduces you beyond the basics of Ektron, the USF web content management system that is being used to modify department web pages. This workshop focuses on using the full Edit features, and is designed for those who have already taken the Ektron Basic User course.

Table of Contents

• Edit Mode • Accessing the Workarea • Create a new content page • Copy and paste text from external source • CSS styles and Templates • Uploading Images and Files • Edit navigation menu • Change menu items order • Versions • Add Forms • Content Status

Getting Started

All of the following web browsers can be used to make edits to your web pages.

PC MAC Firefox: http://www.mozilla.org/en-US/firefox/new/

Firefox: http://www.mozilla.org/en-US/firefox/new/

Chrome: https://www.google.com/intl/en/chrome/browser/

Chrome: http://www.google.com/mac/

Safari: http://support.apple.com/kb/DL1531

Safari: http://www.apple.com/safari/

Internet Explorer: http://windows.microsoft.com/en-US/internet-explorer/download-ie

2


Get Connected to Ektron Ektron is a web-based content management system, so nothing needs to be installed on your computer. You can access Ektron anywhere at any time to update your web site. For this course, simply open your browser, login to sample page https://rock.usfca.edu/training2.aspx. (This is the development server, and is used for this training only. You will be accessing www.usfca.edu to update your web site.)

Log-In

1. Go the USF web page you want to edit and scroll to the bottom of the page. 2. In the lower left corner of the page, click on the ‘Change the World from Here’ link and enter your

credentials. 3. Log in with your USF Connect username and password. 4. Refresh your browser.

Click “CHANGE THE WORLD FROM HERE”

3


Accessing the Workarea

1. Mouse over the little blue dot shown above the page content. Select Workarea from the drop-down menu.

2. Or, scroll to the bottom left corner of the page and choose the Workarea link

3. Click on Content tab to display folders in your site structure.

You can only access folders for which your system administrator has granted permission. Create a New Folder

1. Click the directory within which you want to

create a folder. 2. Click New > Folder. 3. Enter a Folder name. 4. Click Add Folder to create new folder.

Click “Content”

Click “New” and then “Folder”

4


Create New Content

1. Navigate to the folder where you want to create your new content. 2. Click New > HTML Content. 3. Enter a Title for your page. (Contents in Ektron are referred by the Title, it is the name of your page and

is also your navigation link text.) 4. Choose the Metadata tab, enter a Page Name for the page (Page name appears before the content on

interior pages.) 5. Create content in the editor under the Content tab.

6. Click to Check-in or Publish when you are finished. (Save will save the changes for your current session.)

DO NOT use the Cancel button as it will close your content and leave the item checked out. If you do not check-in your file, other staff will not be able to make further edits to the same file (Please note that Preview is not available when page is created).

Copy and Paste Text from External Source It is recommended to paste unformatted (Paste Plain Text) text into Ektron. Ektron has 3 options for pasting text from an external source: Paste, Paste from Word and Paste Plain Text. Paste

1. Click the Paste icon to paste the copied content into the document.

2. Click OK and Save.

Paste from Word 1. Click the Paste from Word icon. 2. When the Paste from Word dialog window opens, paste the copied content into the box. 3. Click OK and Save.

Paste Plain Text

1. Click the Paste Plain Text icon to paste the copied content into the document. 2. Click OK and Save (Please note that you will lose any formatting and links).

Publish

Check-in Save

Help

Paste

Paste Plain Text

Paste from Word

Do not use!

5


View

At the bottom of the Edit Content window, you can choose to view in Design or Code view. It is recommended that you stay on Design view if you are not familiar with HTML.

Applying CSS

Applying USF styles to your content is important to keep a consistent look University wide. While you are in the Edit Content mode, highlight text and from the Apply Style or Paragraph Style drop-down, choose the style you would like to apply. (Read about the official USF CSS Style Guide listed on the last page of this handout.) You can also make use of the ready Formatting Style Header 1- Header 5. Tips:

• Use text_intro_big for the first sentence of a homepage.

• Use text_intro for first paragraph of interior pages or second paragraph of a site home page.

• text_callout aligns your selected content to the right and adds in the dotted green bar.

• text_callout_yellow encapsulates your content to the right in an yellow box and spans 50% of the content area.

• text_callout_green encapsulates your content in a green box that spans the width of the content area.

Walkthrough: 1. Create four paragraphs – example: Header, Subhead, paragraph1, paragraph 2. 2. Select Header text and from Apply Style drop-down menu > choose text_intro_big. 3. Select Subhead text and from Apply Style drop-down menu > choose text_intro. 4. Preview your changes to ensure formatting is correct. 5. Publish your page when desired look is achieved.

Design HTML Code

6


Templates Templates are set up by Web Services for each department or office at the Folder level. To apply different templates for your page, do the following:

1. In the Workarea, choose Content and navigate to your page. 2. Choose Edit, select the Template tab.

3. Choose the desired template from the drop-down menu. 4. Preview to page. 5. Click Publish or Check-in.

Adding Images

Web Communications and Services have provided an image library for use on the web site. These images can be found in Ektron Library.

1. Navigate to the Images folder found at the root of the folder structure. 2. Select to view images in the Approved folder. Folders have been created for different images sizes.

(Please note that these folders are periodically updated with new images. If you would like assistance modifying (color correct and optimize the images for the web) one of your own images, please email [email protected].)

Upload Images

1. Edit your image in a graphic editing application such as Photoshop or Photoshop Elements. 2. Make sure the image is sized correctly to the dimensions you will need on your web page. 3. When saving, choose to optimize for the web. 4. In Ektron, go to the Workarea and choose the Library tab. 5. Navigate to your site image folder. Make sure you are selecting Images on the right hand pane. 6. Click the Add button at the top. 7. In the Title field type in name of your image. 8. Browse for the image on your computer. 9. Click Open. 10. Click Save.

You should now be able to edit your web content and add your image.

“Templates” tab

7


Replace Images

To replace an old image, do the following. You must have access to do this. Please check with [email protected]:

1. Edit your image in a graphic editing application such as Photoshop or Photoshop Elements. 2. Save your revised image with the existing file name, and put it on your desktop. 3. In Ektron, go to the Workarea and choose the Library tab.

4. Navigate to your site image folder. Make sure you are selecting Images on the right hand pane. 5. Click on the image that you’d like to replace. 6. Click the Overwrite button.

8


7. Click the Browse button to locate your revised image (in this case, bike.jpg on your desktop) and choose the Update button.

8. A warning message appears. Choose OK to continue. (Please note that the filename of the local copy will be changed to match the existing filename in order to ensure web links do not break.)

Note: Library items are not versioned.

Find Out Where an Image is Linking To

To see where an image is linking to, do the following: 1. Edit your image in a graphic editing application such as Photoshop or Photoshop Elements. 2. Save your revised image with the existing file name, and put it on your desktop. 3. In Ektron, go to the Workarea and choose the Library tab.

4. Navigate to your site image folder. Make sure you select Images on the right hand pane.

5. Click on an image to select. 6. Click the Link Search icon. 7. You will then see a list of files that reference this

image.

Upload PDF 1. In Ektron, go to the Workarea and choose the Library tab. 2. Navigate to your site folder where you will store your pdf. Make sure you are selecting Files on the right

hand pane. 3. Click the Add button at the top. 4. In the Title field type in name of your PDF. 5. Browse for the file on your computer. 6. Click Open. 7. Click Save.

You should now be able to link to your PDF from your web content.

9


Replace Existing PDF

To upload a revised PDF to replace an old, do the following:

1. Edit your PDF file. 2. Save your revised file with the existing file

name, and put it on your desktop. 3. In Ektron, go to the Workarea and choose

the Library tab on top right. 4. Navigate to your site folder. Make sure

you select Files on the right hand pane. 5. Click on the file that you’d like to replace. 6. Click the Overwrite button. 7. Click the Browse button to locate your

revised image (in this case, test.pdf on your desktop) and choose the Update button.

8. A warning message appears. Choose OK to continue. (Please note that the filename of the local copy will be changed to match the existing filename in order to ensure web links do not break.)

Note: Library items are not versioned.

10


Add Menu Items

Menus require a certain level of permission to access and modify. The left or horizontal navigation menus are typically for a School/Division. Most have non clickable headers, with one level of navigation. Sub navigation is displayed on the right and can have three levels.

Walk-Through:

1. To add to the navigation menu, click Add. 2. Select Submenu, and click Next. 3. Enter Title. (Title is the name of your page and is your nav

text.) 4. Click the SAVE icon. 5. If you wish to add a content item under the Submenu, click

Add under the Submenu. 6. Select Content Item, and click Next. Check the box next to

the desired content (choose the page you published earlier).

7. Click the Add button to finish.

Non-Clickable Submenus/Headers

Content Items

11


Reorder Navigation Menu Item

1. To edit the ordering of the navigation menu, choose and expand the Menu tab in the Workarea. Navigate to the menu.

2. Choose Reorder from the pop-up menu. 3. When all menu items are displayed in the list

field; select the desired file; use the button to move it up or down the list.

4. Click to update or to cancel.

Add Sub-Menu Item on Right Navigation Bar

The right navigation menu would be managed mostly by the department’s administrative assistants. The menu displays deeper levels of the menu listed on the left navigation. It is comprised of sub-menus and content items, which are indented as bullet lists. Menu can be expanded to display up to 3 levels deep. Walkthrough: I. Add a New Submenu

1. From Workarea, choose Content tab. 2. Navigate to the parent folder ‘Training’ on the left. 3. From View, choose Menu to display all menus. 4. Click the Add New Menu icon (Please note that Web Services will create all menus for production web

sites). 5. Enter Title. 6. In the URL link field, click the Browse button to select the content item you want to link to. 7. Check the box next to the file, and then click the Save icon. 8. Click the Save Menu icon again.

12


II. Add a New Content Item under the Submenu 1. Choose View > Menu. (Navigate to the menu you wish to add content items to, or you can continue from

the previous step.) 2. Click the Add Items icon. 3. Choose Content Item. Click Next. 4. Check the box next to the file, and then click the Add icon. 5. Now you should see a content item under the new subfolder.

III. Remove Content Items in Submenu 1. Choose View > Menu. (Navigate to the menu you wish to add content items to, or you can continue from

the previous step.) 2. Locate the menu item you would like to remove. 3. Click on the Remove Item icon (Please note that there is also a Delete button. This button will remove the

item from the menu and delete the content completely from the web). 4. Check the box next to the selected item to remove, and then click the Remove icon again.

13


Versions Ektron saves a new version every time a content item is checked in or published. The ability to restore content is a privilege granted by the system administrator. In order to use this feature you should see a Restore icon on the View Content History screen.

1. Click to open your content item. 2. Click on the blue dot and choose

View History from the drop-down menu.

3. Or from the Workarea, navigate to your file and click the History icon.

4. Click on the Last Edit Date link to view file version. (See section on View Difference of Versions).

5. Click the Restore icon to restore to the desired file.

6. Click View Publish, then click View Stage and click Publish again.

14


Create a Form Creating forms in Ektron is very easy. All you need to do is to bring up the step-by-step Smart Form wizard and follow along. You will be asked to give your form a Title, then build a content page using the form features on the edit toolbar, and finally compose a confirmation message. To access results of your form, you will simply click on the View Report icon and get your results on the screen or download data to an Excel spreadsheet for further analysis. Walkthrough:

1. In the Workarea, choose Content, navigate to the folder where you want to put the form.

2. Choose New > HTML Form/Survey. 3. When the smart form window opens up, choose the

default option- Blank Form (you can also select a pre-built form and modify to your needs).

4. Click Next. 5. Enter a descriptive Title for your form, and click

Next. 6. Skip this step for now: Assign Task to 7. Click Next. 8. When the Response window opens, type in the

display text. (This is the text after the user has clicked the Submit button.) For instance, you can type”Thank you for your information. For inquiries, please contact our office at 415-422-9999.”

9. Click Next. 10. You will get a confirmation that your form setup is

complete now. Click Done. 11. You are being taken back to the edit form window.

Start putting your form elements in. When you are finished, click Publish or Check-in.

12. To create a text field, click the Text Field icon.

15


13. Enter a Descriptive Name, and then click OK. 14. Create an Email field using the Text Field icon, and then enter Email.

Under Validation tab, choose Email address (required). 15. To create a drop-down menu, click the Choices Field icon. Then click OK. 16. To create a check box, click the Checkbox Field icon. Then click OK. 17. When you are done, click on the Metadata tab, enter a Page Name for your form. 18. Click the Templates tab, from the Template Selection drop-down menu, select the appropriate form

template. 19. Click Check-in or Publish when you are done.

Edit Form Properties - Email Data Option

1. To send submitted data to an email address, select the form. 2. Click the Edit Properties icon to edit form properties. 3. Under the Form Properties, check the Mail option checkbox. 4. Under the Mail Properties, enter the email address to receive data in the To: field. 5. Enter the Subject, and Save.

Linking to a form

1. To link to a form from your content, first highlight your text. 2. Click the Hyperlink Manager icon. 3. Click the Browse icon next to the URL field. 4. Navigate to the folder where you put your form. Make sure you select Forms in the Library folder to

show all forms.

16


5. Double-click on the desired form to select. 6. When you return to the Hyperlink Manager window, click OK to finish.

Edit Form

1. Navigate to the form you wish to edit. 2. Under View, choose HTML

Form/Survey. 3. Choose Edit from the drop-down menu

next to the form you chose. 4. When you are finished, Preview the

form and click Check-in or Publish when done.

17


Get Results

1. Navigate to the desired form. 2. Click the form name to open the Properties. 3. Click on the View Report on the View Form toolbar. 4. Enter the Start Date and End date and all search parameters. 5. Click the Get Report button. 6. To export report data to an excel spreadsheet, scroll down beyond all data and click the Export Report

button.

Scroll down until you see “Export Report”

18


How do I know if I have pages checked out? To view checked out items, do the following:

1. Go into the Workarea. 2. Navigate to your folder. Below is a list of status codes used to identify the files current state.

Content Status Color Coding

19


TIPS Title – When you are creating a new content page, this is the name of your page, and Title text will also appear as the text on your nav bar. Page Name – On the Metadata tab, Page Name entered will appear as the page header. Nav Menu name – Edits can be done by clicking the Edit Menu link at the bottom of the nav bar, then choose file and click Edit Title. Image size – Prep your image before you upload to library. Templates – Be mindful if you need to change your template for any particular page. Tables – Table borders are governed by the CSS. Rows and borders appear in preset alternate colors. Only use Tables for lists. Using tables for page layout do not format well on mobile. CSS – Use Intro _big for Homepage, use Intro_text for subsequent pages.

Resources Permission Setup - Contact [email protected] Web Style Guide - http://www.usfca.edu/redesign/styleguide/ Web Standards- http://www.usfca.edu/redesign/styleguide/color/ Web Services Blog – http://blogs.usfca.edu/web

Documents

Ektron Advanced