Blog literacki, portal erotyczny - seks i humor nie z tej ziemi
SPIS TREŚCI
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ę:
Co to są, do czego służą i jakie są zalety ramek
Jak zdefiniować wygląd strony z ramkami, ustalając ich rozmiary, położenie i dodatkowe atrybuty
Co zrobić, aby stronę z ramkami mogli oglądać również posiadacze starszych przeglądarek
Co zrobić, aby strony z menu wczytywały się do drugiej ramki
Jak wczytać stronę w nowym oknie
Jak podzielić stronę na poziome i pionowe ramki
Jak wstawić ramkę bezpośrednio w treści strony WWW
Jak poinformować użytkownika, że spis treści znajduje się na innej stronie
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.
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:
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ć:
Opis zawartości strony - niezbyt długi opis zawartości strony
Wyrazy kluczowe - wyrazy kluczowe rozdzielone przecinkami
Autor strony - Twoje imię i nazwisko (jeśli chcesz zaznaczyć, kto jest autorem strony - jeśli nie chcesz, usuń całą tą linijkę)
Tytuł strony - tutaj wpisz tytuł Twojej strony
180 - szerokość lewej ramki - okienka ("Spis treści") podana w pikselach; dozwolone jest również
podanie wartości procentowej (np.: 25%), ale wtedy wygląd strony (rozmiar absolutny lewej ramki)
będzie zależał od wielkości okana przeglądarki i rozdzielczości ekranu.
Powyższą stronę należy zapisać na dysku pod nazwą index.html
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="../kolory.html">Rozdział 1</A><BR>
<A TARGET="strona" HREF="../znaki.html">Rozdział 2</A><BR>
<A TARGET="strona" HREF="test.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ć:
Autor strony - Twoje imię i nazwisko (jeśli chcesz zaznaczyć, kto jest autorem strony - jeśli nie chcesz, usuń całą tą linijkę)
red - definicja koloru, jaki
otrzymają odsyłacze w spisie treści, po wskazaniu ich myszką. Jeśli chcesz zrezygnować z tego
efektu, usuń z kodu fragment:
<STYLE TYPE="text/css">
<!--
A:hover {color: red}
-->
</STYLE>
*.html - lokalizacja na dysku,
gdzie znajdują się pojedyncze podstrony, do których ma nastąpić przeniesienie, po kliknięciu określonego
odsyłacza w spisie treści
Strona główna, Rozdział 1, Rozdział 2, Linki - dowolne tytuły stron, do których
ma nastąpić przeniesienie, po kliknięciu określonego odsyłacza w spisie treści
jan_kowalski@jakas.domena.pl - Twój adres e-mail
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
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:
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.
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="../../pliki/anim.gif"></CENTER>
</BODY>
</HTML>
W miejsce czerwonego tekstu: "../../pliki/anim.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.
Utwórz w edytorze stronę spis.html,
taką samą jak w poprzednim przykładzie.
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:
Podział strony na:
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!
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.
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!
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!
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:
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.
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).
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ą.
Dodatkowe marginesy:
<FRAME MARGINWIDTH="x" MARGINHEIGHT="y">
gdzie "x" oznacza szerokość marginesu poziomego, a "y" oznacza wysokość marginesu pionowego (w pikselach).
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.
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ć:
"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).
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:
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"
Twoja przeglądarka nie akceptuje ramek
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!
Usunięcie obramowania:
<IFRAME SRC="ścieżka dostępu" FRAMEBORDER="0">...</IFRAME>
Przykład:
Twoja przeglądarka nie akceptuje ramek
Usunięcie suwaka do przewijania zawartości ramki:
<IFRAME SRC="ścieżka dostępu" SCROLLING="no">...</IFRAME>
Przykład:
Twoja przeglądarka nie akceptuje ramek
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).
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"
Twoja przeglągarka nie akceptuje ramek
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:
Twoja przeglądarka nie akceptuje ramek
HSPACE="50"
Twoja przeglądarka nie akceptuje ramek
VSPACE="50"
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:
Twoja przeglądarka nie akceptuje ramek
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"...
Twoja przeglądarka nie akceptuje ramek
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"...
Twoja przeglądarka nie akceptuje ramek
ALIGN="top"
Twoja przeglądarka nie akceptuje ramek
ALIGN="middle"
Twoja przeglądarka nie akceptuje ramek
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:
Twoja przeglądarka nie akceptuje ramek
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 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