• Artykuł

            

Kurs HTML - Ramki Udostępnij na: Facebook

Autor: Marcin Bryk

Opublikowano: 2011-10-14

Większość z Was zapewne nie zdaje sobie sprawy z faktu, że na co dzień, podczas przeglądania przeróżnego rodzaju stron, mamy do czynienia z ramkami. W tym artykule postaram się przybliżyć sens ich zastosowania.

Implementacja

Co to w ogóle jest ramka? Najlepiej wyjaśni Wam ten oto przykład:

<html>
 <head>
 <meta http-equiv=”kontent-type” content=”text/html;/>
 </head> 
 <frameset cols=”200,*>
    <frame name “spis” src=”https://microsoft.com”/>
    <frame name “kontent” src=”https://microsoft.com”/>
   <noframes>
    <body>
        <a href=”index.html”>Strona</a>
    </body>
    </noframes>
 </frameset>
</html>

Jest to przykładowy kod opisujący to, czym jest ramka. Tak natomiast wygląda on w przeglądarce (Rys.1.):

Pomiędzy znacznikiem otwierającym, a zamykającym umieszczamy

Rys. 1. Ramki – przykład.

W strukturze ramek wyróżniamy trzy najważniejsze znaczniki:

frameset (w tym znaczniku zawiera się cała struktura ramek, wpisujemy go zawsze bezpośrednio po znaczniku </head>),

frame (polecenie to definiuje parametry każdej ramki),

noframes (służy jako alternatywa dla webmastera w przypadku, jeśli przeglądarka użytkownika nie obsługuje ramek).

Skupimy się teraz po kolei na każdym z tych znaczników i przedstawimy przykłady. Pierwszym zaprezentowanym znacznikiem jest frameset. Jak większość znaczników otwieramy go, wpisując <farameset>, natomiast zamykamy, wpisując </frameset>. Wewnątrz tego znacznika możemy określić szerokość kolumn oraz wysokość wierszy.

Stronę możemy podzielić na kolumny, stosując jeden z dwóch sposobów. Pierwszym sposobem jest określenie szerokości kolumn w pikselach, a robi się to tak:

<frameset cols=”a1, a2, a3,…”> </frameset>

Ciąg „a1, a2, a3,…” oznacza szerokość poszczególnych kolumn, podaną w pikselach, zaczynając od lewej strony. Ostatni sposób, niezbyt polecany, to podanie szerokości kolumn w procentach, w stosunku do całego ekranu. Wygląda to tak:

<frameset cols=”a1%, a2%, a3%,…”> </frameset>

Tutaj zamiast pikseli wpisujemy procenty. Najczęściej jednak używanym sposobem jest podawanie szerokości kolumn w pikselach. Tego sposobu używa się z jednego prostego względu. Otóż, umieszczając jakiekolwiek zdjęcie, baner, przycisk o stałym rozmiarze przy wartościach procentowych, zostanie ono albo powiększone i zrobi się pikselowe lub pomniejszy, że ciężko będzie cokolwiek dostrzec. Na pewno zauważyliście w przykładzie obrazującym ramki, że została wykorzystana w nim gwiazdka. Co ona oznacza? Każe przeglądarce po podanych wartościach w pikselach, np. 100, 200, 300, dopełnić do pełnej rozdzielczości. Wyjaśnię to na przykładzie. Jeżeli nasz monitor posiada rozdzielczość 1440 x 900 to kolejno utworzą się kolumny o szerokości 100, 200, 300 pikseli, a ostatnia będzie wynosiła tyle, ile wynik tego odejmowania: 1440-(100+200+300)=840. Więc ostatnia kolumna będzie wynosiła 840 pikseli. W związku z tym, jeżeli używacie ramek, polecam użyć „*”.

Przejdźmy teraz do wierszy. Ich wysokość określa się tak samo jak szerokość kolumn, z małym wyjątkiem. Zamiast cols wpisujemy rows. Tak to się prezentuje:

<frameset rows=”a1,a2,a3,…”></frameset>

Tak samo, jak w powyższym przykładzie, litery oznaczają wartość w pikselach, zaczynając od góry ekranu. Z procentami jest identycznie:

<frameset rows=”a1%,a2%,a3%,…”></frameset>

Tutaj również możemy wykorzystać gwiazdkę.

Teraz kolej na znacznik frame. Jego głównymi atrybutami są „src” oraz „name”. Wpisujemy je wewnątrz znacznika „frame”.

<frameset>
<Frame src=”ścieżka do strony” name=”nazwa ramki”/>
</frameset>

Taki oto kod interpretujemy następująco. Ścieżką strony może być bezpośredni odsyłacz http lub ścieżka do pliku, jaki ma się ładować w danej ramce. Nazwa ramki to nazwa ramki, więc tego nie trzeba tłumaczyć. Dodam, że każdy znacznik frame odpowiada kolejno każdej kolumnie, zaczynając od lewej strony ekranu i każdy wiersz rozpoczynając od góry ekranu. Na pewno zastanawiacie się, po co podawać nazwę ramki? Otóż podanie jej umożliwi potem wczytanie strony do ramki.

Ostatni znacznik noframes jest obecnie praktycznie nieużywany, ponieważ każda przeglądarka na tę chwilę obsługuje ramki. Stworzony został tylko dlatego, że na początku rozprzestrzeniania się ery Internetu, mało która przeglądarka obsługiwała ramki, w związku z czym webmaster musiał pamiętać o dodaniu właśnie tego znacznika. Deklaruje się go następująco:

<frameset>
    <noframes>
        <body>
            Alternatywna strona
        </body>
    </noframes>
</frameset>

Pomiędzy znacznikiem otwierającym, a zamykającym umieszczamy alternatywny kod, który nie zawiera ramek, aby przeglądarka użytkownika sprawnie mogła go przetworzyć. Może to być również odnośnik do innej strony.

Podsumowanie

Ramki nie są przeznaczone na każdą stronę. Przed ich zastosowaniem należy się zastanowić, czy aby na pewno są nam niezbędne. Zalety ramek to przede wszystkim:

  • wygodna nawigacja,
  • przechodzenie pomiędzy podstronami, które nie wymaga wczytywania wielu kilobajtów danych,

Wady ramek są następujące:

  • ramki przeznaczone są głównie do mniejszych, prostszych serwisów (duża ilość ramek wpływa niekorzystnie na stabilność strony),
  • odświeżanie strony, opartej na ramkach, zawsze prowadzi do powrotu na stronę główną serwisu.