Você pode criar de forma rápida e fácil sites de aparência profissional e dinâmicos — incluindo sites de equipe, sites de blog e uma variedade de sites de Espaço de Trabalho de Reunião — usando um dos vários modelos de site. As páginas da Web que são criadas a partir desses modelos funcionam justamente como estão para muitas organizações e propostas mas, algumas vezes, você pode querer personalizar uma página em seu site ou, até mesmo, todas as páginas. Por exemplo, se desejar usar um novo site de intranet para manter a equipe de vendas da sua organização estimulada e treinada em relação a um novo produto, você pode basear o site no modelo do Site de Equipe. Em seguida, você pode adicionar texto ou elementos gráficos à página, individualmente, alterar a barra de links superior, reorganizar e editar os itens no Início Rápido, bem como alterar as fontes e a formatação do site.

O Microsoft Office SharePoint Designer 2007 é a ferramenta preferida para personalizar sites do Microsoft Windows SharePoint Services 3.0 e Microsoft Office SharePoint Server 2007. Este artigo mostra a você apenas algumas maneiras básicas pelas quais é possível personalizar um site do SharePoint usando o Office SharePoint Designer 2007.

 Observação   Todos os exemplos deste artigo usam o modelo de Site de Equipe do SharePoint.

---

• Uma rápida introdução à personalização de páginas

• Adicionar texto ou um elemento gráfico a uma página

• Personalizar a barra de links superior

• Personalizar o Início Rápido

• Alterar fontes e formatação

• Próximas etapas sugeridas

---

Uma rápida introdução à personalização de páginas

Você abre uma página e deseja personalizá-la, mas não é possível ver o que deseja selecionar e o ponteiro muitas vezes se parece com o da ilustração a seguir.

Um ponteiro como esse indica áreas que não são editáveis. Se a área for editável, ela é controlada por espaços reservados de conteúdo especificados na página mestra na qual a página se baseia. Portanto, para entender como personalizar páginas, você deve primeiro entender as páginas mestras e os espaços reservados de conteúdo.

De onde a home page obtém seu conteúdo e sua formatação?

O conteúdo e a formatação da home page têm sua origem na página mestra padrão. As páginas mestras são modelos de página que permanecem anexados às páginas. Quando uma página mestra é alterada, todas as páginas anexadas a ela também são alteradas. As páginas mestras facilitam a atualização de várias páginas em uma única operação. Elas também facilitam a aplicação de uma aparência consistente — incluindo elementos gráficos, fontes e formatação — a apenas algumas ou a todas as páginas do seu site no SharePoint.

A página mestra padrão em sites do Windows SharePoint Services 3.0 é denominada default.master e está localizada na pasta _catalogs/masterpage do site. A página Default.master controla a formatação da home page e de todas as outras páginas padrão (como os formulários de lista). Para personalizar a aparência da home page, você pode adicionar conteúdo a áreas da home page designadas como editáveis pela página mestra padrão ou pode personalizar a página mestra padrão do site.

 Observação   As home pages do site no Office SharePoint Server 2007 podem não ser controladas pela default.master, mas por uma página mestra diferente. A página mestra à qual a home page é anexada é determinada pela definição de site a partir da qual o site foi criado.

O que são espaços reservados?

Ao abrir a home page de um site do SharePoint no Office SharePoint Designer 2007 pela primeira vez, você perceberá espaços reservados na home page que se parecem com este da ilustração.

Os espaços reservados da página mestra definem as áreas nas páginas anexadas em que é possível adicionar ou editar conteúdo. Os espaços reservados também reservam pontos de funcionalidade que já está sendo usada na página ou está reservada para uso futuro por outro programa, como o Microsoft Office Forms Server 2007 ou Microsoft Office Project Server 2007. As páginas mestras nos sites do Office SharePoint Server 2007 possuem mais espaços reservados obrigatórios, padrão do que as páginas mestras dos sites do Windows SharePoint Services 3.0.

 Observação   No rótulo da área, o nome do espaço reservado é seguido por (Mestra) ou (Personalizado). Os espaços reservados marcados com (Mestra) possuem conteúdo padrão de uma página mestra do site e os espaços reservados marcados com (Personalizado) possuem conteúdo personalizado que foram adicionados à página atual.

Para personalizar o conteúdo do espaço reservado, como a barra de links superior ou o Início Rápido, primeiramente, você deve desbloquear o espaço reservado para edição. Para isso, clique na seta próxima ao espaço reservado e clique em Criar Conteúdo Personalizado.

É possível personalizar cada espaço reservado em uma página mestra, independentemente de outros. Por exemplo, você pode alterar os estilos aplicados a um espaço reservado, movê-lo para outra posição na página, ou removê-lo completamente. Entretanto, você deve remover os espaços reservados de conteúdo com muito cuidado. Se você remover um espaço reservado de conteúdo de sua página mestra, todas as páginas de conteúdo que fornecem conteúdo para essa área mostrarão um erro.

O que acontece quando algo dá errado?

Às vezes, ao editar a home page, mesmo os usuários experientes podem cometer erros. Quando a personalização da home page dá errado, é possível redefini-la para seu estado original usando a definição do site a partir da qual o site foi originalmente criado. Para saber como, leia o artigo Redefinir uma página personalizada para a definição do site. Além disso, se você tiver uma versão ativada para uma biblioteca de documentos em seu site e a página que está sendo editada estiver armazenada nessa biblioteca, você sempre poderá reverter para a versão anterior da página, caso encontre um problema.

E quanto às páginas que não constituem a home page?

Assim como a home page, todas as páginas padrão em um site do SharePoint são controladas por uma página mestra. Se desejar personalizar uma página, é possível começar inserindo conteúdo personalizado nos espaços reservados da página. Se houver alterações que você não possa fazer trabalhando nos espaços reservados, é possível editar a página mestra que controla a página.

Ao abrir qualquer página no Office SharePoint Designer 2007, você pode identificar qual página mestra controla a formatação dessa página olhando o canto superior direito do modo de exibição de Página, onde o local e o nome da página são especificados, conforme mostrado na ilustração a seguir.

Nesse caso, a página AllItems.aspx é anexada à página mestra padrão, que está localizada na pasta masterpage da pasta _catalogs no site e é denominada default.master. Toda vez que for personalizar uma página, você decide qual dos dois tipos de personalização deseja utilizar:

• Personalizações em uma única página, adicionando ou editando conteúdo em um espaço reservado de conteúdo
• Personalizações em um página mestra, que serão refletidas em todas as páginas anexadas à mestra

 Parte superior da página

Adicionar texto ou um elemento gráfico a uma página

Depois de clicar em um espaço reservado de conteúdo e tornar essa área editável clicando em Criar Conteúdo Personalizado, você pode clicar dentro da caixa do espaço reservado e começar a digitar. Também é possível arrastar imagens localizadas no site, da Lista de Pastas para o espaço reservado.

 Parte superior da página

Personalizar a barra de links superior

As guias na barra de links superior, automaticamente, listam a home page e se vinculam a ela. Elas também listam e se vinculam à home page de qualquer subsite do site, mas apenas se você tiver criado o subsite usando o navegador e tiver selecionado a opção Exibir este site na barra de links superior do site pai.

É possível modificar a barra de links superior no navegador (clicando em Configurações do Site e indo para a página Barra de Links Superior) ou no Office SharePoint Designer 2007 (usando as etapas a seguir). A modificação da barra de links superior no Office SharePoint Designer 2007 oferece mais visibilidade para se trabalhar, pois é possível arrastar páginas para a barra de links. Além disso, ao nomear uma página no modo de exibição de Navegação, o título da página que é mostrado na janela do navegador é automaticamente alterado para o novo nome.

1. Abra no Office SharePoint Designer 2007 o site para o qual você deseja modificar a barra de links superior.
2. No menu Site, clique em Navegação.

   O modo de exibição de Navegação é aberto para mostrar uma representação visual do site. As barras de links são representadas pelas caixas com símbolos de globo.

   

Adicionar um link à barra de links superior para uma página existente em seu site

• Na Lista de Pastas, clique na página que deseja criar um vínculo a partir da barra de links superior e arraste-a para uma posição logo abaixo da caixa Barra de Navegação Superior do SharePoint. Quando a página estiver no lugar, você verá uma linha de conexão indicando que um link para essa página foi adicionada à barra de links superior.

   Observações 

  • A página principal de listas é denominada AllItems.aspx e está localizada no diretório Lists/nome da lista/ em seu site (onde nome da lista é o nome da lista, como Avisos, Calendário, Links, Tarefas ou Discussão em Equipe). A página principal de bibliotecas é denominada AllItems.aspx e está localizada no diretório nome da biblioteca/forms/ em seu site (onde nome da biblioteca é o nome da biblioteca).
  • Se a Lista de Pastas não estiver visível, clique em Lista de Pastas no menu Painéis de Tarefas. Se o texto estiver cortado e não for possível ler os rótulos nas caixas no modo de exibição de Navegação, posicione o ponteiro na caixa. O nome completo é exibido em uma Dica de Tela. Se nenhuma página for exibida na caixa Barra de Navegação Superior do SharePoint, clique no sinal de adição (+) na parte inferior da caixa para expandir a lista de páginas.

Adicionar um link à barra de links superior para uma nova página

• Clique com o botão direito do mouse na Barra de Navegação Superior do SharePoint, aponte para Novo e clique em Página.

  Uma nova página é criada.

   Observação   Se a nova página não estiver visível na Lista de Pastas, clique duas vezes nela para abri-la para edição e ela será exibida.

Renomear um link na barra de links superior

1. Na caixa Barra de Navegação Superior do SharePoint, clique com o botão direito do mouse na página que deseja alterar e clique em Renomear.
2. Digite o novo nome para a página. O link na barra de links é alterado assim que você clicar fora da página.

    Observação   Essa alteração afeta somente o link na barra de links superior do SharePoint; não afetando o nome do arquivo ou o título da página.

Excluir um link da barra de links superior

• No modo de exibição de Navegação, na caixa Barra de Navegação Superior do SharePoint, clique com o botão direito do mouse na página que deseja excluir e clique em Excluir.

  O link para a página é excluído da barra de links superior. A página em si não é excluída.

Alterar a ordem dos links na barra de links superior

• Você pode arrastar páginas para reordená-las. Por exemplo, se uma página denominada Início estiver em primeiro lugar na lista e outra página denominada Planos estiver em segundo lugar, mas você deseja reverter essa ordem, no modo de exibição de Navegação, arraste Início para a direita de Planos.

   Observação   Verifique se as caixas continuam abaixo da caixa Barra de Navegação Superior do SharePoint.

 Parte superior da página

Personalizar o Início Rápido

O Início Rápido exibe automaticamente links para todas as listas e bibliotecas do SharePoint em seu site criadas no Office SharePoint Designer 2007 ou no navegador (no navegador, você deve escolher a opção Exibir esta lista [ou biblioteca] no Início Rápido). A seção Sites fornece links automaticamente para todos os subsites do site. A seção Pessoas e Grupos fornece links automaticamente para uma lista de todos os usuários e grupos que têm permissões de acesso a este site. A seguir estão as etapas que você pode seguir para personalizar as seções de documentos, imagens, listas, discussões e pesquisas do Início Rápido com o Office SharePoint Designer 2007.

1. No Office SharePoint Designer 2007, abra o site para o qual deseja modificar o Início Rápido.
2. No menu Site, clique em Navegação.

   O modo de exibição de Navegação é aberto para mostrar uma representação visual do site. As barras de links são representadas pelas caixas com símbolos de globo.

   

Excluir uma seção do Início Rápido

Talvez você queira excluir uma seção do Início Rápido se não estiver usando o recurso representado por essa seção. Por exemplo, se você não usa as discussões, é possível excluir a seção Discussões.

• Clique com o botão direito do mouse na caixa que representa a seção que deseja excluir, como Discussões, e clique em Excluir no menu de atalho.

Adicionar um link ao Início Rápido para uma página existente em seu site

• Na Lista de Pastas, clique na página na qual deseja criar um vínculo a partir do Início Rápido e arraste a página para um local na caixa Início Rápido.

 Observações 

• A página principal de listas é chamada de AllItems.aspx e está localizada no diretório Lists/nome da lista/ em seu site. A página principal de bibliotecas é chamada de AllItems.aspx e está localizada no diretório nome da biblioteca/forms/ em seu site.

Se você deseja que o link apareça no mesmo nível dos títulos no Início Rápido (como Documentos, Imagens e Listas), certifique-se de arrastá-lo diretamente para baixo da caixa Início Rápido. Se deseja que o link apareça abaixo de um título existente, certifique-se de arrastá-lo diretamente para baixo desse título. Um link para a página é adicionado ao Início Rápido.

• Se a Lista de Pastas não estiver visível, clique em Lista de Pastas no menu Painéis de Tarefas. Se o texto estiver cortado e não for possível ler os rótulos nas caixas no modo de exibição de Navegação, posicione o ponteiro na caixa. O nome completo é exibido em uma Dica de Tela. Se nenhuma página for exibida sob a caixa Início Rápido, clique no sinal de adição (+) na parte inferior da caixa para expandir a lista de páginas.

Adicionar um link ao Início Rápido para uma nova página

• Clique com o botão direito do mouse na caixa Início Rápido, aponte para Novo no menu de atalho e clique em Página.

  Uma nova página é criada.

 Observação   Essa opção cria uma nova página e um link correspondente como um cabeçalho no mesmo nível de Documentos, Imagens e Listas. Se deseja criar a nova página em uma seção existente, clique com o botão direito do mouse na caixa do título dessa seção, em vez de clicar na caixa Início Rápido, aponte para Novo no menu de atalho e clique em Página.

Renomear um link no Início Rápido

1. Na caixa Início Rápido, clique com o botão direito do mouse na página que deseja alterar e clique em Renomear.
2. Digite o novo nome para a página. O link na barra de links é alterado assim que você clicar fora da página.

 Observação   Essa alteração afeta somente o link no Início Rápido; não afetando o nome do arquivo ou o título da página.

Alterar a ordem dos links no Início Rápido

• No modo de exibição de Navegação, arraste as páginas para reordená-las. Por exemplo, se você deseja que Listas fique antes de Documentos, clique em Documentos e arraste-o para a direita de Listas (ou clique em Listas e arraste-o para a esquerda de Documentos).

 Observação   Ao fazer isso, verifique se as caixas continuam na caixa Início Rápido.

 Parte superior da página

Alterar fontes e formatação

As fontes e a formatação de cada site são controladas pelo CSS (folhas de estilo em cascata) padrão da indústria. Para sites do Windows SharePoint Services 3.0, as regras de CSS são especificadas em um arquivo chamado core.css que está localizado em http://meu_servidor/_layouts/language ID/styles. (Os sites do Office SharePoint Server 2007 podem usar uma folha de estilos diferente.) Se você tiver permissão para editar o arquivo core.css, é possível modificá-lo de modo a alterar as cores de fonte, os tamanhos da fonte, o espaçamento de parágrafo, as imagens de plano de fundo, as bordas, o espaçamento de caracteres e muito mais. Ao modificar o core.css, uma cópia local dele é criada automaticamente em seu site. O core.css local substitui o core.css do servidor quando ele é anexado a uma página ou página mestra. Porém, se você cometer um erro e quiser voltar para o core.css padrão, basta excluir a cópia do core.css.

Ao trabalhar com a página mestra padrão do seu site e usar os painéis de tarefas Propriedades de CSS e Gerenciar Estilos, você pode identificar quais estilos são aplicados ao elemento visual que deseja alterar e, assim, modificar esses estilos. Se você deseja que suas alterações apareçam em todas as páginas do site, verifique se está trabalhando com a página mestra padrão do site, e não na página default.aspx.

Por exemplo, se você deseja alterar a cor do plano de fundo da página, é preciso localizar os estilos em que a cor do plano de fundo está definida e alterar esses estilos para aplicar a cor desejada.

Normalmente, é recomendável criar uma cópia de Default.master, em vez de modificar Default.master diretamente. Entretanto, se você alterar Default.master diretamente e não estiver satisfeito com o resultado, sempre é possível redefinir Default.master para a definição do site. Para obter mais informações, consulte o artigo Redefinir uma página personalizada para a definição do site.

1. Para criar uma cópia de Default.master, na Lista de Pastas, clique com o botão direito do mouse em Default.master e clique em Copiar.
2. Clique com o botão direito do mouse na pasta masterpage e, em seguida, clique em Colar.



3. Clique duas vezes em default_copy(1).master para abri-lo para edição.
4. No modo de exibição de Design, clique em default_copy(1).master onde deseja modificar o estilo.

    Observação   Algumas áreas de conteúdo que aparecem no modo de exibição de Design não têm estilos aplicados e, portanto, nenhum estilo correspondente aparece no painel de tarefas Aplicar Estilos. Por exemplo, se você selecionar um espaço reservado para conteúdo, nenhum estilo aparecerá no painel de tarefas Aplicar Estilos. Os espaços reservados para conteúdo, porém, aparecem dentro de elementos HTML, como a marca <td>.

5. Se o painel de tarefas Aplicar Estilos não estiver visível, no menu Painéis de Tarefas, clique em Aplicar Estilos.
6. No painel de tarefas Aplicar Estilos, clique em Opções e, em seguida, clique em Mostrar Estilos Usados na Seleção.

   Cada estilo aplicado à área onde o cursor está localizado aparecerá com um contorno azul e uma visualização do estilo aparecerá dentro desse contorno.

   Na ilustração a seguir, div.ms-titleareaframe está selecionado no modo de exibição de Design. No painel de tarefas Aplicar Estilos, aparecem três estilos aplicados a div.ms-titleareaframe. O estilo superior, Div.ms-titleareaframe, define a cor do plano de fundo.

    Observação   Como os estilos diferenciam maiúsculas de minúsculas, o estilo Div.ms-titleareaframe, começando com letra maiúscula, é diferente de div.ms-titleareaframe, que começa com minúscula.

   

    Div.ms-titleareaframe está selecionado no modo de exibição de Design.
    Os três estilos aplicados a div.mstitleareaframe aparecem no painel de tarefas Aplicar Estilos.

7. Clique com o botão direito do mouse no estilo que deseja modificar e, em seguida, clique em Selecionar a(s) X Instância(s), sendo X o número de instâncias em que o estilo é aplicado à página.

   Neste exemplo, clique com o botão direito do mouse no estilo superior, Div.ms-titleareaframe.

8. Depois de selecionar todas as instâncias do estilo, clique com o botão direito do mouse novamente no estilo e, em seguida, clique em Modificar Estilo.
9. Na caixa de diálogo Modificar Estilo, faça as alterações desejadas e depois clique em OK.

   Para seguir o exemplo, na caixa de diálogo Modificar Estilo, em Categoria, clique em Plano de Fundo. Na lista cor do plano de fundo, clique em Vermelho e em OK.

O novo estilo é aplicado à página.

Continue modificando os estilos até que a página mestra tenha a aparência desejada.

 Observação   Se, a qualquer momento, você decidir que não está satisfeito com as alterações feitas na página mestra, é possível redefini-la para a definição do site. Para obter mais informações, consulte o artigo Redefinir uma página personalizada para a definição do site.

 Parte superior da página

Próximas etapas sugeridas

As personalizações básicas são um bom início, mas para fazer personalizações grandiosas, em todo o site, primeiramente, é preciso saber mais sobre as páginas mestras e as folhas de estilos. Para obter mais informações, consulte os artigos a seguir:

• Introdução às páginas mestras ASP.NET
• Modificar a página mestra padrão
• Aplicar uma folha de estilos personalizada a um site do SharePoint

 Parte superior da página