Trechos de código do Gerenciador de Design do Microsoft Office SharePoint Online

Um trecho de código é uma representação HTML de um componente ou controle do Microsoft Office SharePoint Online, como uma barra de navegação ou uma web part. Usando a Galeria de trechos de Código no Gerenciador de Design, você pode adicionar rapidamente a funcionalidade do Microsoft Office SharePoint Online à sua página mestra HTML ou layout de página.

Introdução aos trechos e à Galeria de Trechos de Código

Após converter uma página mestra ou criar um layout de página, você tem uma versão HTML dessa página. Com a Galeria de trecho de código, você pode adicionar rapidamente funcionalidade específica do SharePoint, como pesquisa ou navegação ou painéis do canal do dispositivo, no arquivo HTML associado à sua página mestra ou o layout de página. Galeria de trecho é uma página no Gerenciador de Design onde você pode:

• Escolha um componente do SharePoint daquelas disponíveis na faixa de opções.

• Configure as propriedades para esse componente.

• Copie o trecho de código HTML para a área de transferência para que você pode colar o trecho do local desejado no arquivo HTML.

A Galeria de trechos exibe diferentes opções na faixa de opções, dependendo se você está editando uma página mestra ou layout de página - por exemplo, os controles de navegação são exibidos apenas para páginas mestras e zonas de web part e controles de campo de página são exibidos apenas para layouts de página. Além sso, ao editar um layout de página, os campos de página disponíveis dependem do tipo de conteúdo do layout de página que você está editando.

Depois de colar um trecho de código em seu arquivo HTML, você obtém uma visualização em tempo de design do HTML fornecido no trecho de código. Você também pode usar a visualização do lado do servidor no Gerenciador de Design para ver como o controle aparecerá no site ao vivo. A visualização em tempo de design pode incluir dados de amostra estáticos, mas a visualização do lado do servidor usa dados ativos, se disponíveis. Por exemplo, um controle de navegação que desenha links de navegação de um conjunto de termos exibirá esses termos dinamicamente na visualização do lado do servidor, mas a visualização em tempo de design terá um instantâneo estático dos termos no momento em que você criou o trecho de código. Os dados ativos não estão disponíveis na visualização do lado do servidor para alguns trechos, no entanto, incluindo muitas web parts. Nesse caso, a visualização do lado do servidor pode exibir Visualização Não Disponível.

Inserir um trecho da Galeria de Trechos de Código

Galeria de trecho exibe opções diferentes dependendo do arquivo que você está editando. Por exemplo, layouts de página diferente tem diferentes conjuntos de campos de página disponíveis para eles. Por esse motivo, para navegar na Galeria de trecho de código, você deve primeiro selecionar uma página mestra ou layout de página para editar.

Para inserir um trecho de código

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

2. No canto superior direito da página, escolha engrenagem as configurações e clique em Gerenciador de Design.

3. No Gerenciador de Design, no painel de navegação esquerdo, escolha Editar páginas mestras ou Editar Layouts de página, dependendo de qual tipo de arquivo que você está editando.

4. Selecione o nome da página mestra ou layout de página que você deseja adicionar trechos de códigos para.

5. Para abrir a Galeria de trechos, escolha trechos no canto superior direito da visualização do servidor.

6. Na faixa de opções, na guia Design, escolha o trecho de código que você deseja adicionar à sua página.

   Quando você seleciona um trecho, a Galeria de Trechos de Código é atualizada para que a página mostre as propriedades disponíveis para esse trecho e o trecho de código em HTML que você pode copiar em sua página mestra HTML ou layout de página.

   Observação

   A pré-visualização da Galeria de Trechos de Código está obsoleta e não mostra uma pré-visualização do trecho selecionado na atualização.

7. No lado direito da Galeria trecho, sob sobre este componente, clique ou selecione cabeçalhos de seção para expandir ou recolher grupos de propriedades e, em seguida, configure quaisquer configurações personalizadas que você deseja.

   As propriedades que são mais importantes para a finalidade principal do trecho aparecem na seção principal chamada importante. Estas são as propriedades da chave que você precisa entender ao usar um trecho de código.

   Observação

   Se a grade de propriedades tiver um cabeçalho que termine com AjaxDelta, você deve ignorar essas propriedades porque eles se aplicam aos controles relacionados à estratégia baixar mínima, que é desativado para páginas mestras e layouts de página criados por meio do Gerenciador de Design.

8. Depois de configurar todas as propriedades, escolha a atualização. Isso atualiza o trecho de código HTML no lado esquerdo da página, para que a marcação reflete suas configurações personalizadas. Você sempre pode escolher Redefinir para retornar todas as propriedades para suas configurações padrão.

9. No lado esquerdo da Galeria trecho, sob Trecho HTML, escolha Copiar para área de transferência.

10. No seu editor de HTML, abra a unidade de rede mapeada no seu computador e abra o arquivo HTML para a página mestra ou layout de página que você está adicionando o trecho de código para.

11. No arquivo HTML, cole o trecho de onde você deseja que a marca seja exibida.

    Cada trecho contém HTML que fornece uma visualização visual dos dados componentes e amostra. Você não deve modificar esse HTML para a avaliação de somente leitura dentro das marcas de <!--PS> e <!--PE> porque essa marcação afeta somente a visualização de tempo de design do trecho, não como o trecho será exibido no site ao vivo.

12. Para ver a visualização do servidor do trecho de, salve o arquivo HTML para sincronizar as alterações no arquivo associado do ASP.NET e, em seguida, atualize a visualização do servidor no Gerenciador de Design.

    Diferentemente a visualização de tempo de design, a visualização do servidor mostra o controle como processado pelo SharePoint.

Entender a marcação em um trecho de código em HTML

Um trecho contém quatro seções básicas:

• Cabeçalho com iniciando marcas

  e <!--CS> (exceto personalizados ASP.NET trechos, que não devem ser quebradas em uma marca de

  )

• Marcação do SharePoint onde os trechos são colocados entre marcas de fim de início e <!--ME> <!--MS>

• Visualização HTML colocados entre o início de <!--PS> e <!--PE> marcas de fim

• Rodapé com <!--CE> e as marcas de fechamento.

Todas as seções de um trecho de código, exceto a visualização HTML, são colocadas entre os comentários em HTML para evitar interações com o modelo de objeto de documento (DOM) e o estilo existente. Um trecho inicia com o nome de um componente e, em seguida, inclui seu marcação ASP.NET real, uma visualização HTML para renderização de tempo de design e fim as marcas. A marcação do ASP.NET está comentada, mas SharePoint remove as marcas de comentário e usa essa marcação quando o arquivo HTML é sincronizado com o arquivo. Master ou. aspx. Se você souber ASP.NET, você pode personalizar essa marcação no trecho.

Por exemplo, veja a seguir a marcação de padrão para um painel de modo Editar, que é simplesmente um contêiner que exibe condicionalmente outras conteúdo e controles.

Cabeçalho

<div data-name="EditModePanelShowInEdit">
    <!--CS: Start Edit Mode Panel Snippet-->

Marcação do Microsoft Office SharePoint Online

<!--SPM:<%@Register Tagprefix="Publishing" Namespace="Microsoft.SharePoint.Publishing.WebControls" Assembly="Microsoft.SharePoint.Publishing, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c"%>-->
    <!--MS:<Publishing:EditModePanel runat="server" CssClass="edit-mode-panel">-->

Pré-visualização em HTML

<!--PS: Start of READ-ONLY PREVIEW (do not modify)--><!--PE: End of READ-ONLY PREVIEW-->
        <div class="DefaultContentBlock" style="border:medium black solid; background:yellow; color:black; margin:20px; padding:10px;">
        You should replace this div with content that renders based on your Edit Mode Panel Properties.
    
        </div>
        <!--PS: Start of READ-ONLY PREVIEW (do not modify)--><!--PE: End of READ-ONLY PREVIEW-->

Rodapé

<!--ME:</Publishing:EditModePanel>-->
    <!--CE: End Edit Mode Panel Snippet-->
</div>

A seguir está a marcação padrão para um trecho de navegação superior, que é mais complexo porque este trecho contém vários controles diferentes, com algumas aninhada dentro uns aos outros, incluindo uma fonte de dados para os termos de navegação, um espaço reservado para conteúdo e um delegar controle.

Cabeçalho

<div data-name="TopNavigationNoFlyoutWithStartNode">
<!--CS: Start Top Navigation Snippet-->    <!--SPM:<%@Register Tagprefix="Publishing" Namespace="Microsoft.SharePoint.Publishing.WebControls" Assembly="Microsoft.SharePoint.Publishing, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c"%>-->
    <!--MS:<Publishing:EditModePanel runat="server" CssClass="edit-mode-panel">-->

Marcação do Microsoft Office SharePoint Online

<!--SPM:<%@Register Tagprefix="SharePoint" Namespace="Microsoft.SharePoint.WebControls" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c"%>-->
<!--MS:<SharePoint:AjaxDelta ID="DeltaTopNavigation" BlockElement="true" CssClass="ms-displayInline ms-core-navigation ms-dialogHidden" runat="server">-->

Pré-visualização em HTML

<!--PS: Start of READ-ONLY PREVIEW (do not modify)-->
<!--PE: End of READ-ONLY PREVIEW-->

Marcação do Microsoft Office SharePoint Online

<!--MS:<SharePoint:DelegateControl runat="server" ControlId="TopNavigationDataSource" Id="topNavigationDelegate">-->

Pré-visualização em HTML

<!--PS: Start of READ-ONLY PREVIEW (do not modify)-->
<span style="display:none">
<table cellpadding="4" cellspacing="0" style="font:messagebox;color:buttontext;background-color:buttonface;border: solid 1px;border-top-color:buttonhighlight;border-left-color:buttonhighlight;border-bottom-color:buttonshadow;border-right-color:buttonshadow">
<tr><td nowrap="nowrap">
<span style="font-weight:bold">PortalSiteMapDataSource</span> - topSiteMap</td></tr><tr><td></td></tr></table></span>
<!--PE: End of READ-ONLY PREVIEW-->

Marcação do Microsoft Office SharePoint Online

<!--MS:<Template_Controls>-->
<!--MS:<asp:SiteMapDataSource ShowStartingNode="True" SiteMapProvider="SPNavigationProvider" ID="topSiteMap" runat="server" StartingNodeUrl="sid:1002">-->

Marcação do Microsoft Office SharePoint Online

<!--ME:</asp:SiteMapDataSource>-->
<!--ME:</Template_Controls>-->
<!--ME:</SharePoint:DelegateControl>--><a name="startNavigation"></a>

Marcação do Microsoft Office SharePoint Online

<!--MS:<asp:ContentPlaceHolder ID="PlaceHolderTopNavBar" runat="server">-->
<!--MS:<SharePoint:AspMenu ID="TopNavigationMenu" runat="server" EnableViewState="false" DataSourceID="topSiteMap" AccessKey="&amp;#60;%$Resources:wss,navigation_accesskey%&amp;#62;" UseSimpleRendering="true" UseSeparateCss="false" Orientation="Horizontal" StaticDisplayLevels="2" AdjustForShowStartingNode="false" MaximumDynamicDisplayLevels="0" SkipLinkText="">-->

Pré-visualização em HTML

<!--PS: Start of READ-ONLY PREVIEW (do not modify)-->
<link rel="stylesheet" type="text/css" href="/_layouts/15/1033/styles/menu-21.css" />
<div id="zz7_TopNavigationMenu" class=" noindex ms-core-listMenu-horizontalBox">
<ul id="zz9_RootAspMenu" class="root ms-core-listMenu-root static">
<li class="static">
<a class="static menu-item ms-core-listMenu-item ms-displayInline ms-navedit-linkNode" tabindex="0" title="Default Publishing Site" href="/sites/PubSite/Pages/default.aspx" accesskey="1">
<span class="additional-background ms-navedit-flyoutArrow">
<span class="menu-item-text">Default Publishing Site</span></span></a></li></ul></div>
<!--PE: End of READ-ONLY PREVIEW-->

Marcação do Microsoft Office SharePoint Online

<!--ME:</SharePoint:AspMenu>-->
<!--ME:</asp:ContentPlaceHolder>-->

Pré-visualização em HTML

<!--PS: Start of READ-ONLY PREVIEW (do not modify)-->
<!--PE: End of READ-ONLY PREVIEW-->

Marcação do Microsoft Office SharePoint Online

<!--ME:</SharePoint:AjaxDelta>-->

Rodapé

<!--CE: End Top Navigation Snippet-->
</div>

Tipos de marcação

Aqui está uma divisão dos tipos de marcação incluídos em um trecho de código.

Registro de namespace do SharePoint SPM ("SharePoint marcação") indica uma linha registrando um namespace do SharePoint.

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

Comentários CS e CE ("Comentário start" e "end comentário") ajudarão-lo a analisar as linhas de marcação.

<!--CS: Start Top Navigation Snippet-->
…
<!--CE: End Top Navigation Snippet-->

Trechos de código MS e ME ("Iniciar marcação" e "end marcação") denotam o início e fim de um controle de SharePoint ou um trecho de código. Alguns trechos, como a faixa de opções ou o controle de navegação superior acima, contêm vários controles aninhados dentro de um único trecho de código.

<!--MS:<SharePoint:DelegateControl runat="server" ControlId="TopNavigationDataSource" Id="topNavigationDelegate">-->
…
<!--ME:</SharePoint:DelegateControl>--><a name="startNavigation"></a>

<!--MS:<Template_Controls>-->
…
<!--ME:</Template_Controls>-->

<!--MS:<asp:SiteMapDataSource ShowStartingNode="True" SiteMapProvider="SPNavigationProvider" ID="topSiteMap" runat="server" StartingNodeUrl="sid:1002">-->
…
<!--ME:</asp:SiteMapDataSource>-->

Blocos de visualização PS e PE ("Iniciar Preview" e "end preview") cercam uma seção de código HTML que você não deve editar. Estas seções preview são um instantâneo no horário do controle do SharePoint esse trecho está inserindo. Uma visualização torna possível a trabalhar com mais de forma significativa no arquivo HTML em um editor de HTML do lado do cliente. Mas, alterando o conteúdo ou definir o estilo dentro desse preview não tem nenhum efeito secundário no arquivo. master, que é o que SharePoint basicamente está usando. Para um trecho de estilo, você precisa identificar e substituir os estilos do SharePoint com o seu próprio CSS personalizado.

<!--PS: Start of READ-ONLY PREVIEW (do not modify)--><span style="display:none"><table cellpadding="4" cellspacing="0" style="font:messagebox;color:buttontext;background-color:buttonface;border: solid 1px;border-top-color:buttonhighlight;border-left-color:buttonhighlight;border-bottom-color:buttonshadow;border-right-color:buttonshadow"><tr><td nowrap="nowrap"><span style="font-weight:bold">PortalSiteMapDataSource</span> - topSiteMap</td></tr><tr><td></td></tr></table></span><!--PE: End of READ-ONLY PREVIEW-->

<!--PS: Start of READ-ONLY PREVIEW (do not modify)--><link rel="stylesheet" type="text/css" href="/_layouts/15/1033/styles/menu-21.css" /><div id="zz7_TopNavigationMenu" class=" noindex ms-core-listMenu-horizontalBox"><ul id="zz9_RootAspMenu" class="root ms-core-listMenu-root static"><li class="static"><a class="static menu-item ms-core-listMenu-item ms-displayInline ms-navedit-linkNode" tabindex="0" title="Default Publishing Site" href="/sites/PubSite/Pages/default.aspx" accesskey="1"><span class="additional-background ms-navedit-flyoutArrow"><span class="menu-item-text">Default Publishing Site</span></span></a></li></ul></div><!--PE: End of READ-ONLY PREVIEW-->

Confira também

• Como: converter um arquivo HTML em uma página mestra no SharePoint

• Tutorial: criar um layout de página no SharePoint

• Como: adicionar um trecho de Painel de Modo de Edição no Microsoft Office SharePoint Online

• Como: adicionar um trecho de Corte de Segurança no Microsoft Office SharePoint Online