O DRUKOWANIU

Prawie zawsze najpierw tworzy się stronę z treścią wyświetlaną na ekranie a dopiero potem myśli się o jej wydruku z pominięciem menu, paska bocznego oraz innych zbędnych informacji. Opcja Druk jest niezbędna na stronach edukacyjnych zwłaszcza gdy zawierają specjalistyczne informacje np. o posługiwaniu się programem graficznym, gdyż wtedy bardzo pomocnym jest posiadanie ich na papierze.

Brak opcji drukowania zmusza do wejścia w kod HTML, zaznaczenie określonej części tekstu, skopiowanie jej do schowka, przeniesienie do edytora tekstu, skorzystanie z opcji Wklej a następnie do usunięcia z treści znaczników HTML. Pisząc tego typu teksty na ekran, tworząc przyjazne dla użytkowników strony należy tworzyć je z myślą o wydruku przy pomocy nowego drugiego arkusza stylów do wydruku, stąd opis kolejnych czynności na przykładzie tej strony.

PRZYKŁAD zmiany: kroju, rozmiaru, koloru czcionki i tła, ukrycie zbędnych treści, nowe parametry.

Opis obejmuje zmiany; kroju, rozmiaru, koloru czcionki i tła, ukrycie zbędnych treści, nowe parametry oraz skrypt wydruku. Deklarujemy styl osadzony <style type="text/css"> w którym możemy umieścić także style ekranowe. Style formatujące wydruk umieszczamy w bloku @media print { ... tu reguły CSS dla wydruku ... }. Deklarujemy w body nowy krój czcionki stosowany w wydrukach, czarny tekst i białe tło. Słowo !important umieszczone na końcu deklaracji oznacza jej ważność, która rozwiązuje wszelkie konflikty specyficzności. Deklaracja display:none; usuwa z wydruku nagłówek, pasek nawigacji, boczny pasek i stopkę. Deklaracje float:none; width:auto; usuwają działanie float:left; i width:600px z zewnętrznego arkusza stylów tworzącego lewą kolumnę. Kolejne selektory zawierają bloki deklaracji z nowymi stylami wydruków, także z marginesami określanymi w procentach. Wielkość czcionki deklarujemy w jednostkach pt. Wydruk można uzyskać poleceniami Plik/Drukuj z górnego paska przeglądarki lub przyciskami Ctrl+P.

Umieszczone na końcu strony polecenie Drukuj sygnalizuje specjalny plik dla wydruku oszczędzający tusz. Krótki skrypt javascript umieszczony jest między znacznikami <![CDATA[ ... ]]> jedynie w tym celu aby nie dać powodu do sygnalizacji 4-ech błędów przez program walidacji. Ostatni znacznik zamyka deklaracje stylu osadzonego. Ten sam efekt można uzyskać deklarując styl zewnętrzny dla wydruków, stosując te same reguły CSS, co lepiej lub gorzej opisuje podana obok literatura. Z uwagi że wydruk dotyczy tylko tej jednej strony zastosowano styl osadzony, także z tego powodu że podana literatura opisuje głównie style zewnętrzne. Dłuższe wydruki wymagają łamania stron z użyciem reguł page. Inny przykład wydruku podano na stronie   grafika tła 2kolumny 

 
<style type="text/css">
 @media print 
 { 
   body {font:"Times New Roman", Times, serif;}
   * {color:black !important;  background:white !important;}
   #head, #nawigo, #sidebar, #footer {display:none;}
   #content {float:none; width:auto; text-align:justify; line-height:16pt;}
   h3 {font-size:18pt; margin-left:6%;}
   p {font-size:12pt; margin-left:6%; margin-right:4%;}
   pre {font-size:12pt; margin-left:6%; }         
 }
  <![CDATA[
    <script type=text/javascript"> 
      window.print();
    <script />
  ]]>	
</style>

Drukuj