1.在IE中打開設計管理器，找到：
2.點擊創建頁面佈局，選擇母版頁和頁面內容類型，如下
3.創建後記得發佈主要版本。。。。在IE中點擊“...”就可以找到
4.然後打開SPD，在頁面佈局中找到對應的HTML頁面，點擊右鍵簽出，再高級模式下編輯，
打開頁面首先如果你要使用外部樣式連接，用查找找到 id="PlaceHolderAdditionalPageHead"的標籤在裏面寫上引用 <link href="HomeContent.css" rel="stylesheet" type="text/css" ms-design-css-conversion="no" />記得修改成你自己的路徑哦：
<!--MS:<asp:ContentPlaceHolder id="PlaceHolderAdditionalPageHead" runat="server">-->
<!--CS: 啓動 編輯模式面板 代碼段-->
<!--SPM:<%@Register Tagprefix="SharePoint" Namespace="Microsoft.SharePoint.WebControls" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c"%>-->
<!--SPM:<%@Register Tagprefix="Publishing" Namespace="Microsoft.SharePoint.Publishing.WebControls" Assembly="Microsoft.SharePoint.Publishing, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c"%>-->
<link href="HomeContent.css" rel="stylesheet" type="text/css" ms-design-css-conversion="no" />
<!--MS:<Publishing:EditModePanel runat="server" id="editmodestyles">-->
<!--MS:<SharePoint:CssRegistration name="<% $SPUrl:~sitecollection/Style Library/~language/Themable/Core Styles/editmode15.css %>" After="<% $SPUrl:~sitecollection/Style Library/~language/Themable/Core Styles/pagelayouts15.css %>" runat="server">-->
<!--ME:</SharePoint:CssRegistration>-->
<!--ME:</Publishing:EditModePanel>-->
<!--CE: 結束 編輯模式面板 代碼段-->
<!--ME:</asp:ContentPlaceHolder>-->
5.接下來就要畫布局了，如果你div熟悉儘量用div，不熟悉就用table，我爲了簡單以table爲例子講解：
找到<!--MS:<asp:ContentPlaceHolder id="PlaceHolderMain" runat="server">-->中間有很多內容對應我們來說沒有用，可以直接刪掉，或者你可以直接寫一個隱藏把他們都隱藏了~<!--ME:</asp:ContentPlaceHolder>-->
在標籤中間寫你的佈局就可以了~
我畫了一個最簡單的一行一列的佈局：
<table style="width:100%" border="0" cellpadding="0" cellspacing="0" >
<tr valign="top"><td width="310px">
<div data-name="WebPartZone">
<!--CS: 啓動 Web 部件區域 代碼段-->
<!--SPM:<%@Register Tagprefix="WebPartPages" Namespace="Microsoft.SharePoint.WebPartPages" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c"%>-->
<div xmlns:ie="ie">
<!--MS:<WebPartPages:WebPartZone runat="server" ID="webpart0001" AllowPersonalization="False" FrameType="TitleBarOnly" Orientation="Vertical">-->
<!--MS:<ZoneTemplate>-->
<!--DC: 使用新頁面的默認 Web 部件替換此註釋。 -->
<!--ME:</ZoneTemplate>-->
<!--ME:</WebPartPages:WebPartZone>-->
</div>
<!--CE: 結束 Web 部件區域 代碼段-->
</div>
</td></tr></table>
注意：這裏不支持直接寫webpartzone,所以需要你進行轉換，如何轉換呢？
用SPD打開創建好的html頁面，裏面有一段代碼，“
此 HTML 文件已與具有相同名稱的 SharePoint 頁面佈局(.aspx file)相關聯 。當文件仍保持關聯時，不允許編輯該 .aspx 文件，且任何重命名、移動或刪除操作將進行往復。
要直接從此 HTML 文件構建頁面佈局，只需填充內容佔位符的內容。使用位於 http://ip/_layouts/15/ComponentHome.aspx?Url=http%3A%2F%2F10%2E5%2E106%2E228%2F%5Fcatalogs%2Fmasterpage%2Fhome%5Fnew%2Easpx 的代碼段生成器創建和自定義其他內容佔位符和其他有用的 SharePoint 實體，然後將它們作爲 HTML 代碼段複製粘貼到 HTML 代碼。此文件在內容佔位符內的所有更新將自動同步到關聯的頁面佈局。” 在頁面的第二行~~~裏面的連接地址在IE中打開·~
就會看到如下圖：
裏面會有選擇一個webpartzone區域，代碼區域就會出現了哦~~你可以跟我一樣把ID改成你自己的認識的，便於後期維護哦~~