OU Campus Training. Part 1

Size: px

Start display at page:

Download "OU Campus Training. Part 1"

Flora Alexander
6 years ago
Views:

1 OU Campus Training Part 1

OU Campus Training Before you Start Website Access forms are available from the Add-Ons Dropdown (page 3) or on the Web Support Website (www.unco.edu/web-support/resources/ou-campus/forms) 1.

2 OU Campus Training Before you Start Website Access forms are available from the Add-Ons Dropdown (page 3) or on the Web Support Website ( 1. New OU Campus Site Setup/Access: If you are a web author and need a new OU Campus website created, this is the form you will submit 2. Existing OU Campus Site Access: If you are a web author and your OU Campus website already exists in the CMS and you need access to make edits/changes this is the form you will submit 3. Make OU Campus Site Live: This is the form you will submit if you have developed your website in Omnidev (see below) and are ready for the website to go live on the WWW Server Omnidev If your website is not live on WWW you will be working in a development directory called Omnidev. Omnidev is a restricted directory that cannot be accessed by web users or search engines and allows web authors to experiment with their website development. Omnidev Access If you are on campus you have access to Omnidev If you are off campus you will need to be logged into the privileged realm of Junos Pulse to access Omnidev. o Learn more about Junos Pulse via Ursa (ursa.unco.edu) Getting Started Instructions, tips and tricks for getting started in OU Campus. Logging In To login to OU Campus follow these instructions: 1. Open your website in the browser (It doesn t matter if the website is live or still in development) 2. Select the DirectEdit Link (page last updated date) in the footer: 2

3 3. This will take you to the OU Campus Logon Screen: 4. Enter Username and Password a. Username: first.last b. Password: Network password Master Section(s) Your top-level website is known as a master section in OU Campus terms. Master sections are created by the Web Communications Team when you submit the New OU Campus Site Setup/Access form. When a new master section is created the following files are included: _props.pcf (covered in part 2) _footer.pcf (page 12) _topnav.pcf and _sidenav.pcf (page 11) images folder index.pcf: this webpage is the homepage of your website pdf folder widgets folder (covered in part 2) OU Campus Interface There are four tool bars in OU Campus and they each serve a different purpose: 1. Global Navigation 2. Secondary Navigation 3. Page Actions 4. JustEdit/WYSIWYG Global Navigation Toolbar The global navigation bar is the primary way to navigate through OU Campus and your pages-list 3

4 Functionalities Dashboard: Includes access to workflow, inbox and dashboard gadgets (covered in Part 2 Training) Content: Includes access to your pages-list (for access to editing webpages), assets (covered in Part 2) and the recycle bin (page 13) Reports: Access to reporting and other CMS functionalities (covered in Part 2) Add-Ons: Shortcuts to access forms, self-help tools and other Quicklinks Secondary Navigation Bar The secondary navigation bar is located directly underneath the global navigation bar and includes a breadcrumb providing the location path of where you are in OU Campus. You can click on the pages link to return to your pages list Page Actions Toolbar The page actions toolbar provides access to OU Campus functionalities while editing a webpage Preview: Displays the page exactly how a visiting user see its and is an accurate depiction of what the webpage will look like live Edit: Displays the green Content Region buttons that allow web authors to make changes/updates in editable content regions Lightbulb: When the lightbulb is yellow the webpage is checked out to you. That means other web authors or contributors are unable to access the webpage. This is a required action if you want to see additional functionalities not available when a webpage is checked in. Properties: Provides access to editing various other page items including the page Parameters o Parameters: To view the Parameters via Properties the lightbulb must be yellow (page 6) Versions: Allows web authors to view (and revert to) available versions of the webpage and is only available when the lightbulb is yellow o Every time a webpage is published a version is created o Manually save a version with the save version icon o Save & Exit from the JustEdit toolbar does not create a version (see below) 4

5 Page Check: Allows you to manually run the page check functionality and will display the page check modal (page 7) o Page check is also available via the Publish button Publish: Allows you to publish the webpage to the server so users are able to access the updated information (page 7) o The publish dropdown menu includes options for scheduling a publication, submitting for approval and expiring an existing webpage. JustEdit/WYSIWYG (What You See Is What You Get) Toolbar OU Campus webpages have editable content regions instead of one large region. When you select a green content region button (only available when in edit mode of the Page Actions Toolbar) the JustEdit toolbar becomes available: JustEdit Toolbar Options Save & Exit Exit without Saving Spell Check Clear Formatting Style Dropdown Paragraph/Headers dropdown (see additional header handout) And more, hover over an icon to see what it does! Creating Sub Sections and Webpages Create new subsections and webpages to build the website and keep the hierarchy organized Sub Sections Subsections are OU Campus subdirectories (in common terms) that organize webpages and are not used to house images and/or PDFs Creating a Sub Section To create a new subsection, follow these steps: 1. Navigate to pages-list via the Global Navigation Toolbar (page 3) a. Create new subsections in the master section or inside an already existing subsection 2. Select the green New button 5

3. From the New Content modal select Sub Section 4. Fill out the New Section modal a. Directory Name: All lower case, anywhere a there would normally be a space insert a dash (-) instead b.

6 3. From the New Content modal select Sub Section 4. Fill out the New Section modal a. Directory Name: All lower case, anywhere a there would normally be a space insert a dash (-) instead b. Friendly Name and Page Title: Take directory name but make it grammatically correct (add capitalization and spaces) c. Description: Displays in search engine results and should be approximately 150 characters. i. Example: Learn more about XYZ in the department of XYZ at the University of Northern Colorado d. Keywords: Used for UNC-specific search results and should always be separated by a comma 6

7 5. Click Create 6. This will automatically take you to edit-mode of the index.pcf webpage of the sub section just created (think of it has the home page of that section) a. Do not rename any index.pcf webpages Webpages Webpages are used to create individual pages to that provide users with information about a certain topic on one page Creating a Webpage To create a webpage, follow these steps: 1. Navigate to the pages-list via the Global Navigation Toolbar (page 3) a. Create a new webpage in the master section or in an existing sub section 2. Select the green New button 3. From the New Content modal select a page template 4. Fill out the Page Modal a. Filename Name: All lower case, anywhere a there would normally be a space insert a dash (-) instead b. Page Title: Take filename but make it grammatically correct (add capitalization and spaces) c. Description: Displays in search engine results and should be approximately 150 characters. i. Example: Learn more about XYZ in the department of XYZ at the University of Northern Colorado 7

8 d. Keywords: Used for UNC-specific search results and should always be separated by a comma 5. Click Create, this will automatically take web author into edit-mode of the new webpage. Adding Rows/Columns Use the Page Parameters to turn on/off certain page structures (such as columns and/or rows), update meta data details, turn on/off banner region and more. See the Web Style Guide for more details about columns, rows and the right sidebar ( Access the page Parameters via the Properties button in the Page Actions Toolbar (page 3) Page Parameters The Page Parameters control: Title/Metadata o Title: Displays in Browser tab and in search engine results o Descriptions: Displays in Search engine results o Keywords: Used for UNC-specific search Site Banner (page 9) o Image Region: Toggle on/off banner image o Page Heading o Page Paragraph 8

Breadcrumbs: Breadcrumbs display below the Top Navigation and allow users to know how they got to the page they are currently on Rows and Columns: Toggle on/off content rows and columns depending on

9 Breadcrumbs: Breadcrumbs display below the Top Navigation and allow users to know how they got to the page they are currently on Rows and Columns: Toggle on/off content rows and columns depending on the web content. Row/Content Modifications o Content Row 5 Background Color: Select the background color for row 5 o Gallery Type (covered in part 2) Sidebar Content o Right Sidebar Region: Toggle on/off right sidebar o Right Side Navigation: Toggle on/off right-side navigation (12) o Sidebar Widgets (covered in part 2) Page Publish Publishing a file (webpage, pdf or image) sends the file to UNC s WWW Server and makes it available for all web users. When you select the green publish button the OU campus template and the content inserted in the editable regions are combined to form the.aspx webpage accessed by users. To publish a webpage, follow these instructions: 9

10 1. Select the green Publish button in the Page Actions Toolbar (page 3). 2. Run optional page check (page 8) Page Check Run a page check from the Publish Modal or can be run manually via the Page Actions Toolbar (page 3). The page check will check for: Spelling Errors Broken Links Accessibility Issues Learn more about the Page Check Functionality on Web Support: Uploading Images To upload an image to OU Campus follow these instructions: 1. Navigate to the master section and open the images folder 2. Chose Upload (next to New) 3. Select the green Add Button and select image(s) from desktop 4. Once image(s) have been selected click Start Upload 10

11 5. Publish image file(s) Uploading Tips: Use.jpg or.png file extension Image file size must be under 300K Resize all images in Photoshop prior to uploading them to OU Campus o See recommended image sizes in the Web Style Guide: Upload all images to the image folder Uploading PDFs To upload a PDF to OU Campus follow these instructions: 1. Navigate to your master section and open the pdf folder 2. Select Upload (next to New) 3. Select the green Add button and select files from the desktop 4. Once PDFs have been selected click Start Upload 5. Publish PDF file(s) Uploading Tips: File size must be under 300K Follow same naming convention as webpages (page 6) You can create subfolders in the pdf folder for organization just select the green New button 11

Inserting Images Learn more about image placement in the Web Style Guide: http://www.unco.edu/websupport/webstyleguide/components/imageplacement.

Select the image icon in the JustEdit Toolbar 4. Browse to the image folder and select the image, then click Insert 5. You will see a dependency tag (http://ww.unco.

12 Inserting Images Learn more about image placement in the Web Style Guide: To insert images in a content region just follow these instructions: 1. Navigate to the page you want the image inserted on 2. Select the green content region button 3. Select the image icon in the JustEdit Toolbar 4. Browse to the image folder and select the image, then click Insert 5. You will see a dependency tag ( in the Source field, add a description (for accessibility) 6. Select OK and image will populate in the region Banner Images Banner Images ( are the large images at the top of a webpage. This region can be turned on/off via the Page Parameters (page 6) 12

All banner images must be sized 1600X440 and under 300K file size Banner images use a table transform to make inserting the image easy You can have rotating banner images (just add a table row for

Select the green Banner Content button 3. Delete the placeholder and/or existing banner image a. Be careful to only delete the image and not affect the table 4.

13 All banner images must be sized 1600X440 and under 300K file size Banner images use a table transform to make inserting the image easy You can have rotating banner images (just add a table row for each additional image) o We recommend 1-3 maximum To insert a banner image, follow these instructions: 1. Open the webpage the banner should be inserted and/or updated on 2. Select the green Banner Content button 3. Delete the placeholder and/or existing banner image a. Be careful to only delete the image and not affect the table 4. Confirm the cursor is in the appropriate table row 5. Select the Insert Image icon 6. Browse to the image folder and select the image 7. Click Insert 8. Add description 9. Select OK and image will populate in banner region Inserting Links Use the insert link ( icons in the JustEdit toolbar (page 4) to link to internal or external webpages and files (pdfs) Just follow these instructions: 13

Browse to the internal URL or paste the external URL in the URL field. If you browse to a webpage you will see a dependency tag: a.

14 1. Highlight phrase you want to hyperlink k a. For accessibility avoid phrases like Click Here for registrar or Learn More b. Substitute with shorts phrases that allow users to know where that link will take them (e.g.: Learn more about XYZ) 2. Select the Insert Link Icon 3. Browse to the internal URL or paste the external URL in the URL field. If you browse to a webpage you will see a dependency tag: a. You can make a link a button using the Class dropdown MailTo Link To create a MailTo Link just click on the Insert MailTo Link Icon Add address in Address Field Subject Field is the subject line of the (optional) Site Navigation Site navigation is how users are able to interact with your website and navigate from page to page. There are two types of navigation: Top Navigation Side Navigation 14

Top Navigation Top Navigation (http://www.unco.edu/web-support/resources/ou-campus/navigation-breadcrumbs/creating-topnavigation.

Creating and Editing Top Navigation To create and/or edit your top-level navigation, follow these instructions to create a bulleted list that will transform into your navigation automatically: 1.

15 Top Navigation Top Navigation ( is the primary way users navigate through your website and is made up of two levels: Level 1: What users see at the top of all of your webpages Level 2: The dropdown options from Level 1 Creating and Editing Top Navigation To create and/or edit your top-level navigation, follow these instructions to create a bulleted list that will transform into your navigation automatically: 1. Open the _topnav.pcf file in your master section 2. Make the lightbulb yellow 3. Click the green Topnav button to begin inserting navigation links 4. Type the first link title a. Highlight the phrase and select the insert link icon to browse to an existing page b. You can also insert an external URL 5. Press Enter on your keyboard to add additional Level 1 Links 6. Press Enter + Tab to add Level 2 Links a. Press Shift + Tab to return to Level 1 7. Select Save and Exit in the JustEdit Toolbar 8. Publish the _topnav.pcf Every time you publish the _topnav.pcf file it will update across your entire website Side Navigation Side Navigation (located in the right sidebar of designated pages) is an additional way users navigate through your website, specifically to webpages not available via the Top Navigation. This navigation is compised of Levels 3 & 4. Level 3: What users see directly in the right sidebar Level 4: What users see in the dropdown of level 3 navigation 15

Creating and Editing Top Navigation To create and/or edit side-level navigation, follow these instructions to create a bulleted list that will transform into your side navigation 1.

16 Creating and Editing Top Navigation To create and/or edit side-level navigation, follow these instructions to create a bulleted list that will transform into your side navigation 1. Navigate to a subsection via the Pages-list 2. Select _sidenav.pcf 3. Select green Side Region button 4. Type first link title a. Highlight phrase and select insert link icon to browse to an existing webpage 5. Press Enter to add additional Level 3 Link 6. Press Enter + Tab to add a Level 4 link a. Shift + Tab to return to Level 3 7. Select Save and Exit 8. Publish _sidenav.pcf file Every time you publish the _sidenav.pcf file it will update across your entire website Inserting Side Navigation After creating the side navigation, you need to make sure it displays on the appropriate webpages by following the instructions below. You can pick and choose which webpages display the section-specific navigation 1. Open webpage 2. Make lightbulb yellow 3. Select Properties > Parameters 4. Scroll to the bottom of the page and make sure the following options are toggled on: a. Right Sidebar Region b. Right Side Navigation 5. Click Save 6. Publish (or republish) webpage Website Footer The website footer is a combination of standard UNC information and website-specific content controlled by the footer.pcf file. The footer is the same across all webpages. 16

Standard Footer Info Contact UNC information UNC social Media About UNC links Editable Footer Info Contact Us information (optional): Allows users to find and contact you easily Quicklinks

17 Standard Footer Info Contact UNC information UNC social Media About UNC links Editable Footer Info Contact Us information (optional): Allows users to find and contact you easily Quicklinks (editable): A way to assist your users with finding the most useful, common or popular information on your website or related/external sites Editing Footer Info 1. Navigate to the root of your website 2. Open the _footer.pcf file 3. Select the orange MultiEdit button 4. Add and/or update the following information: a. Contact for the website b. Additional Footer Contact Information must be toggled on to display properly 17

18 c. Quicklinks Use a bulleted list and the insert link icon to add Quicklinks d. Select Save e. Publish the _footer.pcf file and this will update across the entire website Page Actions Learn more about Page Actions on the Web Support Site under Pages > Working with Files ( All of the page Action options can be found in the page-list and accessible when you hover over a file name on the righthand side. Functions include: Edit, Review, Publish and File options (rename, move, copy and recycle) 18

with your website conversion and/or updates and edits: Request Help Gadget Submit Ticket Self-help Resources We answer questions in approximately 24 hours or less.

19 Working with Multiple Files You can work with files in batch via the pages-list. As you check the box to the left of the filenames, an action bar will appear at the top of the list allowing files to be managed in batch: Getting OU Campus Help There are multiple ways to get help with your website conversion and/or updates and edits: Request Help Gadget Submit Ticket Self-help Resources We answer questions in approximately 24 hours or less. Request Help Gadget The request help gadget is available in the Gadgets sidebar accessible via the plug icon Select the Request Help Gadget and type your question and/or request in the message field. When you select send the message will go through the ticketing system to Web Communications. Submit a Ticket You can also request help by submitting a ticket via help.unco.edu. Be sure to select Website Assistance from the Ticket Description > Website Request Type dropdown menu. 19

20 Self-Help Resources The Web Communications Team has developed a website with guidelines, resources, self-help instructions and the Web Style Guide. You can access all of these resources on the Web Support Website ( 20

OU Campus Training. Part 2

OU Campus Training. Part 2 OU Campus Training Part 2 Login to OU Campus To get started you need to login to OU Campus. While work on your website just use the page last updated date located in the footer: This will take you to the