Ramki (3)
Tomasz Bartuś
Wróćmy do jakiegoś prostszego przykładu.
<frameset cols="50%,50%">
<frame src="maciek.html">
<frame src="aga.html">
</frameset>
Podgląd index.html
Jeżeli chcemy, możemy w ramkach umieścić obrazki. Poniżej znajduje się plik o nazwie world.gif. Skopiuj go do folderu roboczego /ramki.
Dodaj odpowiedni kod do pliku index.html.
<frameset cols="50%,50%">
<frame src="world.gif" width="146" height="162">
<frame src="aga.html">
</frameset>
Podgląd index.html
Uwaga! tak jak dla tagu <img>, dobrą praktyką jest deklaracja atrybutów height i width.
Spróbujmy dostosować lewą ramkę do szerokości obrazka. Najpierw zmniejszymy lewe okno do szerokości 146px. W związku z tym, że użyjemy deklaracji bezwzględnej (absolutnej), szerokość drugiej ramki powinniśmy zadeklarować za pomoca ramki elastycznej.
<frameset cols="146,*">
<frame src="world.gif" width="146" height="162">
<frame src="aga.html">
</frameset>
Podgląd index.html
W kolejnym kroku, pierwszą kolumnę podzielimy na dwa poziome rzędy. Wysokość wyższego wiersza, zgodnie z wysokością obrazka, ustawimy na 162px. Drugi wiersz zadeklarujemy elastycznie. W pierwszym wierszu wyświetlimy grafikę world.gif, a w drugim stronę Maćka.
<frameset cols="146,*">
<frameset rows="162,*">
<frame src="world.gif" width=""146" height="162">
<frame src="maciek.html">
</frameset>
<frame src="aga.html">
</frameset>
Podgląd index.html
Jak widać mamy mały problem. Obrazek nie mieści się w ramce (uwaga, w niektórych przeglądarkach efekt może nie być widoczny) i dlatego, z lewej i dolnej krawędzi ramki pojawiły się suwaki. Powstaje też pytanie: dlaczego obrazek o rozmiarach 146×162px nie mieści się w ramce o rozmiarach 146×162px? Winne są domyślne marginesy tworzone wokół obrazka. Widać je wyraźnie po lewej i w jego górnym marginesie.
Widoczność pasków przewijania, może zostać zadeklarowana jako "yes", "no" lub "auto". Wartość "yes" oznacza, że pasek przewijania będzie widoczny permanentnie (niezależnie od fizycznej wielkości treści wyświetlanych w ramce) i niezależnie od tego czy będzie potrzebny, czy też nie. Wartość atrybutu "no" oznacza, że nawet jeśli zawartość ramki będzie bardzo duża, pasek przewijania nie będzie się wyświetlał. Wartość "auto" jest domyślna. Działa w ten sposób, że posek przewijania będzie się pojawiał wyłącznie wtedy gdy będzie potrzebny.
Pozbądźmy się naszych pasków przewijania.
<frameset cols="146,*">
<frameset rows="162,*">
<frame src="world.gif" width="146" height="162" scrolling="no">
<frame src="maciek.html">
</frameset>
<frame src="aga.html">
</frameset>
Podgląd index.html
Suwaki zniknęły ale nadal nie rozwiązaliśmy problemu marginsów. Niektóre przeglądarki (np. IE, Mozilla Firefox i inne), dla poprawienia estetyki, automatycznie nadają obrazkom puste przestrzenie wokół siebie. Mamy możliwość kontroli tych marginesów za pomocą atrybutów marginwidth i marginheight. Ustawimy wartość tych zmiennych na "0".
<frameset cols="146,*">
<frameset rows="162,*">
<frame src="world.gif" width="146" height="162" scrolling="no"
marginwidth="0" marginheight="0">
<frame src="maciek.html">
</frameset>
<frame src="aga.html">
</frameset>
Podgląd index.html
Na to wygląda, że jest OK.
