Criar estilos de Editor de HTML

Importante :  Este artigo foi traduzido por um sistema de tradução automática, leia o aviso de isenção de responsabilidade. Para sua referência, veja a versão em inglês deste artigo aqui.

Com um site de publicação do Microsoft Office SharePoint Server 2007, os proprietários de conteúdo podem criar e atualizar páginas da Web no site usando apenas um navegador da Web. Por exemplo, um gerente de departamento pode usar um navegador para postar avisos e outras informações, como mostrado na ilustração a seguir, diretamente no seu site.

Página de publicação no navegador

O desenvolvedor ou designer de um site podem ajudar os criadores de conteúdo a melhorar a aparência das páginas criando estilos que podem ser aplicados a partes das páginas que são criadas a partir dos layouts de página. Criar estilos personalizados também ajuda a padronizar a aparência dessas páginas. Este artigo mostra como um desenvolvedor ou designer da Web pode usar o Microsoft Office SharePoint Designer 2007 para criar estilos personalizados que podem ser aplicados a páginas de publicação criadas ou editadas no navegador.

Importante : Este artigo se aplica apenas a site localizados em um servidor que executa o Office SharePoint Server 2007. Além disso, a publicação deve ser ativada no site de nível superior do conjunto de sites. Você também deve ter permissões de criação para o site de nível superior para abrir e editar layouts de página.

Neste artigo

Como o Editor de HTML é usado em um site de publicação?

Criar estilos para o Editor de HTML

Como o Editor de HTML é usado em um site de publicação?

Criar estilos personalizados para páginas de publicação exige uma compreensão de alguns conceitos importantes do Office SharePoint Server 2007. A seguir, uma breve análise.

Como páginas de publicação se relacionam a layouts de página?

Layouts de página são modelos de página que controlam a aparência de uma página, quais campos de página e campos de conteúdo estão disponíveis e, exatamente, quais elementos (como listas e bibliotecas) devem ser apresentados na página. Por exemplo, é possível configurar um layout de página para relatórios de viagem, outro layout de página para artigos de boletim informativo e um terceiro layout de página para atualizações de planos. Assim, os usuários autorizados podem criar novas páginas de publicação baseadas nesses layouts de página. Cada página criada seguirá um formato consistente para o tipo de conteúdo específico que ela conterá. Os usuários podem criar páginas de publicação em seus respectivos navegadores, onde eles têm a opção de selecionar um layout de página toda vez que criarem a página.

caixa de diálogo mostrando uma lista de layouts de página de publicação

Layouts de página podem ser editados no Office SharePoint Designer 2007. Para obter mais informações, consulte o artigo Personalizar um layout de página de publicação.

De onde os layouts de página obtêm sua formatação?

Os layouts de página obtêm sua formatação de páginas mestras, que são modelos de página que definem áreas de conteúdo compartilhado (como cabeçalhos, rodapés e navegação à esquerda) e que usam folhas de estilos para controlar a formatação de texto, hiperlinks, células, tabelas e muitos outros elementos. Os layouts de página também podem obter sua formatação de folhas de estilos aplicadas diretamente neles. Por exemplo, um layout de página pode obter suas regras iniciais de formatação de uma página mestra, mas você sempre pode anexar folhas de estilos adicionais ao layout de página para definir de modo mais preciso a formatação das páginas criadas a partir dele. Por exemplo, a página mestra na qual o layout de página é baseado pode especificar que todo o texto normal está na fonte Verdana, mas você pode anexar uma folha de estilos ao layout de página que especifica que todas as páginas anexadas usem Arial como fonte do texto normal. Toda a formatação e marcação em uma página de publicação — exceto para os campos de conteúdo — têm origem diretamente do layout de página a partir do qual ela foi criada.

Como o conteúdo é editado em páginas de publicação?

Ao criar uma página de publicação, você a cria no navegador. Depois de criar a página, você pode editá-la, procurando-a, clicando no menu Ações do Site e clicando em Editar Página.

menu ações do site mostrando o comando editar página

Depois de abrir a página, é possível clicar em Editar Conteúdo para abrir o Editor de HTML de modo a editar os campos de rich text.

comando editar conteúdo em página aberta

Observação : Os campos que não contêm rich text têm seus próprios editores — por exemplo, um campo de data tem seu próprio editor.

O Editor de HTML é aberto para que você possa adicionar ou editar conteúdo, alterar manualmente fontes e formatação, ou escolher entre várias outras opções. Para aplicar um estilo ao texto, selecione o texto, clique em Estilos e, em seguida, no estilo que deseja aplicar.

Editor de HTML mostrando a lista Estilos

De onde o Editor de HTML obtém seus estilos?

Os estilos que estão disponíveis no Editor de HTML têm origem em duas folhas de estilos localizadas no diretório _layouts de seu site ou subsite:

  • A HtmlEditorCustomStyles.css define a formatação de estilos personalizados e está localizada em:

    http://your_site/_layouts/1033/Styles/HtmlEditorCustomStyles.CSS

  • A HtmlEditorTableFormats.css define a formatação de tabelas e está localizada em:

    http://your_site/_layouts/1033/Styles/HtmlEditorTableFormats.CSS

Como essas folhas de estilos estão localizadas no diretório protegido _layouts em seu site, você não pode modificá-las no Office SharePoint Designer 2007. No entanto, é possível substituir os estilos nessas folhas aplicando estilos adicionais ao layout de página que você usa para criar páginas de publicação.

Início da página

Criar estilos para o Editor de HTML

Você pode criar novos estilos para o Editor de HTML abrindo o site no Office SharePoint Designer 2007 e usando os procedimentos a seguir.

Localizar e abrir o layout de página

Se você já criou um layout de página e agora deseja criar novos estilos de modo a disponibilizá-los para uso no Editor de HTML no navegador, comece localizando e depois abrindo o layout de página. É possível abrir o layout de página clicando duas vezes no próprio layout ou em qualquer página de publicação criada a partir desse layout de página.

  1. No Office SharePoint Designer 2007, abra o site que contém o layout de página que você deseja modificar.

  2. Na Lista de Pastas, localize uma página que usa o layout de página no qual você deseja aplicar um novo estilo e clique duas vezes na página.

    Observação : As páginas de publicação são armazenadas na biblioteca de documentos Páginas do site. Clicar duas vezes em uma página de publicação é um modo rápido de encontrar e abrir o layout de página ao qual a página de publicação está associada. Se você já sabe o nome do layout de página para o qual deseja criar um novo estilo, é possível clicar duas vezes no layout de página, e não na página.

    Lista de Pastas com mensagem sobre a edição da página ou do layout de página de base

    Como as páginas de publicação podem ser editadas somente no navegador, uma mensagem perguntará se você deseja editar a página no navegador ou editar o layout de página de base.

  3. Clique em Editar Layout de Página.

    O layout de página é aberto.

Substituir um estilo existente

Se você deseja substituir um estilo existente, é possível copiar o estilo existente de HtmlEditorCustomStyles.css ou HtmlEditorTableFormats.css em outra folha de estilos usada pela página e, em seguida, modificar o estilo. Como as folhas de estilos no diretório _layouts são aplicadas primeiro, os estilos em qualquer outra folha de estilos usada pelo layout de página substituem os estilos de HtmlEditorCustomStyles.css ou HtmlEditorTableFormats.css.

  1. No navegador da Web, vá para o local da folha de estilos a partir da qual deseja copiar um ou mais estilos digitando um dos seguintes locais na barra Endereço do navegador:

    http://your_site/_layouts/1033/Styles/HtmlEditorCustomStyles.CSS

    —ou—

    http://your_site/_layouts/1033/Styles/HtmlEditorTableFormats.CSS

  2. Ao receber uma mensagem perguntando o que deseja fazer com o arquivo, clique em Abrir.

    A folha de estilos é aberta no Office SharePoint Designer 2007.

  3. Selecione o estilo que deseja modificar, clique nele com o botão direito do mouse e clique em Copiar no menu de atalho.

    Folha de estilo com menu de atalho e o comando Copiar

  4. Ainda no Office SharePoint Designer 2007, abra (ou volte até) o layout de página no qual deseja substituir o estilo e clique em Opções no painel de tarefas Gerenciar Estilos.

    Observação : Se o painel de tarefas Gerenciar Estilos não estiver visível, clique em Gerenciar Estilos no menu Painéis de Tarefas.

  5. Verifique se o comando Mostrar Estilos Usados na Página Atual está selecionado.

    Menu Opções com o comando Mostrar Estilos Usados na Página Atual selecionado

  6. No painel de tarefas Gerenciar Estilos, clique duas vezes em uma das folhas de estilos usada nesta página, como pageLayout.css, para abri-la para edição.

    Cada folha de estilos que é aplicada à página atual aparece como um título de seção na lista Estilos em cascata (CSS) no painel de tarefas Gerenciar Estilos. Você pode clicar duas vezes no título de qualquer folha de estilos para editar essa folha.

  7. Role até a parte inferior da folha de estilos, clique com o botão direito do mouse onde você deseja colar o estilo e clique em Colar no menu de atalho.

  8. Edite o estilo como desejado.

    Observação : O painel de tarefas Propriedades de CSS oferece um abordagem mais visual para editar o estilo. Se esse painel de tarefas não estiver visível, no menu Painéis de Tarefas, clique em Propriedades de CSS.

  9. Para salvar a folha de estilos, no menu Arquivo, clique em Salvar.

Da próxima vez que você usar o Editor de HTML para editar um artigo criado a partir desse layout de página, o estilo modificado estará disponível para uso e aparecerá na lista Estilos.

lista estilos mostrando o estilo modificado

Criar um novo estilo

Você também pode criar um novo estilo e torná-lo disponível na lista Estilos no Editor de HTML. Como é mais fácil iniciar a partir de um estilo existente do que criar um novo estilo, esta seção mostra como fazer isso copiando um estilo existente e, em seguida, renomeando-o.

  1. No navegador da Web, vá para o local da folha de estilos a partir da qual deseja copiar estilos digitando um dos seguintes locais na barra Endereço do navegador:

    http://your_site/_layouts/1033/Styles/HtmlEditorCustomStyles.CSS

    —ou—

    http://your_site/_layouts/1033/Styles/HtmlEditorTableFormats.CSS

  2. Ao receber uma mensagem perguntando o que deseja fazer com o arquivo, clique em Abrir. A folha de estilos é aberta no Office SharePoint Designer 2007.

  3. Selecione o estilo que deseja modificar, clique nele com o botão direito do mouse e clique em Copiar no menu de atalho.

    Folha de estilo com menu de atalho e o comando Copiar

  4. Ainda no Office SharePoint Designer 2007, abra (ou volte até) o layout de página ao qual deseja adicionar o novo estilo e clique em Opções no painel de tarefas Gerenciar Estilos.

    Observação : Se o painel de tarefas Gerenciar Estilos não estiver visível, clique em Painéis de Tarefas e em Gerenciar Estilos.

  5. Verifique se o comando Mostrar Estilos Usados na Página Atual está selecionado.

    Menu Opções com o comando Mostrar Estilos Usados na Página Atual selecionado

  6. No painel de tarefas Gerenciar Estilos, clique duas vezes em uma das folhas de estilos usada nesta página, como pageLayout.css, para abri-la para edição.

    Cada folha de estilos que é aplicada à página atual aparece como um título de seção na lista Css.styles no painel de tarefas Gerenciar Estilos. Você pode clicar duas vezes no título de qualquer folha de estilos para editar essa folha.

  7. Role até a parte inferior da folha de estilos, clique com o botão direito do mouse onde você deseja colar o estilo e clique em Colar no menu de atalho.

  8. Edite o estilo como desejado.

    Você deve alterar o nome do estilo se não deseja substituir o estilo existente que copiou. Por exemplo, se você deseja que o novo estilo seja denominado redHeadline, altere o código CSS a seguir.

.ms-rteCustom-ArticleTitle, .ArticleTitle{font-weight: bold;font-family: Arial;font-size: 14pt;color: #8C0000;text-transform: capitalize;}

Faça o seguinte.

.ms-rteCustom-redHeadline, .redHeadline{font-weight: bold;font-family: Arial;font-size: 14pt;color: #8C0000;text-transform: capitalize;}

Observação : O painel de tarefas Propriedades de CSS oferece um abordagem mais visual para editar o estilo. Se esse painel de tarefas não estiver visível, no menu Painéis de Tarefas, clique em Propriedades de CSS.

  1. Para salvar a folha de estilos, no menu Arquivo, clique em Salvar.

    Da próxima vez que você usar o Editor de HTML para editar um artigo criado a partir desse layout de página, o estilo modificado estará disponível para uso e aparecerá na lista Estilos.

    lista estilos mostrando o estilo modificado

Início da página

Observação : Aviso de Isenção de Tradução Automática: Este artigo foi traduzido por computador, sem intervenção humana. A Microsoft oferece essas traduções automáticas para ajudar as pessoas que não falam inglês a aproveitar os textos escritos sobre produtos, serviços e tecnologias da Microsoft. Como este artigo foi traduzido automaticamente, é possível que contenha erros de vocabulário, sintaxe ou gramática.

Expanda suas habilidades
Explore o treinamento
Obtenha novos recursos primeiro
Ingressar no Office Insider

Essas informações foram úteis?

Obrigado por seus comentários!

Agradecemos pelos seus comentários! Parece que pode ser útil conectar você a um de nossos agentes de suporte do Office.

×