Strona do druku

autor: Patryk 'yarpo' Jar, ostatnia modyfikacja: 2007-02-22

szukaj: drukowanie strony

Bardzo często można się w internecie spotkać z linkiem 'wersja do druku'. Zastanawia mnie jednak czemu czasem wielkie firmy nie potrafią oszczędzać, zatrudniając solidnego webmastera, który nie wrzuci im w kod spaghetti, a wszystkie tego typu problemy rozwiąże jak należy...

Przy wykorzystaniu XHTML + CSS można zdziałać cuda. Przykładem tego może być strona csszengarden.com. Na stronie tej kod XHTML jest zawsze taki sam. Zmienia się jedynie arkusz stylów CSS, zmieniając całkowicie wygląd. Dlaczego więc nie wykorzystać tego do 'wersji do druku'. Ile miejsca zaoszczędzić:

nie tworzysz drugiej strony,
nie zajmujesz miejsca na serwerze niepotrzebnym plikiem
strona jest już wczytana do pamięci przeglądarki, więc następnym razem wczytuje się tylko plik css...

... oczywiście nie mówiąc o tym, że możesz się pochwalić iż masz stronę stworzoną zgodnie z najnowszymi trendami i standardami.

Nie będę tu pokazywać jak stworzyć taką stronę - to ma być krótka porada. A tej wiedzy krótko przedstawić się nie da :-). Pokaże natomiast jak załączyć dwa pliki CSS do jednego pliku XHTML. Dzięki czemu oszczędzimy czasu, miejsca i - najważniejsze - pracy [a jeśli zlecasz wykonanie strony - pieniędzy].

Oto sekcja head poprawnej strony:

<head>
<title>Tytuł strony</title>
 <meta http-equiv="content-type" content="text/xml; charset=iso-8859-2" />
 <link rel="stylesheet" href="pliki/style.css" type="text/css" media="screen" />
 <link rel="stylesheet" href="pliki/drukuj.css" type="text/css" media="print" />
</head>

Jak widzisz na załączonym listeningu dwukrotnie załączyłem plik css. Jeden z nich będzie wyświetlany przy 'screen' - czyli przy wyświetlaniu strony na monitorze komputera, a drugi będzie używany podczas druku. Nie będą one wzajemnie na siebie oddziaływać, tzn. nigdy nie będzie tak, aby została wczytana część pliku 'style.css' i część 'drukuj.css'. Albo to albo to.

Efekt działania można zobaczyć na stronie yarpo.republika.pl/www/. Zobacz jak wygląda na monitorze, a następnie wydruj ją (w MSIE mogą wystąpić pewne rozbieżności... Ale do tego już można przywyknąć).

Więcej nt. typów mediów obsługiwanych przez CSS2 można znaleźć na stronie w3.org/TR/CSS21/media.html#media-types. Miłej zabawy przy eksperymentowaniu. Powodzenia!

Patryk 'yarpo' Jar

szukaj: drukowanie strony

Osoby czytające tę publikację przeglądały również:

Chcesz zostać programistą?

Poznaj 6 kroków do efektywnej
nauki programowania!