Ramki

Miejsca na stronie www nie muszš stanowić nierozerwalnej całoœci. Strona może być podzielona na częœci za pomocš ramek (nie należy mylić ramek z elementami tabel). Typowym przykładem użycia ramek jest umieszczenie w jednej spisu treœci i przeznaczenie drugiej na wywoływane dokumenty (odrębne strony HTML). Ramki, podczas przeglšdania strony można łatwo powiększać, przecišgajšc ich brzegi za pomocš myszki (o ile ramka nie jest zablokowana przez autora strony).

Strona z ramkami jest szczególnym rodzajem strony HTML — podczas jej wyœwietlania okno przeglšdarki jest dzielone na obszary, zwane ramkami. W każdej ramce może być wyœwietlana inna strona.

Sama strona z ramkami nie ma zawartoœci widocznej — jest tylko kontenerem, okreœlajšcym, jakie inne strony majš być wyœwietlane i jak to zrobić. Po kliknięciu hiperłšcza na stronie widocznej w ramce, strona, którš wskazywało to hiperłšcze, jest na ogół wyœwietlana w innej ramce, zwanej ramkš docelowš.

Strony z ramkami często używane w przypadku katalogów, list artykułów lub informacji oraz wszędzie tam, gdzie kliknięcie hiperłšcza z jednej ramki powoduje wyœwietlenie strony w innej ramce. Twórcy wykorzystujš strony z ramkami, ponieważ majš one wbudowane mechanizmy nawigacji i zapewniajš spójny interfejs użytkownika (czyli strukturę i układ ramek).

Podstawowš rolę w dokumencie z ramkami pełni specjalna strona, na której definiujemy 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, stronami podrzędnymi.

Struktura strony z ramkami

Na podstawowej stronie nie powinno być żadnych znaczników poza blokiem nagłówkowym i definicjš samych ramek.

Struktura podstawowej strony z ramkami może być następujšca:

<HTML>

    <HEAD>

        <TITLE>Strona zramkami</TITLE>

<HEAD>

<FRAMESET COLS="25%,*%">

    <FRAME SCROLLING="auto" NAME="lista edytorów" SRC="spisedyt.htm">

    <FRAME SCROLLING="yes" NAME="edytory" SRC="edyt.htm">

</FRAMESET>

</HTML>

Zamiast znaczników <BODY> i </BODY> występujš tu znaczniki <FRAMESET...> i </FRAMESET>, definiujšce strukturę ramek.

Aby konstrukcja mogła działać, konieczne jest podzielenie strony - pionowe lub poziome. Powyż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 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 * (reszta).

Możemy zastosować parametr BORDER=x, który okreœla w pikselach szerokoœć obramowania rozdzielajšcego ramki. Parametr BORDERCOLOR=kolor pozwala okreœlić kolor obramowania rozdzielajšcego ramki. Parametr 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).

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 przypisać ramce dokument, musimy podać Ÿródło dokumentu. Należy w tym celu użyć konstrukcji:

<FRAME SRC="nazwa_pliku.htm">

Byłoby dobrze, gdyby przywoływany plik znajdował się w tym samym katalogu, choć możemy także podać nazwę pliku z pełnš œcieżkš dostępu.

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ć parametru, który wyœwietli ramkę razem z suwakami. Stosowny parametr 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ć parametr SCROLLING=no, ustawiajšc zarazem odpowiednio szerokoœć lub wysokoœć przeznaczonej dla niego ramki. Gdy użyjemy parametru 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="moja nazwa">

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

<FRAME NORESIZE>

zabezpieczymy ramkę przed skalowaniem.. Domyœlnie, wszystkie ramki skalowalne.

Parametr FRAMEBORDER=1|0 pozwala ustalić, czy obramowanie danej ramki będzie wyœwietlane, czy też nie.

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

Parametr BORDERCOLOR=kolor okreœla kolor obramowania danej ramki.

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

<FRAME SCROLLING=yes NAME="moja nazwa" SRC="nazwa_pliku.htm">

W identyczny sposób okreœlamy pozostałe ramki - tyle, ile kolumn (lub wierszy) zadeklarowaliœmy w definicji FRAMESET.

Zastanówmy się, co zrobić, aby kliknięcie na odsyłaczu w jednej ramce automatycznie ładowało odpowiedniš stronę w innej ramce. Jest to podstawowa sprawa, jeœli chcemy wykorzystać ramki w dokumentach. Zauważmy, że kliknięcie na odsyłaczu w spisie treœci w lewej ramce powinno powodować załadowanie dokumentu do prawej ramki, a nie do ramki ze spisem treœci.

Przykład

Zancznik <!-- ...--> oznacza komentarz.

<!--index.htm - plik definiujšcy strukturę-->

<HTML>
    <HEAD>
        <TITLE>RAMKI</TITLE>
    </HEAD>
    <FRAMESET ROWS="17%,66%,13%">
        <FRAME SRC="naglowek.htm" SCROLLING="auto">
            <FRAMESET COLS="17%,78%">
                <FRAME SRC="menu.htm" SCROLLING="auto">
                <FRAME SRC="Moja_str.htm" SCROLLING="auto" NAME="glowny">
            </FRAMESET>
        <FRAME SRC="stopka.htm" SCROLLING="auto">
    </FRAMESET>
</HTML>
 

<!--Naglowek.htm - plik nagłówka-->

<HTML>
    <HEAD>
        <TITLE>Naglowek</TITLE>
    </HEAD>
    <BODY BGCOLOR="#00FFFF">
        <H1 ALIGN="center"><FONT COLOR="Blue"><U>Strona z ramkami</U></FONT></H1>
    </BODY>
</HTML>

<!--Menu.htm - plik menu-->

<HTML>
    <HEAD>
        <TITLE></TITLE>
    </HEAD>
    <BODY BGCOLOR="lime">
        <P ALIGN="left"><A HREF="Moja_str.htm" TARGET="glowny">Moja strona</A></P>
        <P ALIGN="left"><A HREF="Inna_str.htm" TARGET="glowny">Inna strona</A></P>
    </BODY>
</HTML>

 

<!--Stopka.htm - plik stopki-->

<HTML>
    <HEAD>
        <TITLE></TITLE>
    </HEAD>
    <BODY BGCOLOR="#FFFF00">
        <H2 ALIGN="center"><FONT COLOR="Fuchsia">Stopka strony</FONT></H2>
    </BODY>
</HTML>

W zestawie stron należy oczywiœcie zdefiniować również strony "Moja_str.htm" i "Inna_str.htm":

<!--Moja_str.htm-->

<HTML>
    <HEAD>
        <TITLE>Moja strona</TITLE>
    </HEAD>
    <BODY>

............

    </BODY>
<HTML>

 

<!--Inna_str.htm-->

<HTML>
    <HEAD>
        <TITLE>Inna strona</TITLE>
    </HEAD>
    <BODY>

............

    </BODY>
<HTML>

 

Jednej z ramek nadaliœmy nazwę:

<FRAME SRC="Moja_str.htm" SCROLLING="auto" NAME="glowny">  (w pliku index.htm).

Nazwa ta wykorzystana została do wskazania, gdzie powinien zostać "wgrany" kliknęty w "menu" plik:

<P ALIGN="left"><A HREF="Moja_str.htm" TARGET="glowny">Moja strona</A></P>    (w pliku menu.htm).

 

Zadanie

Zbuduj własnš stronę z ramkami o podobnej strukturze do przedstawionej w przykładzie. Nie wszystkie częœci ramek musza zostać użyte (np. może nie być nagłówka lub stopki). W menu umieœć odsyłacze do przynajmniej dwóch różnych podstron. Wykorzystaj swojš stronę z poprzednich lekcji..