. - wyzsza szkola jazdy

Wyższa szkoła jazdy

Ile razy zdarzyło się, że chcieliśmy umieścić jakiś element np. tabelę, linię lub plik graficzny na stronie, jednak bez powodzenia? Okazywało się, że w naszej plątaninie tabelek trzeba wstawić jeszcze kilka nowych: tu powiększyć, tu zmniejszyć, tam usunąć, i jeszcze... itd. W efekcie gubiliśmy się w kodzie i zaczynaliśmy wszystko od początku.

Z pomocą przychodzi nam CSS. W końcu style, to nie tylko narzędzie przydatne do formatowania tekstu. Wykorzystując je, możemy dowolnie ustawiać nasze elementy na stronie www.

Sprawa jest wbrew pozorom banalna, aż trudno uwierzyć, że tak mało serwisów stosuje to rozwiązanie. Wolą postawić na ogromną liczbę tabelek, przez co znacznie zwiększa się czas ładowania strony.

Praktyka

Zapewne kojarzycie dwa znaczniki html:

<DIV>

i

(nie posiadają one żadnych właściwości jak np.

który pogrubia tekst). Pomiędzy nimi możemy umieścić dowolny element strony np.


<SPAN>

<img src="obrazek.gif">

</SPAN>

Oczywiście nie stoi nic na przeszkodzie, żeby była to tabelka:


<SPAN>

<table>

<tr>

<td>Zawartość tabelki...</td>

</tr>

</table>

</SPAN>

Teraz wyobrazimy sobie, że wszystko, co znajduje się pomiędzy  jest jedną całością, którą można umieścić w dowolnym miejscu na stronie. Do znacznika  przypisujemy style:


position:absolute;

left:50;

top:50;

Całość wygląda tak:


<SPAN style="position:absolute; left:50px; top:50px">

<table>

<tr>

<td>Zawartość tabelki...</td>

</tr>

</table>

</SPAN>

W ten sposób tabelkę umieściliśmy w odstępie 50 pikseli od lewej i górnej krawędzi okna przeglądarki. Prawda, że łatwe? Całość możemy dowolnie przesuwać.

Plusy

Głównym plusem, z całą pewnością, jest możliwość panowania nad układem strony. Nie jesteśmy już ograniczeni do wykorzystania tabelek. Dzięki tej technice byłem w stanie osiągnąć zaplanowany efekt, podczas pracy nad serwisem jednego z moich klientów.

Krótszy czas ładowania

W połączeniu naszej wyobraźni i CSS, możemy znacznie przyśpieszyć ładowanie naszego serwisu. Powiedzmy, że cała nasza strona znajduje się w jednej dużej tabelce. W artykule pt."Projektowanie stron www, które nie irytują wszystkich" Piotr Majewski napisał:

"Przeglądarki są tak skonstruowane, że nie pokażą Ci zawartości żadnej z komórek tabeli, dopóki nie wczytają całej tabeli."

Większość stron tworzy się w jednej dużej tabeli. Zaczyna się ona zaraz po BODY kończy zaraz przed /BODY. W ten sposób skazuje się odwiedzającego na czekanie ściągnięcia się całej strony."

Jednak my, dla wygody odwiedzającego zrobimy ciekawą sztuczkę. Cały tekst umieścimy pomiędzy znacznikiem BODY a TABLE (otwierającym główną tabelkę naszej strony).

Oczywiście cały tekst umieszczamy podobnie, jak zrobiliśmy to powyżej. Całość może wyglądać następująco:


<HTML>

<BODY>



<SPAN style="position:absolute; top:120px; left:200px;

width:300px; padding:2px;">

Tutaj znajduje się cały tekst...

</SPAN>



<TABLE>

...

</TABLE>



</BODY>

</HTML>

W ten sposób, na samym początku załaduje się tekst. Podczas gdy odwiedzający naszą stronę będzie go czytał, cały układ ramek będzie się powoli wczytywał. Odległość top i left ustawiamy tak, aby tekst znajdował się w wybranym przez nas miejscu.

Mam nadzieję, że przedstawiłem ciekawą alternatywę dla tabelek, która może dużo wnieść w Wasze strony.