OU Campus. Web Editors Guide. University Information Technology Services. Training, Outreach, Learning Technologies, & Video Production

Transcription

1 OU Campus Web Editors Guide University Information Technology Services Training, Outreach, Learning Technologies, & Video Production

2 Copyright 2015 University Information Technology Services Kennesaw State University This document may be downloaded, printed, or copied, for educational use, without further permission of the University Information Technology Services Division (UITS), provided the content is not modified and this statement is not removed. Any use not stated above requires the written consent of the UITS Division. The distribution of a copy of this document via the Internet or other electronic medium without the written permission of the UITS Division is expressly prohibited.

3 Table of Contents Introduction... 4 Learning Objectives... 4 Logging into OU Campus... 5 Editing your Page... 7 Accessing the In-Line Editor... 8 The WYSIWYG Editor... 9 Entering & Formatting Text... 9 Uploading Files Publishing Uploaded Files Images Uploading an Image Publishing your Image Adding an image to your page Other Page Editing Options Adding Hyperlinks Embedding Youtube Videos Embedding Videos from Kennesaw State MediaSpace Publishing a Page in OU Campus Creating a New Page in OU Campus Deleting Pages Moving Pages to the Recycle Bin Deleting Pages from the Recycle Bin Restoring Pages from the Recycle Bin Versioning Viewing an older version of your web page Comparing an Older Version of the web page with the current version Reverting to an Older Version of your web page Editing the Navigation Bar Checking Out of Pages Additional Help... 49

4 Introduction OmniUpdate (OU Campus) is a very useful web content management system that provides easy access to update web content. With its easy accessibility, WYSIWIG (What You See Is What You Get) toolbar, and other features, OmniUpdate allows you to publish, manage, as well as organize a wide array of content for websites you have editing access to. The following booklet is meant for those users who have Level-5 website editing permissions. This booklet will provide you a step-by-step guide for editing and creating Kennesaw State University websites using OmniUpdate. Learning Objectives The following topics are covered in this document: Accessing your site for editing Becoming familiar with the WYSIWIG editor Editing Existing Pages Deleting/Recycling Existing Pages Sending Pages for Approval Approving/Declining Pages Version Control Page 4 of 49

5 Logging into OU Campus With the OmniUpdate DirectEditor, you can navigate to any webpage that you have editing permissions for and access the page for editing. The following explains how to access the OmniUpdate DirectEditor in order to edit webpages. 1. In an internet browser, navigate to the KSU page that you wish to edit. Note: You must have editing access to the page to log in to the page (see Figure 1). Figure 1 - Navigate to your Website 2. Click on the DirectEdit button (see Figure 2). Note: the DirectEdit button appears as the copyright symbol located at the bottom of the page. Figure 2 - DirectEdit Button 3. Log in with your NetID and NetID password (see Figure 3). Note: If you are logged into your through Zimbra, you may automatically log in to OmniUpdate. If you automatically log into OmniUpdate, skip to Step 5. Figure 3 - Enter your NetID Page 5 of 49

6 4. Click on Login (see Figure 4.) Figure 4 - Click on Login 5. You will be taken to the DirectEdit page (see Figure 5). Figure 5 - Webpage Editor Page 6 of 49

7 Editing your Page When you are in the DirectEdit page, you will have the ability to edit your webpage, preview your page, view page properties, check in/check out of your page, and view various versions of your webpage. The layout of the DirectEdit page is as follows (see Figure 6). Figure 6 - DirectEdit Page A. The Dashboard Takes you to the OmniUpdate Dashboard B. The Content Button Allows you to view pages on the site and move pages to the Recycle Bin C. Reports Takes you to the Reports page where you can view system reports D. User Settings Allows you to change user settings and logout of OmniUpdate E. Preview Button Allows you to preview your web page F. The Edit Tab Allows you to add/remove content from the page G. The Properties Tab Edit page properties and view the page editing logs H. Check In/Check Out Allows you to check in/check out of the page when editing I. The Publish Button Publishes the page to the public. Note, if you are apart of an approval workflow, this button will be replaced by the Submit. J. Main Content Viewable only when in the Edit tab, clicking this will take you to the webpages In-Line Editor in which you can add/remove content on the page. Page 7 of 49

8 Accessing the In-Line Editor The In-Line editor allows users to make in place edits to the webpage with incredible ease. The following explains how to access the In-Line editor: 1. In the DirectEdit page, click on the Main Content button (see Figure 7.) Figure 7 - Main Content 2. You will be taken to the In-Line editor where you will be able to add/edit text as well as access the WYSIWG (What You See Is What You Get) editor (see Figure 8). Figure 8 - In-Line Editor Page 8 of 49

9 The WYSIWYG Editor The WYSIWYG editor is your way to edit pages quickly. The WYSIWYG editor layout is as follows (see Figure 9): Figure 9 - WYSIWYG Editor File Functions: Save or revert changes on a page Find Functions: Find specific content on your page Undo Redo: Undo/redo changes made on a page Spell Check: Run spell check on the content. Clear Formatting: Remove all selected text formatting and return text back to the default settings for a page. Basic Font Properties: Add bold, italic, underline, and strikethrough to selected content. List & Indent: Create an ordered list or indent content. Alignment Functions: Move selected text (left, center, right) or justify the text Link Tools: Insert/edit links Insert/Edit Mail Link: Insert and Edit a Mailto link Paragraph/Font Styles Options: Define paragraph style and add site-specific font styles, Insert Images/Media: Add/edit images and videos on a page Entering & Formatting Text 1. In the In-Line editor, click on the In-line Editor field (see Figure 10.) Figure 10 - In-Line Editor Page 9 of 49

10 2. Begin typing in the In-line Editor (see Figure 11.) Figure 11 - Adding Text 3. To add bulleted items, click on the Insert/Remove Bulleted List button (see Figure 12). 4. Type in your bulleted list (see Figure 13). Figure 12 - Insert/Remove Bulleted List Figure 13 - Bulleted List Page 10 of 49

11 5. You may bold, italicize, or underline your text using the Bold, Italics, and Underline buttons (see Figure 14). Figure 14 - Bold, Italics, and Underline 6. To adjust the alignment of your text, use the Alignment options (see Figure 15). Figure 15 - Alignment Options 7. When you are done editing text, click on the Save and exit button (see Figure 16). Note: Clicking on the Save and exit button will take you out of the editor and back to the page. To save a page but remain in the editor, use the keyboard shortcut Ctrl+S to save and continue editing. Figure 16 Save and exit Uploading Files The following explains how to upload files into your website. 1. In the webpage that you are editing, click on Main Content (see Figure 17). Figure 17 - Main Content 2. Place your cursor where you wish to add your file link (see Figure 18). Figure 18 - Place your Cursor Page 11 of 49

12 3. Click on Insert/Edit Link (see Figure 19). 4. Click on the Search button (see Figure 20). Figure 19 - Insert/Edit Link Figure 20 - Click on Search 5. In the Select File window, click on Upload (see Figure 21). 6. Click on Add Files (see Figure 22). Figure 21 - Upload Figure 22 - Add Files Page 12 of 49

13 7. Navigate to and select the file you wish to upload (see Figure 23) Figure 23 - Select the File 8. Click Open (see Figure 24). 9. Click on Start Upload (see Figure 25). Figure 24 - Click Open Figure 25 - Start Upload 10. In the Select File window, click on Insert (see Figure 26). Figure 26 - Click on Insert Page 13 of 49

14 11. Add descriptive text in the Text to display field. Note: Text in this field will be displayed on your page (see Figure 27). Figure 27 - Text to Display Field 12. In the Target dropdown, select whether you wish to have the file open in the same page or in a new window. Selecting None will have the file open in the same browser window. Selecting New window will open in a new browser window (see Figure 28.) Figure 28 - Target Field Page 14 of 49

15 13. Click OK (see Figure 29). Figure 29 - Click OK 14. Your file and file link will be added to your webpage (see Figure 30). Figure 30 - Linked File Page 15 of 49

16 Publishing Uploaded Files Upon uploading, note that the file must be published in order for it to be viewable by the public. The following explains how to publish uploaded files. 1. In the DirectEditor, click on Pages, located at the top of your browser window (see Figure 31). Figure 31 - Pages 2. Navigate to, and hover your mouse over the uploaded file that you wish to publish (see Figure 32). 3. Click on Publish (see Figure 33). Figure 32 - Hover your mouse over the file Figure 33 - Publish 4. In the Publish window, click on Publish (see Figure 34). Figure 34 - Click on Publish Page 16 of 49

17 5. Your file will be published and available for public viewing (see Figure 35). Figure 35 - Confirmation Window Images When adding images, it is recommended that you first upload your image to its appropriate location in the website directory, publish the image, and then link the image to your page. The following explains how to add images to your website. Uploading an Image 1. Click on the Pages link (see Figure 36). 2. Click on the Images folder (see Figure 37). Figure 36 - Click on Pages 3. Click on Upload (see Figure 38). Figure 37 - Click on the images folder 4. Click on Add (see Figure 39). Figure 38 - Click on upload Figure 39 - Click on add 5. Navigate to and select the image that you wish to upload (see Figure 40). Figure 40 - Select the image Page 17 of 49

18 6. Click on Open (see Figure 41). Figure 41 - Click on Open 7. Click on Start Upload (see Figure 42). Figure 42 - Click on Start Upload 8. When the file is completed with its upload, click on Close (see Figure 43). Figure 43 - Click on Close Publishing your Image After uploading your image, it is recommended that you immediately publish your file. This ensures that your photo will be viewable by the public when you publish your page. To publish your image: 1. Hover your mouse over the image that you wish to publish (see Figure 44). 2. Click on Publish (see Figure 45). Figure 44 - Hover your mouse over the image Figure 45 - Click on Publish 3. You will be taken to the Publish window. To publish the image, click on Publish (see Figure 46). Figure 46 - Click on Publish Page 18 of 49

19 4. You will receive a confirmation message that your image has been published (see Figure 47). Figure 47 - Confirmation message Adding an image to your page Upon publishing, you are now ready to add the image to your page. The following explains how to add the image to your page. 1. From the images directory, click on the Home button (see Figure 48). Figure 48 - Home Button 2. Navigate to and click on the page that you wish to edit (see Figure 49). Figure 49 - Navigate to and click on the page 3. Click on the Main Content button (see Figure 50). Figure 50 - Click on Main Content 4. Place your cursor where you wish to add your image. 5. Click on Insert/edit Image (see Figure 51). Figure 51 - Click on Insert/edit Image Page 19 of 49

20 6. Click on the Browse button (see Figure 52). Figure 52 - Click on Browse 7. Navigate to and select your image and click Insert (see Figure 53). Figure 53 - Click on Insert 8. Enter a description for the image in the Description field (see Figure 54). Figure 54 - Add a Description Page 20 of 49

21 9. To set the image size and location, select the appropriate size/image location from the Class field (see Figure 55). 10. Click Ok (see Figure 56). Figure 55 - Image Size and Location 11. Click on Save and Exit (see Figure 57). Figure 56 - Click OK Figure 57 - Save and Exit Page 21 of 49

22 Other Page Editing Options Adding Hyperlinks When adding hyperlinks to your page, it is recommended that you either copy/paste the link or type the link into the hyperlink fields. The following explains how to add hyperlinks into your website. 1. In the webpage you are editing, select the text that you wish to hyperlink (see Figure 58). Figure 58 - Select the text 2. Click on the Insert/Edit Link button (see Figure 59). Figure 59 - Insert/Edit Link 3. Type your link into the URL field (see Figure 60). Figure 60 - URL Field Page 22 of 49

23 4. The Text to Display field is the text that is displayed for the hyperlink. If you have selected text prior to clicking on the Insert/Edit Link button that text will appear in this field (see Figure 61). Figure 61 - Text to display field 5. If you wish to have the link open in a new window, select New window in the Target field (see Figure 62). 6. Click OK (see Figure 63). Figure 62 - New window Figure 63 - Click OK Page 23 of 49

24 7. If you receive a The URL you entered seems to be an external link pop-up, click OK to add the required prefix (see Figure 64). Figure 64 - Click OK 8. Your hyperlink will be added to your page (see Figure 65). Figure 65 - Hyperlink Embedding Youtube Videos The following explains how to add Youtube videos to your webpage: 1. Place your cursor where you wish to add your media (see Figure 66). Figure 66 - Place your cursor 2. Click on the Insert/Edit Video button (see Figure 67). Figure 67 - Insert/Edit Video Page 24 of 49

25 3. Open a new browser window in your preferred internet browser. 4. Navigate to 5. In Youtube, navigate to the video that you wish to add (see Figure 68). Figure 68 - Navigate to your video 6. Copy the video link from the address bar (see Figure 69). Figure 69 - Copy your address 7. In the Insert/Edit Embedded Media screen, located in OU Campus, paste your YouTube link in the Source field (see Figure 70). Figure 70 - Source Field Page 25 of 49

26 8. Click on Ok (see Figure 71). Figure 71 - Click OK 9. A Placeholder will appear in your webpage editor (see Figure 72). 10. Click on Save and Exit (see Figure 73). Figure 72 - Placeholder Figure 73 - Click on Save Page 26 of 49

27 11. Your video will appear in your webpage (see Figure 74). Figure 74 - Webpage Video Embedding Videos from Kennesaw State MediaSpace MediaSpace is Kennesaw State s dedicated video sharing website. When you need to upload videos to share with your audience at KSU, it is recommended that you utilize MediaSpace. For more information on using MediaSpace, please refer to the Getting Started with KSU s MediaSpace: Faculty/Staff Quick Start Guide. The following explains how to embed video from Kennesaw State University s MediaSpace onto your website. 1. Click on the Main Content button (see Figure 75). Figure 75 - Main Content Page 27 of 49

28 2. Place your cursor where you wish to embed your video. 3. Click on the Insert/Edit Video button (see Figure 76). 4. Click on the Embed Code tab (see Figure 77). Figure 76 - Insert/Edit Video Figure 77 - Embed Code 5. Open a new browser window in your preferred internet browser 6. Navigate to mediaspace.kennesaw.edu. 7. Click on the Guest icon (see Figure 78). 8. Click on Login (see Figure 79). Figure 78 - Guest Icon Figure 79 - Login Page 28 of 49

29 9. Enter your NetID credentials (A) and click Sign in (B) (see Figure 80). Figure 80 - NetID Login 10. To upload a video that you have created, click on My Media (see Figure 81). Figure 81 - My Media 11. Click on the video that you wish to Embed (see Figure 82). Figure 82 - Select your Embed Page 29 of 49

30 12. Click on Share (see Figure 83). Figure 83 - Share Button 13. Click on Embed (see Figure 84). Figure 84 - Click on Embed 14. Copy the Embed Code from the Embed field (see Figure 85). Figure 85 - Copy the Embed Code 15. In the OmniUpdate page that you are editing, paste the Embed Code in the Paste your embed code below field (see Figure 86). Figure 86 - Paste your Embed Code Page 30 of 49

31 16. Click OK (see Figure 87) Figure 87 - Click Ok 17. Click on Save and Exit (see Figure 88) Figure 88 - Click Save Publishing a Page in OU Campus The following explains how to publish a page in OU Campus. 1. After completing your edits to the page, click on the Save and exit button to save the page (see Figure 89). 2. Click on Publish (see Figure 90). Figure 89 - Click on Save Figure 90 - Click on Publish 3. The Final Check page will appear. To scan your page for spelling and hyperlink validity, click on the Spelling and Links buttons (see Figure 91). Figure 91 - Run All Page 31 of 49

32 4. Upon running your checks, you will see your error report. To view any errors, click on the Show Results link (see Figure 92). Figure 92 - Show Results 5. When you have completed reviewing your errors, click on Close (see Figure 93). Figure 93 - Click Close 6. When you are ready to publish the page, click on Publish (see Figure 94). Figure 94 - Click Publish Creating a New Page in OU Campus The following explains how to create a page in OU Campus. 1. In the webpage editor, click on the Content tab (see Figure 95). Figure 95 - Click on Content Page 32 of 49

33 2. Click on the New button (see Figure 96). 3. Select your Webpage type (see Figure 97). Figure 96 - New Button Figure 97 - Webpage Type 4. Enter the title of the page in the Page Title Field (see Figure 98). Figure 98 - Page Title Field Page 33 of 49

34 5. Enter a brief description of the page in the Description field. Note: The description will be displayed by search engines (see Figure 99). Figure 99 - Description Field 6. If you do not wish to add this page to your navigation bar, select No in the Add Navigation Item dropdown (see Figure 100). Figure Add Navigation Field 7. Enter the filename for the page in the Filename field (see Figure 101). Figure Filename field 8. The Page Options field provides options such as overwriting any existing file of the same name in the same location as well as setting who has access to edit the page (see Figure 102). Figure Page Options 9. When you are ready to create the page, click on Create (see Figure 103). Figure 103 Create Page 34 of 49

35 10. Your content will be created and you will be taken back to your website directory (see Figure 104). Figure Created Content Deleting Pages Moving Pages to the Recycle Bin The following explains how to delete web pages using OU Campus. 1. Click on Content (see Figure 105). Figure Click on Content 2. Locate the page that you wish to delete (see Figure 106). Figure Locate the page Page 35 of 49

36 3. Hover your mouse over the page you wish to delete (see Figure 107). Figure Hover your mouse 4. Click on the File tab that appears (see Figure 108). 5. Click on Move to Recycle Ben (see Figure 109). Figure File Tab Figure Move to Recycle Bin 6. In the confirmation window, click on Move to Recycle Bin (see Figure 110). Figure Move to Recycle Bin Deleting Pages from the Recycle Bin The following explains how to delete web pages using OU Campus. 1. Hover your mouse over the Content tab (see Figure 111). Figure 111 Content Page 36 of 49

37 2. In the dropdown menu, click on Recycle Bin (see Figure 112). Figure Recycle Bin 3. Locate the page that you wish to delete (see Figure 113). Figure Locate your page 4. Hover your mouse over the page that you wish to delete (see Figure 114). Figure Hover your Mouse 5. Click on the Delete button (see Figure 115). Figure Click on Delete 6. You will be taken to the Permanently Delete confirmation page. To confirm that you wish to delete the page, type delete in the field (see Figure 116). Figure Type 'delete' Page 37 of 49

38 7. Click on the Delete button (see Figure 117). Figure Click on Delete Restoring Pages from the Recycle Bin The following explains how to restore a web page from the Recycle Bin using OU Campus 1. Hover your mouse over the Content tab (see Figure 118). Figure Click on Content 2. In the dropdown menu, click on Recycle Bin (see Figure 119). Figure Click on Recycle Bin 3. Locate the page that you wish to restore (see Figure 120). Figure Locate the Page 4. Hover your mouse over the page that you wish to delete (see Figure 121). Figure Hover your mouse over the page Page 38 of 49

39 5. Click on the Restore button (see Figure 122). Figure Click on Restore 6. In the confirmation window, click on Restore (see Figure 123). Figure Click on Restore Versioning One of the benefits of OmniUpdate is the ability to review and compare different versions of your edited website as well as restoring older versions of your web page should you need to rollback your changes. The following explains how to view older versions of your web page as well as revert to a previous version of the website. Viewing an older version of your web page. 1. Navigate to the page that you wish to edit (see Figure 124). Figure Navigate to a Page Page 39 of 49

40 2. Click on the Check In button to check in to the page (see Figure 125). 3. Click on the Versions button (see Figure 126). Figure Click on Main Content Figure Click on Versions 4. You will be taken to a page that has the different versions of the website, the date it was created, as well as the user who created the document. To view an older version of the page, hover your mouse over the page version you wish to view (see Figure 127). 5. Click on View (see Figure 128). Figure Hover your mouse over the page version Figure Click on View Page 40 of 49

41 6. You will see the older version of the webpage (see Figure 129). Figure Old Version of the website Comparing an Older Version of the web page with the current version 1. Navigate to the page that you wish to edit (see Figure 130). Figure Navigate to the Page Page 41 of 49

42 7. Click on the Check In button to check in to the page (see Figure 131). 2. Click on the Versions button (see Figure 132). Figure Click on Main Content Figure Click on Versions 3. Hover your mouse over the page version that you wish to compare with the current version (see Figure 133). 4. Click Compare (see Figure 134). Figure Hover your mouse over the page Figure 134 Compare Page 42 of 49

43 5. You will be able to see the various changes between the two versions (see Figure 135). Figure Comparing the two versions Reverting to an Older Version of your web page The following explains how to revert to an older version of your website. 1. Navigate to the page that you wish to edit (see Figure 136). Figure Navigate to the page Page 43 of 49

44 8. Click on the Check In button to check in to the page (see Figure 137). 2. Click on the Versions button (see Figure 138). Figure Click on Main Content Figure Click on Versions 3. Hover your mouse over the page version you wish to revert to (see Figure 139). Figure Hover your mouse over the page 4. Click on Revert in the Confirmation Window (see Figure 140). Figure Click on Revert Page 44 of 49

45 5. Your Web page will be reverted to the version you have selected (see Figure 141). Note: You must publish the reverted website version in order for the public to view it. Figure File has been reverted pop up Editing the Navigation Bar OU Campus provides easy access to edit the Navigation Bar that is located to the left of your webpage. By editing the Nav.inc file, located in your website directory, you can add or remove links that will appear on all of your OU Campus pages that have the Navigation Bar. The following explains how to edit the Navigation Bar. 1. From your webpage, click on the Pages link (see Figure 142). 2. Click on the _nav.inc file (see Figure 143). Figure Pages Figure _nav.inc 3. You will be taken to the Navigation Bar editor. To add a new link to the navigation bar, click on the editor (see Figure 144). Figure Click on the editor Page 45 of 49

46 4. Press the Enter key on your keyboard to be taken to a new line in the editor (see Figure 145). 5. Enter the title of your link (see Figure 146). Figure Press the enter key Figure Enter the title of the link 6. To add a link, first, highlight your text (see Figure 147). Figure News & Events 7. Click on the Insert/Edit Link button (see Figure 148). Figure Insert/Edit Link Page 46 of 49

47 8. The Insert/Edit Link window will open. Click on Browse (see Figure 149). Figure Click on Browse 9. Select the page that you wish to link (see Figure 150). 10. Click on Insert (see Figure 151). Figure Select the page 11. Click on Insert (see Figure 152). Figure Click on Insert Figure Click on Insert Page 47 of 49

48 12. Click on Save. Your Navigation Bar will be saved (see Figure 153). Figure Click on Save Checking Out of Pages It is important to note that only one person can edit a webpage at a time. Therefore, when you edit a page, other users with edit rights will be unable to edit the page. This process is called Checking In to a page. When you have completed your edits, you must check out of the page so that other users may edit the page in the future. The following explains how to check out of a page that have finished editing. 1. Navigate to the page that you wish to edit (see Figure 154). 2. Click on the Direct Edit button (see Figure 155). Figure Navigate to the Page Figure Direct Edit Button 3. Log in to the page using you NetID if necessary. 4. Make the necessary edits to the page. 5. When you have completed your edits, click on save and exit (see Figure 156). Figure Save & Exit Page 48 of 49

49 6. To check out of the page, click on the Check In button, located above the WYSIWYG. This will check you out of the page (see Figure 157). Figure Check In Additional Help For additional help, please contact the KSU Service Desk in either of the following ways: Phone: service@kennesaw.edu You can learn more about the KSU Service Desk by visiting their website: Page 49 of 49