Imprimir uma página da web pode ser frustrante. Muitas vezes, as páginas da web impressas cortam seções de texto e anúncios de gesso sobre o resto. Outras vezes, você pode enviar uma página para a impressora e não obter nada além de um papel branco limpo. Se for importante que o conteúdo do seu site seja atraente e legível depois de enviado para a impressora, você precisa preparar sua página para a jornada para o papel.

Crie uma versão separada para impressão

1

Crie uma página HTML separada para impressão. Duplique o conteúdo principal da página inteira, reduzindo-o principalmente ao texto. Remova cabeçalhos e rodapés desnecessários (geralmente compostos de links que não teriam sentido no papel). Remova anúncios e menus das colunas laterais. Remova as imagens ou certifique-se de que elas apareçam embutidas em um tamanho apropriado. Minimize o uso de tabelas e o posicionamento explícito de elementos HTML. Use apenas fontes que você certamente encontrará em quase todos os computadores (Times New Roman, Arial, Verdana).

2

Adicione um botão "Imprimir" à página principal que leva à sua página imprimível. O botão, em HTML, pode ter a seguinte aparência:

3

Teste sua página imprimível com várias impressoras e faça os ajustes necessários.

Use CSS para tornar o conteúdo mais imprimível

1

Use duas folhas de estilo em cascata em vez de uma ao projetar seu site. Uma folha de estilo será usada para quando sua página for exibida no computador. A segunda folha de estilo será usada quando sua página for enviada para a impressora para se tornar uma cópia impressa. Defina o atributo "mídia" em seus links de folha de estilo para atribuir cada folha de estilo à sua mídia. Por exemplo:

2

Crie marcas na folha de estilo de impressão para ocultar imagens, links, cabeçalhos e outros elementos que não deveriam aparecer na página impressa. Adicione uma classe "doNotPrint" apenas à folha de estilo de impressão:

.doNotPrint {display: nenhum; }

Em seu HTML, defina o valor da classe de qualquer elemento que você deseja ocultar na impressora como "doNotPrint":

Recuso-me a ser impresso!

Elementos como esse aparecerão na tela, mas não na página impressa.

3

Adicione um estilo à folha de estilo de impressão que torna todo o texto preto em um fundo branco:

corpo {família da fonte: "Times New Roman", Arial, serif;
font-size: 12px;
color: #000000;
cor de fundo: #FFFFFF;
}

Se você definir elementos específicos como títulos (por exemplo,

) para cores não imprimíveis, você também precisará defini-las explicitamente como preto na folha de estilo de impressão.

4

Teste sua página em algumas impressoras, se possível, e ajuste o design, se necessário.