Dica: CSS e o media print
12/03/2008 23:09
| Por: Diego Henrique Magrin
Muitos desenvolvedores utilizam CSS para modelar o estilo de seus sites, personalizando suas divs, seus textos, cores em geral, etc. Mas e quando é necessário fazer uma impressão de página? E pior, o que fazer quando tenho uma página de fundo escuro e as letras claras por exemplo? Muitos acabam criando uma cópia da página somente para a impressão do conteúdo gerando apenas mais um arquivo no servidor desnecessário.
Há no CSS um recurso pouco utilizado pelos desenvolvedores: o Media Print. Com o Media Print, você cria uma folha de estilos especificamente para tratar de como ficará o layout de seu site na hora que for impresso, isso facilita muito a impressão do site, pois você pode ocultar itens desnecessários como banners de publicidade, menus, etc além de poder trocar as cores para que fique uma impressão bem clean.
Vamos mostrar simplificadamente como uma folha de estilos do tipo media print funciona. O primeiro passo é criar um arquivo CSS para manipular os elementos que serão ou não impressos, e definir quais elementos não serão impressos no site. Por exemplo, se meu site possui uma DIV com id="publicidade" e eu quero que ela não seja mostrada na impressão, utilizamos a declaração display:none para ocultar o elemento na hora da impressão, como no exemplo abaixo:
#publicidade{
display:none;
}
O mesmo serve para classes, isto é comum também quando colocamos uma tag P com o texto Clique aqui para imprimir e quremos ocultá-la na impressão, é só definir o estilo desejado.
Após fazer todos os ajustes na folha de estilos de impressão, preciamos fazer a chamada dela na página que será impressa, colocando o seguinte trecho antes da tag </head>
<link rel="stylesheet" href="impressao.css" type="text/css" media="print">
enjoy !
Novo site em nosso Portfólio
03/03/2008 16:55
| Por: Diego Henrique Magrin
Nesta última semana de fevereiro, a paróquia do Imaculado Coração de Curitiba teve seu site concluído e disponibilizado na rede mundial de computadores. O site que ainda está parcialmente "cru" de conteúdo mas contém várias informações sobre a Paróquia.
O Layout do site foi desenvolvido baseado nas cores da Paróquia, basicamente duas cores RGB: 237,175,112 e 248,243,220 e com texturas retiradas da infra-estrutura da própria igreja, o que tornou a página muito bem relacionada com a igreja.
Para quem quiser conhecer o trabalho realizado é só acessar o site www.paroquiacoracaodemaria.com.br
Tags: site layout textura cores
Portfólio
Bem-vindo ao blog do Claretiano Web Center, o núcleo de desenvolvimento web de toda Ação Educacional Claretiana