Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
The same way that your SharePoint sites are made of a collection of lists and libraries, well, your individual web pages on those sites are made up of different pieces too. If you have the right permissions, you can edit these. I'm looking at a typical team site here, and the default homepage, that's very dull, very boring. Even the text itself says Add a new image, change this welcome text, or add new lists by clicking the Edit button above. And if you have the right permissions, you'll have an Edit button above.
The Edit button is on the Ribbon here. It's the one that looks like a pencil touching a piece of paper. You can also find the equivalent by going to your Site Actions menu and selecting Edit Page. They'll both do the same thing, i.e., shift the page into Edit mode. In fact, when they do that, the Edit button goes away to be replaced by a Save & Close button. Once again, the Ribbon is showing us here how it's context-sensitive. It changes based on what we're doing. Right now its shifted into the Page Editing mode, where we're seeing a section of the Ribbon called Editing Tools split into Format Text and Insert.
Really changing things that are on the current page or inserting new things onto this page. You see how the page itself has kind of shifted into a mode where I can directly click in here and even just select some text and change it on the page itself, without needing any special tools. I can change existing text. I can highlight a piece of text and move over here into the Ribbon, where I have such things like Styles, which allows me to say this is a section that I want to be highlighted or I want to represent as a comment or a caption.
I can just click my cursor in there, press Enter and start typing in new content. I have the ability to undo by pressing Ctrl+Z, and I have multiple levels of that. If I have a piece of text selected and I want to select the entire paragraph that it's part of, I can choose to click inside there, come up here to the Ribbon to the Select section, that allows me to choose the paragraph or the entire text division, if I want to. I'm going to select Paragraph. Even here I have a slightly different style option.
rather than change a little piece of text by highlighting or marking some part of it as a caption, I can change the entire paragraph to say a Heading level 1 or a Heading level 3 or a Heading level 4. I've got options for colored headings. I've got options for Paragraph. That's what it was already, and then the ability to change it into different kinds of callouts. So there's quite a few options there. They all work and are all styled in context with the actual page itself. So very useful to just click around and experiment.
I haven't actually selected any of those so when I click my cursor off, it should just revert back to the original paragraph that it was. Over here on the right-hand side, I've got another column of information, and we've got a stock image there. When this image is selected, I get yet another section on the Ribbon called Picture Tools, which allows me to change things such as the width and the Hhight of this. There's Image Styles, No border, a Thin line border, Dark border, and so on. Again, things that you should just experiment with if you want to play around with that.
Or you can just select the entire picture itself and hit the Delete key to delete it. Well, then what? Well, perhaps I want to insert a different one. So how do I add some new content to this page? Well, back to the Ribbon. We have the Insert section here, which offers me the option to insert a table or a picture or link or upload a file, and we've got a section after that called Web Part, which we'll talk about in a moment. Table is actually very easy to do. This is just defining the rows and columns that you want in your table. If you click the arrow, you'll see a very similar table designer that's been in Office for a little while, where I could choose to insert a 3x2 table here.
Select that, click it, and over on that right-hand column, I have my new table. Once again, we're actually seeing the Ribbon itself, context-sensitive, shifts into Table Tools mode, where we have both a Layout section. I can merge or split cells or insert rows below or above, or I can flip into the Design mode. There's not a lot of options in Design here, but you have things like styles. We could change it to a light banded table style or a medium two tones table style, or even clear the cells and clear the borders completely.
And of course you can just select the entire thing and hit the Delete key, if that's what you want to do as well. Now, notice that what we're really looking at here is a two-column layout inside our page. Try as I might, I can't just click my cursor over here on the Quick Launch Bar and type something in there. I can't just click my cursor down here at the bottom of the page and type something, or type something on the Ribbon. It is a very controlled environment. That's what we have to live with and that's the idea of SharePoint. By giving us this controlled environment, we can allow people to edit these pages without having major HTML skills. It's just easy.
But I do want to insert some information here, so I'm going to go back into my second column, click the Insert tab, and click the Picture option. It's going to ask me to select a picture to use. Well, let's say I've got something on my desktop. I'm going to hit my Browse button, and go into my Pictures library. I'm just going to select something from the built-in Windows sample pictures, for the moment. Click Open. What this is going to do is take the picture from my desktop, upload it to a particular library in this SharePoint site, because it after all has to be uploaded to the SharePoint site, otherwise no one else is going to get to see it if it's just on my desktop right now, and click OK and it will upload it.
We'll almost certainly run into the problem that that picture is a little bit too big for us to work with right now. It's probably about 1024x768. I'm just going to click Save. I do have the option of giving it a title. Yeah, definitely a little too big over here, and it's blowing out the entirety of the page. Now, I can change it up here. I've got my horizontal and vertical size. So I could change that to 200 pixels wide. Or I still have the kind of grab handles that I can see in a typical image-editing environment. That if I grab those and drag it down a bit, it will resize it dynamically on the page, which is quite useful.
Now, if I knew I wanted to have this image a much smaller size, a far better idea for me is to resize it before I choose to insert it on the page. So I'm going to delete that one right now. But you see the process for actually adding that is very, very simple. Notice that as well on a blank team site, you also even have a recommended Getting Started section that allows you to share this site. What that means is allow other people to see it, because by default SharePoint will not allow other people to see a site that you've just created.
Change the theme or the color scheme, set a special icon, customize the Quick Launch Bar, and we're going to do all of those things. Once you've actually done that, I could even select this entire block of text and just get rid of it. Now, what if you actually wanted to change the overall look of the page itself, if you didn't like this kind of 70-30 idea? We've got a two-column layout with this being the main column width, Welcome to your first team site, and then this right-hand column. Well, over here on the Ribbon on the Text Layout section, we actually have the option to change to one column or one column with sidebar or two columns, two columns with header, two columns with header and footer.
We have some basic layouts that we can do. But a word of warning, I would be careful if you shift, for example, to one column to see what it looks like. What you'll find is all the content in there will kind of collapse into that single column. If you then change it back in to the one column with sidebar, you'll find that the stuff that was in that sidebar column is now in the first one, because it's forgotten what it was meant to do with it. Well, let's say I've just messed up. Let's say I've made too many deletions and I didn't really mean to do that. What can I do? Well, I haven't saved this page yet.
I could come over here and say Save & Close, but coming down to this button under here, I could say no, I actually want to stop editing. It doesn't say reject any changes, but when I click Stop Editing, it will ask me, do you want to save the changes you made to this page? I'm going to say no, not right now. That's not what I want to do. So we revert back to the original way. Now, this is not a versioning idea. This is just because I hadn't saved the changes. If I had saved my changes, I'm going to be out of luck there. Now, if you're thinking of using SharePoint for a more substantial way of managing your web pages, you're intending to have hundreds of thousands of web pages and perhaps a public website, you might think this is a bit too free form.
It's not quite robust enough. Just to let you know, there are ways of imposing even more control over your web pages. But when you're working with simple, very straightforward, classic SharePoint sites, this is the way that we would be editing our page content. The last thing that we're going to get into is I will show you how to add new sections called Web Parts onto the page, and we've actually got one of those right now. This is this Shared Documents section is what's called a Web Part. We'll talk about what that represents in the next movie.
Get unlimited access to all courses for just $25/month.Become a member
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.
Your file was successfully uploaded.