Sahrepoint2013 创建HTML布局页面

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