Working with Web-part Zones
Web-part zones allow content authors to add and arrange web parts on the page within the browser. Each web-part zone can include multiple web parts. By default, SharePoint blank templates and Team Site templates come with only two zones: a left and a right, as shown in Figure 8-31.
Figure 8-31. Blank site web-part zones
If you need a different type of layout, you have the following options described in this section. It is not recommended that you modify the default.aspx file directly as this is not supported by Microsoft. However, you could create a new web-part page by clicking on Site Actions 
More Options, and then clicking on Page in the left toolbar area. Choose the web-part page icon, and then click on Create. You then just need to add a title, choose an appropriate layout that best fits your needs, and choose a destination library for your page.
If you need additional web-part zones or a different layout, you can open SharePoint Designer 2010, click on “All Files,” and navigate to the library that you saved your web-part page into. Right-click on the page, and choose to edit it in advanced mode. This opens up your page so that you can add or change the web-part layout. The one drawback to web-part pages is that they do not include the left-side navigation control. The other option is to enable publishing within your site and create a new page layout, as described in Chapter 6. To create your own web-part zone, you just need to include in your page the following basic elements, as shown in Listing 8-12.
Listing 8-12. Structure of a Web-part Zone
<td id="_invisibleIfEmpty" class="tlzone" name="_invisibleIfEmpty" valign="top" height="100%">
<WebPartPages:WebPartZone runat="server" Title="Top Left" ID="tlzone" Orientation="Vertical">
<ZoneTemplate></ZoneTemplate>
</WebPartPages:WebPartZone>
</td>
The containing TD has a unique ID that is tied to some JavaScript within the page. The JavaScript is written so that if there is nothing within the web-part zone, it will not display on the page. You can also add in your own custom class to this TD to stylize the web parts in that zone differently. The web-part zone itself has the following properties.
- Title: This zone property allows you create a unique label that will be displayed above the web-part zone area.
- ID: This property requires you to have its own unique ID. The zone ID also cannot include spaces.
- Orientation: This property allows you to set the zone to display web parts stacked vertically or horizontally. To have them stacked vertically, use the “Vertical” value. To set them to display side by side, use the “Horizontal” value.
Once you have finished adding the web-part zones, save the page layout or web-part page. Then create a new page and apply the page layout or edit the web-part page. You should now see all of the zones that you have created. Click on the “Add a web part” button to start adding web parts to your page.
The next section will focus on tips around creating SharePoint 2010 themes.