No meu último artigo, eu documentado como criar uma Página Mestra no SharePoint 2013. As páginas mestras definem os elementos globais do chrome do seu site. Este artigo explica como criar layouts de página personalizados no SharePoint 2013. Para obter mais informações sobre o modelo de página do SharePoint 2013, consulte este Artigo da Microsoft.
planejando seu layout de Página
para este exemplo, vamos recriar um pedaço de uma página em nosso site (www.navantis.com):
em nosso artigo anterior, criamos a página principal que definiu as folhas de cabeçalho, rodapé e estilo global para esta página. Agora vamos criar um layout de página que segue Este formato básico. O conteúdo será dinâmico para que você possa criar quantas páginas quiser com base nesse layout.
em nosso layout de página, definiremos as seguintes áreas como “controles de campo”. Vamos criar todos eles em um único contêiner de Conteúdo e colocá-los explicitamente para refletir nosso design:
o breadcrumb no canto superior esquerdo, podemos usar o breadcrumb trail do SharePoint e incorporaremos a assinatura do boletim informativo no layout da página porque não queremos que isso seja explicitamente definido no layout.
definindo seu tipo de conteúdo
portanto, antes de fazer o trabalho HTML, vamos criar um tipo de conteúdo (uma definição para campos de conteúdo) que define cada um desses campos para nossa página. Com base no plano acima, precisamos dos seguintes campos:
- LargeHeadline
- RightHandBlurb
- LeftLinkList
- LeftColumnTitle
- LeftColumnText
- RightColumnText
Em cada caso, estes serão os controles HTML. O SharePoint 2013 permite definir outros tipos de conteúdo para esses campos, como imagens. As imagens no SharePoint 2013 podem ser renderizadas em dimensões específicas e o SharePoint 2013 renderizará dinamicamente qualquer imagem àquela especificada para garantir que elas se encaixem bem no layout definido.
para criar um tipo de conteúdo, vá para Configurações do Site –> tipos de conteúdo do Site (em galerias de Web Designer). Se você olhar para os tipos de conteúdo de Layout de página, verá os existentes para Artigo, catálogo, página de Boas-Vindas, etc. Vamos criar um tipo de conteúdo para o nosso layout. Clique em criar e digite um nome para seu novo tipo de conteúdo:
em Tipo de conteúdo pai, você pode selecionar o pai do qual seu tipo de conteúdo herdará. Se você observar os tipos de conteúdo de layout de página existentes, eles herdarão da Página de tipo de conteúdo. A página está no grupo que publica tipos de conteúdo. Você também pode especificar o grupo que deseja colocar seu novo tipo de conteúdo – você pode adicioná-lo ao grupo de tipos de conteúdo de layout de Página existente ou criar seu próprio grupo personalizado.
quando você tiver criado seu novo tipo de conteúdo, o SharePoint 2013 exibirá as colunas que foram herdadas automaticamente do tipo de conteúdo da Página. Vamos adicionar alguns novos para representar nossos campos personalizados. Clique na coluna adicionar de novo site e vamos adicionar cada campo:
para cada coluna, podemos especificar o tipo. Para esses campos que queremos explicitamente estilizar, podemos usar a opção de linha única de texto para que o autor do conteúdo seja colocado em texto simples que será formatado pelo modelo. Para os campos que queremos fornecer mais controle ao autor do conteúdo, podemos especificar o campo como conteúdo HTML completo e, em seguida, o autor do conteúdo poderá colocar qualquer HTML usando o editor de rich text. Para nossos campos, vamos usar essa abordagem:
- LargeHeadline – Única linha de texto
- RightHandBlurb – Várias linhas de texto
- LeftLinkList – Full HTML
- LeftColumnTitle – Única linha de texto
- LeftColumnText – Full HTML
- RightColumnText – HTML Completo
Para cada campo, criar uma coluna de site.
agora temos campos para armazenar o conteúdo, vamos agora criar um Layout de página.
Criando um layout de Página
para criar um layout de página, vá para o Gerenciador de Design e clique em 6. Editar Layouts De Página. Clique em criar um Layout de página. Dê um nome ao seu layout de página, Escolha sua página principal e seu tipo de conteúdo que você acabou de criar.
se você visualizar o layout da sua página, verá que não parece muito – precisamos atualizar o HTML em torno dos controles de campo para formatar corretamente o layout.
Publicando seu layout de Página
Antes de usar seu layout de página, ele deve ser publicado. Para publicar seu layout de página, vá para Configurações do Site – > páginas mestras e layouts de página. Você verá dois arquivos-um é HTML e outro é ASPX. no SharePoint 2013, o HTML agora é o mestre e você pode editá-lo usando um editor de HTML. O SharePoint 2013 gera o arquivo ASPX automaticamente. Para publicar seu layout, clique no arquivo HTML e publique:
isso publicará os arquivos HTML e ASPX, agora disponibilizando-os para criar uma página com base no seu layout.
criando uma Página
para criar uma página com base em nosso novo layout, vá para nova página.
se você for para page –> Layouts de página, encontrará nosso novo Layout de página na lista de Layouts de Página disponíveis. Ao mudar o layout da Página, agora você deve ver todos os campos que criamos anteriormente em nosso tipo de conteúdo.
você pode preencher seu conteúdo digitando-o ou copiando-o e colando-o do seu site existente ou de documentos do office, como o Word. O copy and paste melhorou drasticamente em relação às versões anteriores!
Aqui meu conteúdo é agora preenchido:
Agora podemos publicar a nossa página…
Nosso conteúdo está lá, mas o layout não refletir o que queremos…então agora editar o HTML para atualizar nosso layout.
personalizar Layouts de Página
layouts de Página no SharePoint 2013 são apenas arquivos HTML com muita marcação adicional para especificar onde os controles serão injetados. Agora podemos personalizar o arquivo HTML através do Gerenciador de design. Você pode simplesmente pegar uma cópia do arquivo HTML, fazer suas alterações e reenviar seu arquivo e o SharePoint 2013 fará o resto. Existem duas maneiras de pegar o arquivo:
- vá para Gerente de Design – > 3. Carregue arquivos de Design e mapeie uma unidade de rede para o diretório da página principal.
- vá para Configurações do Site- > páginas mestras e layouts de página e você pode baixar seu arquivo.
Depois de iteração algumas vezes com o layout da página e mover os fragmentos fornecidos pelo SharePoint 2013 em pontos apropriados, agora temos uma página formatada corretamente:
Todo o conteúdo dentro da página principal área é totalmente gerido pelo SharePoint pode ser facilmente alterado por um autor de conteúdo.
Este post foi escrito por Chris Woodill
Christopher Woodill é o Vice-Presidente, do Sector Público para Navantis. Com mais de 15 anos de experiência no planejamento, gerenciamento e implementação de estratégias tecnológicas no setor público e privado, Christopher é responsável pelas vendas do setor público, estratégia e entrega de soluções para nossos clientes em Saúde, Governo, municípios e educação.
