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

Um trecho é 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 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 de Código 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 as zonas de web part e controles de campo de página são exibidos apenas para os layouts. Além disso, quando você estiver editando um layout de página, os campos de página que estão disponíveis dependem do tipo de conteúdo de layout de página que você está editando.

Depois que você colar um trecho em seu arquivo HTML, você obtém uma visualização de tempo de design do HTML fornecido no trecho. Você também pode usar a visualização do servidor no Gerenciador de Design para ver como o controle será exibido no site ao vivo. A avaliação de tempo de design pode incluir dados de amostra estática, mas a visualização do servidor usa dados reais, se disponível. Por exemplo, um controle de navegação que usa os links de navegação de um conjunto de termos exibirá esses termos dinamicamente na visualização ao lado do servidor, mas a visualização de tempo de design terá um instantâneo estático dos termos no momento em que você criou o trecho de código. Os dados ao vivo não estão disponíveis na pré-visualização do lado do servidor para alguns trechos, no entanto, incluindo muitas web parts. Nesse caso, a visualização do servidor pode dizer 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. Não deve modificar este HTML para a pré-visualização só de leitura dentro das <etiquetas --PS> e <--PE> , porque esta marcação afeta apenas a pré-visualização do tempo de estrutura do fragmento e não a forma como o fragmento será apresentado no site em direto.

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 início

  e <--CS> (exceto fragmentos de ASP.NET personalizados, que não estão moldados num

  etiqueta)

• Marcação do SharePoint onde os fragmentos estão incluídos nas <etiquetas de início --MS> e <--ME>

• Pré-visualização HTML incluída nas <etiquetas de início e --PE de --PS>><

• Rodapé com fecho< --CE> e etiquetas

Todas as secções de um fragmento, exceto a pré-visualização html, estão incluídas em comentários HTML para evitar interações com o Modelo de Objeto de Documento (DOM) e estilo existente. Um fragmento começa com o nome de um componente e, em seguida, inclui a marcação de ASP.NET real, uma pré-visualização HTML para composição de tempo de conceção e, em seguida, termina as etiquetas. A marcação ASP.NET é comentada, mas o SharePoint retira as etiquetas de comentário e utiliza esta marcação quando o ficheiro HTML é sincronizado com o . master ou .aspx ficheiro. Se souber ASP.NET, pode personalizar esta marcação no fragmento.

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 pré-visualização PS e PE ("Pré-visualizar início" e "fim da pré-visualização") rodeiam uma secção de código HTML que não deve editar. 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 pré-visualização permite-lhe trabalhar de forma mais significativa no ficheiro HTML num 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)--><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