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="&#60;% $SPUrl:~sitecollection/Style Library/~language/Themable/Core Styles/editmode15.css %&#62;" After="&#60;% $SPUrl:~sitecollection/Style Library/~language/Themable/Core Styles/pagelayouts15.css %&#62;" 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改成你自己的认识的，便于后期维护哦~~