Como usar o Dreamweaver e o Gerenciador de Design com o SharePoint 2013

Article
09/20/2012

Artigo original publicado em 28 de julho de 2012, sábado

O SharePoint 2013 inclui um número de novos recursos para deixar mais fácil do que nunca preparar e publicar sites da Web. Um desses recursos é o Gerenciador de Design, que permite que você crie diferentes canais para seu conteúdo – como um conjunto de páginas para navegadores em tamanho máximo, um para dispositivos móveis, outro para tablets, etc. Você pode associar páginas mestras diferentes com cada canal. E um dos recursos mais interessantes é que você pode criar uma página em qualquer ferramenta padrão de edição de HTML, como o Dreamweaver, e carregá-la no SharePoint e usá-la como página mestra. O SharePoint toma conta da parte de criar uma página .aspx automaticamente a qual ele mantém em sincronia com seu arquivo .html. Após essa conversão, você não será precisará voltar a usar alguma outra ferramenta para editar o arquivo .html, você poderá editando o arquivo na sua ferramenta favorita e toda vez que você salvá-lo, o SharePoint sincroniza o arquivo .aspx acostumado a renderizar sua página mestra.

Além disso, oferecemos os chamados Trechos, os quais permitem que você pegue as partes que mais gosta do SharePoint e as insira na sua página mestra. Você simplesmente seleciona o tipo de trecho que você deseja – como uma caixa de pesquisa ou navegação rápida, etc. – e copia o código autogerado do recurso e cola na sua página mestra. Contudo, não é uma coisa tão simples – ainda há algumas teorias do SharePoint que você precisa conhecer a fim de converter totalmente sua página de .html padrão em uma página mestra do SharePoint.

Nesta postagem, eu vou pegar a página de site que você fez criou com o tutorial do Dreamweaver (https://www.adobe.com/devnet/dreamweaver/articles/first_website_pt1.html) e convertê-la em uma página mestra e em uma home page do SharePoint para o meu site. Para começar, é assim que o site do Dreamweaver vai ficar quando terminado:

Ao observar a página, é possível ver alguns pontos específicos do SharePoint que precisaremos abordar:

As imagens usadas no cabeçalho, no fundo da visualização principal da página e nas histórias individuais
O conteúdo da parte principal da página e das áreas das três histórias
Os recursos adicionais do SharePoint que provavelmente desejamos adicionar. Isso incluiria uma caixa de pesquisa e um pouco de navegação.

Primeiro, vamos pensar nisso a partir de uma perspectiva de conteúdo. Os tipos de conteúdo imediatos podem abordar o conteúdo principal, mas precisamos de algo personalizado para dar conta dos três trechos de história na parte inferior da página. Vamos começar com isso e construir um novo tipo de conteúdo para suportá-lo. Uma vez que as imagens estão intrinsicamente vinculadas ao conteúdo, vamos adicionar colunas de site para elas juntamente com colunas de site do próprio texto. O tipo de conteúdo da Página de boas-vindas provavelmente seja uma classe base muito boa para esse tipo de página, então eu criei um novo tipo de conteúdo com base na Página de boas-vindas e o chamei de DW Layout. Para suportar o meu layout, adicionei as colunas a seguir:

LeftStoryImage
LeftStoryText
CenterStoryImage
CenterStoryText
RightStoryImage
RightStoryText

As colunas da imagem são todas definidas como Imagem com formatação e restrições para publicação, e as colunas de texto como Conteúdo HTML completo com formatação e restrições para publicação.

Nesse ponto, estamos prontos para começar o primeiro estágio com o Gerenciador de Design, em que vamos carregar nossa página de HTML e a folha de estilos do Dreamweaver e vamos converter a uma página mestra.

Agora, abra seu navegador na máquina em que o Dreamweaver (ou sua ferramenta preferida de edição de HTML) esteja instalada e navegue até seu site. Clique no menu Ações do site e selecione Gerenciador de Design. Na lista de tarefas à esquerda, clique em #3, Carregar Arquivos de Design. Clique no link para mapear uma unidade local à pasta do SharePoint em que sua página mestra e a folha de estilos serão armazenadas. Isso deve abrir uma exibição do Explorer do site do SharePoint para que você arraste e solte arquivos diretamente do SharePoint ao Dreamweaver. Se não funcionar por qualquer motivo, sempre se pode navegar até a página mestra e simplesmente abrir a biblioteca na exibição do Explorer.

Depois copie a página mestra index.html da sua unidade local para a biblioteca do SharePoint que está aberta na exibição do Explorer. O tutorial do Dreamweaver presume que a folha de estilos está em uma subpasta chamada estilos, então, crie essa pasta e copie a folha de estilos nela.

Agora no navegador, clique em #4, Editar Páginas Mestras na lista de tarefa do Gerenciador de Tarefa. Clique no link chamado Converta um arquivo HTML em uma página mestra do SharePoint. Um diálogo de estilo do navegador de arquivo do SharePoint será aberta e você deverá ver o arquivo index.html copiado para a galera da página mestra. Clique nele para selecioná-lo, depois clique no botão Insert. A conversão deve ser completada e então a página do Gerenciador de Design irá mostrar o arquivo na lista de páginas mestras com uma mensagem que diz que a conversão foi realizada com sucesso. Nesse momento, se você atualizar a exibição do Explorer da biblioteca da página mestra, você deve ver um novo arquivo chamado index.master. Esse arquivo é "par" do index.html que você carregou no site. O SharePoint cuidará do carregamento desse arquivo mestre desse ponto em diante – tudo que você precisa é trabalhar com o arquivo HTML.

Provavelmente seja melhor você vir sua nova página mestra agora para saber com o que você precisa trabalhar. Para isso, você pode clicar no link index.html no Gerenciador de Design. Isso abre a página no modo de pré-visualização para que você possa ver a aparência da sua página mestra. Interessante é a parte inicial – aqui temos a aparência quando é feita a primeira conversão:

Alguns pontos a destacar:

A folha de estilos parece estar funcionado – estamos recebendo as fontes e o formato que estávamos esperando
As imagens não estão aparecendo, então temos que consertar isso. Porém, algumas das imagens são conteúdo e algumas são parte da página mestra atual, então vamos ter que dar conta delas à medida que continuamos a modificar a página mestra.
O texto exibido não deve fazer parte da página mestra, então teremos que removê-lo e depois incluí-lo como conteúdo na nossa home page.

Primeiro, vamos dar uma olhada nos ajustes que precisamos fazer. Precisamos atualizar a imagem usada no fundo da seção do corpo principal e corrigir o link que dirige a ela na página mestra. Mas precisamos excluir todas as outras imagens na parte inferior da página. Além disso, precisamos excluir todo o texto na página porque é todo o conteúdo que deveria estar associado a uma única página, não à mestra. Para continuar trabalhando nisso, arraste os arquivos HTML e CSS de volta à exibição do Explorer da galeria da página mestra do SharePoint e solte no Dreamweaver. Você vai notar de repente que você tem muito mais partes que gosta do SharePoint na sua página HTML. Acostume-se com isso – ainda que agora você possa usar seu próprio editor HTML, você ainda vai poder usar os controles e marcas do SharePoint que trazem tudo isso à vida.

À medida que usamos a rolagem pelo HTML, podemos encontrar as imagens que estão faltando e que devem fazer parte da página mestra. São elas: banner.gif (do HTML) e main.jpg (da folha de estilos que define o fundo para o main_image DIV), as quais vamos ajustar primeiro.

De volta ao navegador, clique no menu Ações de site e depois clique no menu Exibir Conteúdos de Site. Clique no link Imagens de Conjuntos de Sites para abrir a biblioteca de documentos. Agora vamos carregar nossas duas imagens a essa biblioteca. O Url da biblioteca é /sitecollectionimages, assim, usar o Dreamweaver mudará o caminho para ambas as imagens para apontar para essa biblioteca. Se você atualizar a página de pré-visualização, verá que estamos progredindo:

Um coisa que provavelmente você notará e que não viu na figura anterior é a divisão (DIV) amarela na parte inferior da página. Ela também estava na primeira figura, mas o navegador estava em um tamanho grande demais para que você pudesse vê-la. A parte importante dessa divisão amarela é que o SharePoint a inseriu durante o processo de conversão, e ela contém o espaço reservado para o conteúdo da página principal. A seguir, vamos retirar o conteúdo que deve fazer parte da página de conteúdo, não da página mestra. Portanto, vamos remover o texto da seção principal e excluir as imagens que não estão renderizando o texto abaixo delas. Também vamos mover a DIV de espaço reservado (sem o amarelo) para a seção principal da página. Além disso, vamos adicionar controles de espaço reservado às três áreas em que temos imagens e texto. Vamos uni-las quando criarmos nossa página de layout.

O HTML resultante possui uma combinação de comentários, marcas especiais de processamento do SharePoint, e espaços reservados para onde o conteúdo irá. Veja como ficará a aparência de cada seção:

Corpo principal:

Coluna esquerda:

Coluna central:

Coluna direita:

A página está parecendo um pouco vazia agora, mas está tudo bem – é o que desejamos para uma página mestra:

Agora que terminamos essa parte, estamos com nossa página mestra quase pronta. Ainda vamos precisar adicionar alguns menus e caixas de pesquisa, mas voltaremos a esse ponto logo mais. A próxima coisa a se fazer é criar uma página de layout. Uma página de layout é onde “conectamos” os campos de dados com seu layout na página. Para fazer isso, vamos até Configurações do Site…Páginas mestras e layouts de página. Clicamos no botão Novo, na faixa de opções, e selecionamos Layout da Página. Quando a tela Novo Layout da Página é exibida, temos de selecionar o tipo de conteúdo que desejamos associar a esse layout da página. Você deve se lembrar que, anteriormente nesta postagem, eu descrevi como criar um tipo de conteúdo personalizado e chamá-lo de DW Layout. Assim, no campo Tipo de Conteúdo Associado, só selecionamos meu tipo de conteúdo DW Layout. Damos a ele um Url, um Título e uma Descrição e pronto: podemos criar nossa página de layout. Nesse caso, o Url criado para a página foi DWLayoutPage.aspx, o Título foi Página de Layout do Dreamweaver, e a Descrição foi Página de layout com base no site de tutorial do Dreamweaver.

Agora a página de layout foi criada, mais ainda não possui nenhum controle nela. Precisamos adicionar os controles à página e associá-los aos campos personalizados no tipo de conteúdo que descrevi anteriormente: LeftStoryImage, LeftStoryText, etc. Além disso, também preciso adicionar controles de espaço reservado ASP.NET que correspondam aos contêineres de espaço reservado que adicionamos à página mestra. Dessa forma, os dados de cada campo são associados com um contêiner, esse contêiner é saída no espaço reservado de contêiner correspondente na página mestra – é assim que nossos dados são renderizados no ponto certo na página mestra.

Se você observar os detalhes acima referentes à página mestra, verá que eu adicionei quatro espaços reservados de conteúdo: PlaceHolderMain, PlaceHolderLeft, PlaceHolderCenter e PlaceHolderRight. Preciso adicionar esses espaços reservados à minha página layout e depois colocar o campo apropriado de tipo de conteúdo em cada um. Para isso, vou arrastar novamente minha nova página de layout, DWLayoutPage.aspx, da exibição do Explorer da Galeria de Página Mestra e soltá-la no Dreamweaver. Por padrão, a página de layout tem um controle de espaço reservado já chamado PlaceHolderMain, então não preciso adicioná-lo. Adiciono apenas os outros, usando marcações de controle padrão ASP.NET como estas:

<asp:Content ContentPlaceholderID="PlaceHolderLeft" runat="server">

</asp:Content>

Como você pode ver, apenas concedi ao espaço reservado uma ID PlaceHolderLeft e depois adicionei mais dois, com as IDs PlaceHolderCenter e PlaceHolderRight.

Em termos dos campos atuais necessários na nossa página de layout, não são, de fato, tantos. Há o campo de conteúdo principal, que vem com a classe base que nosso tipo de conteúdo herdou. Esse campo é chamado simplesmente de PublishingPageContent. Como ele vai no corpo principal da página, adicionei um controle de publicação para ele na seção PlaceHolderMain, então essa seção se parece com isto:

<asp:Content ContentPlaceholderID="PlaceHolderMain" runat="server">

<PublishingWebControls:RichHtmlField id="PageContent" FieldName="PublishingPageContent" DisableInputFieldLabel="true" runat="server"/>

</asp:Content>

Cada um dos outros três espaços reservados precisa de dois campos: um campo de imagem e um campo rich text. Então, eu adicionei os dois e usei de novo o nome do campo de tipo de conteúdo no atributo FieldName da marcação. A seguir há um exemplo da aparência dos controles do PlaceHolderLeft, sendo que o Center e o Right são bastante parecidos:

<asp:Content ContentPlaceholderID="PlaceHolderLeft" runat="server">

<PublishingWebControls:RichImageField FieldName="LeftStoryImage" runat="server"/>

<PublishingWebControls:RichHtmlField id="LeftTextContent" FieldName="LeftStoryText" DisableInputFieldLabel="true" runat="server"/>

</asp:Content>

Nesse ponto, estamos com uma perspectiva de página mestra e de página de layout bem definida (sem levar em conta os menus e a caixa de pesquisa que mencionei acima). Agora desejamos criar uma nova página e fazer com que ela use o layout da nossa nova página.

Para fazer isso, vamos até a biblioteca de Páginas. Clicamos em Novo na faixa de opções e selecionamos DW Layout, que é exibido no novo menu agora, já que é baseado em um tipo de conteúdo herdado do tipo de conteúdo da Página de boas-vindas:

Preenchemos as propriedades necessárias e a aparência fica algo como:

Certo, agora estamos prontos para fazer o teste! Para começar, voltamos à galeria da página mestra e publicamos nossa página mestra (index.html). Até fazermos isso, não é possível selecionar a página como página mestra para o site. A próxima coisa que faço é voltar às Configurações do Site, nas configurações da página mestra, e selecioná-la como a mestra para a Página Mestra do Site. Nunca havíamos feito isso antes para ter certeza que tudo está funcionando. Se você cometer qualquer erro com sua página mestra e atribuí-la à Página Mestra do Sistema, você pode ter sérios problemas para tentar reverter isso.

Isso feito, podemos agora voltar à biblioteca de Páginas e clicar na página dwhome.aspx que acabamos de criar. Isso faz com que ela apareça no navegador, de forma que podemos editá-la. Como você pode observar, está começando a unir-se muito bem:

Vamos seguir em frente e inserir os dados do site original do Dreamweaver. Como todos os campos de texto são HTML com formatação, só podemos copiar o HTML bruto da página do Dreamweaver e colá-lo dentro do campo no modo HTML.

As figuras são um pouco mais interessantes. A primeira coisa que fazemos é carregá-las da unidade local para a pasta Imagens no SharePoint. Assim que estiverem na pasta, podemos tirar vantagem de outro recurso de publicação do SharePoint 2013 chamado Renderizações de Imagem. Isso permite que você crie um tamanho personalizado para a renderização da imagem. Nesse caso, as imagens no site de tutorial do Dreamweaver tinham todas o mesmo tamanho: 316px de largura por 130 pixels de altura. Para copiar esse comportamento, vamos até as Configurações de Site…Renderizações de Imagem (na seção Aparência). Você verá três renderizações imediatas. Acabamos de clicar no link para adicionar um novo item e criamos uma renderização com as dimensões descritas chamada Imagem da Coluna. Ao adicionar a imagem à página em que podíamos selecionar qual renderização de imagem deveria ser usada para exibir a imagem na página, escolhemos a renderização Imagem da Coluna, que era tudo que precisávamos para dispor da maneira como foi feito no site do Dreamweaver.

Ao finalizar, ficaremos com isso, que se parece muito com o site original do Dreamweaver agora. Aqui temos uma figura do original, em cima, e da versão do SharePoint logo abaixo:

Site do Dreamweaver:

Site do SharePoint:

Parece muito bom, de verdade. As principais coisas que se sobressaem como sendo diferentes são a cor e a fonte das marcas internas, como H2 e H3. Por ora, vamos arrumar isso ajustando o que estiver na folha de estilos para essas áreas. Você poderia decidir entre abordar as marcas uma por vez ou todas juntas para H2, H3, etc.

Depois de fazer esses pequenos ajustes de CSS, agora temos uma página que é basicamente um toque morto para o site original do Dreamweaver. Nesse ponto, vamos seguir em frente, verificar a página dwhome.aspx e fazer dela a home page para o site. A última coisa que faremos é adicionar à página mestra alguns dos recursos do SharePoint que mencionei anteriormente: a navegação superior e a caixa de pesquisa.

Para começar, arrastemos a página mestra de volta à exibição do Explorer e dentro do Dreamweaver. No navegador, vamos até o menu Ações do Site e selecionamos o Gerenciador de Design. Clicamos na opção #4, Editar Páginas Mestras, depois clicamos em index.html, que é nossa página mestra neste exercício. Temos novamente a pré-visualização e vamos clicar no menu Trechos no canto superior direito. Isso vai me permitir aproveitar esse novo recurso no qual deixamos você escolher entre diferentes elementos de página padrão do SharePoint, como a navegação superior e vertical, o título e o logo do site, a caixa de pesquisa, as web parts, etc. Para tornar as coisas visualmente mais "interessantes" para esse cenário, adicionamos algumas páginas novas ao site chamadas Produtos e Carreiras e criamos links de navegação para elas.

De volta à página mestra, adicionamos novos elementos DIV nos locais que queremos que colocar a navegação e a caixa de pesquisa. Depois vamos à página de Trechos, copiamos o código para a Navegação Superior e Caixa de Pesquisa e colamos na DIV apropriada. A página mestra tem esta aparência agora (o código de trecho é removido brevemente, e você pode obter os seus copiando e colando na sua página de trechos):

<div>

</div>

<div>

</div>

Este é o produto final, completo com os menus e a caixa de pesquisa do SharePoint:

Agora que finalizamos, tem algumas coisas que valem a pena serem apontadas. Primeiro, esse é um exemplo bem ruim para uma página mestra. Por quê? Porque o layout funciona muito bem para uma home page, mas para a maioria das suas páginas de conteúdo ele não é flexível o suficiente para uso. O propósito desta postagem foi mesmo só para pegar um exemplo conhecido do mundo do Dreamweaver e fazê-lo funcionar no mundo do SharePoint usando a ferramenta do Dreamweaver e os novos recursos do Gerenciador de Design no SharePoint 2013. Quanto a isso, acho que fizemos um bom passo a passo. No mundo perfeito, poríamos mais recursos dos que estão agora na página de layout da página mestra. Por exemplo, se você tornar essa página mestra a Página Mestra do Sistema, provavelmente você não ficará satisfeito. A seguir temos uma ideia da aparência das páginas de formulários e de configurações quando você faz isso (essa é a página de Configurações de Site):

Uau! Tentar reajustar a página mestra é praticamente impossível na interface de usuário a essa altura. Felizmente, você pode executar esse pequeno trecho do PowerShell para retroceder à página mestra não convencional:

$w = Get-SPWeb https://yourWebApp

$w.MasterUrl = "/_catalogs/masterpage/v15.master"

$w.Update()

Para meu segundo apontamento, vou trocar os equipamentos e alternar para um tipo diferente de página mestra. Vamos dar uma olhada no exemplo de página mestra Contoso:

Parece bom, certo? Nada sofisticado, mas com os elementos básicos de um site. Mas vamos torná-lo a Página Mestra do Sistema e depois ir até as configurações para uma lista ou uma biblioteca:

Notou algo faltando? Está faltando a trilha de navegação do site que você normalmente vê na parte superior da seção de Informação de lista, que permite que você clique para voltar aos conteúdos de lista. É por isto que eu apontei esse fato: se você for até a página de Trechos, não encontrará o código da trilha de navegação do site que pode ser usado para isso. A página de Trechos tem muitos códigos bons, não foi feita para cobrir todos os controles de todas as situações. Então como ajustamos isso? Bom, quando não conseguimos encontrar o que precisamos na página de Trechos, precisaremos abrir o arquivo v15.master com um crack e descobrir os trechos de código. Os códigos se parecem com os trechos a seguir no v15.master, o qual é responsável por essa trilha de navegação do site:

<SharePoint:AjaxDelta id="DeltaPlaceHolderPageTitleInTitleArea" runat="server">

<asp:ContentPlaceHolder id="PlaceHolderPageTitleInTitleArea" runat="server">

<SharePoint:SPTitleBreadcrumb

runat="server"

RenderCurrentNodeAsLink="true"

SiteMapProvider="SPContentMapProvider"

CentralAdminSiteMapProvider="SPXmlAdminContentMapProvider">

<SharePoint:ThemedForegroundImage ThemeKey="spcommon" ImageUrl="/_layouts/15/images/spcommon.png" CssClass="ms-pageTitle-separatorImg" runat="server" />

</span>

</PATHSEPARATORTEMPLATE>

</SharePoint:SPTitleBreadcrumb>

</asp:ContentPlaceHolder>

</SharePoint:AjaxDelta>

Se você tentar copiar e colar isso na sua página mestra HTML, não vai funcionar. Isso porque ela contém marcações ASP.NET, e estamos trabalhando com uma página HTML. O SharePoint 2013 usa marcas especiais que permite que você "empacote" suas marcas ASP.NET de forma que o software saiba como atualizar a página .master criada e que é "emparelhada" à sua página HTML. Para isso, ponha a marcação ASP.NET em marcas de comentário, ponha "MS:" antes das marcas de início e "ME:" antes das marcas de fechamento. Esse mesmo código terá a aparência a seguir quando esses "embrulhos" são postos em volta dele; o segundo código é o que será colado na página mestra HTML:

</span>

</PATHSEPARATORTEMPLATE>

Agora que colamos os códigos na mestra, podemos ver como isso traz a trilha de navegação de site de volta à página de configurações de lista

Com isso, empacoto esta longuíssima postagem. Você pôde ver como os novos recursos do Gerenciador de Design do SharePoint 2013 permite que você use seu editor de HTML favorito para realizar as tarefas diárias do gerenciamento de conteúdo. Conseguimos recriar o site de tutorial do Dreamweaver no SharePoint 2013 usando o Dreamweaver, que é um grande passo à frente em relação à versão anterior do SharePoint. Também mostrei como usar os recursos como a galeria de Trechos para adicionar os recursos do SharePoint às suas páginas mestras e também o que fazer quando você precisa de um recurso que você não pode encontrar nos Trechos. Além disso, essa mesma metodologia de usar seu editor de HTML favorito pode ser usada para outros recursos importantes do SharePoint 2013 chamados de modelos de exibição. Esses recursos são usados, em sua maioria, com resultados de pesquisa, mas a pesquisa é tão bem integrada nessa versão do SharePoint que você encontrará muitos usos para eles. Acompanhe esse blog para uma leitura abrangente de como criar uma solução usando regras de consulta e tipos de resultado.

O anexo a esta postagem contém a versão bem formatada deste texto em Word, juntamente com os elementos fonte que usei para criar a versão final do SharePoint do site de tutorial do Dreamweaver.

Esta é uma publicação localizada. O artigo original está em Using Dreamweaver and Design Manager with SharePoint 2013

Share via

Como usar o Dreamweaver e o Gerenciador de Design com o SharePoint 2013

Additional resources