Ušetřete návštěvníkům svých stránek barvu v tiskárně a vytvořte speciální šablonu pro tisk.
Ušetřete návštěvníkům svých stránek barvu v tiskárně a vytvořte speciální šablonu pro tisk.
Podívejte se na ukázku použití šablony (na stejné stránce):
Na monitoru:
Na papíře po vytisknutí:
Sami vidíte, jak se dá vzhled jednoduše změnit. Jak to celé funguje? Základem je dobře napsaný kód v (X)HTML s veškerou grafikou tvořenou přes CSS.
Do hlavičky vložíte tyto dva řádky:
<link rel="stylesheet" href="monitor.css" type="text/css" media="all" />
<link rel="stylesheet" href="tisk.css" type="text/css" media="print" />
Nyní vytvoříte dva CSS soubory - monitor.css a tisk.css. Do souboru monitor.css zapíšete grafiku pro všechna zařízení kromě tiskárny a do druhého souboru (tisk.css) vzhled pro tiskárnu. Vzhled pro tiskárnu by neměl obsahovat téměř (nebo raději úplně) žádnou grafiku. Nejlepší je pouze prostý černý text.
Jak odstraním grafické prvky? Použijete CSS atribut display: none. Ukázka:
V souboru monitor.css: #logo {margin-bottom: 0px}
a v souboru tisk.css: #logo {display: none}
Stejným způsobem je možné nahradit grafické logo textovým, které se zobrazí jen na tiskárně, a na monitoru zůstane grafické logo. Atribut display: none pak použijete dvakrát. Ukázka:
V souboru monitor.css:
#graficke {border-width: 0px}
#textove {display: none}
a v souboru tisk.css:
#graficke {display: none}
#textove {text-align: center}
Pomocí atributu display: none se dá udělat i mnoho dalších zajímavých věcí. Fantazii se meze nekladou.
Autor: Rex
2024 ©