Training Schedule: Third Wednesday of every month from 1:30 PM to 3:00 PM in the ARKU Team Meeting Room ARKU A354

Transcription

1 OU Campus 101 Training Schedule: Third Wednesday of every month from 1:30 PM to 3:00 PM in the ARKU Team Meeting Room ARKU A354 Class Description: This introductory course is designed specifically to train departmental webmasters and staff on OU Campus, the content management system (CMS) for the University of Arkansas website. Instruction will include the basic layout of the user portal including the dashboard and content management as well as hands-on training for building pages and sections in department websites. Class topics include: OU Campus login User dashboard overview Website file structure Content creation/management (hands-on) Instructor: Kelly Bostick Prerequisites: Preregistration for this course is required so that access to the training portal can be preset prior to class. Course Schedule: OU Campus 101 takes place the third Wednesday of every month from 1:30 3:00 p.m. Request Training: If the regularly scheduled training sessions do not fit with your schedule you may request a coordinated training session for this course by contacting Kelly Bostick at kbostick@uark.edu. Additional Courses: Additional courses for OU Campus are currently in production and will be made available later this year. For more information on advanced OU Campus training, please contact Kelly Bostick at kbostick@uark.edu.

2 OU Campus Description OU Campus is a Content Management System (CMS) for the University of Arkansas. This tool allows you to create and manage content on your website. OU Campus is browser based in that it works with any modern web browser. It also has a staging environment that any work performed stays in the staging environment until you publish it. Everything discussed in today s training can be found in the help files listed below. Once today s session is over you will not have access to the training site. Login Go to the page you need to edit. At the bottom of the page, click on the copyright link to open the main page. When the new page opens, click on the U of A logo in the window. Login with your UARK login and password. If you do not have access, let your trainer know. To logout, just close your browser or logout at the top right under your name. OU Campus

3 OU Campus Logo click on OU Campus logo for support Dashboard user-specific items, activity and messages Overview Dashboard for messages, content and activity Workflow Checked In and Activity Inbox Internal (we don t use) Analytics Google Analytics Content here you can manage and edit different types of content Pages Your web pages/site Assets Forms and image slideshows and text (advanced: web content & source code) RSS Recycle Bin For recovering deleted items

4 Reports ability to check pages back in that have been inadvertently left checkedout, override the approval process when pages have been sent to unresponsive approvers, and run customized reports. These reports involve content, users, and other system details, as well as the ability to export the results via CSV file. Required Actions Checked out items, broken pages, unsynchronized pages Check Out Content Anything that you have checked out Pending Approvals Scheduled Actions Future publications or expirations Site Check Link checks, Spelling checks, accessibility, W3C (World Wide Web Consortium) compliance Custom Reports Advanced reports (we can build these for you if you need one) Recent Saves recent saves Recent Publishes same Add-Ons Manage Add-Ons We will be adding this at a later date (will include style guide, news articles and resource space for photos)

5 Help Support Site Support Tutorials Community OU User Community Feedback Give feedback to OU Release Notes Updates & fixes House Home navigation +New To make new page, file or section (explained under File Types section)

6 Quick Search - To search items in site Upload for file upload *If you can t find what you are looking for in 5 minutes, call Grey Bar Drop-Down This is a list of all the sites in your project.

7 Yellow Folder This opens a file navigation pane showing all of your pages (Click on the arrow to collapse).

8 Content When you click on Content it opens up the file structure of your website. When you hover over the different page files, a list of actions come up to Edit, Review, Publish or File. Edit Page Perform edits to your page Source View page source Properties View and edit page properties Access Manage page access Reminders View and set up reminders

9 Review Preview Preview what your page will look like when live Page Check Check spelling Save Version Save the current version you are working on Log View the page log There is also a multi-browser preview option in top right corner of the preview page to see how your page will look in different browsers but you must be in preview mode to see the option. Publish Publish Publish your page Schedule Schedule your page to publish at a specific time and date Submit for Approval Submit your page to be approved by someone Expire Set a page to expire at a certain time or date (good for event registrations)

10 File Rename Rename your file Move Move your file to a different location Copy Copy your file Move to Recycle Bin Move unneeded files to the recycle bin When deleting folders, always first delete the files within the folder individually before deleting the entire folder. Deleting a folder with items in it permanently deletes the files. Home Home The home/root level of your site You can click on the blue house icon to go to your home/root level of you site When house is black you are at the root level. If it is blue you are one or more levels into your site.

11 File Types There are three different file types: pcf, inc and props.pcf Pcf - These files are your actual web pages Inc - Include files are ones we edit in one place that udpate through the site (page footer) Props.pcf changing these files necessitates publishing all affected files. If in doubt publish all pages. (site name or section) New Content You can create a new page or section by either clicking the drop down arrow on the Green +New button or just clicking the +New button to bring up the New Content window.

12 There are 5 options for creating new content Create New Folder Just for files and photos New Interior Section for creating new section in site New Interior Page Basic pages with breadcrumbs Landing Page Lone page to link to Landing Section Lone Section * Your options will vary in Fulbright or COEHP. New Interior Section Filling out the form for creating a New Interior Section Directory Name Use all lower case letters. If you use multiple words (encouraged) then use a (dash) instead of spaces.(example: my-firstcar) *It is important to name this section with Search Engine Optimization (SEO) in mind. Name the page in accordance to what the page is or is about. Friendly Name Name your section as you would like it to appear on the page while adequately describing your page The name of your page as it will appear in the breadcrumb (Example: My First Car) Page Title Same as the Friendly name (you can copy and paste Friendly Name) Key Words Skip this step Description One or two sentences that describe your page so that when someone searches for it the description will tell them what they need to know about the page Content You can add your content here now or wait and add it after you have created the page Add Navigation Item Yes will add the page to your left navigation

13 my-first-car My First Car My First Car Describe what is on your page.

14 Click on Create to finish. You will not be taken to the page and in edit mode ready to add your content. After your new page is created, click on Content. This will take you back to the section. Your new section My First Car should now appear within your files. New Interior Page Filling out the form for creating a New Interior Page Page Title Name your page as you would like it to appear on the page while adequately describing your page (Example: Black Mazda 626) Keywords Skip this field Description One or two sentences that describe your page so that when someone searches for it the description will tell them what they need to know about the page Content You can add your content here now or wait and add it after you have created the page Add Navigation Item Yes will add the page to your left Number of Columns This will default to two columns which is the standard page layout Filename - Leave.pcf in file name and replace the other part with the page title but remove spaces and make it all lower case (Example: white-mazda-626.pcf) Create Click on the Create button to create your page

15 White Mazda 626 Enter a description of your page You can enter your page content here or wait and enter it in the page edit mode after you create your page. Leave.pcf and replace untitled with your page title (white-mazda-626.pcf) Once your page is created, find it in the list on the Content page and click on the page to open it.

16 Editing a Page Preview This allows you to see what your page will look like when published. Edit Edit - Shows editing buttons that will open the text editor.

17 Properties Allows you to edit the title, description, keywords, author and number of columns. (Lightbulb must be yellow for parameters to appear) *Note: If you change the name of a page you will also need to change it in the navigation (nav.inc file). Versions Lists the different versions of the page. Versions are created on a page publish, not a page save.

18 Lightbulb Shows you what pages you have checked out. Yellow means you have the page checked out. If you have a page checked out it will be unavailable for anyone else to edit it. You will need to check the page back in to make it available to others.

19 Images To add an image to a page go into edit mode and click to the left of your text where you want the image. Click on the image icon in the toolbar. The icon looks like a small photo. This will open an Insert/Edit Image window. You will need to click on the browse icon (the file icon next to the Image URL blank) Images should be 800 pixels wide when uploaded. Images larger than 800 pixels should be resized before uploading. If the image is larger than what you want it to be on your page, you can adjust the image size once it is uploaded via the appearance tab.

20 When the Select Image window opens, you can pick a photo that has already been uploaded from the list on the left side or you can click on the Upload button to upload an image. An Upload window will then open. To add an image, click the green +ADD button or drag files into the window. When you are finished, click the Start Upload button.

21 If the file name already exists or is unacceptable, you can rename your file by hovering over the file name to bring up the Rename/Remove options. When you are finished, click the Start Upload button. Your image will now appear in the left file list as well as in the right window. You can click on the Edit Image icon to Resize, Crop, Rotate or Zoom in and out on your image. Once you are finished, click on the Save button and then Insert button. Save will overwrite the original file. Save As will create a new file.

22 You will now be brought back to the Insert/Edit Image window. Image Description If the image is important to the page and describes something then you will need to include a description in case the image is not visible or you can put a space for the image description if the image is only on the page for aesthetic purposes.. If you do not need to resize or edit the appearance of your photo you can click the Insert button. To resize and edit the appearance of your photo, click on the Appearance tab at the top of the window. Alignment Set the alignment of your image on your web page Dimensions Here you can resize your photo by changing the number in the first box (the second box will automatically change to the correct pixel height Vertical/Horizontal Space Here you can add white space to the top, bottom or sides of your image. A value of 10 is recommended. Border You can add a black border to your images by typing in a number in accordance to thickness. Use of the border is discouraged.

23 Class You can select a class in the drop down or apply a class by selecting value and entering your class in the space Style You can include an inline CSS style for your image here When you are finished adjusting the appearance of your photo, click the Insert button to insert your photo onto your webpage.

24 Hyperlinks To hyperlink text or an image on your page, highlight the item and then click on the hyperlink icon in the toolbar that looks like a chain link. An Insert/Edit Link window will open If the link is outside of your website, paste the url in the Link URL text box and then hit the Insert button If your link is inside of your website, click on the browse icon next to the Link URL text box

25 A Select File window will open up with the file structure of your website listed on the left side. Find the file or page that you want to link to and click on the file (page should appear in the right side of the window) When you are finished, click on the Insert button to insert the link OU Campus Support Site You can utilize the OU Campus Support site for additional help at support.omniupdate.com or by clicking on the Help button in the top, right corner of your screen. Helpful Websites Bootstrap getbootstrap.com/css/ - Global CSS settings, fundamental HTML elements styled and enhanced with extensible classes, and an advanced grid system. You can utilized the Bootstrap CSS section for styles that include tables, images, buttons and more. Fontawesome fontawesome.io Scalable vector icons that can instantly be customized size, color, drop shadow, and anything that can be done with the power of CSS. OU Campus On-Campus Assistance Kelly Bostick, Training and Support Specialist - kbostick@uark.edu