Sections vs. Pages... 3 Adding Images & PDFs... 4 Assets & Snippets... 5 RSS Feeds & News Items... 6 Directory Pages... 6 Help & Resources...

Transcription

1 1 2 OUCampus Training Guide Spring 2017 INDEX: Logging In... 1 Checking pages in/out... 1 OUCampus Interface... 2 Editing pages in the WYSIWYG... 2 Toolbars & Tools... 2 Sections vs. Pages... 3 Adding Images & PDFs... 4 Assets & Snippets... 5 RSS Feeds & News Items... 6 Directory Pages... 6 Help & Resources... 6 Logging In 1. Visit your department or program website. 2. Scroll to the bottom of the page, and click on the "Copyright of University of Arkansas" link (Figure 1). 3. Click the University of Arkansas logo (Figure 2), then on the next screen input your UARK login credentials. Checking Pages In/Out To edit a page, the page needs to be checked out. You Figure 1 can do this by clicking the light bulb icon or by clicking the edit and then the green edit button. When the page is checked out, the light bulb will be yellow and you will have access to the page properties. To check the page back in, either publish the page or if you did not make any changes, click the light bulb icon again. Be sure to save before publishing. When a page or file is checked out to a user, no other users can enter the pages and make changes until the file has been checked back in. You can view all Figure 2 checked out pages by visiting the dashboard in the upper left. You can return to your pages by hovering over content in the top menu and clicking pages. If another user checks out a page, a red padlock icon will show indicating that the page is locked. Please make sure to check back in (publish) all pages when you are finished to avoid locked pages. TIP: If you happen to go outside the folder of which you have access, you may not be able to get back inside your folder. To get back in, go back to the live page you want to edit and click the log in button.

2 OUCampus Interface In the OUCampus interface (Figure 3) you will see folders and pages. Anything with the extension of.pcf is a page. A yellow folder indicates a section. Each section represents an item in the navigation with subitems. You can navigate this area by clicking on the folder name and returning to back to the top directory using the breadcrumbs, taking care not to go outside your folder. Figure 3 Editing Pages in the WYSIWYG WYSISWG stands for What you see is what you get. Only areas that are available to be edited by that user are shown with a green edit button. Clicking on the Edit button above a region allow for the area to be edited. Once the content has been saved, an actual view of the configured page can be seen using the Preview mode. When editing in the WYSIWYG, modifications should be saved by clicking the Save icon before navigating away from the page. If an attempt is made to navigate away from the page without first saving Toolbars and Tools Figure 4 is the WYSIWYG Toolbar. Icons represent the tools. Clicking on any icon performs an action, either directly to the page, or to the selected text and graphics. Some icons display more options in a drop-down menu, or in a dialog. In many cases, right clicking offers contextual functions. For example, right clicking within a table provides a list of available table editing and formatting functions. it, the user notification is shown as a reminder to save the page TIP: Click the blue question mark icon to see a description of each icon in the toolbar. Figure 4 2

3 NOTE: Each new page has a gallery image option. If you do not want to add a large image or gallery to the top of the page, check the page out and go to the properties. Under general properties, turn the gallery image off. When creating pages, do NOT use the Create New Folder option. It will not generate the proper files for the template to work. This folder option is reserved for organizing images. Sections vs. Pages You have a few options when adding new content to your website. First decide whether you want to add a new page or a new section. If you plan on adding sub-pages for this content, then add a new department section. This will generate a folder and a few other important files that allow the template to function. When you add a section, you need to fill out the following in the properties: 1. Directory Name: there should be no spaces, capital letters or special characters. Use dashes instead of underscores. The directory name should indicate what would be found in that folder. For example, if it s a news section call the directory news. 2. Friendly Name: This will be displayed in the breadcrumb. Keep it short and descriptive. 3. Page Title: Most of the time this will be the same as the friendly name, unless it needs to be longer. 4. Description: This is what will display when found in search engines. 5. Add Navigation Item: Most of the time you want to choose yes so that your section will appear in your left navigation. There are some instances to choose no, but not many. Click create and you will be taken into your new section. An index (home) page will be generated. To add a page, click the new department page icon and you will get the following property options: 1. Page Title: will be displayed in search engines. You can use upper case and spaces 2. Description: will be displayed in search engines 3. Add navigation item: for the most part, yes, unless for some reason you don t want the page to display in the navigation. 4. Filename: use only lowercase letters and dashes. Don t use underscores or special characters. If you don t want the gallery section, turn it off in the properties. You can now edit the page. When finished save and publish. In order to get the navigation to publish/refresh, go to the nav.inc file one directory up and publish. 3

4 Adding Images and PDFs There are a couple of ways to upload images (use the second option for uploading PDFs): 1. Through the WYSIWYG editor: In the page that you want the image to show, click edit. In the editor window, place your cursor where you would like the image and click the image icon. In the image URL area, click the icon at the end. A box will pop up to select an image. You can either select an image that is already uploaded or you can select the upload button in the top right area. Click add files and select the file to upload. Make sure you name the file properly. If you need to change the name, you can click the rename button to change the name before uploading. The image will not show properly until the page has been published. When the page is published, the image is also published. 2. Through the _resources folder: If you need to add a new folder for image organizational TIPS: It is very important to name your images properly and consistently. 1. Use only lowercase letters 2. Use only dashes. Do NOT use underscores. 3. Always put your images in the _resources folder. 4. Add new folders when necessary to keep your images organized. It is also required to add alt text to every image in the image description area. If you insert a large image and you want it to shrink with the page for mobile devices, add a class of image responsive from the appearance tab. PDF Files All of the same steps used to insert and upload images apply to PDF files. purposes, you cannot do this using the first method. Instead go directly to the _resources folder in the top level of your directory. Navigate to the area you want to add a new folder and click the green New button in the upper right. Select Create New Folder. Name the folder with only lowercase letters and dashes. Then click the upload button. A box will pop up to select an image. You can either select an image that is already uploaded or you can select the upload button in the top right area. Click add files and select the file to upload. Make sure you name the file properly. If you need to change the name, you can click the rename button to change the name before uploading. Then publish the image you uploaded. 4

5 Assets & Snippets Assets are for content that can be reused over and over. Asset For your purposes, assets will mainly be used for galleries. For existing assets, use the asset icon as indicated to the right inside the WYSIWYG editor window. To create a new asset, hover over the content link in the top menu and click on Assets. Click the green New button in the top right and select Image Gallery. Give this asset a name. You can use uppercase and spaces. Indicate the department or program name for which the asset belongs in either the name or tags so that it will be easier to find. Under Access settings, select the group and available to for your area, so that others outside of your group won t Snippets are pieces of starter content that can be used once. Snippet Fulbright College gallery images should be sized to 713px wide by 357px high before uploading. be able to edit your asset. Then click create. You can now upload images and give them title in the title area and captions in the caption area. These two items are required and if not filled in, a blank box will still show where they should be. You can drag the files around to change the order and add more files. For the Fulbright sites, the gallery images should be sized to 713px wide by 357px high. Once you insert the images, they cannot be replaced. To edit an image, you need to delete the image and add it again. When you are finished, save and publish the asset. To use the asset go to the WYSIWYG editor window of the page you want to edit and click the asset icon as indicated above. TIP: You may notice that there is a spell check in the WYSIWYG editor. It will tell you if a word is misspelled, but it won t fix it for you like in a Word document. You have to manually fix it. Snippets are pre-made pieces of content that may otherwise be difficult to produce on your own, for example, accordions, buttons, dropdown menus, etc. The snippets that you have available are: Accordion: For displaying large amounts of content. Only one section shows at a time. Each row of the snippet is a new accordion item. Basic Grid: For putting content into columns. The columns must add up to 12. Each row is a column and almost any information can be inserted. Button: For displaying a button for a call to action. Drop Down: For displaying lists of information to be clicked. Tabbed Box: For displaying information inside tabs. To use a snippet go to the WYSIWYG editor window of the page you want to edit and click the snippet icon as indicated to above. Under category, choose department snippets and choose one of the 5 snippets listed above. Once inserted, add content as indicated in the snippet directions. 5

6 RSS Feeds & News Items RSS Feeds (Really Simple Syndication) are used to feed news items from the news page onto the home page or other pages. The initial RSS feed needs to be set up by your web master. For those who have feeds, follow these steps to add news stories: 1. Go to the news section of you website in OUCampus 2. Click the green New button to create a new department page for a new story. 3. Add the story to the page as you would any story. 4. When you are finished, go to the properties > RSS. 5. Click the green New button to create a new RSS item. 6. Add a title and a description. Most likely the title will be the same as the story you just made and the description will be either the first paragraph of the story or a synopsis. 7. Click save and publish 8. Click rebuild feed and publish the page 9. The new story should now show wherever your news feed has been set up. Most likely on the home page and the news page. Newswire & Campus Calendar: Most departments now rely on the Newswire and Campus Calendar feeds to populate their website with news and events. the Fulbright College webmaster, Morgan Bibbs, at bibbs@uark.edu to set up a news or events feed. TIPS: Directory Pages The directory pages are now updated through Campus Web Data. Some primary information is pulled from webbasis, but the bio and professional information is managed in Campus Web Data. All faculty and staff can login at campuswebdata.uark.edu to edit their profile content at any time. Most departments have an administrator with access to edit all profiles in that BU. Official Photos: University Relations has instituted open studio hours for headshots. Anyone who has not had their official university photo refreshed in a least 2 years is encouraged to go to the photo studio in the basement of Davis Hall from 10a.m-12 p.m. on Tuesdays and Wednesdays. No appointment is necessary. photo@uark.edu to schedule an alternative time Need Help? webfirst.uark.edu how-to's, tutorials, and more for all campus web administrators. Sign up to receive the WebFirst newsletter! fulbright.uark.edu/communications Fulbright-specific web and communications help, including logo downloads & requests. the Fulbright College webmaster, Morgan Bibbs, at bibbs@uark.edu with any questions, needs or concerns. 6