This next lesson takes that layout and adds Web Parts to the Web Part Zones. I am going to switch back to SharePoint Designer by pressing Alt+Tab. I can see the Web Part Zone that I added during the last lesson. Inside of this Web Part Zone I am going to insert the Projects List Web Part and then modify that Web Part.
In here, I can see a list of all the Web Parts, and I see that there are 64 of them. I will click Next, because I can see that they are alphabetical, and I will Next out until I see Projects List Web Part.
I can then drag and drop this into the zone that I inserted. After that drag and drop we actually fetch the information from the server to find out the list items and the view that's being used as the default view for that list, and then we insert a view, the default view inside of SharePoint Designer.
In this case I want to modify that a little bit. I am going to change the properties so that there is no Toolbar and that the only fields are the title and status. I do so by clicking on the on object view eye and choosing Change Layout. That brings up this dialog, and I am going to uncheck the box for the Toolbar and click OK.
Next, I am going to click on the on object view eye again and change the Fields, so that the only Fields being displayed are the Title and Status.
I select one of the Fields that's currently displaying and click Remove, and then click Remove again, and then click OK. Now I can see that just the Title and the Status are displayed in that Web Part.
In addition to adding Web Parts and Web Part Zones, I can also add Arbitrary HTML, such as Image tags. I can do so by either coding inside of Code View, or simple drag and drop onto our Design surface. In this case, I am going to drag an image from the images folder inside of the site collection and drag it onto the Design surface.
I am going to expand the images folder inside of the folder list, and I see my project.jpg inside of that folder. I then drag that on to the Design surface and drop. I am prompted to insert Alternate text to keep this accessible, and so I will call this my Project Logo, and I can also add a long description, if I so desire. Then I will click OK to that dialog and the image will be inserted.
Now, I can Save the page and then Preview it in the browser, and here again when I expand it to full size, you can see the Project Logo, the new Project List that I just added with just the two fields that I wanted to display, and then all the other content that I left from the previous lessons.
Transcription by:
Scribe4you Transcription Services