Partilhar via

Converter um arquivo HTML em uma página mestra no SharePoint

  • Artigo

Importante

Essa opção de extensibilidade está disponível apenas para experiências clássicas do SharePoint. Você não pode usar essa opção com experiências modernas no SharePoint Online, como nos sites de comunicação. Não é mais recomendável o uso da experiência clássica ou destas técnicas de identidade visual.

Com o Gerenciador de Design, você pode converter um arquivo .html em uma página mestra do SharePoint, que é um arquivo .master. Após a conversão, o arquivo .html e a página mestra ficarão associados, de forma que, quando você edita e salva o arquivo .html, as alterações serão sincronizadas com a página mestra associada.

Introdução à conversão para uma página mestra

Com o Gerenciador de Design, você pode converter um arquivo .html em uma página mestra do SharePoint, que é um arquivo .master. Após a conversão, o arquivo .html e a página mestra ficarão associados, de forma que, quando você edita e salva o arquivo .html, as alterações serão sincronizadas com a página mestra associada.

Qual a razão de converter um arquivo .html em vez de criar um arquivo .master do zero? No SharePoint, as páginas mestras funcionam exatamente como no ASP.NET, mas o SharePoint também exige que determinados elementos, como controles e espaços reservados de conteúdo específicos do SharePoint, devam estar presentes na página do SharePoint para que eles possam renderizar corretamente essa página mestra. Ao usar o Gerenciador de design para converter um arquivo .html em uma página mestra do SharePoint totalmente funcional, você não precisa saber como funciona o ASP.NET ou a marcação específica do SharePoint; em vez disso, você pode se concentrar em projetar seu site em HTML, CSS e JavaScript.

Quando você converte um arquivo .html em uma página mestra:

  • Um arquivo .master com o mesmo nome de seu arquivo .html é criado na Galeria de Páginas Mestras.

  • Todas as marcações exigidos pelo SharePoint são adicionadas ao arquivo .master para que a página mestra seja processada corretamente.

  • Marcação, como comentários, tags <div>, trechos de código e espaços reservados de conteúdo são adicionados ao seu arquivo .html original.

  • O arquivo .html e a página mestra estão associados, para que todas as edições posteriores do arquivo .html sejam sincronizadas para o arquivo .master quando o arquivo .html for salvo.

Observação

A sincronização é feita apenas em uma direção. As alterações na página mestra HTML são sincronizadas com o arquivo .master associado, mas se você optar por editar o arquivo .master diretamente, essas alterações não serão sincronizadas com o arquivo .html. Toda página mestre de página HTML (e todo layout de página HTML) tem uma propriedade chamada Arquivo Associado que é configurada como True por padrão, o que cria a associação e a sincronização entre arquivos.

Se você tiver um par de arquivos associados (.html e .master) e editar o arquivo .master sem interromper a associação, as alterações feitas no arquivo .master serão salvas, mas você não poderá verificar ou publicar o arquivo .master, portanto, essas alterações não serão salvas de maneira significativa. As alterações feitas no arquivo HTML substituem o arquivo .master. Se você fizer check-in ou publicar o arquivo HTML, esse arquivo alterado substituirá as alterações feitas no arquivo .master. As alterações feitas no arquivo .master serão perdidas.

Se você for um desenvolvedor trabalhando confortavelmente com ASP.NET, você pode optar por trabalhar apenas com o arquivo .master quebrando a associação entre os arquivos. Para interromper a associação entre o arquivo .html e o arquivo .master, no Gerenciador de design, escolha Editar Propriedades para o arquivo. html e desmarque a caixa de seleção Arquivo Associado. Posteriormente, você pode reassociar os arquivos editando as propriedades e marcando essa caixa de seleção; nesse caso, o arquivo .html substituirá novamente o arquivo .master, e as alterações feitas no arquivo .master serão perdidas.

Preparar o arquivo HTML para conversão

Antes de converter o seu arquivo .html, aqui estão algumas práticas recomendadas e orientações a serem consideradas:

  • Considere o modelo de página do SharePoint. Para obter mais informações, consulte Visão geral do modelo de página do SharePoint. Ao criar os mockups HTML do seu site, você provavelmente terá vários arquivos .html para diferentes tipos de páginas, como uma página de artigo ou uma página de categoria que contém Web Parts exibindo uma categoria de itens de um catálogo. No entanto, somente um arquivo HTML será convertido na página mestra. Um arquivo HTML pode ser convertido em uma página mestra, mas não é possível converter um arquivo HTML diretamente em um layout de página porque um layout de página requer campos de página.

  • Verifique se que seu arquivo HTML é compatível com XML. Para a conversão funcionar, o arquivo .html deve ser compatível com XML. Infelizmente, esse requisito substitui alguns padrões de HTML 5 — por exemplo, em 5 de HTML, você pode especificar o doctype em minúsculas, mas em XML a doctype devem estar em maiúsculas. Além disso, você deve remover qualquer tag <form> do seu arquivo .html. Considere a execução do seu arquivo .html por meio de um validador XML externo para identificar erros XML antes da conversão.

  • Considere estas importantes diretrizes para suas referências CSS:

    • Não coloque blocos da tag <style> na tag <head>. Esses estilos são removidos durante a conversão. Em vez disso, link do seu arquivo .html para um arquivo CSS externo.

    • Adicione ms-design-css-conversion="no" à marca de link> do< CSS se você estiver usando uma fonte da Web.

    • Tenha cuidado ao aplicar estilos a tags HTML gerais, como <body>, <div>e <img>. Tudo no design do SharePoint, incluindo a faixa de opções, fica dentro da tag <body>. Para os estilos que você geralmente aplicaria à tag <body>, considere aplicá-los em vez a<div id = "S4-bodyContainer">, que é uma tag que o SharePoint usa para o corpo principal da página. Além disso, o SharePoint usa várias imagens que são influenciadas pelos estilos que você aplica à tag <img>.

    • Muitos designers estilizam a navegação aplicando classes aos elementos <ul> e <li>. No entanto, o SharePoint usa um controle de navegação dinâmico, que você pode adicionar à sua página mestra da Galeria de Trechos de Código. Os controles de navegação do SharePoint têm estilos aplicados por padrão que você deve substituir.

  • Considere estas possíveis problemas sobre nomenclatura de arquivo:

    • Se você tiver o Index e index. htm, esses arquivos terá o mesmo arquivo. master.

    • Se você tiver Design/Index.html e Design/SubDesign/Index.html, ambos os arquivos estarão disponíveis para conversão em seus próprios arquivos .master separados, mas ambos aparecerão como Index.html na lista de páginas mestras no Design Manager. Para desambiguar, clique ou selecione o botão de reticências para cada arquivo para ver o caminho completo.

  • Se você estiver adicionando um widget JavaScript, verifique se a tag de início<script> está em sua própria linha.

  
<script>
(function( …

Não os coloque na mesma linha, como visto abaixo.

  
<Script> (function( …
  • Uma referência à biblioteca do JQuery (uma referência externa) deve ir antes da tag</head>.

Converter o arquivo .html em uma página mestra

Antes de converter um arquivo .html, você tem de carregar primeiro todos os seus arquivos de design, incluindo o seu arquivo .html. Para obter mais informações, consulte Como mapear uma unidade de rede para a Galeria de Páginas Mestras do SharePoint.

Para converter o arquivo .html em um arquivo .master

  1. Navegue até o seu site de publicação.

  2. No canto superior direito da página, escolha Configurações e escolha Gerenciador de Design.

  3. No Gerenciador de Design, no painel de navegação esquerdo, escolha Editar páginas mestras.

  4. Escolha Converter um arquivo .html em uma página mestra do SharePoint.

  5. Na caixa de diálogo Selecionar um ativo, procure e selecione o arquivo .html que você deseja converter.

    Observação

    [!OBSERVAçãO] Quando você carrega seus arquivos de design, você deve manter todos os arquivos relacionados a um projeto único em sua própria pasta na Galeria de páginas mestras. Quando você copia sua pasta de design na unidade de rede mapeada, a Galeria de páginas mestras mantém qualquer estrutura de pastas que você criou.

  6. Escolha Inserir.

    Neste ponto, o SharePoint converte o arquivo .html em um arquivo .master com o mesmo nome.

    No Gerenciador de Design, o seu arquivo HTML agora será exibido com uma coluna de Status que mostra um dos dois status possíveis:

  • Erros

  • Conversão com sucesso

  1. Siga o link na coluna Status para visualizar o arquivo e exibir quaisquer erros ou avisos sobre a página mestra.

    A página de pré-visualização é uma visualização ao vivo do lado do servidor da página mestra. A parte superior da visualização exibe quaisquer avisos ou erros que talvez seja necessário resolver editando o arquivo .html em um editor de HTML. Os erros devem ser corrigidos antes que a visualização possa exibir a página mestra corretamente.

    Para obter mais informações sobre como resolver erros e avisos, confira Como resolver erros e avisos ao visualizar uma página no SharePoint.

    Para obter mais informações sobre como visualizar a página mestra com páginas diferentes, confira Como alterar a página de visualização no Gerenciador de Design do SharePoint.

    A página de visualização também contém um link de Trechos de Código no canto superior direito. Este link abre a Galeria de Trechos de Código, onde você pode começar a substituir os controles estático ou de modelo em seu design por controles dinâmicos do SharePoint. Para saber mais, consulte Trechos de código do Gerenciador de Design do SharePoint.

  2. Para resolver quaisquer erros, edite o arquivo .html que reside diretamente no servidor usando um editor de HTML para abrir e editar o arquivo .html no dispositivo mapeado. Sempre que você salvar o arquivo .html, todas as alterações serão sincronizadas com o arquivo .master associado.

  3. Após visualizar com sucesso a sua página mestra, você verá uma tag <div> que é adicionada ao seu arquivo .html. É possível que você precise rolar para a parte inferior da página para ver a tag <div>.

    Essa <div> é o bloco de conteúdo principal. Ele reside dentro de um espaço reservado de conteúdo denominado ContentPlaceHolderMain. Em tempo de execução, quando um visitante navega o seu site e solicita uma página, esse espaço reservado para conteúdo obtém preenchido com o conteúdo de um layout de página que contém o conteúdo em uma área de conteúdo correspondente. Você deve posicionar essa tag <div> no local em que você deseja que seus layouts de página apareçam na página mestra.

    Se o seu arquivo .html contiver conteúdo estático ou de mockup no corpo da página, agora você deve iniciar o processo de remoção do conteúdo estático da página mestra HTML e aplicar esses estilos a outros elementos do modelo da página do SharePoint, como layouts de página, controles de campo de página, trechos de código e modelos de exibição. Para obter um exemplo, consulte Como criar um layout de página no SharePoint.

Noções básicas sobre o arquivo .html após a conversão

Quando você converte um arquivo .html em uma página mestra, muitas linhas de marcação são adicionadas ao seu arquivo .html. Você pode ignorar com segurança a maior parte dessa marcação, e a grande parte dela não aparecerá na marcação final do seu site ao exibir a fonte no navegador, mas essa marcação é fundamental para converter seu arquivo .html no arquivo .master que o SharePoint de fato usa. Sempre que você salvar uma alteração no seu arquivo .html, a marcação do SharePoint possibilitará que essa mesma alteração seja feita no arquivo .master associado em segundo plano.

A marcação que é adicionada inclui tags antes e dentro da tag <head>, trechos de código e espaços reservados de conteúdo. A maioria da marcação fica dentro das tags de comentário: sempre que você salva uma alteração no arquivo .html, o processo de conversão remove os comentários para usar a marcação dentro do ASP.NET.

Tipos de marcação

A seguir está uma explanação dos tipos de marcação que são adicionados ao arquivo .html:

  • Propriedades do documento A tag <mso> contém metadados do SharePoint, incluindo informações sobre o próprio arquivo e algumas propriedades necessárias para a conversão bem-sucedida para o arquivo .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 de namespace do SharePoint A tag <SPM> ("marcação do SharePoint") fornece uma linha que registra um namespace do 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"%>-->
  • Comentários As tags <CS> e <CE> ("comentário inicial" e "comentário final") são ignoradas durante o processo de conversão. Essas tags são usadas para ajudá-lo a renderizar as linhas de marcação.
  
<!--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-->
  • Trechos de código As tags <MS> e <ME> ("início da marcação" e "fim da marcação") indicam o início e o final de um controle ou trecho de código do SharePoint. A snippet is a SharePoint control that adds SharePoint functionality to your page. Você mesmo pode adicionar trechos de código usando a Galeria de Trechos de Código. Para saber mais, consulte Trechos de código do Gerenciador de Design do 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>-->
  • Blocos de visualização As tags <PS> e <PE> ("Iniciar visualização" e "fim da visualização") ficam ao redor de uma seção de código HTML que você não deve editar porque esta seção afeta apenas a visualização do tempo de design. Estas seções de visualização são um instantâneo do momento do controle do SharePoint que o trecho do código está inserindo. Uma visualização permite que você trabalhe com mais relevância no arquivo. html em um editor de HTML do lado do cliente. No entanto, alterar o conteúdo ou o estilo dentro dessa visualização não tem efeito no arquivo .master, que é o que o SharePoint usa por fim. Para estilizar um trecho de código, você precisa identificar e substituir os estilos do SharePoint por sua própria CSS personalizada.
  
<!--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 -->
  • IDs do SharePoint Dois dos trechos de código adicionados ao seu arquivo HTML durante a conversão (o trecho de conteúdo de cabeça da página e a faixa de opções do SharePoint) têm uma ID associada do SharePoint ou SID (00 e 02, respectivamente). Essas IDs permitem reduzir os trechos de código e facilitar a leitura do HTML na página.
  
<!--SID:00 -->

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

Trechos de código adicionados

É importante conhecer cerca de dois dos trechos de código que são adicionados ao seu arquivo .html. Esses trechos são adicionados automaticamente durante a conversão, mas não estão disponíveis para você adicionar da Galeria de trechos de código.

  • A faixa de opções Para que os autores de conteúdo possam criar páginas e criar conteúdo em seu site do SharePoint, sua página mestra precisa da faixa de opções e da "navegação do pacote" que é novidade para o SharePoint. A faixa de opções está contida em um trecho de filtragem de segurança, para que quando um visitante navega seu site, a faixa de opções é exibida somente para usuários autenticados, usuários anônimos não. Você pode mover a faixa de opções para uma posição diferente na página ou aplicar o estilo, substituindo as classes CSS padrão, mas não é recomendável mover ou reordenar os componentes que estão contidos dentro da faixa de opções (por exemplo, no menu Ações do Site).
  
<!--MS:<SharePoint:SPSecurityTrimmedControl runat="server" AuthenticationRestrictions="AnonymousUsersOnly">-->
<!--MS:<wssucw:Welcome runat="server" EnableViewState="false">-->
<!--ME:</wssucw:Welcome>-->
<!--ME:</SharePoint:SPSecurityTrimmedControl>-->

  • ContentPlaceHolderMain Na parte inferior da tag<div id="s4-bodyContainer">, antes da tag de fechamento </body>, o processo de conversão insere um espaço reservado para conteúdo chamado PlaceHolderMain. Dentro desse trecho de código está a<div>para amarelo de bordas pretas que aparece no modo de exibição de design do editor HTML ou na visualização do lado do servidor no Gerenciador de design.

    Essa <div> representa a área para a qual o conteúdo especificado por seus layouts de página e páginas será direcionado. Você deve mover o trecho de PlaceHolderMain até o lugar dentro de sua página mestra que será preenchida pelo seus layouts de página — a área do seu design de sites que não é o mesmo em todas as páginas do seu 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-->

Referência: Exemplos de marcação do SharePoint adicionada ao arquivo .html

O exemplo a seguir é um exemplo de marcação adicionado a um arquivo HTML, depois que ele é convertido em uma página mestra.

Marcação adicionada à tag <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>

Marcação adicionada após a marca de início <body>

Trecho de código da faixa de opções


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

Duas tags<div> do SharePoint 


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

Marcação adicionada antes da tag de fechamento </body> e das duas tags de fechamento </div>


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

Confira também