Join Simon Allardice for an in-depth discussion in this video Using the Code and Design views, part of SharePoint Designer 2010: Branding SharePoint Sites.
Some web developers like to work with the raw HTML code and others want to avoid it. In SharePoint Designer, as in most web development tools, when you open a web page for editing, you have the option of staying all visual in this Design view, a what you see is what you get view. You can switch down here on this status bar to the Code view and look at the behind-the-scenes HTML and ASP.NET code that we have here, or there is a mixture of the two, which is the Split view.
Now, even if you like to stay in one particular view in your other web design applications, I find that in SharePoint Designer, it's useful to often switch between them. There are some great drag-and-drop capabilities available for Design view, but for complete accuracy you will often want to switch over to Code view. Now, the shortcut between these is to use the Control and Page Down buttons or Control and Page Up. That will just toggle around the three different views-- Design, then Split, then Code, and back to Design.
Now, in Design view, I can select this View section up here on the ribbon where I have a couple of useful options here such as Visual Aids. Now, turning these on or off allows me to see things like the areas, the different DIV tags or different table tags that I'm working with. So they are turned on by default, but you can actually use the drop down arrow to select which particular things you are actually seeing here, like Empty Containers and Visible Borders and Web Part Zone Borders. And it's just trying to make those invisible pieces selectable so that if I want, I can use my mouse and come around and select and highlight different pieces here.
Up here on the ribbon, I can also use this Task Panes button to enable sections, very similar to a lot of web design tools. We can come down and turn on the toolbox; it will appear over here on the right-hand side. Or come down and turn on, say, the CSS Properties section. And these task panes are very sensitive to what I actually have selected in the design part of the window. Now, switching to Split view, there are a couple of things worth noticing. First of all is when you are selecting different parts of the page in, say, the Design view, you'll find the equivalent being highlighted up here in code.
And if you need to change something about your page, that can be very helpful. And because SharePoint can generate a lot of code before you actually get to insert yours, you often want to see what exactly is this particular part of the page embedded in, is it inside a table, is it inside a DIV, where is it? We have two ways of doing this. With an element selected, I can select a word here, and it shows me what paragraph it's inside. I could click this invisible element here, this P tag, to select the paragraph. But also down here at the bottom, I have this tag hierarchy where I can see the paragraph is inside a DIV with a particular class, which itself is inside another DIV, which itself is inside a table cell, inside a table row, inside a table body, inside a table, and so on and so forth.
And by mousing around you can actually select these if you want to, to select the actual containers that they are in. In SharePoint 2010, we also have another way of doing this, which is called Skewer Click. If I select the Home section of the ribbon, I find that there is a Skewer Click option over here. I click that once and then the cursor changes, and I'm going to Skewer, or just highlight, the thing that I'm interested in. We'll go and the same thing here. I'll click this word tristique, and it pops up the equivalent of the hierarchy but in this kind of modal, mouseoverable window. So I can mouse over the P and then figure out that's inside another DIV, which is inside another DIV, which is inside a table cell, inside a table row.
And if you notice that as I'm mousing over the different sections, we can see the CSS Properties panel on the right-hand side is actually changing. It's sensitive to what I'm highlighting and what styles are then being applied to that section. And it can be very useful to find out exactly where is a particular color or a particular font being applied. That can be quite difficult in SharePoint because of the amount of nesting that always goes on. So that's Skewer Click.
Now, for those of you who are used to working with very well-structured, handwritten, clean, and perfectly formatted Symantec HTML and CSS, if you have ever viewed a SharePoint page and then decided to view the source of that, you are likely to be a little bit disappointed about what has been delivered to you. Because you will find as you go through it that there is kind of a lot of messy stuff here. In fact, the HTML generated by SharePoint 2010 is much better than what was generated by SharePoint 2007.
It does work now primarily with DIV tags and SPAN tags and it uses CSS classes and IDs properly. But you will still see the occasional thing like nested tables being used for layout and just messy code in general. This code is, after all, being generated and a lot of it has to do with building things like the ribbon and the dropdown menus, and that's complex stuff. You typically find that the generated HTML is technically valid; it's just kind of ugly.
But if you are someone who likes to work in your pages and ensures that any nested DIV tag is always on a new line and indented three perfect spaces, SharePoint is not going to be your friend. Some of this ugliness you are just going to have to live with, though some of it you will be able to change and improve, particularly if you are doing a total redesign. And that's one of the reasons why you will some times want to work in the Code view of SharePoint Designer to get the accuracy that you need. Now, just as there are settings in Design view, we also have settings in Code view. With that highlighted, I have a different section of the ribbon which allows me to create a few things like bookmarks.
Over here I have this Option section that allows me to say turn on or off line numbers for this code or auto indentation. Now, depending on what you are editing you will often see a lot of this code shows up in yellow, and that means SharePoint Designer is actually going to prevent you from editing it, or at least initially. And you might be thinking, well, why do they show me this code if I can't edit it? Because it's useful, it shows you this yellow code because it's often very beneficial to know the larger context of the page you are in.
The yellow code in Code view is kind of like the idea of the no-entry sign that I get when I'm in Design view. It's really saying, if you want to edit this, you don't want to edit it this way. It's trying to stop you from accidently making a change in the wrong context because so much of what you have is common to multiple pages. So let's say, we were editing this page in Design view and I wanted to change the navigation over here on the left-hand side. Well, this is site-wide navigation. So if it let me do that, would I be changing the navigation for just this page, or would I be changing it for the entire site? It's not clear, so it doesn't let me do it this way.
Same idea with the Code view. This is being generated and it will be the wrong place for me to change it. As you will see, everything is editable, but it's not always editable in the first place you look. And we will see later where to change some of this code properly, but in this code there is no getting past the fact that there is a lot of stuff generated by SharePoint that we may just not understand yet. We'll see a lot of tags here that aren't usual HTML tags. There are things like SharePoint: UIVersionedContent and tags that begin with asp:Content.
And we are going to get into these a little later on in the course. When I'm changing something that can be changed in both views, say just some of this placeholder text here, I'll see that up here in the Code view, this shows up without the yellow background and it's kind of indicating that yes, I can continue and go on and change it. Now, any time you do make a change to the file, whether it's in the Code view or the Design view or the Split view, as soon as you make the change you are going to notice that the tab up here that says Sample.aspx has an asterisk after it.
And that's telling you that this file has been changed but has not been saved. And you will find that when you have multiple pages open, you will have multiple tabs along the top, and it's very easy to scan them and see which ones have been changed and which ones haven't. So this isn't the kind of course where I go through this program like SharePoint Designer and go through every single menu option and every tool pane. I do invite you to explore what is here, but now we know enough to move on.
- Understanding the different kinds of SharePoint site customization
- Creating new sites and pages
- Customizing Wiki and web part pages
- Understanding necessary permissions
- Using the built-in themes
- Using SharePoint Designer 2010
- Using normal and advanced editing modes
- Creating inline and embedded CSS styles
- Working with master pages
- Customizing SharePoint sites using the Publishing feature
- Creating new pages based on page layouts
- Growing portal sites
- Creating custom themes
- Customizing site navigation