Blog link: https://blog.51cto.com/13969817
Design Manager help many developers create their own website design in SharePoint. Usually we customize master pages based on site design, because it defines throughout the site all pages of common elements, you can "Design Manager" under "Site Settings" and map your network drive, use any HTML editor to edit mother page.
For example, the search box on the home page can help users find the video on the website, after you configure search settings, insert a search box from the gallery, and then from the Design Manager to navigate to the search settings, and add search center URL, update the search segment and copy HTML.
Sample Code: <div id = "s4-bodyContainer">
Page Layout and are defined by the appearance of a set of pages and setting style Web page field in the region of the common element member master page in front of the mapped network drive may be used with any HTML page layout editor.
Development Page layout when using the Design Manager to develop, this development is a direct way to write html file for page elements need to use (eg webpart zone), you can add a snippet by the way, this is the way to get the benefits of faster development .
For example, I would like to add a Web Part Zone snippet for the Media Web Part.
Reference Example Code:
<!--CS: Start Web Part Zone 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" AllowPersonalization="false" ID="x337a5a8d939248d49e9c39d87693bef0" FrameType="TitleBarOnly" Orientation="Vertical">-->
<!--MS:<ZoneTemplate>-->
<!--DC: Replace this comment with default web parts for new pages. -->
<!--ME:</ZoneTemplate>-->
<!--ME:</WebPartPages:WebPartZone>-->
</div>
<!--CE: End Web Part Zone Snippet-->
Other related articles: Build your First Client-Side SharePoint Web Part (the Hello World Part 1)