Home > Sample chapters

Creating and Modifying Web Pages in Microsoft Office SharePoint Designer 2007

Creating an ASP.NET Page

All built-in Web Part Pages consist of an ASP.NET page with Web Part zones. If you want to create a Web Part page similar to the ones created using the browser, then in SharePoint Designer, you could copy an existing page, as you did in Chapter 3, or you need to create an ASP.NET page, associate a master page and insert Web Part zones and Web Parts, using as many Web Part zones as you want in the layout of your choice. All built-in Web Part Pages use tables, but if you are concerned about accessibility, you may want to use tables of HTML <div> tags to lay out the pages you create from scratch. Because you can insert more than one Web Part per Web Part zone, it is common practice to insert one Web Part zone to a table cell or <div> tag.

In this exercise, you will create a new ASP.NET page with a table layout.

  1. On the Common toolbar, click the New Document button.

    httpatomoreillycomsourcemspimages1155031.jpg

    New Document

    A new file named Untitled_1.aspx opens.

  2. On the Common toolbar, click the Save button.

    httpatomoreillycomsourcemspimages1154873.jpg

    Save

    The Save As dialog box opens.

  3. Double-click WebPages. In the File name text box, type ParcelDelivery.aspx.

  4. Click Change title.

    The Set Page Title dialog box opens.

  5. If prompted, type your user name and password, and then click OK.

  6. In the Page title text box, type Consolidated Messenger Parcel Delivery.

    httpatomoreillycomsourcemspimages1155043.png
  7. Click OK to close the Set Page Title dialog box, and then click Save to close the Save As dialog box.

  8. On the Table menu, click Layout Tables.

    The Layout Tables task pane appears in the lower left of the SharePoint Designer program window.

  9. In the Layout Tables task pane, under Table layout, scroll down and click Header, Body, Footer, and Right.

    httpatomoreillycomsourcemspimages1155045.jpg

    Table markers appear in the page body, designating a table 635 (525+110) pixels wide by 611 (83+472+56) pixels high. The green lines indicate the outer edge of the table, and the internal blue lines indicate the cell layout of the table.

    httpatomoreillycomsourcemspimages1155047.jpg