<A HREF="../pliki/spis.html">SPIS&nbsp;TREŚCI</A>
Wstęp  -  Gotowiec  -  Znacznik FRAMESET  -  Znacznik FRAME  -  Znacznik NOFRAMES  -  Wczytywanie strony do ramki  -  Zagnieżdżanie ramek  -  Ramki lokalne  -  Wczytywanie strony do ramki lokalnej  -  Ostrzeżenie przed ramką

Ramki

W tym rozdziale dowiesz się:

WSTĘP

Co to są ramki? Spójrz na tą stronę - to jest właśnie przykład ramek. Po lewej jest pierwsza ramka (okienko): "Spis treści", a po prawej druga: "Kurs HTML" (to tu, gdzie właśnie czytasz ten tekst). Jeśli masz inny obraz na ekranie, spróbuj kliknąć tutaj, a następnie powróć na tą stronę, nie używając przycisków "Wstecz" ani "Dalej" z menu przeglądarki internetowej, a jedynie poprzez odsyłacze umieszczone na stronie (Spis treści/Ramki/Wstęp).

Jeśli nadal nie widzisz po lewej stronie spisu treści, oznacza to, że twoja przeglądarka internetowa nie akceptuje ramek i możesz pominąć cały ten rozdział (albo zaopatrzyć się w nowszą przeglądarkę). Przykro mi...

Jeśli jeszcze czytasz, oznacza to, że wszystko jest w porządku, więc przechodzimy dalej.
Popatrz na lewą ramkę ("Spis treści"). Zauważ, że jeśli przewijasz zawartość strony (prawa ramka), to "Spis treści" pozostaje nieruchomy (i odwrotnie). To jest właśnie zaleta ramek - możemy do jednej z nich wczytać np. wykaz tematów, a na ich zawartość przeznaczyć drugą ramkę. Dzięki temu przez cały czas będziemy mogli wybierać interesujący temat z wykazu. Dodatkowo wykaz tematów zostanie załadowany tylko jeden raz - przy pierwszym wczytaniu strony i nie będzie już potem opóźniał wczytywania.

Aby skorzystać z ramek, należy zbudować specjalną stronę startową, która ma zwykle małą objętość, a która stanowi "szkielet" dla całej struktury.

Przykład:

A oto przykładowy wygląd strony startowej "Kursu HTML":


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN">
<HTML>
<HEAD>
  <META HTTP-EQUIV="Content-type" CONTENT="text/html; charset=iso-8859-2">
  <META NAME="Description" CONTENT="Kurs języka HTML i stylów CSS dla zupełnie początkujących i dla zaawansowanych. Napisz własną stronę WWW nawet w ciągu jednego dnia i wprowadź ją do Internetu za darmo. Zapraszam!">
  <META NAME="Keywords" CONTENT="html, kurs, webmaster, www, css, style, koklowski, kokłowski">
  <META NAME="Author" CONTENT="Sławomir Kokłowski">
  <META HTTP-EQUIV="Content-Language" CONTENT="pl">
  <TITLE>Kurs HTML</TITLE>
</HEAD>
<FRAMESET COLS="180,*" BORDER="0" FRAMEBORDER="0" FRAMESPACING="0">
  <FRAME NAME="spis" NORESIZE FRAMEBORDER="0" SRC="pliki/spis.html">
  <FRAME NAME="strona" NORESIZE FRAMEBORDER="0" SRC="pliki/wprowadzenie.html">
  <NOFRAMES><A HREF="pliki/spis.html">Kurs HTML</A></NOFRAMES>
</FRAMESET>
</HTML>

Zwróć szczególną uwagę na polecenia napisane pogrubioną czcionką. Są to komendy dotyczące tworzenia struktury ramek. Będą one opisane w kolejnych punktach.


UWAGA!
Początkujący webmasterzy mają często następujący problem: tworzą stronę z dwiema ramkami: pierwszą - menu z odsyłaczami oraz drugą - gdzie ma być wczytywana wybrana strona. Okazuje się jednak, że po kliknięciu odsyłacza w menu, strona zostaje wczytana do menu, a nie do drugiej ramki, gdzie zostało przeznaczone dla niej miejsce. Dzieje się tak dlatego, ponieważ dla odsyłaczy w menu nie został określony atrybut TARGET="...", gdzie wpisuje się nazwę ramki, do której ma zostać wczytana strona. Jeśli chcesz uniknąć takich problemów, po stworzeniu swojej strony z ramkami, koniecznie przeczytaj rozdział: Wczytywanie strony do ramki!


Edytory HTML posiadają często specjalny generator ramek, który wspomaga ich tworzenie, pozwalając w prosty i wygodny sposób określić ich wygląd oraz atrybuty. Jeśli nie możesz sobie z tym poradzić, radzę poszukać takiego generatora w Twoim edytorze.




Czy stosowanie ramek jest bezpieczne?

Kiedy ramki były jeszcze nowinką, mówiło się, że należy ich unikać, ponieważ nie każda przeglądarka potrafi je zinterpretować. Czy dzisiaj stwierdzenie takie ma jeszcze sens, skoro ramki - zarówno tradycyjne jak i lokalne, czyli "pływające" - zostały oficjalnie wprowadzone w rekomendacji HTML 4 z roku 1998 (pierwsza odsłona: 18 grudnia 1997)? W informatyce taki okres do bardzo długo, więc producenci oprogramowana mieli aż nadto czasu na dostosowanie. Zdecydowana większość przeglądarek całkowicie radzi sobie ze wszystkimi rodzajami ramek, dlatego obawy o brak interpretacji nie są już raczej uzasadnione. To samo dotyczy drukowania ramek - można nawet stwierdzić, że jest ono jeszcze efektywniejsze niż dla normalnej strony, gdyż możemy wydrukować zawartość tylko wybranej ramki, np. z właściwą treścią strony, a pominąć drukowanie menu serwisu. Nie musimy się także martwić o "niepełny" wygląd serwisu w przypadku, gdy użytkownik wczyta jakąś podstronę poza ramkami, ponieważ dzięki JavaScript problem można wyeliminować. Dodatkowo światowe i polskie roboty sieciowe zajmujące się indeksowaniem stron w wyszukiwarkach również rozpoznają ramki i potrafią dotrzeć do kolejnych podstron serwisu na podstawie strony startowej zawierającej samą strukturę ramek.

Nie zrozum mnie źle - nie próbuję tutaj przekonywać, że ramki są najlepsze, ale nie sposób nie zauważyć ich zalet:

Oczywiście ramki posiadają również pewne wady:

O tym czy zastosować ramki czy może raczej np. tabelki powinniśmy zdecydować indywidualnie mając założenia do konkretnego projektu, tzn. to, na czym nam szczególnie zależy, a co jest mniej ważne.


GOTOWIEC

Z doświadczenia wiem, że stworzenie strony z ramkami często sprawia problemy początkującym webmasterom. Albo ramki wyglądają nie tak, jak byśmy chcieli, albo strona wybrana w spisie treści, zostaje wczytana do niewłaściwej ramki itd. Zapewne wszystkich ucieszy fakt, że po przeczytaniu tego krótkiego punktu, każdy będzie mógł stworzyć stronę zawierającą strukturę ramek, nawet bez potrzeby studiowania dalszej treści, znajdującej się na tej stronie. A więc zaczynamy...

Przykład 1:

Aby stworzyć taką stronę, należy wykonać następujące czynności:

  1. W swoim edytorze HTML stwórz nową stronę. Wykasuj wszystkie wpisy, jeśli edytor automatycznie przy tworzeniu nowego pliku, wpisał w nim jakieś informacje domyślne. Następnie wklej poniższy kod:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN">
    <HTML>
    <HEAD>
      <META HTTP-EQUIV="Content-type" CONTENT="text/html; charset=iso-8859-2">
      <META NAME="Description" CONTENT="Opis zawartości strony">
      <META NAME="Keywords" CONTENT="Wyrazy kluczowe">
      <META NAME="Author" CONTENT="Autor strony">
      <META HTTP-EQUIV="Content-Language" CONTENT="pl">
      <TITLE>Tytuł strony</TITLE>
    </HEAD>
    <FRAMESET COLS="180,*" BORDER="0" FRAMEBORDER="0" FRAMESPACING="0">
      <FRAME NAME="spis" NORESIZE FRAMEBORDER="0" SRC="spis.html">
      <FRAME NAME="strona" NORESIZE FRAMEBORDER="0" SRC="home.html">
      <NOFRAMES><A HREF="spis.html">Spis treści</A></NOFRAMES>
    </FRAMESET>
    </HTML> 
    
    W miejsce wyrażeń napisanych czcionką koloru czerwonego należy wpisać:

    Powyższą stronę należy zapisać na dysku pod nazwą index.html

  2. W analogiczny sposób stwórz nową stronę i wklej na niej następujący kod:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <HTML>
    <HEAD>
      <META HTTP-EQUIV="Content-type" CONTENT="text/html; charset=iso-8859-2">
      <META NAME="Author" CONTENT="Autor strony">
      <META HTTP-EQUIV="Content-Language" CONTENT="pl">
      <TITLE>Spis treści</TITLE>
    <STYLE TYPE="text/css">
    <!--
    A:hover {color: red}
    -->
    </STYLE>
    </HEAD>
    <BODY>
    <H2>Spis treści:</H2>
    <A TARGET="strona" HREF="home.html">Strona główna</A><BR>
    <A TARGET="strona" HREF="rozdzial1.html">Rozdział 1</A><BR>
    <A TARGET="strona" HREF="rozdzial2.html">Rozdział 2</A><BR>
    <A TARGET="strona" HREF="linki.html">Linki</A><BR>
    <A HREF="mailto:jan_kowalski@jakas.domena.pl">Kontakt</A><BR>
    </BODY>
    </HTML> 
    
    W miejsce wyrażeń napisanych czcionką koloru czerwonego należy wpisać:

    W analogiczny sposób można wpisać dalsze odsyłacze do innych podstron (rozdziałów) w Twoim serwisie internetowym lub inne informacje, które mają się znaleźć w spisie treści. Należy jedynie pamiętać, aby każdy nowy odsyłacz zawierał atrybut TARGET="strona" (patrz powyżej). Dla znacznika BODY można także określić atrybuty: BGCOLOR (kolor tła), BACKGROUND (tło obrazkowe), TEXT (kolor tekstu) i inne.

    Powyższą stronę należy zapisać na dysku pod nazwą spis.html

  3. W edytorze stwórz trzecią nową stronę i wklej na niej kod:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <HTML>
    <HEAD>
      <META HTTP-EQUIV="Content-type" CONTENT="text/html; charset=iso-8859-2">
      <META NAME="Author" CONTENT="Autor strony">
      <META HTTP-EQUIV="Content-Language" CONTENT="pl">
      <TITLE>Strona główna</TITLE>
    </HEAD>
    <BODY>
    <CENTER><H2>Strona główna</H2></CENTER>
    <P>
    To jest strona główna, która zostanie załadowana na starcie.
    </P>
    <P>
    Można tutaj podać informacje o tym, co znajduje się w serwisie, krótkie streszczenie
    ważniejszych rozdziałów, listę wprowadzonych ostatnio nowości, a także odsyłacze do
    szczególnie interesujących podstron itd. (np. kliknij <A HREF="test.html">tutaj</A>).
    Strona główna powinna zachęcić internautów do dokładniejszego zaznajomienia się z innymi
    rozdziałami serwisu oraz przedstawić ogólny zarys informacji w nim zawartych. 
    </P>
    </BODY>
    </HTML>
    
    W miejsce czerwonego tekstu: "To jest strona główna..." można wpisać dowolne informacje, które mają się znaleźć na stronie głównej, załadowanej przy starcie. Również tutaj - wewnątrz znacznika BODY - można oczywiście umieszczać dodatkowe znaczniki formatujące tekst, wyświetlające grafikę i inne. W przypadku odsyłaczy do podstron znajdujących się na tej stronie (jak i na wszystkich innych, które będą później wczytywane do prawej ramki, poprzez kliknięcie odpowiedniego odsyłacza ze spisu treści w lewej ramce), atrybut TARGET nie jest potrzebny (patrz powyżej). Dla znacznika BODY można dodatkowo określić atrybuty: BGCOLOR (kolor tła), BACKGROUND (tło obrazkowe), TEXT (kolor tekstu) itd.

    Powyższą stronę należy zapisać na dysku pod nazwą home.html


UWAGA! Strony: index.html, spis.html oraz home.html muszą znajdować się w tym samym katalogu.

Na koniec dobra rada: na każdej stronie w Twoim serwisie (również: spis.html oraz home.html, ale nie index.html), opartym na strukturze ramek, dobrze jest umieścić skrypt ostrzegający użytkownika przed ramką.



Przykład 2:

Aby stworzyć taką stronę, należy wykonać następujące czynności:

  1. W edytorze HTML stwórz następującą stronę startową (index.html):
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN">
    <HTML>
    <HEAD>
      <META HTTP-EQUIV="Content-type" CONTENT="text/html; charset=iso-8859-2">
      <META NAME="Description" CONTENT="Opis zawartości strony">
      <META NAME="Keywords" CONTENT="Wyrazy kluczowe">
      <META NAME="Author" CONTENT="Autor strony">
      <META HTTP-EQUIV="Content-Language" CONTENT="pl">
      <TITLE>Tytuł strony</TITLE>
    </HEAD>
    <FRAMESET ROWS="80,*" BORDER="0" FRAMEBORDER="0" FRAMESPACING="0">
      <FRAME NAME="banner" NORESIZE SCROLLING="no" FRAMEBORDER="0" SRC="banner.html">
      <FRAMESET COLS="180,*" BORDER="0" FRAMEBORDER="0" FRAMESPACING="0">
        <FRAME NAME="spis" NORESIZE FRAMEBORDER="0" SRC="spis.html">
        <FRAME NAME="strona" NORESIZE FRAMEBORDER="0" SRC="home.html">
      </FRAMESET>
      <NOFRAMES><A HREF="spis.html">Spis treści</A></NOFRAMES>
    </FRAMESET>
    </HTML> 
    
    W miejsce czerwonego tekstu: "80" należy wpisać wysokość górnej ramki (z bannerem) podaną w pikselach (wartość procentowa nie jest w tym przypadku zalecana), która zależy od wymiarów bannera.
    Natomiast "180" oznacza szerokość lewej ramki ("Spis treści") podaną w pikselach.

  2. Utwórz w edytorze nową stronę banner.html i wklej na niej następujący kod:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <HTML>
    <HEAD>
      <META HTTP-EQUIV="Content-type" CONTENT="text/html; charset=iso-8859-2">
      <META NAME="Author" CONTENT="Autor strony">
      <META HTTP-EQUIV="Content-Language" CONTENT="pl">
      <TITLE>Banner</TITLE>
    </HEAD>
    <BODY>
    <CENTER><IMG SRC="logo.gif"></CENTER>
    </BODY>
    </HTML> 
    
    W miejsce czerwonego tekstu: "logo.gif" podaj lokalizację na dysku, gdzie znajduje się obrazek z bannerem Twojej strony. Animowany banner można stworzyć przy użyciu takich programów jak np.: Animation Shop czy Ulead GIFAnimator itd. Może on mieć przykładowo rozmiary 400x50.

  3. Utwórz w edytorze stronę spis.html, taką samą jak w poprzednim przykładzie.

  4. Utwórz w edytorze stronę home.html, taką samą jak w poprzednim przykładzie.

UWAGA! Strony: index.html, banner.html, spis.html oraz home.html muszą znajdować się w tym samym katalogu.

Na każdej stronie w Twoim serwisie (również: spis.html oraz home.html, ale nie index.html), opartym na strukturze ramek, dobrze jest umieścić skrypt ostrzegający użytkownika przed ramką.



Informacje zawarte powyżej, powinny pozwolić Ci, na stworzenie strony, zawierającej jedną z dwóch najczęściej spotykanych struktur ramek. Jednak jeśli chcesz poznać bardziej szczegółowe informacje na ten temat i przez to poruszać się bardziej swobodnie w tym obszarze, zachęcam do przeczytania dalszych rozdziałów umieszczonych poniżej. Poza tym dowiesz się tam m.in. jak wstawić ramkę lokalną w postaci "okienka" wprost na stronie.


ZNACZNIK FRAMESET

<FRAMESET>...</FRAMESET>

W tym znaczniku zawierają się całe ramy struktury strony z ramkami. Należy go wpisywać zawsze bezpośrednio po znaczniku zamykającym </HEAD>.

Wewnątrz znacznika (otwierającego) <FRAMESET> wpisuje się następujące atrybuty:
  1. Podział strony na:

    1. Kolumny:
      <FRAMESET COLS="x1,x2,...">...</FRAMESET>
      lub
      <FRAMESET COLS="x1%,x2%,...">...</FRAMESET>

      gdzie "x1, x2,..." oznaczają szerokość kolejnych kolumn (począwszy od lewej strony) w pikselach, natomiast "x1%, x2%,..." oznaczają szerokość kolejnych kolumn w procentach całego ekranu. W miejsce kropek można wpisać dalsze wartości; w razie podania tylko dwóch liczb, kropki oraz końcowy przecinek należy pominąć.
      W większości przypadków bardziej przydatne okazują się wartości pikselowe (np. tworzenie ramki z menu lub bannerem).

      Z wartości pikselowych można skorzystać np. wtedy, gdy w jednej ramce umieszczamy menu z graficznymi przyciskami, które mają ustaloną szerokość (w pikselach). W takim przypadku, niezależnie od rozdzielczości ekranu, ramka z przyciskami będzie miała zawsze taką samą szerokość, dzięki czemu nie będą one nigdy schowane, (przy mniejszych rozdzielczościach) ani nie pozostanie puste miejsce (w wyższych rozdzielczościach). Natomiast z wartości procentowych warto skorzystać, jeśli zależy nam, aby okno przeglądarki było zawsze podzielone w takich samych proprocjach (np. 1:4).

      Możliwe jest również podanie znaku "*" (gwiazdka). Jeśli np. wpiszemy: "50,100,150,*", a rozdzielczość ekranu wynosi 800x600, to strona zostanie podzielona na cztery kolumny o szerokościach odpowiednio: 50, 100, 150 oraz (800 - 50 - 100 - 150 = 500) pikseli. Zatem znak "*" oznacza dopełnienie do pełnej rozdzielczości ekranu. Możliwe byłoby oczywiście wpisanie zamiast tego: "50,100,150,500", ale jeśli ktoś pracuje w innej rozdzielczości ekranu, efekt mógłby być niezamierzony. Dlatego podczas podawania wymiarów ramek w pikselach, staraj się zawsze użyć przynajmniej jednej "gwiazdki"! Znak "gwiazdki" można również wpisać w przypadku wartości procentowych (np.: "10%,30%,*"). Wtedy oznacza on dopełnienie do 100% szerokości całego ekranu (czyli w tym wypadku "10%,30%,60%").

      Dopuszczalne jest również podanie kilku znaków "gwiazdek". Można wtedy wykorzystać tzw. współczynniki proporcjonalności. Przykładowo: wpisanie "25%,1*,2*,15%" (lub "25%,*,2*,15%") spowoduje wyświetlenie czterech ramek o rozmiarach odpowiednio: 25%, [(100% - 25% - 15%) / (1 + 2)] * 1 = 20%, [(100% - 25% - 15%) / (1 + 2)] * 2 = 40%, 15%. Liczby 1 oraz 2 są właśnie współczynnikami proporcjonalności.

      Przykład:

      Ilustracja polecenia COLS="25%,1*,2*,15%":
      Przykład


      Zasady obliczania wymiarów ramek, dla których podane zostały "gwiazdki" są następujące:

      • Najpierw od całej rozdzielczości ekranu odejmujemy sumaryczny rozmiar wszystkich ramek, których wymiary zostały podane bezpośrednio bez "gwiazdek":
        100% - 25% - 15% = 60%
      • Następnie uzyskaną długość dzielimy przez sumę wartości wszystkich współczynników proporcjonalności:
        60% / (1 + 2) = 20%
      • Na końcu obliczony wynik mnożymy przez każdy ze współczynników proporcjonalności:
        20% * 1 = 20% (druga ramka), 20% * 2 = 40% (trzecia ramka).

      Widać, że trzecia ramka jest dwa razy większa od drugiej, ponieważ ma dwa razy większy współczynnik proporcjonalności. Metoda ta może być przydatna w sytuacji, kiedy np. pierwsza ramka ma mieć ustalony rozmiar (bez względu na rozdzielczość ekranu), dajmy na to 200 pikseli, ponieważ znajdują się w niej przyciski menu o takiej właśnie szerokości. Pozostałe dwie ramki mogą mieć dowolną szerokość, chcemy tylko, aby druga była dwa razy szersza od trzeciej. Należy wtedy podać: "200,2*,*" (ten sam wynik daje wpisanie: "200,67%,33%").



      Jeśli nie używasz wartości procentowych do określania rozmiarów ramek, lecz tylko pikseli, w poleceniu powinna pojawić się przynajmniej jedna gwiazdka! Umożliwi to poprawne wyświetlenie strony w różnych rozdzielczościach ekranu i przy różnych wielkościach okna przeglądarki. Pamiętaj, że użytkownicy mogą pracować w innej rozdzielczości ekranu niż Ty!



    2. Wiersze:
      <FRAMESET ROWS="y1,y2,...">...</FRAMESET>
      lub
      <FRAMESET ROWS="y1%,y2%,...">...</FRAMESET>

      gdzie "y1, y2,..." oznaczają wysokość kolejnych wierszy (począwszy od góry) w pikselach, natomiast "y1%, y2%,..." oznaczają wysokość kolejnych wierszy w procentach całego ekranu. W miejsce kropek można wpisać dalsze wartości.

      Podobnie jak w przypadku kolumn możliwe jest podanie znaku gwiazdki "*", jako dopełnienie do pełnej wysokości ekranu, a także użycie współczynników proporcjonalności.


  2. Kolor obramowania (Internet Exploreri Netscape 6):
    <FRAMESET BORDERCOLOR="kolor">...</FRAMESET>

    gdzie "kolor" oznacza definicję koloru [zobacz: Kolory].

    Atrybut BORDERCOLOR nie wchodzi w skład specyfikacji HTML 4.01!


  3. Szerokość obramowania:
    <FRAMESET BORDER="x">...</FRAMESET>

    gdzie "x" oznacz szerokość obramowania dzielącego sąsiadujące ramki (w pikselach).

    Atrybut BORDER nie wchodzi w skład specyfikacji HTML 4.01!


  4. Schowanie obramowania dzielącego ramki (Internet Explorer):
    <FRAMESET FREMEBORDER="typ">...</FRAMESET>

    gdzie jako "typ" należy wpisać:
    • "0" (lub "no") - schowanie obramowania,
    • "1" (lub "yes") - pokazanie obramowania (domyślnie).

    Poza tym w Internet Explorerze oprócz FRAMEBORDER="0" powinniśmy wpisać FRAMESPACING="0" chyba, że podamy BORDER="0".

    Atrybuty FRAMEBORDER oraz FRAMESPACING dla znacznika FRAMESET nie wchodzą w skład specyfikacji HTML 4.01!



Przykład:

Przykład strony podzielonej na kolumny i wiersze:
Przykład 1


Przykład strony podzielonej na ramki o zwiększonej szerokości obramowania i zmienionym kolorze obramowania:
Przykład 2


ZNACZNIK FRAME

<FRAMESET>
     <FRAME SRC="ścieżka dostępu do strony" NAME="Tu podaj nazwę ramki">
</FRAMESET>

gdzie jako "ścieżka dostępu do strony" należy podać lokalizację na dysku, gdzie znajduje się strona, która na starcie ma zostać wczytana do ramki.
Natomiast jako "Tu podaj nazwę ramki" można wpisać dowolną nazwę, jaką ma otrzymać ramka

Nazwa ramki musi rozpoczynać się od litery! Lepiej również nie używać: wielkich liter, znaków specjalnych (np.: \ / : * ? " < > | ), spacji (w zamian używaj podkreślnika "_", ale nie na początku), polskich liter. Każda ramka powinna mieć unikatową nazwę!

Podanie nazwy ramki umożliwi później wczytywanie do niej stron, przy użyciu odsyłaczy, znajdujących się w innych ramkach (np. w menu). Można w takim przypadku uniknąć wczytywania strony do ramki, w której znajduje się np. menu i "zmusić" przeglądarkę, aby wczytała ją do tej ramki, do której chcemy. Należy pamiętać, aby każda z tworzonych ramek miała inną nazwę!


Polecenie to pozwala zdefiniować parametry poszczególnych ramek, a także podać jakie strony mają zostać tam załadowane przy starcie ("ścieżka dostępu do strony").

Możliwe jest tutaj zastosowanie dodatkowych atrybutów:
  1. Kolor obramowania (Internet Explorer):
    <FRAME BORDERCOLOR="kolor">

    gdzie "kolor" oznacza definicję koloru [zobacz: Kolory].

    Atrybut BORDERCOLOR nie wchodzi w skład specyfikacji HTML 4.01 - zaleca się stosowanie stylów.


  2. Przewijanie zawartości ramki:
    <FRAME SCROLLING="typ">

    gdzie jako "typ" należy podać:
    • "yes" - umożliwia przewijanie zawartości ramki,
    • "no" - ramka nie będzie przewijana
    • lub "auto" - ramka będzie przewijana (pojawią się suwaki), gdy jej zawartość nie zmieści się w całości na ekranie (domyślnie).


  3. Zabezpieczenie przed zmianą rozmiarów ramki:
    <FRAME NORESIZE>

    Taka ramka nie będzie skalowana, czyli nie będzie możliwa zmiana jej rozmiarów przez przeciągnięcie myszką.


  4. Dodatkowe marginesy:
    <FRAME MARGINWIDTH="x" MARGINHEIGHT="y">

    gdzie "x" oznacza szerokość marginesu poziomego, a "y" oznacza wysokość marginesu pionowego (w pikselach).


  5. Schowanie obramowania dzielącego ramki:
    <FRAME FREMEBORDER="typ">

    gdzie jako "typ" należy wpisać:
    • "0" (lub "no") - schowanie obramowania,
    • "1" (lub "yes") - pokazanie obramowania (domyślnie).

    Poza tym w Internet Explorerze oprócz FRAMEBORDER="0" powinniśmy wpisać do znacznika FRAMESET atrybut FRAMESPACING="0" chyba, że podamy tam BORDER="0".


Przykład:

Przykład strony podzielonej na ramki o zmienionej szerokości marginesów, z zabezpieczeniem przed skalowaniem oraz z brakiem możliwości przewijania prawej ramki:
Przykład


ZNACZNIK NOFRAMES

<NOFRAMES>Treść alternatywna</NOFRAMES>

Między znacznikami <NOFRAMES> oraz </NOFRAMES> umieszcza się polecenia, które mają zostać wykonane w przypadku, gdy przeglądarka internetowa użytkownika nie akceptuje ramek. Może to być np. podanie odsyłacza do strony alternatywnej (bez ramek) albo spis treści z odnośnikami do wszystkich stron serwisu. Nie zalecam umieszczania tutaj tekstu typu: "Twoja przeglądarka nie obsługuje ramek"! Czy nie lepiej zamiast tego wstawić po prostu np. odnośnik do "ramkowego" spisu treści, który i tak już wcześniej wykonaliśmy? Co prawda strona nie będzie się wtedy prezentowała tak jak w ramkach, ale przynajmniej będzie dostępna dla wszystkich.

Staraj się zawsze umieszczać znacznik NOFRAMES na stronie startowej ramek. Jeśli tego nie zrobisz, użytkownicy dysponujący starszymi przeglądarkami, nie będą mogli dostać się na Twoją stronę!


WCZYTYWANIE STRONY DO RAMKI

<A TARGET="cel" HREF="Tu podaj ścieżkę dostępu do strony">Opis</A>

Jak widać powyższe polecenie jest odsyłaczem. Posiada on jednak dodatkowy atrybut TARGET="...", pozwalający wczytać stronę do wybranej przez nas ramki, w szczególności innej niż ta, w której znajduje się odnośnik (przydatne przy tworzeniu spisu treści).

Zamiast tekstu "Tu podaj ścieżkę dostępu do strony" należy podać lokalizację na dysku, gdzie znajduje się strona, do której chcemy się przenieść.

Natomiast jako "cel" należy podać:
  1. "nazwę ramki", do której ma zostać załadowana strona (nazwę ramki definiuje się wcześniej na stronie startowej w znaczniku FRAME). Jeśli strona ma zostać wczytana do tej samej ramki, w której znajduje się odsyłacz, można pominąć atrybut TARGET.

    Podanie nazwy ramki jest przydatne, w przypadku tworzenia strony, składającej się z kilku ramek, z których jedna zostanie przeznaczona na menu z odsyłaczami do wszystkich podstron serwisu. Wtedy właśnie, aby po kliknięciu odnośnika z menu, strona została wczytana nie do menu, lecz do innej przeznaczonej na to ramki, należy użyć tego polecenia.
    W przypadku zwykłych odsyłaczy znajdujących się na normalnych stronach, pomija się ten atrybut.

    Jeśli podamy nazwę ramki, która nie istnieje, spowoduje to otworzenie nowego okna. Następnie będzie można do niego wczytywać dokumenty, podając tą samą nazwę (jeśli użytkownik wcześniej go nie zamknie).

  2. Polecenia specjalne:
    • "_self" - strona zostanie załadowana do bieżącej ramki, czyli do tej na której został wpisany powyższy odsyłacz (domyślnie - można pominąć ten atrybut, a efekt będzie ten sam),
    • "_top" - strona zostanie wstawiona w miejsce dokumentu pierwszego w hierarchii (strony głównej),
    • "_parent" - strona zostanie wstawiona w miejsce dokumentu nadrzędnego w hierarchii, czyli w miejsce strony startowej struktury ramek, w której znajduje się dany odsyłacz (w przypadku większej ilości zagnieżdżonych stron startowych),
    • "_blank" - strona zostanie załadowana w nowym oknie (uruchomi nową kopię przeglądarki).


Przykład:

Aby po wybraniu odsyłacza z lewej ramki tego kursu ("Spis treści"), dana strona została wczytana do prawej (tu gdzie właśnie czytasz), należy na stronie w lewej ramce wpisać: <A TARGET="strona" HREF="ścieżka dostępu">Opis</A> (prawa ramka w tym kursie została nazwana właśnie "strona").

Przykład zastosowania TARGET="_self" (domyślnie - można pominąć atrybut TARGET, aby uzyskać ten sam efekt):
Przykład


Przykład zastosowania polecenia TARGET="_top":
Przykład


A oto przykład zastosowania TARGET="_blank" :
Przykład




Polecenia "_top" i "_parent" działają bardzo podobnie. Różnicę można zobrazować na przykładzie następującej strony startowej struktury ramek, stanowiącej stronę główną (index.html):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN">
<HTML>
<HEAD>
  <META HTTP-EQUIV="CONTENT-TYPE" CONTENT="text/html; charset=iso-8859-2">
  <TITLE>Strona główna</TITLE>
</HEAD>
<FRAMESET COLS="40%,*">
  <FRAMESET ROWS="50%,*">
    <FRAME SRC="test.html" NAME="lewagorna">
    <FRAME SRC="test.html" NAME="lewadolna">
  </FRAMESET>
  <FRAME NAME="prawa" SRC="index2.html">
</FRAMESET>
</HTML> 

Strona index2.html, która zostanie wczytana do ostatniej ramki (patrz powyżej), wygląda następująco:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN">
<HTML>
<HEAD>
  <META HTTP-EQUIV="CONTENT-TYPE" CONTENT="text/html; charset=iso-8859-2">
  <TITLE>Ramka podrzędna</TITLE>
</HEAD>
<FRAMESET ROWS="30%,*">
  <FRAME NAME="prawagorna" SRC="test.html">
  <FRAME NAME="prawadolna" SRC="target.html">
</FRAMESET>
</HTML> 

Jak widać jest to strona zawierająca dwie struktury ramek: index.html oraz index2.html (ta druga znajduje się wewnątrz pierwszej - w prawej ramce głównej). Teraz jeśli na stronie target.html umieścimy odsyłacz z atrybutem TARGET="_top", strona zostanie wczytana w miejsce index.html (strony głównej). Natomiast w przypadku TARGET="_parent", strona będzie wczytana w miejsce index2.html (strony startowej podrzędnej struktury ramek, w której znajduje się odsyłacz).

Przykład:

Zobacz powyższy przykład.


Taki efekt można uzyskać tylko w przypadku określenia dwóch oddzielnych stron startowych, z których jedna jest podrzędna w stosunku do drugiej. Jeżeli stworzymy taką samą strukturę przy użyciu pojedynczej strony startowej (zobacz: Zagnieżdżanie ramek), atrybut TARGET="_top" będzie równoważny TARGET="_parent":

Przykład



Jak łatwo zauważyć, za pomocą pojedynczego odsyłacza można wczytać nową stronę tylko do jednej ramki jednocześnie. Jeśli chcielibyśmy aby po kliknięciu odnośnika zmieniła się zawartość dwóch (lub więcej) ramek, można w tym celu użyć JavaScriptu:

<A HREF="javascript:void(null)" onclick="parent.nazwaramki1.location.href = 'adres1.html'; parent.nazwaramki2.location.href = 'adres2.html'; return false">...</A>

gdzie "nazwaramki1" i "nazwarammki2" to wartości atrybutów NAME nadane znacznikom FRAME na stronie startowej ramek.
Natomiast "adres1.html" oraz "ades2.html" to adresy (lub względne ścieżki dostępu) stron, które chcemy wczytać do wskazanych ramek.

W niektórych przypadkach zamiast parent.nazwaramki trzeba użyć top.nazwaramki (patrz powyżej).

Możliwe jest oczywiście załadowanie więcej niż dwóch ramek. Należy wtedy wpisać dalsze polecenia typu: parent.nazwaramki.location.href = 'adres.html', oddzielone średnikami (";").

Sposób ten nadaje się również dla ramek lokalnych.


ZAGNIEŻDŻANIE RAMEK

<FRAMESET COLS="x1,x2,... ,*">
     <FRAME NAME="Nazwa_ramki_1" SRC="adres strony 1">
     <FRAMESET ROWS="y1%,... ,*">
          <FRAME NAME="Nazwa_ramki_2" SRC="adres strony 2">
          (...)
          <FRAME NAME="Nazwa_ramki_3" SRC="adres strony 3">
     </FRAMESET>
     (...)
     <FRAME NAME="Nazwa_ramki_4" SRC="adres strony 4">
</FRAMESET>

gdzie kolorem czerwonym zaznaczono strukturę nadrzędną (zewnętrzną), natomiast kolorem żółtym zaznaczono strukturę podrzędną (wewnętrzną).
Możliwe jest oczywiście dalsze zagnieżdżanie.

Dzięki zagnieżdżaniu ramek możliwe jest zbudowanie struktury, w której jedna ramka będzie umieszczona wewnątrz drugiej. Można np. ramkę która jest kolumną, podzielić następnymi ramkami dodatkowo na wiersze. Zasada zagnieżdżania polega na zastąpieniu dowolnego znacznika FRAME, będącego pojedynczą ramką, nowym znacznikiem FRAMESET, wewnątrz którego mogą znajdować się dalsze ramki (FRAME).

Zauważ, że w składni polecenia powyżej, struktura ramek (FRAMESET) która jest podrzędna została bardziej wcięta (przesunięta w prawo) niż nadrzędna. Nie jest to konieczne, ale bardzo ułatwia tworzenie i czytanie kodu, dlatego polecam używanie takiego sposobu wpisywania.

Przykład:

Po wpisaniu:

<FRAMESET COLS="30%,*%">
  <FRAME SRC="test.html">
  <FRAMESET ROWS="30%,*">
    <FRAME SRC="test.html">
    <FRAME SRC="test.html">
  </FRAMESET>
</FRAMESET>

Otrzymamy: Przykład


RAMKI LOKALNE

- pływające (ang. inline)

(obsługuje Internet Explorer 3, Netscape 6, Opera 5)
<IFRAME SRC="ścieżka dostępu do strony">Twoja przeglądarka nie akceptuje ramek!</IFRAME>

gdzie jako "ścieżka dostępu do strony" należy podać lokalizację na dysku, gdzie znajduje się strona, która na starcie ma zostać wczytana do ramki.


Ramki lokalne są umieszczane bezpośrednio na stronie w postaci pojedynczych okienek o różnych rozmiarach. Dzięki temu możemy do takiej ramki wczytywać inne dokumenty. Tekst "Twoja przeglądarka nie akceptuje ramek", który można wpisać między znacznikiem otwierającym a zamykającym (patrz powyżej), ukaże się, jeśli przeglądarka internetowa użytkownika nie akceptuje ramek lokalnych. Oczywiście można tutaj wpisać dowolny tekst, albo też umieścić odsyłacz do strony alternatywnej - bez ramek.

W przypadku ramek lokalnych stosuje się dodatkowe atrybuty:
  1. Rozmiar ramki (lokalnej):
    <IFRAME SRC="ścieżka dostępu" WIDTH="x" HEIGHT="y">...</IFRAME>
    lub
    <IFRAME SRC="ścieżka dostępu" WIDTH="x%" HEIGHT="y%">...</IFRAME>

    gdzie "x" oznacza szerokość w pikselach, a "y" oznacza wysokość (również w pikselach). Natomiast "x%" oznacza szerokość w procentach całego ekranu, a "y%" oznacza wysokość (również w procentach).

    Przykład:

    WIDTH="80%" HEIGHT="100"



  2. Nazwa ramki lokalnej:
    <IFRAME SRC="ścieżka dostępu" NAME="Tu wpisz nazwę ramki">...</IFRAME>

    Nadanie nazwy ramce, umożliwia później wczytywanie do niej innych stron (zobacz: Wczytywanie strony do ramki lokalnej).

    Nazwa ramki lokalnej musi spełniać takie same wymagania jak zwykła ramka!


  3. Usunięcie obramowania:
    <IFRAME SRC="ścieżka dostępu" FRAMEBORDER="0">...</IFRAME>

    Przykład:




  4. Usunięcie suwaka do przewijania zawartości ramki:
    <IFRAME SRC="ścieżka dostępu" SCROLLING="no">...</IFRAME>

    Przykład:



    Taką ramkę można jednak przewinąć. W tym celu ustaw wskaźnik myszki w dowolnym miejscu wewnątrz ramki i naciśnij lewy klawisz. Teraz cały czas trzymając wciśnięty lewy przycisk, "przejedź" wskaźnikiem poniżej ramki (tak jak się zaznacza tekst w edytorze). Jeśli wszystko było wykonane poprawnie, ramka powinna się przewinąć.
    To samo można oczywiście zrobić w górę (jak również w lewo i w prawo).


  5. Dodatkowe marginesy wewnątrz ramki:
    <IFRAME SRC="ścieżka dostępu" MARGINWIDTH="x" MARGINHEIGHT="y">...</IFRAME>

    gdzie "x" oznacza szerokość marginesu poziomego, a "y" oznacza wysokość marginesu pionowego (w pikselach).

    Przykład:

    MARGINWIDTH="100" MARGINHEIGHT="80"



  6. Odległość ramki od sąsiadujących elementów strony (nie obsługuje Netscape 7 i Opera 6):
    <IFRAME SRC="ścieżka dostępu" HSPACE="x" VSPACE="y">...</IFRAME>

    gdzie "x" oznacza poziomą odległość w pikselach, a "y" pionową odległość (również w pikselach).

    Atrybuty HSPACE oraz VSPACE dla znacznika IFRAME nie wchodzą w skład specyfikacji HTML 4.01 - zaleca się stosowanie stylów.

    Przykład:

    HSPACE="50"

    VSPACE="50"


  7. Ustawienie ramki lokalnej na stronie:
    <IFRAME SRC="ścieżka dostępu" ALIGN="rodzaj">...</IFRAME>

    gdzie jako "rodzaj" należy wpisać:
    • "left" - ramka ustawiona po lewej stronie, względem otaczającego tekstu,
    • "right" - ramka ustawiona po prawej stronie względem tekstu,
    • "top" - tekst ustawiony na górze ramki,
    • "middle" - tekst ustawiony na średniej wysokości względem ramki
    • lub "bottom" - tekst ustawiony na dole ramki (domyślnie)

    Atrybut ALIGN dla znacznika IFRAME jest zdeprecjonowany przez specyfikację HTML 4.01 - zaleca się stosowanie stylów.

    Przykład:

    ALIGN="left", ALIGN="left", ALIGN="left", ALIGN="left", ALIGN="left", ALIGN="left", ALIGN="left", ALIGN="left", ALIGN="left", ALIGN="left", ALIGN="left", ALIGN="left", ALIGN="left", ALIGN="left", ALIGN="left", ALIGN="left", ALIGN="left", ALIGN="left", ALIGN="left", ALIGN="left", ALIGN="left", ALIGN="left", ALIGN="left", ALIGN="left", ALIGN="left", ALIGN="left", ALIGN="left", ALIGN="left", ALIGN="left", ALIGN="left", ALIGN="left", ALIGN="left", ALIGN="left", ALIGN="left", ALIGN="left", ALIGN="left", ALIGN="left", ALIGN="left", ALIGN="left", ALIGN="left", ALIGN="left", ALIGN="left", ALIGN="left", ALIGN="left", ALIGN="left", ALIGN="left", ALIGN="left", ALIGN="left", ALIGN="left", ALIGN="left"...

    ALIGN="right", ALIGN="right", ALIGN="right", ALIGN="right", ALIGN="right", ALIGN="right", ALIGN="right", ALIGN="right", ALIGN="right", ALIGN="right", ALIGN="right", ALIGN="right", ALIGN="right", ALIGN="right", ALIGN="right", ALIGN="right", ALIGN="right", ALIGN="right", ALIGN="right", ALIGN="right", ALIGN="right", ALIGN="right", ALIGN="right", ALIGN="right", ALIGN="right", ALIGN="right", ALIGN="right", ALIGN="right", ALIGN="right", ALIGN="right", ALIGN="right", ALIGN="right", ALIGN="right", ALIGN="right", ALIGN="right", ALIGN="right", ALIGN="right", ALIGN="right", ALIGN="right", ALIGN="right", ALIGN="right", ALIGN="right", ALIGN="right", ALIGN="right", ALIGN="right", ALIGN="right", ALIGN="right", ALIGN="right", ALIGN="right", ALIGN="right"...

    ALIGN="top"

    ALIGN="middle"

    ALIGN="bottom" (domyślnie)


WCZYTYWANIE STRONY DO RAMKI LOKALNEJ

<A TARGET="nazwa ramki lokalnej" HREF="Tu podaj ścieżkę dostępu do strony">Opis</A>

gdzie zamiast tekstu "Tu podaj ścieżkę dostępu do strony" należy podać lokalizację na dysku, gdzie znajduje się strona, do której chcemy się przenieść.
Natomiast jako "nazwa ramki lokalnej" należy wpisać nazwę, zdefiniowaną wcześniej w znaczniku IFRAME.

Dzięki tej komendzie dostajemy możliwość wczytywania stron do określonych ramek lokalnych na naszej stronie. Przez to treść w takiej ramce (okienku) może się zmieniać, nawet już po wczytaniu strony.

Aby załadować strony do dwóch (lub więcej) ramek lokalnych jednocześnie, po kliknięciu pojedynczego odsyłacza, zobacz: Wczytanie stron do dwóch ramek.

Przykład:



Przykład 1    Przykład 2    Przykład 3   


OSTRZEŻENIE PRZED RAMKĄ

Surfując w Internecie, często zdarza się, że odnajdujemy stronę, która wygląda jakoś dziwnie: nie posiada żadnego menu ani spisu treści, w którym można wybrać interesujący nas temat i swobodnie nawigować w całym serwisie. Strona taka jest jakby wyrwana z szerszej całości, ponieważ prawdopodobnie wchodzi w skład struktury ramek, lecz użytkownik wczytał ją bezpośrednio, a nie przez stronę startową. Dzieje się tak dlatego, ponieważ wyszukiwarki sieciowe indeksują wszystkie strony, bez względu czy wchodzą one w skład ramek czy nie. Aby zapobiec takim sytuacjom, można na każdej stronie, która ma zostać wyświetlona w ramkach (oprócz startowej), wstawić bezpośrednio po znaczniku otwierającym BODY [zobacz: Ramy dokumentu] następujący kod:

<SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript">
<!--
if (self == parent) document.write('<DIV ALIGN="center"><B>UWAGA!</B> To jest tylko ramka - wróć do <A HREF="index.html"><B>STRONY&nbsp;GŁÓWNEJ</B></A></DIV><HR><BR><BR>');
//-->
</SCRIPT>
gdzie w miejsce tekstu "index.html" należy podać lokalizację na dysku, gdzie znajduje się strona startowa struktury ramek.

W efekcie, jeśli strona zostanie wczytana poza ramkami, na ekranie zostanie wyświetlony tekst z odsyłaczem: "UWAGA! To jest tylko ramka - wróć do STRONY GŁÓWNEJ", po kliknięciu którego, nastąpi przejście do strony głównej (startowej). W przypadku poprawnego załadowania strony, na ekranie nie pojawi się żaden tekst.

Przykład:

Przykład



Możliwe jest również automatyczne przekierowanie użytkownika od razu do strony głównej, jeśli tylko wczyta podstronę serwisu poza ramkami. Aby to zrobić, w treści nagłówkowej podstron (w ramach HEAD) należy wkleić następujący kod:

<SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript">
<!--
if (self == parent) location.href = 'index.html';
//-->
</SCRIPT>

Sposób ten jest najbardziej przydatny na podstronach, które są wczytywane do ramek na starcie, tzn. dla tych, które są wpisane na stronie startowej ramek w atrybutach SRC="...".

Przykład:

Przykład
(ładujemy "Spis treści" poza ramkami)



Ostatni sposób może nie być wygodny, jeśli użytkownik odnajdzie dowolną podstronę naszego serwisu w wyszukiwarce sieciowej. W takim przypadku nastąpiłoby natychmiastowe przejście do strony głównej i wczytanie podstron startowych. Użytkownik straciłby z oczu treść, której szukał, a odnalezienie jej w spisie treści nie zawsze jest łatwe, co mogłoby poskutkować zniechęceniem do serwisu. Aby temu zapobiec, na podstronach które nie są ładowane na starcie, nie powinniśmy używać poprzedniego skryptu, ale raczej pierwszy. Może nam jednak nie odpowiadać, że czytelnicy zobaczą naszą stronę bez pełnego menu, co popsuje całą jej budowę. Aby do tego nie dopuścić, można wykorzystać następujący skrypt (trzeba go wstawić w treści nagłówkowej podstron, czyli w ramach HEAD):

<SCRIPT TYPE="text/javascript" LANGUAGE="javascript">
<!--
if (parent == self)
{
  var url = escape(location.href);
  for (var i = 0, str = ''; i < url.length; i++)
  {
    if (url.charAt(i) == '/') str += '%2F';
    else str += url.charAt(i);
  }
  location.href = 'index1.html?' + str;
}
//-->
</SCRIPT>

Następnie tworzymy dokument index1.html (w tym samym katalogu co index.html) w następujący sposób:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN">
<HTML>
<HEAD>
  <META HTTP-EQUIV="CONTENT-TYPE" CONTENT="text/html; charset=iso-8859-2">
  <TITLE>Tytuł strony</TITLE>
</HEAD>
<SCRIPT TYPE="text/javascript" LANGUAGE="javascript">
<!--
// www.kurshtml.boo.pl

var url = unescape(location.search.substring(1));
document.write(
'<FRAMESET COLS="180,*" BORDER="0" FRAMEBORDER="0" FRAMESPACING="0">' +
'<FRAME NAME="spis" NORESIZE FRAMEBORDER="0" SRC="spis.html">' +
'<FRAME NAME="strona" NORESIZE FRAMEBORDER="0" SRC="' + (url ? url : 'start.html') + '">' +
'<FRAME NAME="strona" SRC="' + (url ? url : 'start.html') + '">' +
'<NOFRAMES><A HREF="spis.html">Spis treści</A></NOFRAMES>' +
'</FRAMESET>'
);
//-->
</SCRIPT>
<NOSCRIPT>
<FRAMESET COLS="180,*" BORDER="0" FRAMEBORDER="0" FRAMESPACING="0">
<FRAME NAME="spis" NORESIZE FRAMEBORDER="0" SRC="spis.html">
<FRAME NAME="strona" NORESIZE FRAMEBORDER="0" SRC="home.html">
<NOFRAMES><A HREF="spis.html">Spis treści</A></NOFRAMES>
</FRAMESET>
</NOSCRIPT>
</HTML>

Budowa tego dokumentu jest specyficzna:

  1. Na początek kopiujemy do niego całą zawartość oryginalnego pliku index.html, czyli właściwej strony startowej ramek.
  2. Następnie wszystkie znaczniki tworzące strukturę ramek - czyli zewnętrzne FRAMESET - obejmujemy znacznikami <NOSCRIPT>...</NOSCRIPT>.
  3. Dalej, bezpośrednio przed wstawionym znacznikiem <NOSCRIPT>, dodajemy taki kod:
    <SCRIPT TYPE="text/javascript" LANGUAGE="javascript">
    <!--
    // www.kurshtml.boo.pl
    
    var url = unescape(location.search.substring(1));
    document.write(
    Tutaj będzie struktura ramek
    );
    //-->
    </SCRIPT>
    
  4. We wklejonym kodzie, w miejsce tekstu "Tutaj będzie struktura ramek" należy skopiować i wkleić to, co umieściliśmy wcześniej wewnątrz znaczników <NOSCRIPT>...</NOSCRIPT>, czyli: FRAMESET, FRAME, NOFRAMES.
  5. Teraz należy zmienić tekst wklejony poprzednio w ten sposób, że obejmujemy wszystkie jego linie w apostrofy ( ' ), a ponadto na końcu każdej z nich (oprócz ostatniej!) stawiamy znak plus: "+".
  6. Na koniec, odnajdujemy znacznik FRAME, do którego są wczytywane podstrony ze zmieniającą się treścią, tzn. tam gdzie ładują się strony po kliknięciu odnośników z ramki spisu treści. Zastępujemy w nim atrybut SRC="..." na SRC="' + (url ? url : 'start.html') + '" gdzie zamiast "start.html" wpisujemy poprzednią wartość tego atrybutu, czyli lokalizację strony, która normalnie wczytuje się do tej ramki na starcie.

Jeśli nadal nie umiesz wstawić tego skryptu na swoją stronę, tutaj znajdziesz generator, który zrobi to całkowicie automatycznie.



Aby niepotrzebnie nie powiększać rozmiaru stron serwisu, we wszystkich wariantach skryptu przedstawionych tutaj można kod do wstawienia na podstrony zapisać w pliku z rozszerzeniem *.js (w ostatnim wariancie będzie to tylko pierwsza część kodu). Trzeba wtedy jedynie pamiętać, aby usunąć z niego dwie pierwsze i dwie ostatnie linijki! Następnie na podstronach zamiast poprzednio podanego kodu wystarczy wstawić:

<SCRIPT TYPE="text/javascript" LANGUAGE="javascript" SRC="ramki.js"></SCRIPT>
gdzie "ramki.js", to lokalizacja stworzonego właśnie pliku.