Czym są ramki w dokumencie HTML? Wszystkie ważniejsze przeglądarki potrafią interpretowad ramki, które stały się już oficjalnym standardem języka HTML. Ramki ułatwiają nawigowanie w wielostronicowych dokumentach HTML i dlatego są chętnie stosowane przez wielu webmasterów. Najbardziej typowym przykładem użycia ramek jest umieszczenie w jednej spisu treści i przeznaczenie drugiej na wywoływane dokumenty (odrębne strony HTML), dowiązane do poszczególnych pozycji spisu. Gdyby ktoś się martwił, że ramka przeznaczona na dokumenty jest zbyt mała, może ją łatwo powiększyd, przeciągając po prostu jej brzegi za pomocą myszki (o ile ramka nie jest zablokowana przez autora strony). W ten sposób można powiększyd ramkę do wielkości niemal całego obszaru roboczego przeglądarki, niezależnie od domyślnych parametrów utworzonych przez autora strony.
Ogólna struktura strony Podstawową rolę w "ramkowym" dokumencie pełni specjalna strona, na której definiujemy liczbę, wielkośd i pozycję ramek oraz zachowanie się innych dokumentów w momencie uaktywnienia łącza hipertekstowego. Pozostałe strony, wchodzące w skład całego, wielostronicowego dokumentu, są stronami podrzędnymi.
Na podstawowej stronie nie powinno byd żadnych znaczników poza blokiem nagłówkowym i definicją samych ramek. Dopiero znaczniki NOFRAMES pozwalają umieścid treśd, która będzie wyświetlana przez przeglądarki nie interpretujące ramek. Znaczniki <BODY></BODY> mogą byd umieszczane jedynie w obrębie NOFRAMES, aczkolwiek ich obecnośd nie jest konieczna.
Kluczowe znaczenie ma para znaczników <FRAMESET> </FRAMESET>. Stanowią one, z dodatkowymi parametrami, ramy dla całej konstrukcji i między nimi są umieszczane bardziej szczegółowe znaczniki, dotyczące liczby ramek, podziału strony i wielkości ramek.
Znacznik <FRAME> służy do wprowadzenia konkretnej ramki. Znacznik jest uzupełniany dodatkowymi parametrami, mówiącymi o zawartości (zagnieżdżone strony), o tym, czy ramka zawiera suwaki, a także definiującymi nazwę ramki.
Aby konstrukcja mogła działad, konieczne jest podzielenie strony - pionowe lub poziome. Poniższy kod zawiera informację o podzieleniu strony na dwie kolumny. Służy do tego parametr COLS="x,y", umieszczany w otwierającym znaczniku FRAMESET. Liczby x i y służą do liczbowego określenia szerokości ramek. Możemy podad obie wartości w pikselach, w procentach szerokości strony, a także określid szerokośd jednej kolumny i oznaczyd szerokośd drugiej za pomocą wieloznacznika * (ma to sens przy podziale na większą liczbę kolumn lub wierszy).
Poniżej przedstawiono stronę z trzema ramkami, w których zdefiniowano wielkośd ramek i kolor obramowania (BORDERCOLOR=red) <HTML> <HEAD> <TITLE>Zadanie 19a - RAMKI</TITLE> </HEAD> <FRAMESET COLS="25%,*%"> <FRAME BORDERCOLOR=red SRC=spis_tresci.html> <FRAMESET ROWS=100,*> <FRAME SRC=banner.html> <FRAME BORDERCOLOR=red SRC=tresc_strony.html> </FRAMESET> </HTML>
ZADANIE 19a Na potrzeby wykonania dwiczeo z tego rozdziału kursu utwórz folder ZADANIE 19 RAMKI Wszystkie pliki zapisuj w tym folderze. Utwórz plik na bazie kodu podanego w poprzednim slajdzie. Plik zapisz pod nazwą zadanie 19a.html. Dodatkowo utwórz trzy pliki html o nazwach odpowiadających nazwom podanym w kodzie strony. W pliku spis_tresci.html wprowadź w oddzielnych wierszach używając nagłówka 3-go stopnia teksty: ryby płazy gady ptaki ssaki W pliku banner.html wpisz tekst KRĘGOWCE stosując nagłówek 1-ego stopnia. W pliku tresc-strony.html wpisz tekst strona w budowie
Nazwy ramek Ponieważ stosując ramki używamy jednocześnie często odsyłaczy, powinniśmy jakoś nazwad naszą ramkę. Nazwa będzie służyd jako punkt orientacyjny dla odsyłaczy. <FRAME NAME= dowolna_nazwa">
ZADANIE 19b Zmodyfikuj kodu z zadania 19a w ten sposób by każda z ramek otrzymała nazwę: Ramka pierwsza (lewa) spis_tresci. Ramka druga (prawa górna) banner. Ramka trzecia (prawa dolna) treśd. Plik zapisz pod nazwą zadanie19b.html. Parametr NAME= wstawiaj za poleceniem FRAME.
Odsyłacze Teraz powinniśmy się zastanowid, co zrobid, aby kliknięcie na odsyłaczu w jednej ramce automatycznie ładowało odpowiednią stronę w innej ramce. Jest to kluczowa sprawa, jeśli chcemy wykorzystad ramki w dokumentach. Zauważmy, że kliknięcie na odsyłaczu w spisie treści w lewej ramce powoduje załadowanie dokumentu do prawej ramki, a nie do ramki ze spisem treści. W tym miejscu wykorzystujemy nazwy, które nadawaliśmy poszczególnym ramkom.
W oknie w którym chcemy stworzyd spis treści budujemy odsyłacze do odpowiednich stron. Należy je tak skonstruowad, aby kliknięcie na odsyłaczu przywoływało wskazaną stronę, ale zarazem ładowało ją do ramki o nazwie (w naszym przypadku) TREŚĆ. Można to uczynid za pomocą następującej konstrukcji: <A HREF=ryby.html TARGET=tresc>RYBY</A> <A HREF=plazy.html TARGET=tresc>PŁAZY</A> itd. Polecenie <A HREF> było omówione wcześniej.
HREF= ryby.html" dotyczy nazwy pliku, w którym jest zapisana dana strona TARGET="nazwa_ramki" dotyczy docelowego miejsca, do którego ma byd załadowana strona. Widzimy tutaj rolę, jaką pełnią nazwy ramek. RYBY, PŁAZY są konkretnymi tematami w ich spisie, pozwalającymi po prostu wybrad interesujące nas zagadnienie. Możemy tu oczywiście użyd wcześniej poznanych poleceo pozwalających na umieszczaniu nazw w oddzielnych akapitach, zapisywania ich np. jako nagłówek określonej wielkości, definiowania koloru tekstu itp.. Oczywiście należy pamiętad o poprawnej konstrukcji, a więc <A HREF=...> </A>
ZADANIE 19c W pliku spis_tresci.html umieśd odsyłacze do stron ryby, płazy Kod zapisz tak by był nadal zachowany styl nagłówka 3-go stopnia, a wszystkie odsyłacze znajdowały się w oddzielnych akapitach. Otwierana strona ma pojawiad się w ramce TREŚĆ. Utwórz pliki ze stronami ryby, płazy Sprawdź jak działa wasza strona. Plik zapisz pod nazwą zadanie19c.html.