Ramki 2

Połączenia do ramek  2

Znacznik <BASE>  2

Po co są ramki?   3

Definiowanie struktury ramek  3

Złożone układy ramek  6

Wyświetlanie plików w układzie ramek  7

 


Ramki

Najbardziej zaawansowaną opcją, która umożliwia organizację rozbudowanych stron WWW są ramki. Są one przydatne szczególnie w sytuacji, gdy mamy do czynienia z rozbudowanym serwisem informacyjnym, choć większość portali internetowych tworzy swoje serwisy bez nich. Poznając ramki odpowiemy sobie na następujące pytania:

Czym są ramki i jak są obsługiwane?

Jak się posługiwać połączeniami do ramek?

Jak tworzyć złożone układy ramek?

 

Połączenia do ramek

Podstawą pracy z ramkami jest atrybut TARGET wykorzystywany przez znacznik <A>. Ma on postać TARGET=”nazwa-okna”. Jak już zdążyłeś poznać zawartość nowej strony wyświetlana jest najczęściej w tym samym oknie, co poprzednia strona, chyba, że używając przeglądarki wykorzystamy prawy klawisz myszy i wymusimy otwarcie kolejnej strony w nowym oknie. Wykorzystując atrybut TARGET możemy wymusić przeglądarkę, by wyświetliła nową stronę w oknie o nazwie „nazwa-okna”. Nazwa okna nie może zaczynać się od znaku _ - od niego rozpoczynają się nazwy pewnych predefiniowanych okien.

Atrybut TARGET działa w sposób „inteligentny” – jeśli okno o wskazanej nazwie nie istnieje otwierane jest nowe okno, jeśli istnieje plik otwierany jest w istniejącym oknie. Ilustruje to poniższy przykład.

<A HREF=”o1.html” TARGET=”o1”>Otwieranie pierwszego okna</A><BR>
<A HREF=”o2.html” TARGET=”o2”>Otwieranie drugiego okna</A><BR>
<A HREF=”o3.html” TARGET=”o1”>Otwieranie w pierwszym oknie</A><BR>

 

Znacznik <BASE>

Bardzo częstą sytuacją jest kierowanie wszystkich połączeń na stronie do tego samego okna. (Do tej pory domyślnie otwierałeś połączenia zawsze w tym samym oknie.) Sytuacja taka jest bardzo często spotykana w przypadku korzystania z ramek. W takiej sytuacji nie jest wygodne dodawanie atrybutu TARGET do każdego znacznika <A>. Wystarczy skorzystać w takiej sytuacji ze znacznika <BASE> i zdefiniować w ten sposób globalny cel wszystkich połączeń. Znacznik ten ma postać <BASE TARGET=”nazwa-okna”>. Jak widać wykorzystujemy w nim znowu atrybut TARGET. Jeśli znacznik ten umiescimy w sekcji <HEAD>...</HEAD> to dotyczył on będzie wszystkich połączeń, dla których w znaczniku <A> nie określono atrybutu TARGET. Poprzedni przykład będzie można teraz zapisać w następujący sposób.

<HEAD>
<BASE TARGET=”o1”>
</HEAD>
<BODY>
<A HREF=”o1.html”>Otwieranie pierwszego okna</A><BR>
<A HREF=”o2.html” TARGET=”o2”>Otwieranie drugiego okna</A><BR>
<A HREF=”o3.html”>Otwieranie w pierwszym oknie</A><BR>
</BODY>

Istnieją także pewne specjalne nazwy służące do definiowania docelowego okna:

·        TARGET=”_self” umożliwia wyświetlenie połączenia w bieżącym oknie.

·        TARGET=”_blank” wyświetla połączenie w nowym oknie przeglądarki.

 

Po co są ramki?

Po tej dawce teorii czas odpowiedzieć na pytanie, po co są potrzebne ramki. Wyobraźmy sobie, że chcemy, aby zawsze na ekranie pozostawał tytuł naszego podręcznika i spis treści. Nie jest to chyba zbyt wygórowane wymaganie! Realizację tego umożliwiają nam ramki. Wyobraźmy sobie, że chcemy, aby nasz podręcznik wyglądał na ekranie w następujący sposób.

Podstawowym plikiem, który będziemy teraz musieli stworzyć będzie plik zawierający definicję ramek. W nim znajdą się kody HTML które określą układ ramek i nazwy plików, które będą domyślnie wyświetlane w tym ramkach. Te dokumenty będą zaś zawierać znaczniki HTML definiujące fizyczną zawartość obszaru ramki.

 

Definiowanie struktury ramek

Aby zdefiniować ramki zamiast znacznika <BODY> używamy znaczników <FRAMESET>...</FRAMESET>. Istotne jest zrozumienie różnicy między typowym dokumentem HTML a tym, który zawiera definicje ramek. Używając znacznika <FRAMESET> nie możemy użyć znacznika <BODY>, znaczników formatujących, połączeń oraz dokumentów tekstowych. Jedynym wyjątkiem jest znacznik <NOFRAMES>...</NOFRAMES>, który zawiera informacje dla przeglądarek, które jeszcze nie obsługują ramek. Podstawowymi atrybutami znacznika <FRAMESET> są:

·        COLS informujący przeglądarkę, na jaką liczbę pionowych ramek i o jakiej szerokości należy podzielić ekran. Kolejne wartości atrybutu COLS oddzielone są przecinkami. Szerokość ramki możemy podać w pikselach, procentach lub za pomocą znaku * służącego do przydzielenia ramce maksymalnej dostępnej szerokości.

·        ROWS działający tak jak COLS, dzielący ekran w poziomie.

Rozszyfrujmy poniższą definicję ramek:

<FRAMSET COLS=”25, 50%, *”>

Ekran będzie podzielony na trzy kolumny: pierwsza zajmie 25 pikseli, druga 50% szerokości ekranu, trzecia pozostałą część. Ile wynosi ta tajemnicza pozostała część zależy od wielkości okna przeglądarki. Do pełnej definicji ramek musimy jeszcze podać nazwy plików, które będą wyświetlane w kolejnych ramkach. Służy do tego znacznik <FRAME>, a konkretnie jego atrybut SRC znany Ci już z wyświetlania grafiki.

<FRAMESET COLS="25,50%,*">
  <FRAME SRC="00.html">
  <FRAME SRC="00.html">
  <FRAME SRC="00.html">
<NOFRAMES>
Masz chyba bardzo starą przeglądarkę...
</NOFRAMES>
</FRAMESET>

Pozostałe atrybuty znacznika <FRAME> to:

·        SCROLLING, który określa sposób przewijania ramek. Może on przyjmować jedna z trzech wartości:

o       NO – paski przewijania będą ukryte, co może uniemożliwić użytkownikowi dotarcie do części informacji

o       YES – paski będą wyświetlane zawsze, nawet jeśli nie są potrzebne.

o       AUTO – paski wyświetlane są tylko wtedy, kiedy są niezbędne.

·        NORESIZE zapobiegający domyślnemu przyzwoleniu dla zmiany rozmiaru ramek przez użytkownika.

·        MARIGINHEIGHT i MARIGINWIDTH określające wyrażone w pikselach szerokości marginesów odpowiednio nad i pod oraz z lewej i prawej strony ramki.

Jeśli chciałbyś uczynić podział na ramki niewidocznym musisz użyć atrybutu FRAMEBORDER=NO. (Domyślnie ma on wartość YES.) Jest to atrybut, który może wzbogacić zarówno znacznik <FREMESET> jak i <FRAME>. Możesz więc usuwać jedynie niektóre obramowania.

 

Złożone układy ramek

Powróćmy do naszego wymarzonego układu ramek. Aby zdefiniować go w sposób poprawny musisz ustalić, który podział jest „nadrzędny”, czyli który rozciąga się od brzegu do brzegu ekranu i od niego zacząć definicję układu ramek.

W naszym przypadku górna ramka rozciąga się od lewego do prawego brzegu, nadrzędny jest więc podział na... wiersze i od niego musisz zacząć. Potem będziesz mógł podzielić pozostałą, dolną część ekranu na dwie kolumny. Pozostaje jeszcze sposób określanie wielkości ramek. Skoro w górnej części planujemy pewną stałą informację, być może graficzną, wysokość tej ramki powinna być określona w pikselach. Ponieważ w lewej pionowej ramce planujemy umieszczenie spisu treści rozsądne jest wykorzystanie podziału z wykorzystaniem procentów. W docelowej wersji warto też chyba będzie pozbyć się obramowania ramek! Zacznijmy jednak od pierwszego podziału w poziomie.

<FRAMESET ROWS="25,*">

  <FRAME SRC=”00.html”>
  <FRAME SRC=”00.html”>
</FRAMESET>

Jak teraz podzielić dolną ramkę? Efekt ten uzyskasz umieszczając drugi znacznik <FRAMESET> wewnątrz podstawowego bloku <FRAMESET> zamiast znacznika <FRAME> określającego dolną ramkę! Dzięki temu nowy układ ramek zostanie osadzony w obrębie istniejącego już podziału.

<FRAMESET ROWS="25,*">

  <FRAME SRC=”00.html”>
  <FRAMESET COLS=20%,*>
    <FRAME SRC="00.html">
    <FRAME SRC=”00.html”>
  </FRAMESET>
</FRAMESET>

 

Wyświetlanie plików w układzie ramek

Nasze wysiłki zakończyły się jak na razie jedynie częściowym sukcesem. Potrafimy podzielić ekran na kilka części, ale przypominam: zależy nam na tym, aby po wybraniu odpowiedniego tytułu modułu w lewej ramce jego treść została wyświetlona w prawej, największej ramce. Aby to zrobić musimy poszczególnym ramkom nadać nazwy, do czego służy znany Ci już atrybut NAME. A swoją drogą, w jakim znaczniku był on już wykorzystany? Wyświetlimy też w poszczególnych ramkach inne pliki startowe.

<FRAMESET ROWS="25,*" FRAMEBORDER=NO>
  <FRAME SRC="gora.html" NAME="logo" MARGINWIDTH="0">
  <FRAMESET COLS=20%,* FRAMEBORDER=NO>
    <FRAME SRC="spis.html" NAME="lewa">
    <FRAME SRC="o.html" NAME="glowna">
  </FRAMESET>
</FRAMESET>

W pliku kurs.html umieszczona będzie ogólna informacja o prezentowanym materiale dydaktycznym. Plik spis.html to jak łatwo się domyślić spis treści kursu, czyli kolejne moduły. W pliku gora.html umieścimy logo i... połączenie do ogólnej informacji o prezentowanym materiale.

Jak wykonać spis treści już wiesz. Mówiliśmy o tym przy okazji prezentacji wyliczeń. Tym razem spis nie będzie nam znikał, pozostanie zawsze w lewej ramce. Musimy jedynie zadbać, by kolejne moduły były wyświetlane w odpowiedniej ramce. Wykorzystamy w tym celu znacznik <BASE> i atrybut TARGET wskazując odpowiednią nazwę ramki. Plik spis.html będzie więc miał następująca postać.

<HTML>
<HEAD>
<TITLE>Spis treści</TITLE>
<BASE TARGET=”glowna”>
</HEAD>
<BODY>
<A HREF=”mod0.html”>Moduł 0</A><BR>
<A HREF=”mod1.html”>Moduł 1</A><BR>
<A HREF=”mod2.html”>Moduł 2</A><BR>
</BODY>
</HTML>

W podobny sposób będzie zbudowany plik góra.html.

<HTML>
<HEAD>
<TITLE>Logo</TITLE>
</HEAD>
<BODY>
<A HREF="o.html" TARGET="glowna"><IMG SRC="html.gif" BORDER=NO></A>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<B>Kurs HTML'a</B>
</BODY>
</HTML>

Pliki kurs.html (definicja układu ramek), gora.html (logo i połączenie do informacji o kursie) oraz spis.html (spis treści kursu) mogą stanowić dla Ciebie pewnego rodzaju nowość. Pozostałe: o.html (informacja o kursie) i mod?.html (?=0, 1, 2, ...) potrafisz przygotować samodzielnie bez najmniejszego problemu.