Co to są ramki? Aby zobaczyć przykład ramek, kliknij tutaj. Po lewej jest pierwsza ramka (nieruchome okienko): "Spis treści", a po prawej druga: "Strona główna".
Jeśli w otworzonym przykładzie nie widzisz po lewej stronie spisu treści, a po prawej strony głównej, oznacza to, że twoja przeglądarka internetowa nie akceptuje ramek. Jest to sytuacja bardzo rzadka, ponieważ aktualnie w zasadzie każda z popularnych przeglądarek bezbłędnie rozpoznaje ramki.
Popatrz na lewą ramkę otworzonego przykładu ("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 całego serwisu, 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ł ładowania.
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:
Oto przykładowy wygląd strony startowej ramek:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" /> <title>Moja strona</title> </head> <frameset cols="200,*"> <frame name="spis" src="spis.html" /> <frame name="strona" src="home.html" /> <noframes><body><a href="spis.html">Spis treści</a></body></noframes> </frameset> </html>
Zwróć szczególną uwagę na znaczniki 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.
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 to 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. Ponadto nawet jeśli na stronę wejdzie użytkownik za pomocą przeglądarki, która nie obsługuje ramek, serwis nadal może być funkcjonalny, a to dzięki znacznikowi <noframes>...</noframes>. 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 witryny. 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ć, że posiadają liczne zalety:
Oczywiście ramki posiadają również pewne wady:
O tym czy zastosować ramki czy może raczej np. tabelki albo jeszcze lepiej style CSS powinno się decydować indywidualnie mając założenia do konkretnego projektu, tzn. to, na czym nam szczególnie zależy, a co jest mniej ważne. Dzisiaj ramki zostały prawie wyparte ze standardowych, treściowych stron internetowych. Czasami jednak nadal mogą okazać się przydatne np. w różnego rodzaju aplikacjach WWW, panelach administracyjnych czy stronach intranetowych - czyli wszędzie tam, gdzie adres URL poszczególnych podstron nie bardzo nadaje się do przekazania innej osobie ani zapisania w ulubionych przeglądarki.
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:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"> <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" /> <title>Tytuł strony</title> </head> <frameset cols="180,*" border="0" frameborder="0" framespacing="0"> <frame name="spis" noresize="noresize" frameborder="0" src="spis.html" /> <frame name="strona" noresize="noresize" frameborder="0" src="home.html" /> <noframes><body><a href="spis.html">spis treści</a></body></noframes> </frameset> </html>
W miejsce wyróznionych wyrażeń należy wpisać:
Powyższą stronę należy zapisać na dysku pod nazwą index.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" /> <meta name="Author" content="Autor strony" /> <title>Spis treści</title> <style type="text/css"> <![CDATA[ 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@example.com">Kontakt</a> </body> </html>
W miejsce wyrażeń napisanych czcionką koloru czerwonego należy wpisać:
<style type="text/css"> <![CDATA[ a:hover { color: red } ]]> </style>
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>...</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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" /> <meta name="Author" content="utor strony" /> <title>Strona główna</title> </head> <body> <h2 align="center">Strona główna</h2> <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 wyróżnionego 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>...</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>...</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:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"> <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" /> <title>tytuł strony</title> </head> <frameset rows="80,*" border="0" frameborder="0" framespacing="0"> <frame name="banner" noresize="noresize" scrolling="no" frameborder="0" src="banner.html" /> <frameset cols="180,*" border="0" frameborder="0" framespacing="0"> <frame name="spis" noresize="noresize" frameborder="0" src="spis.html" /> <frame name="strona" noresize="noresize" frameborder="0" src="home.html" /> </frameset> <noframes><body><a href="spis.html">Spis treści</a></body></noframes> </frameset> </html>
W miejsce wyróżnionego 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.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" /> <meta name="Author" content="Autor strony" /> <title>Banner</title> </head> <body> <center><img src="logo.gif" alt="Nazwa serwisu" /></center> </body> </html>
W miejsce wyróznionego 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.
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.
<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:
<frameset cols="x1,x2,...">...</frameset>lub
<frameset cols="x1%,x2%,...">...</frameset>
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:
100% - 25% - 15% = 60%60% / (1 + 2) = 20%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!
<frameset rows="y1,y2,...">...</frameset>lub
<frameset rows="y1%,y2%,...">...</frameset>
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.
<frameset bordercolor="kolor">...</frameset>
Atrybut BORDERCOLOR nie wchodzi w skład specyfikacji HTML 4.01!
<frameset border="x">...</frameset>
Atrybut BORDER nie wchodzi w skład specyfikacji HTML 4.01!
<frameset frameborder="typ">...</frameset>
Poza tym w Internet Explorerze i Operze 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
<frameset> <frame src="ścieżka dostępu do strony" name="tu podaj nazwę ramki" /> </frameset>
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ą, inną 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:
<frame bordercolor="kolor" />
Atrybut BORDERCOLOR nie wchodzi w skład specyfikacji HTML 4.01 - zaleca się stosowanie stylów.
<frame scrolling="typ" />
<frame noresize="noresize" />
Taka ramka nie będzie skalowana, czyli nie będzie możliwa zmiana jej rozmiarów przez przeciągnięcie myszką.
<frame marginwidth="x" marginheight="y" />
<frame frameborder="typ">
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
<frameset> (...) <noframes> <body> Treść alternatywna </body> </noframes> </frameset>
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>...</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ę!
Znacznik <noframes>...</noframes> musi być umieszczony wewnątrz <frameset>...</frameset>. Ponadto w języku XHTML wewnątrz <noframes>...</noframes> muszą się znajdować znaczniki <body>...</body>. W języku HTML nie jest to konieczne.
Oczywiście znaczniki <body>...</body> w żadnym wypadku nie mogą obejmować znaczników tworzących strukturę ramek (<frameset>...</frameset>, <frame />)! W takim przypadku ramki najprawdopodobniej w ogóle nie zostałyby wyświetlone.
<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).
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).
Przykład:
Aby po wybraniu odsyłacza z lewej ramki ("Spis treści"), dana strona została wczytana do prawej, należy na stronie w lewej ramce wpisać:
<a target="strona" href="ścieżka dostępu">Opis</a>
(zakładamy, że prawa ramka 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" oraz target="_parent": 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 XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"> <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 XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"> <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 (plików) 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":
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(0)" 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.
<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>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>...</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
pływające (ang. inline)
<iframe src="ścieżka dostępu do strony">Twoja przeglądarka nie akceptuje ramek!</iframe>
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:
<iframe src="ścieżka dostępu" width="x" height="y">...</iframe>lub
<iframe src="ścieżka dostępu" width="x%" height="y%">...</iframe>
Przykład:
<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!
<iframe src="ścieżka dostępu" frameborder="0">...</iframe>
Przykład:
<iframe src="ścieżka dostępu" scrolling="no">...</iframe>
Przykład:
<iframe src="ścieżka dostępu" marginwidth="x" marginheight="y">...</iframe>
Przykład:
<iframe src="ścieżka dostępu" hspace="x" vspace="y">...</iframe>
Atrybuty HSPACE oraz VSPACE dla znacznika IFRAME nie wchodzą w skład specyfikacji HTML 4.01 - zaleca się stosowanie stylów.
Przykład:
<iframe src="ścieżka dostępu" align="rodzaj">...</iframe>
Atrybut ALIGN dla znacznika IFRAME jest zdeprecjonowany przez specyfikację HTML 4.01 - zaleca się stosowanie stylów.
Przykład:
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.
<object data="ścieżka dostępu" type="text/html" width="x" height="y">Twoja przeglądarka nie akceptuje osadzania obiektów!</object>
Przykład:
<a target="nazwa ramki lokalnej" href="tu podaj ścieżkę dostępu do strony">opis</a>
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:
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">
// <![CDATA[
/**
* @author Sławomir Kokłowski {@link http://www.kurshtml.edu.pl}
* @copyright NIE usuwaj tego komentarza! (Do NOT remove this comment!)
*/
function target_ob(id, a)
{
if (document.getElementById && document.getElementById(id) && document.getElementById(id).innerHTML)
{
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);
var minus = -1;
if ((minus = ob.toLowerCase().indexOf(' width="-')) != -1 || (minus = ob.toLowerCase().indexOf(' width=\'-')) != -1 || (minus = ob.toLowerCase().indexOf(' width=-')) != -1)
{
for (var i = minus+8; i < ob.length; i++)
{
if ((ob.charAt(i) < '0' || ob.charAt(i) > '9') && ob.charAt(i) != '-') break;
}
ob = ob.substring(0, minus+7+(ob.toLowerCase().indexOf(' width="-') != -1 || ob.toLowerCase().indexOf(' width=\'-') != -1 ? 1 : 0)) + ob.substring(minus+8+(ob.toLowerCase().indexOf(' width="-') != -1|| ob.toLowerCase().indexOf(' width=\'-') != -1 ? 1 : 0), i) + '%' + ob.substring(i);
}
var minus = -1;
if ((minus = ob.toLowerCase().indexOf(' height="-')) != -1 || (minus = ob.toLowerCase().indexOf(' height=-')) != -1)
{
for (var i = minus+8; i < ob.length; i++)
{
if ((ob.charAt(i) < '0' || ob.charAt(i) > '9') && ob.charAt(i) != '-') break;
}
ob = ob.substring(0, minus+8+(ob.toLowerCase().indexOf(' height="-') != -1|| ob.toLowerCase().indexOf(' height=\'-') != -1 ? 1 : 0)) + ob.substring(minus+9+(ob.toLowerCase().indexOf(' height="-') != -1|| ob.toLowerCase().indexOf(' height=\'-') != -1 ? 1 : 0), i) + '%' + ob.substring(i);
}
if (stop > start) document.getElementById(id).innerHTML = ob.substring(0, start) + ' data="' + (a.href ? a.href : a) + '"' + ob.substring(stop);
else return true;
}
}
else return true;
return false;
}
// ]]>
</script>Sam obiekt należy ująć w znaczniki <div id="nazwa">...</div>:
<div id="nazwa"><object data="ścieżka dostępu" type="text/html" width="x" height="y">...</object></div>
Teraz wczytywanie nowych stron do takiego obiektu będzie się odbywało w następujący sposób:
<a href="strona.html" onclick="return target_ob('nazwa', this)">...</a>
Przykład:
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">
// <![CDATA[
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>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:
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"> // <![CDATA[ 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">
// <![CDATA[
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);
}
window.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 XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" />
<title>Tytuł strony</title>
</head>
<script type="text/javascript">
// <![CDATA[
// www.kurshtml.edu.pl
var url = unescape(location.search.substring(1));
if (url.indexOf(location.href.substring(0, location.href.indexOf('index1.html'))) != 0) url = '';
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><body><a href="spis.html">Spis treści</a></body></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="start.html" />
<noframes><body><a href="spis.html">Spis treści</a></body></noframes>
</frameset>
</noscript>
</html>Budowa tego dokumentu jest specyficzna:
<noscript>...</noscript>.<noscript>, dodajemy taki kod:<script type="text/javascript"> // <![CDATA[ // www.kurshtml.edu.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>
<noscript>...</noscript>, czyli: <frameset>...</frameset>, <frame />, <noframes>...</noframes>.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" src="autoframeset.js"></script>
Załóżmy, że Twój serwis składa się z kilkudziesięciu podstron. Na każdej podstronie trzeba będzie wstawić jakieś powtarzające się elementy, jak np. nagłówek, menu nawigacyjne, stopka itd. W każdym pliku podstrony trzeba za każdym razem powtórzyć te elementy. Wyobraź sobie teraz, że chcesz dodać do menu nowy link. Aby to zrobić, musisz otworzyć osobno każdy dokument i ręcznie dodać tam link. Oczywiście jest to ogromnie niewygodne, do tego stopnia, że po jakimś czasie można się wręcz zniechęcić do robienia jakichkolwiek aktualizacji serwisu :-(
Rozwiązaniem tego problemu mogą być ramki: tradycyjne (<frameset>...</frameset>, <frame />) albo lokalne (<iframe>...</iframe>). W pierwszym przypadku (ramki tradycyjne) menu nawigacyjne i inne powtarzające się elementy strony zapisuje się w osobnych plikach *.html, a następnie wczytuje do różnych ramek. W drugim (ramki lokalne) zwykle tworzy się jedną stronę index.html, na której umieszcza się menu i inne stałe elementy, a w miejsce właściwej treści strony wstawia się ramkę lokalną, gdzie wczytuje się zawartość poszczególnych podstron.
Rozwiązanie takie byłoby idealne, gdyby nie kilka wad, opisanych w rozdziale: Wstęp. Przypomnę tylko, że w serwisach opartych o ramki, na pasku adresu przeglądarki wyświetla się cały czas taki sam adres. Powoduje to problemy z dodaniem wybranej podstrony do ulubionych oraz choćby przekazaniem wprost jej adresu znajomemu.
Istnieje alternatywny sposób. Z każdego szkieletu strony można wydzielić powtarzające się fragmenty w postaci nagłówka oraz stopki szablonu. Na przykład, jeśli Twoja strona główna wygląda tak:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" /> <title>Tytuł strony</title> </head> <body> <ul> <li><a href="...">Link</a></li> <li><a href="...">Link</a></li> <li><a href="...">Link</a></li> </ul> Właściwa zawartość strony... </body> </html>
Kolorem czerwonym zaznaczono nagłówek szablonu (jak widać nie jest to wprost odpowiednik nagłówka dokumentu - <head>...</head>), a niebieskim - stopkę szablonu. Ponadto na zielono oznaczony został fragment nagłówka, który powinien być różny na każdej podstronie - każdy dokument powinien posiadać swój osobny tytuł. Wstawienie tego samego tytułu na wszystkich podstronach to bardzo zły pomysł, ponieważ jest niewygodne dla użytkownika (tytuł dokumentu wyświetla się na belce tytułowej przeglądarki internetowej) i niekorzystnie wpływa na pozycję serwisu w wyszukiwarkach sieciowych. Oczywiście oprócz tytułu, w tej części nagłówka można umieścić inne elementy, które powinny być różne na każdej podstronie. Mogą, a nawet powinny, to być np. wyrazy kluczowe i opis zawartości strony (różne wartości tych znaczników w każdym dokumencie polepszają pozycję serwisu w wyszukiwarkach).
Koncepcja jest taka, aby nagłówek i stopkę szablonu zapisać w osobnych plikach. Dzięki temu dodanie nowego linka do menu nawigacyjnego lub jakakolwiek inna zmiana w powtarzających się elementach strony, będzie wymagała modyfikacji tylko jednego lub dwóch plików, a zmiany będą widoczne od razu na wszystkich podstronach. Czy coś takiego w ogóle jest możliwe? W czystym języku HTML raczej nie, ale z pomocą przychodzą języki skryptowe obsługiwane po stronie serwera, np. PHP lub SSI. Bardziej popularnym, a zarazem dającym zdecydowanie większe możliwości, jest PHP. Niestety nie wszystkie serwery obsługują ten język, dlatego przedstawione zostanie również identyczne rozwiązanie oparte o SSI.
Obsługa skryptów PHP oraz SSI wymaga specjalnej konfiguracji serwera WWW. Włączyć ich obsługę może tylko administrator serwera. O tym, czy Twój serwer WWW obsługuje PHP lub SSI możesz się zwykle przekonać odwiedzając stronę domową danego serwera lub kontaktując się z administratorem serwera. Możesz też po prostu przetestować bezpośrednio na serwerze przedstawione tutaj skrypty - jeżeli zadziałają, o nic nie musisz się już martwić.
Ponadto zwracam uwagę, że skrypty PHP ani SSI nie będą działały na Twoim dysku lokalnym. Działanie będzie widoczne dopiero po wprowadzeniu strony na serwer WWW, o ile obsługuje tego rodzaju skrypty.
W swoim edytorze (X)HTML utwórz nowy plik i wklej do niego zawartość nagłówka szablonu, a następnie zapisz w katalogu głównym konta WWW pod nazwą head.php. Dla przedstawionego wcześniej przykładu, w pliku tym powinna się znaleźć następująca zawartość:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" /> <?php include $_SERVER['SCRIPT_FILENAME'].'.html'; ?> </head> <body> <ul> <li><a href="...">Link</a></li> <li><a href="...">Link</a></li> <li><a href="...">Link</a></li> </ul>
Zwróć uwagę na wyróżniony fragment. Stanowi on tę część nagłówka, która powinna być różna na każdej podstronie. W naszym przypadku będzie to po prostu: <title>Tytuł strony</title>. Musisz wyciąć z nagłówka wszystkie takie elementy i zastąpić je jednym specjalnym kodem.
Następnie w analogiczny sposób utwórz drugi plik - foot.php - również zapisz go w głównym katalogu konta WWW:
</body> </html>
Mamy już nagłówek oraz stopkę szablonu zapisane w osobnych plikach. Nagłówek zawiera m.in. całe menu nawigacyjne, więc jeśli w przyszłości będzie trzeba dodać w nim nowy link, wystarczy zmodyfikować tylko ten jeden plik. Aby było to jednak możliwe, wszystkie podstrony serwisu trzeba tworzyć w specjalny sposób. Z każdej z nich wydzielamy właściwą zawartość. Może być to po prostu treść tekstowa, prawdopodobnie ze znacznikami formatującymi, takimi jak pogrubienie lub pochylenie, akapity itp. Ważne jest, aby do plików head.php i foot.php wydzielić jak największy fragment kodu źródłowego - ten, który powtarza się na wszystkich podstronach serwisu.
Aby wykorzystać szablon PHP, wszystkie pliki podstron serwisu muszą mieć rozszerzenie *.php, a nie *.html, czyli np. podstrona.php. Plik strony głównej serwisu musi się nazywać index.php, a nie index.html ani index.htm.
Każdy plik podstrony musi mieć następującą postać (np. podstrona.php):
<?php include $_SERVER['DOCUMENT_ROOT'].'/head.php'; ?> Właściwa zawartość strony... <?php include $_SERVER['DOCUMENT_ROOT'].'/foot.php'; ?>
Zwróć uwagę, że nie umieszcza się już tutaj nagłówka ani stopki szablonu, ponieważ zostały one zapisane w osobnych plikach. Wystarczy tylko wstawić odwołanie do tych plików - w powyższym kodzie odpowiednie fragmenty zostały wyróżnione. W szczególności na takich podstronach nie wstawia się deklaracji strony kodowej, ale koniecznie należy zadbać, aby treść była zapisana przy użyciu takiego samego kodowania znaków, jak strona kodowa zapisana w pliku head.php (ISO-8859-2). Edytory (X)HTML pozwalają wybrać kodowanie znaków w pliku bez potrzeby wstawiania deklaracji <meta />. Zwracam uwagę, że w ten sam sposób należy przygotować stronę główną serwisu, czyli plik index.php.
Jeżeli ustawisz nieprawidłowe kodowanie znaków, po wyświetleniu strony w przeglądarce internetowej polskie znaki diakrytyczne mogą się nie pojawić.
Ostatnim krokiem będzie przygotowanie różniącego się kodu nagłówkowego. W naszym przykładzie będzie to znacznik <title>...</title> z tytułem poszczególnych podstron. Nie można go po prostu wstawić w pliku head.php, ponieważ wtedy byłby identyczny na wszystkich podstronach, a zależy nam na tym, aby tak nie było. Każdy dokument podstrony musi posiadać odpowiadający sobie plik z różniącym się kodem nagłówkowym. Plik ten musi znajdować się w tym samym katalogu co podstrona i nazywać się identycznie, tylko do nazwy trzeba na końcu dodać sufiks .html. Przykładowo: dokument podstrona.php musi posiadać w tym samym katalogu plik podstrona.php.html, którego zawartość może być następująca:
<title>Tytuł strony</title>
UWAGA!
Jeżeli zapomnisz utworzyć takiego pliku albo pomylisz jego nazwę, w szablonie strony wyświetlą się błędy, a nawet w ogóle może się on nie wyświetlić.
To już koniec. W tej chwili możesz wprowadzić wszystkie dokumenty na serwer. Nie zapomnij, że pliki head.php i foot.php należy umieścić w głównym katalogu publicznym konta WWW, czyli w tym samym miejscu co strona główna, a sama strona główna musi się nazywać index.php, a nie index.html. Po wprowadzeniu wszystkich plików na konto FTP, możesz już wpisać w dowolnej przeglądarce internetowej adres strony i sprawdzić, czy skrypt szablonu działa prawidłowo. Jeżeli skrypt nie działa, a masz stuprocentową pewność, że wszystko zostało wykonane prawidłowo (radzę to sprawdzić), tzn. na ekranie nie wyświetlają się żadne komunikaty błędów (ang. error) ani ostrzeżeń (ang. warning), spróbuj skorzystać z szablonu SSI, przedstawionego w następnym podpunkcie.
Szablon SSI tworzy się analogicznie jak PHP. Różnice pojawiają się tylko w nazwach rozszerzeń plików oraz poleceniach dołączających pliki nagłówka i stopki szablonu. Poniżej przedstawiony zostanie tylko skrócony opis, a po szczegóły odsyłam do opisu szablonu PHP.
W katalogu głównym konta WWW umieść plik head.shtml, w którym wstawiamy powtarzający się kod nagłówkowy szablonu:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" /> <!--#include virtual="${SCRIPT_NAME}.html" --> </head> <body> <ul> <li><a href="...">Link</a></li> <li><a href="...">Link</a></li> <li><a href="...">Link</a></li> </ul>
Następnie w analogiczny sposób utwórz drugi plik - foot.shtml - również zapisz go w głównym katalogu konta WWW:
</body> </html>
Aby wykorzystać szablon SSI, wszystkie pliki podstron serwisu muszą mieć rozszerzenie *.shtml, a nie *.html, czyli np. podstrona.shtml. Plik strony głównej serwisu musi się nazywać index.shtml, a nie index.html ani index.htm.
Każdy plik podstrony musi mieć następującą postać (np. podstrona.shtml):
<!--#include virtual="/head.shtml" --> Właściwa zawartość strony... <!--#include virtual="/foot.shtml" -->
Pamiętaj o ustawieniu w edytorze (X)HTML odpowiedniej strony kodowej, aby polskie znaki diakrytyczne zostały prawidłowo zapisane!
Każdy dokument podstrony musi posiadać odpowiadający sobie plik z różniącym się kodem nagłówkowym. Plik ten musi znajdować się w tym samym katalogu co podstrona i nazywać się identycznie, tylko do nazwy trzeba na końcu dodać sufiks .html. Przykładowo: dokument podstrona.shtml musi posiadać w tym samym katalogu plik podstrona.shtml.html, którego zawartość może być następująca:
<title>Tytuł strony</title>
UWAGA!
Jeżeli zapomnisz utworzyć takiego pliku albo pomylisz jego nazwę, w szablonie strony wyświetlą się błędy, a nawet w ogóle może się on nie wyświetlić.
Sprawdź swoją wiedzę, nabytą w tym rozdziale, rozwiązując testowy QUIZ.