Kurs języka HTML i CSS

Poradnik webmastera

  • Zwiększ rozmiar czcionki
  • Domyślny  rozmiar czcionki
  • Zmniejsz rozmiar czcionki

Ramki

Email Drukuj PDF

Możliwość podzielenia strony na niezależne obszary — ramki — w których wyświetlana była zawartość różnych plików XHTML, zrewolucjonizowała swego czasu pojęcie serwisu internetowego, kończąc erę luźno powiązanych, odmiennych stylistycznie stron podrzędnych składających się na serwis internetowy. Ramki, po raz pierwszy wprowadzone przez firmę Netscape w jej przeglądarce Navigator, ujednoliciły wygląd wielu serwisów internetowych i pozwoliły zdecydowanie ułatwić nawigację w ramach serwisu. Stale obecne w oknie przeglądarki menu nawigacyjne pozwalało w każdym momencie zmienić aktywną sekcję serwisu — czytelnik strony nie mógł po prostu stracić orientacji.

Dzisiaj z ramek coraz częściej się rezygnuje. Nowoczesne narzędzia umożliwiające dynamiczne komponowanie kodu XHTML na podstawie szablonów ograniczyły potrzebę wydzielania fragmentu strony w oddzielnej ramce, a języki dynamicznego komponowania stron — takie jak ASP lub PHP — umożliwiły tworzenie serwisów, których każda strona zawiera aktualizowane na bieżąco menu nawigacyjne. Niektórzy twórcy stron WWW ułatwiają też nawigację po tworzonych przez siebie serwisach za pomocą stale obecnych na ekranie menu tworzonych w języku JavaScript.

Mimo to jednak mechanizm ramek wciąż jest obecny w każdej nowoczesnej przeglądarce. Możliwe, że Twoja wizja serwisu internetowego doskonale współgra z ideą ramek — w takim przypadku nic nie stoi na przeszkodzie, by wykorzystać ten mechanizm. Możesz też połączyć ramki z nowoczesnymi technikami dynamicznego komponowania kodu XHTML lub językiem JavaScript, osiągając niepowtarzalne rezultaty.

Budowa serwisu składającego się z ramek

Na kilkunastu następnych stronach przedstawię — krok po kroku — proces budowy prostego serwisu internetowego korzystającego z mechanizmu ramek. Do podzielenia okna przeglądarki na trzy ramki według poniższego schematu (rysunek 8.1) potrzebne będą co najmniej cztery pliki XHTML:

Rysunek 8.1. Typowy układ serwisu WWW

  • plik główny, definiujący podział okna przeglądarki na ramki,

  • plik definiujący zawartość ramki tytułu,

  • plik definiujący zawartość ramki menu,

  • plik definiujący zawartość ramki treści.

Przygotowanie czterech plików wymaga znacznie więcej pracy niż przygotowanie pojedynczej, niepodzielonej na ramki strony WWW. Nie zniechęcaj się jednak — mechanizm ramek pozwoli Ci wykorzystać raz przygotowane ramki zawierające tytuł strony i menu nawigacyjne na każdej stronie podrzędnej serwisu!

Tworząc kod XHTML opisujący podział okna przeglądarki na ramki, pamiętaj o podstawowej zasadzie: w danym momencie można dokonywać podziału okna na pasy wyłącznie w poziomie lub w pionie. Zatem aby stworzyć układ ramek przedstawiony na powyższym rysunku, musisz wykonać dwa kroki:

  • podzielić okno przeglądarki w pionie na dwa poziome pasy: pas tytułu strony (u góry) oraz pas zawierający menu i treść strony (u dołu),

  • podzielić dolny pas na dwa pionowe pasy: pas menu (po lewej) oraz pas treści strony (po prawej).

W jednym kroku możesz utworzyć dowolną liczbę pasów, jednak wszystkie one muszą być względem siebie równoległe. Każdy z nich może też podlegać kolejnym, dowolnym podziałom.

Podział strony na ramki

Prace zaczniemy od głównego dokumentu, dzielącego obszar okna przeglądarki na poszczególne ramki. W efekcie pierwszego podziału powstaną dwa poziome pasy — jeden pod drugim, a w efekcie drugiego — dolny pas zostanie podzielony na dwa pionowe paski.

Kod dokumentu głównego, dzielącego okno na ramki, wygląda prawie identycznie jak kod zwykłej strony WWW, różni się jednak dwoma istotnymi szczegółami. Po pierwsze, zmianie ulega deklaracja typu dokumentu, czyli element <!DOCTYPE>. W przypadku dokumentu składającego się z ramek musi ona 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">

Drugą istotną zmianą jest brak elementu <body>. Zamiast niego musisz użyć elementu <frameset>. Każdy element <frameset> stanowi o podziale obszaru, w którym się znajduje, na dowolną liczbę poziomych lub pionowych pasków o określonych szerokościach. Na przykład poniższy kod elementu tworzy podział na dwa poziome pasy:

<frameset rows="55,*">

...

</frameset>

a taki fragment kodu spowoduje utworzenie trzech pionowych pasów:

<frameset cols="55,40,*">

...

</frameset>

Wewnątrz atrybutów rows (wiersze) lub cols (kolumny) podaje się szerokości pasów. Zamiast jednej z nich powinna być wprowadzona gwiazdka — tak oznaczony pas nie będzie miał stałej szerokości, a jego rozmiar będzie się zmieniał wraz z rozmiarem okna przeglądarki. Praktycznie zawsze tak oznaczonym obszarem jest obszar treści dokumentu — dzięki temu w zależności od rozmiaru okna przeglądarki WWW tekst może zajmować mniej lub więcej miejsca, zaś rozmiary pól tytułu strony i menu nawigacyjnego pozostaną niezmienne.

Wewnątrz elementu <frameset> musi znaleźć się seria tylu elementów, na ile wierszy lub kolumn jest on podzielony. Elementy te mogą należeć tylko do dwóch rodzajów:

  • elementy <frame> odpowiadające ramce zawierającej treść,

  • elementy <frameset> tworzące dalszy, głębszy podział.

Każdy element <frame> musi zostać wyposażony w unikatową nazwę, określoną za pomocą atrybutu name. Nazwa ramki będzie potem służyła do kierowania odnośników do właściwej ramki składowej — gdyby nie ona, kolejne strony byłyby zawsze otwierane w ramce zawierającej sam odnośnik, a to uniemożliwiałoby stworzenie menu nawigacyjnego strony w osobnej ramce.

Nasza przykładowa strona WWW ma być zbudowana z trzech ramek: w efekcie pierwszego podziału mają powstać dwa poziome pasy jeden pod drugim, a w efekcie drugiego — dolny pas ma zostać podzielony na dwa pionowe paski. Kod tworzący taki podział — tym razem kompletny, wraz z całą otoczką — będzie wyglądał następująco:

<?xml version="1.0" encoding="utf-8"?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl">

 <head>

  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

  <title>Serwis WWW podzielony na ramki</title>

 </head>

 <frameset rows="50,*">

  <frame name="tytul" />

  <frameset cols="150,*">

   <frame name="menu" />

   <frame name="tresc" />

  </frameset>

 </frameset>

</html>

Przeanalizuj dokładnie hierarchię elementów <frameset> i <frame>. Aby ułatwić Ci zadanie, zastosowałem wcięcia podkreślające zależność każdego elementu od elementu nadrzędnego.

Na pasku tytułowym okna przeglądarki wyświetlany będzie wyłącznie tytuł strony podany w głównym pliku serwisu internetowego. Tytuły podane w plikach składowych — których zawartość będzie wyświetlana w pojedynczych ramkach — będą ignorowane.

Sprawdź teraz, jak tak skonstruowana strona wygląda w przeglądarce WWW (rysunek 8.2). Choć ramki nie zawierają jeszcze żadnej treści, sam podział powinien być wyraźnie widoczny i odpowiadać naszym wcześniejszym założeniom.

Rysunek 8.2. Podział strony WWW na ramki (na razie pozbawione treści)

Ramki składowe

Jak już wspominałem, zadaniem głównego pliku XHTML jest tylko i wyłącznie dokonanie podziału obszaru okna przeglądarki WWW na ramki. W dokumencie tym nie można i nie wolno wprowadzać żadnej treści pojawiającej się we wnętrzu ramek, bowiem każda z ramek prezentuje osobny plik XHTML.

Poniżej znajdziesz instrukcje umożliwiające stworzenie plików wypełniających ramki składowe serwisu treścią.

Tworzenie ramki z tytułem serwisu

Dla zachowania prostoty przykładu w ramce prezentującej nazwę serwisu WWW niech wyświetlany będzie na razie tylko prosty nagłówek składający się z elementu <h1>. Przygotuj zatem kod pustej strony WWW (normalnej — nie zmodyfikowanej z myślą o ramkach!), wewnątrz elementu <body> dodaj element <h1> z dowolną nazwą i zapisz plik na dysku w tym samym katalogu, w którym znajduje się też główny plik tworzący podział na ramki. Nazwą pliku może być tytul.html.

Pisząc kod XHTML, który będzie służył za zawartość ramki, pomiń element <title> znajdujący się w sekcji nagłówka strony. Przeglądarka na swoim pasku tytułu i tak będzie wyświetlała zawartość elementu <title> znajdującego się w pliku XHTML definiującym podział strony na ramki.

Na razie zaprojektowana strona nigdzie nie będzie wyświetlana, jednak przygotowany kod przyda się nam już za chwilę.

Tworzenie ramki menu nawigacyjnego

Kolejną ramką czekającą na zapełnienie jest wąska ramka znajdująca się po lewej stronie okna przeglądarki. Jej zadaniem będzie prezentowanie menu nawigacyjnego służącego do sterowania zawartością sąsiedniej, największej ramki, w której ma być wyświetlana treść stron.

Tak jak w powyższym punkcie, przygotuj kod zwykłej, pustej strony (pomijając jedynie element <title>), a wewnątrz elementu <body> wprowadź zbiór odnośników — na przykład takich:

<p style="text-align: center;">

 <a href="http://www.onet.pl/">Onet</a><br />

 <a href="http://www.wp.pl/">Wirtualna Polska</a><br />

 <a href="http://www.interia.pl">Interia</a><br />

 <a href="http://www.grush.one.pl/">Świat Owoców</a><br />

</p>

Gotowy plik zapisz — jak poprzednio — w tym samym katalogu, w którym znajduje się główny plik tworzący podział na ramki oraz plik tytul.html. Nadaj mu nazwę na przykład menu.html.

Tworzenie ramki z treścią

Czas na trzecią, ostatnią ramkę. Warto, aby zaraz po wyświetleniu strony w oknie przeglądarki prezentowany był tam jakiś tekst; w przeciwnym razie ramka straszyłaby użytkownika swoją bielą i sprawiała wrażenie, że strona jest niedokończona lub zepsuta.

Przygotuj zatem kolejny, trzeci plik XHTML (nazwany na przykład powitanie.html) i wewnątrz elementu <body> wprowadź akapit tekstu:

<p>Witaj na mojej stronie! Po lewej stronie znajdziesz listę odnośników prowadzących do paru serwisów informacyjnych – kliknij je, a zamiast tego tekstu pojawi się wybrany serwis.</p>

Ustalanie początkowej zawartości ramek

W przygotowanym na początku rozdziału kodzie głównej strony serwisu nie zostały podane nazwy plików, z których przeglądarka miałaby pobierać kod XHTML poszczególnych ramek. Zatem mimo stworzenia wszystkich potrzebnych elementów strony — tytułu, menu oraz początkowej zawartości — ramki nadal wyświetlane są jako białe, puste prostokąty. Wystarczy jednak prosta zmiana kodu głównej strony serwisu, by wypełnić je treścią.

Zmiana ta polega na dodaniu atrybutu src — takiego samego, jak w przypadku obrazów — do każdego elementu <frame>. Wartością tego atrybutu trzeba uczynić nazwę pliku XHTML, który ma być początkowo wyświetlany w każdej z ramek. Oto odpowiednio zmodyfikowany kod głównego elementu <frameset>:

<frameset rows="50,*">

  <frame name="tytul" src="tytul.html" />

  <frameset cols="150,*">

   <frame name="menu" src="menu.html" />

   <frame name="tresc" src="powitanie.html" />

  </frameset>

 </frameset>

Zauważ, że nazwy ramek wcale nie muszą (choć mogą) odpowiadać nazwom plików w nich prezentowanych. Najczęściej — dla wygody — nazwy ramek niezmieniających swojej zawartości (na przykład nagłówków stron i menu nawigacyjnych) odpowiadają nazwom wyświetlanych w nich plików, zaś nazwy ramek przechowujących zmieniającą się treść (ramka główna) są abstrakcyjne i nie odpowiadają żadnej nazwie pliku.

Jeżeli teraz zapiszesz tak wprowadzone zmiany na dysku i wyświetlisz zawartość pliku definiującego ramki, ujrzysz w nich tekst wprowadzony w poszczególnych, odrębnych plikach XHTML (rysunek 8.3).

Rysunek 8.3. Podział strony WWW na ramki — tym razem już wypełnione treścią

Tutaj widać siłę mechanizmu ramek. Jeżeli w gotowym już serwisie WWW składającym się z ramek postanowisz zmodernizować tytuł strony lub menu, nie będzie Cię czekało poprawianie dziesiątek lub setek plików XHTML zawierających powtórzenia kodu nagłówka i menu. Wystarczy, byś zmodyfikował dwa pliki XHTML odpowiadające tym dwóm ramkom, a cały serwis zmieni całkowicie swe oblicze. I choć dzisiaj takie — lub nawet lepsze — efekty osiąga się równie wygodnie dzięki językom skryptowym, miło mieć możliwość uproszczenia swojej pracy bez korzystania z czegokolwiek poza samym językiem XHTML i odrobiną wiedzy.

Odnośniki

Jeżeli spróbowałeś użyć jednego z odnośników zamieszczonych w lewej ramce swojej strony, zauważyłeś na pewno, że treść pojawia się w ramce menu, a nie wewnątrz głównej ramki strony (rysunek 8.4).

Rysunek 8.4. Strony WWW otwierane za pomocą odnośników pojawiają się w tej ramce, w której znajdował się prowadzący do nich odnośnik

Oczywiście nie jest to efekt, o jaki nam chodziło. Menu powinno pozostać nienaruszone, podczas gdy docelowa strona WWW powinna zostać wyświetlona w sąsiedniej, głównej ramce serwisu. Na szczęście doprowadzenie do takiego stanu wymaga tylko nieznacznej modyfikacji kodu poszczególnych odnośników.

Tworzenie odnośnika prowadzącego do wybranej ramki

Aby skierować działanie odnośnika w stronę jednej z ramek strony, wystarczy uzupełnić jego kod atrybutem target z odpowiednią wartością, będącą nazwą docelowej ramki. Pozwoli Ci to wykorzystać ramkę treści zgodnie z jej założonym przeznaczeniem:

  <p style="text-align: center;">

   <a href="http://www.onet.pl/" target="tresc">Onet</a><br />

   <a href="http://www.wp.pl/" target="tresc">Wirtualna Polska</a><br />

   <a href="http://www.interia.pl" target="tresc">Interia</a><br />

   <a href="http://www.grush.one.pl/" target="tresc">Świat Owoców</a><br />

  </p>

Od tego momentu kliknięcie odnośnika spowoduje, że docelowa strona WWW wyświetlona zostanie w ramce o nazwie tresc (rysunek 8.5). Oczywiście może to dotyczyć dowolnej strony — zarówno strony składowej Twojego własnego serwisu (w takim przypadku adres docelowy będzie adresem względnym), jak i strony należącej do innego serwisu (wtedy zastosujesz — jak w powyższym przykładzie — adresy bezwzględne).

Rysunek 8.5. Za pomocą atrybutu target można skierować odnośnik do dowolnej z ramek składowych serwisu

Wskazówka
Portale internetowe często zawierają zabezpieczenie przed wyświetlaniem ich zawartości w ramce. Nie zdziw się zatem, jeżeli po kliknięciu odnośnika wybrana strona na chwilę pojawi się w ramce, po czym zawładnie automatycznie całą powierzchnią okna przeglądarki.

Tworzenie odnośnika otwierającego nowe okno przeglądarki

Nie zawsze właściwym rozwiązaniem jest kierowanie odnośników do jednej z ramek Twojego serwisu internetowego. W przypadku otwierania stron należących do innych serwisów internetowych właściwszym działaniem wydaje się otwarcie strony w nowym, odrębnym oknie przeglądarki i pozostawienie okna zawierającego strony Twojego serwisu wciąż otwartego na ekranie komputera.

Znasz już sposób, aby to uczynić: wystarczy wartość atrybutu target ustawić na _blank. Zmodyfikuj zatem ponownie listę odnośników, ponownie załaduj stronę w oknie przeglądarki i spróbuj kliknąć któryś z odnośników — tym razem docelowy serwis zostanie otwarty w nowym oknie (rysunek 8.6):

  <p style="text-align: center;">

   <a href="http://www.onet.pl/" target="_blank">Onet</a><br />

   <a href="http://www.wp.pl/" target="_blank">Wirtualna Polska</a><br />

   <a href="http://www.interia.pl" target="_blank">Interia</a><br />

   <a href="http://www.grush.one.pl/" target="_blank">Świat Owoców</a><br />

  </p>

Rysunek 8.6. Strona WWW wskazywana przez odnośnik może zostać otwarta w nowym oknie przeglądarki

Zmiana wyglądu ramek

Blokowanie możliwości zmiany szerokości ramki

Domyślnie każdy czytelnik może zmienić szerokość każdej z ramek Twojego serwisu, umieszczając wskaźnik myszy nad krawędzią ramki i przeciągając ją (rysunek 8.7).

Rysunek 8.7. Domyślnie przeglądarka WWW daje użytkownikowi możliwość dowolnej zmiany rozmiarów ramek składających się na stronę WWW

Choć daje to czytelnikowi możliwość wpływania na wygląd Twojego serwisu i dostosowania go do jego indywidualnych potrzeb, nie zawsze jest pożądane. Jeśli zdarzy Ci się zaprojektować ramkę, która wygląda naprawdę dobrze tylko przy konkretnej szerokości, masz do dyspozycji mechanizm umożliwiający zablokowanie możliwości zmiany rozmiaru ramki.

Aby uniemożliwić zmianę rozmiaru wybranej ramki, nadaj odpowiadającemu jej elementowi <frame> atrybut noresize o wartości noresize. Na przykład poniższy kod spowoduje zablokowanie możliwości zmiany rozmiaru ramek odpowiadających nagłówkowi strony oraz menu nawigacyjnemu:

<frameset rows="50,*">

  <frame name="tytul" src="tytul.html" noresize="noresize" />

  <frameset cols="150,*">

   <frame name="menu" src="menu.html" noresize="noresize" />

   <frame name="tresc" src="powitanie.html" />

  </frameset>

 </frameset>

Choć obramowania ramek wciąż wyglądają tam samo, wskazanie ich myszką nie powoduje zmiany wyglądu wskaźnika, a mimo klikania szerokość ramek nie ulega zmianie (rysunek 8.8).

Rysunek 8.8. Za pomocą atrybutu noresize można zablokować opcję zmiany rozmiaru ramki przez użytkownika

Zmiana obramowania ramki

Standardowo przeglądarka rozdziela poszczególne ramki Twojej strony estetycznym, pseudotrójwymiarowym obramowaniem. Nie zawsze jednak obramowanie takie będzie pasować do Twojej wizji wyglądu strony. Jeśli chcesz na własną rękę rozdzielić graficznie ramki składowe strony, możesz w prosty sposób zrezygnować z domyślnego obramowania ramek.

Rezygnacja z obramowania pozwala też ściślej zintegrować ramki z treścią strony. Pozbawione widocznej granicy ramki przestaną wydawać się całkowicie odrębnymi elementami serwisu.

Aby usunąć obramowanie, uzupełnij elementy <frame> wszystkich ramek o atrybut frameborder o wartości 0. Pamiętaj, że jeżeli pominiesz któryś z elementów, ramki wokół pozostałych mogą nie zniknąć — zmienią jedynie kształt. Oto przykładowy kod usuwający obramowania ze wszystkich ramek składowych budowanego w tej części kursu serwisu WWW (rysunek 8.9):

<frameset rows=”50,*”>

  <frame name=”tytul” src=”tytul.html” noresize=”noresize” frameborder=”0” />

  <frameset cols=”150,*”>

   <frame name=”menu” src=”menu.html” noresize=”noresize” frameborder=”0” />

   <frame name=”tresc” src=”powitanie.html” frameborder=”0” />

  </frameset>

 </frameset>

Rysunek 8.9. Ten sam serwis WWW pozbawiony obramowań wokół ramek otwiera się na nowe możliwości kształtowania jego wyglądu

Przed usunięciem obramowania upewnij się, że zablokowałeś możliwość zmiany rozmiaru poszczególnych ramek. W przeciwnym razie użytkownik może być w stanie modyfikować ich szerokość, klikając w ściśle określonym miejscu strony, a nic tak nie denerwuje jak niespodziewane, nieprzewidywalne zachowanie komputera spowodowane nieszkodliwą na pierwszy rzut oka czynnością, jaką jest kliknięcie.

Tworzenie treści alternatywnej

Nie ma już praktycznie na rynku przeglądarek, które nie poradziłyby sobie z prawidłowym wyświetleniem strony WWW podzielonej na ramki. Jeśli jednak koniecznie chcesz, możesz przygotować alternatywną treść głównej strony Twojego serwisu — ignorowaną przez nowoczesne przeglądarki, natomiast interpretowaną przez te programy, które nie są w stanie dokonać podziału na ramki.

Aby przygotować taką treść, zaraz za głównym elementem <frameset> umieść element <noframes>, a w nim — element <body> wraz z całą zawartością strony. Przeglądarki obsługujące mechanizm ramek zinterpretują element <frameset> (tworząc ramki), lecz zignorują element <noframes> i wszystko, co się w nim znajduje, a więc i element <body>, i treść strony. Z kolei stare przeglądarki nie będą wiedziały, co oznaczają znaczniki <frameset> i <noframes>, lecz gdy napotkają element <body>, rozpoczną interpretację kodu strony — a o to właśnie chodziło.

Najlepiej, jeśli kod interpretowany przez przeglądarki nieobsługujące mechanizmu ramek będzie zawierać odnośnik prowadzący do menu nawigacyjnego strony. Umożliwi to w miarę normalne korzystanie z zasobów Twojej strony mimo braku obsługi ramek.

Oto przykład kodu uwzględniającego możliwość korzystania z archaicznej przeglądarki WWW:

<frameset rows="56,*">

 <frame name="tytul" src="tytul.html" noresize="noresize" frameborder="0" />

 <frameset cols="150,*">

  <frame name="menu" src="menu.html" noresize="noresize" frameborder="0" />

  <frame name="tresc" src="powitanie.html" frameborder="0" />

 </frameset>

</frameset>

<noframes>

 <body>

  <p>Twoja przeglądarka nie obsługuje mechanizmu ramek. Skorzystaj z

  <a href="menu.html">menu</a>, aby przeglądać zawartość serwisu.</p>

 </body>

</noframes>

Ramki osadzone

Na koniec zostawiłem dla Ciebie coś specjalnego — ramkę, która może pojawić się w dowolnym miejscu Twojej strony, przewijać się razem z resztą treści strony, a co najważniejsze — wyświetlać kod dowolnej innej strony WWW.

Tworzenie ramki osadzonej

Ramkę osadzoną możesz zamieścić zarówno na stronie już podzielonej na ramki, jak i na każdej dowolnej stronie WWW. Nie wymaga ona żadnych specjalnych zabiegów — po prostu w miejscu, w którym w kodzie XHTML wstawisz element <iframe>, pojawi się ramka wyświetlająca zawartość wskazanej strony WWW. Wygodnie jest umieścić ramkę osadzoną wewnątrz komórki tabeli — pozwoli Ci to zamieścić ramkę zaraz obok tekstu Twojej strony.

Nie próbuj zapisywać elementu <iframe> za pomocą pojedynczego znacznika, jednocześnie otwierającego i zamykającego element. Najczęściej powoduje to problemy z wyświetlaniem strony.

Aby określić początkową zawartość ramki, należy podać atrybut src, a jako jego zawartość — nazwę pliku XHTML lub adres strony, która ma zostać wyświetlona. Jeżeli zrezygnujesz z atrybutu src, utworzona ramka będzie pusta, a jej wypełnienie będzie możliwe dopiero na żądanie użytkownika. Element <iframe> obsługuje bowiem atrybut name, pozwalający nadać ramce identyfikator, który będzie potem służył do kierowania odnośników do utworzonej ramki osadzonej. Elementowi <iframe> można też nadać określoną szerokość i wysokość, stosując znane Ci już atrybuty stylu width i height.

A oto przykład prostej strony WWW wyświetlającej w ramce zawartość jednego z wybranych serwisów internetowych (rysunek 8.10). Jako początkowej zawartości użyłem przygotowanej na potrzeby poprzednich przykładów strony wyświetlającej powitanie, zaś znajdujące się na lewo od ramki odnośniki umożliwiają wyświetlenie w ramce jednego ze znanych portali internetowych:

<?xml version="1.0" encoding="utf-8"?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl">

 <head>

  <title>Ramki osadzone</title>

  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

 </head>

 <body>

  <table style="border: none;">

   <tr>

    <td style="vertical-align: top; text-align: right;">

     <a href="http://www.onet.pl/" target="ramka">Onet</a><br />

     <a href="http://www.wp.pl/" target="ramka">Wirtualna Polska</a><br />

     <a href="http://www.interia.pl" target="ramka">Interia</a><br />

     <a href="http://www.grush.one.pl/" target="ramka">Świat Owoców</a><br />

    </td>

    <td>

     <iframe src="powitanie.html" name="ramka" style="width: 300pt; height: 160pt;"></iframe>

    </td>

   </tr>

  </table>

 </body>

</html>

Rysunek 8.10. Przykład niezależnej ramki <iframe> osadzonej we wnętrzu strony WWW

Wskazówka
Portale internetowe często zawierają zabezpieczenie przed wyświetlaniem ich zawartości w ramce. Nie zdziw się zatem, jeżeli po kliknięciu odnośnika wybrana strona na chwilę pojawi się w ramce, po czym zawładnie automatycznie całą powierzchnią okna przeglądarki.

Zmiana stylu obramowania ramki osadzonej

Standardowe obramowanie ramki osadzonej (reprezentowanej przez element <iframe>) pozwala estetycznie oddzielić zawartość ramki od jej otoczenia. Zdarzają się jednak sytuacje, w których rozdział taki jest wysoce niepożądany; na szczęście pozbawienie ramki obramowania jest niezwykle proste.

Aby usunąć standardową, pseudotrójwymiarową otoczkę ramki, dodaj do znacznika <iframe> atrybut frameborder o wartości 0:

<iframe src="..." name="..." frameborder="0" ...></iframe>

Jeżeli odświeżysz zawartość okna przeglądarki po wprowadzeniu powyższej zmiany, powinieneś zauważyć, że obramowanie ramki całkowicie zniknęło. Jeżeli Cię to satysfakcjonuje, możesz nie wprowadzać dalszych zmian, od tego momentu jednak masz możliwość dowolnego kształtowania wyglądu obramowania ramki za pomocą zwykłych atrybutów stylu CSS. Oto przykład (rysunek 8.11):

<iframe src="..." name="..." frameborder="0" style="border: 2px solid blue;"></iframe>

Rysunek 8.11. Obramowanie ramki osadzonej <iframe> może zostać sformatowane w sposób dowolny za pomocą atrybutów stylu CSS

Podsumowanie

Wykorzystanie ramek może ożywić Twój serwis WWW i ułatwić korzystanie z niego. Pamiętaj jednak, aby nie przesadzić — możesz łatwo zablokować olbrzymie połacie ekranu nieruchomymi ramkami, pozostawiając tylko niewielki skrawek okna przeglądarki na właściwą treść strony — a to na pewno nie ułatwia jej przeglądania.

Oto szybkie przypomnienie wszystkich możliwości mechanizmu ramek:

  • ramki pozwalają Ci w dowolny sposób podzielić okno przeglądarki na prostokątne obszary i wyświetlić w każdym z nich zawartość osobnego pliku XHTML,

  • zawartość ramek jest w wysokim stopniu niezależna — poprzez zmianę kodu XHTML odpowiedzialnego za boczne ramki okna możesz zmodyfikować wygląd całego serwisu, nie zmieniając w ogóle kodu plików XHTML zawierających właściwą treść strony,

  • masz wiele możliwości wpływania na wygląd ramek, od blokowania możliwości zmiany ich rozmiaru aż po całkowite ukrywanie ich obramowania,

  • atrybut target elementu <a> pozwala Ci skierować działanie odnośnika na dowolną z ramek Twojej strony; możesz też spowodować, by odnośnik otwarty został w nowym, odrębnym oknie przeglądarki,

  • klasyczne ramki, reprezentowane przez elementy <frame> oraz <frameset>, stosowane są coraz rzadziej; w ich miejsce coraz częściej wprowadza się ramki osadzone (element <iframe>), ściślej zintegrowane z tekstem strony i dające jeszcze większe możliwości.

 

Nowości Helionu

Statystyki

Użytkowników : 766
Artykułów : 513
Zakładki : 28
Odsłon : 15502187