Skip to content

Commit 94dc489

Browse files
author
johnaustin
committed
minor clean up
1 parent efa2e6d commit 94dc489

4 files changed

+31
-32
lines changed

docs/general-development/how-to-convert-an-html-file-into-a-master-page-in-sharepoint.md

Lines changed: 20 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ ms.assetid: a76ab289-3256-45de-ac63-d5112a74e3c7
66

77

88
# How to: Convert an HTML file into a master page in SharePoint 2013
9-
With Design Manager, you can convert an.html file into a SharePoint 2013 master page, a .master file. After the conversion, the HTML file and master page are associated, so that when you edit and save the HTML file, the changes are synced to the associated master page.
9+
With Design Manager, you can convert an .html file into a SharePoint 2013 master page, a .master file. After the conversion, the HTML file and master page are associated, so that when you edit and save the HTML file, the changes are synced to the associated master page.
1010
## Introduction to converting a master page
1111
<a name="Introduction"> </a>
1212

@@ -29,7 +29,7 @@ When you convert an HTML file into a master page:
2929
- All markup required by SharePoint 2013 is added to the .master file so that the master page renders correctly.
3030

3131

32-
- Markup such as comments, **<div>** tags, snippets, and content placeholders are added to your original HTML file.
32+
- Markup such as comments, **\<div\>** tags, snippets, and content placeholders are added to your original HTML file.
3333

3434

3535
- The HTML file and master page are associated, so that any later edits to the HTML file are synced to the .master file when the HTML file is saved.
@@ -62,21 +62,21 @@ Before you convert your HTML file, here are some best practices and guidance to
6262
- Consider the SharePoint page model. For more information, see [Overview of the SharePoint 2013 page model](overview-of-the-sharepoint-page-model.md). As you design the HTML mockups of your site, you'll probably have several HTML files for different types of pages, such as an article page or a category page that contains Web Parts that display a category of items from a catalog. But, only one HTML file will be converted into the master page. An HTML file can be converted into a master page, but an HTML file can't be converted directly into a page layout because a page layout requires page fields.
6363

6464

65-
- Make sure your HTML file is XML-compliant. For the conversion to work, the HTML file must be XML-compliant. Unfortunately, this requirement overrides some HTML 5 standards—for example, in HTML 5 you can specify the **doctype** in lowercase, but in XML the **doctype** must be uppercase. Also, you should remove any **<form>** tags from your HTML file. Consider running your HTML file through an external XML validator to identify XML errors before conversion.
65+
- Make sure your HTML file is XML-compliant. For the conversion to work, the HTML file must be XML-compliant. Unfortunately, this requirement overrides some HTML 5 standards—for example, in HTML 5 you can specify the **doctype** in lowercase, but in XML the **doctype** must be uppercase. Also, you should remove any **\<form\>** tags from your HTML file. Consider running your HTML file through an external XML validator to identify XML errors before conversion.
6666

6767

6868
- Consider these important guidelines for your CSS references:
6969

70-
- Don't put **<style>** blocks in the **<head>** tag. These styles are removed during conversion. Instead, link from your HTML file to an external CSS file.
70+
- Don't put **\<style\>** blocks in the **\<head\>** tag. These styles are removed during conversion. Instead, link from your HTML file to an external CSS file.
7171

7272

7373
- Add `ms-design-css-conversion="no"` to the **<CSS link>** tag if you're using a web font.
7474

7575

76-
- Be cautious about applying styles to general HTML tags like **<body>**, **<div>**, and **< img>**. Everything within your SharePoint design, including the ribbon, is within the **<body>** tag. For styles that you would usually apply to the **<body>** tag, consider applying them instead to **<div id="s4-bodyContainer">**, which is a tag that SharePoint 2013 uses for the main body of the page. Also, SharePoint 2013 uses many images that are affected by whatever styles you apply to the **<img>** tag.
76+
- Be cautious about applying styles to general HTML tags like **\<body\>**, **\<div\>**, and **\< img\>**. Everything within your SharePoint design, including the ribbon, is within the **\<body\>** tag. For styles that you would usually apply to the **\<body\>** tag, consider applying them instead to **\<div id="s4-bodyContainer"\>**, which is a tag that SharePoint 2013 uses for the main body of the page. Also, SharePoint 2013 uses many images that are affected by whatever styles you apply to the **\<img\>** tag.
7777

7878

79-
- Many designers style the navigation by applying classes to **<ul>** and **<li>** elements. But, SharePoint 2013 uses a dynamic navigation control, which you can add to your master page from the Snippet Gallery. SharePoint 2013 navigation controls have styles applied by default that you have to override.
79+
- Many designers style the navigation by applying classes to **\<ul\>** and **\<li\>** elements. But, SharePoint 2013 uses a dynamic navigation control, which you can add to your master page from the Snippet Gallery. SharePoint 2013 navigation controls have styles applied by default that you have to override.
8080

8181

8282
- Consider these potential issues about file naming:
@@ -87,9 +87,9 @@ Before you convert your HTML file, here are some best practices and guidance to
8787
- If you have Design/Index.html and Design/SubDesign/Index.html, both of those files are available for conversion into their own, separate .master files, but they'll both show up as Index.html in the master page list in Design Manager. To disambiguate them, click or select the ellipsis button for each file to see the full path.
8888

8989

90-
- If you're adding a JavaScript widget, make sure the **<script>** start tag is on its own line.
90+
- If you're adding a JavaScript widget, make sure the **\<script\>** start tag is on its own line.
9191

92-
```
92+
```
9393
9494
<script>
9595
(function( …
@@ -104,9 +104,9 @@ Before you convert your HTML file, here are some best practices and guidance to
104104
```
105105
106106
<Script> (function( …
107-
```
107+
```
108108

109-
- A reference to the JQuery library (an external reference) should go before the **</head>** tag.
109+
- A reference to the JQuery library (an external reference) should go before the **\</head\>** tag.
110110

111111

112112

@@ -163,9 +163,9 @@ Before you convert an HTML file, you first have to upload all of your design fil
163163
8. To fix any errors, edit the HTML file that resides directly on the server by using an HTML editor to open and edit the HTML file in the mapped drive. Each time you save the HTML file, any changes are synced to the associated .master file.
164164

165165

166-
9. After your master page previews successfully, you will see a **<div>** tag that gets added to your HTML file. You may have to scroll to the bottom of the page to see the **<div>** tag.
166+
9. After your master page previews successfully, you will see a **\<div\>** tag that gets added to your HTML file. You may have to scroll to the bottom of the page to see the **\<div\>** tag.
167167

168-
This **<div>** is the main content block. It resides inside a content placeholder named **ContentPlaceHolderMain**. At run time, when a visitor browses your site and requests a page, this content placeholder gets filled with content from a page layout that contains content in a matching content region. You should position this **<div>** where you want your page layouts to appear on the master page.
168+
This **\<div\>** is the main content block. It resides inside a content placeholder named **ContentPlaceHolderMain**. At run time, when a visitor browses your site and requests a page, this content placeholder gets filled with content from a page layout that contains content in a matching content region. You should position this **\<div\>** where you want your page layouts to appear on the master page.
169169

170170
If your HTML file contains static or mockup content in the body of the page, now you begin the process of removing that static content from the HTML master page and applying those styles to other elements of the SharePoint page model, such as page layouts, page field controls, snippets, and display templates. For an example, see [How to: Create a page layout in SharePoint 2013](how-to-create-a-page-layout-in-sharepoint.md).
171171

@@ -178,7 +178,7 @@ When you convert an HTML file into a master page, many lines of markup get added
178178

179179

180180

181-
The markup that gets added includes tags before and in the **<head>** tag, snippets, and content placeholders. Most of the markup is enclosed within comment tags: Whenever you save a change to the HTML file, the conversion process strips out the comments to use the ASP.NET markup within.
181+
The markup that gets added includes tags before and in the **\<head\>** tag, snippets, and content placeholders. Most of the markup is enclosed within comment tags: Whenever you save a change to the HTML file, the conversion process strips out the comments to use the ASP.NET markup within.
182182

183183

184184

@@ -190,7 +190,7 @@ The following is a breakdown of the types of markup that are added to the HTML f
190190

191191

192192

193-
- **Document properties** The **<mso>** tag contains SharePoint metadata, including information about the file itself and some properties needed for the successful conversion to the .master file.
193+
- **Document properties** The **\<mso\>** tag contains SharePoint metadata, including information about the file itself and some properties needed for the successful conversion to the .master file.
194194

195195
```HTML
196196

@@ -203,15 +203,15 @@ The following is a breakdown of the types of markup that are added to the HTML f
203203
</mso:CustomDocumentProperties>
204204
```
205205

206-
- **SharePoint namespace registration** The **<SPM>** tag ("SharePoint markup") provides a line registering a SharePoint namespace.
206+
- **SharePoint namespace registration** The **\<SPM\>** tag ("SharePoint markup") provides a line registering a SharePoint namespace.
207207

208208
```HTML
209209

210210
<!--SPM:<%@Register Tagprefix="SharePoint" Namespace="Microsoft.SharePoint.WebControls" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c"%>-->
211211
<!--SPM:<%@Register Tagprefix="WebPartPages" Namespace="Microsoft.SharePoint.WebPartPages" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c"%>-->
212212
```
213213

214-
- **Comments** The **<CS>** and **<CE>** ("Comment start" and "comment end") tags are ignored during the conversion process. These tags are to help you parse the lines of markup.
214+
- **Comments** The **\<CS\>** and **\<CE\>** ("Comment start" and "comment end") tags are ignored during the conversion process. These tags are to help you parse the lines of markup.
215215

216216
```HTML
217217

@@ -228,7 +228,7 @@ The following is a breakdown of the types of markup that are added to the HTML f
228228
<!--CE: End PlaceHolderMain Snippet-->
229229
```
230230

231-
- **Snippets** The **<MS>** and **<ME>** ("markup start" and "markup end") tags denote the beginning and end of a SharePoint control or a snippet. A snippet is a SharePoint control that adds SharePoint functionality to your page. You can add snippets yourself by using the Snippet Gallery. For more information, see [SharePoint 2013 Design Manager snippets](sharepoint-design-manager-snippets.md).
231+
- **Snippets** The **\<MS\>** and **\<ME\>** ("markup start" and "markup end") tags denote the beginning and end of a SharePoint control or a snippet. A snippet is a SharePoint control that adds SharePoint functionality to your page. You can add snippets yourself by using the Snippet Gallery. For more information, see [SharePoint 2013 Design Manager snippets](sharepoint-design-manager-snippets.md).
232232

233233
```HTML
234234

@@ -278,7 +278,7 @@ The following is a breakdown of the types of markup that are added to the HTML f
278278
<!--ME:</SharePoint:AjaxDelta>-->
279279
```
280280

281-
- **Preview blocks** The **<PS>** and **<PE>** ("Preview start" and "preview end") tags surround a section of HTML code that you shouldn't edit because this section affects only the design-time preview. These preview sections are a snapshot in time of the SharePoint control that snippet is inserting. A preview makes it possible for you to work more meaningfully on the HTML file in a client-side HTML editor. But, changing the content or styling within that preview has no lasting effect on the .master file, which is what SharePoint is ultimately using. To style a snippet, you have to identify and override the SharePoint styles with your own custom CSS.
281+
- **Preview blocks** The **\<PS\>** and **\<PE\>** ("Preview start" and "preview end") tags surround a section of HTML code that you shouldn't edit because this section affects only the design-time preview. These preview sections are a snapshot in time of the SharePoint control that snippet is inserting. A preview makes it possible for you to work more meaningfully on the HTML file in a client-side HTML editor. But, changing the content or styling within that preview has no lasting effect on the .master file, which is what SharePoint is ultimately using. To style a snippet, you have to identify and override the SharePoint styles with your own custom CSS.
282282

283283
```HTML
284284

@@ -314,9 +314,9 @@ It's important to know about two of the snippets that are added to your HTML fil
314314
<!--ME:</SharePoint:SPSecurityTrimmedControl>-->
315315
```
316316

317-
- **ContentPlaceHolderMain** At the bottom of the **<div id="s4-bodyContainer">** tag, before the closing **</body>** tag, the conversion process inserts a content placeholder named **PlaceHolderMain**. Inside this snippet is the black-bordered, yellow **<div>** that appears in the design view of your HTML editor, or in the server-side preview in Design Manager.
317+
- **ContentPlaceHolderMain** At the bottom of the **\<div id="s4-bodyContainer"\>** tag, before the closing **\</body\>** tag, the conversion process inserts a content placeholder named **PlaceHolderMain**. Inside this snippet is the black-bordered, yellow **\<div\>** that appears in the design view of your HTML editor, or in the server-side preview in Design Manager.
318318

319-
This **<div>** represents the area where the content specified by your page layouts and pages will go. You should move the **PlaceHolderMain** snippet to the place within your master page that will be filled by your page layouts—the area of your site design that isn't the same across all pages of your site.
319+
This **\<div\>** represents the area where the content specified by your page layouts and pages will go. You should move the **PlaceHolderMain** snippet to the place within your master page that will be filled by your page layouts—the area of your site design that isn't the same across all pages of your site.
320320

321321

322322

docs/general-development/how-to-create-a-minimal-master-page-in-sharepoint.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -71,9 +71,9 @@ Starting with a minimal master page is useful when:
7171

7272
The preview page also contains a **Snippets** link in the upper-right corner. This link opens the Snippet Gallery, where you can begin replacing static or mock-up controls in your design with dynamic SharePoint controls. For more information, see [SharePoint 2013 Design Manager snippets](sharepoint-design-manager-snippets.md).
7373

74-
After your master page previews successfully, you will see a **<div>** tag that gets added to your HTML file. You may have to scroll to the bottom of the page to see the **<div>** tag.
74+
After your master page previews successfully, you will see a **\<div\>** tag that gets added to your HTML file. You may have to scroll to the bottom of the page to see the **\<div\>** tag.
7575

76-
This **<div>** is the main content block. It resides inside a content placeholder named **ContentPlaceHolderMain**. At run time, when a visitor browses your site and requests a page, this content placeholder gets filled with content from a page layout that contains content in a matching content region. You should position this **<div>** where you want your page layouts to appear on the master page.
76+
This **\<div\>** is the main content block. It resides inside a content placeholder named **ContentPlaceHolderMain**. At run time, when a visitor browses your site and requests a page, this content placeholder gets filled with content from a page layout that contains content in a matching content region. You should position this **\<div\>** where you want your page layouts to appear on the master page.
7777

7878

7979
7. You can edit the HTML file that resides directly on the server by using an HTML editor to open and edit the HTML file in a mapped drive. Each time you save the HTML file, any changes are synced to the associated .master file. For more information, see [How to: Map a network drive to the SharePoint 2013 Master Page Gallery](how-to-map-a-network-drive-to-the-sharepoint-master-page-gallery.md).

docs/general-development/sharepoint-design-manager-design-packages.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ Learn how to build and export the visual design of a SharePoint site collection
1111
## Overview of Design Packages
1212
<a name="int"> </a>
1313

14-
InSharePoint 2013, Design Manager can help web developers and designers build and export the visual design of a SharePoint site collection as a package. This package can easily be distributed to customers, or other designated groups, for installation on their site collections. This new feature reduces the complexity of transporting designs, and makes it easier for customers to outsource the visual design of their sites. For example, some usage scenarios can include the following:
14+
In SharePoint 2013, Design Manager can help web developers and designers build and export the visual design of a SharePoint site collection as a package. This package can easily be distributed to customers, or other designated groups, for installation on their site collections. This new feature reduces the complexity of transporting designs, and makes it easier for customers to outsource the visual design of their sites. For example, some usage scenarios can include the following:
1515

1616

1717

0 commit comments

Comments
 (0)