Creating and Modifying Web Pages in Microsoft SharePoint Designer 2010

  • 12/23/2010

Inserting a Web Part Zone

With Wiki pages or Web Part pages, users can manipulate the content of a page by using a browser. On Wiki pages, only the content within the EmbeddedFormField SharePoint control can be modified with a browser, and on Web Part pages, only content within Web Part zones. As you develop solutions, you need to develop pages that allow you to provide content owners the ability to add their own content by using the browser. Therefore, developing your own Wiki pages and Web Part pages is important for your solution.

In Chapter 3, you saw how easy it is to use SharePoint Designer to create your own Web Part pages. You are provided with eight different layouts, but these layouts might not meet your needs—you might need to insert, delete, or modify Web Part zones on your Web Part pages or create your own Web Part page from an ASP.NET page. Developers and Web designers can use Microsoft Visual Studio 2010 to define Web Part zones in pages stored in the root directory on a Web server, or you can use SharePoint Designer to insert a Web Part zone into a new or existing page, which is stored in the SQL Server content databases when you save it.

You can insert only Web Parts into Web Part zones; you cannot insert text or images. Web Part zones have properties that affect the presentation of the Web Parts they contain, and they control the actions users are allowed to perform with the browser. These properties are detailed in the following table.

Web Part zone property


Zone title

Used when storing Web Part information in the SQL Server content database. You should give each zone a meaningful and consistent title; for example, don’t name the Web Part zone in a left cell First on one page and Left on another. This is particularly important if you create Web Part zones on page layouts in publishing sites.

Frame style

The default frame style for all Web Parts in the zone. This setting can be overridden by the Web Part Frame Style property.

Layout of Web Parts contained in the zone

Allows you to choose between Top-To-Bottom (Vertical Layout) or Side-By-Side (Horizontal Layout).

Browser settings for Web Parts contained in the zone

Allows you to restrict the modification of the page by browser users. By clearing the three check boxes, you effectively remove the ability to customize any Web Parts placed in the zone by using the browser.

In this exercise, you insert two Web Part zones.

  1. Position the insertion point where you want to add a Web Part zone, such as inside the form#form1 rectangle.

  2. httpatomoreillycomsourcemspimages1806305.jpg On the Insert tab, click Web Part Zone in the Web Parts group.

    The Web Part Zone Tools, Format tab is displayed. A Web Part Zone labeled Zone 1 appears, and the tag label webpartpages:wikicontentweb appears to the top right of the zone and in orange on the Quick Tag Selector. If the ASP.NET Non-Visual Controls visual aid is on, you also see the SPWebPartManager SharePoint control above the Web Part zone.

  3. On the Web Part Zone Tools, Format tab, in the Zone Title box in the Web Part Zone group, delete Zone 1 and type Main.

  4. httpatomoreillycomsourcemspimages1806309.jpg Click Zone Layout in the Layout group, click Side-by-Side (Horizontal Layout), and then click Properties in the Web Part Zone group.

    The Web Part Zone Properties dialog box opens.

  5. Below Browser settings for Web Parts contained in the zone, clear the three check boxes.

  6. httpatomoreillycomsourcemspimages1806059.jpg Click OK to close the Web Part Zone Properties dialog box, and then on the Quick Access Toolbar, click Save.