SharePoint 2013 came up with new trend of creating master pages for SharePoint which is HTML Master Page . Now creating master pages becomes more easy .All you have to do is create your custom HTML markups and with the help of SharePoint 2013 Design Manager ,you can easily convert your normal HTML file to a SharePoint 2013 master page.Here are the steps to create SharePoint 2013 Custom HTML Master page .
1.Prepare your HTML layout ,you can use Dreamweaver or other HTML editor tool.I have create below HTML layout using Visual Studio .
<html >
1.Prepare your HTML layout ,you can use Dreamweaver or other HTML editor tool.I have create below HTML layout using Visual Studio .
<html >
<div id="leftFooter" ></div><div id="rightFooter"></div></div>
</div></
div></body></
html> As you can see its a pure HTML no other tags are used .Once you completed with your HTML layout ,next step is to put all your files (HTML file, css ,script files, images ) to SharePoint library.
2.Go to
Site Settings >Master page and page layouts > Upload Document
Browse and upload you HTML File to this library,select HTML Master Page from dropdown list .
3.Fill the required description and check complatible UI for 4 and 15 and press Ok.
4.Publish the uploaded file.
5.Upload your design files (css, javascript ,jQuery files and images) to the path mentioned in you HTML markups or css files .
6.Go to Design Manager
10.Click ok .Your selected file will gets converted to master page .
So, your HTML is converted to Master Page .Now next job is put SharePoint components like ,top navigation , vertical navigation ,search box to your master page .
12.Click on Snippets Gallery ,a new window will gets opened .Now if u want to add top-navigation click on the Top-Navigation ,a html snippet will gets generated .Copy the html snippet and paste it on HTML file at appropiate palce.
For editing and placing HTML snippet, open your html file into SharePoint designer to make this job more easy.Paste the snippet into HTML file and save the file .Refresh the preview page to see changes.Similarly you can add other snippets and snippet gallery.
Note:Move the highlighted(yellow) area to the palce where you want to put main containt of the page.
13. Once you done , goto master page gallery to approve and publish your newly created master page ,to make it availaible and start using it .
No comments:
Post a Comment