Ramki#
FRAMESET#
<frameset>...</frameset>
Polecenie, z dodatkowymi parametrami, stanowi ramy dla całej struktury strony z ramkami. Należy je wpisywać zawsze bezpośrednio po znaczniku zamykającym </head>. Element frameset dzieli okno przeglądarki na odrębne pasy (pionowe lub poziome). W jednym kroku można utworzyć dowolną liczbę pasów, jednak wszystkie one muszą być tego samego typu (poziome lub pionowe). Każdy z nich może też podlegać kolejnym, dowolnym podziałom (na zasadzie zagnieżdżenia następnych znaczników <frameset>).
Plik, w którym umieszczamy element frameset często nazywany jest plikiem bazowym struktury ramek.
Specyficzne atrybuty#
Dla elementu frameset możliwe jest określenie kilku specyficznych atrybutów.
1. Podział strony na kolumny (pasy pionowe)#
<frameset cols="x1,x2,...">...</frameset>
lub
<frameset cols="x%,x%,...">...</frameset>
gdzie "x1,x2,..." definiują szerokość kolejnych kolumn (począwszy od lewej strony) w pikselach, natomiast "x1%,x2%,..." oznaczają szerokość kolejnych kolumn w procentach całego ekranu. W miejsce kropek można wpisywać dalsze wartość. W przypadku podania tylko dwóch liczb, kropki oraz końcowy przecinek należy pominąć.
W praktyce najczęściej wykorzystywane są wartości pikselowe (np. przy tworzeniu ramki z menu lub banerem). Piksele gwarantują, że niezależnie od rozdzielczości ekranu, ramka z przyciskami (w formie graficznej) będzie miała taką samą szerokość, dzięki czemu nie będą one nigdy schowane (przy mniejszych rozdzielczościach), ani nie pozostanie puste miejsce (w wyższych rozdzielczościach). Wartości procentowe stosujemy zazwyczaj, kiedy zależy nam, aby okno przeglądarki było zawsze podzielone w takich samych proporcjach (np. 1:4).
Jest jeszcze jeden rodzaj wartości, o której należy wspomnieć, chodzi mianowicie o symbol gwiazdki ("*"). Jeśli np. zadeklarujemy "100,150,200,*", a rozdzielczość ekranu wynosi 1280x800, to strona zostanie podzielona na cztery kolumny o szerokościach odpowiednio: 100, 150, 200 oraz (1280 - 100 - 150 - 200 = 830) pikseli. Zatem znak "*" oznacza dopełnienie do pełnej rozdzielczości ekranu. Można oczywiście podać wszystkie szerokości kolumn na sztywno ("100,150,200,830"), ale jeśli ktoś pracuje w innej rozdzielczości ekranu, efekt mógłby być niezamierzony. Podczas podawania wymiarów ramek w pikselach, najlepiej zawsze używać przynajmniej jednej wartości w postaci "gwiazdki". Oczywiście "gwiazdkę" można również stosować w przypadku wartości procentowych (np.: "10%,*,10%"). Wtedy oznacza ona dopełnienie do 100% szerokości całego ekranu (czyli w tym konkretnym wypadku "10%,80%,10%").
Specyfikacja dopuszcza podawania kilku znaków "*". Można wtedy wykorzystać tzn. współczynnik proporcjonalności.. Przykładowo wpisanie 25%,1*,2*,15% (lub 25%,1*,2*,15%) spowoduje wyświetlenie czterech ramek o następujących wymiarach:
- 25% (Ramka 1)
- [(100% - 25% - 15%) / (1 + 2)] * 1 = 20% (Ramka 2)
- [(100% - 25% - 15%) / (1 + 2)] * 2 = 40% (Ramka 3)
- 15% (Ramka 4)
W naszym przykładzie liczby 1 oraz 2 są właśnie współczynnikami proporcjonalności. W celu ustalenia rzeczywistej wartości tworzonej przez współczynnik najlepiej kierować się następującym algorytmem:
- Od całej rozdzielczości ekranu odejmujemy sumaryczny rozmiar wszystkich ramek, których wymiary zostały podane bezpośrednio bez współczynników proporcjonalności (znaków "
*"):100% - 25% - 15% = 60% - Następnie uzyskaną długość dzielimy przez sumę wartości wszystkich współczynników proporcjonalności:
60% / (1 + 2) = 20% - Na końcu obliczony wynik mnożymy przez każdy ze współczynników proporcjonalności:
20% * 1 = 20%(druga ramka)20% * 2 = 40%(trzecia ramka)
Łatwo zauważyć, że trzecia ramka jest dwa razy większa od drugiej, ponieważ ma dwa razy większy współczynnik proporcjonalności. Metoda jest bardzo przydatna, kiedy np. pierwsza ramka ma mieć stały rozmiar (bez względu na rozdzielczość ekranu), dajmy na to 200 pikseli, ponieważ zawiera przyciski menu o takiej szerokości. Pozostałe dwie ramki mogą mieć dowolną szerokość, ale chcemy, aby druga z nich była dwa razy szersza od trzeciej. Należy wtedy stosować współczynniki proporcjonalności, deklaracja: "200,2*,*". Oczywiście analogiczny efekt daje wpisanie: "200,67%,33%".
Jeśli nie stosujemy wartości procentowych do określania rozmiarów ramek, lecz tylko pikseli, w poleceniu powinna pojawić się przynajmniej jedna gwiazdka! Umożliwi to poprawne wyświetlenie strony w różnych rozdzielczościach ekranu i przy różnych wielkościach okna przeglądarki.
Dla lepszego zobrazowania działania polecenia proponuję zapoznać się z poniższymi przykładami:
- Przykład 1 - deklaracja
frameset cols="100,200,300", typ MIME:text/html. Brak zdefiniowania przynajmniej jednej ramki autodopasowującej (za pomocą procentów lub gwiazdki) powoduje, że podział nie uwzględnia podanych pikseli - całość odbywa się na zasadzie proporcji między poszczególnymi wartościami, przy czym, zawsze wykorzystane zostanie całe okno przeglądarki. - Przykład 2 - deklaracja
frameset cols="100,200,*", typ MIME:text/html - Przykład 3 - deklaracja
frameset cols="10%,*,10%", typ MIME:text/html - Przykład 4 - deklaracja
frameset cols="10%,3*,1*", typ MIME:text/html
2. Podział strony na wiersze (pasy poziome)#
<frameset rows="x1,x2,...">...</frameset>
lub
<frameset rows="x%,x%,...">...</frameset>
gdzie "x1,x2,..." definiują szerokość kolejnych kolumn (począwszy od lewej strony) w pikselach, natomiast "x1%,x2%,..." oznaczają szerokość kolejnych kolumn w procentach całego ekranu. W miejsce kropek można wpisywać dalsze wartość. W przypadku podania tylko dwóch liczb, kropki oraz końcowy przecinek należy pominąć.
Podobnie jak w przypadku kolumn możliwe jest podanie znaku gwiazdki ("*"), jako dopełnienie do pełnej wysokości ekranu, a także użycie współczynników proporcjonalności. Wszystkie wyliczenia przeprowadzamy analogicznie jak w przypadku podziału za pomocą atrybutu cols.
Dla lepszego zobrazowania działania polecenia proponuję zapoznać się z poniższymi przykładami:
- Przykład 5 - deklaracja
frameset rows="100,200,300", typ MIME:text/html. Brak zdefiniowania przynajmniej jednej ramki autodopasowującej (za pomocą procentów lub gwiazdki) powoduje, że podział nie uwzględnia podanych pikseli - całość odbywa się na zasadzie proporcji między poszczególnymi wartościami, przy czym, zawsze wykorzystane zostanie całe okno przeglądarki. - Przykład 6 - deklaracja
frameset rows="100,200,*", typ MIME:text/html - Przykład 7 - deklaracja
frameset rows="10%,*,10%", typ MIME:text/html - Przykład 8 - deklaracja
frameset rows="10%,3*,1*", typ MIME:text/html
3. Kolor obramowania (Internet Explorer/Firefox/Chrome)#
<frameset bordercolor="kolor">...</frameset>
Polecenie pozwala określić kolor obramowania rozdzielającego poszczególne ramki. Domyślnie kolor jest zależny od stosowanej przeglądarki internetowej.
Atrybut BORDERCOLOR nie wchodzi w skład specyfikacji HTML 4.01.
Przykład zastosowania koloru obramowania przedstawiony zostały na specjalnej stronie testowej. Przypominam tylko, że obsługa polecenia zależy od stosowanej przeglądarki internetowej.
4. Szerokość obramowania#
<frameset border="x">...</frameset>
gdzie jako "x" należy wpisać grubość obramowania (w pikselach).
Polecenie pozwala określić szerokość obramowania rozdzielającego poszczególne ramki. Domyślna wartość jest zależna od stosowanej przeglądarki internetowej.
Atrybut BORDER nie wchodzi w skład specyfikacji HTML 4.01.
Przykład zastosowania koloru obramowania przedstawiony zostały na specjalnej stronie testowej.
5. Widoczność obramowania#
<frameset frameborder="rodzaj">...</frameset>
gdzie jako "rodzaj" należy wpisać:
"0"lub ("no") - schowanie obramowania"1"lub ("yes") - pokazanie obramowania (domyślne zachowanie)
Polecenie pozwala określić widoczność obramowania rozdzielającego poszczególne ramki. Ukrycie obramowania uniemożliwi bezpośrednią regulację wymiarów każdego pola (za pomocą myszki wprost na stronie bazowej).
Atrybut FRAMEBORDER oraz FRAMESPACING dla znacznika FRAMESET nie wchodzą w skład specyfikacji HTML 4.01.
Przykład zastosowania widoczności obramowania przedstawiony zostały na specjalnej stronie testowej.
W Internet Explorerze i Operze oprócz frameborder="0" powinniśmy wpisać framespacing="0", chyba że podamy border="0". Dzięki temu uzyskamy spójne zachowanie w każdym browserze.