Helion dhtml site
/*-----------------------------------*/
H1{text-align : left; font : bold 4ex/4ex Verdana, Tahoma, Arial, "Arial Unicode MS", "Century Gothic", "Lucida Sans Unicode", sans-serif;}
H2{text-align : left; font : normal 3.4ex/3ex Verdana, Tahoma, Arial, "Arial Unicode MS", "Century Gothic", "Lucida Sans Unicode", sans-serif;}
H3{text-align : left; font : normal 2.5ex/2.2ex Verdana, Tahoma, Arial, "Arial Unicode MS", "Century Gothic", "Lucida Sans Unicode", sans-serif;}
P{text-indent: 3%;text-align : left; font : normal normal 1.9ex/2.2ex Verdana, Tahoma, Arial, "Arial Unicode MS", "Century Gothic", "Lucida Sans Unicode", sans-serif;}
.ex{font : normal normal 2ex/2.2ex "Courier New", Courier, "Lucida Console", "Lucida Sans Typewriter", "OCR-B-10 BT", "OCR A Extended", monospace; white-space : pre; margin-left: 2%;}
.sig{
font: italic 1.4ex/0.3ex arial;
}
/*------------------------------------------------------------------*/
PrintPiotrX
[strona główna] [skrypty]
Z ekranu na papier
PiotrX
W dzisiejszym świecie, coraz rzadziej do przekazywania informacji, wykorzystuje się papier. Nie ma w tym niczego dziwnego - przekazywanie informacji przez siec jest tańsze, szybsze i wygodniejsze. Niestety, niekiedy musimy informację z sieci przelać na papier, oczywiście nikt nie będzie ręcznie przepisywał treści strony - należy ją wydrukować.
Czego nie lubi HTML
Dokumenty HTML jako takie, nie są przeznaczone do drukowania, środowiskiem życia HTML jest monitor. Spróbuj wydrukować pierwszą z brzegu stronę - wygląda, co najmniej fatalnie. Niestety wypadki chodzą po ludziach, i nasza strona musi być wydrukowana. Co więc należy zrobić najpierw? Stworzyć stronę przeznaczoną do wydruku.
Stwórzmy stronę
Do ustalenia wyglądu strony najczęściej wykorzystuje się tabelki, oczywiście można się też posłużyć DIV-ami, ale wzbudziłoby to zdecydowany sprzeciw kilku przeglądarek. Jako przykład "drukowalnej" strony wybierzmy przewodnik po nieistniejącym (?) miasteczku "Obrzydłowo"
Przewodnik po mieście Obrzydłowo
Niewielu z was miało zapewne przyjemność pisania przewodnika, ja też nie miałem, ale to ma być strona przykładowa. Rozpoczniemy od stworzenia stosownego design-u. Nie chcemy przepełniać sieci zbędną grafiką, więc cały design oprzemy na tekście. Kod mógłby wyglądać w ten sposób:
<html>
<head>
<title>Przewodnik po mieście Obrzydłowo</title>
</head>
<body>
<table class="tabela">
<tr>
<td class="logo">Tutaj można by jakieś logo wstawić</td>
<td class="naglowek">Tu wstawiamy nagłówek</td>
</tr>
<tr>
<td class="menu">Tutaj będzie menu</td>
<td class="tresc">A tu jest składowana treść</td>
</tr>
</table>
</body>
</html>
Oszczędzę wam widoku źródła tego dokumentu wypełnionego treścią, pominę także kilka innych mniej istotnych zagadnień, a cały dokument można obejrzeć tutaj.
Arkusz stylów, w skrócie wygląda w ten sposób:
Table.tabela{width: 100%;}
TD.logo{width: 30 %;}
TD.naglowek{width: 70 %;}
TD.menu{width: 30%;}
TD.tresc{width: 70 %;}
Każdy zapewne zna przedstawione tu rzeczy, więc można przejść do następnego rozdziału, o mrożącym krew w żyłach tytule:
Drukowanie przewodnika
Jeżeli posiadasz drukarkę, a w niej niepotrzebną kartkę papieru - to zrób, co następuje: przejdź do strony z "przewodnikiem..." i spróbuj ją wydrukować.
Na kartce wygląda gorzej niż monitorze, więc należy go trochę podszlifować.
Szlifowanie przewodnika
DTP-owcy twierdzą, że na wydruku lepiej wyglądają czcionki typu "serif" - te takie z "daszkami" i "stópkami" przy literach, na monitorze natomiast lepiej wyglądają "sans-serif" - te bez "daszków. Tak, więc do druku użyjemy najstosowniejszej czcionki. Ale jak to zrobić - wszak na monitorze powinna być "sans-serif"... Za chwilę dowiesz się wszystkiego.
W CSS2 istnieje mechanizm, dzięki któremu możemy ustalić "medium wyjściowe" - czyli urządzenie, w którym będzie "wyświetlana" nasza strona. Cóż, jest to temat na długie dywagacje, więc postaram się przedstawić zagadnienie w skrócie. Otóż, nasza strona wyświetlona będzie na monitorze, ale może także zostać wyświetlona w telewizorze. Telewizor zwykle ma mniejszą rozdzielczość od monitora, więc strona będzie wyglądać "nieładnie". Aby temu zapobiec, nie musimy tworzyć nowej strony, wystarczy zrobić nowy (najczęściej zewnętrzny) arkusz CSS. Ów arkusz "uaktywni" się, gdy przeglądarka da mu znać, że jest strona jest wyświetlana w telewizorze - gdy będzie wyświetlana na monitorze - nic się nie stanie. Trochę zagmatwałem, ale myślę, że masz pojęcie, o co chodzi :-).
Takich "mediów wyjściowych" jest kilka - nie tylko telewizor, szczęśliwie dla nas wśród "mediów" jest także drukarka.
Urządzenie wyjściowe dla arkusza, można ustalić na kilka sposobów, aby nie mącić wam w głowach przedstawię tylko jeden (najczęściej używany):
<link href="print.css" rel="stylesheet" type="text/css" media="print">
Taki zapis z pewnością jest wam znany, dodałem tylko jeden tajemniczy atrybut - media. Można by długo opowiadać o tym niepozornym atrybucie, ale to może innym razem.
Styl dla drukarki
No dobra, stworzyliśmy już zewnętrzny arkusz o nazwie "print.css", do niego będziemy dodawać wszystkie właściwości, których nie powinno być na monitorze, a powinny być na drukowanej stronie.
Czego nam najbardziej brakowało... a, zmiany czcionek z "sans-serif", na "serif. Aby zmienić czcionkę dla drukarki, należy po prostu... wpisać jej nazwę w arkuszu drukarki:
BODY{font-family: serif;}
Czcionkę mamy już zmienioną. Teraz czas na... marginesy - wydawały się trochę za małe. Marginesy ustalamy w sposób najprostszy na świecie:
v
BODY{margin: 1 cm;}
Zauważyłeś na pewno, że styl dotyczący całej strony ustalamy dla elementu <body>. Ustaliliśmy już, co chcieliśmy, więc naszą stronę można już wydrukować.
Oczywiście to nie wszystkie możliwości jakie daje nam CSS
Możliwości jakie daje nam CSS
CSS 2.0 posiada pewne specyficzne "rozszerzenia" dla drukarki. Jednym znich, w zasadzie najważniejszym jest właściwość size:.
BOODY{size: 210mm 297mm;}
Właściwością size: ustalamy rozmiar strony, ustalamy także orientację strony - czy ma być pozioma, czy pionowa. Użyte w przykładzie wartości są odpowiednie do pionowej strony A4, więc jakby nie było standardowej. Właściwości size:, nie trzeba ustalać, aby strona się wydrukowała, ale jednak powinno się to zrobić.
Następnymi właściwościami, które należałoby poznać, będą na pewno właściwości z grupy page-break, służą one do "łamania stron", czyli ustalania w którym miejscu ma się skończyć strona:
H1{page-break-before: always;}
Można by napisać więcej o tych właściwościach... ale to wszystko jest w specyfikacji CSS2, tudzież gdziś na stronach PC-Kuriera, ale nie pamiętam gdzie :-(
Arkusz stylów dla drukarki
Arkusz stylów dla drukarki, wyglądał będzie w sposób następujący:
BODY{size: 210mm 297mm; font: serif; margin: 1cm;}
H1{page-break-before: always}
W ten oto sposób ustaliliśmy, że pojedyncza wydrukowana strona będzie miała rozmiar A4, orientację pionową, margines 1 centymetr, i czcionkę z rodziny "serif". Dodaliśmy też mały "wodotrysk" - ustaliliśmy, aby strona kończyła się przed każdym nagłówkiem pierwszego poziomu. W naszym przewodniku takie coś jest na pewno "wodotryskiem", ale w poważnych zastosowaniach bardzo się przydaje. A gdybyśmy nie ustalili, gdzie ma się kończyć strona... to nic by się oczywiście nie stało - przeglądarka skończyłaby stronę automatycznie - z danych o rozmiarze strony.
Jeżeli masz kilka wolnych kartek - to wydrukuj nasz przewodnik.
Wygląda zapewne dużo ładniej niż poprzednio:-) No cóż, można by na tym skończyć, ale dziś dla odmiany zamierzam wyczerpać temat, więc:
Dokument naprawdę drukowany
Poprzednio wydrukowana wersja naszego przewodnika zawierała kilka niepotrzebnych rzeczy, typu... nieprzydatne na papierze odnośniki, idiotyczne logo i pojawiający się na pierwszej stronie nagłówek. Trochę głupio - to wszystko musi zostać na "monitorowej" wersji... Ale nie damy się tak łatwo, i stworzymy wspaniały arkusz CSS, który za jednym, zamachem wyświetli to-co-należy na monitorze, i nie-wydrukuje tego, co nie powinno być wydrukowane. A więc do dzieła.
Rozwiązanie zaczyna Ci już pewnie świtać... ale nie jest tak jak myślisz ;-). Na ile ciebie znam pomyślałeś o czymś takim:
(arkusz z dokumentu)
Table.tabela{width: 100%;}
TD.logo{width: 30 %;}
TD.naglowek{width: 70 %;}
TD.menu{width: 30%;}
TD.tresc{width: 70 %;}
(arkusz dla drukarki)
Table.tabela{width: 100%;}
TD.logo{width: 30 %; visibility: hidden;}
TD.naglowek{width: 70 %; visibility: hidden;}
TD.menu{width: 30%; visibility: hidden;}
TD.tresc{width: 70 %;}
Zobacz sam jakie da to efekty. Jak już wspomniałem - nie ma lekko, nawet po zmienieniu rozmiarów (na 0%) poszczególnych komórek tabeli - nic się nie zmienia, tabela w dalszym ciągu jest "widoczna". Ukrycie tabeli, to nie był najlepszy pomysł, ponieważ arkusz zewnętrzny (dla drukarki) musi współpracować z arkuszem wewnętrznym (w dokumencie), a co gorsza - arkusze wewnętrzne są zawsze "silniejsze" od zewnętrznych - co oznacza, że możesz zmieniać co chcesz w arkuszu dla drukarki, a "obowiązującym" będzie i tak arkusz wewnętrzny.
Wydawałoby się, że to już koniec tej dramatycznej opowieści, i pewnie by był, gdyby nie przebiegłość projektantów CSS. Otóż, dzielni projektanci stworzyli właściwość, która nazywa się display, nasza właściwość (oprócz wielu innych rzeczy) potrafi ukryć element(y) HTML. Można by zapytać, co w tym nowego, visibility też ukrywa elementy... tak, ale visibility po prostu ukrywa element, a display - wogóle ich nie wyświetla. Zresztą zobaczcie sami...(troszkę kodu)
Table.tabela{width: 100%;}
TD.logo{width: 30 %; display:none;}
TD.naglowek{width: 70 %; display:none;}
TD.menu{width: 30%; display:none;}
TD.tresc{width: 70 %;}
Czyż to nie jest piękne ?
Niestety, obecnie przeglądaki nie obsługują CSS2 w całości, więc numerowanie stron to już inna historia.
© Wydawnictwo Helion
Wyszukiwarka
Podobne podstrony:
listart cgi id=3listart cgi id=22listart cgi id=25listart cgi id=5listart cgi id=24listart cgi id=2listscript cgi id=10listart cgi id=16listart cgi id=26listart cgi id=15listart cgi id=18listart cgi id=4listart cgi id=4listart cgi id=20listart cgi id=7listart cgi id=21listart cgi id=6listart cgi id=11listart cgi id=19więcej podobnych podstron