Working with Web Part Pages and Web Parts - Exercise

Contact Us or call 1-877-932-8228
Working with Web Part Pages and Web Parts - Exercise

Working with Web Part Pages and Web Parts

Duration: 15 to 25 minutes.

In this exercise, you will create a new Web Part page and add Web Parts to it.

  1. Create a new Web Part page.
    1. Click the Site Contents link in the Quick Launch menu. Site Contents link.
    2. Click the Site Pages link on the Site Contents page. Site Pages link.
    3. Click the FILES tab to open the toolbar. FILES tab.
    4. Click the New Document drop-down arrow and then choose the Web Part Page option. Web part page choice.
    5. Type "MyWebPartPage" in the Name field. Take a moment to read through the different options in the Layout list box as well as the options in the Save Location combo box.Web Part page create form
    6. Select Header, Left Column, Body in the Layout list box and leave Site Pages as the choice for the Save Location. Click the Create button to complete the process.
    7. Your new Web Part page will look similar to the image below. Note the regions within the page that are arranged based on the layout option you chose when you created the page and inside those regions are links that allow you to add Web Parts.Web Part page edit mode
  2. Adding a Content Editor Web Part to the Web Part page and create sample content.
    1. With the MyWebPartPage you created in edit mode, click the Add a Web Part link within the Header region.
    2. This will open a new area below the toolbar with categorized Web Parts to choose from. Take a few moments to browse the different categories and Web Parts within those categories. Note how you can choose which region on the Web Part page the Web Part will be added to with the Add Web part to: drop-down field.Web Parts picker region
    3. Select the Media and Content category and select the Content Editor Web Part. Click the Add button to add it to the Header region.
    4. Click the link Click here to add new content inside the Content Editor Web Part you just added.
    5. Type the following text inside the Content Editor Web Part.

      My Web Part Page

      Welcome to my Web Part page.

      This content was created using the Content Editor Web Part.

    6. Select and highlight the line "My Web Part Page" and click the Heading 1 from the Styles area of the FORMAT TEXT tab toolbar. Format Text tab toolbar
    7. Select and highlight the text "Content Editor" and click the Bold button from the Font area.Format Text tab toolbar bold circled
  3. Add a List View Web Part on the Web Part page.
    1. Click the Page Tools Insert tab and click the Web Part icon in the Web Parts area.Page Tools Insert tab with Web Part circled
    2. Click Apps in the Categories list box, Favorite Cars in the Web Parts list box, and Body from the Add Web Part to: combo box. Add Web Part insert tab toolbar
    3. Click the Add button to insert the selected Web Part to the Body region.
    4. Hover your mouse over the top right corner of the new Favorite Cars List View Web Part and click on the arrow that appears and from the drop-down menu select Edit Web Part.Web Part menu with Edit Web Part circled
    5. The previous step will open a properties control for the Favorite Cars List View Web Part with several expandable property regions. Take a few moments to expand and read through the various property options the Web Part offers.Favorite Cars Web Part List View properties
    6. Expand the Appearance region in the Favorite Cars List View Web Part properties control.
    7. In the Appearance region, replace the text in the Title field with "Really Fast Cars" and select Title and Border in the Chrome Type combo box.Favorite Cars Web Part Appearance region
    8. Click the OK button at the bottom of the Web Part properties control to save your property changes.
    9. Click the Stop Editing button on the PAGE tab on the page's toolbar to view the final version of the page.Web Part page Stop Editing control circled