Compartir a través de

Convertir un archivo .html en una página maestra en SharePoint

  • Artículo

Importante

Esta opción de extensibilidad solo está disponible para experiencias clásicas de SharePoint. No puede usar esta opción con experiencias modernas en SharePoint Online, como con los sitios de comunicación. No se recomienda seguir usando la experiencia clásica o esas técnicas de personalización de marca.

Con el Administrador de diseño puede convertir un archivo .html en una página maestra de SharePoint, un archivo .master. Después de la conversión, se asocian el archivo .html y la página maestra, de modo que al editar y guardar el archivo .html, los cambios se sincronizan con la página maestra asociada.

Introducción a la conversión de una página maestra

Con el Administrador de diseño puede convertir un archivo .html en una página maestra de SharePoint, un archivo .master. Después de la conversión, se asocian el archivo .html y la página maestra, de modo que al editar y guardar el archivo .html, los cambios se sincronizan con la página maestra asociada.

¿Por qué desea convertir un archivo .html, en lugar de crear un archivo .master desde cero? En SharePoint, las páginas maestras funcionan exactamente igual que en ASP.NET, pero SharePoint requiere también que ciertos elementos, como los controles y los marcadores de posición de contenido que son específicos de SharePoint, estén presentes en la página para que SharePoint represente correctamente esa página maestra. Al usar el Administrador de diseño para convertir un archivo de .html en una página maestra de SharePoint totalmente funcionando, no es necesario conocer ASP.NET ni el marcado específico de SharePoint; en su lugar, puede centrarse en diseñar el sitio en HTML, CSS y JavaScript.

Cuando convierte un archivo .html en una página maestra:

  • En la Galería de páginas maestras se crea un archivo .master con el mismo nombre que su archivo .html.

  • Todo el marcado que SharePoint requiere se agrega al archivo .master para que la página maestra se represente correctamente.

  • Las marcas como comentarios,<etiquetas div> fragmentos y marcadores de contenido se agregan a su archivo .html original.

  • El archivo .html y la página maestra están asociados, de modo que cualquier edición posterior del archivo .html se sincroniza con el archivo .maestro cuando se guarda el archivo .html.

Nota:

La sincronización tiene lugar en una única dirección. Los cambios en la página maestra de .html se sincronizan con el archivo .master asociado, pero si decide editar el archivo .master directamente, los cambios no se sincronizan con el archivo .html. Cada página maestra HTML (y cada .html diseño de página) tiene una propiedad denominada Archivo asociado que se establece en True de forma predeterminada, lo que crea la asociación y sincronización entre archivos.

Si tiene un par de archivos asociados (HTML y .master) y edita el archivo .master sin romper la asociación, se guardarán los cambios del archivo .master, pero no puede protegerlo ni publicarlo, por lo que los cambios no se guardan de una forma útil. Los cambios realizados en el archivo .html invalidan el archivo .master. Si comprueba o publica el archivo .html, los cambios en el archivo .html invalidan los cambios realizados en el archivo .master. Los cambios del archivo .master se pierden.

Si es un desarrollador cómodo trabajando con ASP.NET, puede optar por trabajar solo con el archivo .master rompiendo la asociación entre los archivos. Para interrumpir la asociación entre el archivo .html y el archivo .master, en el Administrador de diseño, elija Editar propiedades para el archivo .html y, a continuación, desactive la casilla Archivo asociado . Más adelante puede volver a asociar los archivos editando las propiedades y seleccionando esta casilla, en cuyo caso el archivo .html sobrescribirá de nuevo el archivo .master y se perderán los cambios realizados en el archivo .master.

Preparar el archivo .html para la conversión

Antes de convertir su archivo .html, aquí hay algunas prácticas recomendadas y guías para tener en cuenta:

  • Tenga en cuenta el modelo de páginas de SharePoint. Para obtener más información, vea Información general sobre el modelo de páginas de SharePoint. A medida que diseñe los .html simulacros de su sitio, probablemente tendrá varios archivos .html para diferentes tipos de páginas, como una página de artículo o una página de categoría que contiene elementos web que muestran una categoría de elementos de un catálogo. Sin embargo, solo se convertirá un archivo .html en la página maestra. Un archivo .html se puede convertir en una página maestra, pero un archivo .html no se puede convertir directamente en un diseño de página porque un diseño de página requiere campos de página.

  • Asegúrese de que su archivo .html es compatible con XML. Para que la conversión funcione, el archivo .html debe ser compatible con XML. Lamentablemente, este requisito anula algunos estándares HTML 5 (por ejemplo, en HTML 5 puede especificar el tipo doctype en minúsculas, pero en XML el tipo doctype debe escribirse en mayúsculas). También debe eliminar del archivo HTML todas las etiquetas <formulario>. Considere la posibilidad de ejecutar su archivo .html a través de un validador XML externo para identificar los errores XML antes de la conversión.

  • Tenga en cuenta estas indicaciones importantes para sus referencias a CSS:

    • No coloque bloques <style> en la etiqueta <head>. Estos estilos se quitan durante la conversión. En su lugar, enlace desde su archivo .html a un archivo CSS externo.

    • Agregue ms-design-css-conversion="no" a la <etiqueta de vínculo> CSS si usa una fuente web.

    • Tenga cuidado a la hora de aplicar estilos a las etiquetas HTML generales, como <body>, <div> e <img>. Todo el contenido del diseño de SharePoint, incluida la cinta de opciones, está en la etiqueta <body>. En cuanto a los estilos que normalmente aplicaría a la etiqueta <body>, considere la posibilidad de aplicarlos a <div id="s4-bodyContainer">, que es una etiqueta que usa SharePoint para el cuerpo principal de la página. Además, SharePoint usa muchas imágenes que se ven afectadas por cualquier estilo que aplique a la etiqueta <img>.

    • Muchos diseñadores dan estilo a la navegación aplicando clases a los elementos <ul> y <li>, pero SharePoint usa un control de navegación dinámico, que puede agregar a la página maestra desde la Galería de fragmentos. Los controles de navegación de SharePoint tienen estilos aplicados de forma predeterminada que se deben reemplazar.

  • Tenga en cuenta estos posibles problemas con los nombres de los archivos:

    • Si tiene Index.html e Index.htm, estos archivos tendrán el mismo archivo .master.

    • Si tiene Design/Index.html y Design/SubDesign/Index.html, ambos estarán disponibles para conversión en sus propios archivos .master separados, pero ambos se mostrarán como Index.html en la lista de páginas maestras del Administrador de diseño. Para distinguirlos, haga clic o seleccione el botón de puntos suspensivos de cada archivo para ver la ruta de acceso completa.

  • Si va a agregar un widget de JavaScript, asegúrese de que la etiqueta de inicio <script> está en su propia línea.

  
<script>
(function( …

No las ponga en la misma línea, así.

  
<Script> (function( …
  • Una referencia a la biblioteca JQuery (una referencia externa) debe ir antes de la etiqueta </head>.

Convertir el archivo HTML en una página maestra

Antes de convertir un archivo de .html, primero debe cargar todos los archivos de diseño, incluido el archivo de .html. Para obtener más información, vea Cómo: Asignar una unidad de red a la Galería de páginas maestras de SharePoint.

Para convertir el archivo .html en un archivo .master

  1. Vaya a su sitio de publicación.

  2. En la esquina superior derecha de la página, elija Configuración y, después, elija Administrador de diseño.

  3. En el Administrador de diseño, en el panel de navegación izquierdo, elija Editar páginas maestras.

  4. SeleccioneConvertir un archivo .html en una página maestra de SharePoint.

  5. En el cuadro de diálogo Seleccionar un activo, busque y seleccione el archivo .html que desea convertir.

    Nota:

    Al cargar sus archivos de diseño, debe guardar todos los archivos relacionados con un diseño en su propia carpeta en la Galería de páginas maestras. Cuando copie la carpeta del diseño en la unidad de red asignada, la Galería de páginas maestras conserva la estructura de carpetas que haya creado.

  6. Elija Insertar.

    En este punto, SharePoint convierte su archivo .html en un archivo .master con el mismo nombre.

    En el Administrador de diseño, su archivo .html aparece ahora con una columna de estado que muestra uno de los dos posibles estados:

  • Advertencias y errores

  • Conversión correcta

  1. Siga el vínculo de la columna Estado para mostrar una vista previa del archivo y para ver los errores o advertencias acerca de la página maestra.

    La página de vista previa es una previsualización dinámica del servidor de la página maestra. En la parte superior de la vista previa se muestran las advertencias o errores que pueda tener que resolver editando el archivo .html en un editor HTML. Los errores deben corregirse antes de que la vista previa muestre la página maestra correctamente.

    Para obtener más información sobre cómo resolver errores y advertencias, vea Cómo: Resolver errores y advertencias al obtener una vista previa de una página en SharePoint.

    Para obtener más información sobre cómo obtener una vista previa de la página maestra con páginas diferentes, vea How to: Change the preview page in SharePoint Design Manager( Cómo: Cambiar la página de vista previa en el Administrador de diseño de SharePoint).

    La página de vista previa también contiene un vínculo Fragmentos de código en la esquina superior derecha. Este vínculo abre la Galería de fragmentos de código, donde puede comenzar a reemplazar los bocetos de controles o los controles estáticos de su diseño por los controles dinámicos de SharePoint. Para más información, vea SharePoint Design Manager snippets (Fragmentos de código del Administrador de diseño de SharePoint).

  2. Para corregir los errores, edite el archivo .html que reside directamente en el servidor mediante un editor HTML para abrir y editar el archivo .html en la unidad asignada. Cada vez que guarde el archivo .html, los cambios se sincronizan con el archivo .master asociado.

  3. Cuando se muestre una vista previa correcta de la página maestra, verá una <pestaña div> que se agrega al archivo HTML. Puede que tenga que desplazarse hasta el final de la página para ver la etiqueta <div>.

    Este <div> es el bloque de contenido principal. Se encuentran dentro de un marcador de posición de contenido denominado ContentPlaceHolderMain. En tiempo de ejecución cuando un visitante explora el sitio y solicita una página, este marcador de posición de contenido se rellena con contenido de un diseño de página que contiene el contenido de un área de contenido coincidente. Debe ubicar este <div> donde quiera que aparezcan los diseños de página en la página maestra.

    Si el archivo .html contiene contenido estático o ficticio en el cuerpo de la página, ahora comienza el proceso de quitar ese contenido estático de la página maestra HTML y aplicar esos estilos a otros elementos del modelo de página de SharePoint, como diseños de página, controles de campo de página, fragmentos de código y plantillas para mostrar. Para obtener un ejemplo, vea Cómo: Crear un diseño de página en SharePoint.

Información del archivo .html después de la conversión

Al convertir un archivo .html en una página maestra, se agregan muchas líneas de marcado al archivo .html. Puede omitir de forma segura la mayor parte de este marcado y la mayoría de ellos no aparecerán en el marcado final del sitio cuando vea el origen en el explorador, pero este marcado es fundamental para convertir el archivo .html en el archivo .master que SharePoint usa realmente. Cada vez que guarde un cambio en el archivo .html, este marcado de SharePoint permite realizar ese mismo cambio en el archivo .master asociado en segundo plano.

El marcado que se agrega incluye etiquetas antes de la etiqueta <head> y dentro de ella; fragmentos de código y marcadores de posición de contenido. La mayoría de las marcas están encerradas dentro de etiquetas de comentarios: cada vez que guarda un cambio en el archivo .html, el proceso de conversión quita los comentarios para usar el marcado ASP.NET dentro.

Tipos de marcado

A continuación se desglosan los tipos de marcas que se agregan al archivo .html:

  • Propiedades de documentos La etiqueta <mso> contiene metadatos de SharePoint, como información sobre el propio archivo y algunas propiedades necesarias para la correcta conversión al archivo .master.
  
<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>
  • Registro del espacio de nombres de SharePoint La etiqueta <SPM> ("marcado de SharePoint") proporciona una línea que registra un espacio de nombres de SharePoint.
  
<!--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"%>-->
  • Comentarios Las etiquetas <CS> y <CE> (inicio del comentario y final del comentario) se pasan por alto durante el proceso de conversión. Estas etiquetas ayudan a analizar las líneas de marcado.
  
<!--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-->
  • Fragmentos Las etiquetas <MS> y <ME> ("inicio de marcado" y "final de marcado") indican el principio y el final de un fragmento de código o control de SharePoint. Un fragmento de código es un control de SharePoint que agrega funciones de SharePoint a la página. Puede agregar fragmentos de código usted mismo usando la Galería de fragmentos. Para más información, vea SharePoint Design Manager snippets (Fragmentos de código del Administrador de diseño de SharePoint).
  
<!--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>-->
  • Vista previa de bloques Las etiquetas <PS> y <PE> ("Inicio de vista previa" y "Final de vista previa") rodean una sección de código HTML que no debe editar, ya que esta sección afecta solo a la vista previa en tiempo de diseño. Estas secciones de vista previa son una instantánea del control de SharePoint que inserta ese fragmento de código. Una vista previa permite trabajar de forma más significativa en el archivo .html en un editor HTML del lado cliente. Pero el hecho de cambiar el contenido o de aplicar estilos en esa vista previa no tiene ningún efecto permanente en el archivo .master, que es el que básicamente emplea SharePoint. Para aplicar estilo a un fragmento de código, debe identificar y reemplazar los estilos de SharePoint por su propio CSS personalizado.
  
<!--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 -->
  • Identificadores de SharePoint Dos de los fragmentos de código agregados al archivo de .html durante la conversión (el fragmento de código contenido del encabezado de página y la cinta de SharePoint) tienen un identificador de SharePoint asociado o SID (00 y 02, respectivamente). Estos identificadores permiten acortar los fragmentos de código y hacer que el código HTML de la página sea más fácil de leer.
  
<!--SID:00 -->

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

Fragmentos de código que se agregan

Es importante conocer dos de los fragmentos de código que se agregan al archivo .html. Estos fragmentos se agregan automáticamente durante la conversión, pero no están disponibles para agregarlos desde la Galería de fragmentos de código.

  • La cinta Para que los autores de contenido puedan crear páginas y contenido en su sitio de SharePoint, su página maestra necesita la cinta y la "navegación de conjunto", que es una novedad de SharePoint. La cinta está incluida en un fragmento de código de optimización de la seguridad para que cuando un visitante explore su sitio, la cinta se muestre solo a los usuarios autenticados y no a los usuarios anónimos. Puede mover la cinta a una posición diferente de la página o aplicarle estilos invalidando las clases CSS predeterminadas, pero no recomendamos mover ni reorganizar los componentes (como el menú Acciones del sitio) incluidos dentro de la cinta.
  
<!--MS:<SharePoint:SPSecurityTrimmedControl runat="server" AuthenticationRestrictions="AnonymousUsersOnly">-->
<!--MS:<wssucw:Welcome runat="server" EnableViewState="false">-->
<!--ME:</wssucw:Welcome>-->
<!--ME:</SharePoint:SPSecurityTrimmedControl>-->

  • ContentPlaceHolderMain En la parte inferior de la etiqueta <div id="s4-bodyContainer">, antes de la etiqueta </body> de cierre, el proceso de conversión inserta un marcador de posición de contenido llamado PlaceHolderMain. En este fragmento de código se encuentra la etiqueta amarilla <div>, con borde negro, que aparece en la vista Diseño del editor HTML o en la vista previa del lado servidor del Administrador de diseño.

    Esta etiqueta <div> representa el área a la que irá el contenido especificado por las páginas y los diseños de página. Debe mover el fragmento de código PlaceHolderMain al lugar de la página maestra que los diseños de página rellenarán (el área del diseño del sitio que no es igual en todas las páginas del sitio).

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

Referencia: ejemplos de marcas de SharePoint agregadas al archivo .html

A continuación tiene un ejemplo del marcado que se agrega a un archivo .html después de convertirlo en una página maestra.

Marcado agregado a la etiqueta <head>


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

Marcado agregado después de la etiqueta <body> de inicio

Fragmento de código de la cinta


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

Dos etiquetas <div> de SharePoint


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

Marcado agregado antes de la etiqueta </body> de cierre y dos etiquetas </div> de cierre


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

Vea también