If you do not have your training module yet, STOP. The training below is intended for you to work alongside the video in the provided training module when you register for this class.

Basic Web Editing Training Video

Can't find your Training Module?

Head to https://ou.montana.edu/cms-training and follow the instructions. If you don't have a training module, you may need to submit a web support ticket.

Finished with the video?

The last step is the quiz, which you'll find in the email we sent you.

Want to download the PowerPoint slideshow?

Download the CMS 110 PowerPoint slideshow.

Full Video Transcript with Timecode for Basic Web Editing

[ Music ]

Logging into the CMS

00:00:12

>> Okay. So we need to log in to the CMS to make any edits. The first thing we need to do is find our Direct Edit link on our page. In this particular example, we've got a big red arrow and a little red circle that's pointing to the little gray quarter circle at the top of the footer. That is our Direct Edit link. This is going to allow us to use our NetID and password to log in to the CMS. And we're going to come right back to this page. But we're going to see it in editing mode, so we can start making changes. So I'm going to hover my mouse over the semicircle. You'll see it turns into a hand. And we're going to click on the link. We're redirected now to our login screen, where I'm going to log in with my user -- my NetID and password. And I'll see you on the other side.

00:01:04

[ Music ]

An overview of the CMS

00:01:15

Let's start with a quick overview of the stuff you need to know in the CMS interface. So first of all, this top bar up here, this white top bar, is going to be your global -- the things you can do anywhere all the time. And then of course over here, you got a search, so you can search just for about anything in the CMS at all. And then this little dropdown is sort of the contextual place where it'll tell you which website you are currently within, you're currently editing. So you can switch between websites too if you're doing -- if you're editing a couple of different websites. You can switch to those right here. You can also look at your user settings. And you can log out here. These, you don't generally need to do we do. We in Web and Digital will handle the settings, the user settings for you. And then below that, you've got your page, the things that you can do on this page. You can preview, edit. We can edit our properties. We can check this out and in. We can publish. And there's a couple of other things we can do under more actions. The current one that is available right now is viewing the published page. And we'll talk a little bit about the published page versus the page that we're editing in a little bit. Content is where you're going to spend most of your time in the CMS. The pages is the first selection. And if you hover and click on -- if you just hover and click on it, it'll open this pages view by default. Pages will show the files within your site. And you can navigate around these files, edit, delete and other files sort of management things just like if you were on -- moving things around in folders and files on your computer. The last dropdown here in the content dropdown is the -- in the content menu is the recycle bin. You can see here in our training website, there is 193 things in our recycle bin. This is a place if something gets deleted and you're not sure where it went, this is a good place to check. Other things you can do here, up here as reports, you can look at the things that are currently checked out within your website. If you are an approver, you can look at the things that are pending your approval. You can look at the things that have been scheduled within your website. You can see the recent saves and publishes. Addons. Addons is where we in Web and Digital have put a couple of extra things for you. So we've got a link to our support page. We've got a link to the site list here. So you can go through and select and move to a different webpage via this link as well. COPE is where you deal with all of our events, creating emails, RSVPs and a bunch of other stuff. It's our dynamic content tool. So if you need to go -- if you need to go to COPE, there's an easy link for you to get there. KaratEmail is the place where all of your form submissions go. So when you get to a point where you're making forms, and you make -- you can click on this. And you can go see those form submissions. And the last button, MSU Web Communications, this is our website. So if you need to go and if you need to add another website, if you need to learn some more about what we're doing here, what other things that we can do for you, that's our website. And right under the global bar is our page specific controls. So we're currently on Edit, which means the CMS is going to show us our green button, edit buttons that are editable regions. I can also click Preview and view what I currently have on the staging server that I can publish and put onto the production server. And I can look at the properties of the page, right? We can add and subtract different pieces here. I can change the meta title and description. And then I can look at our versions of our page. So see here, the current version I have is -- I added a sentence to the first paragraph. I could always revert to the previous version without that sentence. And I would see that. That would pop up then on our staging server, and I could edit from there, which is kind of cool. Great way to -- if you think you've made a mistake or something goes terribly wrong, you could always roll back that page to a previous version, especially if you're testing stuff, if you're doing some design work and you're not sure what how it's going to be, you're going to try something new, great way to revert back to something that you've already had done that already worked. And over here, if we -- I'm going to click back to our edit view. Over here, we've got our check in and check out function. This will -- when you have this page checked out to you, no one else can edit it. Only you can. And sometimes, it happens that someone checks it out and then goes on vacation or leaves the university or whatever that is. Just put a support ticket in with web, and we will help you check all those pages in for you so you can get back to -- get back to your work. So as you can see, the light bulb is on. So I've got this checked out to myself. And no one can edit it. If I check it back in, I lose a couple of my options over here on the left when it's checked in. But now anyone else can edit it if they need to. So lastly, and perhaps most importantly, is our Publish button. So when I am ready for this page to be pushed to the live server and under more actions, we should have a View Published Page button here, so we can see what is currently on the published page. We've got our extra sentence here. Oh, it's not -- it's not here. So let's make a quick change. So I'm just going to throw this in edit. I'm going to remove that sentence. I'm going to remove it -- let's just remove just about everything except for the stuff on the bottom, just so you can see what happens here. So I'm going to push Save . I might save that as a version just for fun. Save version. So remove all except moving on link. And I'll push Save here. So now I have a version here. That version that I have saved, it's currently ahead of the version before. And it's got removed all except moving on link, right? So if I look at preview, I can see what I currently have on the staging server. And if I look at the live server, I've got all this extra stuff, right? Even if I refresh this page for you, we're still seeing all that extra stuff. So now I need to hit Publish, send this out. Removed all things except. And I'm going to hit Publish. So now the published version, if we go back to this page and refresh it, you'll notice all that stuff is gone. And all we have left is that sort of moving on page for us. So that's a quick look at the global interface, the page view. And we made -- we've made a little bit of an edit. And we talked a little bit about the difference between our staging server and our production server.

00:08:43

[ Music ]

Editing webpages in the CMS: using the page editor

00:08:56

In this section, we're going to go over the basics of editing a web page in the CMS, all the functionality and the things you need to know. First, let's get to that page that we're going to edit. If you're following along, we're going to go hit View as Published, view that our -- view this page as published. And we're going to follow this little link to our first page that we're going to edit in the training course. And then I'm going to use this little quarter circle, our Direct Edit button and our Direct Edit link. And I'm going to start editing this page. Since I'm already logged in, it opens up the editing view right away. If you weren't logged in, you'd have to use your NetID and password and login. And then you'd be here as long as you have access to the page. So our first piece of functionality I want to go over with you is the check in and check out feature. So only one person can be editing, working on a page at one time. That's what this checking out and checking in is for. So if I check it out, the light means it is checked out to me.

00:10:01

And then when I'm finished editing, I'm going to check it back in. There are a couple of functions that will automatically check it in for you. So if you publish the page, this will automatically check back in for you, which is nice. But there will be times where you might leave it checked out to yourself. And we'll talk about that in a minute. Now if I want to edit a page and someone else is editing it, I'm going to see a little lock like this. So I can still view the page. This is a page in someone else's training, not mine. This is a -- who did I -- who did I take? Jennifer Saunders. So in Jennifer's, I cannot edit this page, right? I can preview it, and I can look at the properties. But I can't do any editing on it because it's checked out to her. So this may happen to you. You may have a file that is checked out. You may find a file that you need to edit that's checked out to someone else. First, please ask that person if they can check it in for you. And if they're gone or if they can't do it, you can always put in a support ticket with Web, and we will help you get it checked in. So our next part of this is let's look at the editable regions, right? So we have our green buttons. I can edit the content title. If I push that button, it'll open a little editor for the content title. And I can change this and maybe add a couple of exclamation points. I can change our subtitle as an editable region as well if I needed to and the main content region. So this is where you'll be spending most of your time. And most pages is in the main content region. And we'll come back to that in just a second. You will also notice that there is not a green button for our contact region here or our site navigation. And that's because these are include files. And we'll about those in a different video or in a different section. So don't worry about those for right now. And once we're familiar with those regions on the page, we can quickly start editing one of them. So we're currently viewing the preview of this page. But we're going to hit Edit, so we can start editing. We're going to choose the green button on the editable region that we want to edit. We'll start here in the main content region. And you'll notice as well that our -- it checked it out for us when we hit that Edit button, which is nice. It makes -- when you start editing a region, if it's not checked out, it will automatically check it out for you. Or if it's checked out to someone else, it'll tell you that it's already checked out to someone else, and you can't edit it. Let's take a look at the page editor a little bit. So we've got our paste as plain text button, which is super useful. If you are trying to bring something in the CMS that is outside, if it's in Word, if it's from another web page, using paste as plain text can -- will really -- can really help you because it'll strip out all the extra formatting that might be in that content you're pasting in here. And then you can use these editing tools to format your content. There's also a remove formatting button. So if you have pasted something in, this can be a good way to get rid of some of that formatting. So I can -- I'll highlight this blue box here, hit my clear formatting. And you'll notice all that extra formatting is gone. And I just have the text. So that can be quite useful as well. I'm going to hit Ctrl Z and undo that so that comes back. Ordered and unordered lists, super useful. If you are making a list, you should be using one of these. A screen reader is going to help -- going to read those as well. And it just makes it easier to pick those up. You can see we've got -- we can turn it into an ordered list. So you've got 1, 2, 3. You can change the type of order. You can use your ABCs instead of your 1, 2, 3s. And you can change the type of dot or bullet to the left. You can use squares or open bullets or closed bullets. One of the big important pieces of our editing environment is our headings. So under paragraph, you'll notice we have Heading 1 through 6. Heading 1 is used already. You don't have to ever use a Heading 1. That Heading 1 is going to be the title of your page. For us right now it's your first edits with four exclamation points. But any big important section in your page would probably start with Heading 2. And then if I am adding some extra content in here and I want a subregion of this, you can add edit -- you can use this section. You can add images and more. Maybe I just want to talk about images, maybe videos. So I've -- you'll notice I use a Heading 3 for that one. And that's going to nest it within this Heading 2. Someone who's using a screen reader and navigating through the headings, which they do very much, they'll be able to easily get to that content as well. For any -- for a sighted user or anyone else, this makes it a lot easier to scan and read the content for you. Don't use headings to style anything. The headings will style, obviously. You can see that the text is larger in a Heading 2 and a little bit smaller in a Heading 3 and just a regular text in our regular paragraphs. And also, you don't want to use bold text to fake a heading. A screen reader will not see that. And it'll read it just like regular content. So it'll just -- they'll just skip right past it. Or they may skip right past it and not read it at all, not notice that it's a heading. So use those headings. They're quite useful. You can also see we have this cool, extra style here. There's a blue box around it. If we take a look in our preview, I mean, I'll see what I did. If we take a look at our preview, you can see that this text is in this nice little blue call out box. It can be useful to draw extra attention to something. And those you can find under styles. So if I just select regular content here, you'll see it says styles up here. If I drop my cursor in there, you can see that I'm already using the alert-info, which is this one. Maybe if I wanted to change that to alert to the green -- is it green? Or -- and you'll notice that I click it again to get rid of it. Or maybe the red one, the alert-danger. So those can be nice. We've also got some page break -- oops --some page breaks in there too. So if I wanted to visually split this up, I could add a dash rule line through it. Or we have this other cool one that has a little mountain in the middle. That can be kind of cute as well to throw in once in a while. And yeah, so that's basically what we have here. This, as I mentioned before, if you've ever used another content management system or if you've used Word quite a bit or Excel, a lot of the copy and paste -- you noticed I use Ctrl Z to undo. A lot of those keyboard commands work in here as well and can be quite useful. If you want -- like, if I want to bold some text or un-bold some text, I can use Ctrl B as well instead of just pushing the button up here. So play with these. Figure it out. This is a great place to test some things out. And when you're ready, you can hit the Save key. And there we go. We can see our -- see our changes in staging.

00:18:37

[ Music ]

Links and dependency tags: managing links in the CMS

00:18:49

Okay. Let's talk about the one thing you're probably going to do the most when you're in the CMS, which is creating links -- links to another page, links to some text, links to a document, links to something else. And we'll talk about dependency tags as well and managing your links in the CMS. Using a link, I would generally not just spit out the URL of a page. So if we're going to link to montana.edu/web, what I generally don't want to do is just paste that URL there. What will happen here is if a screen reader is reading this, for instance, it'll read https colon slash slash www dot. It'll read it out, which is not very good. And if -- you know, and I can creatively wrap this into the text of the page. So you can see here I've got created by Web and Digital Communication. So if I turn -- I can turn this text into a link instead. So I'm going to take that URL. I'm going to highlight Web and Digital Communications.

00:20:01

I'm going to go up here to the link button here and paste in that link. So if I hit Save, now that text is going to link to the Web and Digital Communications webpage. Now we have not talked about the other great advantage of the content management system. There's lots of things to complain about and moan about with systems like this. But this is one of the things that really makes this particular content management system, the CMS stand apart. So I'm going to link to Adam's homepage because I know that Adam has a homepage here -- I believe he does -- here in the training website. So I want to link to Adam's homepage. So I'm going to hit this link. And I'm going to browse, use this little browse tool, browse key to look for that page. So I'm going to go -- I can use this -- these breadcrumbs up here to pop down to the CMS training website. And I'm going to search for Adam's name. Let's go to Adam's here. And then that first index file will be his homepage. And I'm going to insert that. So now instead of what you just saw before, which was that long URL I put in up here, we have these double curly braces, F colon, and then a number. This number is our dependency tag. This whole piece itself is our dependency tag. The CMS will look at this, and it says Aha, I see where that is. That file is currently at Adam underscore Henry slash index dot PCF. So it knows what the current location of it is. And that also means if I use this dependency tag, this number, instead of the regular straight URL, and I move this file or the file changes its name, this number is independent of that name, of that location. It knows that file is always going to have this number no matter what it's called, no matter where it is. And so when it moves, the CMS will republish this link that I'm creating right now to the new location. It is super helpful, super useful, especially if we're moving content. If we're changing things around, if we're changing things up and you've used the dependency system, that dependency tag, it will move with you. And it will change. And it's super helpful. So use these whenever you can. So I'm going to hit Save. And now I have this link here. And if I save and publish this -- publish, added link to Adam's homepage. And I hit Publish. I can look at that new published version. And you'll notice that that goes right to Adam's homepage, adamhenry.index. I'm going to head back to my editing tab. And we're going to show -- we're just going to show quickly how to remove a link if you need to. I'm going to open again that main content region. And let's say I needed -- I wanted to remove the Adam's homepage link. Or let's remove this one because this one, of course, is not accessible. So I'm going to put the cursor in the link. And then our editor will tell me, oh, it's bold. And also, it's a link. So those two things will be highlighted. If I hit the button next to the link key, this is the remove link. There, it popped up there and showed us what it is. If I click that, the link is gone. So all I would need to do after that would be to save and publish it. And that link would no longer be on the live webpage either.

00:24:03

[ Music ]

Best practices of links

00:24:17

Okay. So let's talk about how to make the best links ever and the best practice of making links. Now links were the thing that the internet was built for. HTML stands for Hypertext Markup Language. Hypertext was the original name of link. Why do we want to do this? Why do we want to create the best links we can? More people are going to know where the links go. Your links will be understood by everyone, even users with disabilities, users on screen readers or any other assistive technologies. And more people will click on your links, which is what we all want. You know, if you're making the link, you want someone to click on it, right? If you're -- I mean, why else would you make a link? So there are four basic things your link needs to be the best. Make the link text self-descriptive. Make sure it can stand on its own. Make sure it fits with the surrounding writing of the paragraph. And describe and or include most of the page it links to. So we'll take a look at how exactly to do that. But first, let's take a look. Let's take a look at some of the worst links ever. If I was going to make a little list of them, worst links ever. And maybe I'll make that a Heading 2 over here. And I have -- I'll paste this in. These are some of the worst links ever. Now you'll notice these are not self-descriptive. Even if I had a sentence here, maybe like, check out -- oops.

00:26:06

So even if I did something like this where I have a sentence that puts it into context, that still doesn't work. And I'll explain why in just a little bit. But these are some of the worst. So let's all put our right hand over our heart and commit to never writing links like this again. Never writing "click here" as a link. Please never, never do that again. One of the big reasons that we do this is that the links are read out of context all by themselves by a screen reader sometimes. Now if a screen reader user is reading your content, gets to the end, and then realizes I actually want to click on one of those links, so they will go through your content again, but just reading the links themselves. That's it. So it'll be link, link, link. It'll just read the links off together. If it's link, click here. Link, here. Link, follow this link. Where are we going? It doesn't -- they don't know. There's no context that's given. So make sure the link by itself, the entire link, will work and will have that context. So just to give you a quick example here. If I was going to say, "The annual content developers buffet breakfast is coming up. Click here to register," right? So there's my great little title. Get rid of that rule. If this was read by a screen reader, you can just get rid of this and this, and we're back to click here. So that's all that's going to be read by the screen reader as they go back through to find that link. And they won't know what to click on. A better -- if we look at that sentence again, we might -- one of the things you'll have to do is rewrite this text here, this click here text. So you might have to talk to your copywriter or whoever. But this is another -- a different -- this is a different way of doing it. So please register for the buffet by following this link. That's a little bit better. Or we can go for our best example and look at the link saying please register soon for the content developers buffet being held on November 19. So that entire information about that link, what they're going to do, is in the link itself. I think we've all had this where we go to something, we look at a link and we're going to follow it. But we're not quite sure where it's going to go. We're a little worried that we might get some virus or something like that. Or we might go to a website we don't want to go to. It might download something we don't want to download. And so we don't click on it. So that is what we're trying to avoid. If we look at this last link, we can go through our rubric once again. Is this link self-descriptive? It is. Does it stand on its own? If we get rid of this sentence, does it stand on its own? I think so. Yes, it does. Does it fit within the surrounding writing of this paragraph? It does indeed. And it is descriptive. So that's our four rubric. So follow those four things. Think about those four things. Self-descriptive. Can it stand on its own? Does it fit within the rest of the paragraph? And does it include most of the page that it's linking to? The thing that you're going to, does it talk about what that is?

00:29:25

[ Music ]

The Pages view: how to organize website images, documents and webpages in the CMS

00:29:35

So let's take a look at the pages view and how to organize your website, including the images, documents and pages and folders in the CMS. To get started, you just want to hit content, click content and then click on pages. And you'll start to see the file structure of your website. This is going to look a little bit -- hopefully, a little bit like you're viewing this in Windows Explorer finder on your computer. Just regular files and folders.

00:30:02

It works almost exactly the same on the web. And this will show you -- this page, it will show you that structure. And it also lets you work on that structure and move things around. And this can be quite a useful tool to use. You'll spend some time in here when you're building your site. Let's start with the root of the site in our training module. That would be this folder. If we were actually going to the root of the training site, we would hit the house, this little house right here. And that's going to take us to the root of the folder. That's the highest you can go. That's the first place people will come if they type in montana.edu/cms-training. This is where they're going to go. This is that first -- this folder is where they'll hit. And actually, if they type that in, they'll see the index file in this folder. And I'll explain a little bit more about that in a minute. It also -- this also contains a set of control files. There is a contact.inc. There's a sidenav.inc. There is a resources folder and an index page, which is -- I can show you. It's here if we use the filter. There's our index page as well. So any site section is going to start with those files. One quick thing. Please don't delete or change this _resources folder that has some files that run your website that are from us and that we use and that you don't need to worry about, as well as the settings file. You don't need to worry about the settings file either. The sidenav and the contact, you will be able to use and edit. And we'll talk about that in a different segment. Now I'm going to go back to my training module. There we go. And let's just -- let's see how to make a new page. So we got the big blue new button up here. If I click on that, I'll get some options. I've got new folder, new page, new quick page and new section with index file. I'm going to do a new quick page just because it's nice and easy. And let's just do a test. So this is going to be test page and then test page or maybe test page. So the difference between the page file and the file name is the page title is what's actually going to get thrown on the top of the title. It can be changed later. And then the file name is what's going to appear in this list. We'll it's a little grayed out right now because we're doing this part of it. It's also going to appear in the URL. So this can be important. If you want a nice clean URL, make this nice and short and clean and concise. Do not use capital letters. And I recommend you can use underscores. I recommend not doing it because they can get lost sometimes if there is a -- if you're putting it into a link, sometimes, it can get lost if it's printed out. But yeah, so make this nice and concise. Create. And I'll show you what happens here. We'll see our testpage.pcf. It puts that, oh, as the breadcrumb as well. And our title is here. And then if we publish this file and view it on the web, you'll see test page.

00:33:33

That test page part, that file name appears in the URL, too. So important to get those and make those concise. The other thing about those is once they've been out there in the wild for a while and people have linked to them, you don't want to change them. If you change that file name even by one, even if I just removed the hyphen, and someone else was linking to it, that would break that incoming link. So it's good to get these right in the beginning. Take a little bit of extra time and think about how you want your file naming to be and your file structure to be. And get that -- at least do the best you can. You're never going to know how this is going to grow. And so sometimes, it can be difficult to figure that out. But do the best you can. If I wanted to create a new site section, all of these other folders in here, editing webpages, getting started, managing websites, these are all site sections that I created for you. And you can create one yourself. And this goes back to that index file. So if I wanted a nice, crisp page directory name -- so this is going to be -- the directory name is going to be what appears in the URL. So I can do test section. And then this is the best tech session, maybe.

00:35:00

And again, this is what's going to appear as your title in the breadcrumb in the meta title. And then this directory name is what's going to appear in the URL. And underneath each of these, it will tell you URL if you just look for that. And if you look for breadcrumb page title, that sort of -- it'll at least give you an idea. I swap these around once in a while, and I get them wrong. You can always go back and change them afterwards. So it's not -- it's not completely done and over with once you've done this. And here is our site section. And instead of just creating a page, you'll notice here that I am in a folder called test section. And it's got those four control files again. This index file is what's going to be shown if someone goes to my test section folder. So if someone types in, ou.montana.edu/cms-training/justin_arndt/test-section/, the server will serve them this index file. And I can show you that real quick in a example. So if I publish these files -- publish. And if we go to the index file and view that, you're going to see that okay, we're at the index.html in that folder, test-section. But if I remove the index.html, so we're still getting that index file served here. And that's one of the things that our web server does. So it will look for those. When people go to that folder -- and so what you don't want to do is change that index file to something else like home or -- I don't know what else I -- I think I used to use home back in the day, back in the good old days. And some web servers would do that. Ours does not. So let's take a look at images a little bit. I'm going to go down to our images folder in our root, which is where most of them are. You can make your own images folder afterwards. If you want to put one somewhere else, that's totally fine. But this images folder is generally where the images will go. The CMS tries to put you in the root images folder when you're looking for images, when you're creating content. So this -- it's a thing that happens. And so you'll notice here as well that people have created some folders. And you can try this yourself. So the only -- the new thing we didn't -- the new thing we can do here is create a new folder. A folder, unlike a site section, is generally in our CMS, just used for documents and images. The site sections have those extra files in there. There's a different denotation when it's created. So that site section is different than the folder. It handles the web files better than this does. So just use the folders for site section -- for -- just use the folders for images. And use the site sections for your -- when you're organizing your webpages.

00:38:20

[ Music ]

Managing images in the CMS

00:38:31

Images. How to upload, edit, delete and manage images in the CMS. In order to use images on your website, one of the things you will notice is they do not publish with the page. So you have to upload them and publish them. Let's take a look at how to do that, how to upload them, how to publish them, make sure they're there and then do a little bit of editing, adding and deleting images to a page. If we start in that root folder -- I'm going to search for our images folder. And I'm going to pop into there. So here's my folder. Just on images, let's pop in there. And we'll add our images here. So I'm going to hit upload. You can hit -- you can push add here. And you can then sort of browse your desktop for them. You can also just drag and drop images here. So you can do more than one. I think it'll take up to 17 or 18 before it really wants you to use a zip file to upload them. But I should be able to upload both of these automatically. There we go. And I am going to start upload. And there they are. So you'll notice here they say unpublished. So they will appear in a page. So if we -- if I open a new window here -- clear out some of this other stuff. And if I go back to my training module, so back to the root, let's go to Justin -- my training -- my training module here. And back to editing web pages.

00:40:16

Let's open that root page again, that index file and add some pictures here, images here. Now I've uploaded those two images that you see there to the server. So I'll be able to see them here -- to the staging server, rather. So let's add an image. Maybe I'll make that a Heading 2. And we'll put this image here. And I'm just going to use the image browse button and hit that source or browse. And I'm going to find my folder, justin-images. And let's start with the Think Outside banner that I uploaded. I'll be able to insert that. And one thing as well you'll want to do is make sure that you have that alternative description. This is what a screen reader is going to read for someone who is -- who has a sight disability. So take a look at that image. And one thing, always, always, always that you want to do is if there is text in that image, absolutely make sure that that text is in our alt description here, Montana State University Think Outside. Now the rule is -- and you'll learn more about this in our accessibility part of the course -- is that -- is what would you tell someone if they couldn't see the image? How would you explain this to them? What is the message that the image is trying to convey? Sometimes, it's very little. Sometimes, people would just put images into a page just for a little bit of fluff. Sometimes, they're very important. Sometimes, they have information that needs to be conveyed in an image file. So it really depends. In this particular case, you want to make sure that same text in the image comes across for everyone. I'm going to push Save. And that's going to stick that image into my page. Now as I mentioned before, it did show up, right? If I push Save, you'll notice now it's not showing up. And that's because it's not on the live server. So we need to go back to our images folder and make sure that this is published. So we'll open that little triple dot. I'll publish this file here. First, publish. You probably don't even need to have a version description for the image. And then if I do a hard refresh of this page, an image should now show up. There it is. So that's going to -- that tripped me up when I first started. I just wanted to point that out. Make sure that you're publishing the images when you're uploading them. So just, when you upload them, upload them, publish them, and then they're all set and ready to go. You don't have to worry about them ever again. So you start to get an idea of how that diff -- the difference between the staging server and the production server work as well.

00:43:29

[ Music ]

Creating a new webpage in the CMS

00:43:41

Creating a new webpage in the CMS. We're going to talk about site sections and pages themselves and then a little bit about the editable regions. So here, we are in an index page here. These will work like in a site section similar to the chapter page would -- chapter overview at the beginning of a chapter book. You may only need this one page. You may need more pages. You may need other site sections. You may have subchapters or sub ideas within this larger idea. So let's look at how to create a site section. And so in this folder, we'll just do it in the -- I'll just do it in the editing web pages folder here. I'm going to create a new site section. So that's the new section with index file. That's going to create another one of these web folders that has -- that is ready for web pages. And hit that button. This directory name is, of course, the URL. It's going to be part of the URL. So I want to make sure this is good. Let's talk about Star Trek and be real nerdy. And then, of course, this page title is what's going to appear as the title. It's going to be in the breadcrumbs and in other places as well. So this one wants to be human readable. The directory name, all lowercase. No extra special characters or anything like that. I wouldn't -- don't put spaces in here, either. That is going to be more machine readable. Or it's going to appear in the URL. So it can kind of be a little bit of both -- machine readable and human readable. We push Create. That is going to generate one -- another one of these folders with the extra files inside. And it's going to put us on that index file already. You'll notice here we're in the editing webpages site section. And this is another site section within it. So we're going to get Star Trek inside that as well. So here, you might have a list. So we might do, you know, the original series, the Next Generation, Discovery, which is totally before T Space Nine, Voyager, Enterprise. That's it, isn't it? Picard is in there somewhere as well, right? So we could have seven different pages in here and talking about the seven different Star Treks. I'll just create a list of that for now. If we look at that in the pages view, our index file is here. And you'll notice we're inside. Again, we're inside that editing web pages site section and in the Star Trek site section as well. So now we've created that site section, which is pretty cool. And we're going to create some of those pages. So if we look back at our index file, you can see what I wish we'd start with the next -- the original series. So we'll hit new here. And we're going to hit new quick page. And let's do the original series, TOS. Now I could put Star Trek here. And the reason I'm not going to is because you'll notice in a minute that the breadcrumbs are already going to say Star Trek because we're in the Star Trek site section already. And so all I really need to do contextually is put the original series here. Now afterwards -- so I've got the original series here in my breadcrumbs. If I wanted to add that just to the title of the page, I totally could. Like that. And then if we look at this from the pages view, again, you'll notice there's our TOS page within the Star Trek site section. Now if we take a look at this page we just created, and this works on an index page or on a quick page or any page in the CMS, you can open up properties here. And you can look at the different options you have of things of editable regions that you can add. So I can add a subtitle. I can add a banner. I can add a right sidebar if I want to. And I'm going to push Save. And you'll see all of those extra editable regions pop up on here in the edit view. Content title, subtitle, banner, bang content, sidebar, all sorts of different stuff, all sorts of places, we can put content. And then if I were, like, well, maybe I don't want to have all that stuff, I might get rid of the right sidebar where I just put that text. I'll get rid of the image banner as well and push Save. So these can pop in and out of existence as you wish. It will save the information. So that bit of text that I put in the right sidebar, if I wanted to bring that right sidebar back again later on, that content is still going to be there. It won't appear on the live site at all. But it's there in the -- in our staging file just in case you need it again.

00:49:20

[ Music ]

Using snippets in the CMS

00:49:33

Using a snippet in the CMS. We're going to talk a little bit about snippets, which are prewritten elements or content chunks that are preformatted for you to use that we've built for you. It's going to keep our sort of design similar across all of our webpages and give you different options to make your content look cool and different and separate things and put things into little groups. And it's quite helpful to make the -- your webpages look a little more interesting and a little more engaging.

00:50:03

So we're going to start with adding a snippet. And we'll talk about editing, inputting content into that snippet, adding extra rows or different elements into that -- of that snippet, and then deleting it. But now we're going to add a snippet. And we're going to add the image with description snippet. So let's do that now. If you didn't know this already, this little puzzle piece button is our insert snippet button. So I'm going to click on that. It's going to open our list of snippets that we have available to us. And I'm going to go down to image with description. In fact, let's do image with titles and description. Let's add something else. So here we are. So this is -- just put in this magical little table. And a lot of snippets in our CMS have a table that looks like this. This is not what it's going to look like on the other side when we publish things, when we look at in preview or on the main site, what the CMS will do is it will process this information and turn it into HTML on the other side. So without doing anything, we can just leave the boilerplate as it is, push, Save. And you'll notice when you push Save and then flip over to the preview, we don't have a table. We have a picture. And we have a title. And we have a little subtitle here. And then we have a blurb. So this is what we have on the other side, what we've got created. And if we go back into that main content region and look at that table again, we can start to edit those things. So we scroll back down to our table. We might change our image sizes to medium. And you'll see down here we have instructions. So it'll tell us what we can do -- small, medium or large. And sometimes, it actually makes it easier if you can use this little expander and make this region a little bit bigger on your screen. So we might change out one of our titles to something cool. Another cool thing.

00:52:22

And then we're going to -- we'll pop in some images here. So let's see. See if we can find an image that would be good. We'll just -- we'll just check in the -- and again, make sure you're in the staging environment when you're looking for your images. Oh, let's use Champ's photo there. So insert Champ photo. Let's see. Bobcat mascot Champ. And we'll insert him there. So there he is. And I'm going to push Save again. And that's going to kick us back out to the preview view. And if we scroll down there, we've got Champ. So now if -- so a lot of times, you're not just going to have two things. You might have four things or eight things. So let's -- I'll show you a little bit about how to use the table, the table tools in our table transform to add some more content. So now we've got two rows. So if I just put the cursor in one of these rows -- so I'm going to put it in the second row here. You'll see down here I'm starting to get the table control buttons. So this is one place we can start to add rows, right? This will add a row after. We can also use the table controls up here in the toolbar. So I can insert a row after here. That's a way to do it. Or you can just right click, maybe. There we go. And do that same thing. Insert row after. So we're going to insert a row, and I'm going to insert another row as well. And just for now, I'm going to copy our placeholder image and put that in both places there. And third cool. Let's see. Make it big again. I make this a little easier. And let's do --

00:54:46

And paste some more boilerplate in here. Okay. So you don't need a period in our title, do we" That's sort of silly. I don't believe that. Oops. There we go. Oops. I got rid of my image over here by accident. Let's use the Ctrl C and Ctrl V to copy and paste that. And if we save, you'll notice now, in our preview, we've got four things. So this is sort of how this works. Of course, you can use those same tables to -- those same table controls to delete rows and copy rows and all that sort of thing. It all works right here. So it's pretty handy. And last, if we need to delete a snippet, we're going to go back into our edit view. And we scroll down, and we're just going to put the cursor anywhere in the snippet. It doesn't matter where it is. Down here on the left, you'll see that the -- this is -- this shows our HTML path. And so we want -- this is going to help us select the entire table instead of trying to highlight the entire table and maybe not getting the whole thing. So I'm going to put my cursor inside the snippet, click on our lowest table, so that you'll see now over here in the edit view, it's highlighted the entire table. And then I'm going to push delete on my keyboard, and it's gone. So that's the cleanest, easiest way to get rid of a table or to get rid of a table snippet, if you want -- if you don't want it anymore. But I do. So I'm going to Ctrl Z. I'm going to bring it back. I'm going to push Save. And that is a little bit about snippets.

00:56:47

[ Music ]

Versions: saving, managing and reverting

00:56:59

Let's take a look at versions -- saving, managing and reverting to previous versions. So what are we talking about here? We're talking about things you've done before and the CMS has saved. And so there's sort of -- this is sort of your safety net. This is really great. If you're ever worried about doing something and not doing it right or breaking something, versions will save you every time. So let's dig into first how to save. So if I want to make sure that this version that I'm -- that I'm on right now, this page, if I'm going to make a big change and do something, try something new, different, I want to make sure I can come back to this version of the page if I can. So over here, under the dot, dot, dot, under our More Actions, there is a Save Version button. Now first of all, I should at least just remind you that this page is currently checked out to me. And if it wasn't, that saved versions button would not appear. So make sure that's checked out to you. And then I'm going to save a version. So this version, I think -- let's take a look here. What can I say about this? I included a section with Champ. That's what I'll say. Click Save version. It's going to pop up this box. It's going to ask me for a description of this version. And we'll say added Champ module. There we go. And I'm going to push Save. So now it'll tell me at the bottom that that version was created. This is Version 55. Lots of different versions on here already. I can also note -- tell you that if you publish this page, it creates a version automatically. So you can go back to any published version as well already. You don't have to even do an extra save. That's already there for you. So now if I wanted to -- if I made changes and I wanted to go back, or if I'm, like, actually, I needed to save this version, like I just did, now I want to go back to a previous version to see what was there to maybe add -- maybe take something. So here I've got some descriptions. And there's times when there are not descriptions. So I highly recommend adding at least some small tiny description of what you've done when you publish or save a version. It's very helpful when you go back later. Here, we even have, like -- this was when we changed to HTTPS. And this was before. So let's go to added link to Adam's homepage. So let's go back to this one. In this list as well, you can see here the sort of bluer grayer line. It also says live next to 54. This is the version that's currently live. The version up here, 55 -- that's the version we just saved. And so now we can go back to a previous version.

01:00:00

We're going to go back to this Adam's homepage. So I'm going to open that -- open these extra actions here. And I'm going to hit revert. And it's going to ask me am I sure, because it's going to replace the current file on the staging server with this revision, Revision 52. So we're only replacing it on the staging server, which means the thing that's on the production server, the thing that's live on the web now is not going to change yet. We can always publish the version we just reverted to. And that would change the live version. Right? See, our live version is still 54. It's not 52. So now if I go back to edit, you'll notice if I scroll down, that Champ module doesn't exist. And there's other changes as well. Back quite a ways. So this is great, right? So if I have made a bunch of mistakes before and I wanted to come back to this version, or if I made changes in 2020 and I wanted to go back to my 2019 version, whatever thing you need to do to go back and find, you can go back and find it in the versions. It's super helpful.

01:01:12

[ Music ]

Publishing a webpage in the CMS: previewing, submitting, publishing, scheduling, and expiring

01:01:26

Previewing

Let's talk about all the things surrounding publishing the page. If you've been following along with the intro class, we've talked a little bit about this. But we're going to get real specific. I'm previewing, submitting a webpage for approval, publishing a page, scheduling a publish, expiring a webpage as well. So let's start with previewing. So here we're looking at our edit view of our page. If I push Preview, I'm going to see the current version that is on the staging server. So the current version that we are working on is here. And this can be changed if I change the version and stuff like that, which we've looked at already. But here we have what is currently on the staging server. If I push Publish, this is what's going to publish. Now I can also click on this button at the bottom that says View as Published. And it's going to show me what is currently published on the server, which you can see that Champ photo down there is not there. So here is what is on -- what is currently on the production server or live, right? This is what someone -- you give someone a link to this page, this is what they're going to see. And here's what we've been working on that we want to publish.

01:02:38

Submit for approval

The next thing I'm going to show you is how to submit a webpage for approval. Not all sites are set up like this, but some of them are. Some of them have an approver protocol set up. And I'm going to go into this page and show you how that works. So here's my approver. I'm going to check it out. You'll notice my option is no longer the green button that says Publish. This one is going to say Submit. So I can still make edits. So I can make this edit. And I'm going to ask for it to be approved. So I'm going to save that edit. And I am going to push the Submit button. So it's going to look a lot like -- it's going to look a lot -- well, this does not look a lot like when you're publishing it. So you can see our approver is -- it's me. Well, this is my level -- my Level 10 user is there. And so you could say something like, "I made a change. Here's my change. Please approve." And so you might -- this is going to be an email that goes to the approver. And they're going to be able to go straight into this post and publish it if they -- you know, as long as everything is good. So I'm going to push Submit. And that's going to send an email to the approver and ask them to approve it.

01:04:04

Publish

Now most of you users in the CMS are going to be able to publish whatever you want when you're ready. One of the things that does -- that the system will do is it will tell that -- it marks it with a date and a time and a name. So if you publish something inappropriate, you publish something that is not approved by your department, and it will say published by who and when. So if I look at this getting started page and I open the properties, without even checking it out, I can check the log and I can see the different things and times things have been done. So copy, published. There's my name. There's the time. So it -- so the work could be done to see if something went wrong, who did it. And then you can go back to a previous version, which is really nice. So if we go back to our pages and open this file and perhaps I've made a change, maybe I've gotten rid of this business and made a sweet change -- and I'm going to push Save. And then I'm going to hit Publish up here, right? Put a version description in. Removed. Remove most of the copy and replaced with a one liner or whatever you want to put. These version descriptions can be super useful, especially if you need to go back to a previous publish at some point or something breaks. Saying what you did and when and marking it in the version description can be extremely useful. So I recommend doing that when you can. We're actually not going to publish here. I'm going to show you a different way. So I could just hit punch, Publish. And this would publish the page. And you've seen me do that before if you've been following along with our training. But also, from here, I can do it, too. So if I'm looking at the Pages view, here's that index file I was just working on. I can see it tells me there's unpublished changes. If I click on the More Actions triple dot there, I can publish from here as well. And in fact, I can publish, schedule and submit and expire. I can do all of those things straight from here. So as you'll see here, even if I do not need to submit something for approval, I can. And I can ask someone else to approve and publish it. So that's kind of cool, too. But from here, I can hit Publish. And I can put that same version description in if I wanted to and publish this. If I needed to publish all three of these files, I can tick those. And I can hit Publish from here, too, and publish all of those things. It gives you some different options, which is nice. So if I want to make sure that includes all checked out files, includes any files that are scheduled, include files and workflow, or if there's something that is scheduled, I don't want to publish it, I can remove that tick box too and then, you know, put some sort of version description there.

01:07:04

Scheduling a publish

And let's quickly look at scheduling a publish. So just as we saw with publishing, you can do that from here as well. If I untick all these here, there we go, I can schedule from here. So I can schedule this to be published. And I can say what date or, you know, a lot of times, if you need to publish it on a Sunday at midnight -- so 12am. You want to make sure that this goes live 12am on Monday morning, but you don't want to stay up until midnight for that on Sunday, because who would? And it's going to email all of the people in the user group for it. So everyone will know that this page has been published. And it's going to also send a copy to yourself, which is cool. And then I would hit Schedule. So -- and then published successfully. Let's see if I can spell successfully there. And you can do that and hit Schedule. And that will mark it like this. You'll notice now the -- it's sort of locked. So it's scheduled to be published. If I open it here, if I want to edit it, you'll notice I can't check it out. I need to remove that schedule publish first, and then I can check it out and make some changes. So the CMS will do it -- will block you a little bit if something is already set to be published and are scheduled to be published so that those published changes don't go live until that schedule goes. Or you remove the schedule, as we just did. So here, again, from this dialog, I can do the same thing. If I hit Publish, I can flip over to schedule here. Or in that drop down, I can hit Schedule and schedule Sunday at midnight and a message to myself and schedule this way as well.

01:09:11

Expiring a page

Now a slight difference from scheduling would be expiring the page, which means it's going to take the page and put it into the recycle bin. It's going to remove it from live. So if you are -- a lot of times, people will use this for an event. If someone -- if you have a form on here and you have an event that you are asking for submissions to but it only goes until Sunday at midnight, you can expire the page on that time. And it will go away. So if I remove this scheduled publish that I had set up before, and I want to expire this page, it's going to -- it's going to look fairly similar to scheduling. You have a choice between replacing the file with something else, which is what most times, you will do. Or you can just straight recycle the thing. You can put it right into the recycle bin so it's there for you. If you need to get it again, it's going to be in the recycle bin for you. It's not going to completely delete it. But this replace button would then swap it out with a different file. So, again, if I want this to go on at midnight -- there's my time. And I'm going to choose a replacement file. So we use this quite a bit for Pure Gold. So we have an open page and a closed page. And so we will expire the Index page and replace it with the content from the closed page, which is super nice. So I would go to -- let's see. I'll go to my folder this time. And we will say that this snippets page is the page that we want to replace it with for whatever reason. So there I've selected that page. And it's got -- I'm going to send a notification to myself, swapped it out and expired. Move this page, yo, and schedule that. So now the CMS is going to tell us that there is a scheduled expiration here. And if we view that same page in our pages view, you can see that the icon is a little "say no to cigarettes" deelybob there. And it says set to expire.

Navigation

01:11:35

Navigation best practices

We're going to talk about navigation. So four things to remember when you're building a menu. One, keep it short, but not too short. So six-ish links is good for a website. It can be four. It can be three. If it's two, maybe you only need that one page. And that's it. But if you have more than two things you're going to put in your navigation, put those in the navigation up to about six. The reason why you want to stick to six-ish links in your navigation is that it makes it easy for someone to use. If you have more than six, if you have seven or eight or 10 or 20, our minds can only process five, six, sometimes seven things at once. That's why we have seven digits on our phone numbers, because it's easy for us to remember that. But once you get it past seven, it creates more load on the brain. It creates more load on that cognition. And it can make things seem harder. And we don't want things to seem hard when they're on a website. We want them to seem easy. So we have to do a little bit more work in our organization to do that.

01:12:43

Editing the sidenav

So let's actually do some editing of the sidenav in our training module. So if you're not in the -- in your -- the root of your training module, which is going to be your name or the front part of your email address, and we're going to go to that sidenav.inc file. This file is going to open up a page that looks just like a bulleted list, which is exactly what it is. And our CMS will turn this bulleted list into that side navigation here. You can see I've got my two titles, basic web editing modules and extended training modules. And I've got my four basic modules here and the extended snippets and assets here. So you can see those same things reflected here. And perhaps, importantly, that first piece as well as up at the top, that's sort of the home link. That's the -- that's going to bring us back to my training module. So I click that, I go to that first page. But I'll go back to here. So this just essentially works like creating a bulleted list with links in it. If you're starting from scratch, so there's nothing here, you're starting with nothing, you can use one of our snippets. And if you scroll down, it's the sidebar navigation snippet that's going to spit out some boilerplate for you that you can use. And one of the reasons this is important is there's a bit of extra styling and a bit of extra HTML work done on this content here. If you really want to get into it, there's a class that's put on at the unordered list called "exnav" and then a class called "site-title" on the first h3 list item link. But don't worry about that. If things start to look weird and strange, just delete what you have and go back and open that snippet, which is that little puzzle icon, and go ahead and dump in the sidebar navigation snippet. Well, it's going to look super weird. So I'm going to go back to what I had before, use my Ctrl Z and go back to what I've got. So these are just links. And those are made up here, right, like we've done before. And you can see here I'm using those dependency tags, which are super nice. And the way that I can do that is if I click the URL button, I'm going to be able to search for and find the page that I want to link to. So if I'm looking for that getting started, if you can see that behind the grayed out, I'm going to go to that Getting Started folder and open -- and have it open the index file specifically. And then hit Save. And there it is. So if for some reason these break, right, if the links -- oh, it didn't even break the links. Let's try again. There we go. So if these links break, you can always recreate them. You want to highlight the text that you want to create the link for and how we're going to managing websites, right? So I'm going to click into that folder and go to that index page and hit Save. Now if you need to add more, right, we already have six -- seven, if you count the home list -- the home link. So that's already to our limit of what we're -- what we might have in the -- in this menu. But if you're going to add one, it's just like you're adding another bulleted point to an email or to a document in Word. So I'm just going to hit the return key, add my next thing, advance. Here's the next link. I forget what it is. And I'm going to highlight all that text. Click my link button up here. Use my navigator to find the page that I'm looking for. And I believe it's managing websites is the page we actually wanted to link to. So I can do that. I can actually change this text here. Managing the websites and push Save. And I could change that text too. So there you go. And then if I save -- if I save and look at it on a preview -- so this is a preview of a page that that is on. You'll notice that I am -- I have one less link in here, just the managing websites link. And then if I publish, if I go to the live version of this page, you'll notice that I still have the old one with a web accessibility link there. But if I publish this -- that will automatically update every one of these pages that it's on.

01:17:47

Editing the contact file

Now editing the contact file, editing your contact information on your site. So if we're looking at a page, there's our contact information there on the left side. Editing this is just as easy if not easier than editing the site navigation. So in your root folder, the root module -- the root folder of your training module, there we go. Or if you're within a site, you'll be in -- you'll most likely be in the root of that site. There is a contact dot Inc file. So if we open that up, you can see the different -- in this particular case, goofy business that is this contact file. And if I go back and look here, I'll notice that's very similar to what we have, right? So if I change something here, or maybe this is MSU Billings -- say we moved our office to MSU Billings. And I'm going to hit Ctrl S so that it saves it. You can see that save banner below in my preview again, previewing a page that that contact.inc file shows up on. You'll notice that it goes from saying Montana State University. Now it says MSU Billings. It has not changed yet, however, on our -- if I refresh that page, it refreshes pretty quick. So it's hard to tell. But that has not changed on the live page yet because we haven't published it. So the way that this is formatted is really -- all it is bolded text and carriage returns. So -- or if you hold shift, it's just a line break. So if I just push enter here, it's going to put a space between. And what that's telling the HTML to do is to create a new paragraph. And that's not what we want. We want to keep that closer together. So I'm going to hold shift and hit Enter. And that's going to create a carriage return or a line break in HTML. And that puts everything a little bit closer together. Here, of course, we just want to hit enter by itself. So that creates a new paragraph. And the director in this particular case is bold -- bolded. So if I bold that, I can do those things as well. And if I hit Save, I'll be able to see that change reflected on my previewed page. So there's my new email address put in there. Again, not yet done on the live -- the live page. But if now I push Publish and added your email address and moved to MSU Billings. If I publish that here without having to add anything to this other page, that is going to change on the live site. Those dot inc files will change across the live site on any pages that they exist on already.