Ćwiczenie 9

Ramki

Ramki ułatwiają nawigowanie w wielostronicowych dokumentach HTML. 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). Chcąc uzyskać taki efekt musimy utworzyć "specjalną stronę", na której zdefiniujemy liczbę, wielkość 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.

Zauważmy od razu, że na podstawowej stronie nie powinno być żadnych znaczników poza blokiem nagłówkowym i definicją samych ramek. Dopiero znaczniki <NOFRAMES> pozwalają umieścić treść, która będzie wyświetlana przez przeglądarki nie interpretujące ramek. Znaczniki <BODY></BODY> mogą być umieszczane jedynie w obrębie znacznika <NOFRAMES>.

Przykład:

<HTML> <HEAD> <TITLE>Ramki</TITLE> </HEAD> <FRAMESET COLS="35%,*"> <FRAME SCROLLING="auto" NAME="spis" SRC="spis1.html"> <FRAME SCROLLING="yes" NAME="pokaz" SRC="nowa.html"> </FRAMESET> <NOFRAMES> <BODY> ... </BODY> </NOFRAMES> </HTML>

Wyjaśnienie znaczników

Kluczowe znaczenie ma para znaczników <FRAMESET> </FRAMESET>. Stanowią one, z dodatkowymi atrybutami, 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.

Para znaczników <NOFRAMES> </NOFRAMES>, służy do wprowadzenia elementów strony, które będą widoczne dla posiadacza przeglądarki innej niż Navigator i Internet Explorer (pomijając mniej znane programy). NOFRAMES jest ukłonem w stronę użytkowników, którzy nie mogą oglądać ramek w swojej przeglądarce, a więc wszystkich tych osób, które nie posiadają nowej przeglądarki. Jeśli natomiast czytelnik strony używa Navigatora lub Internet Explorera, wszelkie informacje między tymi znacznikami zostaną zignorowane. W ten sposób autor strony może utworzyć dokument uniwersalny, uniezależniony od konkretnej przeglądarki. Nietrudno się domyślić, że treść między znacznikami <NOFRAMES> </NOFRAMES> powinna stanowić swoisty równoważnik strony "ramkowej". Stosowany dość często komunikat "Twoja przeglądarka nie obsługuje ramek" - świadczy o braku szacunku dla gości odwiedzających naszą stronę.

Znacznik <FRAME> służy do wprowadzenia konkretnej ramki. Znacznik jest uzupełniany dodatkowymi atrybutami, mówiącymi o zawartości (zagnieżdżone strony), o tym, czy ramka zawiera suwaki, a także definiującymi nazwę ramki.

Atrybuty FRAMESET

Aby konstrukcja mogła działać, konieczne jest podzielenie strony - pionowe lub poziome. Poniższy kod zawiera informację o podzieleniu strony na dwie kolumny. Służy do tego atrybut COLS="x,y", umieszczany w otwierającym znaczniku <FRAMESET>. Liczby x i y służą do liczbowego określenia szerokości ramek. Możemy podać obie wartości w pikselach, w procentach szerokości strony, a także określić szerokość jednej kolumny i oznaczyć szerokość drugiej za pomocą wieloznacznika * (ma to sens przy podziale na większą liczbę kolumn lub wierszy).

Możemy zastosować atrybut BORDER="x", wprowadzonywany przez Navigatora i akceptowany przez Internet Explorera 4, który określa w pikselach szerokość obramowania rozdzielającego ramki. Atrybut BORDERCOLOR="kolor" pozwala określić kolor obramowania rozdzielającego ramki. Atrybut FRAMEBORDER="yes|no" lub "1|0" (zalecana jest "liczbowa" postać) pozwala wyświetlać lub chować obramowanie rozdzielające ramki (domyślnie jest ono wyświetlane). Atrybut jest na pewno akceptowany przez Navigatora 4.04 i Internet Explorera 4.01.

Uwaga: aby usunąć obramowania w Internet Explorerze, we FRAMESET oprócz FRAMEBORDER=0 powinniśmy jeszcze użyć atrybutu FRAMESPACING=0. Możemy także dodać BORDER=0, co usunie obramowania z Navigatora.

<FRAMESET COLS="35%,65%">

Gdybyśmy dzielili stronę na dwa wiersze, moglibyśmy, przez analogię, użyć konstrukcji:

<FRAMESET ROWS="200,*">

Atrybuty FRAME

Sam podział na ramki to nie wszystko. Należy im jeszcze przypisać jakieś dokument. Aby przypisać ramce dokument, musimy podać źródło dokumentu. Należy w tym celu użyć konstrukcji:

<FRAME SRC="nazwa_pliku.html">

Jeśli przywoływany plik jest spory objętościowo, zapewne nie zmieści się w całości w ramce. Możemy w takim razie użyć atrybutu, który wyświetli ramkę razem z suwakami. Stosowny atrybut ma postać:

<FRAME SCROLLING=yes>

Gdy dokument jest niewielki, np. zawiera jakiś tytuł, który ma pozostawać na ekranie, możemy zrezygnować z suwaków i wstawić atrybut SCROLLING="no", ustawiając zarazem odpowiednio szerokość lub wysokość przeznaczonej dla niego ramki. Gdy użyjemy atrybutu SCROLLING="auto", suwaki pojawią się wtedy, gdy dokument będzie większy niż ramka.

Ponieważ stosując ramki używamy jednocześnie często odsyłaczy, powinniśmy jakoś nazwać naszą ramkę. Nazwa będzie służyć jako punkt orientacyjny dla odsyłaczy.

<FRAME NAME="to_jest_nazwa">

Czytelnik dokumentu może regulować wielkość wyświetlonych ramek, przesuwając brzegi za pomocą myszki. Gdy jednak użyjemy w definicji atrybutu

<FRAME NORESIZE>

zabezpieczymy ramkę przed skalowaniem. Domyślnie, wszystkie ramki są skalowalne.

Atrybut FRAMEBORDER="1|0" pozwala ustalić, czy obramowanie danej ramki będzie wyświetlane, czy też nie. W przypadku IE należy jeszcze dodać FRAMESPACING=0 (nie przewiduje go jednak HTML 4).

Atrybut MARGINHEIGHT="x" wymusza dodatkowy odstęp (margines) u góry i u dołu konkretnej ramki, odsuwając treść od obramowania. Z kolei MARGINWIDTH="x" wymusza margines lewy i prawy.

Ostatecznie cała definicja ramki może mieć postać:

<FRAME SCROLLING="yes" NAME="to_jest_nazwa" SRC="nazwa_pliku.html">

W identyczny sposób określamy pozostałe ramki - tyle, ile kolumn (lub wierszy) zadeklarowaliśmy w definicji FRAMESET. W ten sposób zostaną "na dzień dobry" wczytane pewne strony początkowe.

Odsyłacze

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. 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.

Strona ta składa się z dwóch ramek. Lewa zawiera spis treści, natomiast do prawej są ładowane kolejne strony. Lewej nadano nazwę spis, natomiast prawej pokaz.

<FRAMESET COLS="35%,*"> <FRAME SCROLLING="auto" NAME="spis" SRC="spis4.html"> <FRAME SCROLLING="yes" NAME="pokaz" SRC="nowa.html"> </FRAMESET>

Nietrudno się domyślić, że należy dokonać pewnych manipulacji na stronie, która jest stale widoczna w lewej ramce o nazwie spis. Do ramki tej jest ładowana strona zawarta w pliku o nazwie - spis4.html.

Lista odnośników zawiera odsyłacze do odpowiednich stron. Należy je tak skonstruować, aby kliknięcie na odsyłaczu przywoływało wskazaną stronę, ale zarazem ładowało ją do ramki o nazwie pokaz. Można to uczynić za pomocą następującej konstrukcji:

<A HREF="nowa1.html" TARGET="pokaz">Odnośnik 1</A> <A HREF="nowa2.html" TARGET="pokaz">Odnośnik 2</A> <A HREF="nowa3.html" TARGET="pokaz">Odnosnik 3</A>

HREF="nazwa_ładowanej_strony"

dotyczy nazwy pliku, w którym jest zapisana dana strona

TARGET="nazwa_ramki"

dotyczy docelowego miejsca, do którego ma być załadowana strona. Widzimy tutaj rolę, jaką pełnią nazwy ramek. Oczywiście należy pamiętać o poprawnej konstrukcji, a więc <A HREF=...> </A>

Zwróćmy jeszcze uwagę na cztery zastrzeżone nazwy w przypadku atrybutu TARGET.

TARGET="_blank" TARGET="_self" TARGET="_parent" TARGET="_top"

W pierwszym przypadku przywoływany dokument zostanie załadowany do nowego, pustego okna (uruchomi nową kopię przeglądarki).
W drugim przypadku (przypadek domyślny) nowy dokument zamieni w ramce dokument, z którego dokonujemy skoku.
W trzecim przypadku przywoływany dokument zamieni dokument nadrzędny w hierarchii dla bieżącego dokumentu.
W czwartym przypadku 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.

NOFRAMES

NOFRAMES jest ukłonem w stronę użytkowników, którzy nie mogą oglądać ramek w swojej przeglądarce, a więc wszystkich tych osób, które nie posiadają nowej przeglądarki

Posiadacz starszej przeglądarki zobaczyłby pustą stronę, gdyby między <NOFRAMES></NOFRAMES> nie było żadnej informacji. Dlatego musimy w tym miejscu powtórzyć informację zawartą w jednej z ramek. Z poziomu tej strony mogą sięgać do konkretnych tematów, które będą oczywiście zajmować cały ekran, a nie ramkę, jak w Navigatorze czy Internet Explorerze. Naturalnie powinny się tutaj znaleźć stosowne odsyłacze hipertekstowe, które pozwolą nawigować w całym, wielostronicowym kursie HTML. Przypomnijmy, że gdy używamy nowych programów, wszelkie informacje między znacznikami NOFRAMES zostaną zignorowane.

Przykładowy zapis będzie miał zatem postać:

<NOFRAMES> <BODY> Twoja przeglądarka nie akceptuje ramek <BR> <HR> <H3>Ramki</H3> <UL TYPE="square"> <LI><A HREF="nowa1.html" TARGET="pokaz">Odnośnik 1</A> <LI><A HREF="nowa2.html" TARGRT="pokaz">Odnośnik 2</A> <LI><A HREF="nowa3.html" TARGET="pokaz">Odnośnik 3</A> </UL> </BODY> </NOFRAMES>

Uwaga: nie jest do końca jasne, czy NOFRAMES umieszczać w ramach FRAMESET, czy też poza nim. Uprzednio autorzy podręczników sugerowali tę drugą możliwość, ale w specyfikacji HTML 4 pojawiła się informacja, że NOFRAMES mogą być umieszczone w ramach FRAMESET "pierwszego rzędu". Niezależnie od tego przeglądarki interpretują poprawnie oba sposoby umieszczania NOFRAMES.

Ćwiczenie:

Wykorzystując powyższy edytor stwórz proszę ramkę i nadaj jej nazwę "index.html". Z lewej strony utwórz odnośniki do swoich dotychczasowych prac, które będą się ładowały do prawej ramki. Na koniec zapisz efekt swojej pracy w nowym pliku.

Jeżeli dotarłeś do tego miejsca, jest O.K.

Zapamiętaj!

Na podstawowej stronie nie powinno być żadnych znaczników poza blokiem nagłówkowym i definicją samych ramek.
Znaczniki <NOFRAMES></NOFRAMES> pozwalają umieścić treść, która będzie wyświetlana przez przeglądarki nie interpretujące ramek.
Znaczniki <BODY></BODY> mogą być umieszczane jedynie w obrębie znacznika <NOFRAMES>.
Znaczniki <FRAMESET></FRAMESET> z dodatkowymi atrybutami, stanowią 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.
Atrybut COLS dzieli strony w pionie.
- <FRAMESET COLS="35%,*%">
Atrybut ROWS dzieli strony w poziomie.
- <FRAMESET ROWS="35%,*%">

ebiznes.bitdom.com

autor