Looking for the Web & Digital Communications introductory training session so you can edit the webpages in your department website? You've come to the right place.
The two-hour online session (1:20 of video) covers:
- How to login and access the pages you need to edit
- Using the editing system
- Adding images, links, text, documents
- Creating new pages, site sections
- Editing your side navigation and contact regions
- and a few advanced skills as well.
This training is required for all website content managers, whether you require editing access to an existing site, or would like to have a new website created. In addition to new CMS users, anyone wishing for a CMS refresher is encouraged to watch the video.
Here's what you need to do:
- File a Web Support Ticket requesting your username and training module within the CMS. Please include your NetID in your message - we'll use that to create your CMS user account. We'll set you up within 72 hours.
- Once you have your login and training module, start the video below and follow along.
- Take the quiz (a little further down)
- Also complete part 2 of the CMS Intro: CMS 115, Creating Accessible MSU Web Content.
Once you've done all that, we'll grant you the access you need and off you go!
CMS 110: Training Video
Please find the full transcript at the bottom of this post.
CMS 110: Quiz
Once you have taken the quiz, we'll get in touch within a day or so, granting your access to your requested sites, and you'll be off and running!
Move onto CMS 115
Once you've finished CMS 115, we'll grant you access to the websites you need.
Once you have completed all your introductory training, consider attending one of our advanced trainings. In addition to the introductory training, we have developed the following courses:
Full Video Transcript with Timecode for CMS 110 Training Video
>> Hello and welcome to CMS 110, "Introduction to the CMS". This is the first course in the CMS course curriculum and if you have not contacted our department yet, please do so in order to get a training module. Due to the length of this course, it is broken down into different parts. Getting started.
First off, we'd like to talk about the browser suggestions when working with the CMS. The overarching theme is, please do not use Internet Explorer, use Google Chrome, Safari, or Firefox. So those of you that have communicated with our department and have already received your training module, please go to "http://ou.montana.edu /cms-training". When you do, you will be taken to a web page like this. And down here at the bottom we have the hello future web developers, a little introductory paragraph and your training email. This is the email that you use when you communicated with our department and made your RSVP. So, I'm going to do mine.
Now before I hit let's go, I'd like to point out the training material, everything that we're going over today is available online for download. We have both this course, this recording rather, and the actual PowerPoint presentation itself. So, those links can always be found right here. And without further ado, let's go ahead and click let's go.
And when you do that, you'll be taken to a new page with a giant red arrow on it. Now the red arrow is pointing to a small, light grey quarter circle here at the top left of our footer, and you'll notice if you hover over it with your mouse, it's actually a link. And we call these links, direct edit buttons. And what does that mean? It means that this is how you will be logging in. Every single page that is published by the CMS will have this direct edit button so you can easily choose a page that you want to work on, click on its direct edit button, and instantly get into the CMS. This is our Version 2 web template. This is what we are upgrading everyone's sites in the CMS to be. Some of you, like the human resources department, are still on our Version 1 web template. And the web templates is really just some styling that we've pulled over to your web content. There's no change beyond topographical font sizing, different footers, headers, etc. But if you're in our Version 1 web template, if you go down to the very bottom, your direct edit button will be just to the right-side index. So, my tip is move to site index, have your cursor right there, and then gently nudge it to the right until the hand reappears. That will be your direct edit button right here. So, I'm going to go ahead and close this tab out so we can come back to our sample page here. And without further ado, it's time to log into the CMS. So, I'm going to click on that direct edit button link, and I'm going to be taken to the CMS's login screen. Now, if you're using Safari, and sometimes with Google Chrome and Firefox, the browser has a habit of truncating your URL. So, instead of taking you to what we just clicked on, it might take you here even though this looks like the login screen, the system no longer has enough information to figure out which site to send you to and which web page you are about to edit. So, if you try to sign in now, you're going to get an error. Now, the way that I usually combat this is I will go back. So, we're going to go back to the introductory training page here, I'm going to hover over this hyperlink, you know, it's really just a hyperlink of a shape. I'm going to right click on it, I'm going to go open link in new tab. Let's close this tab. Sometimes that is enough to force your browser to go where you told it to go. So, if you don't see this, you need to go back and try to force your browser to actually take you to this giant URL. So, that's the first thing you need to be aware of.
Over here on the right, we have some alerts. So, anything new coming down the pipeline. We have our quick pages button. We'll talk about those in a bit. Snippets, again, we'll cover here in a little while. And we have advanced training courses. So, while you're listening to this, the CMS 110 course, you can take CMS 120, "Introduction to Building a Website", where you can learn more about not just where the buttons are in the interface, but thoughts, and tips and tricks on how to organize web material in general. You know, the digital book of your department, college, research group, etc. CMS 30, for those of you that are interested in building web forums, this is a required course and you can click on these links, sign up for these courses. And then finally, CMS 210, which is, "Introduction to Web Accessibility". While our web templates take care of most of this functionality automatically, it is nice to learn some of the tips and tricks on the content that you are preparing and make sure that you're not excluding any of your audience members.
Moving down a little bit we have, "Ask a Question". This will take you to our support ticket system. Help center, we have a large collection of help documentation for you. And finally, register for a training. So, if we scroll down here at the bottom, we have the introductory training calendar where you can click and RSVP. Advanced trainings, you can click and RSVP for CMS 130, "Web Forums". The other ones are sort of a by request where we wait for oh, about 10 some odd people to sign up and then we schedule a meeting where they can all attend. And then we have open supports. Feel free to stop by and get some help in person. We would be more than happy to have you.
Now, we are very aware that web pages are probably 0.05% of your jobs. It's 100% of ours. So, don't worry, there's absolutely no stigma into coming down here at the bottom sometimes, and if it's been six months, you can't remember how to use the interface, please feel free to come back and get a refresher.
Okay. Logging in, so up here at the top left, you are going to use your Net ID and Net ID password as your credentials. I'm going to use my simple little training account here, so pardon the difference.
And when you do that, you're going to be taken to the CMS's main interface. So, let's start off. Let's look at the blue bar here. Let's hover over and you'll notice that the hover activates drop down menus. That's just something you'll remember within this interface. Don't click on the menu, hover over it, and then you can choose your items. So, we'll ignore dashboard. If you hover over content, clicking on pages will take you to the main file browser of the CMS. Assets we'll go into in a little while. And then recycle bin is exactly the same concept as your trash can or recycle bin on MAC and Windows. Reports, go ahead and ignore. And then finally, add-ons. Add-ons is nothing more than a list of links, or I guess a menu of links here, the main site lists. Those of you that have been working with web forums, you are already familiar with the sister web product [inaudible] mail. If you work on the MSU calendar, news, RSVP's, then you are already working within the COPE [phonetic] system. The CMS knowledge base, this is perhaps one of the most important links in here, so you can click on it. It will take you into the Zen Desk Help Center [phonetic]. And you can see there's a lot of documentation. We ask that you try to answer your own questions by looking through this material first as there's usually a 24-48-hour turnaround time on our tickets just due to sheer volume and staffing. If you do not find the answer to your question here, you can come up here to the top and click on submit a request. When you do that, you'll be taken to submit a request form, here you give your email, department, subject, try to describe your issue in detail, you know, sentence fragments are very hard to understand especially since we maintain over 15,000 web pages. And then most importantly, is the web page or URL. What page are you having problems on? Give us something that we can put right into our browser and start right up, get you some help as quickly as possible. So, submit a request.
Moving along on add-ons, so we are stopping at the knowledge base. We have the MSU web communications website. If ever there was a website to document, maybe in your bookmarks, it would be: montana.edu/web. This web page includes information on building and editing websites, the content management system, and all the documentation and course work, the curriculum. Our other apps and services, meeting staff and submit a request. So, you can submit a request directly from our web page and you can scroll down, too. So, we have our build or edit a website, ask a question, help center, use our apps. We have our calendar listed again and links to our other services. So, montana.edu/web is perhaps one of the most important links that you need to have in your bookmarks or written down somewhere.
Finally, support requests, this is just another way of submitting a support ticket. So, lots of ways to do that. Over here on our right, and we have a hover drop down menu where you can log out. Now, if you click on help, even though I just told you not to, clicking on help will take you back to the CMS help center. And if you want to look through the vendor docs, you can look through there, and then that brings us to the silver bar. So, clicking on pages will do exactly what this does. So, if you hover over and choose pages or synonymously if you click on pages, it will take you to the file browser of the CMS, and then it lists the path. A website is nothing more than a bunch of files and folders. So, if you can organize your "my documents" and my images directories on your respective computers, you can organize a website. It's really the same thing. This is telling us that we're in the Adam Griffith site section. There is an interior site section called the introduction, and we're looking at the index sub piece CF file [phonetic]. So all web pages in the CMS will have a ".pcf" file extension. You don't need to worry about it other than, "Oh, hey, that's a web page." Over here on the right, we have which website we're in. Right now, I'm in the CMS training. You might be a manager of multiple websites. You might have to make edits to one particular page or set of pages within a site, but then you need to go over to your departmental page in a different website, you can choose the dropdown, you can find it by filtering. So, if I wanted to go to test Adam, I could do that. I could click on it and it would bring me into the test Adam website. So, this is where you are in the CMS. This concludes this part of the CMS introductory training.
Working with web pages. Let's go ahead and edit a page in the CMS. So, from the first part of this introductory training course, we started off by logging into the CMS, using this direct edit button, highlight it in red. We're going to do so again. I had already logged in once, so I'm being taken directly back to the page where we left off. Let's go ahead and make some edits to a page in CMS here. What we are going to do is expand this show file navigation and click on "first-page.pcf", and then we're going to collapse this menu, give ourselves some real estate to work with. Next, let's click on preview. So, one of the big concepts in the CMS is the idea of staging versus published. Staging is just a fancy word that means working copy, kind of like having a Word document on your desktop that you don't send your boss until you're done with it. And production, or publish, the page is then put live or published live. The staging or working copy is always available under preview, you can scroll around and you can take a look at it. You'll notice at the bottom right of preview, you can see the view as published button. If you click that, then your browser tab will open, and you'll be taken outside of the CMS to the publish URL's. So, now we're outside the CMS and we can take a look at the page that everyone else sees.
The CMS is kind of like a Xerox printer. You do a bunch of work on staging, and when you're ready to go, you just publish it and like a Xerox printer page, boom, out the page goes and it's available for everyone. And this is it. So, let's collapse this tab, let's come back, and let's scroll to the top here, taking a look at this. It looks pretty good, but we want to make some edits, right? So, the first thing that we need to do is we need to hover over this lightbulb that says, "check out", and we need to check out the page. And you'll notice that when we do so, suddenly we have more controls and the lightbulb is lit up. The lightbulb is the CMS's check-in/checkout system. When you have material checked out, kind of like a library book, it means that no one else can work on the webpage and that keeps concurring edits from overriding each other. If someone else has the material checked out, it will be a lock icon, and sometimes you can mouse over kind of like I'm doing right now, and instead of saying, check-in, it might say the first and last name of the person with the material checked out. Maybe your boss or co-worker has checked out a page when they've gone on sabbatical or something like that, you need to make edits, you can't override, but we can. So, if you take the URL from your browser, paste it into a support ticket, tell us what you need, like "Hi, I need this page URL unlocked", we'll go in there and open it up for you guys again. So, that's the check-in/checkout system. It's really, really neat.
Now, let's click on edit. Edit looks an awful lot like preview except you start having these green buttons all over the screen, like content title, subtitle, and main content. What are these? This is the true power in the CMS. A long time ago, every single person was handed a rough HTML template, asked to clone it a bunch of times and build their website manually. And they were responsible for building the headers, the breadcrumbs, the side navigations, the footers, etc. without messing up any of the code, and putting their own main content together. Now you guys as content developers in the CMS, merely have to maintain the material in these editable regions through Microsoft Word-like editor and then our templates will wrap around your content templates that include the header, the footer, and all of the other internal structures that you no longer have to worry about. The editable regions are kind of like Lego's, you can bring different sets of them in and out of existence at any time, and the ones that are active, will be these green buttons. So, let's go ahead and click on main content. Let's try editing one of these regions. When you do so, you will be taken into an editor that looks remarkably like Microsoft Word, [phonetic] 1997, including all our favorite icons, like the 1.44 meg floppy disk. You'll notice that all the tool tips are present, so if you don't know what a button does, you can just hover over. All our usual keyboard suspects are also available, so CTRL X for cut, CTRL C for copy, and CTRL V for paste. Additionally, you can click CTRL S and a little ribbon at the bottom of the screen will let you know that the save operation was successful, but it won't boot you out of the editor like clicking on the 1.44 meg floppy disk. It's kind of like an inline save. So, those are the useful keyboard shortcuts, exactly the same ones as Microsoft Word from 1997.
Now, one of my favorite buttons in both this editor and in Microsoft Word is this button, the remove formatting button. Every single one of us knows that when you copy from a secondary source, say a webpage into our Microsoft Word document, maybe this document is in a proposal that needs to be very crisp, that copy/paste operation brings a lot of unwanted formatting into Word. We don't like that. So, both in Word and this editor, I always select everything that I have just copied, maybe it's this, and I click the "remove formatting" button. When you do that, it purges off all styling and takes it right back down to just the pure paragraph, gets rid of bolds, underlines, backgrounds, everything, cleans it off. So, my rule of thumb when dealing with the web, if I have to copy/paste from a PDF or something into this editor, I select everything I just pasted, click this button, and then use this editor to properly format things.
Moving right along, we have unordered and ordered lists. So, if I wanted these elements to be bulleted, I can do that. If I want them to be numbered, I can do that, so, as one would expect from Microsoft Word. You can also create links and you can do so by making a selection, and clicking on the insert edit link dialog. When you get the dialog up, you can either enter the link URL or you can click on the browse button. Anytime you are linking to anything in your site, please click on the browse button because it will give you the select dialog. One thing you need to know about the select dialog is that this dropdown must also say, "staging". Don't ask, just kind of write it down and just make sure it always says, "staging". And then we can use the breadcrumbs, which do what all breadcrumbs do best, they take you up to the level in which you're clicking. So, if I want up to Adam Griffith one, I'll click on that. If you want to go down a level, you can click on the folder and then you can choose a file. So, I'm going to link to first page PCF, it's a little weird link [inaudible], but clicking insert, then you see the really cool part about the CMS. This is called a dependency tag. They're super cool and what it means is, you can entirely refactor your site and there would be no broken links because the CMS will go through and refigure out what your new name of the file is and where it's new location is. So, dependency tags are your friend. Don't worry about them or be afraid of them, the more, the merrier, less work for you. So, I'm going to click "insert", there it is. If you re-highlight the text, this button appears active and you can click on it again, you can change out the link. So, like in Microsoft Word, we're moving down here now to things like the paragraph. Headings, headings are really important. Please do not use Heading I, that is reserved for the page title. That's an accessibility issue. But you are free to use Headings 2, 3, 4, 5, let me scroll down one more, VI, and please do so in sequence. So, imagine that I wanted to make a heading, so I'm going to say, "This is a heading", this is Heading II, and I can highlight it, and I can come up here and I can choose Heading II, and you'll notice that I accidentally did this as well, and it's because I highlighted more than I intended, but don't worry, you can highlight this, come back, make this a paragraph, pretty much like exactly in Microsoft Word. Maybe you have Heading III and you can come up here and you can choose Heading III, and you'll notice that since the cursor is just blinking in the line, it will turn the whole thing into Heading III. Heading III's fit nicely under Heading II's, just like Microsoft Word, you know, it's all the same concepts. So, if you're unfamiliar with editors in general, I would highly recommend taking a look at the linda.com, which is provided through the library and it has some things on Microsoft Word because we use the exact same concepts.
Other fun things you can do with Headings, if you're a keyboard enthusiast, you can use CTRL 2, for Heading 2, 3 for Heading 2, CTRL 4 for Heading 4, 5 and 6 respectively. So, it's a way of passing the load off a little bit on your left hand to keep you from carpal tunnel. So, yeah, those are headings. Styles, you could have maybe some important piece of information like "Important, midterms due on my desk no later than 5:00 p.m. 5-5-2017". You really don't want it to be a heading because it's not a heading, so I'll take it back down to a paragraph, but then you can scroll down and we have these different alerts. The colors have meaning just like a red light, a yellow light, and a green light. And this is something I want people to really focus on when they come to my page. So, it's at the tip-top of my page. And I'm going to make it alert danger, so it's red. And just to make it a little more fancy, I'm going to bold the word important, and save. So, I've just made this paragraph an alert by highlighting the text, you can see it's a paragraph with this alert danger styling on it. And remember if you don't like what you're doing, you can always come back and remove formatting, and it will take all that right back off.
I'm going to go ahead and hit, "undo" because I want to keep this alert, but I'll leave it to you guys to play around with this editor a little bit with respect to adding headings, maybe changing some text to red, bulleted lists, etc. We're going to go ahead and try inserting an image. Now, there's more advanced formatting involved with getting an image on a web page, but I'm going to go through the mechanics with you guys to teach you some accessibility concepts. So, I'm going to put the cursor down and then I'm going to click on, "insert edit image". Now when you do, you get your insert edit image dialog and let's go ahead and grab an Andromeda Galaxy image. Let's just go out here to the web --
I'm going to copy that image address. So, imagine you've gone out somewhere to some person's website, you grab their image, you know, there it is, everything is super, and you're like, "Alrighty, insert. Image description cannot be blank". What's an image description? Well, it's this input field, but what is it really? An image description is what is read by a screen reader when it selects the image. And my rule of thumb is always to try to enter some text that covers the purpose of the image, like what text would I use if I could not use this image at all? And maybe it's just as simple as, "Andromeda Galaxy", maybe that's the whole point of having it on the page. What happens if you had a more advanced sort of image, maybe it's the Phantom of the Opera poster, it's got Christine Dia [phonetic] played by blah, you know, the Phantom, played by blah, composed by, conductor, all this textural information baked into the image. What do you guys think would be a suitable image description? And feel free to pause.
Well, if you have text in your image, then you need to reiterate the image text in that description, or you need to simply say, "Phantom of the Opera poster" and then in an actual paragraph or bulleted list on the page itself, perhaps the next two or around the image, say, "Christine Dia played by blah blah. Phantom played by blah". So, we need to meet the moral requirements and the legal requirements to make sure we don't drop parts of our audience. Now it goes without saying that if you have an image URL that's linking to some image that's not on your site, meaning you have not uploaded and published it yourself, you must make sure that you have copyright permission to do so. It gets quite expensive if there's a lawsuit. So, please, please, please make sure that if you're linking to an image, you've been given permission to do so.
Now, let's go ahead and do an example of an image on our site. We'll talk about uploading images here in a bit, but right now we're just going to go digging around for one. So, I'm going to click on the browse button, we're back in the select dialog, we do the old, "is this staging" dance? It is. And let's go ahead and grab this image, that's nice, click insert, an image, like another file, anytime you're linking to something, you get our friend the dependency tag, that should make us all very happy. And then the image description for this, let's go over here, let's take a look. So, this is the Bau Shock [phonetic] near Young Star LL, so you could say, "bau shock [phonetic] near young start LL da ta da ta da", and you would fill in all the text that you wanted to reiterate. And then you come over to appearance, here you can change the display dimensions. Now, there are three major rules with respect to images. One, you must upload the image at roughly the size you're planning on displaying it at. Imagine a magazine, if you hand the editor a massive image that could go up in Time Square, they're going to be saying to themselves, "This can't fit on the page." Same idea with a website. If it's going to be on the page at 400 x 300, go into Photoshop long before you get anywhere near the web, and crop that image down to 400 x 300. So upload the image at roughly the size you plan on displaying it at. Second, make sure that image is no greater than 72 dots per square inch. Most people's monitors are not capable is displaying more pixel density than that anyway, so there's really no sense in having more than 72 dpi. And the third rule, which falls naturally from the first two is do not upload images of large file sizes. If you follow those three rules, your website will look quickly, especially for folks out in cornfields with 3G. They don't have time to wait while their webpage loads massive images that you've uploaded. So, follow those three rules and you'll have a very fast website. Then you can come to the dimensions here and you can say, "Okay, well, I've got this 400 x 300 image, but on this particular page, I want to scrunch it down just a little bit more. So, I want the browser to go ahead and resize it". I'm just tabbing through here taking it 300 x 188. So, you can tell the browser to take this image that you've got nice and small now and say, "I just need you to resize it just a little bit more." And you can click "insert". Once an image is on the web page, you can click on it, you can right click, you can go back to insert edit image, here you can readjust the values, you can drag and drop the corners, or you can delete. I'm going to undo that because I want to keep it around, and let's save. Additionally, you can edit the HTML source. This HTML source is the source for this region only, not the entire page, because our web template needs to protect that and make sure it's all accessible, [inaudible], etc. But the CMS is never in the business of telling you what you can and cannot do and if you're a web developer and you want to get at the actual HTML of each of these regions, you can. And if you're interested in working with PHP database connections, that kind of thing, go ahead and submit a support request, let us know what you're trying to do, and we'll work with you to set up other editable regions so you can connect to databases and so forth.
So, that's the HTML source editor. And then we have insert predefined snippet content, which we'll talk about in a bit, and insert edit asset. So, I've gone through, made a few changes, not a whole lot, but enough to see how it looks so far. So, I'm going to hit the "save" icon because now I want to see how my editable region looks in the context of the entire page. I'm looking at the staging version now. If I want to verify that none of my audience is seeing this sort of half worked material, you know, maybe I'm spending a week putting this together, you can scroll down to the bottom right of preview or edit, and click view as published, and sure enough, I don't see my changes.
So, changes aren't live yet. Now, maybe I need to go home, right, it's 5:00 p.m., I'm going to go ahead and check this file back in, go home. But what happens if one of my coworkers comes by, checks out the page, and accidentally deletes some of the stuff that I spent two hours building? Right now, there's no way for us to tell the difference between their edits and yours. But, if we check out the page and this time we save a version. So maybe I say, "started adding new program information on blah." All right, it's something to give me a little information on what I've been doing. And you can save the version and it says, "Back up successful, Version 40 created." Well, fantastic! Then I can check it in and go home. Then if somebody comes back and tries to change things up, perhaps not to the way that we wanted it, I could check out the page the following morning, I can click on the versions table, and I can find the different versions as each row. So, the CMS has a really, really rich version control. As long as you're using the same version, you can do a lot with this. You can, again, through hover, you can revert to any version that you want and the green row is the one that's live. When you publish a page, it creates a new version. It tries to create that history for you. So, if somebody made an edit beyond Version 40 and they didn't save their own version, I could revert, it would say, "Okay, we're going to revert on staging." I would say, "yes". And there it is. And then if I go back to edit, it starts me on that version and I can continue working forward. So, let's just save a version. So, what if I'm ready for these edits to go live, right. I've spent a week saving versions diligently once a day. I'm going to click on publish. Here you can run your spelling and links checks and you can provide a version description. So, I might say, "done adding information about program blog". So, then you indicate, "I'm done". So, we will do that and we'll publish. Now, done here in the ribbon, there is a view a new window button, and that will show you the published version or if this ribbon collapses before you can click on that button, don't worry, remember that under edit and preview on the bottom right, you can click, "view as published", and you can see your changes. So, congratulations, you guys are now web developers. You have gone into a piece of web content, you have manipulated it, and you have pushed it live. Now, because you are web developers, you joined this awesome group of people who have to deal with web browsers. And web browsers are built for speed and they don't always ask the Internet for the latest versions of things. What does that mean for us? That means that if I've gone in and made some changes to this page, I have published, not two seconds ago, I might when I look at this page again in my browser, see the old version because the web browser is still loading old pieces from my hard drive, not the Internet, but from my hard drive and displaying old stuff, and it tries to do that because it's faster. I don't want that. I want the stuff that I just put live, put up on the Internet, we're actively changing the Internet. So, some of the tips and tricks I do with this, is in Google Chrome, CTRL Shift R. Sometimes if you pound that two or three times, it's enough to kick the browser into asking the Internet for the latest versions of everything on the page. If that doesn't work, sometimes I will grab this URL, I will paste it into Firefox, a different web browser, and verify that way. And then finally, the old adage of ITC or rather UIT, have you tried turning it off and on again yet? Sometimes that's the only way of kicking your browser into loading the latest version of a web page. So, these are just some of the things you'll have to deal with now that you are part of the cool web developer team. All right. Let's go ahead and close this tab. I'm going to check this file back out again and this time I'm going to go over to this drop-down menu to the right of publish. We have schedule publish. You can give it a date, a time, maybe this repeats every so often, and it will email you when it is done publishing. So, if you need something to go out at 12 in the morning, you do not need to stay up, you can tell the CMS to let you know when it publishes that material at 12 in the morning.
The CMS can also submit for approval. So, you might say, "I need to run something by aerial, give it a subject, give it a message". Aerial will receive an email saying, "Hi. Adam has requested that you look over his publish request. Do you accept or reject it"? If she accepts, it goes live, if she rejects it, it does not and I get an email. Right now, submit for approval is optional for me along with who to send it to. We can change that. If you want to be the gatekeepers of your web content, meaning you're the only one with the blue publish button, but all your student workers might only have "submit for approval", we can do that. Submit a support ticket to web support and let us know and we'll help you out.
Last but not least, we have expire [phonetic]. So, you can add the replace one page with another, which I've never really fiddled with, or full on recycle a page off the web server. And so, if you need to pull off a page, maybe about midterms, get it off at 12 in the morning, this will do the trick, dates, time, email to yourself, and schedule it. Please note that recycling does not delete your staging copy because the CMS is like, "Well, they might want to update their material and then republish again at a later time". It only deletes that copy that's been Xeroxed out available for everybody, not the actual source or staging directory.
So, that's published and this concludes the section on editing an existing piece of web content.
Creating brand new stuff, making the new content. Let's come back to "ou.montana.edu/cms-training". Let's scroll down here to the very bottom and training email, again will be the email that you used when you RSVP'd for this course.
Click "let's go", login using the direct edit button, enter your Net ID and Net ID password, and, again I'm using my training account here.
And we come back into the CMS's main interface. So, rather than continuing to edit existing web material, we are going to hover over content and choose pages. This will take us to the main file browser of the CMS. It has a table of name, status, modified, options, and staging versus production. And you'll notice if you hover over the rows, different menus appear. Our vendor loves hover. The main file operations that we're all familiar with are hovering over file and then choosing rename, move, copy, or move to recycle bin. If you check box multiple files, those options are now available up here in the blue bar and you can perform them on MASS [phonetic], so maybe on these two files at the same time. So, those are some nice mechanics about using this interface. It also tells you that you can click on home to go all the way to the top or in the Adam Griffith One site section, and we're in the introduction interior site section to that one. Let's create a new site section. And I want to do it in the introduction site section, so I'm going to say, "Okay, new". We're going to take a look at our options here. The first thing to note is new folder should be only be used to further organize your images and documents directories. Do not, do not, do not use a new folder and then add web pages inside of it. Our new folders are only appropriate, again, for images and documents.
We'll skip over these two for now. We'll cover those here in a minute. And we'll start off with new section with index file. This is what you will use to further organize your web material. So, Adam Griffith One is a site section. Let's create another one, click, directory name, enter the directory name that will be visible [inaudible] campus and in URL. Well, let's say if I'm making a Star Wars site section, I might say something like, "Star -Wars". This needs to be all lower case, short, concise, clean and no punctuation whatsoever because this will literally appear in the URL of the browser. We don't want anything overly complicated. And then the page title, so what is the point of this site section? Well, human readable, it's about Star Wars, that's what I want to go into the index file of this site section. And if I click, "create", the CMS will start us off -- the CMS will start us off in Adam Griffith One, introduction, now we're in the interior site section to that, so Star Wars, and we're looking at its index file. The breadcrumbs will directly reflect where you are in these site sections. So, CMS training, that's the site name, user training, that's the title or section title that goes with that in Griffith One, introductory training, that is the section title that goes with introduction, and finally Star Wars, that is the site section title for Star Wars. So, the breadcrumbs are referring to the actual skeleton or site section structure of your website and that allows users to both delve into your pages and then click on these breadcrumbs and be taken to the index files at each of these levels so they can go down in and they can go up, kind of like swimming. Well, great. Well, we've created an index file. This is kind of like the table of contents of my digital book or site section on Star Wars. I'm going to check this file back in. I'm going to come back to content pages. I want to add more pages. I don't just want the index file and to do that, we'll click "new", and we have these two options. We're going to skip over this one for now, it's just a quicker way of creating a page. But we want to actually cover some of the cool options that we have to offer. So, let's click on "new page". Page title, this what appears at the top of your page and maybe I'm going to write a page on "a new hope". We'll start off with the first, the true first, Star Wars movie. Keywords, don't worry about it. Description is kind of cool because if I look for shoes, who listening uses Google? We all do, right? And we look at Google and Google has some sort of title, they have the URL usually going on, and then they have some text underneath. These pieces of text are defined by the description for the page. And if you don't define a description, then you'll get something like this. Google will grab the first x number of characters off the top of the web page, slap an ellipsis onto it, and call it good. That might be fine for most web pages where you're talking about a singular topic, but what happens if you have a listing page, like your faculty and staff, someone is searching for Professor Jane Doe, the Google search returns your page because Jane Doe is on it, but then John Doe's bio, who is directly above Jane Doe, shows up. Now they have Google search results about John Doe and they searched for Jane Doe. It gets very confusing. So, description, entirely up to you, but it does help clean up Google search results. Show subtitle, why not, it's just another editable region. We can bring these things in and out of existence. Show image better, sure, why not? Let's turn that one on. Smaller width image banner, I'll let you guys play with that. That's a more advanced option. Show left navigation, leave this one checked unless you have a really, really good reason to turn it off, and the reason why, if we look at one of our web pages.
Let's take a look at the CMS page here. If I turn off the left navigation, it turns off both the left nav space and the contact region. This is especially awkward if you have a user who is reading about say, a scholarship that clicked on that page, they're in the scholarship page, you have turned off the navigation, they get excited, they want to apply for this scholarship, but the apply page is no longer available, the nav is gone. Now you've trapped the user on the page talking about the scholarship, there's no way for them to apply for it, they'll get frustrated, and they will leave your site. So, my rule of thumb, always leave that on unless you have a really, really good reason for sort of trapping your user on a web page. Show right side bar, why not, just another editable region. I'll let you guys explore these other advanced options and then we come down to file name. So, just like our site section title, the file name will appear in the URL on the browser, so it needs to be all lower case, like, "a new hope". I like doing this like this. I use dashes rather than underscores. It's just easier for me to read, but again, no punctuation, all lower case, clean, concise. If you dump a sentence in here, Google will put your page at the bottom of the search results or not at all because it will think your page is spam. So, short, concise and clean, new-hope.
It will create your page. The breadcrumbs indicate that now we're in Star Wars site section and we're looking at the "a new hope" page. And then it makes the content title the exact same as the breadcrumb. And it turns on the subtitle, banner, and sidebar regions and brings us into edit. It also automatically checks out the page for us. So, now we're ready to begin editing this new page. But before we, what if I decide that I do not want this breadcrumb to be the same as my content title? Real Estate is at a premium up here and not so much down here. So, I might want to have something different up here and while I'm at it, I might decide that I did not, in fact, want the subtitle region turned on. This is easy. All you need to do is with the page checked out, click on "properties", make sure you are in the parameters panel, and then change the title. So, maybe I am super excited about "a new hope", and I also don't want the show subtitle active. So, let's turn that off. Let's hit save. Sure enough, our breadcrumb has changed and to prove that subtitle is disabled, let's click on "edit", and sure enough, it's gone.
So, we've talked a bit about turning editable regions on and off, but now let's talk about snippets. Snippets are pretty cool and let's go click on "pages, introduction, snippets". So, we're taking a look at this snippets page, and when we click on it, it automatically moves us into edit. I am going to checkout this page, let's click on "main content", and let's take a look at some advanced formatting that we have available for you folks, including images floating on the left with some captions, right. Maybe you want to make something that looks like a newspaper article. Well, how do we get images with specialized formatting onto our pages? Put your cursor down, so I want this image to appear roughly at this height on the page, so I'm going to put the cursor down the far left. I'm going to hover over insert predefined snippet content. I'm going to choose from the category content pieces, and then we have several different options. We have the image on the left with no caption, image on the left with one, and the same thing for the right. Let's put one on the right with a caption. So, you click on that. Don't worry about the preview. The preview is just kind of rough and click "insert". So, now at this height on your page, it has placed an image on the right and given it a caption. Switching images out, you can just right click on it, insert edit image. I usually will delete everything out of the URL field, clear out that placeholder image, click on "browse". Again, since we are in the select dialog, please make sure that that dropdown says, "staging", and then starting this off in the images directory. Makes sense, because that's where we should be putting those, choose an image, and maybe let's do this one this time. Go ahead and enter an image description, so you could say, "Star field dat ta da da" or something more appropriate. I'm going to resize this in the browser down to about 400 x 250, make that fit nicely, looking pretty good, CTRL S, inline save. And now I want to add a caption, so I will highlight the text, "this is a cool picture from the Hubble Telescope about star fields" or something like that. And CTRL S so you don't lose your work. Now snippets are complex pieces of HTML and sometimes you can break them. One example of this is if I hit backspace one too many times, you'll notice that I no longer have the option to add the caption. More advanced snippets will break in more spectacular ways and the only way to recover from a broken snippet is to put your cursor down, try to select some piece of the broken snippet or have the cursor blinking inside of it, and then down here at the bottom left, on this path, click on the thing that is farthest left. And when you do that you are not only selecting the thing that you can see, in our case this image, but you are selecting all of the structural stuff surrounding it. Let's get it out. Let's hit "delete". So, you hit the delete key, the whole thing comes out and you can put the snippet back in and try again. That is the only way to recover from a broken snippet, just get the cursor blinking somewhere inside of it and hit the delete key. We don't just have images, we have tables. So maybe I want a table between this paragraph and this paragraph, I have hit enter so my cursor is blinking. I'm going to come back to insert predefined snippet content, choose content pieces, and we have two options; we have both the table light and the table dark with stripes. I like this one, insert. It comes built-in with a nice table caption, we have our table headers, both for columns and rows. You'll notice that when the cursor is blinking inside of a table, the last row of the Wizzywig will illuminate, tool tip included. So, insert row before, after, delete the row, etc. etc. And everything that's available in Microsoft Word '97 is available in this editor. And the moment you click out of that, that tool bar will disable. So, there are tables. We do not recommend copying tables from a .pdf and trying to paste it wholesale in. We recommend putting the snippet in and moving the content over piecemeal, otherwise you can break the accessibility of these tables. Screen readers need to know that this table header pertains to this column and this table header pertains to this row, and that way when they read them, they can read them in context so they're not just rattling off, you know, a four-row table and you're trying to guess which column is which, not helpful.
And I'm just going to select all, delete. I'm going to clean off this whole page. We can do cool things like under a layout, frequently asked questions pages. So, here we're going to hit FAQ. I'm going to insert and then I get this weird table thing. It's got instructions on it and it's got a couple of columns. These are called table transforms and they have the header text, in this case, and the content. Let's fill in some blanks. We could say, "this is the first question on this page", and our content could be, "something, something, something, something", and maybe I could bullet a list of links directly underneath that something. So, you can do some nice formatting. You can add and remove rows. So, you can add questions and remove questions using these buttons because you're in a table. And then the super cool thing about table transforms snippets is the moment you hit "save", a transform into complicated HTML that you guys don't need to know. You have a very simple editing environment and then you get to do fancy stuff like this or standers for the frequently asked questions snippet.
Well, that's cool. What other advanced things can we do? Let's come back to edit. I'm going to come back to main content. This is a snippet I want to get rid of, so I'm just going to put the cursor somewhere inside of it, coming down the path down here, clicking on the thing that's farthest left, hit the delete key, get rid of the whole thing. Let's come over to layout and see what else we got. We have faculty staff listing. Oh, that's cool. Let's do that, paste, it gives us a series of header two's with rule dash styling, and then image with descriptions, it's got columns, so you can fill in the blanks, you can add or move columns, maybe we have 42 people, we have tenured faculty, then you can change this text by just typing. And it's just got three iterations of this. And when you save, it automatically formats nicely like a faculty and staff listing page. So, table transform snippets are pretty cool. You have a very simple editing environment and we take care of all the advanced formatting and you don't have to worry about it.
Let's click on "edit", main content. Now, I'm going to select all and delete. I want to show you guys one more thing here. We have a new layout, multi-column. Let's drop this one in, instructions, it says, "add or remove unwanted columns", so that you can one, two, three, four, six or 12 columns left, and remove or add unwanted rows in the table. Let's do that. Cursor down, now I'm going to remove this row, maybe on my web page I want to have three bulleted lists side-by-side-by-side. So, here they are, you can change them, and when you hit "save", you get three bulleted lists side-by-side-by-side. One really cool thing about the multi-column table is while you are simply creating a table, kind of like a layout of your page, our code will do the heavy lifting so that it appears to be what you were designing. Well, if you look at this thing on mobile, let's publish it, I'm going to click "view a new window" or equivalently, "view as published". And then if I shrink my web browser, so here is about the iPad width, and if we go a little further, we can see what an -- what a phone will see, and you'll notice there's a difference. On a phone, those bulleted lists become vertical so that they fit nicely, but on desktops, they stay in three columns.
So, it's a very, very useful snippet for making sure that since most of our student body, say like 50% of your audience viewing your web pages are probably looking at like this, that your web page doesn't suddenly break or get really, really, really small. It just neatly transitions into our mobile-like view. So, those are some of the neat snippets. We have many, many more, so if I checkout this page, come back to edit, its main content, and let's just look at some of the other snippets. So, I can go under "all snippets". We have a lot of documentation on all of these snippets and you can look through them. You just search for snippets in our help documentation. We have screenshots of what all of them do and just a lot of fun stuff that you can do with snippets.
So, we talked a lot about what we're doing on the right side of this vertical bar here, you know, building content for pages. But we really haven't talked about editing this content or editing this content. How do we do that? Well, let's go to "pages" or equivalently "pages". Let's take a look at some of our site sections here. Let's go up to your root site section. And let's take a look at the "contact.ink" file. Every single website will have a "contact.ink" file at its root. And this single page will determine the content for that contact region. All you have to do is edit it in the editor using nothing more than bolded text, line breaks, which are just Shift Enter, exactly the same as Microsoft Word, you know, begin a new paragraph, more bolded text, more line breaks, etc., etc. And, you know, have access to versions, the same thing as developing a normal web page. And if I was just super upset my seamless training, I could save, I could publish this one, and that's it. Your contact region for every single page on your site is updated. If you're interested in having different contact files and different site sections, submit a support ticket, and we'll have a conversation. Side nav, same sort of idea. So, back in your root site section there in the training module you have a "sidenav.ink" file. It is nothing more than a bulleted list of links. Let's add some links to those pages that we created. So, I'm going to Shift Tab to go up one level, we're going to do Star Wars Enter, Tab to bring it in one level. If you are not a keyboard enthusiast, Tab and Shift Tab are equivalently decrease and increase indent in bulleted lists. So, Star Wars, and maybe I'll say like, "overview a new hope". Anytime you have links underneath one bullet, you need to come up here and create a link to the hash sign or the pound sign. So, that's what the parent needs to be. And then you can link, you know, like the first one, that's actually going to go to our Star Wars index file because that's the sort of table of contents in my book. So, I'm going to link to that, double click on it, dependency tag check, location check. And then we're going to do "a new hope", blank, blank, browse, browse, new hope. And you just build it out like this. We ask that you don't touch your home button because there's some advanced formatting that requires more than the Wizzywig is usually capable of. But you can mess around with these bulleted lists [inaudible] underneath it. So, I've done that. I've got the Star Wars site section, the link to its index file, and a link to one of the pages in it, save, publish. Done.
Let's take a look. Let's go and take a look at a page here, index file. Looks pretty nice on staging and you'll notice that when you click the expander, you get your overview and new hope. And we've also got our new contact file. If you look at this on production, so let's scroll down, view as published, and you can test the links. Sweet. Done.
Through editing two files you have updated this region and this region for your entire website. And that's it. That's the job of those include files at the reduced site. Now, those control files were defined in the site section. There's also a control file that determines a site section's title. So, Star Wars, so if I come back to pages, introduction, Star Wars, we have some control files. We also have this "underscore props.pcf" file. So, if I want to change the breadcrumb for this Star Wars site section itself, I will checkout the props file. I will click on its properties and I will change it.
So, maybe I'm super stoked about Star Wars, change the section title, I save. I'll check the file back in. I'm going to come back to pages, so now I'm looking at the whole site section here. And anytime I make any changes to this props file, I need to republish the entire site section because remember the CMS is like a Xerox printer. If you fundamentally change some parameter on a page, you need to republish that page. And if you fundamentally change a parameter for a site section, you need to republish the entire site section. So, I select all, I publish. I'm going to ignore these advanced options. I'm going to click "publish". And then if I look at one of these web pages, both on staging and publish, we see our new site section. And if you click on that, it takes you right up to the index file. So, those are the control files for site sections. You can do contact regions. You can do side navs, and you can manipulate the breadcrumbs.
The include files work great because you made one edit to one file and you were done. What happens if you have replicated material on your web pages? Maybe you have a program page that's got the same paragraph in it over and over and over again. There are ways of modulizing [phonetic] material in the CMS. So, let's take a look at an example. We're going to come back to introduction, snippets. We're going to click on "main content". And let's imagine underneath these bulleted lists we might have something like "more information" and maybe this is a nice header two or Heading II, sorry. And underneath that we have some information. Imagine that this, if we look at save, imagine that this is on 10 program pages, right, that's ten times this material that's replicated. That is a pain to keep maintained, right. You have to change things in ten places if some small detail updates. Income assets to the rescue. Assets are things that you define once and you get to use everywhere. How do you write one of these things? Well, hover over content and choose "assets". I'm opening this in a new browser tab so I can see them both at the same time. Let's click on "new". We have five different types of assets. By default, you will not have access to the form asset. For that, you must take CMS 130. Let's start off with web content asset. You click on this. You have to enter a name. Okay. Well, let's do, "common program info". Then we have to lock to the site. Then we have to do an access group, so I'm going to do, "training, training". These things you must do for every single asset you produce and because the CMS site is a little older, the site name does not match its user group, yours will, so you will just choose your site name from the dropdown to make sure that only you can edit, and only your group can use. Then we get to the fun part, the asset content. I'm going to go back to the page containing this content that I want to copy and then I will click on "edit", "main content", and then "select directly from the Wizzywig editor", the content that I want. I'm going to CTRL C for copy. I'm going to come back to the asset and I'm going to paste into this micro Wizzywig. I do not recommend creating material directly inside of this micro Wizzywig as there are hardly any buttons or any formatting options. I will always, again, create the content inside of the bull blown Wizzywig editor, copy it, paste it directly into the asset content panel. Now that we're done, let's hit "create". Like any CMS web page or anything really inside the CMS, we have the same controls available to us, whether it's saving as a version, editing, versions tab. We're going to go ahead and publish this. And with the asset published, we are now free to place it upon a web page. So, I'm going to come back to the page that I want to place it on, namely our "snippets.pcf". You will select the content that you want to replace with your asset. And then we are going to come over to the insert edit asset button this time. We're going to select that and then we're going to look for a common program info. Select it from the list. Select asset. CTRL S to save. And then we're left with this striped box. Now, the Wizzywig editor has absolutely no idea what this thing is, but it doesn't know that it's going to be placed there when the page is rendered. So, it kind of gives you a nice little placeholder box here. And you can hit, you know, "enter" afterward. You can add more material underneath it. You can delete things around it. It's just a nice placeholder stripey box. To delete it, put your cursor somewhere inside of it, hit the "delete" key, "enter". Gone. So, let's go ahead and go back to that. So, I'm placing the asset back in there and now if we hit "save", we'll scroll down and we can see that the asset has now been rendered. And the cool part is if I come back to the asset, I check it out so that I can edit it, click on "edit", and maybe I am super stoked about this, more information, I've decided to turn these three things into a bulleted list. I will save. I will publish. And then down here at the ribbon, the CMS alerts me that not only have I updated the asset, but it has republished one of the pages or the page that uses it. So, if I have it on ten pages, updating this one asset will update those ten pages all at the same time. So, this is a big timesaver. And you can see that by coming back here and let's just reload the page, and we're reloading preview here. And sure enough, there are the exclamation marks and we have the bulleted list. And that's the web content asset. Very useful for modularizing out repetitious pieces of information and making your lives easier so that you don't have to maintain things in different places, just one spot, one asset.
So, let's come back to the assets. We're going to hover over to use assets or equivalently click on "assets". Let's take a look at another type. "New", please ignore plain text, it's more trouble than it's worth. Source code, source code is exactly like the web content asset, you go to the asset info panel, access settings panel in exactly the same way as we just did except instead of the Wizzywig Microsoft Word-like editor, you're going to be given a source editor. Here is where you can drop any customized HTML that you wish to use. We always highly recommend that you the source code asset if you are building your own HTML, like highly customized structures because the Wizzywig editor is known for eating custom HTML. You know, like when you edit and you go and you change your heading above some complicated HTML you dropped in, sometimes the editor will eat that HTML. This is kind of a nice briefcase, so to speak, for placing custom HTML into a web page because you can secure it in here and then just drop that stripey box onto a page. So, that's the source code asset.
And last, but not least for this course, we're going to cover image galleries. So, let's click on this thing. Again, we have the asset info panel. So, I might say like, "Adam homepage gallery". It's already locked to the site, so we don't need to worry about that. Then we go to the access settings [inaudible], so we are training, training, again, your user group will match your site name. And then we come down to gallery options. And the first time you create an image gallery asset, you must click the "create" button in order to get the images panel, so, this panel. It does not show up until you hit that "create" button for the first time. It's a little unintuitive, I agree, but that's how the vendor has written this interface. So, let's go ahead and add. So, we're going to come into pictures, let's do sample pictures, and let's grab all these sample images. And when you do that, you'll get cards, one for each image. Now the rules for using an image gallery, please, please, please make sure that all of the images are the same aspect ratio and really the same size. So, if you were taking a magazine and you have these images and you're trying to lay them out on the magazine page, you don't want images that are gigantic versus ones that are small. You want to work with images that are all the same size so you can arrange them in a nice grid. Each of these cards can take a title, so you could say "flower". They can take a caption, so "this is a yellow and purple'ish flower". And you can give it a link. So, you could say, "http.www.flowers.org" or something. And you could do that for each one of these images and go through. You can click "add" and add more. These cards are drag-in droppable, so if you want to move one before the other, you can do that. And then before you're done, you can come up to the maximum thumbnail size. So, image galleries are capable of being displayed as both an image slider or a gallery. And in the case of a gallery, I might want to say that I want these thumbnails, so it will show up on the page to be 150 x 100 pixels of a 4 x 3. I know that these images that I made in Photoshop are 4 x 3, so I like that aspect ratio. I'll keep it. And then we'll hit "create" "publish" because, again, you have to publish everything that you plan on using in CMS. So, it says, "Okay", it has been published successfully. So now I'm going to come back to my website. Let's go up one and for kicks, let's go into "Star Wars, A New Hope", and let's start off by dropping this asset into the banner region. So, click on that, up comes the editor as we now know, cursor down, and let's go looking around for the gallery, Adam homepage gallery, select, stripey box, cool, and let's save.
So, now we have an image slider in the banner region. The title is tool tipped, the caption is displayed here in white, and the link is hidden underneath read more. One thing you'll need to know about the image slider is it only contains the first five images from your gallery. And this because studies have shown incontrovertibly that almost no one will even use slide three. So, your audience drops off at roughly around slide three, barely anybody clicks on slide two, so there's really no point in having 20 slides up here, so we have five. Well, what else can the image gallery do? We can put it in the banner region, what happens if we put it in the main content region? So, come down and we'll do that. So, cursor down, insert edit asset, select the gallery again, stripe a box, perfect, and save. And this time you get the image gallery, so those thumbnails that we defined at 150 x 100 pixels. They're organized nicely in a grid with a little comment that says, "click on an image to view as a slideshow". Okay, click on that image. Awesome! Now you get your title right here, you get your caption, and your link is once again held under a "read more" link. And unlike the image slider, this gallery which can be accessed by using the left and right arrow keys, or by clicking on the left or right buttons, will display every single image in your image gallery. So, if you have 67 images, put it in an image gallery, put it on your page, and use what we call our light boxes here so that your audience can see all of your images.
So, those are assets. And, again, if you decide to put a web forum on your page, the form asset requires CMS 130 to be taken first.
Now last, but not least, let's talk about how to upload documents and images into the CMS so that you can use them, right. We've been talking about just inserting them in the editor, displaying them, formatting them nicely, but how do we get them onto your website so that you can use them? I'm going to check-in this file. I'm going to click on "pages", and at the root of your site, so we're going to go all the way up outside of my training module, I'm going to search for images. I really do not want to look through a ton of documents and directories. I just want to filter. Click on "images". Here is where you place your images, much like you have my photos or photos or whatever on the operating system, on computers, so does a website. Please put all your images in the images directory. You can click on "new" and you can create a new folder, so you can further organize your images directories. So, maybe I'm going to just say, "Adam new", just for the sake of this particular training, click "create", Adam new shows up. I can click into it and let's click on upload. Upload has several choices. If you're uploading about five images, I'd recommend staying with upload files. If you have more than five, I would highly recommend zipping them up and then clicking the import zip file. Please do not use edit an upload image. These interface is not quite mature enough for practical use yet. So, let's go ahead and upload files. I'm going to click "add". We're going to choose to upload into these two images. When those images show up, they will show up under here in this table. If you need to rename or remove, those options are available upon hover. It will complain if you have any punctuation in your file name, so this row will turn red and the startup load button will disable, and you must click on rename, remove that punctuation in order for the CMS to let you upload. Me, I'm good to go. I have new files, everything is set. Let's click "start upload". It's going to upload, successful, and successful, and close. And now the step that you need to absolutely remember, all we've done is upload onto the staging directory. Just like a web page must be published in order for it to be seen by external audiences, so must these files. So, anytime you upload to the CMS, you must select and publish, otherwise those images are not available for you to use on your web pages period. Now, sometimes I might be uploading to a directory that's got 54 images, maybe. You can sort by modified. It's very handy for pulling the things that you uploaded in the last couple of minutes to the very top and that way it's easier for you to select them out of a large set. So, that's just a nice suggestion. If we go back to the upload dialog here for a minute, I'd like to point out override existing. Override existing will allow you to upload a file that has the same file name as something you are already using. So maybe you have a "profile.tmg" file, right, it's the image that's on your homepage. It's your picture. It's your faculty picture. If you have a new photo that's taken a year later, rather than saying "2017 profile.tmg", like slapping a date prefix onto it, why not just say "profile.tmg", override existing, go find, for example, we're going to do Koala, go find that new profile picture, and upload and override the old one. So, like this Koala, we're overriding the old one, you start upload, successful, sort by modified again, and since I have just this single image, I'm just going to go over here and hit this publish button and publish. Now, if I had that Koala picture on 15 web pages, I don't have to go rooting around in those pages and aim them at a different image. I just swapped out one image for another and republished. Five seconds of work, 15 pages updated, not too bad. Documents, where do you site? Search for documents, same sort of idea, you click in here, you can further organize your documents just like you would in your "my documents" directory on your computers, and you can use the override existing to save time on things like cv.pdf. No need to upload "2017cv.pdf", "2018cv.pdf", and so on and so forth or five or ten years. Constantly updating the five pages that link to your CV, that causes a lot of noise, not only for you, but in this documents directory you're collecting all this old archival material. But Google's search results will actually crawl your site and display all that old material if someone searched your name and CV. Now there's one Google search result, that might be the fourth one down, and then all this old stuff that they have to sift through in order to get at your latest CV. That's annoying for them and annoying for you, so why not just have things like cv.pdf, override existing, republish every single time you create new material. So, that will help you out a lot and it will clean up those Google search results.
Now, with the upload feature, this concludes CMS 110. Please feel free to review the different sections in this presentation. And if you have any questions, you can either click on "help", come over here to "add-ons" and choose "CMS knowledge base", or you can submit a support request and our department will help you. So, thank you for your time and we wish you all the best, the newly crowned web developers here at Montana State University.