码迷,mamicode.com
首页 > Web开发 > 详细

Sahrepoint2013 创建HTML布局页面

时间:2015-03-08 20:00:58      阅读:155      评论:0      收藏:0      [点我收藏+]

标签:

Sahrepoint2013 创建HTML布局页面

分类: SharePoint

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

 

Sahrepoint2013 创建HTML布局页面

标签:

原文地址:http://www.cnblogs.com/ningang/p/4322078.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!