Ramki


Ramki to dosyć dyskusyjny temat – nie radzą sobie z nimi zarówno przeglądarki jak i twórcy witryn. Ale wiedzę o nich posiadać należy!

Warto wspomnieć także iż ramki nie są dostępne gdy używasz DOCTYPE dla (X)HTML Strict i Transitional – musisz użyć specjalnej deklaracji Frameset (patrz poniżej).

Podział strony na wiersze i kolumny

Najprostsza strona korzystająca z ramek wygląda następująco:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" 
    "http://www.w3.org/TR/html4/frameset.dtd">
<html>
    <head>
        <title>Strona z ramkami</title>
    </head>
    <frameset cols="25%,*">
        <frame src="ramka1.html">
        <frame src="ramka2.html">
    <noframes>
    <body>
        Wersja strony dla przeglądarek nie obsługujących ramek
    </body>
    </noframes>
    </frameset>
</html>

 

Podstawową zmianą jest tu brak elementu <body> – zamiast niego pojawił się <frameset>. Służy on do określenia w jaki sposób strona powinna zostać podzielona na wiersze bądż kolumny.

Atrybut rows (podział na wiersze) lub cols (podział na kolumny).

Wysokość wierszy/szerokość kolumn można podać na trzy różne sposoby:

  • w procentach (np. 25%)
  • w pikselach (np. 100)
  • jako specjalną wartość „to co pozostało” (gwiazdka *)

W powyższym przykładzie strona została podzielona na dwie kolumny, o szerokości 25%, oraz szerokości odpowiadającej pozostałej części strony (tutaj 75%).

Strona podzielona na wiersze wyglądałaby następująco:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" 
    "http://www.w3.org/TR/html4/frameset.dtd">
<html>
    <head>
        <title>Strona z ramkami</title>
    </head>
    <frameset rows="100,*">
        <frame src="ramka1.html">
        <frame src="ramka2.html">
    <noframes>
    <body>
        Wersja strony dla przeglądarek nie obsługujących ramek
    </body>
    </noframes>
    </frameset>
</html>

Znaczniki <frame> –  za pomocą atrybutu src określają jaki dokument HTML załadować do odpowiadającej mu ramki.

Znacznik <noframes> zawiera treść strony przeznaczoną dla przeglądarek i wyszukiwarek które nie obsługują ramek.

Zagnieżdżanie ramek

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" 
    "http://www.w3.org/TR/html4/frameset.dtd">
<html>
    <head>
        <title>Strona z ramkami</title>
    </head>
    <frameset rows="40%,60%">
        <frameset cols="40%,*">
            <frame src="ramka1.html">
            <frame src="ramka2.html">   
        </frameset>
        <frameset cols=\"25%,*,100\">
            <frame src="ramka3.html">
            <frame src="ramka4.html">
            <frame src="ramka5.html">
        </frameset>
        <noframes> 
        <body> 
            Wersja strony dla przeglądarek nie obsługujących ramek 
        </body> 
        </noframes> 
    </frameset> 
</html>

 

Dodatkowe atrybuty ramek

<frame>

  • scrolling – określa czy suwaki do przewijania zawartości ramki mają być zawsze widoczne (wartość yes; jeżeli suwak jest niepotrzebny, wyświetlany jest jako nieaktywny), zawsze ukryte (wartość no) lub pokazywane tylko gdy są potrzebe (auto – jest to wartość domyślna)
    <frame src="ramka6.html" scrolling="...">

 

  • noresize – pozwala na zabezpieczenie przed zmianą rozmiaru ramki (za pomocą myszki można przeciągnąć belkę oddzielającą dwie ramki od siebie). Domyślnie rozmiary ramek można zmieniać.
    <frame src="ramka6.html" noresize>
  • frameborder – określa czy obramowanie ramki powinno być wyświetlane (1 lub yes) bądź nie (0 lub no). Domyślnie obramowania są wyświetlane.
  • <frame src="ramka6.html" frameborder="...">
     
  • marginwidth i marginheight – określają odpowiednio marginesy lewy/plawy oraz górny/dolny dla ramki. Zawartość ramki będzie odsunięta o podaną ilość pikseli od jej krawędzi.
    <frame src="ramka1.html" marginwidth="10" marginheight="50">
  • name – pozwala nadać ramce nazwę. Można ją użyć jako wartość atrybutu target znacznika <a>, gdy chcemy aby strona otworzyła się w innej ramce niż bieżąca.
    <frame src="ramka-menu.html" name="strona">
    
    W pliku ramka-menu.html znajdują się m.in. takie linie:
    <a href="ramka1.html" target="strona">Ramka 1</a><br>
    

Dla atrybutu target można przypisać także kilka specjalnych wartości:

  • _blank – strona zostanie otwarta w nowym oknie przeglądarki.
  • _top – strona zostanie otwarta bezpośrednio w oknie przeglądarki (bieżąca struktura ramek zostanie usunięta).
  • _parent – strona zostanie otwarta w ramce która jest ramką nadrzędną dla bieżącej ramki.
  • _self – strona zostanie otwarta bieżącej ramce (wartość domyślna).

 

Ramki pływające (iframe)

Podobnie jak zwykłe ramki, ramki pływające nie są dozwolone gdy chcesz używać DOCTYPE (X)HTML Strict – musisz użyć wersji Transitional lub Frameset. Z tego też powodu wszystkie przykłady będę prezentował na osobnych podstronach (ta strona używa DOCTYPE XHTML 1.0 Strict).

Ramki pływające umieszcza się wewnątrz treści strony przy pomocy znacznika <iframe>

<iframe src="ramka_iframe.html" width="400" height="300"> 
Twoja przeglądarka nie obsługuje ramek pływających! 
</iframe> 

W przykładzie powyżej podane są następujące atrybuty dla znacznika <iframe>:

  • src – określa adres dokumentu który zostanie załadowany do ramki;
  • width – określa szerokość ramki w pikselach;
  • height – określa wysokość ramki w pikselach;
  • frameborder – obramowanie
  • scrolling – określa czy suwaki do przewijania zawartości ramki mają być zawsze widoczne (wartość yes; jeżeli suwak jest niepotrzebny, wyświetlany jest jako nieaktywny), zawsze ukryte (wartość no) lub pokazywane tylko gdy są potrzebe (auto – jest to wartość domyślna)
  • marginwidth i marginheight – określają odpowiednio marginesy lewy/plawy oraz górny/dolny dla ramki.
  • hspace (odstęp w poziomie) i vspace (odstęp w pionie) – określenie szerokości odstępu od tekstu otaczającego ramkę pływającą.
  • name – pozwala nadać ramce nazwę – analogicznie jak w ramkach

Dodatkowo wewnątrz znacznika umieszczony jest tekst który pojawi się na stronie w przypadku gdy przeglądarka nie obsługuje ramek pływających.

Ramki pływające są traktowane jako obiekty „inline”, czyli są wyświetlane „w linii”, w odróżnieniu od elementów blokowych.

Zadania do wykonania: http://slawekrokicki.vizz.pl/technikum_cwiczenia/cwiczenia/html/cwiczenie_7.html