How to Modify the Layout of a Default.aspx Page in MS SharePoint Designer Video

Get it off your chest – be the first to comment on this video!

How to Modify the Layout of a Default.aspx Page in MS SharePoint Designer

For this chapter, we are going to be modifying the layout of the default.aspx page inside of this project’s site template that we have been working on. The initial change to layout that we want to make is to modify some of the Web Part Zone properties via SharePoint Designer. What I am going to do is sort of move around the Web Part Zones and then move around the Web Parts inside those zones, and then modify some of the HTML behind the page so that they all layout according to my plan. To begin, I want to bring up the Properties for the Web Part Zone in the right hand side of the page. So I am going to scroll over here and just right click this Web Part, and I can choose Web Part Zone Properties. When I select that I see the same kind of Zone Properties dialog that I might get inside of the browser. Here I am going to modify the Zone title to be Bottom. I am going to leave it to have a Title Bar Only. I am going to change the Layout to Side-by-side, and I am going to disable the Browser settings. After I click OK, I can see that the properties on this have changed. When I select it and look at Split view I can see that ListViewWebPart is still inside the same Web Part Zone, but the Web Part Zone is now Bottom instead of Right. What I need to do to make it actually layout on the bottom of the page is modify some of the HTML behind this zone. So I am going to select the table cells just above the zone and remove them. We see here a closing table cell and then a new table cell created. I am going to select that, and simply press Delete. Now what I need to do is modify the table cell that contains the left Web Part Zone in order to give it a colspan and a width of 100%, so that it will replace the table cell where this zone currently resides. To do so, I am going to scroll up in Code View, all the way to the top of the page, and then use Find in order to find the correct table cell to modify. Launch Find by clicking Ctrl+F, and I am going to find the text left. The first one that I find is not the correct one, but as I scroll down through the Find dialog I can see that here is the FrameType, TitleBarOnly. I will double click that, that brings me to the ID in Code View, and I know that the Web Part directly above that is contained inside of the table cell I have to modify. In order to move up the stack inside of HTML I am going to use some of our Code View keyboard shortcuts. I will click on the DataFormWebPart and then hit Ctrl+Shift+; which will select the entire Web Part. That makes it easy for me to just scroll up through Code View and then find the beginning of that Web Part. As soon as the highlighting stops, that’s the beginning of the Web Part. In here I can see the text Reseller which I added, and then another DataFormWebPart above it. I am going to select that DataFormWebPart by pressing Ctrl+Shift+; and scroll up to the top of that one. This will put me at the very, very top of the Web Part Zone on the left. Here is the table cell that I need to modify in order to make it fit that project issues list on the right. I am going to change its colspan using IntelliSense. Notice that when I hit the Spacebar, IntelliSense comes up for the table cell, and I see in the Cs that colspan is one of my choices, I hit Enter, and then type the number 3, and then I am going to change the Width from 70% to 100%. I am going to save the page by pressing Ctrl+S so that I don't lose any of that work. Then I am going to click back in the Design View. You notice that during certain edits of default.aspx controls will begin rendering an error. This isn’t a problem, and in fact, if I browse to this page, they will render it correctly. This is just during some code edits that controls fail to render their Previews properly. There is nothing to be alarmed by, and as soon as I finish editing this page, those will all go away. What I am going to do now is insert a new Web Part Zone using our Insert Menu. I will click on Insert, SharePoint Controls, and you can see these different SharePoint Controls available for insertion. I am

Total Training Official Site

Software training for creative minds. Learn from the experts. Award-winning, high-quality online and DVD Training.

http://www.TotalTraining.com

Featured Links:

Software Development, Layout Design , Software Dev

Software development, Layout design and Software Development services in india.Software services from India are at its boom. We are software development and layout designing service providers from India that offer all its customer, products that are

http://www.articlesbase.com/programming-articles/software-development-layout-design-software-development-services-141042.html/9461024403

For this chapter, we are going to be modifying the layout of the default.aspx page inside of this project’s site template that we have been working on.

The initial change to layout that we want to make is to modify some of the Web Part Zone properties via SharePoint Designer. What I am going to do is sort of move around the Web Part Zones and then move around the Web Parts inside those zones, and then modify some of the HTML behind the page so that they all layout according to my plan.

To begin, I want to bring up the Properties for the Web Part Zone in the right hand side of the page. So I am going to scroll over here and just right click this Web Part, and I can choose Web Part Zone Properties.

When I select that I see the same kind of Zone Properties dialog that I might get inside of the browser. Here I am going to modify the Zone title to be Bottom. I am going to leave it to have a Title Bar Only. I am going to change the Layout to Side-by-side, and I am going to disable the Browser settings.

After I click OK, I can see that the properties on this have changed. When I select it and look at Split view I can see that ListViewWebPart is still inside the same Web Part Zone, but the Web Part Zone is now Bottom instead of Right.

What I need to do to make it actually layout on the bottom of the page is modify some of the HTML behind this zone. So I am going to select the table cells just above the zone and remove them.

We see here a closing table cell and then a new table cell created. I am going to select that, and simply press Delete. Now what I need to do is modify the table cell that contains the left Web Part Zone in order to give it a colspan and a width of 100%, so that it will replace the table cell where this zone currently resides.

To do so, I am going to scroll up in Code View, all the way to the top of the page, and then use Find in order to find the correct table cell to modify.

Launch Find by clicking Ctrl+F, and I am going to find the text left. The first one that I find is not the correct one, but as I scroll down through the Find dialog I can see that here is the FrameType, TitleBarOnly. I will double click that, that brings me to the ID in Code View, and I know that the Web Part directly above that is contained inside of the table cell I have to modify.

In order to move up the stack inside of HTML I am going to use some of our Code View keyboard shortcuts. I will click on the DataFormWebPart and then hit Ctrl+Shift+; which will select the entire Web Part. That makes it easy for me to just scroll up through Code View and then find the beginning of that Web Part. As soon as the highlighting stops, that’s the beginning of the Web Part.

In here I can see the text Reseller which I added, and then another DataFormWebPart above it. I am going to select that DataFormWebPart by pressing Ctrl+Shift+; and scroll up to the top of that one. This will put me at the very, very top of the Web Part Zone on the left.

Here is the table cell that I need to modify in order to make it fit that project issues list on the right. I am going to change its colspan using IntelliSense. Notice that when I hit the Spacebar, IntelliSense comes up for the table cell, and I see in the Cs that colspan is one of my choices, I hit Enter, and then type the number 3, and then I am going to change the Width from 70% to 100%.

I am going to save the page by pressing Ctrl+S so that I don't lose any of that work. Then I am going to click back in the Design View.

You notice that during certain edits of default.aspx controls will begin rendering an error. This isn’t a problem, and in fact, if I browse to this page, they will render it correctly. This is just during some code edits that controls fail to render their Previews properly. There is nothing to be alarmed by, and as soon as I finish editing this page, those will all go away.

What I am going to do now is insert a new Web Part Zone using our Insert Menu. I will click on Insert, SharePoint Controls, and you can see these different SharePoint Controls available for insertion. I am

Transcription by: Scribe4you Transcription Services