Ramki (2)
Tomasz Bartuś
Tag <frameset> nie robi więc niczego innego jak dzielenie okna przeglądarki na części. Ściślej rzecz biorąc, określa on sposób jego podziału. Zapamiętajmy, że zawsze, gdy chcemy podzielić okno przeglądarki na jakieś części, musimy użyć tagu <frameset>. Czy możemy podzielić okno na więcej niż 2 części? Tak! - wystarczy, że podamy jak podział ma zostać dokonany i dla każdej ramki zadeklarujemy plik, który ma się w niej wyświetlić.
<frameset cols="20%,20%,20%,20%,20%">
<frame src="maciek.html">
<frame src="aga.html">
<frame src="piotrek.html">
<frame src="stefan.html">
<frame src="magda.html">
</frameset>
Podgląd index.html
To dość oczywiste, że zamiast kolumn o tej samej szerokości, możemy zastosować różne rozmiary, zależne od użytkownika. Wystarczy tylko upewnić się, że arytmetyczna suma wszystkich kolumn jest równa 100%.
<frameset cols="10%,20%,30%,15%,25%">
<frame src="maciek.html">
<frame src="aga.html">
<frame src="piotrek.html">
<frame src="stefan.html">
<frame src="magda.html">
</frameset>
Podgląd index.html
Zamiast podziału na kolumny (cols) możemy okno podzielić na wiersze (rows).
<frameset rows="10%,20%,30%,15%,25%">
<frame src="maciek.html">
<frame src="aga.html">
<frame src="piotrek.html">
<frame src="stefan.html">
<frame src="magda.html">
</frameset>
Podgląd index.html
Wróćmy do przykładu z dwoma równymi kolumnami, każda o szerokości po 50% okna przeglądarki.
<frameset cols="50%,50%">
<frame src="maciek.html">
<frame src="aga.html">
</frameset>
Podgląd index.html
Zamiast deklaracji procentowej (względnej - względem wielkości okna przeglądarki), wielkość ramek możemy deklarować w sposób bezwzględny w pikselach (np. "50"). Dodatkowo mamy do dyspozycji tzw. ramkę elastyczną ("*"). Oznacza ona pozostałą resztę przestrzeni.
<frameset cols="50,*">
<frame src="maciek.html">
<frame src="aga.html">
</frameset>
Podgląd index.html
To ważny moment naszych rozważań. Załóżmy, że mamy utworzyć ramkę z kolumnami o szerokości 200px po lewej i 600px po prawej stronie okna przeglądarki. Dysponujemy ekranem o rozdzielczości 800×600. Po utworzeniu pierwszej kolumny o szerokości 200px, pozostałe 600px wolnego ekranu zostanie wykorzystane na drugą ramkę. Wszystko gra. Niestety tylko na tym monitorze...
Mój ekran ma ustawioną rozdzielczość 1024×768px. Po odjęciu 200px szerokości lewej ramki, na drugą ramkę pozostanie przestrzeń o szerokości 824px. Tymczasem nasza prawa ramka będzie miała zadeklarowane tylko 600px szerokości. Pozostanie nam 224px niewykorzystanej przestrzeni. Przeglądarka nie wiedząc co ma w nich wyświetlić, najprawdopodobniej wypełni je brzydkim szarym kolorem. Wniosek: Jeśli używamy w deklaracji <frameset> wymiarów bezwzględnych (wyrażonych w pikselach), ZAWSZE co najmniej dla jednej ramki należy użyć deklaracji "*" (ramka elastyczna). W ten sposób, niezależnie od rozdzielczości monitorów, wszystko będzie dobrze wyglądało i dla wszystkich ramek wystarczy miejsca.
Jeżli podzielimy okno za pomocą procentów (<frameset cols="15%,85%">), wszystko będzie prawdopodobnie wyglądać dobrze. Ale..., przy innych rozdzielczościach ekranu, strona będzie wyglądała inaczej. Dlaczego inaczej? Odpowiedź jest prosta. 15% i 85%, czego? - poziomej rozdzielczości ekranu. Oznacza to, że ramki (po zastosowaniu deklaracji względnej), w przypadku różnych rozdzielczości ekranu, będą miały nieco inny wygląd. Jak rozwiązać ten problem? Wystarczy podać bezwzględną wymiar lewego okna i zrobić prawe okno elastyczne (takie jak <frameset cols="120,*">). Bingo. Problem rozwiązany.
Dobrą praktyką jest aby przy zastosowaniu deklaracji bezwzględnych, wymiar ramki deklarowanej w pikselach był odrobinę większy niż trzeba. Dodatkową przestrzeń można wykorzystać na ładne marginesy wokół tekstu lub obrazków. Np., w przypadku ramki o szerokości 100 pikseli dobre rezultaty daje ok. 120 lub 125 pikseli.
<frameset cols="50,*,2*">
<frame src="maciek.html">
<frame src="aga.html">
<frame src="piotrek.html">
</frameset>
Podgląd index.html
Powyższy kod można zinterpretować w następujący sposób: Tworzymy 3 ramki kolumnowe. Pierwsza od lewej ma mieć szerokość 50px. Reszta przestrzeni strony zostanie podzielona pomiędzy ramki 2-gą i 3-cią, w ten sposób, że ramka 2 będzie obejmowała szerokość 1/3 reszty dostępnej szerokości, a ramka 3-2/3 tej przestrzeni. W 1-wszej ramce pojawi się Maciek, w 2-giej - Aga, a w 3-ciej - Piotrek.
To istotne aby zauważyć, że istotna jest kolejność deklarowania źródeł plików do wyświetlenia w odpowiednich ramkach. Pierwszy tag <frame> wyświetli plik w 1-wszej ramce zadeklarowanej w atrybucie tagu <frameset> (50/maciek), drugi tag <frame> wyświetli plik w 2-giej ramce (*/aga), a 3-ci w 3-ciej (2*/piotrek).
Co zrobić, gdy chcemy podzielić ramkę Piotrka poziomo na dwa rzędy? Tak jak wcześniej powiedziano, jeśli chcesz, podzielić jakąś przestrzeń na części, musimy użyć tagu <frameset>. Usuwamy deklarację <frame> Piotra i zastępujemy ją parą znaczników <frameset>.
<frameset cols="50,*,2*">
<frame src="maciek.html">
<frame src="aga.html">
<frameset>
</frameset>
</frameset>
Na tym etapie zadeklarowaliśmy przeglądarkom: Utwórzcie 3 ramki. Pierwszą o szerokości 50px. Resztę podziel pomiędzy ramki 2-gą i 3-cią ale tak aby ramka 3-cia była 2 razy szersza od 2-giej. Wyświetl w pierwszej kolumnie Macieja, w drugiej Aga, a 3-cia ramka ma zostać podzielona. Teraz musimy zadeklarować w jaki sposób ma zostać podzielona 3-cia ramka.
Chcemy podzielić ją poziomo.
<frameset cols="50,*,2*">
<frame src="maciek.html">
<frame src="aga.html">
<frameset rows="50%,50%">
</frameset>
</frameset>
Myślę, że do wyższego rzędu powróci Piotr, a do dolnego wprowadzimy Stefana.
<frameset cols="50,*,2*">
<frame src="maciek.html">
<frame src="aga.html">
<frameset rows="50%,50%">
<frame src="piotrek.html">
<frame src="stefan.html">
</frameset>
</frameset>
Podgląd index.html
Proste, prawda? Podzielmy może jeszcze pierwszą kolumnę (z Piotrem) na trzy poziome części. Pierwszy wiersz niech ma wysokość 50px. Pozostałe dwa niech będą podzielone na pół. Dołóżymy Piotra do wszystkich trzech poziomych ramek.
<frameset cols="50,*,2*">
<frameset rows="50,*,*">
<frame src="maciek.html">
<frame src="maciek.html">
<frame src="maciek.html">
</frameset>
<frame src="aga.html">
<frameset rows="50%,50%">
<frame src="piotrek.html">
<frame src="stefan.html">
</frameset>
</frameset>
Podgląd index.html
Strona nie wygląda może rewelacyjnie, ale za to dobrze ilustruje możliwości ramek. Ogólnie można przyjąć, że na projektowanych stronach, dobrze jest stosować umiarkowaną liczbę ramek np. 3.
Zastanówmy się jeszcze, co z użytkownikami Internetu korzystającymi z przeglądania stron interentowych w trybie tekstowym (bez grafiki). Mimo, że w większości przypadków, użytkownicy będą w stanie zobaczyć, ramki, należy zadbać także o internautów pracujących z niszowymi przeglądarkami nie obsługującymi ramek. Możemy dla nich przygotować odpowiedni komunikat z informacją, że ta strona WWW została przygotowana w technologii ramek.
<frameset cols="50,*,2*">
<frameset rows="50,*,*">
<frame src="maciek.html">
<frame src="maciek.html">
<frame src="maciek.html">
</frameset>
<frame src="aga.html">
<frameset rows="50%,50%">
<frame src="piotrek.html">
<frame src="stefan.html">
</frameset>
</frameset>
<noframes>
<body>
Strona WWW została wykonana z wykorzystaniem ramek.
Proponuję zmianę przeglądarki.
</body>
</noframes>
