Kompozycja stron z użyciem nie tylko tabel

W artykule „Kompozycja stron z użyciem tabel” pisaliśmy przed laty, jak wykorzystać tabele do zbudowania układu strony. Tym razem omówimy inne – alternatywne metody układania elementów na stronie WWW.

Przypomnę, że w „tradycyjnym” dokumencie HTML realizowany jest prosty model wyświetlania – pozycjonowania elementów na stronie: wyświetlane są albo jeden obok drugiego, albo jeden pod drugim w naturalnym kierunku od lewej do prawej i z góry do dołu. Taki układ podobny jest do strumienia tekstu „wypluwanego” przez tradycyjną drukarkę igłową i łatwo można sobie wyobrazić, że pierwsze strony WWW właśnie tak wyglądały – bardziej podobne były do taśmy wydruku niż do przemyślanej graficznej kompozycji.

Rozwiązanie tradycyjne

Obecnie w przypadku zdecydowanej większości stron WWW układ elementów na stronie jest organizowany za pomocą tabel. Tabele pełnią ważną rolę: są bardzo często kompozycyjną ramą, na której rozpięte są wszystkie składniki strony: duże porcje tekstu, grafika i pola formularzy. W tej roli tabele są już dobrze „oswojone” i zdecydowana większość przeglądarek, także tych mniej popularnych nie ma kłopotów w wyświetlaniu tabel i ich rozmaitej zawartości. Tabele w roli ramy kompozycyjnej strony WWW gwarantują stabilność projektu, regularność kompozycji i przewidywalność zachowania się strony w różnych warunkach prezentacji.

Pozycjonowanie z użyciem tabeli.

Oto przykład, gdzie zagnieżdżone tabele są ramą kompozycyjną strony. Grafika została użyta jako tło tabeli i jako tło pojedynczej komórki. Oczywiście grafika może być również treścią komórki tabeli, ale jako tło „zwalnia” w komórce miejsce na tekst. W tym trybie konstruowania graficznego układu strony potrzebna jest ścisła zgodność rozmiarów tabeli i komórek z rozmiarami grafiki. Metodę tę stosuje się zazwyczaj przy ręcznym pisaniu kodu lub z użyciem tradycyjnych edytorów tekstowych. Rozwiązanie pewne, ale z punktu widzenia najnowszych tendencji rozwoju języka HTML (porównaj ze specyfikacją HTML 4.01) – raczej niezalecane.

<TABLE BORDER="0" WIDTH="100%"><TR><TD ALIGN="center">
<TABLE WIDTH="480" BORDER="0" CELLSPACING="0"
           CELLPADDING="0" BACKGROUND="a.jpg">
<TR>
 <TD HEIGHT="122" WIDTH="240">&nbsp;</TD>
 <TD ALIGN="center" WIDTH="240" BACKGROUND="b.jpg">
 <STRONG>A na niebie jeszcze tekst</STRONG></TD>
</TR>
<TR>
 <TD HEIGHT="122">&nbsp;</TD>
 <TD>&nbsp;</TD>
</TR>
 </TABLE>
</TD></TR></TABLE>

Zobacz.

Rozwiązanie z WebMajstra

Zmianę przyniosło zastosowanie arkuszy stylów (CSS). Dzięki nowej technologii formatowania stron można pozycjonować elementy na stronie niezależnie od ich „normalnego spływania” na stronie, czyli z góry na dół. Dodatkowo uzyskano możliwość ich pozycjonowania w trzecim wymiarze – można elementy nakładać jeden na drugi lub chować pod innymi. Liczba takich warstw jest praktycznie nieograniczona.

Nie będę tutaj szczegółowo wyjaśniać tej technologii – dość powiedzieć, że WebMajster ją stosuje, aby umieścić na stronie dowolny element w dowolnym miejscu projektowanej strony. Używa do tego celu znacznika <DIV>, który jest specjalnym kontenerem, powiedzmy – „pudełkiem”, do którego wkłada się własną treść – grafikę lub tekst. „Pudełko” to jest pozycjonowane absolutnie, zawsze względem lewego górnego rogu ekranu. W kodzie HTML wygląda to tak (przykład ilustruje umieszczenie mniej więcej na środku strony jednego obrazka w wymiarach typowych dla banera reklamowego):

<!--# name="Grafika1" type="picture" -->
<DIV style="position: absolute; top:165px; left:174px;
            width:400px; height:50px;">
     <img src="banner.gif" alt="Obrazek" width="400"
              height="50" border="0">
</DIV>

Gdyby obrazek nie był objęty pozycjonowanym elementem <DIV>, wyświetliłby się normalnie – czyli w górnym, lewym rogu przeglądarki. Gdyby następnie dodać kolejny obrazek (bez łamania linii znacznikiem <BR>), to zostałby pokazany z prawej strony pierwszego obrazka (rys. 1); gdyby obydwa obrazki były tak duże, że nie mieściłyby się na szerokości okna przeglądarki, to drugi obrazek byłby „złamany” do drugiego wiersza i wyświetlony pod pierwszym obrazkiem (rys. 2).

Kolejny rysunek obrazuje niepożądaną sytuację, kiedy do kodu zawierającego element pozycjonowany dodamy niepozycjonowany drugi rysunek: wtedy zostanie on wyświetlony w lewym górnym rogu przeglądarki (rys. 3).

Inaczej jest, kiedy drugi obrazek także zostanie umieszczony w pozycjonowanym „pudełku”. Wtedy, chociaż pojawił się w kodzie HTML po pierwszym, może być wyświetlony w dowolnym miejscu: nad, pod z prawej lub lewej strony pierwszego obrazka. Poniższy przykład pokazuje kod HTML dla dwóch obrazków, z których drugi wyświetlony jest na stronie przed pierwszym (rys. 4):

<!--# name="Grafika1" type="picture" -->
<div style="position: absolute; top:165px; left:174px;
     width:400px; height:50px;">
     <img src="banner.gif" alt="Obrazek" width="400"
          height="50" border="0">
</div>
<!--# name="Grafika2" type="picture" -->
<div style="position: absolute; top:26px; left:311px;
     width:109px; height:96px;">
      <img src="inny.gif" alt="Obrazek" width="109"
           height="96" border="0">
</div>

Tego rodzaju technika pozwala na jeszcze więcej: na nakładanie jednego elementu na inny (rys. 5). Właśnie dzięki tej technologii autorzy posługujący się WebMajstrem mogą swobodnie przemieszczać na stronie każde z pól oraz „podnosić” lub „opuszczać” dowolny obiekt nad lub pod inny element. W tym czasie edytor pracowicie przelicza pozycję obrazka lub pola tekstowego i generuje stosowny kod HTML. W tradycyjnym HTML-u kolejność wystąpienia poszczególnych elementów w kodzie HTML ma pewne odbicie w kolejności wyświetlania ich w przeglądarce: im „później” w kodzie HTML, tym „niżej” na stronie. W WebMajstrze jest inaczej: im „później” w kodzie HTML, tym „bardziej na wierzchu”.

Ale i to rozwiązanie ma słabości. W tym modelu każdy element <DIV> jest NIEZALEŻNIE od innnych pozycjonowany względem lewego górnego rogu ekranu. Metoda „na WebMajstra” jest pewna, zgodna ze specyfikacją języka HTML 4.01, obsługiwana przez wszystkie przeglądarki, ale nie posiada ważnej cechy: jeśli zmienimy rozmiar okna, elementy na sztywno przymocowane do określonych punktów strony WWW pozostaną na miejscu – nie będzie możliwe np. wyśrodkowanie całej zawartości strony. Oto przykład:

<div style="position: absolute; top:0px; left:0px;
     width:480px; height:244px;">
 <img src="a.jpg" border="0" width="480" height="244">
</div>
<div style="position: absolute; top:0px; left:240px;
     width:240px; height:122px;">
 <img src="b.jpg" border="0" width="240" height="122">
</div>
<div style="position: absolute; top:50px; left:280px;
     width:200px; height:150px;">
 <STRONG>A na niebie jeszcze tekst</STRONG>
</div>
W kodzie HTML każdy obiekt objęty jest osobnym elementem <DIV>

Zobacz.

Pozycjonowanie

Taki sam efekt uzyskamy za pomocą pozycjonowania relatywnego. Podobnie jak w WebMajstrze – gdy każdy element <DIV> tworzy osobną warstwę – warstwy można nakładać na siebie. Ale w tym przykładzie położenie obiektów wynika z zależności dziedziczenia – elementy <DIV> są zagnieżdżone, co tworzy relacje „rodzic – dziecko”. Dzięki temu element będący „dzieckiem” wędruje „jak za panią matką” za elementem – „rodzicem”.

W kodzie HTML obiekt objęty elementem DIV może zawierać inny element.

W źródle przedstawionego niżej przykładu zastosowano konstrukcję, w której elementem centrującym jest obiekt DIV o następujących właściwościach:

DIV.main {
    margin: auto;
    width : 480px;
    top: 0px;
    left: 0px;
}

Wewnątrz tego kontenera wstawiane są kolejne pola, które względem siebie pozycjonowane są relatywnie, to znaczy – każdy kolejny element ustawiany jest na osi x i y w odniesieniu do lewego, górnego punktu elementu poprzedniego.

W ten sposób można zastosować rozwiązanie w miarę uniwersalne, które będzie działać w większości najnowszych przeglądarek.

Zobacz.

Zakończenie?

Powyżej zaprezentowaliśmy różne przykłady – wcale nie najlepsze. W Internecie znaleźć można setki stron na temat poszukiwania najlepszych rozwiązań dla tworzenia układów stron WWW bez tabel. Jeżeli ktoś z szanownych czytelników zna dobre rozwiązanie, serdecznie proszę napisać w forum poniżej tego artykułu. 🙂

Świat niestety nie jest idealny, dlatego trzeba wspomnieć, że to co jest możliwe przy ręcznej edycji kodu HTML i pewnej orientacji w zawiłościach pozycjonowania za pomocą arkuszy stylów, byłoby niezwykle trudne do implementacji w większości edytorów typu WYSIWYG. Jednym z niewielu edytorów, który oparty jest na technologii pozycjonowania jest program Layout Master (można go pobrać z serwisu Programy.Onet.pl).

Edytor pomagający tworzyć strony WWW z wykorzystaniem techniki pozycjonowania

Do tego powyższa metoda nie jest obsługiwana przez wszystkie przeglądarki. Dlatego to rozwiązanie, chociaż jest najbardziej zgodne ze specyfikacją języka HTML 4.01 trzeba wciąż uznawać za niepewne. Zarówno edytory stron WWW jak też niektóre przeglądarki muszą do tej metody „dorosnąć” a webmasterzy dobrze opanować nową technikę tworzenia stron WWW. W artykule Nasz mały ogródek CSS przedstawię prostszą i bardziej uniwersalną metodę komponowania układu strony.

Scroll to Top