iMasters | Por uma internet mais criativa e dinâmica

Quarta-feira, 07/01/2004 - 03:00 - Por Marcelo Oliveira
Seções relacionadas:

• CSS

• Imprimir
• Indicar
• Digg it
• Del.icio.us
• Twitter
• 3 comentários

Nesse artigo irei abordar um assunto muito interessante. Para determinar, por meio de CSS, como será impresso seu documento, podemos criar um estilo CSS para visualização (tela.css) e outro para impressão (imprimir.css). Vamos lá!

Muitas vezes uma página não deve ser impressa do mesma maneira que é exibida na tela do monitor. Existem diversos pontos que precisam ser editados como o tipo de fonte, cores de fundo, links etc.. Uma solução usada pelos desenvolvedores é a criação de uma página independente, com o mesmo conteúdo porém com um formato mais adaptado para ser usado nas impressoras. Outra é você criar outra Folha de Estilo com a maneira que você quer que seu documento seja impresso.

Quando você vai relacionar a seu documento uma folha de estilo, usa o seguinte código:

Para determinar um estilo para impressão de sua página, isto é, um estilo que seja aplicado apenas quando o usuário optar por imprimir o conteúdo da tela, você deverá utilizar um parâmetro chamado media, na tag link. Ele deve ser especificado como print. Veja como ficaria o HTML que faz referência a um arquivo chamado imprimir.css:

Vamos agora analisar nossas CSS, tela.css e imprimir.css aplicadas no nosso exemplo.

tela.css

p {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #0000CC;
}
h2 {
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #FF0000;
}
h5 {
color: #FFCC33;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
a:link {
color: #FF9900;
}
a:visited {
color: #FF9A00;
}
a:hover {
color: #FF9A00;
}
a:active {
color: #FF9A00;
}

Determinei que os parágrafos sejam com tamanho de fonte 12, tipo de fonte Verdana, cor de fonte - #0000CC. Determinei também que os cabeçalhos

sejam com a fonte Verdana e cor #FF0000 e por fim que os cabeçalhos

tenham fonte Verdana e cor #FFCC33. Em relação aos links , todos os estágios na cor #FF9A00. Como visto em nosso exemplo.

imprimir.css

p {
font-family: Arial, Helvetica, sans-serif;
color: #000000;
font-size: 12px;
}
h2 {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #000000;
}
h5 {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #000000;
}
a:link, a:visited {
color: #000000;
font-weight: bold;
text-decoration: underline;
}
body {
background-color: #FFFFFF;
}

Nessa CSS determinei que os parágrafos, cabeçalhos

e

, todos tenham a fonte Arial, tamanho 12 e na cor #000000. O fundo da página será #FFFFFF (branco). Já os links são escritos em negrito, cor de fonte #000000 e sublinhados. Essa configuração só atuará no caso de seu arquivo ser impresso.

Todos os artigos de Marcelo Oliveira

05/05/2005 - Editando a Propriedade Float pelo Dreamweaver 28/04/2005 - Dynamic Text 06/04/2005 - Comparando campos em um Formulário 30/03/2005 - Criando um Banner em Flash pelo Dreamweaver 14/03/2005 - Barra de Títulos 07/03/2005 - Server Behavior - Recordset Paging 28/02/2005 - Fundo com áreas arredondadas 22/02/2005 - Formatando datas inseridas pelo Dreamweaver 14/02/2005 - Editando o Server Behavior Repeat Region 12/01/2005 - Menu PullDown 22/12/2004 - Fazendo cálculos em Formulários 14/12/2004 - Sistema de busca interna 06/12/2004 - Fade Menu 23/11/2004 - Pasta Connections 11/11/2004 - Criando um menu com aba 29/10/2004 - Links dinâmicos 19/10/2004 - Sistema com MySQL e PHP, para inserção de RSS Feeds 07/10/2004 - Guestbooks pelo DW, com PHP e MySQL 27/09/2004 - Galeria de imagens 20/09/2004 - Inserindo e editando dados dinâmicos 13/09/2004 - Criando Snippets 09/09/2004 - Inserindo Sessões PHP pelo Dreamweaver 30/08/2004 - Server Behavior - Repeat Region 24/08/2004 - Inserindo dados no MySQL pelo Dreamweaver 17/08/2004 - Insira um Quiz pelo Dreamweaver 12/08/2004 - Criando Classes CSS pelo Dreamweaver 09/08/2004 - Sistema de banners em poucos cliques 02/08/2004 - Formulário de contato em DW e PHP 27/07/2004 - Recebendo um e-mail pré-configurado 19/07/2004 - Tags de Head 13/07/2004 - Painel Snippets 02/07/2004 - Fazendo um Cloaking 23/06/2004 - Álbum de fotos com vídeo aula 16/06/2004 - Extension Manager 07/06/2004 - Find and replace 31/05/2004 - Validação entre navegadores 24/05/2004 - Habilitando a Criação de Server Behaviors 18/05/2004 - Tamanho relativo x Tamanho absoluto 12/05/2004 - Inserindo um SlideShow pelo Dreamweaver 05/05/2004 - Áudio no Dreamweaver 28/04/2004 - Sistema de Autenticação de usuário em PHP pelo Dreamweaver 14/04/2004 - Criando e Validando um Arquivo XHTML pelo Dreamweaver 06/04/2004 - Manipulando imagens com o Dreamweaver MX 2004 29/03/2004 - Editando Formulários 22/03/2004 - Criando uma camada de carregamento (Loading) 17/03/2004 - Timeline no Dreamweaver MX 2004 08/03/2004 - Pop-up Transparente - Parte 02 01/03/2004 - Scroll 10/02/2004 - Templates/Modelos 02/02/2004 - Integração com Banco de Dados - Parte 02 26/01/2004 - Adicionando fontes ao DW (Vídeo aula) 19/01/2004 - Integração com Banco de Dados - Parte 01 13/01/2004 - iFrames 07/01/2004 - Configurando a impressão com CSS 05/01/2004 - Menu Rollover (Behavior + CSS) 17/12/2003 - Pop-up Transparente 09/12/2003 - Criando Listas 01/12/2003 - Layouts otimizados 25/11/2003 - Adicionando vídeo 17/11/2003 - Definindo um Site como tecnologia servidor. 10/11/2003 - Imagem de Rastreamento 03/11/2003 - Camadas (Layers)

3 comentários publicados

• 1. Ajuda

  Quarta-feira, 05/10/2005, por Eduardo Negri
  

  Muito boa ajuda, mas poderia me ajudar como faço para alterar as configurações da página(margens)
  automaticamente, sem que os usuários façam manualmente.

  Responder comentário

• 2. Impressão de tabela

  Segunda-feira, 13/02/2006, por kenia
  

  Marcelo, você sabe se é possível incluir quebra de página em uma tabela no Dreamweaver? Exemplificando:
  A página feita é apenas uma grande tabela, mas na impressão, gostaria de dividí-la em três partes, ou em três folhas para ter opção de escolher a parte a ser impressa. Sabe se é possível?

  Responder comentário

• 3. Legal!

  Quinta-feira, 11/05/2006, por Luís Humberto Teixeira Borba
  

  Olá, Marcelo! Saberia me dizer se a propriedade "page-break-before" ou "page-break-after" é compatível com o browser firefox?

  Responder comentário

Poste um comentário

(clique se não for cadastrado)

Login: Senha: Titulo: digite aqui seu comentário Site/blog: Enviar Receber notificação de novos comentários

Sobre o autor

Marcelo Oliveira trabalha com Dreamweaver desde 1999, possui a formação Macromedia Dreamweaver Developer e coordena o DWMX.

Indique para um amigo

Escreva aqui sua mensagem! ok

Tags relacionadas

seguranca lançamento mercado desenvolvimento criação linux 3g tecnologia web youtube mobile android apple iphone windows celular microsoft twitter internet google firefox php yahoo crescimento brasil ti

TI SHOP Produtos iMasters

• Lançamento: CD-ROM Treinamento Aplicado de SQL - Lançamento! Treinamento Aplicado de SQL - Aprenda a trabalhar com SQL com bancos de dados Oracle e SQL Server. São mais de 100 tópicos explicados por Mauro Pichilliani, um articulistas mais lidos do iMasters. Aproveite! Apenas R$ 69,90 no TI SHOP.
• Lançamento: Livro iMasters "O Encontro de 2 Mundos"- Este livro conta com 56 crônicas de profissionais mais admirados e influentes do mercado brasileiro de Internet. Aproveite o preço especial para leitores do iMasters. Apenas R$ 40,00 e envio imediato!
• DVD Curso Completo de Photoshop - Do conceito à finalização Lançamento! Curso Completo de Photoshop, em DVD, com mais de 230 aulas dividas em 4 módulos: conceito, básico, avançado e finalização. Apenas R$ 69,50 no TI SHOP - Frete com 50% de desconto
• DVD Javascript Starter - Curso Completo Com mais de 9 horas de vídeo-aulas, é um curso completo sobre Javascript. Ideal para quem deseja aprender a linguagem. Apenas R$ 64,90 no TI SHOP - Frete com 50% de desconto!