Ramki pozwalają wyświetlić w oknie przeglądarki więcej niż jeden dokument html. Każdy z takich dokumentów jest prezentowany w odrębnej ramce, a poszczególne ramki są od siebie niezależne. Wadą takiego sposobu prezentacji jest jedynie utrudnienie procesu drukowania strony.
Ramka to zdefiniowana przez swojego twórcę część okna przeglądarki, której to części przypisano właściwości takie jak całemu oknu. Tak więc ramka może być przewijana niezależnie od pozostałej zawartości okna. Można też swobodnie zmieniać jej rozmiary. Zawartość ramki tworzy standardowy plik HTML.
Wszystkie cechy ramek określane są za pomocą atrybutów znacznika <frame>, generującego ramkę. Lista podstawowych atrybutów została zebrana w tabeli 8.1. Rozszerzony zestaw atrybutów znajdziesz w dodatku A.
Układ ramek to zestaw ramek wypełniający okno przeglądarki lub ramkę w „zewnętrznym” układzie ramek. Poszczególne ramki układu mogą mieć swoje nazwy – dzięki temu można tworzyć połączenia do ramek oraz stosować nazwy ramek w skryptach.
O ile strona WWW w klasycznej formie nie odbiega od tego, co zwykliśmy sobie wyobrażać pod pojęciem strona, to prezentacja informacji w układzie ramek jest już czymś typowym dla aplikacji komputerowych.
Zazwyczaj w układzie ramek jedna z ramek prezentuje informacje, a druga, często statyczna, jest wyposażona w system nawigacji i stanowi coś w rodzaju systemu dowodzenia – tu decydujesz, co będzie wyświetlane w pierwszej ramce. Wybranie połączenia w pierwszej ramce powoduje uaktualnienie zawartości drugiej ramki. Strony WWW z ramkami są niewątpliwie bardziej atrakcyjne wizualnie, lecz znacznie trudniejsze w projektowaniu i przygotowaniu.
Układ ramek jest definiowany w pliku HTML, w którym element body zastąpiono elementem frameset. W elemencie tym określane są następujące cechy układu ramek:
q Sposób podziału okna na ramki.
q Liczba wierszy lub kolumn.
q Obszar ekranu przyporządkowany poszczególnym kolumnom/wierszom.
Znacznik <frame> definiuje dokument, który zostanie umieszczony w danej ramce. Wartością jego atrybutu src jest adres url dokumentu html.
Ogólna postać definicji układu ramek przedstawiona została na wydruku 8.1. Przy tworzeniu ramek należy pamiętać, że znaczniki <body> i <frameset> wzajemnie się wykluczają. Co więcej, znacznik <frameset> nie może zawierać innych znaczników formatujących, połączeń oraz dokumentów tekstowych.
Wydruk 8.1. Definicja układu ramek
<html>
<head>
<title>Tytuł strony</title>
</head>
<frameset atrybut=”wartość”>
<frame src=”url”>
...
</frameset>
</html>
Aby zdefiniować układ ramek, konieczne jest:
q Określenie liczby ramek w układzie.
q Przygotowanie plików, które wypełnią poszczególne ramki. Jeśli na przykład w układzie będą trzy ramki, konieczne będą trzy pliki HTML (patrz rysunek 8.1).
Rys. 8.1.
Plik definiujący układ ramek bazuje na plikach definiujących zawartość poszczególnych ramek
Znacznik <frameset> przyjmuje dwa atrybuty: cols i rows. Pierwszy z nich, cols, umożliwia określenie liczby kolumn, na które zostanie podzielone okno przeglądarki – a więc liczby ramek pionowych. Co więcej, atrybut ten pozwala także wskazać sposób przypisania kolumnom obszaru okna.
Zobaczmy jak wykorzystać ten atrybut. Oto podstawowa definicja znacznika <frameset> z atrybutem cols:
<frameset cols="szerokość_kolumny, szerokość_kolumny, ...">
Liczba kolumn określana jest liczbą wartości atrybutu cols. Wartości te podawane są kolejno, z przecinkami. Wartości – czyli szerokość ramki – można definiować w pikselach, w procentach (względem całkowitej szerokości układu ramek) oraz za pomocą znaku „*” (w tym przypadku przydzielana jest ramce maksymalna możliwa szerokość).
Aby podzielić okno na ramki, o jednakowej szerokości, przypisz atrybutowi cols wartości określone za pomocą symbolu ”*”. Jeśli więc układ ramek ma składać się z trzech identycznych ramek, definicja elementu frameset będzie następująca:
<frameset cols="*, *, *">
Unikaj definiowania rozmiarów ramek w jednostkach bezwzględnych. Jeśli jednak musisz, to wymiary pozostałych ramek określaj za pomocą gwiazdki, *, aby pozostała część ekranu została wypełniona.
Wydruk 8.2 pokazuje przykładowy podział okna przeglądarki na trzy pionowe ramki.
Wydruk 8.2. Układ trzech ramek pionowych
<title>Układ trzech ramek pionowych</title>
<frameset cols="25%,50%,25%">
<frame src="ramka1.html
<frame src="ramka2.html
<frame src="ramka3.html
Ramki te możesz zobaczyć na rysunku 8.2. Ramka środkowa zajmuje 50% szerokości układu ramek, a ramki skrajne po 25%.
Rys. 8.2.
Układ trzech ramek pionowych
W każdej z ramek wyświetlany jest inny dokument html. Ich nazwy stanowią wartości atrybutu src poszczególnych znaczników <frame>. Na razie pliki ramka1.html, ramka 2.html i ramka3.html nie zawierają nic, oprócz podstawowego kodu HTML – są to po prostu klony szablonu dokumentu HTML.
Pionowy układ ramek może nam się przydać do stworzenia dokumentu html, w którym jedna ramka będzie ramką nawigacyjną, a druga będzie prezentować wybrane w pierwszej tematy. Ramkę nawigacyjną umieścimy po lewej stronie – to jest bardziej naturalny układ, częściej spotykany – a jej zawartość będzie statyczna. Stanowić ją będzie zestaw połączeń, aczkolwiek można go zastąpić mapą odsyłaczy. W ramka z prawej pojawią się dokumenty wskazane w ramce nawigacyjnej. Skoro tak, to należałoby prawej ramce przyznać dominujący obszar okna. Niech więc szerokości ramek stanowią odpowiednio 25 i 75% szerokości układu ramek.
Aby umożliwić komunikację między ramkami za pomocą połączeń, musimy zidentyfikować ramki, nadając im nazwy, oraz wskazać cel połączeń – ramkę o określonej nazwie. Pierwsze zadanie wykonamy korzystając z atrybutu name znacznika <frame>. Do realizacji drugiego przyda się atrybut target znacznika <a>.
Zdefiniujmy więc odpowiednie pliki:
q uklad_ramek.html – jest układ dwóch pionowych ramek.
q nawigacja.html – ten plik zawierać będzie listę, której elementami będą połączenia.
q strona.html – to plik html drugiej ramki. Zostanie on załadowany do drugiej ramki po wczytaniu układu ramek do okna przeglądarki.
q pliki pozostałych dokumentów html – ich liczba będzie zależała od tego, ile połączeń zdefiniujesz w ramce nawigacyjnej,
Wydruki 8.3, 8.4 i 8.5 stanowią przykłady takich plików. Wydruki zaopatrzone zostały w komentarze html, które pomogą Ci prześledzić sposób działania kodu.
Wydruk 8.3. uklad_ramek.html
<title>Ramki w pionie</title>
<frameset cols="25%,75%">
<!-- Atrybut name definiuje nazwy ramek -->
<frame src="nawigacja.html" name="nawigacja">
<frame src="strona.html" name="strona">
Układ ramek z wydruku 8.3 to układ dwóch ramek. Za pomocą atrybutu name przypisano pierwszej z ramek nazwę nawigacja, a drugiej strona.
Wydruk 8.4. Nawigacja.html
<title>Nawigacja</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2">
<body>
<h3>Wybierz interesujący cię temat: </h3>
<!-- lista połączeń -->
<ul>
<!-- Zwróć uwagę na atrybut target – jego wartością jest nazwa ramki -->
<li><a href="strona.html" target="strona">strona 1</a>
<li><a href="strona1.html" target="strona">strona 2</a>
<li><a href="strona2.html" target="strona">strona 3</a>
</ul>
</body>
W tym pliku html został wykorzystany element ul tworzący listę wypunktowaną. Elementami listy są połączenia prowadzące do kolejnych plików html:
Połączenia są definiowane za pomocą znacznika <a>, który przyjmuje dwa atrybuty: href i target. Wartością atrybutu src są adresy url plików wyświetlanych w szerszej z ramek Ramka ta jest wskazywana jako cel połączeń za pomocą atrybutu target – jego wartością jest nazwa szerszej ramki.
Atrybut target ma kluczowe znaczenie w definiowaniu systemu nawigacji między ramkami. Ramkom warto nadawać nazwy, nawet jeśli w danej chwili nie korzystasz z nich. Jeśli będziesz rozwijał swoją stronę WWW, może się to okazać bardzo przydatne. Istnieją jednak nazwy, do których należy podchodzić z niezwykłą ostrożnością – nazwy te rozpoczynają się od znaku podkreślenia i mają specjalne funkcje. Te wyjątkowe nazwy prezentuje tabela 8.2.
Wydruk 8.5. strona.html
<title>Strona</title>
<!-- Wstaw tu dowolną zawartość -->
<h2>To jest plik o nazwie strona.html.</h2>
<p>Jeśli chcesz wyświetlić inny plik, kliknij połączenie...</p>
Plik html z wydruku 8.5 to dowolny plik html. Może to być strona główna Twojej witryny. W takim przypadku połączenia będą prowadziły do kolejnych stron witryny.
Na rysunku 8.3 możesz zobaczyć układ ramek, który właśnie skonstruowaliśmy. Klikając połączenia w ramce nawigacyjnej, będziesz wyświetlał w ramce z prawej strony kolejne dokumenty html składające się na Twoją witrynę.
Rys. 8.3.
Ramki dzielą okno w pionie
Taki układ ramek można także wykorzystać do prezentacji „zewnętrznych” stron WWW. Wymaga to jedynie odpowiedniego zdefiniowania adresów url przy wykorzystaniu adresowania bezwzględnego (patrz rozdział Połączenia) (patrz rysunek 8.4).
Rys. 8.4.
Teraz połączenia prowadzą do innych witryn
Domyślnie ramki są automatycznie zaopatrywane w paski przewijania wtedy, gdy jest to konieczne. Jeśli chciałbyś zablokować przewijanie zawartości ramki, umieść w znaczniku <frame> atrybut scrolling i przypisz mu wartość no.
Ramki są oddzielane obramowaniem, z którego możesz skorzystać, aby zmienić zadane rozmiary ramki. Złap za obramowanie oddzielające ramki i przeciągnij w odpowiadające Ci położenie.
Aby pozbyć się obramowań, skorzystaj z takiej definicji znacznika:
<frameset rows="75,*" border=”0” frameborder=”0” framespacing=”0”>
Wyłączenie wyświetlania obramowań ramek znacznie utrudni użytkownikowi zmianę rozmiarów ramek. Nie jest on jednak w sytuacji beznadziejnej – nad obramowaniem, którego wyświetlanie wyłączono, wskaźnik myszki zmienia postać (patrz rysunek 8.5).
Rys. 8.5.
Obramowania ramek zostały ukryte. Zwróć jednak uwagę na postać wskaźnika myszki – informuje ona, że tam jest obramowanie
Drugim atrybutem znacznika <frameset> jest rows. Umożliwia on określenie liczby wierszy, na które zostanie podzielone okno przeglądarki – a więc liczby ramek poziomych. Oto postać definicji:
<frameset rows="wysokość_wiersza, wysokość_wiersza, ...">
Unikaj stosowania absolutnych rozmiarów ramek. Jeśli jednak musisz, to wymiary pozostałych ramek określaj za pomocą gwiazdki, *, aby pozostała część ekranu została wypełniona.
Aby podzielić okno na trzy poziome ramki, o jednakowej wysokości, zastosuj atrybut rows="*, *, *".
Przygotujemy prosty układ dwóch ramek, dzielących ekran w poziomie. W pierwszej, węższej, możemy umieścić banner, a w drugiej, szerszej, dokument html. Wąskiej rameczce narzucimy stałą wysokość, na przykład 75 pikseli. Druga ramka niech wypełni pozostałą część ekranu.
Wydruk 8.6 pomoże Ci w zaprojektowaniu układu ramek. Wydruki 8.7 i 8.8 to pliki HTML z zawartością ramek – banner.html i strona.html. Możesz je dowolnie modyfikować. Na razie nie ma w nich nic szczególnego.
Wydruk 8.6. Prosty układ ramek
<title>Ramki poziome</title>
<frameset rows="75,*">
<frame src="baner.html">
<frame src="strona.html">
Ten układ ramek różni się od układu zdefiniowanego na wydruku 8.3 tylko tym, że element frameset ma tu atrybut rows. Jego wartości wskazują, że okno podzielone zostanie na dwie ramki, przy czym jednej narzucona została wysokość 75 pikseli, a wysokość drugiej to pozostała część okna. W wąskiej ramce pojawi się baner reklamowy, a w wysokiej Twoja strona WWW.
Wydruk 8.7. Banner.html
<title>Banner</title>
<marquee><h1>Oto najwspanialsza strona WWW na świecie!!!<h1></marquee>
Plik baner.html to prostu dokument html, który zawiera napis reklamowy. Napis ten będzie płynnie przewijany w poprzek ekranu. Wykorzystana tu została prosta metoda tworzenia animacji tekstowych, tak zwanych animacji Marquee.
Aby utworzyć taką animację, wpisz między znacznikami <marquee> </marquee> dowolny tekst. Znacznik ten ma swoje atrybuty – zostały one zebrane w tabeli 8.3.
Jest to bardzo prosta metoda, lecz należy pamiętać, że udostępnia ją tylko Internet Explorer. W Netscape napis będzie nieruchomy.
Wydruk 8.8. Strona.html
<title>Strona </title>
<h1>To jest ramka, w której wyświetlana będzie strona</h1>
Plik strona.html tozwykły dokument html. Zastąp go swoją stroną WWW.
Na rysunku 8.6 pokazane zostały efekty naszej pracy – okno przeglądarki zostało podzielone na dwie poziome ramki.
Rys. 8.6.
Okno przeglądarki podzielone zostało na dwie ramki poziome
Łączenie poziomych i pionowych układów ramek pozwala budować skomplikowane układy, przypominające szachownicę.
Aby utworzyć mieszany układ ramek, konieczne jest zagnieżdżenie ...
karkur