Professional SharePoint® 2010 Branding and User Interface Design

Creating Page Layouts

❘

275

3. From the ribbon, click New Page Layout.

4. In the New dialog box, leave Content Type Group set to Page Layout Content Types; for

Content Type Name, select Welcome Page; enter a URL Name of Waffl eHome.aspx; enter a

Title of Waffl e Home Page; and then click OK.

SharePoint Designer will create a basic page layout and open it.

5. Switch to Code view by clicking Code at the bottom of the main window.

With the almost empty page layout opened in Code view, you can start adding HTML from

the HTML mockup created in Chapter 3 (the fi les are available with the downloads for this

chapter).

6. Open index.html and copy the contents of <div class=”customBody”>. (You

can omit the

.customClear div because that was included in the master page

created in Chapter 8.) Paste all this code into the new page layout after

<asp:Content ContentPlaceholderID=”PlaceHolderMain” runat=”server”>.

The

PlaceHolderMain should now look like this:

<asp:Content ContentPlaceholderID=”PlaceHolderMain” runat=”server”>

<div class=”customBanner”>

<a href=”#” class=”customBannerText”>Join Our Waffle of the Month Club</a>

<a href=”#” class=”customBannerButton” title=”Join Our Waffle of the Month

Club”></a>

</div>

<div class=”customClear”></div>

<div class=”customGapBeforePod”></div>

<div class=”customClear”></div>

<div class=”customPodHolder”>

<div class=”customPod”>

<div class=”customPodHeader”>Fresh ...