Преобразование HTML-файла в эталонную страницу SharePointConvert an HTML file into a master page in SharePoint

Благодаря Дизайнеру вы можете конвертировать HTML-файл в эталонную страницу SharePoint MASTER-файл. После преобразования HTML-файл и эталонная страница будут связаны, чтобы при редактировании и сохранении HTML-файла эти изменения синхронизировались со связанной эталонной страницей.With Design Manager, you can convert an .html file into a SharePoint 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.

Общие сведения о преобразовании эталонной страницыIntroduction to converting a master page

Благодаря Дизайнеру вы можете конвертировать HTML-файл в эталонную страницу SharePoint MASTER-файл. После преобразования HTML-файл и эталонная страница будут связаны, чтобы при редактировании и сохранении HTML-файла эти изменения синхронизировались со связанной эталонной страницей.With Design Manager, you can convert an .html file into a SharePoint 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.

Зачем преобразовывать HTML-файл, а не создавать MASTER-файл с нуля?Why do you want to convert an HTML file, instead of creating a .master file from scratch? В SharePoint эталонные страницы работают точно так же, как в ASP.NET, но в SharePoint для корректного отображения эталонной страницы также необходимо, чтобы на странице присутствовали определенные элементы, например элементы управления и заполнители контента, относящиеся к SharePoint.In SharePoint, master pages work exactly as they do in ASP.NET, but SharePoint also requires that certain elements, such as controls and content placeholders that are specific to SharePoint, must be present on the page for SharePoint to correctly render that master page. Если вы используете "Дизайнер" для преобразования HTML-файла в полноценную эталонную страницу SharePoint, то вам не потребуется знание разметки ASP.NET или SharePoint. Вместо этого вы можете сосредоточиться на разработке сайта с помощью HTML, CSS и JavaScript.By using Design Manager to convert an HTML file into a fully functioning SharePoint master page, you don't have to know about ASP.NET or the SharePoint-specific markup; instead, you can focus on designing your site in HTML, CSS, and JavaScript.

При преобразовании HTML-файла в эталонную страницу происходит следующее:When you convert an HTML file into a master page:

  • В коллекции эталонных страниц создается MASTER-файл с таким же именем, как у HTML-файла.A .master file with the same name as your HTML file is created in the Master Page Gallery.

  • В MASTER-файл добавляется вся разметка, необходимая SharePoint, поэтому эталонная страница отображается правильно.All markup required by SharePoint is added to the .master file so that the master page renders correctly.

  • В исходный HTML-файл добавляется разметка, например комментарии, теги <div>, фрагменты кода и заполнители контента.Markup such as comments, <div> tags, snippets, and content placeholders are added to your original HTML file.

  • HTML-файл и эталонная страница связываются, поэтому в дальнейшем при сохранении внесенных в HTML-файл изменений, этот файл будет синхронизирован с MASTER-файлом.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.

Примечание

Синхронизация происходит только в одном направлении. Изменения в эталонной HTML-странице синхронизируются со связанным MASTER-файлом, однако изменения, внесенные в MASTER-файл напрямую, не будут синхронизированы с HTML-файлом. Каждая эталонная HTML-страница (и каждый макет HTML-страницы) имеет свойство Связанный файл, которое по умолчанию имеет значение True и устанавливает связь и процесс синхронизации между файлами.The syncing goes in one direction only. Changes to the HTML master page are synced to the associated .master file, but if you choose to edit the .master file directly the changes are not synced to the HTML file. Every HTML master page (and every HTML page layout) has a property named Associated File that is set to True by default, which creates the association and syncing between files.

Если у вас есть пара связанных файлов (HTML и MASTER) и вы изменяете MASTER-файл, не нарушая связь, внесенные изменения будут сохранены, но вы не сможете отметить или опубликовать этот файл, то есть по большому счету эти изменения не сохраняются. Любые изменения в файле HTML перезаписывают MASTER-файл. Если вы отметите или опубликуете HTML-файл, то его изменения перезапишут любые изменения, которые были сделаны в MASTER-файле. Изменения, внесенные в MASTER-файл, будут изменены.If you have a pair of associated files (HTML and .master) and you edit the .master file without breaking the association, the changes to the .master file will be saved, but you can't check in or publish the .master file, so those changes are not saved in a meaningful way. Any changes to the HTML file override the .master file. If you check in or publish the HTML file, the HTML file changes override any changes that were made to the .master file. The changes to the .master file are lost.

Если вы являетесь разработчиком и вам удобно работать с ASP.NET, вы можете разорвать связь между файлами и работать только с MASTER-файлом. Чтобы разорвать связь между HTML- и MASTER-файлами, в Дизайнере выберите для HTML-файла команду Изменить свойства и снимите флажок напротив пункта Связанный файл. Позже вы можете вновь связать эти файлы, изменив свойства и установив флажок; в этом случае изменения, сохраненные в HTML-файле, вновь перезапишут MASTER-файл.If you're a developer comfortable working with ASP.NET, you can choose to work only with the .master file by breaking the association between the files. To break the association between the HTML file and the .master file, in Design Manager, choose Edit Properties for the HTML file, and then clear the Associated File check box. You can later re-associate the files by editing the properties and selecting this check box, in which case the HTML file will again overwrite the .master file, and changes made to the .master file will be lost.

Подготовка HTML-файла к преобразованиюPrepare the HTML file for conversion

Прежде чем преобразовывать HTML-файл, ознакомьтесь с приведенными ниже советами и рекомендациями.Before you convert your HTML file, here are some best practices and guidance to consider:

  • Рассмотрим модель страниц в SharePoint.Consider the SharePoint page model. Дополнительные сведения см. в статье Обзор модели страниц в SharePoint.For more information, see Overview of the SharePoint page model. При создании HTML-макетов для сайта у вас наверняка будет несколько HTML-файлов для страниц разных типов, например страниц со статьями или страниц категорий, содержащих веб-части, в которых отображаются элементы определенной категории из каталога.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. Тем не менее только один HTML-файл будет преобразован в эталонную страницу.But, only one HTML file will be converted into the master page. HTML-файл можно преобразовать в эталонную страницу, но невозможно преобразовать непосредственно в макет страницы, так как для этого необходимы поля страницы.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.

  • Убедитесь, что HTML-файл совместим с форматом XML.Make sure your HTML file is XML-compliant. Для успешного преобразования HTML-файл должен быть совместимым с XML.For the conversion to work, the HTML file must be XML-compliant. К сожалению, это требование переопределяет некоторые стандарты HTML 5. Например, в HTML 5 можно указать значение doctype в нижнем регистре, но в XML значение doctype следует указывать прописными буквами.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. Кроме того, из HTML-файла следует удалить теги <form>.Also, you should remove any <form> tags from your HTML file. Вы можете пропустить HTML-файл через внешнее средство проверки XML, чтобы обнаружить ошибки XML перед преобразованием.Consider running your HTML file through an external XML validator to identify XML errors before conversion.

  • Ниже представлены важные рекомендации, связанные со ссылками CSS.Consider these important guidelines for your CSS references:

    • Не помещайте блоки <style> в тег <head>.Don't put <style> blocks in the <head> tag. Эти стили удаляются во время преобразования.These styles are removed during conversion. Вместо этого ссылайтесь в HTML-файле на внешний CSS-файл.Instead, link from your HTML file to an external CSS file.

    • Добавьте параметр ms-design-css-conversion="no" в тег <CSS link>, если вы используете веб-шрифт.Add ms-design-css-conversion="no" to the <CSS link> tag if you're using a web font.

    • Будьте осторожны, применяя стили к общим HTML-тегам, например <body>, <div> и <img>.Be cautious about applying styles to general HTML tags like <body>, <div>, and <img>. Все содержимое оформления SharePoint, включая ленту, находится внутри тега <body>.Everything within your SharePoint design, including the ribbon, is within the <body> tag. Стили, которые обычно применялись бы к тегу <body>, следует применять к тегу <div id="s4-bodyContainer">, который SharePoint использует для основного текста страницы.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 uses for the main body of the page. Кроме того, SharePoint использует множество изображений, на которые влияют стили, применяемые к тегу <img>.Also, SharePoint uses many images that are affected by whatever styles you apply to the <img> tag.

    • Многие дизайнеры настраивают стиль навигации, применяя классы к элементам <ul> и <li>.Many designers style the navigation by applying classes to <ul> and <li> elements. Однако в SharePoint используется динамический элемент навигации, который можно добавить на эталонную страницу из коллекции фрагментов кода.But, SharePoint uses a dynamic navigation control, which you can add to your master page from the Snippet Gallery. По умолчанию к элементам навигации SharePoint применены стили, которые необходимо переопределять.SharePoint navigation controls have styles applied by default that you have to override.

  • Ниже указаны возможные проблемы с именованием файлов.Consider these potential issues about file naming:

    • Файлы Index.html и Index.htm будут иметь один и тот же MASTER-файл.If you have Index.html and Index.htm, those files will have the same .master file.

    • Файлы Design/Index.html и Design/SubDesign/Index.html будут преобразованы в отдельные MASTER-файлы, но они оба будут отображаться в списке эталонной странице в Дизайнере как Index.html. Чтобы устранить неоднозначность, щелкните каждый файл или нажмите кнопку с многоточием, чтобы увидеть полный путь.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.

  • Если вы добавляете мини-приложение JavaScript, убедитесь, что открывающий тег <script> находится на отдельной строке.If you're adding a JavaScript widget, make sure the <script> start tag is on its own line.

  
<script>
(function( …

Не помещайте их в одну строку, как показано ниже.Do not put them on the same line, like this.

  
<Script> (function( …
  • Ссылка на библиотеку JQuery (внешняя ссылка) должна находиться перед тегом </head>.A reference to the JQuery library (an external reference) should go before the </head> tag.

Преобразование HTML-файла в эталонную страницуConvert the HTML file into a master page

Перед преобразованием HTML-файла необходимо отправить все файлы оформления, включая HTML-файл.Before you convert an HTML file, you first have to upload all of your design files, including your HTML file. Дополнительные сведения см. в статье Инструкции. Сопоставление сетевого диска с коллекцией эталонных страниц SharePoint.For more information, see How to: Map a network drive to the SharePoint Master Page Gallery.

Преобразование HTML-файла в MASTER-файлTo convert the HTML file into a .master file

  1. Перейдите на сайт публикации.Browse to your publishing site.

  2. В правом верхнем углу страницы выберите пункт Параметры, а затем выберите Дизайнер.In the upper-right corner of the page, choose Settings, and then choose Design Manager.

  3. Откройте "Дизайнер" и в области навигации слева выберите команду Изменить главные страницы.In Design Manager, in the left navigation pane, choose Edit Master Pages.

  4. Выберите пункт Преобразование HTML-файла в главную страницу SharePoint.Choose Convert an HTML file to a SharePoint master page.

  5. В диалоговом окне Выбор актива найдите и выберите преобразуемый HTML-файл.In the Select an Asset dialog box, browse to and select the HTML file that you want to convert.

    Примечание

    При отправке файлов разработки сохраните все файлы, связанные с одним оформлением, в собственной папке в коллекции главных страниц. Когда выполняется копирование папки разработки на подключенный сетевой диск, коллекция эталонных страниц сохраняет всю созданную вами структуру папок.When you upload your design files, you should keep all files that are related to a single design in their own folder in the Master Page Gallery. When you copy your design folder into the mapped network drive, the Master Page Gallery retains whatever folder structure you created.

  6. Нажмите кнопку Вставить.Choose Insert.

    На этом этапе SharePoint преобразует HTML-файл в MASTER-файл с таким же именем.At this point, SharePoint converts your HTML file into a .master file with the same name.

    Теперь в компоненте "Дизайнер" для вашего HTML-файла отображается столбец "Состояние", в котором показано одно из двух возможных состояний:In Design Manager, your HTML file now appears with a Status column that shows one of two possible statuses:

  • Предупреждения и ошибки.Warnings and Errors

  • Преобразование выполнено успешно.Conversion successful

  1. Перейдите по ссылке в столбце "Состояние" для предварительного просмотра файла, а также ошибок или предупреждений, касающихся эталонной страницы.Follow the link in the Status column to preview the file and to view any errors or warnings about the master page.

    Страница предварительного просмотра — это страница динамического просмотра эталонной страницы на стороне сервера. Верхняя часть области предварительного просмотра отображает предупреждения или ошибки, которые необходимо устранить, изменив HTML-файл в редакторе HTML. Для того чтобы эталонная страница правильно отображалась во время предварительного просмотра, все ошибки должны быть устранены.The preview page is a live server-side preview of your master page. The top of the preview displays any warnings or errors that you may have to resolve by editing the HTML file in an HTML editor. Errors must be fixed before the preview will display the master page correctly.

    Дополнительные сведения об устранении ошибок и предупреждений см. в статье Инструкции. Устранение ошибок и предупреждений во время предварительного просмотра страницы в SharePoint.For more information about resolving errors and warnings, see How to: Resolve errors and warnings when previewing a page in SharePoint.

    Дополнительные сведения о предварительном просмотре эталонной страницы с различными страницами см. в статье Инструкции. Изменение страницы предварительного просмотра в компоненте "Дизайнер" SharePoint.For more information about previewing the master page with different pages, see How to: Change the preview page in SharePoint Design Manager.

    На странице предварительного просмотра также есть ссылка "Фрагменты кода" в правом верхнем углу.The preview page also contains a Snippets link in the upper-right corner. Эта ссылка ведет к коллекции фрагментов кода, где можно начать заменять статические или временные элементы управления в оформлении на динамические элементы управления SharePoint.This link opens the Snippet Gallery, where you can begin replacing static or mockup controls in your design with dynamic SharePoint controls. Дополнительные сведения см. в статье Фрагменты кода в компоненте "Дизайнер" SharePoint.For more information, see SharePoint Design Manager snippets.

  2. Чтобы устранить ошибки, с помощью HTML-редактора откройте и измените HTML-файл на подключенном диске на стороне сервера. Каждый раз при сохранении HTML-файла, все изменения синхронизируется со связанным MASTER-файлом.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.

  3. После успешного предварительного просмотра эталонной страницы в HTML-файл будет добавлен тег <div>.After your master page previews successfully, you will see a <div> tag that gets added to your HTML file. Возможно, чтобы увидеть тег <div>, потребуется прокрутить страницу вниз.You may have to scroll to the bottom of the page to see the <div> tag.

    Этот тег <div> является основным блоком контента.This <div> is the main content block. Он находится в заполнителе контента с именем ContentPlaceHolderMain.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. Этот тег <div> следует поместить там, где должны отображаться макеты страниц на эталонной странице.You should position this <div> where you want your page layouts to appear on the master page.

    Если HTML-файл содержит статический или временный контент в основном тексте страницы, теперь начинается процесс удаления этого статического контента с эталонной HTML-страницы и применения этих стилей к другим элементам модели страниц SharePoint, например макетам страниц, полям страниц, фрагментам кода и шаблонам отображения.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. Пример вы найдете в статье Инструкции. Создание макета страницы в SharePoint.For an example, see How to: Create a page layout in SharePoint.

Общие сведения об HTML-файле после преобразованияUnderstanding the HTML file after conversion

После преобразования HTML-файла в эталонную страницу в этот файл будет добавлено большое количество строк разметки. Вы можете не обращать внимания на большую ее часть, так как она не будет отображаться в конечной разметке вашего сайта при просмотре источника в браузере, однако эта разметка критична для преобразования вашего HTML-файла в MASTER-файл, который фактически используется SharePoint. Каждый раз при сохранении HTML-файла эта разметка SharePoint позволяет выполнить аналогичные изменения в связанном MASTER-файле в фоновом режиме.When you convert an HTML file into a master page, many lines of markup get added to your HTML file. You can safely ignore most of this markup, and most of it will not appear in the final markup of your site when you view source in the browser, but this markup is critical for converting your HTML file into the .master file that SharePoint actually uses. Each time you save a change to your HTML file, this SharePoint markup makes it possible for that same change to be made to the associated .master file in the background.

Добавляемая разметка включает теги, расположенные до тега <head> и в нем, фрагменты кода и заполнители контента.The markup that gets added includes tags before and in the <head> tag, snippets, and content placeholders. Большая часть разметки заключена в теги комментариев. Каждый раз при сохранении изменений в HTML-файле в процессе преобразования вырезаются комментарии, чтобы можно было использовать заключенную в них разметку ASP.NET.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.

Типы разметкиTypes of markup

Ниже представлены типы разметки, которые добавляются в HTML-файл.The following is a breakdown of the types of markup that are added to the HTML file:

  • Свойства документа. Тег <mso> содержит метаданные SharePoint, в том числе сведения о самом файле и некоторые свойства, необходимые для успешного преобразования в MASTER-файл.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.
  
<mso:CustomDocumentProperties>
<mso:HtmlDesignFromMaster msdt:dt="string"></mso:HtmlDesignFromMaster>
<mso:HtmlDesignStatusAndPreview msdt:dt="string">http://[server_name]/sites/PubSite/_catalogs/masterpage/[site_name]/index.html, Conversion successful.</mso:HtmlDesignStatusAndPreview>
<mso:ContentTypeId msdt:dt="string">0x0101000F1C8B9E0EB4BE489F09807B2C53288F0054AD6EF48B9F7B45A142F8173F171BD10003D357F861E29844953D5CAA1D4D8A3A0084F0F9C7FCB65541A59990D173DA60FA</mso:ContentTypeId>
<mso:HtmlDesignAssociated msdt:dt="string">1</mso:HtmlDesignAssociated>
<mso:HtmlDesignConversionSucceeded msdt:dt="string">True</mso:HtmlDesignConversionSucceeded>
</mso:CustomDocumentProperties>
  • Регистрация пространства имен SharePoint. Тег <SPM> ("разметка SharePoint") содержит строку, регистрирующую пространство имен SharePoint.SharePoint namespace registration The <SPM> tag ("SharePoint markup") provides a line registering a SharePoint namespace.
  
<!--SPM:<%@Register Tagprefix="SharePoint" Namespace="Microsoft.SharePoint.WebControls" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c"%>-->
        <!--SPM:<%@Register Tagprefix="WebPartPages" Namespace="Microsoft.SharePoint.WebPartPages" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c"%>-->
  • Комментарии. Теги <CS> и <CE> (начало и конец комментария) игнорируются во время преобразования.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.
  
<!--CS: Start Page Head Contents Snippet-->
…
<!--CE: End Page Head Contents Snippet-->

  <!--CS: Start Ribbon Snippet-->
…
<!--CE: End Ribbon Snippet-->

<!--CS: Start PlaceHolderMain Snippet-->
…
<!--CE: End PlaceHolderMain Snippet-->
  • Фрагменты кода. Теги <MS> и <ME> (начало и конец разметки) обозначают начало и конец элемента управления SharePoint или фрагмента кода.Snippets The <MS> and <ME> ("markup start" and "markup end") tags denote the beginning and end of a SharePoint control or a snippet. Фрагмент кода — это элемент управления SharePoint, добавляющий функции SharePoint на страницу.A snippet is a SharePoint control that adds SharePoint functionality to your page. Вы можете добавлять их самостоятельно с помощью коллекции фрагментов кода.You can add snippets yourself by using the Snippet Gallery. Дополнительные сведения см. в статье Фрагменты кода в компоненте "Дизайнер" SharePoint.For more information, see SharePoint Design Manager snippets.
  
<!--MS:<SharePoint:RobotsMetaTag runat="server">-->
        <!--ME:</SharePoint:RobotsMetaTag>-->
        <!--MS:<SharePoint:PageTitle runat="server">-->
            <!--MS:<asp:ContentPlaceHolder id="PlaceHolderPageTitle" runat="server">-->
                <!--MS:<SharePoint:ProjectProperty Property="Title" runat="server">-->
                <!--ME:</SharePoint:ProjectProperty>-->
            <!--ME:</asp:ContentPlaceHolder>-->
        <!--ME:</SharePoint:PageTitle>-->
        <!--MS:<SharePoint:StartScript runat="server">-->
        <!--ME:</SharePoint:StartScript>-->
        <!--MS:<SharePoint:CssLink runat="server" Version="15">-->
        <!--ME:</SharePoint:CssLink>-->
        <!--MS:<SharePoint:CacheManifestLink runat="server">-->
        <!--ME:</SharePoint:CacheManifestLink>-->
        <!--MS:<SharePoint:PageRenderMode runat="server" RenderModeType="Standard">-->
        <!--ME:</SharePoint:PageRenderMode>-->
        <!--MS:<SharePoint:ScriptLink language="javascript" name="core.js" OnDemand="true" runat="server" Localizable="false">-->
        <!--ME:</SharePoint:ScriptLink>-->
        <!--MS:<SharePoint:ScriptLink language="javascript" name="menu.js" OnDemand="true" runat="server" Localizable="false">-->
        <!--ME:</SharePoint:ScriptLink>-->
        <!--MS:<SharePoint:ScriptLink language="javascript" name="callout.js" OnDemand="true" runat="server" Localizable="false">-->
        <!--ME:</SharePoint:ScriptLink>-->
        <!--MS:<SharePoint:ScriptLink language="javascript" name="sharing.js" OnDemand="true" runat="server" Localizable="false">-->
        <!--ME:</SharePoint:ScriptLink>-->
        <!--MS:<SharePoint:ScriptLink language="javascript" name="suitelinks.js" OnDemand="true" runat="server" Localizable="false">-->
        <!--ME:</SharePoint:ScriptLink>-->
        <!--MS:<SharePoint:CustomJSUrl runat="server">-->
        <!--ME:</SharePoint:CustomJSUrl>-->
        <!--MS:<SharePoint:SoapDiscoveryLink runat="server">-->
        <!--ME:</SharePoint:SoapDiscoveryLink>-->
        <!--MS:<SharePoint:AjaxDelta id="DeltaPlaceHolderAdditionalPageHead" Container="false" runat="server">-->
            <!--MS:<asp:ContentPlaceHolder id="PlaceHolderAdditionalPageHead" runat="server">-->
            <!--ME:</asp:ContentPlaceHolder>-->
            <!--MS:<SharePoint:DelegateControl runat="server" ControlId="AdditionalPageHead" AllowMultipleControls="true">-->
            <!--ME:</SharePoint:DelegateControl>-->
            <!--MS:<asp:ContentPlaceHolder id="PlaceHolderBodyAreaClass" runat="server">-->
            <!--ME:</asp:ContentPlaceHolder>-->
        <!--ME:</SharePoint:AjaxDelta>-->
        <!--MS:<SharePoint:CssRegistration Name="Themable/corev15.css" runat="server">-->
        <!--ME:</SharePoint:CssRegistration>-->
        <!--MS:<SharePoint:AjaxDelta id="DeltaSPWebPartManager" runat="server">-->
            <!--MS:<WebPartPages:SPWebPartManager runat="server">-->
            <!--ME:</WebPartPages:SPWebPartManager>-->
        <!--ME:</SharePoint:AjaxDelta>-->
  • Блоки предварительного просмотра. Теги <PS> и <PE> (начало и конец предварительного просмотра) окружают раздел HTML-кода, который не следует редактировать, так как этот раздел влияет только на предварительный просмотр в ходе разработки.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. Эти разделы представляют собой моментальный снимок элемента управления SharePoint, вставляемого фрагментом кода.These preview sections are a snapshot in time of the SharePoint control that snippet is inserting. Предварительный просмотр помогает более осознанно работать с HTML-файлом в клиентском редакторе HTML.A preview makes it possible for you to work more meaningfully on the HTML file in a client-side HTML editor. Однако изменение контента или стилей для предварительного просмотра не окажет долговременного влияния на MASTER-файл, который в конечном итоге использует SharePoint.But, changing the content or styling within that preview has no lasting effect on the .master file, which is what SharePoint is ultimately using. Чтобы применить стиль к фрагменту кода, необходимо идентифицировать и переопределить стили SharePoint в пользовательской таблице CSS.To style a snippet, you have to identify and override the SharePoint styles with your own custom CSS.
  
<!--PS: Start of READ-ONLY PREVIEW (do not modify) -->
<div class="DefaultContentBlock" style="background:rgb(0, 114, 198); color:white; width:100%; padding:8px; height:64px; overflow:hidden;">The SharePoint ribbon will be here when your file is either previewed on or applied to your site.</div>
<!--PE: End of READ-ONLY PREVIEW -->
  • Идентификаторы SharePoint. Два фрагмента кода, добавленных в ваш HTML-файл в процессе преобразования (фрагмент кода "Содержимое заголовка страницы" и лента SharePoint), имеют связанный идентификатор SharePoint или идентификатор безопасности (00 и 02, соответственно). Эти идентификаторы позволяют сократить фрагменты кода и упрощают чтение HTML-кода на странице.SharePoint IDs Two of the snippets added to your HTML file during the conversion (the Page Head Contents snippet and the SharePoint Ribbon) have an associated SharePoint ID, or SID (00 and 02, respectively). These IDs make it possible to shorten the snippets and make the HTML in the page easier to read.
  
<!--SID:00 -->

<!--SID:02 {Ribbon}-->

Добавленные фрагменты кодаAdded snippets

Важно знать о двух фрагментах кода, которые будут добавлены в HTML-файл. Эти фрагменты кода добавляются автоматически во время преобразования, но они могут быть недоступны для добавления из коллекции фрагментов кода.It's important to know about two of the snippets that are added to your HTML file. These snippets are added automatically during the conversion, but they're not available for you to add from the Snippet Gallery.

  • Лента. Чтобы авторы контента могли создавать страницы и контент на сайте SharePoint, эталонной странице необходимы лента и "навигация по набору" — новая функция SharePoint.The Ribbon For content authors to be able to create pages and author content on your SharePoint site, your master page needs the ribbon and the "suite navigation" that is new to SharePoint. Лента содержится во фрагменте кода для фильтрации по ролям безопасности, поэтому когда посетитель просматривает сайт, лента видна только пользователям, прошедшим проверку подлинности, и не видна анонимным пользователям.The ribbon is contained in a security-trimming snippet, so that when a visitor browses your site, the ribbon is displayed only to authenticated users, not anonymous users. Вы можете переместить ленту в другое место страницы или стиля, переопределив стандартные классы CSS, но не рекомендуем перемещать и менять местами компоненты (например, меню "Действия сайта") на ленте.You can move the ribbon to a different position on the page or style it by overriding the default CSS classes, but we do not recommend moving or reordering the components (such as the Site Actions menu) that are contained inside the ribbon.
  
<!--MS:<SharePoint:SPSecurityTrimmedControl runat="server" AuthenticationRestrictions="AnonymousUsersOnly">-->
<!--MS:<wssucw:Welcome runat="server" EnableViewState="false">-->
<!--ME:</wssucw:Welcome>-->
<!--ME:</SharePoint:SPSecurityTrimmedControl>-->
  • ContentPlaceHolderMain. В конце тега <div id="s4-bodyContainer"> (перед закрывающим тегом </body>) в ходе преобразования вставляется заполнитель контента с именем PlaceHolderMain.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. Внутри этого фрагмента находится желтый тег <div> с черными границами, который отображается в представлении конструктора в редакторе HTML или в окне предварительного просмотра на сервере в компоненте "Дизайнер".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.

    Этот тег <div> представляет область, в которую будет добавлен контент, заданный макетами страниц и самими страницами.This <div> represents the area where the content specified by your page layouts and pages will go. Фрагмент PlaceHolderMain следует переместить в ту область эталонной страницы, которую заполнят макеты страниц, — область структуры сайта, которая отличается на разных страницах сайта.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.

  
<!--CS: Start PlaceHolderMain Snippet-->
                    <!--SPM:<%@Register Tagprefix="SharePoint" Namespace="Microsoft.SharePoint.WebControls" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c"%>-->
                    <!--MS:<SharePoint:AjaxDelta ID="DeltaPlaceHolderMain" IsMainContent="true" runat="server">-->
                        <!--MS:<asp:ContentPlaceHolder ID="PlaceHolderMain" runat="server">-->
                            <div class="DefaultContentBlock" style="border:medium black solid; background:yellow; color:black; margin:20px; padding:10px;">
            This div, which you should delete, represents the content area that your Page Layouts and pages will fill. Design your Master Page around this content placeholder.
        
                            </div>
                        <!--ME:</asp:ContentPlaceHolder>-->
                    <!--ME:</SharePoint:AjaxDelta>-->
                    <!--CE: End PlaceHolderMain Snippet-->

Справочник. Примеры разметки SharePoint, добавленной в HTML-файлReference: Examples of SharePoint markup added to the HTML file

Ниже приведен пример разметки, добавленной в HTML-файл после его преобразования в эталонную страницу.The following is an example of markup added to an HTML file after it is converted to a master page.

Разметка, добавленная в тег <head>Markup added to the <head> tag


<head>
        <meta http-equiv="X-UA-Compatible" content="IE=10" />
        <!--CS: Start Page Head Contents Snippet-->
        <!--SPM:<%@Register Tagprefix="SharePoint" Namespace="Microsoft.SharePoint.WebControls" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c"%>-->
        <!--SPM:<%@Register Tagprefix="WebPartPages" Namespace="Microsoft.SharePoint.WebPartPages" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c"%>-->
        <!--SID:00 -->
        <meta name="GENERATOR" content="Microsoft SharePoint" />
        <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
        <meta http-equiv="Expires" content="0" />
        <!--MS:<SharePoint:RobotsMetaTag runat="server">-->
        <!--ME:</SharePoint:RobotsMetaTag>-->
        <!--MS:<SharePoint:PageTitle runat="server">-->
            <!--MS:<asp:ContentPlaceHolder id="PlaceHolderPageTitle" runat="server">-->
                <!--MS:<SharePoint:ProjectProperty Property="Title" runat="server">-->
                <!--ME:</SharePoint:ProjectProperty>-->
            <!--ME:</asp:ContentPlaceHolder>-->
        <!--ME:</SharePoint:PageTitle>-->
        <!--MS:<SharePoint:StartScript runat="server">-->
        <!--ME:</SharePoint:StartScript>-->
        <!--MS:<SharePoint:CssLink runat="server" Version="15">-->
        <!--ME:</SharePoint:CssLink>-->
        <!--MS:<SharePoint:CacheManifestLink runat="server">-->
        <!--ME:</SharePoint:CacheManifestLink>-->
        <!--MS:<SharePoint:PageRenderMode runat="server" RenderModeType="Standard">-->
        <!--ME:</SharePoint:PageRenderMode>-->
        <!--MS:<SharePoint:ScriptLink language="javascript" name="core.js" OnDemand="true" runat="server" Localizable="false">-->
        <!--ME:</SharePoint:ScriptLink>-->
        <!--MS:<SharePoint:ScriptLink language="javascript" name="menu.js" OnDemand="true" runat="server" Localizable="false">-->
        <!--ME:</SharePoint:ScriptLink>-->
        <!--MS:<SharePoint:ScriptLink language="javascript" name="callout.js" OnDemand="true" runat="server" Localizable="false">-->
        <!--ME:</SharePoint:ScriptLink>-->
        <!--MS:<SharePoint:ScriptLink language="javascript" name="sharing.js" OnDemand="true" runat="server" Localizable="false">-->
        <!--ME:</SharePoint:ScriptLink>-->
        <!--MS:<SharePoint:ScriptLink language="javascript" name="suitelinks.js" OnDemand="true" runat="server" Localizable="false">-->
        <!--ME:</SharePoint:ScriptLink>-->
        <!--MS:<SharePoint:CustomJSUrl runat="server">-->
        <!--ME:</SharePoint:CustomJSUrl>-->
        <!--MS:<SharePoint:SoapDiscoveryLink runat="server">-->
        <!--ME:</SharePoint:SoapDiscoveryLink>-->
        <!--MS:<SharePoint:AjaxDelta id="DeltaPlaceHolderAdditionalPageHead" Container="false" runat="server">-->
            <!--MS:<asp:ContentPlaceHolder id="PlaceHolderAdditionalPageHead" runat="server">-->
            <!--ME:</asp:ContentPlaceHolder>-->
            <!--MS:<SharePoint:DelegateControl runat="server" ControlId="AdditionalPageHead" AllowMultipleControls="true">-->
            <!--ME:</SharePoint:DelegateControl>-->
            <!--MS:<asp:ContentPlaceHolder id="PlaceHolderBodyAreaClass" runat="server">-->
            <!--ME:</asp:ContentPlaceHolder>-->
        <!--ME:</SharePoint:AjaxDelta>-->
        <!--MS:<SharePoint:CssRegistration Name="Themable/corev15.css" runat="server">-->
        <!--ME:</SharePoint:CssRegistration>-->
        <!--MS:<SharePoint:AjaxDelta id="DeltaSPWebPartManager" runat="server">-->
            <!--MS:<WebPartPages:SPWebPartManager runat="server">-->
            <!--ME:</WebPartPages:SPWebPartManager>-->
        <!--ME:</SharePoint:AjaxDelta>-->
        <!--CE: End Page Head Contents Snippet-->
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <!--DC:Business Solutions-->
        <link rel="stylesheet" href="css/style.css" type="text/css" charset="utf-8" />
        <!--[if lte IE 7]>
  <link rel="stylesheet" href="css/ie.css" type="text/css" charset="utf-8"/> 
 <![endif]-->
        <!--[if gte mso 9]><xml>
<mso:CustomDocumentProperties>
<mso:HtmlDesignFromMaster msdt:dt="string"></mso:HtmlDesignFromMaster>
<mso:HtmlDesignStatusAndPreview msdt:dt="string">http://[server_name]/sites/PubSite/_catalogs/masterpage/[site_name]/index.html, Conversion successful.</mso:HtmlDesignStatusAndPreview>
<mso:ContentTypeId msdt:dt="string">0x0101000F1C8B9E0EB4BE489F09807B2C53288F0054AD6EF48B9F7B45A142F8173F171BD10003D357F861E29844953D5CAA1D4D8A3A0084F0F9C7FCB65541A59990D173DA60FA</mso:ContentTypeId>
<mso:HtmlDesignAssociated msdt:dt="string">1</mso:HtmlDesignAssociated>
<mso:HtmlDesignConversionSucceeded msdt:dt="string">True</mso:HtmlDesignConversionSucceeded>
</mso:CustomDocumentProperties>
</xml><![endif]-->
    </head>

Разметка, добавленная после открывающего тега <body>Markup added after the start <body> tag

Фрагмент кода лентыRibbon snippet


<!--CS: Start Ribbon Snippet-->
        <!--SPM:<%@Register Tagprefix="SharePoint" Namespace="Microsoft.SharePoint.WebControls" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c"%>-->
        <!--SPM:<%@Register Tagprefix="wssucw" TagName="Welcome" Src="~/_controltemplates/15/Welcome.ascx"%>-->
        <!--MS:<SharePoint:SPSecurityTrimmedControl runat="server" HideFromSearchCrawler="true" EmitDiv="true">-->
            <div id="TurnOnAccessibility" style="display:none" class="s4-notdlg noindex">
                <a id="linkTurnOnAcc" href="#" class="ms-accessible ms-acc-button" onclick="SetIsAccessibilityFeatureEnabled(true);UpdateAccessibilityUI();document.getElementById('linkTurnOffAcc').focus();return false;">
                    <!--MS:<SharePoint:EncodedLiteral runat="server" text="&amp;lt;%$Resources:wss,master_turnonaccessibility%&amp;gt;" EncodeMethod="HtmlEncode">-->
                    <!--ME:</SharePoint:EncodedLiteral>-->
                </a>
            </div>
            <div id="TurnOffAccessibility" style="display:none" class="s4-notdlg noindex">
                <a id="linkTurnOffAcc" href="#" class="ms-accessible ms-acc-button" onclick="SetIsAccessibilityFeatureEnabled(false);UpdateAccessibilityUI();document.getElementById('linkTurnOnAcc').focus();return false;">
                    <!--MS:<SharePoint:EncodedLiteral runat="server" text="&amp;lt;%$Resources:wss,master_turnoffaccessibility%&amp;gt;" EncodeMethod="HtmlEncode">-->
                    <!--ME:</SharePoint:EncodedLiteral>-->
                </a>
            </div>
        <!--ME:</SharePoint:SPSecurityTrimmedControl>-->
        <div id="ms-designer-ribbon">
            <!--SID:02 {Ribbon}-->
            <!--PS: Start of READ-ONLY PREVIEW (do not modify) --><div class="DefaultContentBlock" style="background:rgb(0, 114, 198); color:white; width:100%; padding:8px; height:64px; overflow:hidden;">The SharePoint ribbon will be here when your file is either previewed on or applied to your site.</div><!--PE: End of READ-ONLY PREVIEW -->
        </div>
        <!--MS:<SharePoint:SPSecurityTrimmedControl runat="server" AuthenticationRestrictions="AnonymousUsersOnly">-->
            <!--MS:<wssucw:Welcome runat="server" EnableViewState="false">-->
            <!--ME:</wssucw:Welcome>-->
        <!--ME:</SharePoint:SPSecurityTrimmedControl>-->
        <!--CE: End Ribbon Snippet-->

Два тега <div> в SharePointTwo SharePoint <div> tags


<div id="s4-workspace">
            <div id="s4-bodyContainer">

Разметка, добавленная перед закрывающим тегом </body> и двумя закрывающими тегами </div>Markup added before the closing </body> tag and two closing </div> tags


<div data-name="ContentPlaceHolderMain">
                    <!--CS: Start PlaceHolderMain Snippet-->
                    <!--SPM:<%@Register Tagprefix="SharePoint" Namespace="Microsoft.SharePoint.WebControls" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c"%>-->
                    <!--MS:<SharePoint:AjaxDelta ID="DeltaPlaceHolderMain" IsMainContent="true" runat="server">-->
                        <!--MS:<asp:ContentPlaceHolder ID="PlaceHolderMain" runat="server">-->
                            <div class="DefaultContentBlock" style="border:medium black solid; background:yellow; color:black; margin:20px; padding:10px;">
            This div, which you should delete, represents the content area that your Page Layouts and pages will fill. Design your Master Page around this content placeholder.
        
                            </div>
                        <!--ME:</asp:ContentPlaceHolder>-->
                    <!--ME:</SharePoint:AjaxDelta>-->
                    <!--CE: End PlaceHolderMain Snippet-->
                </div>

См. такжеSee also