Elementy pozycjonowania

Transkrypt

1 Elementy pozycjonowania Uwaga: nie wszystkie elementy stylów są akceptowane przez przeglądarki, w których rozpoczęto implementację stylów. Pozycjonowanie absolutne Pozycjonowanie względne Pozycjonowanie ustalone Odległości Pionowe wyrównanie Pozycja w stosie Kadrowanie Pozycjonowanie absolutne Przykład: <div style="position:absolute; left:0%; top:0%"><img src="enter.gif" width=80 height=114 border=0 alt=" "></div> Elementy pozycjonowane w sposób "absolutny" są wlewane do zarezerwowanych obszarów i zajmują tam miejsce bez względu na pozycję innych elementów. W taki właśnie sposób jest ustawiony obrazek "Enter". Elementy te mogą się nakładać na inne elementy absolutne lub względne, które akurat się tutaj znalazły. Element pozycjonowany absolutnie wypada niejako z normalnego przepływu dokumentu - ustawionych kolejno elementów. Polecenie pozycjonowania absolutnego może mieć przykładową postać: position:absolute; left:800px; top:20px Zalecane jest bardzo uważne i ostrożne stosowanie definicji absolutnych, aby nie popsuć widoku strony, zwłaszcza przy zmianach wielkości okna przeglądarki. 1

2 Pozycjonowanie względne Pozycjonowanie względne odnosi się do miejsca wstawienia definicji. Na przykład akapit mógłby mieć nadane pozycjonowanie: position:relative; left: 200px; top: 50px czyli przesunięcie o 200 pikseli w prawo i 50 pikseli w dół. Gdybyśmy zastosowali wartość ujemną, np. top: -50px, akapit zostałby przesunięty w górę. Przykłady: <p style="position: relative; left: 200px; top: 50px; width: 400px">Ten akapit...</p> Ten akapit ma pozycję względną (relative), jest odsunięty od lewego marginesu o 200 pikseli i o 50 pikseli w dół. Pole akapitu ma 400 pikseli szerokości. W rzeczywistości powinien być wyświetlany zaraz pod podaną wyżej definicją, ale pozycjonowanie spowodowało przesunięcie w prawo i w dół. Aby nie nakładał się na następny akapit, umieszczono pod nim kilka znaczników <br>. <div style="position: relative; left: 300px; width: 400px">Wykaz odsunięty o 300 pikseli i mający 400 pikseli szerokości</div> To jest pierwszy punkt wykazu To jest pierwszy punkt wykazu To jest pierwszy punkt wykazu To jest drugi punkt wykazu To jest drugi punkt wykazu To jest drugi punkt wykazu To jest trzeci punkt wykazu To jest trzeci punkt wykazu To jest trzeci punkt wykazu Kod pozycjonowania możemy umieszczać bezpośrednio w znaczniku elementu lub obejmować element znacznikami <span> lub <div>. Pozycjonowanie ustalone Pozycjonowanie ustalone (fixed) pozwala utrzymywać element w stałej pozycji w okienku przeglądarki, np. grafikę. Polecenie jest interpretowane przez Netscape'a i Operę (z uchybieniami), ale nie przez Internet Explorera. Ciekawym sposobem wykorzystania może być symulacja strony ramkowej w dokumencie nie zawierającym ramek. Możliwe jest bowiem wstawienie definicji, która rozdzieli stronę na odseparowane od siebie bloki, przy czym jeden blok będzie tkwił w miejscu, gdy drugi będzie można przewijać. W ten sposób możemy na przykład utrzymywać widoczny cały czas spis treści, gdy zawartość dokumentu jest przewijana. <div style="position:fixed; left:2%; top:0; right:75%; bottom:0"> <H1>Spis treści</h1> <A HREF=" <A HREF=" </div> 2

3 <div style="position:absolute; left:26%; bottom:0; right:0; top:0"> <H1>Tekst główny</h1> <P>to jest tekst to jest tekst to jest tekst to jest tekst to jest tekst to jest tekst to jest tekst to jest tekst to jest tekst to jest tekst to jest tekst to jest tekst to jest tekst to jest tekst to jest tekst to jest tekst to jest tekst to jest tekst to jest tekst</p> </div> I ilustracja w Netscape 6: Jak widać, dokument jest przewijany (widać to na suwaku), natomiast część ze spisem tkwi w miejscu. Odległości Pozycjonowanie absolutne i względne jest realizowane za pomocą parametrów left, right, top i bottom, którym przypisujemy jednostki miary, np. piksele, centymetry czy procenty. Jak widzieliśmy to już w podanych przykładach, możemy zastosować takie definicje, jak: <P style="position:relative; left:10%">przykładowy akapit</p> Przykładowy akapit <IMG SRC="../grafika/car1.gif" WIDTH="376" HEIGHT="188" BORDER="1" ALT="pan samochodzik" style="position:relative; right: 5cm"> 3

4 Za pomocą pozycjonowania względnego (ale i absolutnego) możemy łatwo uzyskiwać "efekty specjalne", np. nakładanie elementów: <img src="ami.gif" width=80 height=114 border=0 alt=" "> <div style="position: relative; top: -84px; left: 30px"><img src="enter.gif" width=80 height=114 border=0 alt=" "></div> <div style="position: relative; top: -168px; left: 60px"><img src="pcq.gif" width=80 height=114 border=0 alt=" "></div> Wyjaśnienie konstrukcji: Obrazki mają 80 pikseli szerokości i 114 pikseli wysokości. Blok DIV powoduje ustawianie ich jeden pod drugim. Chcemy jednak, aby kolejne obrazki były przesunięte o 30 pikseli w dół i w prawo w stosunku do poprzedniego. Pierwszy obrazek można wstawić bez definiowania pozycji. Drugi obrazek jest ustawiany pod pierwszym, Musimy więc "cofnąć" go o 84 piksele w górę (114-30), a także przesunąć w prawo o 30 pikseli. Trzeci obrazek musimy przesunąć w górę już o pikseli, czyli top: -168px. Trzeba go także przesunąć w prawo o 60 pikseli, czyli left: 60px. Jak widać, powstaje jednak "dziura", którą można zlikwidować, podciągając do góry pozostałe elementy na stronie. 4

5 W analogiczny sposób można nakładać na siebie bloki tekstu: <font size="+4" color="#ff0000">to jest jakiś tam tekst</font> <div style="position:relative; left: 200px; top: -30px"><font size="+3" color="#ffccff">to jest inny tekst</font></div> To jest jakiś tam tekst To jest inny tekst Pionowe wyrównanie Parametr vertical-align pozwala ustalać pionowe relacje elementów strony. Do dyspozycji mamy wartości: baseline, sub, super, top, text-top, middle, botom, text-bottom, długość, procent. Wartością domyślną jest baseline. <IMG SRC="../grafika/car1.gif" WIDTH="376" HEIGHT="188" BORDER="1" ALT="pan samochodzik" STYLE="vertical-align: middle">tekścik middle <IMG SRC="../grafika/car1.gif" WIDTH="376" HEIGHT="188" BORDER="1" ALT="pan samochodzik" STYLE="vertical-align: baseline"> tekścik baseline <P>Normalny akapit <span STYLE="vertical-align: 3mm"><B>podniesienie tekstu</b></span> dalszy ciąg akapitu.</p> 5

6 Normalny akapit podniesienie tekstu o 3mm dalszy ciąg akapitu. <P>Normalny akapit <span STYLE="vertical-align: -20%"><B>opuszczenie tekstu</b></span> dalszy ciąg akapitu.</p> Normalny akapit opuszczenie tekstu o 20% dalszy ciąg akapitu. <P>Normalny akapit <span STYLE="vertical-align: sub"><b>użycie sub</b></span> dalszy ciąg akapitu.</p> Normalny akapit użycie sub dalszy ciąg akapitu. <P>Normalny akapit <span STYLE="vertical-align: super"><b>użycie super</b></span> dalszy ciąg akapitu.</p> Normalny akapit użycie super dalszy ciąg akapitu. Pozycja w stosie Możemy regulować pionową pozycję w stosie nałożonych na siebie elementów (tzw. z-order). Służy do tego polecenie z-index: n. <div style="position: relative; z-index: 1"> <img src="ami.gif" width=80 height=114 border=0 alt=" "> </div> <div style="position: relative; top: -84px; left: 30px; z-index: 3"> <img src="enter.gif" width=80 height=114 border=0 alt=" "> </div> <div style="position: relative; top: -168px; left: 60px; z-index: 2"> <img src="pcq.gif" width=80 height=114 border=0 alt=" "> </div> Obrazki są układane w kolejności od z-index: 1 (na spodzie) do z-index: 3 (na wierzchu). 6

7 Analogicznie, w przypadku tekstu: <div style="position:relative; z-index: 2"><font size="+4" color="#ff0000">to jest jakiś tam tekst</font></div> <div style="position:relative; left:200px; top: -40px; z-index: 1"><font size="+5" color="#000000">to jest inny tekst</font></div> To jest jakiś tam tekst To jest inny tekst Kadrowanie Polecenie kadrowania (Internet Explorer, Netscape 6) pozwala przycinać obraz, kolejno, góry, prawej strony, dołu i lewej strony (pozycje linii tnących liczone zawsze od góry, od lewej, od góry, od lewej). Jest to obecnie możliwe jedynie dla pozycji absolutnej - position:absolute. Wycinkiem może być jedynie prostokąt rect. Na ilustracjach pokazujemy oryginał i obraz wykadrowany. Wartości określają de facto rogi prostokąta: górny-prawy i dolny-lewy. <div style="position:absolute; top:200px; clip: rect(20px 60px 114px 0px)"> <img src="ami.gif" width=80 height=114 border=0 alt=" "> </div> <IMG SRC="../grafika/car1.gif" WIDTH="376" HEIGHT="188" BORDER="1" ALT=" " style="position:absolute; top:500px; left:400px; clip:rect(0px 200px 100px 0px);"> 7

8 Wypływanie treści Gdy "pudełko", czyli naturalny obszar jakiegoś elementu jest zbyt małe, aby zawrzeć w sobie całą zawartość elementu, wypływa ona z niego. Fakt ten możemy obsłużyć za pomocą polecenia overflow. Jeśli określiliśmy pudełko, ale nie zdefiniowaliśmy wartości overflow, treść wypływa ze zdefiniowanego obszaru i rozszerza faktyczny obszar jej występowania - zdefiniowana szerokość jest zachowywana, natomiast poszerza się wysokość. Jest to naturalne zachowanie elementu, np. treści akapitu czy tytułu. <h1 style="width:250px; height:100px">zawartość tytułu stopnia 1</h1> zawartość tytułu stopnia 1 <P style="width:250px; height:100px">zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu...</p> zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu Możemy jednak określić, jak ma się zachować przeglądarka, gdy nastąpi owo "przelanie" tekstu. W poleceniu overflow możemy przyjąć jedną z czterech wartości: scroll, visible, auto i hidden. Scroll powoduje wyświetlenie pionowego i poziomego paska przewijania obejmujących zdefiniowany obszar występowania. <P style="width:250px; height:100px; overflow:scroll">zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu...</p> 8

9 zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu Visible powoduje wyświetlenie całej zawartości elementu, bez względu na zdefiniowany obszar występowania. W Internet Explorerze wylana zawartość nie nakłada się na inne elementy, w Netscape 6 - nakłada się. Wydaje się, że poprawna (i logiczna) jest interpretacja Netscape'a. <P style="width:250px; height:100px; overflow:visible">zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu...</p> zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu Auto powoduje wyświetlenie jedynie tego paska przewijania, który jest w danej sytuacji potrzebny. W przypadku akapitu będzie to jedynie pasek pionowy. <P style="width:250px; height:100px; overflow:auto">zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu...</p> zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu Hidden powoduje przycięcie widocznej zawartości akapitu do obszaru zdefiniowanego pudełka. Wylana część akapitu nie będzie widoczna. <P style="width:250px; height:100px; overflow:hidden">zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu...</p> zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu Pływanie elementów Polecenie float pozwala przepływać elementom we wskazanym kierunku w danej linii i opływać go sąsiadującym elementom z przeciwnego kierunku. Float może przyjmować wartości left, right i none. 9

10 <IMG SRC="../grafika/pcq.gif" WIDTH="80" HEIGHT="114" BORDER="1" ALT="pcq" STYLE="float: left"> Obrazek przepływający na lewo i tekst opływający go z prawej strony. Obrazek przepływający na lewo i tekst opływający go z prawej strony. <IMG SRC="../grafika/pcq.gif" WIDTH="80" HEIGHT="114" BORDER="1" ALT="pcq" STYLE="float: right"> Obrazek przepływający na prawo i tekst opływający go z lewej strony Obrazek przepływający na prawo i tekst opływający go z lewej strony <IMG SRC="../grafika/pcq.gif" WIDTH="80" HEIGHT="114" BORDER="1" ALT="pcq" STYLE="float: none"> Obrazek ustawiony bez opływania. Obrazek ustawiony bez opływania. Gdybyśmy chcieli natomiast "skontrować" opływanie elementów, możemy się posłużyć parametrem clear, który zrzuca w dół element. Przyjmuje on wartości left, right i both. <IMG SRC="../grafika/pcq.gif" WIDTH="80" HEIGHT="114" BORDER="1" ALT="pcq" style="float:left"> <p>akapit bez clear</p> Akapit bez clear 10

11 <IMG SRC="../grafika/pcq.gif" WIDTH="80" HEIGHT="114" BORDER="1" ALT="pcq" style="float:left"> <p style="clear:left">zrzucony akapit</p> Zrzucony akapit <IMG SRC="../grafika/pcq.gif" WIDTH="80" HEIGHT="114" BORDER="1" ALT="pcq" style="float:right"> <p>akapit bez clear</p> Akapit bez clear <IMG SRC="../grafika/pcq.gif" WIDTH="80" HEIGHT="114" BORDER="1" ALT="pcq" style="float:right"> <p style="clear:right">zrzucony akapit</p> Zrzucony akapit Wyświetlanie elementów Parametr display reguluje sposób wyświetlania elementów, tworząc z nich elementy blokowe, liniowe czy punkty wykazu. Lista wartości jest bardzo obszerna, ale jest interpretowana przez przeglądarki w sposób szczątkowy. Lista obejmuje: none, block, inline, list-item, run-in, compact, marker, table, inline-table, table-row-group, table-header-group, table-footer-group, table-row, table-column-group, table-column, table-cell, table-caption. Kilka działających przykładów: Dwa akapity mogą być ustawione w jednym wierszu, gdy obu nadamy wartość inline (IE5). Normalnie nie jest możliwe, gdyż akapit jest blokiem rezerwującym dla siebie odrębne "pudełko". 11

12 <P style="display:inline"><b>akapit pierwszy </B></P> <P style="display:inline"><i>akapit drugi</i></p> Akapit pierwszy Akapit drugi Podobnie, w jednym rzędzie z tekstem możemy ustawić tabelę, dodając w niej parametr display:inline.: tekst przed tabelką tekst za tabelką Element nie będący z natury blokiem, jak obrazek, możemy oznaczyć jako blok, wskutek czego nie będzie sąsiadował poziomo z innym elementem. Przykład obrazka i tekstu bez display:block Przykład oznaczenia obrazka jako bloku. jakiś tam tekst <IMG SRC="kubus.jpg" WIDTH="263" HEIGHT="236" BORDER="0" ALT="" style="display:block"> jakiś tam tekst 12

13 jakiś tam tekst display:none powoduje niewyświetlanie elementu, chociaż w źródle dokumentu w dalszym ciągu istnieje. Tutaj ma się pojawić obrazek, ale display:none usuwa go z ekranu. <IMG SRC="kubus.jpg" WIDTH="263" HEIGHT="236" BORDER="0" ALT="" style="display:none"> Widzialność elementów Parametr visibility pozwala decydować o tym, czy element jest widoczny na ekranie, czy też nie. Parametr przyjmuje wartości visible, hidden i collapse. Wartość hidden ukrywa element, zostawiając puste miejsce. Przykład: schowanie całego akapitu. <P style="visibility:hidden">ten akapit ma być niewidoczny.</p> Ten akapit ma być niewidoczny. Przykład: schowanie fragmentu akapitu objętego wycinkiem span. 13

14 John Fitzerald Kennedy został zastrzelony przez no, widzę, że jesteście ciekawi..., ale mało kto o tym wie. Wartość visible wymusza wyświetlenie elementu. Wartość collapse wymusza ukrycie elementu - obsługuje ją jedynie Netscape 6 i Opera 7. tego akapitu nie widać w Netscape 6 i Operze 7. Jednostki miary Do dyspozycji mamy dwa rodzaje jednostek miary - absolutne i relatywne. Przykładem miary absolutnej jest centymetr, relatywnej - piksel. Jednostkę miary podajemy zawsze bezpośrednio po liczbie, np. 1cm, 0,1in itd. Miary absolutne in - cale, 1in = 2.54cm cm - centymetry, 1cm mm - milimetry, 1mm pt - punkty, 1pt = 1/72in pt - pika, 1pc = 12pt Miary relatywne em - wysokość czcionki elementu ex - x-height - wysokość litery x px - piksele, w odniesieniu do rozdzielczości tła Oddzielnie wyróżnia się wielkości procentowe oraz absolutne (np. x-large) i relatywne (np. smaller) miary czcionek. Przykłady wielkości absolutnych <H1 style="font-size: 1.5cm">Tytuł stopnia 1</H1> Tytuł stopnia 1 <p style="font-size: 2pc">Akapit 2 pika</p> Akapit 2 pika <ul style="margin-left: 30mm"> <li>punkt 1</li> <li>punkt 2</li> <li>punkt 3</li> </ul> 14

15 punkt 1 punkt 2 punkt 3 Przykłady wielkości relatywnych <p style="text-indent: 3em; font-size: 12pt">Akapit z czcionką 12-punktową, o wcięciu trzykrotnej wysokości czcionki.</p> Akapit z czcionką 12-punktową, o wcięciu trzykrotnej wysokości czcionki. <p style="text-indent: 3em; font-size: 15pt">Akapit z czcionką 15-punktową, o wcięciu trzykrotnej wysokości czcionki.</p> Akapit z czcionką 15-punktową, o wcięciu trzykrotnej wysokości czcionki. <p style="text-indent: 3ex; font-size: 12pt">Akapit z czcionką 12-punktową, o wcięciu trzykrotnej wysokości litery.</p> Akapit z czcionką 12-punktową, o wcięciu trzykrotnej wysokości litery. <p style="text-indent: 3ex; font-size: 15pt">Akapit z czcionką 15-punktową, o wcięciu trzykrotnej wysokości litery.</p> Akapit z czcionką 15-punktową, o wcięciu trzykrotnej wysokości litery. <p style="text-indent: 100px; font-size: 12pt">Akapit z czcionką 12-punktową, o wcięciu 100 pikseli.</p> Akapit z czcionką 12-punktową, o wcięciu 100 pikseli. Stosowanie miar relatywnych ma sens przede wszystkim w sytuacjach, w których chcemy zachować proporcje wyświetlania różnych elementów. Na przykład na 14-calowym monitorze piksel ma inną wartość w centymetrach w rozdzielczości 800x600 niż 1024x768. Kursory Internet Explorer od wersji 4, Netscape 6 i Opera 7 interpretują definicje kursorów. Zauważmy, że przesunięcie kursora nad jakiś element strony WWW powoduje niekiedy zmianę jego kształtu. Na przykład kursor nad odsyłaczem ma kształt "łapki", nad tekstem - kształt wielkiej litery I, nad grafiką - kształt strzałki. Okazuje się, że możemy sami wybrać kształt kursora, dając dodatkową informację czytelnikowi strony. Definicja taka nie wpływa na wyświetlanie strony w innych przeglądarkach, więc jej użycie jest bezpieczne. Kursor możemy definiować w stylach, przypisując jakiś kształt każdemu elementowi określonego rodzaju na danej stronie, czy też doraźnie tworzyć styl i przypisywać go wybranej grafice, tytułowi itd. 15

16 Definicje są niezmiernie proste. Wystarczy jedynie napisać w stylu cursor:styl_kursora. Zaprezentujmy pierwszy z brzegu przykład, w którym przesunięcie kursora myszki nad grafikę spowoduje wyświetlenie kursora ze znakiem zapytania. <img src="lupus.gif" width=176 height=200 alt="" border="0" style="cursor:help"> Oczywiście definiowanie kursorów nie jest tylko zwykłą zabawą. Jeśli jakiś element powoduje wyświetlenie kursora ze znakiem zapytania, może to sugerować istnienie jakiejś pomocy. Podobnie, strzałka zwrócona we wskazanym kierunku może zwracać uwagę na inny obiekt na stronie. Oto cała lista kursorów, wraz z przykładami. Aby zobaczyć dany styl kursor, wystarczy przesunąć kursor myszki nad wyraz. Przy "resize" n=north, s=south, w=west, e=east. cursor:crosshair cursor:hand cursor:move cursor:e-resize cursor:ne-resize 16

17 cursor:nw-resize cursor:n-resize cursor:se-resize cursor:sw-resize cursor:s-resize cursor:w-resize cursor:text cursor:wait cursor:help 17

18 cursor:default cursor:auto Default, jeśli dobrze zauważyłem, generuje zawsze typowy kształt kursora myszki, czyli strzałkę. Auto jest zgodne z domyślnymi wartościami przeglądarki. Możliwe jest też wykorzystanie kursora w formacie.cur (statyczny) lub.ani (animowany). Oto przykłady (przesuń kursor myszki nad odsyłacz) - efekt działa na pewno w Internet Explorerze 6: Kurs HTML Kod definicji: <a HREF=" style="cursor:url('banana.ani');">kurs HTML</A> Kurs HTML <a HREF=" style="cursor:url('hourglass.cur');">kurs HTML</A> Własności drukowania Wbrew przewidywaniom, że biuro bez papieru zawładnie bez reszty naszą codziennością, papier i drukarki mają się całkiem dobrze. Choć Internet jest medium w pełni elektronicznym, często się zdarza, że pobrane informacje chcemy przelać na papier, który możemy łatwo przenosić, choćby do łóżka czy wanny :-) Nic więc dziwnego, że WWW Consortium przykłada do problemu drukowania należną wagę i rozwija poświęcone mu fragmenty specyfikacji nowej wersji języka HTML. Fragmenty tej specyfikacji obsługują częściowo Internet Explorer od wersji 4 oraz Opera od wersji 3.5. Nowe własności pozwalają autorowi strony określić, jak ma być drukowany dokument HTML. Wyobraźmy sobie, że tworzymy duży, jednostronicowy dokument, który dzielimy na logiczne bloki, np. rozdziały. Gdyby czytelnik takiego dokumentu zechciał go wydrukować, przeglądarka wydrukuje go "jak leci", strona po stronie, bez zważania na te logiczne fragmenty. Nowa wersja języka HTML pozwala jednak wstawić odpowiednie otagowanie, które nakaże drukarce "przełamywać" strony. Odpowiada to znanej z bardziej zaawansowanych edytorów tekstów funkcji twardego przełamania strony (zazwyczaj kombinacją Ctrl-Enter), czyli wymuszenia nowej strony. Do drukarki zostanie po prostu wysłany sygnał, że w tym miejscu należy przestać drukować stronę, choćby pozostało jeszcze na niej wolne miejsce. Drukowanie zostanie podjęte dopiero na następnej stronie. Jest to wygodne rozwiązanie, gdyz w ten sposób wydruk będzie bardziej przejrzysty - lepiej jest przecież czytać początek rozdziału od nowej strony. 18

19 Strony możemy przełamywać za pomocą dwojakiego rodzaju poleceń: page-break-before: wartość spowoduje przełamanie strony PRZED otagowanym elementem. page-break-after: wartość spowoduje przełamanie strony PO otagowanym elemencie. Polecenia przyjmują cztery wartości: auto, always, left, right. Zachowanie Internet Explorera nie jest jednoznaczne w przypadku auto, left i right (specyfikacja jest ciągle w fazie opracowania). Funkcjonuje jednak bez kłopotu najważniejsza wartość - always. Załóżmy, że tytuły rozdziałów w naszym dokumencie są oznaczone tagiem tytułu pierwszego stopnia, czyli H1. Życzymy sobie, aby drukarka przerywała drukowanie strony tuż przed tytułem pierwszego stopnia i przenosiła drukowanie na następną stronę. Wystarczy w takim razie opatrzyć każdy tytuł odpowiedniem otagowaniem (styl lokalny): <H1 style="page-break-before: always">rozdział 4</H1> Możemy skorzystać także ze stylu zagnieżdżonego i umieścić odpowiednią deklarację jeszcze w ramach nagłówka HEAD. Można jednak postąpić inaczej. Każdy z rozdziałów możemy zakończyć np. poleceniem: <p style="page-break-after: always">treść ostatniego akaptu w rozdziale</p> Teoretycznie polecenia powinny działać w stosunku do elementów blokowych poza tabelami. Obecnie nie funkcjonuje ono jednak np. w odniesieniu do <br>, czyli przełamania wiersza. Definując przełamania możemy się także posłużyć klasami. W definicji stylu zagnieżdżonego (w ramach HEAD) możemy na przykład zdefiniować klasę:.nowastrona {page-break-after: always} a następnie przywołać tę klasę w ostatnim akapicie rozdziału: <p class=nowastrona>treść ostatniego akapitu w rozdziale</p> Drukarka zakończy druk strony po tak zdefiniowanym akapicie i rozpocznie drukowanie dalszego ciągu dokumentu już na następnej stronie. Przeglądarka Opera obsługuje także widows i orphans. Pierwsze polecenie informuje przeglądarkę, ile co najmniej wierszy ma być wydrukowanych na górze strony, natomiast drugie informuje o tym, ile minimum wierszy ma być pozostawionych na wydruku na dole strony. Decydują tutaj względy estetyki. <p STYLE="widows: 2">jakiś tam akapit leci...</p> <p STYLE="orphans: 4">jakiś tam akapit leci...</p> Oto podgląd wydruku w Operze, gdzie styl <p STYLE="widows: 4"> w ostatnim akapicie wymusił przeniesienie 4 wierszy na ostatnią stronę, gdy bez niego przeglądarka wydrukowałaby tylko dwa wiersze. 19

20 20