Create Master Page using Design Manager?

How to Create Master Page using Design Manager?

Convert an HTML file to a SharePoint master

Create master page using design manger. Following are the steps.

• First you need to create the HTML 5 Compliance design. To generate the design by using your dream viewer.
•  Check your html 5 “http://html5.validator.nu/” validation.
• Navigate to the Site setting under the Look and Feel section. Click Device manger link.

Upload Design Files

 Map the above location as a network drive.

Map Network Drive

You will see “<site>/_catalog/masterpage” location open in the window explorer. Now you can copy your design files from your computer system to this Map location.

Map Network Drive Dialog

I have downloaded the bootstrap “

Shared Master & Layout page Gallery

• Next step I need to navigate to the Design manager “Edit Master Pages” link. There are two options for page creation. First option is “Convert an HTML file to a SharePoint master” and second option “Create a minimal master” page. First Click “Convert an HTML file to a SharePoint Master Page”. 
• The “Select an Assets” popup window open. You can select your html page that either created by your designer or you created your own at copy the same in map location in step 5 and 6.

Select Master page from Assets Library

I select “BootStrap.html” page. SharePoint 2013 design manager convert this html file to master page. The same name master page created at the Master page gallery. Below two Images created in Master Page gallery.

Minimal Master Page

You can see the status of “bootstrap” page conversation. Page status is “Conversation successful”. Its mean there are no error in HTML. If Html markup has problem the status shows error message.

• Click the conversation successful link. The below preview of the bootstrap.html page open in new window. See the below Image.

BootStrap Example

Master Page Example With Search box

• At the top of the page there is an option menu. That has links “Snippets”, “Location” and “Help” at top right position of the preview page. Another dropdown “Change Preview Page” menu at the top left position of the page. This dropdown menu has two further options “Select Existing” Page for preview and “Create New” page. 

Page Preview drop down menu

• The Html bootstrap converted successfully now you want to add the Search box and top navigation to your master page. With the help of “Snippets” you can able to generate the html code snippets and if there is any change you wanted to apply in your control there is a customization option available. You can select the Html Snippet you want to add your master page “Design” from the ribbon. This ribbon there are four categories “Navigation”, “Administration” , “containers”, “web parts” and “Custom Asp.Net Markup”. Select the required markup you want to add. When you select the markup the “Preview” windows shows the preview of that html. Right side of that Preview box display the information about this control. “Html Snippet” box contains the html of that selected control. It provides the option to customize your settings of particular control. Next to the Html snippet. It exposes the all properties of the selected control. Make required changes and press update button to change the preview as well the html snippets. Once you have done your changes press “Copy to clipboard” button and place your .Html file that will automatically update the .master file. In my case I changed my top navigation of “bootstrap.html” page. As showing below in the screenshot.

Snippets Manager

• After making change in my “bootstrap.html“page it automatically sync with master page. Reflected changes showing below screenshot. Publish Master page after done all the changes.

Create a minimal master page

1. To create Master page using design manager there is another option called “Create a minimal master page”.

1. “Create a minimal master page” option available in “Edit Master Page”. To create a page you need to click to the “Create a minimal master page” link.

Create Master Page

1. When you click to the link “Create a Master page” popup open. Give your minimal master page name. It will create minimal page without any branding.

Layout Page Preview

1. See the below MiminalTestMaster page without any branding. Change the MinimalTestMaster.html file if required place snippets as per your design requirement.
2. To apply snippets to your master page repeat step 11 to 14 under heading 6 having sub heading 1.1.
3. “http://blog.drisgill.com/2013/04/starter-master-pages-update-v1-3.html” Randy Drisgill created SharePoint 2013 startup pages.

How to Create the Layout Page of the Using Design?

1. Navigate to Site Settings -> Design Manager (under look and feel).
2. Next in Design Manager select " Edit Page Layouts" and then "Create a page layout".
3. Now create a “BootStrapLayout” Page using the Article Page Content type.



Layout Page

5. When the Layout is Created, it gets available in "Edit Page Layouts" list and the "Master Page gallery" of the site.The Layout Page will be in Drafts mode until you publish it as a major version.



Layout Page Draft Mode

7. Next Edit the New Layout Page and save the Changes.In SharePoint 2013 for every Layout page two files - .aspx and html are created by default.



Layout Pages "Aspx" and "Html" 

9. For making Changes to the Custom Layout, you need to download the html file (see above - BootStrapLayout.html) of your layout page and make Changes to it. The modified html file is then saved back to the MasterPage Page gallery where the corresponding .aspx file gets updated automatically.
10. Once you have updated and saved the Layout page, you need to publish the Layout page as a major version to make it available in Layouts list.
11. Finally, create a new Page with your Custom Layout. Navigate to Site Content in Site Settings and then Open the "Pages" gallery.

Reference

http://msdn.microsoft.com/en-us/library/jj191506.aspx
http://msdn.microsoft.com/en-us/library/jj822370.aspx
http://msdn.microsoft.com/en-us/library/jj862343.aspx