Czy uważasz siebie za dobrego webdesignera, który dba o wygodę swoich gości? Pewnie tak ;)
Czy pomyślałeś kiedyś o tym, jak wygląda Twoja strona w wersji do druku? Nie? To dlaczego uważasz się za dobrego webdesignera?
Nie wiem jak Was, ale mnie strasznie wk... , znaczy się denerwuje, kiedy znajdę w sieci interesujący artykuł, lub inne interesujące dane, i z myślą o ich późniejszym przeczytaniu, zamierzam je wydrukować - Odpalam podgląd wydruku, a moim oczom ukazuje się całe menu po lewej stronie, nagłówki, czasami nawet kolorowe tło z iście kosmicznym kolorem czcionki. O reklamach przez grzeczność nie wspomnę.
Czy to taki problem poświęcić kilkanaście, a nawet kilkadziesiąt minut na stworzenie pliku CSS dla drukarki? Po co zmuszać internatów do kombinacji z ustawieniem strony do druku tak, aby zeżarła jak najmniej atramentu i nie zawierała zbędnych elementów? Zróbmy to za nich.
W zdecydowanej większość stron internetowych formatowanie ich wyglądu odbywa się za pośrednictwem pliku CSS. Przeglądarka internetowa powiadamiana jest o tym fakcie za pomocą meta tagu:
<link rel="stylesheet" href="plik.css" type="text/css" media="screen"/>
gdzie:
Nie pozostaje nic innego, jak tylko stworzyć plik CSS do obsługi drukarki, i poinformowanie przeglądarki o jego istnieniu. Postępujemy identycznie jak w powyższym przykładzie, z tą jednak różnicą, że zamiast csreen, dajemy print, a więc:
<link rel="stylesheet" href="plik2.css" type="text/css" media="print"/>
Teraz, a w sumie to wcześniej, należy stworzyć ten plik CSS. Można to zrobić nawet w zwykłym windowsowskim notatniku, ale ja osobiście wolę robić to w edytorze Ked2, który ładnie koloruje składnię.
OK. Odpalamy więc nowy dokument w edytorze.
Zacznijmy od:
Do ukrywania wszelkich elementów służy właściwość display: none;. Zastosujmy ją więc do reklam. Najpierw należy stworzyć klasę, która będzie oddziaływała na objęte nią elementy. Nazwijmy ją np. for_print i przypiszmy jej wcześniej wspomnianą właściwość, czyli piszemy pierwszą linijkę w pliku CSS:
.for_print {
display: none;
}
Teraz wystarczy zapisać nasz plik CSS o dowolnej nazwie, np. jako plik: do_druku.css i umieścić go w głównym folderze plików strony. Następnie w każdym nagłówku strony, w sekcji HEAD (pomiędzy znacznikami <head></head>), umieścić meta tag:
<link rel="stylesheet" href="do_druku.css" type="text/css" media="print"/>
Po czym każdą reklamę "otoczyć dive'em" for_print, np:
<div class="for_print">
...tutaj kod reklamy...
</div>
Od tej pory reklamy będą widoczne na ekranie monitora, lecz nie będzie ich widać na wydruku strony.
W przypadku zdecydowanej większości stron, na ich wydruku widoczne jest menu. Po co? Wystarczy artykuł i nic ponadto. Nie chcę marnować ani tuszu ani kartek na jakieś bzdety. Dbam więc o to aby goście na moich stronach nie mieli tego typu "niespodzianek".
Nie ma chyba współcześnie stron, których wygląd i układ nie byłby formatowany za pomocą CSS. Tak więc każde menu, nagłówek i inne podstawowe elementy (bloki) mają swój selektor klasy, czy id.
Jeżeli więc np. menu "objęte jest div'em" <div id="menu_glowne">...menu...</div>, do stworzonego wcześniej pliku CSS dopisujemy następną część kodu odpowiedzialnego za ukrycie menu na wydruku:
.for_print {
display: none;
}
#menu_glowne {
display: none;
}
Podobnie postępujemy z innymi elementami, jak top z obrazkiem itp.
Kiedy już usuniemy wszystkie zbędne elementy z wydruku, możemy poświęcić jeszcze chwilę czasu na zmianę wyglądu czcionki. Jeżeli coś dobrze wygląda na monitorze, nie znaczy, że musi także dobrze wyglądać na wydruku.
Dodaj do pliku CSS dla drukarki kod odpowiedzialny za wygląd tych elementów. Np.:
Jeżeli główna treść strony umieszczona jest w div'ie np. tresc, dopiszmy:
.for_print {display: none;}
#menu_glowne {display: none;}
#top {display: none;}
#tresc {
margin:0;
padding:0;
font-family: Arial, Tahoma, sans-serif;
font-size: 12px;
color: #333;
text-align: left;
line-height: 1.25;
}
h1 {font-size: 18px; color:#FF0000; font-weight: bold; margin: 10px 0 10px 0;}
h2 { font-size: 17px; color:#006f00; margin: 10px 0 0 0;}
h3 { font-size: 15px; color:#444; margin: 10px 0 0 0;}
img { border: none; padding: 0; margin:0; display: block; }
Oczywiście część odpowiedzialna za formatowanie treści strony, nagłówków i obrazków, jest przykładowa. Na swojej stronie możesz ją sformatować inaczej.
© copyright: www-4u.pl
