Gonzaga University s content management system (CMS) is a software program that allows individuals to create and edit departmental websites. This tutorial demonstrates commonly used CMS functions. For Cascade video tutorials go to www.gonzaga.edu/gutraining and click on Cacade CMS link on left side. Accessing CMS To access Gonzaga s CMS, type www.gonzaga.edu/edit in your Internet browser. Firefox is the preferred browser for editing in CMS. You can request to have Firefox installed on your computer by calling the Help Desk at x5550. Log in to the site using your Gonzaga username and password. If you are unable to log in, ask your supervisor to request your CMS privileges by emailing the help desk at 5569 or Kim Dayot at dayot@gonzaga.edu. Using the Dashboard The CMS Dashboard is your default page when you access CMS. The Dashboard contains a folder tree, or asset tree, that provides easy access to your assets (web pages and content used on web pages). You can view outstanding workflows, view and send internal CMS mail messages, lock assets and view your recent CMS activity all from the Dashboard. You can always return to the Dashboard during editing by clicking on the Home link. It is important to always save your work before accessing the asset tree as you will lose your changes otherwise. The Home link will bring you back to the Dashboard after Workflows alert you to outstanding assets waiting for approval or review. Saved drafts of edited pages are stored in the My Drafts section You can click through the asset tree (or folder tree) to quickly find web pages. Messages can be sent and received between web editors in CMS. Recent history allows you to quickly view the last couple assets you accessed. Technology Education Services, ITS CMS Training March 22, 2014 1
The My Starting Page section provides an alternative to using the asset tree to access web pages. My Starting Page allows you to navigate through a graphical version of the Gonzaga website. You can edit from the graphical site, however, hidden pages will not be visible. The My Workflows section holds any pages waiting for review or approval. Only the approver may change the state of a workflow. Messages may be sent through the CMS system internally to other web editors. If you have an issue that needs prompt attention, it is advised that you use regular email instead of this feature. The My Locks section holds any assets you have locked or checked out. Checking out an asset prohibits other users from making changes to it. Editing a page automatically locks an asset, however the lock will time-out after five minutes. You can manually check out and lock an asset. This prohibits users from making changes to the asset until you break the lock or commit the changes to the asset. Breaking a lock will free the asset and remove pending changes. Committing changes frees the asset and merges all changes. The My Drafts section is where recently edited pages are stored that are not ready to be published to the live site yet. You can save a draft copy when in the edit mode on a web page and it will display in this section. The Recent History section provides links to the recent assets you accessed. This allows you to quickly jump to frequently edited web pages without navigating through the asset tree or My Starting Page section. Technology Education Services, ITS CMS Training March 22, 2014 2
Creating a New Web Page You can create a new web page by clicking on the New menu > GUMainWebsite > Standard Page. You can also create FAQ pages using the FAQ Page template. To create a new page, you need to specify your page display name, choose to hide or unhide the page, and specify your page s system settings. Display Name Your web site s display name is the name that appears as the title for your page. The display name also appears as part of your web site s menu and in the breadcrumb trail. The Display Name shows up as the link on the left side of your web pages. Here is the bread crumb trail which navigation tool that allows a user to see where the current page is in relation to the Web site's hierarchy. Hiding Pages The Hidden option describes the status of a page to outside web users. If your page is hidden, it will not show on the left navigation menu, but can be accessed through links in the content area of another page, or if the address is typed directly into the address bar. If it is not hidden, your page is live and available on the Internet. Choose Yes or No to hide or unhide your web page. A change in hidden status will not be fully reflected on the live website until the rest of the pages in the folder are published, which is done automatically on a nightly basis. System Settings Click on the System tab to specify your web page s system settings. 1. System Name: your web page s system name will become part of the URL or website address, but is not displayed anywhere on the page itself. The system name cannot contain spaces or plus signs at this time. By default, each page is created with the name default. Each folder must have at least one web page named default. The default page is the first page users see when they enter the folder (your website). For example, the ITSS department s main web site s system name is default instead of ITSS because it is the opening page to the rest of the ITSS web sites. 2. Parent Folder: make sure to add your new page to the appropriate folder in the CMS asset tree. By default, pages are created in whatever folder is currently open. Click on the parent folder link to change or confirm your page s location. Technology Education Services, ITS CMS Training March 22, 2014 3
Submitting Web Pages When you are finished creating or editing a web page, you will submit or save your work. Based on your user role in CMS, you will be able to save, submit your work to an approver for review, or directly publish your web page. Approvers can directly publish web pages. If you are a contributor, you must submit your web page to an approver for review or approval. At any time, you may save your work without submitting or publishing it. To submit a web page to an approver: 1. Click the submit button at the bottom or the page. 2. Review the Spell Check page, changing or ignoring suggestions, and click the submit button. 3. Choose your workflow option: submit to approver, publish now, or save only. a. If you are an approver, you will see the publish now option and should choose this to publish your page immediately. Remember: If it is a brand new page which has never been on the system before it may not display until the following morning. Existing pages should update immediately. b. If you do not see publish now, choose submit to approver and click the submit button. The system will automatically notify the approver(s) for your area that there is a page(s) waiting for approval. c. If you would like to submit your page to a specific approver by name, click on the approver icon (see image below) and choose an approver to submit to. They will receive notification that a page is waiting for approval. Click on the approver icon to select your approver. Save Draft You may save a draft of your page if it is one that is a work in progress and not ready to be published to the live website yet. The save draft function will save your current edit of your page and also add the page to the My Drafts section on the Dashboard where it can be accessed at a later time. Technology Education Services, ITS CMS Training March 22, 2014 4
Approving Web Pages If you are an approver, your job is to review, publish or reject websites that are submitted to you. When a website is submitted to you for approval, you will receive an email notifying you of the workflow as well as see a new workflow called Submit to Approver in your CMS dashboard. To review and approve a webpage: 1. Click on the workflow in your Dashboard. You will see a summary similar to the picture below. 2. Click on the name of the website (content) to view the changes. 3. Once on the website, click on the workflow name (submit to approver) to return to the summary screen. 4. Choose your action: Approve, Finish and Publish or Reject to Initializing User. Review Content displays the website submitted for review. The Owner of the webpage is the person who submitted the content to you. You can choose to Approve, Finish and Publish the submitted content or Reject to Initializing User. Editing Web Pages To add or edit content on a web page, navigate to the page using the asset tree or My Starting Page graphical view. Click on the page to open it. Click the Edit tab at the top of the page or the Page icon to view editing options. Click on the Pencil icon to edit the page. NOTE: When editing a web page, you may find that the system will automatically double space your text. If you would like to have things single spaced, in a table for example, instead of just hitting Enter, hit Shift+Enter. The Page icon gives you the option to edit the web page in a new window or edit inline, which allows you to edit in the exiting website window. Technology Education Services, ITS CMS Training March 22, 2014 5
Editing options There are many options available in the CMS software. The word processor-like editing window displays each feature on a graphical button. Frequently used formatting options include bold, italic, underline, right, left, center and justified alignment, cut, copy, paste, bulleting, numbering, undo and redo changes. Less frequently used formatting options are detailed below. Bold, italic and underline formatting buttons Right, center, left and justified alignment buttons Cut, copy and paste editing buttons Bulleting and numbering buttons Undo and redo change buttons Insert Custom Character button. This button allows you to select a custom character and add it to your web page. Subscript and Superscript buttons. The subscript button allows you to create text that is slightly lower than other text on a line (often used in scientific formulas). The superscript button allows you to create text that is slightly higher than other text on a line such as a footnote reference mark. Strikethrough button. The strikethrough button allows you to create text that appears to be crossed out. This is an example of text using the strikethrough formatting option. Styles dropdown box. The styles dropdown box allows you to format your text with different GU website colors and highlights. There are ten different text colors which were created to conform to the color scheme of the website and pages. TIP: To single space between lines, hold down your shift key when hitting enter key Technology Education Services, ITS CMS Training March 22, 2014 6
Format dropdown box. The format dropdown box allows you to format text using predefined styles. The styles are shown below. Paragraph is the default style for each page. Paragraph Address Preformatted Heading 1 Heading 2 Heading 3 Heading 4 Heading 5 Heading 6 Find and replace button. The Find and Replace button enables you to find specific instances of words or phrases and quickly replace them. Outdent and Indent buttons. You can change the indentation of text using the Outdent and Indent buttons. Create/Edit Link and Unlink buttons. You can easily create and remove hyperlinks using the Create/Edit Link and the Unlink buttons. To create a hyperlink: 1. Highlight the text you want to add a link to and click on the Create/Edit Link button. 2. Choose the Internal tab to create a link to Internal links are within GU s website. External links are elsewhere on the Internet. The page icon lets you browse to the GU web page you want to link to. a page within Gonzaga s website. Choose the External tab to create a link elsewhere on the Internet. a. On the Internal tab, click the browse button to locate the GU web page you want to link to. b. On the External tab, type in the full website address or URL of the Internet site you will link to (i.e. http://www.gonzaga.edu). c. For email links, choose the External tab and type the following in the link field: mailto:email_address (i.e. mailto:blackerby@its.gonzaga.edu). 3. You can choose to have your link open in the same browser window as your web page or in a new browser window using the Target dropdown box. 4. Providing a Title for your link creates a screen tip that appears when web users mouse over the link. 5. The Class dropdown box provides text formatting options for your link (GUOrange, GUGreen, etc.) To edit a hyperlink, highlight the link and click on the Create/Edit Link button. Adjust the properties of the link and click Update. Adding a Title provides users a screen tip describing your link. Technology Education Services, ITS CMS Training March 22, 2014 7
To remove a hyperlink, highlight the link you want to remove and click the Unlink button. Insert/Edit Anchor button. The Insert/Edit anchor button allows you to create a point in your web page that can be referenced by a hyperlink. To insert an Anchor point: 1. Highlight the text or general area that you want to link to (the title of a section, the top of the page, etc.). 2. Type in a name for your anchor. Do not use spaces or plus signs in your Anchor name. For example, if you want to name your Anchor, Top of Page, simply name it Top or TopOfPage. Linking to an Anchor: to link to an Anchor point, you will create a hyperlink (see page 6). 1. Highlight the text you want to add a link to and click on the Create/Edit Link button. 2. Choose the External tab to create a link to the anchor point. 3. In the Link text box, type in the # sign followed by the name of your Anchor (i.e. #TopOfPage). 4. Fill in the remaining link options and click Insert. In the Link text box, type #AnchorName to link to an anchor point. Use the External tab to link to an anchor point Insert/Edit Image button. The Insert/Edit Image button allows you to insert images, or pictures, on your web page. You can insert an image that is already in the CMS system (located in a folder in the folder/asset tree) or one that is on your computer. If the image file is on your computer, it must first be uploaded to a CMS folder before being inserted into a page. Adding an Image to CMS: before you add an image from your computer to CMS, save or publish any website editing you have done. 1. Make sure that your image is in.gif or.jpg format, and is no larger than 250 pixels in width and height. Merely adjusting the size in the Width/Height box later will not actually change the file size, only the display. 2. Click on the New menu > choose GUMainWebsite > choose File 3. Click the Browse button to locate the file on your computer. Your file name should be meaningful and should not contain any spaces or + signs in it. 4. Click on the System tab and select the folder you want to add the image to (it will default to the folder that you are currently in). If you want to rename the image at this point, add a name in the system name text box. The system name must include the image s file extension (i.e. Logo.jpg). 5. Click Submit. Creating a Folder to store your images: You may want to create a separate folder to store your images to use on webpages. 1. Click on the New menu > choose GUMainWebsite > choose Folder 2. Enter in a Display Name 3. Select whether you want the folder to be hidden or not 4. Enter in a System Name 5. Verify the Parent Folder 6. Click Submit Adding an Internal Image to a Web page: once you have an image in the CMS system, Technology Education Services, ITS CMS Training March 22, 2 8 011
you can easily add it to a web page using the Insert/Edit Image button. 1. Click on the area of your web page where you will insert the image. 2. Click the Insert/Edit Image button. 3. Click the picture icon to browse for the image in the CMS folder/asset tree. 4. Add Alternate Text to your picture. Alternate Text appears to the web user when they mouse over the image on the website. NOTE: If, once you click the Insert button, nothing seems to happen, you may have a hidden security window behind the scenes that is waiting for a response from you. Hit ALT+TAB to bring up the Security Information window, acknowledge the message, and you should then see your image as part of the Edit window. Edit HTML Source button. If you are familiar with coding in HTML, you can use the Edit HTML Source button to view and edit the HTML code. Horizontal Rule button. You can insert a horizontal line on your web page by clicking the Horizontal Rule button. Choose your line width in either pixels (px) or percentage (%). You can also choose line height & shadowing. You can choose your line width in pixels or % of the page. Remove Formatting button. If you are having trouble removing stubborn formatting on your website, this button will do it for you! Highlight the text you are having problems with and click the Remove Formatting button. Your text will revert to unformatted, or the paragraph style, data. Insert a New Table button. Insert a table on your web page by clicking on the table icon. Choose the table s number of rows, columns, and attributes and click Insert. Text, images, hyperlinks and other tables can all be placed inside a table. Toggle Guidelines/Invisible Elements button. Using this toggle button allows you to view and remove guidelines, anchor icons and other invisible elements on your website during editing. Deleting Web Pages To delete a web page, open the page in Edit mode. Click on the Delete tab. Confirm the deletion of the page by clicking Submit. This will cause the page to be sent to the Web Manager, who will approve the deletion at a later time, in case the deletion was accidental. If you submit a page for deletion and want to cancel it, please email Kim Madsen at madsenk@gonzaga.edu, and include the name and location of the page in the email. Technology Education Services, ITS CMS Training March 22, 2014 9
Contact Information Help Desk: x5550 Erik Blackerby x3865, email: blackerby@its.gonzaga.edu Account Creation and Support: Kim Dayot email: dayot@gonzaga.edu, x5569 Important: Please have your supervisor email Kim and provide the following details when requesting a new CMS account: 1. Name and contact information of person who needs account 2. Department and area 3. Role of account (either contributor or approver) Cascade Training Videos: 1) https://www.atomiclearning.com/login/gonzaga 2) Click on Custom Training Tab 3) Find Cascade CMS Videos and watch For Images and Pictures: http://www.gonzaga.edu/marcom 1) Click on Tool Kit 2) Click on Web Photos 3) Click on image to view it and then to save right click and choose save as Technology Education Services, ITS CMS Training March 22, 2014 10