M. Sokół - ABC języka HTML - Rozdział VIII - Ramki i układy ramek, ebooki, KURS HTML
[ Pobierz całość w formacie PDF ]
Rozdział 8.
Ramki i układy ramek
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.
Co to jest ramka?
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.
Co to jest układ ramek?
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.
Do czego słuŜy znacznik <frameset>?
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:
¦
Sposób podziału okna na ramki.
¦
Liczba wierszy
lub
kolumn.
¦
Obszar ekranu przyporządkowany poszczególnym kolumnom/wierszom.
Do czego słuŜy znacznik <frame>?
Znacznik
<frame>
definiuje dokument, który zostanie umieszczony w danej ramce. Wartością
jego atrybutu
src
jest adres
url
dokumentu html.
Jaka jest ogólna postać definicji układu ramek?
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”>
...
<frame src=”url”>
</frameset>
</html>
Aby zdefiniować układ ramek, konieczne jest:
¦
Określenie liczby ramek w układzie.
¦
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
W jaki sposób moŜna podzielić okno przeglądarki na pionowe ramki?
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ść).
Jak podzielić okno na ramki o jednakowej szerokości?
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.
Jak w praktyce poradzić sobie z kodem html układu ramek?
Wydruk 8.2 pokazuje przykładowy podział okna przeglądarki na trzy pionowe ramki.
Wydruk 8.2. Układ trzech ramek pionowych
<html>
<head>
<title>Układ trzech ramek pionowych</title>
</head>
<frameset cols="25%,50%,25%">
<frame src="ramka1.html
<frame src="ramka2.html
<frame src="ramka3.html
</frameset>
</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.
Jak wykorzystać taki pionowy układ ramek w praktyce?
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:
¦
uklad_ramek.html
– jest układ dwóch pionowych ramek.
¦
nawigacja.html
– ten plik zawierać będzie listę, której elementami będą połączenia.
¦
strona.html
– to plik html drugiej ramki. Zostanie on załadowany do drugiej ramki
po wczytaniu układu ramek do okna przeglądarki.
¦
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
<html>
<head>
<title>Ramki w pionie</title>
</head>
<frameset cols="25%,75%">
<!-- Atrybut name definiuje nazwy ramek -->
<frame src="nawigacja.html" name="nawigacja">
<frame src="strona.html" name="strona">
</frameset>
</html>
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
.
[ Pobierz całość w formacie PDF ]