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:
wygoda nawigacji,
prostota tworzenia struktury serwisu bez korzystania ze skryptów PHP,
oszczędność wczytywania danych (menu wczytuje się tylko raz),
Internet Explorer 6 nie potrafi stopniowo wczytywać tabelek, dlatego przy długich stronach najpierw czekamy dość długo przed białym ekranem, by potem zobaczyć od razu całą stronę. Problem ten nie występuje w "czystych" ramkach.
Oczywiście ramki posiadają również pewne wady:
niektórzy uważają, że mają mniej "profesjonalny" wygląd,
są przeznaczone do budowy raczej prostszych struktur serwisu. Jeśli wstawimy na stronie dużo ramek - szczególnie w mniejszych rozdzielczościach ekranu - "okienko" z właściwą treścią strony może okazać się stanowczo za małe.
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...
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:
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 okna 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:
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:
*.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 nieindex.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):
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="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.
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 nieindex.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.
"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!
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 FRAMEBORDER="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ć:
"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
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):
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:
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 (";").
<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 zielonym 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.
(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:
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"
Nazwa ramki lokalnej:
<IFRAME SRC="ścieżka dostępu" NAME="Tu wpisz nazwę ramki">...</IFRAME>
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).
"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.
Jeśli nie określimy koloru tła dokumentu wczytywanego do ramki lokalnej,
przeglądarka Netscape/Mozilla przyjmie dla niego kolor tła strony, na której wstawiona jest ramka.
Element IFRAME jest zawarty w Transitional DTD, ale nie Strict DTD!
W zamian (nie dla wszystkich atrybutów) można używać znacznika OBJECT.
<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.
Aby wczytać nowy dokument do elementu OBJECT trzeba wykorzystać skrypt. Wklej w nagłówku dokumentu (w ramach HEAD) następujący kod:
<SCRIPT TYPE="text/javascript">
<!--
// Autorem skryptu jest: SŁAWOMIR KOKŁOWSKI
// www.kurshtml.boo.pl
// Jeśli chcesz wykorzystać ten skrypt na swojej stronie, nie usuwaj tego komentarza!
function target_ob(id, a)
{
if (document.getElementById && document.getElementById(id) && document.getElementById(id).innerHTML && a && a.href)
{
var ob = document.getElementById(id).innerHTML;
if (ob.toLowerCase().indexOf(' data=') != -1)
{
var start = ob.toLowerCase().indexOf(' data=');
var stop = ob.indexOf('"', start+3);
if (stop == -1 || ob.indexOf('>', start+3) < stop || ob.indexOf('=', start+3) < stop) stop = ob.indexOf(' ', start+3);
if (stop == -1 || stop > ob.indexOf('>', start+3)) stop = ob.indexOf('>', start+3);
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
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
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:
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:
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));
if (url.indexOf(location.href.substring(0, location.href.indexOf('index1.html'))) != 0) url = '';
document.write( Tutaj będzie struktura ramek
);
//-->
</SCRIPT>
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.
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: "+".
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.
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ć: