1 1. Ramki Najbardziej elastycznym sposobem budowania stron jest uŝycie ramek. Ułatwiają one nawigowanie w wielostronicowych dokumentach HTML, poprzez podział ekranu na kilka obszarów. KaŜdy z nich zawiera własną niezaleŝną stronę. Struktura ramki jest przechowywana w oddzielnym pliku HTML, który zamiast znacznika <BODY> posługuje się znacznikiem <FRAMESET>... określającym liczbę i wielkość ramek. <HTML> <HEAD> <TITLE>Tytuł strony</title> </HEAD> <FRAMESET> tu rozpoczyna się definicja ramki </HTML> Definiując układ ramek za pomocą znacznika <FRAMESET> naleŝy dołączyć do definicji jeden z atrybutów znacznika: COLS lub ROWS. Atrybut COLS informuje przeglądarkę, by podzieliła ekran na odpowiednią liczbę pionowych ramek (kolumn), których szerokości zdefiniowane są poprzez kolejne wartości atrybutu, oddzielone przecinkami. <FRAMESET COLS="szerokość kolumny, szerokość kolumny,..."> Szerokość ramki moŝe być wprowadzona na kilka sposobów: bezpośrednio w pikselach, np. 100; w procentach względem całkowitej szerokości układu ramek, np. 20%; za pomocą znaku "*", będącym dopełnieniem do pozostałej szerokości okna. Za pomocą atrybutu ROWS moŝemy dokonać podziału ekranu w poziomie. Odpowiedni kod powinien wyglądać następująco: <FRAMESET ROWS="wysokość wiersza, wysokość wiersza,..."> Po zdefiniowaniu układu ramek naleŝy za pomocą znacznika <FRAME>, który nie posiada odpowiednika zamykającego, przypisać jakiś dokument HTML. Aby przypisać ramce dokument, musimy podać źródło dokumentu. NaleŜy w tym celu uŝyć konstrukcji: <FRAME SRC="nazwa_pliku.html">
2 Taka definicja powinna pojawić się dla kaŝdej z ramek utworzonych za pomocą znacznika <FRAMESET>. <HTML> <HEAD> <TITLE>Ramki</TITLE> </HEAD> <FRAMESET COLS="35%,*,*"> <FRAME SRC="dokument1.html"> <FRAME SRC="dokument2.html"> <FRAME SRC="dokument3.html"> </HTML> Znacznik <FRAME> posiada szereg atrybutów, których opis zamieszczono w tabeli 8. Tabela 8 Opis atrybutów znacznika <FRAME> Atrybut Wartość Znaczenie SCROLLING AUTO Domyślnie, jeśli zawartość ramki zajmuje większy obszar niŝ obszar udostępniany przez ramkę, przeglądarka automatycznie wyposaŝa ramkę w paski przewijania, aby uŝytkownicy przewijając zawartość mieli dostęp do całego dokumentu. SCROLLING NO Brak pasków przewijania. UŜytkownik moŝe nie mieć dostępu do ukrytej części dokumentu, jeŝeli ta nie zmieści się w obszarze ramki. SCROLLING YES Paski przewijania wyświetlane są w ramce zawsze, niezaleŝnie od potrzeb. NORESIZE brak Domyślnie uŝytkownicy mogą zmieniać rozmiary ramek. Za pomocą tego atrybutu moŝna temu zapobiec. MARGINHEIGHT piksele Określa szerokość marginesu, który pojawia się nad i pod ramką (w pikselach). MARGINWIDTH piksele Określa szerokość marginesu, który pojawia się z prawej i lewej strony ramki (w pikselach). źródło: materiały własne
3 Jeśli określona przeglądarka nie obsługuje ramek, wówczas pomijana jest zawartość znacznika <FRAMESET> i wyświetlana jest zawartość znacznika <NOFRAMES>...</NOFRAMES>. <HTML> <HEAD> <TITLE>Tytuł strony</title> </HEAD> <FRAMESET COLS="*,*"> <FRAME SRC="dokument1.html"> <FRAME SRC="dokument2.html"> <NOFRAMES> <BODY> Tu wprowadź dowolny tekst, połączenia i znaczniki. </BODY> </NOFRAMES> </HTML> Tekst zawarty między znacznikami <NOFRAMES>...</NOFRAMES>, nie będzie wyświetlany przez przeglądarki, które obsługują ramki. Pojawi się on jedynie tam, gdzie obsługa ramek jest niemoŝliwa. 2. Zmiana obramowań Wszystkie ramki utworzone za pomocą znacznika <FRAME> mają szerokie obramowania. Korzystając z atrybutów FRAMEBORDER i BORDERCOLOR, moŝna stosować obramowania lub z nich zrezygnować oraz definiować ich kolor. Wartością atrybutu BORDERCOLOR moŝe być angielska nazwa koloru lub wartość heksadecymalna, która go definiuje. Atrybut FRAMEBORDER przybiera dwie wartości YES i NO. Oba atrybuty mogą być stosowane takŝe ze znacznikiem <FRAMESET>. UmoŜliwiają one definiowanie domyślnych wartości dla całego układu ramek, pomimo iŝ HTML 4.0 nie uwzględnia ich jako atrybutów tego znacznika. 3. Tworzenie złoŝonych układów ramek To z czym zapoznałeś się w poprzednim rozdziale umoŝliwia tylko tworzenie prostych typów ramek. Na rysunku poniŝej przedstawiony jest układ, w którym górna część ekranu podzielona jest na dwie pionowe ramki, natomiast trzecia, umiejscowiona u dołu ekranu rozciąga się na całą jego szerokość. Rysunek 1 Przykład złoŝonej ramki Cała sztuka polega na tym, Ŝe najpierw dzielimy (w naszym konkretnym przykładzie) stronę na wiersze, a następnie w drugim deklarujemy dodatkowy podział na kolumny.
4 Musimy zatem rozpocząć definiowanie od układu ramek z zastosowanym atrybutem ROWS (podział na wiersze). <FRAMESET ROWS="*,80"> <FRAME SRC="dokument1.html"> <!-- ramka wiersza 1 --> <FRAME SRC="dokument2.html"> <!-- ramka wiersza 2 --> Spowoduje to podzielenie ekranu na dwie sekcje: małą ramkę o wysokości 80 pikseli umieszczoną u dołu ekranu i duŝą ramkę zajmującą pozostałą górną część. Znaczniki <FRAME> definiują zawartość kaŝdej z ramek. ZagnieŜdŜanie znaczników <FRAMESET> Kolejny krok to podzielenie w pionie górnej ramki na dwie. Chcąc osiągnąć ten efekt musimy umieścić drugi element <FRAMESET> w podstawowym bloku <FRAMESET>. Aby zagnieździć jeden element <FRAMESET> w innym, zagnieŝdŝany znacznik musi zastąpić jeden ze znaczników <FRAME> nadrzędnego układu ramek. <FRAMESET ROWS="*,80"> <FRAMESET COLS="70,*"> <FRAME SRC="dokument1.html"> <!-- ramka wiersza 1 --> <FRAME SRC="dokument2.html"> <FRAME SRC="dokument3.html"> <!-- ramka wiersza 2 --> Atrybut COLS osadzonego układu ramek definiuje dwie kolumny - jedną o szerokości 70 pikseli i drugą, która zajmuje pozostałą jego szerokość. Ponadto, pomiędzy znacznikami <FRAMESET> i osadzone są dwa znaczniki <FRAME>, które definiują zawartość kaŝdej z kolumn. Rysunek 2 Dokument 1. Dokument 2. Dokument 3. Przykład złoŝonej ramki z osadzonymi dokumentami
5 Definiowanie nazw poszczególnych ramek Teraz powinniśmy się zastanowić, co zrobić, aby kliknięcie na odsyłaczu w jednej ramce automatycznie ładowało odpowiednią stronę w innej ramce. Jest to kluczowa sprawa, jeśli chcemy wykorzystać ramki w dokumentach. Cel ten moŝna osiągnąć rozpoczynając od nadania wszystkim ramkom nazw. <FRAMESET ROWS="*,80"> <FRAMESET COLS="70,*"> <FRAME SRC="dokument1.html" NAME="spis"> <FRAME SRC="dokument2.html" NAME="pokaz"> <FRAME SRC="dokument3.html" NAME="stopka"> Tworzenie połączeń między ramkami a dokumentami Chcąc skierować dokument do określonego okna, naleŝy do znacznika <A> dodać atrybut TARGET. Atrybut ten ma za zadanie wskazać ramkę, do której ma być załadowany dokument. Dokument 1. <UL> <LI><A HREF="nowa1.html" TARGET="pokaz">Odnośnik 1</A> <LI><A HREF="nowa2.html" TARGET="pokaz">Odnośnik 2</A> <LI><A HREF="nowa3.html" TARGET="pokaz">Odnosnik 3</A> </UL> Rysunek 3 Dokument 1. Odnośnik 1 Odnośnik 2 Odnośnik 3 Dokument 3. Dokument 2. Przykładowe połączenie między ramkami Warto jeszcze zwrócić uwagę na zastrzeŝone nazwy atrybutu TARGET. Atrybut ten moŝe przyjmować pewne specjalne wartości, których opis przedstawia tabela 9.
6 Tabela 9 Opis wartości atrybutu TARGET Atrybut TARGET="_blank" TARGET="_self" TARGET="_parent" TARGET="_top" źródło: materiały własne Znaczenie przywoływany dokument zostanie załadowany do nowego, pustego okna (uruchomi nową kopię przeglądarki). (przypadek domyślny) nowy dokument zamieni w ramce dokument, z którego dokonujemy skoku. przywoływany dokument zamieni dokument nadrzędny w hierarchii do bieŝącego dokumentu. przywoływany dokument zostanie wstawiony na miejsce dokumentu pierwszego w hierarchii naszych skoków, a więc na samą "górę". Szczególnie przydatny i często stosowany jest ten ostatni atrybut. UŜycie "_top" pozwoli uniknąć dość kłopotliwej sytuacji, gdy do ramki jest ładowany dokument, który sam składa się z ramek. "_top" usuwa więc wszelkie istniejące ramki i wyświetla dokument "na czysto". Naturalnie moglibyśmy tutaj z powodzeniem uŝyć "_blank", ale pozbawiamy się w ten sposób "historii" skoków. 4. Ramki lokalne Ramki lokalne (pływające) tworzone są za pomocą znacznika <IFRAME>...</IFRAME>. Klasyczne ramki pozwalają dzielić ekran przeglądarki na odrębne okna. Pływająca ramka jest ramką umieszczoną w dowolnym miejscu strony i jest prostsza w konstrukcji, gdyŝ ogranicza się w zasadzie do jednego polecenia: <IFRAME SRC="dokument.html" WIDTH="200" HEIGHT="200"> To jest ramka lokalna </IFRAME> Znacznik ten posiada kilkanaście kluczowych atrybutów, z których kilka jest rozszerzeniem przeglądarki Internet Explorer. Pozostałe są zgodne ze specyfikacją HTML 4.0. Pływające ramki są interpretowane obecnie przez przeglądarki: Internet Explorer, Mozilla Firefox i Opera. Opis atrybutów przedstawiono w tabeli 10.
7 Tabela 10 Opis atrybutów znacznika <IFRAME> Atrybut WIDTH HEIGHT SRC NAME FRAMEBORDER BORDER BORDERCOLOR FRAMESPACING MARGINWIDTH MARGINHEIGHT NORESIZE SCROLLING VSPACE HSPACE ALIGN Znaczenie * Rozszerzenie Internet Explorer źródło: materiały własne określa szerokość (w pikselach) ramki lokalnej określa wysokość (w pikselach) ramki lokalnej określa adres URL dokumentu HTML, który będzie wyświetlony w ramce określa nazwę ramki, umoŝliwiając tworzenie połączeń wskazuje, czy wokół ramki ma być wyświetlone obramowanie, wartość 1 - obramowanie występuje, wartość 0 - obramowania brak określa szerokość obramowania w pikselach* określa kolor obramowania* określa odstęp między krawędziami ramek (w pikselach)* definiuje szerokość marginesu (w pikselach) definiuje wysokość marginesu (w pikselach) wskazuje, Ŝe uŝytkownik nie ma moŝliwości zmiany rozmiarów ramki* wskazuje, czy mają być wyświetlane paski przewijania - wartości YES, NO lub AUTO (domyślna) definiuje wysokość marginesu* definiuje szerokość marginesu* określa umiejscowienie ramki względem linii tekstu - wartości: LEFT, MIDDLE, RIGHT, TOP i BOTTOM (domyślna)