Freigeben über

Konvertieren einer HTML-Datei in eine Gestaltungsvorlage in SharePoint

  • Artikel

Wichtig

Diese Erweiterbarkeitsoption ist nur für klassische SharePoint-Oberflächen verfügbar. Sie können diese Option nicht mit modernen Benutzeroberflächen in SharePoint Online, wie z. B. mit Kommunikationswebsites, verwenden. Wir empfehlen nicht mehr, die klassische Benutzeroberfläche oder diese Brandingmethoden zu verwenden.

Mit dem Entwurfs-Manager können Sie eine HTML-Datei in eine SharePoint-Gestaltungsvorlage (MASTER-Datei) konvertieren. Nach der Konvertierung werden die .html Datei und die Gestaltungsvorlage zugeordnet, sodass beim Bearbeiten und Speichern der .html Datei die Änderungen mit der zugeordneten Gestaltungsvorlage synchronisiert werden.

Einführung in das Konvertieren in eine Gestaltungsvorlage

Mit dem Entwurfs-Manager können Sie eine HTML-Datei in eine SharePoint-Gestaltungsvorlage (MASTER-Datei) konvertieren. Nach der Konvertierung werden die .html Datei und die Gestaltungsvorlage zugeordnet, sodass beim Bearbeiten und Speichern der .html Datei die Änderungen mit der zugeordneten Gestaltungsvorlage synchronisiert werden.

Warum möchten Sie eine .html-Datei konvertieren, anstatt eine MASTER-Datei von Grund auf neu zu erstellen? In SharePoint funktionieren Gestaltungsvorlagen genau wie in ASP.NET, aber SharePoint erfordert auch, dass bestimmte Elemente, z. B. Steuerelemente und Inhaltsplatzhalter, die für SharePoint spezifisch sind, auf der Seite vorhanden sein müssen, damit SharePoint diese Gestaltungsvorlage ordnungsgemäß rendern kann. Wenn Sie den Entwurfs-Manager zum Konvertieren einer .html-Datei in eine voll funktionsfähige SharePoint-Gestaltungsvorlage verwenden, müssen Sie ASP.NET oder das SharePoint-spezifische Markup nicht kennen. Stattdessen können Sie sich auf das Entwerfen Ihrer Website in HTML, CSS und JavaScript konzentrieren.

Beim Konvertieren einer HTML-Datei in eine Gestaltungsvorlage passiert Folgendes:

  • Eine MASTER-Datei, die denselben Namen wie Ihre HTML-Datei hat, wird im Gestaltungsvorlagenkatalog erstellt.

  • Das gesamte von SharePoint verlangte Markup wird der MASTER-Datei hinzugefügt, damit die Gestaltungsvorlage ordnungsgemäß gerendert wird.

  • Markup wie Kommentare, <div>-Tags, Codeausschnitte und Inhaltsplatzhalter werden Ihrer ursprünglichen HTML-Datei hinzugefügt.

  • Die HTML-Datei und Gestaltungsvorlage werden miteinander verknüpft, damit spätere Änderungen an der HTML-Datei mit der MASTER-Datei synchronisiert werden, sobald die HTML-Datei gespeichert wird.

Hinweis

Die Synchronisierung erfolgt nur in eine Richtung. Änderungen an der .html Gestaltungsvorlage werden mit der zugeordneten MASTER-Datei synchronisiert, aber wenn Sie die MASTER-Datei direkt bearbeiten möchten, werden die Änderungen nicht mit der .html-Datei synchronisiert. Jede HTML-Gestaltungsvorlage (und jedes .html Seitenlayouts) verfügt über eine Eigenschaft namens Zugeordnete Datei , die standardmäßig auf True festgelegt ist, wodurch die Zuordnung und Synchronisierung zwischen Dateien erstellt wird.

Wenn Sie über ein Paar zugeordneter Dateien (HTML und MASTER) verfügen und die MASTER-Datei bearbeiten, ohne die Zuordnung zu unterbrechen, werden die Änderungen an der MASTER-Datei gespeichert, aber Sie können die MASTER-Datei nicht einchecken oder veröffentlichen, sodass diese Änderungen nicht sinnvoll gespeichert werden. Alle Änderungen an der .html-Datei überschreiben die MASTER-Datei. Wenn Sie die .html-Datei einchecken oder veröffentlichen, setzen die .html Dateiänderungen alle An der MASTER-Datei vorgenommenen Änderungen außer Kraft. Die Änderungen an der MASTER-Datei gehen verloren.

Wenn Sie ein Entwickler sind, der mit ASP.NET vertraut ist, können Sie nur mit der MASTER-Datei arbeiten, indem Sie die Zuordnung zwischen den Dateien aufbrechen. Um die Zuordnung zwischen der .html-Datei und der MASTER-Datei aufzubrechen, wählen Sie im Entwurfs-Manager Eigenschaften bearbeiten für die .html Datei aus, und deaktivieren Sie dann das Kontrollkästchen Zugeordnete Datei . Sie können die Dateien später erneut zuordnen, indem Sie die Eigenschaften bearbeiten und dieses Kontrollkästchen aktivieren. In diesem Fall überschreibt die .html Datei die MASTER-Datei erneut, und änderungen an der MASTER-Datei gehen verloren.

Vorbereiten der HTML-Datei auf die Konvertierung

Vor der Konvertierung Ihrer HTML-Datei sollten Sie einige bewährte Methoden und Tipps befolgen:

  • Berücksichtigen Sie das SharePoint-Seitenmodell. Weitere Informationen finden Sie unter Übersicht über das SharePoint-Seitenmodell. Wenn Sie die .html Modelle Ihrer Website entwerfen, verfügen Sie wahrscheinlich über mehrere .html Dateien für verschiedene Seitentypen, z. B. eine Artikelseite oder eine Kategorieseite, die Webparts enthält, die eine Kategorie von Elementen aus einem Katalog anzeigen. Es wird jedoch nur eine .html Datei in die Gestaltungsvorlage konvertiert. Eine .html-Datei kann in eine Gestaltungsvorlage konvertiert werden, aber eine .html-Datei kann nicht direkt in ein Seitenlayout konvertiert werden, da für ein Seitenlayout Seitenfelder erforderlich sind.

  • Stellen Sie sicher, dass Ihre HTML-Datei XML-kompatibel ist. Damit die Umwandlung funktioniert, muss die HTML-Datei XML-kompatibel sein. Leider setzt diese Anforderung einige HTML 5-Normen außer Kraft. Beispielsweise können Sie den Dokumenttyp(doctype) in HTML 5 in Kleinschreibung angeben, während er in XML in Großbuchstaben geschrieben sein muss. Darüber hinaus sollten Sie alle <form>-Tags aus der HTML-Datei entfernen. Ziehen Sie in Betracht, Ihre HTML-Datei einer externen XML-Datenprüfung zu unterziehen, um XML-Fehler vor der Konvertierung zu ermitteln.

  • Berücksichtigen Sie diese wichtigen Leitlinien für Ihre CSS-Verweise:

    • Platzieren Sie keine <Formatvorlagen>-Bausteine im <head>-Tag. Dieses Formate werden während der Konvertierung entfernt. Stellen Sie stattdessen eine Verknüpfung von Ihrer HTML-Datei zu einer externen CSS-Datei her.

    • Fügen Sie ms-design-css-conversion="no" dem <CSS-Linktag> hinzu, wenn Sie eine Webschriftart verwenden.

    • Seien Sie vorsichtig, wenn Sie Formatvorlagen auf allgemeine HTML-Tags wie <body>, <div> und <img> anwenden. Alles, was sich in Ihrem SharePoint-Entwurf befindet, einschließlich des Menübands, befindet sich im <body>-Tag. Formatvorlagen, die Sie in der Regel dem <body>-Tag zuweisen, sollten Sie stattdessen <div id="s4-bodyContainer"> zuweisen, da SharePoint diesen Tag für den Hauptteil der Seite verwendet. Darüber hinaus verwendet SharePoint viele Bilder, die von allen Formatvorlagen, die Sie auf das <img>-Tag anwenden, beeinflusst werden.

    • Viele Designer gestalten die Navigation durch Anwenden von Klassen auf <ul>- und <li>-Elemente. SharePoint verwendet jedoch dynamische Navigationssteuerelemente, die Sie über Ihre Gestaltungsvorlage aus dem Codeausschnittkatalog hinzufügen können. SharePoint-Navigationssteuerelemente werden standardmäßig Formatvorlagen zugeordnet, die Sie überschreiben müssen.

  • Berücksichtigen Sie diese potenziellen Probleme beim Benennen von Dateien:

    • If you have Index.html and Index.htm, those files will have the same .master file.

    • 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.

  • Wenn Sie ein JavaScript-Widget hinzufügen, vergewissern Sie sich, dass sich das Starttag <script> in einer eigenen Zeile befindet.

  
<script>
(function( …

Geben Sie die Tags nicht in der gleichen Zeile ein (siehe unten).

  
<Script> (function( …
  • Ein Verweis auf die JQuery-Bibliothek (ein externer Verweis) muss sich vor dem </head>-Tag befinden.

Konvertieren Sie die HTML-Datei in eine Masterseite.

Bevor Sie eine .html-Datei konvertieren, müssen Sie zunächst alle Ihre Entwurfsdateien hochladen, einschließlich Ihrer .html-Datei. Weitere Informationen finden Sie unter Vorgehensweise: Zuordnen eines Netzlaufwerks zum SharePoint-Gestaltungsvorlagenkatalog.

So konvertieren Sie die HTML-Datei in eine Gestaltungsvorlage

  1. Wechseln Sie zu Ihrer Veröffentlichungswebsite.

  2. Wählen Sie in der rechten oberen Ecke der Seite Einstellungen und dann Entwurfs-Manager.

  3. Wählen Sie im Entwurfs-Manager im linken Navigationsbereich Gestaltungsvorlagen bearbeiten.

  4. Wählen Sie Konvertieren einer HTML-Datei in eine SharePoint-Gestaltungsvorlage.

  5. Wählen Sie im Dialogfeld Ein Objekt auswählen die HTML-Datei aus, die Sie konvertieren möchten.

    Hinweis

    Wenn Sie Ihre Entwurfsdateien hochladen, sollten Sie alle Dateien im Zusammenhang mit einem einzelnen Entwurf in einem eigenen Ordner im Gestaltungsvorlagenkatalog ablegen. Wenn Sie Ihren Entwurfsordner auf das zugeordnete Netzwerklaufwerk kopieren, behält der Gestaltungsvorlagenkatalog Ihre angelegte Ordnerstruktur bei.

  6. Wählen Sie Einfügen aus.

    An dieser Stelle konvertiert SharePoint Ihre HTML-Datei in eine MASTER-Datei mit demselben Namen.

    Im Entwurfs-Manager wird Ihre HTML-Datei nun mit der Spalte Status mit einem von zwei möglichen Status angezeigt:

  • Fehler

  • Konvertierung erfolgreich

  1. Follow the link in the Status column to preview the file and to view any errors or warnings about the master page.

    Die Preview-Seite ist eine serverseitige Livevorschau der Masterseite. Oben in der Vorschau werden alle Warnungen oder Fehler angezeigt, die Sie möglicherweise beheben müssen, indem Sie die .html-Datei in einem HTML-Editor bearbeiten. Fehler müssen behoben werden, damit die Gestaltungsvorlage in der Vorschau ordnungsgemäß angezeigt wird.

    Weitere Informationen zum Beheben von Fehlern und Warnungen finden Sie unter Vorgehensweise: Beheben von Fehlern und Warnungen bei der Vorschau einer Seite in SharePoint.

    Weitere Informationen zur Vorschau der Gestaltungsvorlage mit verschiedenen Seiten finden Sie unter Vorgehensweise: Ändern der Vorschauseite im SharePoint-Entwurfs-Manager.

    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 mockup controls in your design with dynamic SharePoint controls. Weitere Informationen finden Sie unter Codeausschnitte des SharePoint-Entwurfs-Managers.

  2. Um Fehler zu beheben, bearbeiten Sie die .html Datei, die sich direkt auf dem Server befindet, indem Sie einen HTML-Editor verwenden, um die .html-Datei auf dem zugeordneten Laufwerk zu öffnen und zu bearbeiten. Jedes Mal, wenn Sie die .html-Datei speichern, werden alle Änderungen mit der zugeordneten MASTER-Datei synchronisiert.

  3. Nachdem eine Vorschau der Gestaltungsvorlage angezeigt wurde, wird ein <div>-Tag Ihrer HTML-Datei hinzugefügt. Sie müssen möglicherweise bis zum Ende der Seite scrollen, um das <div>-Tag zu sehen.

    Dieses <div>-Tag ist im Hauptinhaltsblock vorhanden. Es befindet sich in einem Inhaltsplatzhalter ContentPlaceHolderMain. Wenn ein Besucher zur Laufzeit Ihre Website durchsucht und eine Seite anfordert, wird dieser Platzhalter mit Inhalt aus einem Seitenlayout gefüllt, der die Inhalte in einem passenden Inhaltsbereich enthält. Sie sollten das <div>-Tag dort positionieren, wo Ihre Seitenlayouts in der Gestaltungsvorlage angezeigt werden sollen.

    Wenn Ihre .html-Datei statische oder Mockup-Inhalte im Textkörper der Seite enthält, beginnen Sie nun mit dem Entfernen dieses statischen Inhalts von der HTML-Gestaltungsvorlage und dem Anwenden dieser Formatvorlagen auf andere Elemente des SharePoint-Seitenmodells, z. B. Seitenlayouts, Seitenfeldsteuerelemente, Codeausschnitte und Anzeigevorlagen. Ein Beispiel finden Sie unter Vorgehensweise: Erstellen eines Seitenlayouts in SharePoint.

Grundlegendes zur HTML-Datei nach der Konvertierung

Wenn Sie eine .html-Datei in eine Gestaltungsvorlage konvertieren, werden ihrer .html-Datei viele Markupzeilen hinzugefügt. Sie können den Großteil dieses Markups problemlos ignorieren, und der großteil davon wird nicht im endgültigen Markup Ihrer Website angezeigt, wenn Sie die Quelle im Browser anzeigen, aber dieses Markup ist wichtig für die Konvertierung Ihrer .html-Datei in die MASTER-Datei, die SharePoint tatsächlich verwendet. Jedes Mal, wenn Sie eine Änderung an Ihrer .html-Datei speichern, ermöglicht dieses SharePoint-Markup, dass die gleiche Änderung an der zugeordneten MASTER-Datei im Hintergrund vorgenommen wird.

Das Markup, das hinzugefügt wird, enthält Tags vor und im <head>-Tag, Ausschnitte und Inhaltsplatzhalter. Das meiste Markup befindet sich innerhalb von Kommentartags. Immer wenn Sie eine Änderung an der HTML-Datei speichern, entfernt der Konvertierungsprozess die Kommentare, um das enthaltene ASP.NET-Markup zu verwenden.

Arten von Markup

Es folgt eine Übersicht der Arten von Markup, die der HTML-Datei hinzugefügt werden:

  • Dokumenteigenschaften Das <mso>-Tag enthält SharePoint-Metadaten, einschließlich Informationen zur Datei selbst und einiger Eigenschaften, die für die erfolgreiche Konvertierung in die MASTER-Datei benötigt werden.
  
<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>
  • Registrierung eines SharePoint-Namespace Das <SPM>-Tag ("SharePoint-Markup") bietet eine Zeile zur Registrierung eines 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"%>-->
  • Kommentare Die Tags <CS> und <CE> ("Kommentaranfang" und "Kommentarende") werden während des Konvertierungsprozesses ignoriert. Diese Tags dienen zur Analyse der Markupzeilen.
  
<!--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-->
  • Ausschnitte Die <MS>- und <ME>-Tags ("Markup-Anfang" und "Markup-Ende") kennzeichnen den Anfang und das Ende eines SharePoint-Steuerelements oder -Ausschnitts. Ein Ausschnitt ist ein SharePoint-Steuerelement, mit dem Sie SharePoint-Funktionalität zu Ihrer Seite hinzufügen. Mit dem Codeausschnittkatalog können Sie selbst Codeausschnitte hinzufügen. Weitere Informationen finden Sie unter Codeausschnitte des SharePoint-Entwurfs-Managers.
  
<!--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>-->
  • Anzeigen einer Blockvorschau Die <PS>- und <PE>-Tags ("Vorschau-Anfang" und "Vorschau-Ende") umgeben den Bereich eines HTML-Codes, den Sie nicht bearbeiten sollten, da sich dieser Abschnitt nur auf die Entwurfszeit-Vorschau auswirkt. Diese Vorschaubereiche sind eine Momentaufnahme der SharePoint-Steuerelemente, die der Abschnitt einfügt. Eine Vorschau ermöglicht es Ihnen, in einem clientseitigen HTML-Editor effektiver an der HTML-Datei zu arbeiten. Wenn Sie jedoch den Inhalt oder das Format in dieser Vorschau ändern, hat dies keine dauerhaften Auswirkung auf die .master-Datei, die SharePoint letztendlich verwendet. Um einen Ausschnitt zu formatieren, müssen Sie die SharePoint-Formatvorlagen ermitteln und mit Ihren eigenen benutzerdefinierten CSS-Formatvorlagen überschreiben.
  
<!--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-IDs Zwei der Codeausschnitte, die Ihrer .html-Datei während der Konvertierung hinzugefügt wurden (der Codeausschnitt "Seitenkopfinhalt" und das SharePoint-Menüband) weisen eine zugeordnete SharePoint-ID oder SID (00 bzw. 02) auf. Diese IDs ermöglichen es, die Codeausschnitte zu kürzen und den HTML-Code auf der Seite einfacher zu lesen.
  
<!--SID:00 -->

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

Hinzugefügte Codeausschnitte

Es ist wichtig, zwei der Codeausschnitte zu kennen, die Ihrer .html-Datei hinzugefügt werden. Diese Codeausschnitte werden während der Konvertierung automatisch hinzugefügt, können aber nicht aus dem Codeausschnittkatalog hinzugefügt werden.

  • 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. 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 Unter dem Tag <div id="s4-bodyContainer"> und vor dem schließenden Tag </body> fügt der Konvertierungsprozess einen Inhaltsplatzhalter mit dem Namen PlaceHolderMain ein. In diesem Codeausschnitt befindet sich das schwarz umrandete, gelbe <div>, das in der Entwurfsansicht des HTML-Editors oder in der serverseitigen Vorschau im Entwurfs-Manager angezeigt wird.

    Dieses <div> steht für den Bereich, in den der von Ihrem Seitenlayout und Ihren Seiten definierte Inhalt gelangt. Sie müssen den Codeausschnitt PlaceHolderMain an die Stellen in Ihrer Gestaltungsvorlage verschieben, die durch Ihre Seitenlayouts gefüllt werden, d. h. in den Bereich Ihres Websiteentwurfs, der auf allen Seiten Ihrer Website nicht identisch ist.

  
<!--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-->

Referenz: Beispiele von zur HTML-Datei hinzugefügtem SharePoint-Markup

Es folgt ein Beispiel des Markups, das einer HTML-Datei hinzugefügt wird, nachdem sie in eine Gestaltungsvorlage konvertiert wurde.

Dem <head>-Tag hinzugefügtes Markup


<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>

Hinter dem <body>-Anfangstag hinzugefügtes Markup

Codeausschnitt des Menübands


<!--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-->

Zwei SharePoint <div>-Tags


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

Vor dem schließenden </body>-Tag und zwei schließenden </div>-Tags hinzugefügtes Markup


<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>

Siehe auch