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="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改成你自己的认识的，便于后期维护哦~~