Ramki
Na samym początku spróbuję odpowiedzieć na pytanie, czym są ramki. Otóż jest to rozwiązanie, pozwalające w jednym oknie przeglądarki wyświetlić kilka stron. Używając ramek, możesz podzielić okno przeglądarki na kilka części — w zależności od potrzeb — iw nich niezależnie przeglądać dokumenty.
Klasycznym przykładem użycia ramek jest sytuacja, gdy okno przeglądarki dzielimy na dwie części; lewa, mniejsza, część zawiera spis zawartości witryny, natomiast w prawej, większej, widzimy poszczególne strony z treścią. Wybierając jedną z pozycji z lewej części przeglądarki, powodujemy wyświetlenie odpowiedniego dokumentu w prawej części.
Ramki zostały oficjalnie ujęte w specyfikacji języka HTML 4 i są obsługiwane przez główne przeglądarki. Z chwilą wprowadzenia tego rozwiązania projektanci stron podzielili się na dwa obozy: zwolenników i przeciwników ramek. Wynika to z faktu, że ramki mają sporo zalet, jak i wad. Do zalet można zaliczyć m.in.:
■ łatwość rozwiązania nawigacji w obrębie stron,
■ ułatwienie organizacji stron,
a do wad:
■ spowolnienie ładowania strony,
■ brak prostej możliwości dodawania strony do ulubionych,
■ problemy z prawidłowym indeksowaniem strony przesz wyszukiwarki sieciowe,
■ problemy z drukowaniem.
To tylko część wad i zalet ramek, a wymienianie ich wszystkich i tak niczego nie zmieni. Każdy sam musi się przekonać o tym, czy w jego przypadku stosowanie ramek jest konieczne. Moim zadaniem korzystanie z ramek jest ostatecznością i obecnie dzięki znacznie lepszej obsłudze kaskadowych arkuszy stylów oraz stronom generowanym dynamicznie możemy całkowicie zrezygnować z tego rozwiązania.
Niejako z obowiązku w niniejszej książce opisałem, w jaki sposób przygotować stronę wykorzystującą ramki. Proponuję jednak, abyś sięgał po to rozwiązanie w ostateczności.
Konstrukcja ramek składa się z pliku definiującego podział okna przeglądarki na zaplanowaną ilość okien. Plik ten jest zbliżony wyglądem do tradycyjnego, choć mu kilka istotnych różnic. Oto przykład prostego pliku definiującego podział strony na ramki:
<?xml version=”1.0″ encoding=”IS0-8859-2″?>
<!DOCTYPE html PUBLIC „-//W3C//DTD XHTML 1.0 Frameset//EN” „http://www.w3.org/TR/xhtmll/DTD/xhtmll-frameset.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml11 xml :lang=”pl „>
<head>
<meta http-equiv=”content-type” content=”text/html;charset=IS0-8859-2″ /> <title>Przykład witryny z ramkami</title>
<link rel=“Stylesheet” href=”style.css” type=“text/css” />
</head>
<frameset cols=”20%,*%”>
<frame scrolling=”auto” name=”menu” src=”menu.htm” />
<frame scrolling=”auto” name=”opis” src=”opis.htm” />
</frameset>
</html>
<?xml version=”1.0” encoding=”IS0-8859-2″?>
<!D0CTYPE html PUBLIC „-//W3C//DTD XHTHL 1.0 Frameset//EN”
„http://www.w3.org/TR/xhtmll/DTD/xhtmll-frameset.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”pl”>
<head>
<meta http-equiv=”content-type” content=”text/html;charset=IS0-8859-2“ /> <title>Przykład witryny z ramkami</title>
<link rel=”Stylesheet” href=”style.css” type=”text/css” />
</head>
<frameset rows=”20%,*%”>
<frame scrolling=”auto” name=”menu” src=”menu.htm” />
<frame scrolling-„auto” name-„opis” src=”opis.htm” />
</frameset>
</html>
Pierwszą różnicą w stosunku do klasycznej strony (bez ramek), która rzuca się w oczy, jest deklaracja DOCTYPE. Sprawa jest jasna i nie wymaga dalszego omawiania.
Miejsce znacznika <body></body> zajmuje znacznik <frameset> </frameset>, który jest odpowiedzialny za deklaracje wyglądu naszych ramek. Otwierającemu znacznikowi <frameset> towarzyszy jeden z dwóch atrybutów: cols=”x,y” albo row-s=”x,y „. Pierwszy odpowiada za definiowanie kolumn, a drugi wierszy. Wartości x,y określają ilość kolumn lub wierszy i mogą być podawane bądź jako ilość pikseli, bądź jako wartość procentowa liczona od wielkości okna przeglądarki. Istnieje też możliwość definiowania tych wartości w taki sposób, jak to przedstawia podany przykład: wówczas musimy zadeklarować pierwszą wartość, natomiast drugą zastępujemy gwiazdką (*), co oznacza, że chcemy użyć całości dostępnej powierzchni. Rozwiązanie takie jest stosunkowo wygodne, gdyż nie musimy znać dokładnych wartości.
Nasz przykład zawiera następny znacznik <frame />, który określa dokładniej konkretną ramkę i przypisuje do niej nazwę oraz dokument wyświetlany domyślnie wewnątrz. Służą do tego atrybuty name oraz src. Poza tym znajduje się tu jeszcze atrybut scrolling, odpowiedzialny za wyświetlanie suwaków, pozwalających na przewijanie dokumentu znajdującego się wewnątrz ramki. Może on przybrać następujące wartości: auto — wówczas suwaki będą pokazywane automatycznie, jeśli okażą się potrzebne (gdy dokument przypisany do danej ramki będzie za duży), no — wtedy suwaki nigdy nie zostaną pokazane, oraz yes — wymuszający pokazywanie suwaków niezależnie od tego, czy są potrzebne, czy nie. Ostatnim atrybutem znacznika <frame /> jest noresize, wymuszający na przeglądarce zablokowanie możliwości zmiany wielkości okien, które domyślnie mają taką możliwość.
Podane przykłady pokazują, że możemy dzielić okno przeglądarki na kolumny (atrybut col s) bądź wiersze (atrybut rows), ale nic nie stoi na przeszkodzie, by na naszej stronie wiersze i kolumny połączyć. Do tego celu musimy użyć dobrze znanego zagnieżdżania. Oto przykład:
<?xml version=,,1.0“ encoding=“IS0-8859-2″?>
<!D0CTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Frameset//EN” „http://www.w3.org/TR/xhtmll/DTD/xhtmll-frameset.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”pl”>
<head>
<meta http-equiv=”content-type” content=”text/html;charset=IS0-8859-2″ /> <title>Przykład witryny z ramkami</title>
<link rel=“Stylesheet” href=”style.css“ type=“text/css” />
</head>
<frameset rovs=”100,*”>
<frame name-“gora” src=”gora.htm” />
<frameset cols=”35%,*”>
<frame nome=”lewa” src-„lena.htm” />
<frame name-„prawa” src=”praw.htm” />
</frameset>
</frameset>
</html>
Prawda, że proste?
Skoro wiesz, jak dzielić okno na odpowiednią ilość ramek, pora poznać formę adresowania dokumentów wewnątrz ramek. Chodzi o to, że hiperłącza w formie, jaką poznaliśmy nieco wcześniej, nie zadziałają poprawnie na stronie zbudowanej w oparciu o ramki. Efekt będzie taki, że przy wywołaniu hiperłącza strona, do której się ono odnosi, zostanie wyświetlona w tym samym oknie, w którym znajdowało się hiperłącze. By tego uniknąć, musisz określić, w którym oknie wywoływany dokument ma zostać wyświetlony — i tu z pomocą przychodzą nam nazwy ramek, definiowane wcześniej.
Przeanalizujmy hipotetyczny przykład oparty na powyższej definicji ramek. Zdefiniowaliśmy 3 ramki na stronie i nadaliśmy im nazwy: Gora, Lewa, Prawa. Dokumenty w nich wyświetlane mają podobne nazwy. Dokument lewa.html zawiera definicje następujących odsyłaczy:
<a href=”info1.html „>Informacje 1</a>
<a href=”info2.htmr’>Informacje 2</a>
Tymczasem my chcemy, by po wybraniu dowolnego z tych odsyłaczy odpowiednia strona została pokazana w ramce o nazwie Prawa. Aby to osiągnąć, nasz odnośnik w pliku lewa.html musimy wzbogacić o atrybut target=”nazwa ramki docelowej „. W naszym przypadku będzie to wyglądało tak:
<a href=”info1.html” target=”prawa”>Informacje 1</a>
<a href=”info2.html” target=”prawa”>Infonnacje 2</a>
Atrybut target zawiera dodatkowo cztery zdefiniowane wartości. Są to:
■ target=”_blank”,
■ target=”_self”,
■ target=”_parent”,
■ target=”_top”.
Pierwsza wartość spowoduje otwarcie nowego okna przeglądarki i wyświetlenie w nim żądanego dokumentu. Kolejna, „_self”, jest domyślna i spowoduje, że dokument zostanie wyświetlony w ramce, z której chcieliśmy dokonać przekierowania. Wartość trzecia dokona zamiany dokumentu nadrzędnego dla bieżącego dokumentu. Ostatnia natomiast spowoduje ponowne wczytanie zawartości okna i wyświetlenie nowego dokumentu, czyli dokona zmiany na miejscu dokumentu pierwszego w hierarchii skoków.
Ostatnia wartość jest szczególnie przydatna, jeśli z dokumentu zawierającego zdefiniowane ramki ładujemy inny dokument, również zawierający ramki, np. jeśli chcemy jedynie za pomocą HTML ponownie wczytać zawartość dwóch ramek.