Sahrepoint2013 Creating an HTML Layout page

Sahrepoint2013 Creating an HTML Layout pageCategory: SharePoint2014-06-19 09:47 224 people read comments (0) favorite reports SharePoint layout Edit HTML layout add cloth to HTML page

1. Open the design manager in IE to find:

2. Click Create Page layout, select the master page and page content type, as follows

3. Remember to publish the major version after creation .... Click "..." in IE to find

4. Then open SPD, find the corresponding HTML page in the page layout, right-click Check out, then edit in advanced mode,

Open the page first if you want to use an external style connection, use the Find id= "placeholderadditionalpagehead" label inside to write the reference <link href= "Homecontent.css" rel= " Stylesheet "type=" Text/css "ms-design-css-conversion=" no "/> Remember to modify your own path OH:

<!--ms:<asp:contentplaceholder id= "Placeholderadditionalpagehead" runat= "Server" >-->

<!--CS: Start the edit mode panel code snippet--

<!--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: End edit mode Panel code snippet--

<!--me:</asp:contentplaceholder>-->

5. The next step is to draw the layout, if you are familiar with the div as far as possible with the DIV, not familiar with the table, I simply to table as an example to explain:

Find <!--ms:<asp:contentplaceholder id= "PlaceHolderMain" runat= "Server" >--> in the middle there is a lot of content corresponding to us, can be deleted directly, Or you can just write a hidden put them all hidden ~<!--me:</asp:contentplaceholder>-->

Write your layout in the middle of the label.

I drew one of the simplest rows in a row of layouts:

<table style= "width:100%" border= "0" cellpadding= "0" cellspacing= "0" >

<TR valign= "Top" ><td width= "310px" >

<div data-name= "WebPartZone" >

<!--CS: Start the Web part zone?? Code Snippet--

<!--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: Replace this comment with the default Web part for the new page. -

<!--me:</zonetemplate>-->

<!--me:</webpartpages:webpartzone>-->

</div>

<!--CE: End Web part zone?? Code Snippet--

</div>

</td></tr></table>

Note: This does not support direct write WebPartZone, so you need to convert, how to convert it?

Use SPD to open the created HTML page with a piece of code, "

This HTML file is already associated with a SharePoint page layout (. aspx file) that has the same name. Editing the. aspx file is not allowed when the file is still associated, and any rename, move, or delete operations will be performed back and forth.

To build a page layout directly from this HTML file, simply populate the contents of the content placeholder. Use in http://ip/_layouts/15/ComponentHome.aspx? The Url=http%3a%2f%2f10%2e5%2e106%2e228%2f%5fcatalogs%2fmasterpage%2fhome%5fnew%2easpx code snippet Generator creates and customizes additional content placeholders and other useful SharePoint entities, and then copy and paste them as HTML code snippets into the HTML code. All updates to this file within the content placeholder are automatically synced to the associated page layout. "In the second line of the page ~ ~ ~ The inside of the connection address in IE open ~

You will see such as:

There will be a selection of a WebPartZone area, the code area will appear Oh ~ ~ You can like me to change the ID to your own understanding, easy to maintain later OH ~ ~

Sahrepoint2013 Creating an HTML Layout page