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 webpage 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 thebehind-the-scenes HTML and ASP.NET code that we have here, or there is a mixtureof the two, which is the Split view.

Now, even if you like to stay in one particular view in your other web designapplications, I find that in SharePoint Designer, it's useful to oftenswitch between them.There are some great drag-and-drop capabilities available for Design view, butfor 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 orControl 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 Ihave a couple of useful options here such as Visual Aids.Now, turning these on or off allows me to see things like the areas, thedifferent 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 toselect which particular things you are actually seeing here, like EmptyContainers and Visible Borders and Web Part Zone Borders.And it's just trying to make those invisible pieces selectable so that ifI want, I can use my mouse and come around and select and highlightdifferent 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 onthe 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 thedesign 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, theDesign 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 toinsert yours, you often want to see what exactly is this particular part of thepage 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 whatparagraph 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 seethe paragraph is inside a DIV with a particular class, which itself is insideanother DIV, which itself is inside a table cell, inside a table row, insidea 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 selectthe actual containers that they are in.In SharePoint 2010, we also have another way of doing this, which iscalled Skewer Click.If I select the Home section of the ribbon, I find that there is a SkewerClick option over here.I click that once and then the cursor changes, and I'm going to Skewer, or justhighlight, the thing that I'm interested in.We'll go and the same thing here. I'll click this word tristique, and itpops 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'sinside 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 theCSS Properties panel on the right-hand side is actually changing. It's sensitiveto 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 aparticular font being applied.That can be quite difficult in SharePoint because of the amount of nestingthat 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 haveever viewed a SharePoint page and then decided to view the source of that, youare 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 wasgenerated by SharePoint 2007.

It does work now primarily with DIV tags and SPAN tags and it uses CSSclasses and IDs properly.But you will still see the occasional thing like nested tables being used forlayout and just messy code in general.This code is, after all, being generated and a lot of it has to do with buildingthings 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 anynested 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 ofit 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 Codeview 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 meto create a few things like bookmarks.

Over here I have this Option section that allows me to say turn on or off linenumbers for this code or auto indentation.Now, depending on what you are editing you will often see a lot of this codeshows up in yellow, and that means SharePoint Designer is actually going toprevent 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 verybeneficial 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 thatI 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 contextbecause 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 changethe 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, orwould 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 thefirst place you look.And we will see later where to change some of this code properly, but in thiscode there is no getting past the fact that there is a lot of stuff generated bySharePoint 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 ofthis placeholder text here, I'll see that up here in the Code view, this shows upwithout the yellow background and it's kind of indicating that yes, I cancontinue and go on and change it.Now, any time you do make a change to the file, whether it's in the Code view orthe Design view or the Split view, as soon as you make the change you are goingto 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 havemultiple tabs along the top, and it's very easy to scan them and see which oneshave been changed and which ones haven't.So this isn't the kind of course where I go through this program like SharePointDesigner and go through every single menu option and every tool pane. I doinvite you to explore what is here, but now we know enough to move on.

Resume Transcript Auto-Scroll

Author

Released

11/15/2011

Learn how to use SharePoint Designer 2010 to alter the default appearance of SharePoint web sites. Author Simon Allardice covers simple tasks from creating themes and making basic CSS changes, to fully restyling a site with master pages and page layout templates. He also shows how to aid usability and adoption by providing improved navigation and individual page layouts for site-specific content.