Rozdział 12.

Ramki i połączenia do nich

Wyobraź sobie, że wyświetliłeś w przeglądarce bardzo dużą witrynę, składającą się z wielu poziomów stron WWW. Im dalej zagłębiasz się w zawartość witryny, tym bardziej tracisz orientację i trudniej Ci odnaleźć drogę do miejsca, z którego rozpocząłeś przeglądanie. Bardzo byś chciał, aby można było w jakiś łatwiejszy sposób poruszać się po witrynie. A oto doskonała wiadomość! Dzięki ramkom można tworzyć witryny WWW ułatwiające odwiedzającym poruszanie się i przeglądanie ich zawartości. Ramki dzielą okno przeglądarki na sekcje, z których każda może prezentować odmienną stronę WWW.

W tym rozdziale poznasz następujące zagadnienia:

• czym są ramki, jakie dają możliwości i gdzie są obsługiwane,

• jak się posługiwać połączeniami do ramek,

• jak się posługiwać ramkami,

• jak tworzyć złożone układy ramek.

Czym są ramki i gdzie są obsługiwane

Z wyjątkiem kaskadowych arkuszy stylów, większość opcji i znaczników, omawianych w poprzednich rozdziałach, będzie równie dob­rze działała we wszystkich przeglądarkach. Wygląd strony może się nieco różnić od ocze­kiwanego, ale przynajmniej użytkownicy starszych modeli przeglądarek mają dostęp do tekstu i połączeń zawartych na stronie.

W tym rozdziale poznasz nowe znaczniki, za pomocą których możesz tworzyć ramki. Ze względu na naturę tych znaczników, strony WWW zawierające ramki będą wyświetlane poprawnie tylko w tych przeglądarkach, które obsługują znaczniki ramek. Fakt ten wywołał jedną z bardziej gorących dyskusji, którą można podsumować hasłem „Netscape kontra reszta świata”. Po raz pierwszy obsługa ramek została wprowadzona w Netscape Navigatorze 2.0. Internet Explorer 3.0 także dawał możliwość obsługi ramek, które zostały nieco rozbudowane w porównaniu z Navigatorem 2.0. Otóż oprócz standardowych ramek zaprojektowanych przez firmę Netscape, Internet Explorer dawał także możliwość stosowania ramek lokalnych (czasami określanych także jako ramki pływające).

Możliwości, jakie dają ramki, udostępniają całkowicie nowy poziom kontroli układu stron, niedostępny przy wykorzystaniu rozwiązań przedstawionych we wcześniejszej części książki. Rozważ przykład przedstawiony na rysunku 12.1.

Rysunek 12.1 Prosta strona WWW z ramkami

W tym jednym oknie zgromadzone zostały informacje, które poprzednio wymagałyby kil­kakrotnego przeładowania zawartości okna. Co więcej, ponieważ informacje wyświetlane na stronie podzielone są między obszary lub ramki, zawartość pojedynczej ramki może być aktualizowana niezależnie od pozostałej zawartości. Jeśli wchodzisz w połączenie wybrane w ramce z lewej strony, zawartość dużej ramki (z prawej) jest automatycznie aktualizowa­na.

Połączenia do ramek

Zanim poznasz sposoby dodawania ramek do stron, najpierw musisz poznać nowy atrybut znacznika <A>. Ten nowy atrybut, o nazwie TARGET, ma następującą postać:

target="nazwa_okna"

Zazwyczaj, jeśli wchodzisz w połączenie, zawartość nowej strony zastępuje stronę aktualnie wyświetlaną w oknie przeglądarki. W przypadku środowiska ramek nie ma jednak powodu, dla którego zawartość nowej strony nie mogłaby być wyświetlana w nowym oknie, pozostawiając poprzednią stronę w jej własnym. Za pomocą atrybutu TARGET możesz więc poinformować przeglądarkę, by wyświetliła stronę, do której prowadzi połączenie, w oknie o nazwie nazwa_okna. W zasadzie, nazwa nowego okna może być dowolna, z jednym ogra­niczeniem — nie może rozpoczynać się od znaku podkreślenia „_”. Takie nazwy są bowiem zarezerwowane dla specjalnych wartości atrybutu TARGET, o których dowiesz się z podroz­działu „Magiczne wartości atrybutu TARGET”.

Jeśli umieścisz atrybut TARGET w znaczniku <A>, przeglądarka obsługująca ramki najpierw sprawdza, czy okno o wskazanej nazwie nazwa_okna istnieje. Jeśli tak, wskazywany przez połączenie dokument zastępuje zawartość tego okna. Jeśli nie, otwierane jest nowe okno i nadawana jest mu nazwa nazwa_okna. Dokument wskazywany przez połączenie jest wówczas ładowany do świeżo utworzonego okna.

Ćwiczenie 12.1: Posługiwanie się oknami

Podczas korzystania z układów ramek, w celu wyświetlania stron w odpowiedniej ramce układu, stosowany jest atrybut TARGET. Każde z połączeń przedstawionych w poniższym przykładzie wykorzystuje atrybut TARGET, aby wyświetlić stronę WWW w innym oknie przeglądarki. Pojęcia, które przedstawię w tym ćwiczeniu, pomogą Ci lepiej zrozumieć zagadnienia związane z docelowymi ramkami połączeń, jakie można definiować w układach ramek.

Twoim zadaniem w tym ćwiczeniu będzie utworzenie czterech dokumentów zawierających połączenia i wykorzystujących atrybut TARGET. Połączenia posłużą do otwarcia dwóch nowych okien o nazwach strona_zolta i strona_niebieska, przedstawionych na rysunku 12.2. Górne okno prezentuje dokument oryginalny (stronę czerwoną). Okno strona_zolta jest widoczny u dołu rysunku o lewej stronie, a okno strona_niebieska — po prawej.

Rysunek 12.2 Za pomocą połączeń można otwie­rać nowe okna dla każdej ze stron, którą wskazują

Rozpocznij pracę od utworzenia dokumentu oryginalnego, pokazanego na rys. 12.3. Otwórz ulubiony edytor tekstu i wprowadź takie oto wiersze kodu:

	<html> <head> <title>Główne okno - czerwone</title> </head> <body bgcolor="#ff9999"> <h1>Okno główne - czerwone</h1> <p><a href="zolta.html" target="strona_zolta">Otwórz </a> Stronę Żółtą w nowym oknie przeglądarki.<br> <a href="blue.html" target="strona_niebieska">Otwórz</a> Stronę Niebieską w nowym oknie przeglądarki.</p> <p><a href="green.html" target="strona_zolta">Zastąp</a> Stronę Żółtą Stroną Zieloną.</p> </body> </html>
Rysunek 12.3 Okno nadrzędne

Powyższy kod tworzy stronę o jasnoczerwonym tle, zawierającą połączenia z pozostałymi trzema stronami. Zapisz ten kod pod nazwą glowna.html.

Teraz utwórz dokument o nazwie zolta.html, którego wygląd pokazuje rys. 12.4. Oto od­powiedni kod:

	<html> <head> <title>Strona Żółta</title> </head> <body bgcolor="#ffffcc"> <h1>Strona Żółta</h1> <p>To pierwsza strona docelowa. Została ona wyświetlona w ramce <b>strona_zolta</b>.</p> </body> </html>
Rysunek 12.4 Dokument zolta.html wyświetlany przez przeglądarkę w oknie o nazwie strona_zolta

Po zapisaniu pliku zolta.html, utwórz kolejny dokument o nazwie niebieska.html. Jego wygląd pokazany jest na rys. 12.5. Oto kod źródłowy dokumentu:

	<html> <head> <title>Strona Niebieska</title> </head> <body bgcolor="#99ccff"> <h1>Strona Niebieska</h1> <p>To druga strona docelowa. Została ona wyświetlona w ramce <b>strona_niebieska</b>.</p> </body> </html>
Rysunek 12.5 Dokument niebieska.html wyświetlany przez przeglądarkę w oknie o nazwie strona_niebieska

Kolejny krok to utworzenie czwartego dokumentu o nazwie zielona.html:

<html> <head> <title>Strona Zielona</title> </head> <body bgcolor="#ccffcc"> <h1>Strona Zielona</h1> <p>To trzecia strona docelowa. Została ona wyświetlona w ramce <b>strona_zolta</b>. Ta strona powinna zastąpić Stronę Żółtą w jej oknie przeglądarki.</p> </body> </html>

Aby zakończyć to ćwiczenie, wyświetl w przeglądarce stronę glowna.html (tę czerwoną). Kliknij połączenie wskazujące na żółtą stronę, aby wyświetlić ją w nowym oknie przeglądarki. Strona zostanie wyświetlona w nowym oknie przeglądarki, gdyż pierwszy znacznik połączenia zawierał atrybut TARGET="strona_zolta", który przedstawiłam na poniższym fragmencie kodu strony glowna.html:

<p><a href="zolta.html" target="strona_zolta">Otwórz </a> Stronę Żółtą w nowym oknie przeglądarki.<br />

Teraz wróć do głównej (czerwonej) strony i kliknij drugie umieszczone na niej łącze. Niebieska strona zostanie wyświetlona w trzecim oknie przeglądarki. Zwróć uwagę, iż poszczególne otwierane okna przeglądarek nie będą rozmieszczane na ekranie w sposób przedstawiony na rysunku 12.2 — konkretne okna będą się wzajemnie przesłaniać. Otworzenie nowego okna przeglądarki, po kliknięciu drugiego połączenia, spowodowane jest przez atrybut TARGET="strona_niebieska":

<a href="niebieska.html" target="strona_niebieska">Otwórz</a> Stronę Niebieską w nowym oknie przeglądarki.</p>

Każdy z przedstawionych powyżej dwóch przykładów połączeń powodował otworzenie strony docelowej w nowym oknie przeglądarki. Jednak trzecie połączenie umieszczone na stronie glowna.html, dzięki wykorzystaniu atrybutu TARGET="strona_zolta" wyświetla swoją stronę docelową w oknie przeglądarki o nazwie strona_zolta. Poniżej przedstawiony został cały kod tego połączenia:

<p><a href="zielona.html" target="strona_zolta">Zastąp</a> Stronę Żółtą

Stroną Zieloną.</p>

Okno o nazwie Yellow_page zostało otworzone już wcześniej, gdy kliknąłeś połączenie ze Stroną Żółtą. Dlatego Strona Zielona powinna zastąpić stronę, która już jest wyświetlona w tym oknie. Aby sprawdzić, czy tak się dzieje w rzeczywistości, kliknij trzecie połączenie umieszczone na Stronie Czerwonej. W ten sposób, jak pokazałam na rysunku 12.6, zastąpisz Stronę Żółtą (zolta.html), Stroną Zieloną (zielona.html) w oknie przeglądarki o nazwie strona_zolta.

Rysunek 12.6 Dokument zielona.html wyświetlany przez przeglądarkę w oknie o nazwie strona_zolta

Znacznik <BASE>

Stosując atrybut TARGET w definicjach połączeń, napotkasz czasami sytuacje, w których wszystkie połączenia na stronie (lub ich większość) skierowane są do tego samego okna — zdarza się to najczęściej w przypadku korzystania z ramek.

W takich przypadkach, zamiast dodawać atrybut TARGET do każdego znacznika <A>, możesz skorzystać ze znacznika <BASE> i zdefiniować za jego pomocą globalny cel wszystkich połączeń na stronie WWW. Znacznik ten ma następującą postać:

<base target="nazwa_okna">

Jeśli znacznik <BASE> umieszczony zostanie w sekcji <HEAD>…</HEAD> dokumentu, każde połączenie utworzone za pomocą znacznika <A>, nie posiadającego odpowiedniego atrybutu TARGET, spowoduje wyświetlenie wskazywanego przez nie dokumentu w oknie określonym przez kod <BASE TARGET="nazwa_okna">. Na przykład, gdyby znacznik <BASE TARGET="pierwsze_okno"> został umieszczony w kodzie źródłowym pliku glowna.html, to trzy połączenia można by zdefiniować w taki oto sposób:

<html>

<head>

<title>Główne okno - czerwone</title>

<base target="strona_zolta"> <!-- tu dodaj znacznik base -->

</head>

<body bgcolor="#ff9999">

<h1>Okno główne - czerwone</h1>

<p><a href="zolta.html"> <!-- atrybut target niepotrzebny -->

Otwórz </a> Stronę Żółtą w nowym oknie przeglądarki.<br>

<a href="niebieska.html" target="strona_niebieska">Otwórz</a>

Stronę Niebieską w nowym oknie przeglądarki.</p>

<p><a href="zielona.html"> <!-- atrybut target niepotrzebny -->

Zastąp</a> Stronę Żółtą Stroną Zieloną.</p>

</body>

</html>

W tym przypadku dokumenty zolta.html i zielona.html są ładowane do domyślnego okna wskazanego w znaczniku <BASE> (strona_zolta). Ustawienia domyślne nie dotyczą połączenia do do­kumentu niebieska.html, bowiem dla niego zdefiniowane jest własne okno — strona_niebieska.

Możesz również zdefiniować docelowe okno połączenia, używając jednej z dwóch nazw specjalnych. Jeśli w definicji połączenia zastosujesz atrybut TARGET="_blank", otwierane jest nowe okno przeglądarki, które nie ma własnej nazwy. Natomiast jeśli zastosujesz TARGET="_self", do wyświetlenia dokumentu wykorzystane zostanie okno bieżące, a nie okno zdefiniowane w znaczniku <BASE>.

	Zapamiętaj! Jeśli nie zastosujesz atrybutu TARGET w znaczniku <BASE> i nie wskażesz celu połączenia w znaczniku <A>, otwierany połączeniem dokument zostanie wyświetlony w tej samej ramce, z której pochodzi połączenie.

Posługiwanie się ramkami

Wprowadzenie obsługi ramek w przeglądarce Netscape 2.0 otworzyło nową erę dla twór­ców stron WWW. Dzięki ramkom możesz tworzyć strony zdecydowanie różniące się od wszystkich innych. Możesz umieszczać tabele w tabelach, dodawać do stron nagłówki, stopki i paski z połączeniami, żeby wspomnieć tylko najpopularniejsze opcje.

Jednocześnie ramki zmieniają sposób widzenia „strony” przez przeglądarkę i czytelników. Kiedyś, wyświetlane na ekranie informacje stanowiły zawartość pojedynczej strony HTML — teraz, gdy tworzysz witryny korzystające z ramek, na jednym ekranie wyświetlane są informacje z kilku powiązanych ze sobą, jednak osobnych dokumentów HTML. Rys. 12.7 przed­sta­wia na schemacie, ile osobnych dokumentów jest koniecznych, by stworzyć stronę zapre­zentowaną na rys. 12.1

Rysunek 12.7 Dokumenty HTML, które musisz utworzyć, aby powstał zaprezentowany tu układ ramek

Opis HTML File — Plik HTML Frame definition — Definicja ramki Frame x contents — Zawartość ramki x

Podstawowym dokumentem HTML, który musisz utworzyć, jest dokument układu ramek. Wprowadzasz w nim kody HTML definiujące układ poszczególnych ramek. Dokument przedstawiony w poprzednim przykładzie miał cztery ramki.

Dokument układu ramek zawiera także nazwy dokumentów HTML, których zawartość będzie wyświetlana w odpowiednich ramkach. Każdy z pozostałych czterech dokumentów (wyświetlanych w poszczególnych ramkach) zawiera normalne znaczniki HTML definiujące zawartość poszczególnych ramek. Do tych dokumentów odwołuje się właśnie dokument układu ramek.

Dokument układu ramek to strona, która zawiera informacje na temat układu poszczególnych ramek oraz nazwy dokumentów HTML, które zostaną w nich umieszczone.

Znacznik <FRAMESET>

Aby móc stworzyć dokument układu ramek, musisz poznać znacznik <FRAMESET>. Znacznik ten zastępuje w dokumencie HTML znacznik <BODY>, tak jak poka­zano poniżej:

<html>

<head>

<title>Tytuł strony</title>

</head>

<frameset>

... tu rozpoczyna się definicja Twojej ramki. ...

</frameset>

</html>

Zrozumienie różnicy pomiędzy zwykłym dokumentem HTML, a dokumentem zawierającym definicje układu ramek jest niezwykle istotne. Umieszczenie znacznika <FRAMESET> w do­kumencie HTML wyklucza stosowanie znacznika <BODY>. Innymi słowy, oba znaczniki wzajemnie się wykluczają. Co więcej, dokument układu ramek nie może zawie­rać innych znaczników formatujących, połączeń oraz dokumentów tekstowych. Jedynym wyjątkiem jest sytuacja, gdy stosowany jest znacznik <NOFRAMES>, przeczytasz o tym w dalszej części tego rozdziału. Element <FRAMESET> zawiera więc wyłącznie definic­je ra­mek dla tego dokumentu, noszą one nazwę układu ramek.

Znacznik <FRAMESET> został dołączony do specyfikacji HTML 4.0, podobnie jak i jego dwa atrybuty: COLS i ROWS.

Układ ramek to grupa ramek zdefiniowanych w dokumencie układu ramek przy zastosowaniu znaczników <FRAMESET>.

Atrybut COLS

Definiując układ ramek za pomocą znacznika <FRAMESET>, musisz dołączyć do definicji jeden z atrybutów znacznika. Pierwszym z nich jest atrybut COLS. Oto odpowiednia postać znacznika:

<frameset cols="szerokość kolumny, szerokość_kolumny, ...">

Atrybut COLS informuje przeglądarkę, by podzieliła ekran na odpowiednią liczbę pionowych ramek, których szerokości zdefiniowane są poprzez kolejne wartości atrybutu COLS (szerokość_kolumny), oddzielone przecinkami. Szerokość ramki może być wprowadzana na trzy sposoby: bezpośrednio w pikselach, w procentach względem całkowitej szerokości układu ramek oraz za pomocą znaku „*”. W tym ostatnim przypadku przeglądarka przydziela tak zdefiniowanej ramce maksymalną możliwą szerokość.

Jeśli w pełnej definicji układu ramek pojawi się znacznik <FRAMESET> w postaci <FRAMESET COLS="100,50%,*">, ekran zostanie podzielony na trzy pionowe ramki, takie jak pokazane na rys. 12.8. Pierwsza ramka ma szerokość 100 pikseli, szerokość drugiej stanowi 50% szerokości całego okna przeglądarki, a trzecia zajmie pozostały obszar.

		<html> <head> <title>Trzy kolumny</title> </head> <frameset cols="100, 50%, *"> <frame src="kol_lewa.html"> <frame src="kol_srodkowa.html"> <frame src="kol_prawa.html"> </frameset> </html>
Rysunek 12.8 Atrybut COLS definiuje liczbę pionowych ramek (lub kolumn) układu ramek
		Ponieważ projektowane przez Ciebie strony będą wyświetlane w oknach o różnych rozmiarach, powinieneś unikać stosowania absolutnych rozmiarów ramek. Jeśli jednak definiujesz rozmiar ramki w ten sposób, wymiary pozostałych ramek określaj za pomocą gwiazdki (*), aby pozostała część ekranu została wypełniona.
		Aby zdefiniować układ trzech ramek, w którym szerokości wszystkich kolumn są jednakowe, zastosuj atrybut COLS="*, *, *". W ten sposób nie musisz walczyć z procentami; przeglądarka obsługująca ramki automatycznie przydzieli ramkom identyczne obszary.

Atrybut ROWS

Atrybut ROWS działa tak, jak atrybut COLS, z tym, że podział ekranu następuje w poziomie. Na przykład, aby podzielić ekran na dwie ramki o równej wysokości, takie jak na rys. 12.9, odpowiedni kod powinien wyglądać w ten sposób:

<html>

<head>

<title>Trzy kolumny</title>

</head>

<frameset rows="50%, 50%">

<frame src="wiersz_gorny.html">

<frame src="wiersz_dolny.html">

</frameset>

</html>

Alternatywna postać to:

<frameset rows="*,*">

Rysunek 12.9 Atrybut ROWS definiuje liczbę pozio­mych ramek (lub wierszy) układu ra­mek
	Jeśli spróbujesz sam wprowadzać omówione przykłady układów ramek, stwierdzisz, że znacznik <FRAMSET> nie powoduje oczekiwanego podziału na ramki. Dzieje się tak, bowiem zawartość wierszy i kolumn układu ramek nie została jeszcze zdefiniowana. Aby ją zdefiniować, musisz skorzystać ze znacznika <FRAME>. Zajmujemy się tym w następnym podrozdziale.

Znacznik <FRAME>

Po zdefiniowaniu układu ramek, musisz stowarzyszyć dokumenty HTML z poszczególnymi ramkami. Służy do tego znacznik <FRAME>, którego zawartość powinna być następująca:

<frame src="dokument_URL">

Taka definicja powinna pojawić się dla każdej z ramek układu ramek utworzonego za po­mocą znacznika <FRAMESET>:

<html> <head> <title>Znacznik FRAME</title> </head> <frameset rows="*,*,*"> <frame src="doc1.html"> <frame src="doc2.html"> <frame src="doc3.html"> </frameset> </html>

W tym przykładzie definiowany jest układ trzech poziomych ramek o jednakowej wysokoś­ci (patrz rys. 12.10). Zawartość dokumentu doc1.html wyświetlana jest w pierwszej ramce, dokumentu doc2.htm w drugiej, a w trzeciej zawartość pliku doc3.html.

Rysunek 12.10 Zawartość każdej z ramek definiowana jest za pomocą znacznika <FRAME>
	Gdy tworzysz dokument definiujący układ ramek, pomocne jest zastosowanie wcięcia do znaczników <FRAME>; w ten sposób oddzielisz je wizualnie od znaczników <FRAMESET>. Wcięcie nie wpływa w żaden sposób na wygląd stron WWW, pomaga natomiast czytać postać źródłową.

Znacznik <NOFRAMES>

A co się stanie, jeśli dokument zawierający definicje ramek jest ładowany do przeglądarki, która nie potrafi obsługiwać ramek? Nic, w przeglądarce pojawi się pusta strona. Na szczęście, można rozwiązać ten problem.

Specjalny znacznik <NOFRAMES> umożliwia zdefiniowanie w dokumencie układu ramek dodatkowego fragmentu kodu HMTL. Kod HTML umieszczony wewnątrz tego znacznika nie jest wyświetlany w przeglądarkach obsługujących ramki; pojawia się on wyłącznie w przeglądarkach, które nie są w stanie wyświetlać ramek.

<html>

<head>

<title>Układ ramek bez żadnej zawartości w ramkach</title>

</head>

<frameset>

Tu rozpoczynają się definicje ramek.

<noframes>

Tu wprowadź dowolny tekst, połączenia i znaczniki.

</noframes>

</frameset>

</html>

Tekst, zawarty między otwierającym znacznikiem <NOFRAMES> a znacznikiem zamykającym </NOFRAMES>, nie będzie wyświetlany przez przeglądarki, które obsługują ramki, a pojawi się jedynie tam, gdzie obsługa ramek jest niemożliwa. A zatem, wykorzystując ramki oraz element <NORFRAMES>, możesz więc tworzyć strony, które działają w obu typach przeglądarek. W dalszej części rozdziału zdefiniujesz zawartość elementu <NOFRAMES>.

Zmiana obramowań ramek

Jak zapewne zauważyłeś, wszystkie ramki w tym rozdziale mają szerokie obramowania oddzielające je od siebie. W pierwszej implementacji ramek, w Netscape 2.0, użytkownik nie miał możliwości wpływania na sposób oddzielania ramek. W przeglądarkach Netscape 3.0 i Internet Explorer 3.0 pojawiły się nowe atrybuty znaczników <FRAME> i <FRAMESET>, które umożliwiają kontrolę koloru i szerokości obramowania ramek.

Rozpocznijmy od znacznika <FRAME>. Korzystając z atrybutów i FRAMEBORDER, możesz sto­sować obramowania lub z nich rezygnować oraz definiować ich kolor. Wartością atrybutu BORDERCOLOR może być nazwa koloru lub liczba szesnastkowa, która go definiuje. Atrybut FRAMEBORDER przybiera dwie możliwe wartości: 1 (oznaczającą, że ramki mają być wyświetlane) oraz 0 (oznaczającą, że ramki mają być niewidoczne).

	Jeśli zrezygnujesz z obramowania, przeglądarka obsługująca ramki nie wyświetli trójwymiarowego obramowania ramki, ale pozostawi na nie wolną przestrzeń.
	Na liście atrybutów specyfikacji HTML 4.0 znajduje się jedynie atrybut FRAMEBORDER. Atrybut BORDERCOLOR jest traktowany jako rozszerzenie.

Na przykład, przedstawiony poniżej fragment kodu wyświetla ciemnoczerwoną (#cc3333) ramkę wokół środkowej ramki układu:

<html>

<head>

<title>Znacznik FRAME</title>

</head>

<frameset rows="*,*,*">

<frame src="doc1.html">

<frame src="doc2.html" frameborder="1" bordercolor="#cc3333">

<frame src="doc3.html">

</frameset>

</html>

Choć w standardzie HTML-a 4.0 nie została przewidziana możliwość zastosowania któregokolwiek z tych atrybutów w znaczniku <FRAMESET>, to jednak zarówno i w Internet Explorerze, jak i w Netscape Navigatorze można ich używać do określania domyślnego wyglądu całego układu ramek.

Oczywiście, korzystanie z kolorowych obramowań może być źródłem nieporozumień. W przedstawionym poniżej przykładowym układzie ramek występuje konflikt, gdyż dwóm ramkom mającym wspólną krawędź zostały przypisane inne kolory (przy użyciu atrybutu BORDERCOLOR):

<html>

<head>

<title>Znacznik FRAME</title>

</head>

<frameset rows="*,*,*" frameborder="0">

<frame src="doc1.html" frameborder="1" bordercolor="#yellow">

<frame src="doc2.html" bordercolor="#cc3333">

<frame src="doc3.html" >

</frameset>

</html>

W tym przypadku układ ramek został zdefiniowany jako nieposiadający obramowań, nato­miast w definicji pierwszej ramki umieszczono obramowanie. Jak ten problem zostanie roz­wiązany? W takich sytuacjach należy zastosować trzy proste zasady:

• atrybuty zewnętrznego układu ramek mają najniższy priorytet,

• atrybuty zagnieżdżonego znacznika <FRAMESET> dominują nad atrybutami znacznika nadrzędnego,

• atrybut BORDERCOLOR danej ramki dominuje nad ustawieniem wprowadzonym w znaczniku <FRAMESET>.

Atrybuty dodatkowe

W tabeli 12.1 przedstawiłam kilka dodatkowych atrybutów znacznika <FRAME>. Atrybuty te umożliwiają uzyskanie dodatkowej kontroli sposobu interakcji użytkownika z ramkami. Pozostałe atrybuty określają postać marginesów oraz odstępów pomiędzy ramkami oraz sposób wyświetlania pasków przewijania.

Tabela 12.1: Atrybuty znacznika <FRAME>

Atrybut	Wartość	Opis
FRAMEBORDER	1	Wyświetla obramowanie wokół każdej z ramek (wartość domyślna).
FRAMEBORDER	0	Tworzy ramki bez obramowań.
LONGDESC	URL	Określa URL strony zawierającej bardziej wyczerpujący opis zawartości układu ramek. Atrybut ten jest przede wszystkim używany w przeglądarkach, które nie prezentują stron w formie wizualnej.
MARGINHEIGHT	piksele	Aby określić wysokość marginesu wyświetlanego powyżej oraz poniżej dokumentu wewnątrz ramki, przypisz temu atrybutowi odpowiednią wartość liczbową.
MARGINWIDHT	piksele	Aby określić szerokość marginesu wyświetlanego z lewej oraz prawej strony dokumentu wewnątrz ramki, przypisz temu atrybutowi odpowiednią wartość liczbową.
NAME	łańcuch	Określa nazwę ramki, wykorzystywaną przy opisywaniu ramek, w jakich mają być wyświetlane strony docelowe połączeń.
NORESIZE		Według domyślnych ustawień użytkownicy mogą zmieniać położenie krawędzi wyświetlanych wokół ramki, przeciągając te krawędzie przy użyciu myszy. Zastosowanie tego atrybutu uniemożliwia modyfikację położenia krawędzi ramki.
SCROLLING	AUTO	Domyślnie, jeśli zawartość ramki zajmuje większy obszar, niż obszar udostępniany przez ramkę, Netscape automatycznie wyposaża ramkę w paski przewijania, aby użytkownicy, przewijając zawartość, mieli dostęp do całego dokumentu.
SCROLLING	NO	Takie ustawienie powoduje, że paski przewijania nie będą wyświetlane (pamiętaj jednak, że użytkownik może w ten sposób zostać odcięty od ukrytej części dokumentu, jeśli zawartość dokumentu nie zmieści się w obszarze ramki).
SCROLLING	YES	W takim przypadku paski przewijania będą wyświetlane w ramce zawsze, niezależnie od potrzeb.
SRC	URL	Określa URL dokumentu HTML, który zostanie początkowo wyświetlony w ramce, w momencie pierwszego wyświetlenia układu ramek w przeglądarce.

Tworzenie złożonych układów ramek

Układy ramek, o których uczyłeś się dotychczas, reprezentują podstawowe typy ramek. Zazwyczaj jednak będziesz stosował zdecydowanie bardziej skomplikowane układy.

Dlatego właśnie, by pomóc Ci w zrozumieniu możliwych kombinacji ramek, połączeń i do­kumentów, które są stosowane w witrynie WWW, w tym podrozdziale zajmiemy się two­rzeniem złożonych układów ramek.

Ćwiczenie 12.2. Tworzenie stron z zawartością układu ramek

W większości przypadków układy ramek służą do stworzenia paska nawigacyjnego ułatwiającego użytkownikom poruszanie się po witrynie. Zdecydowanie najpopularniejszym miejscem, w którym są umieszczane takie paski nawigacyjne, jest lewa część okna przeglądarki. Za każdym razem, gdy użytkownik klika połączenie w lewej, nawigacyjnej ramce, wybrana strona jest wyświetlana w ramce głównej. Bardzo prosty układ ramek, jaki stworzysz w tym ćwiczeniu przedstawi tę technikę. Choć nie jest to praktyczny przykład, to jednak jest prosty i zabawny, a dodatkowo demonstruje te same techniki, które są wykorzystywane przy tworzeniu pasków nawigacyjnych.

Zazwyczaj, projektując strony WWW wykorzystujące ramki, układ ramek projektowany jest, zanim zostanie podjęty trud związany z projektowaniem zawartości stron, które będą w nim wyświetlane. Wynika to z faktu, iż należy znać wielkość ramek jeszcze przed rozpoczęciem tworzenia grafik oraz pozostałej zawartości stron.

W tym ćwiczeniu wykonam czynności w odwrotnej kolejności, lecz mam po temu ważny powód. Sądzę, że zobaczenie „faktycznej” zawartości ramek, przed zaprojektowaniem układu ramek, może pomóc Ci zrozumieć, w jaki sposób jego poszczególne elementy pasują do siebie. Właśnie dlatego najpierw zaprojektuję zawartość stron.

Strony przedstawione w dalszej części ćwiczenia nie zawierają żadnych znaczników służących do tworzenia układów ramek, o których mówiliśmy w poprzedniej części rozdziału. W sumie zostanie użytych osiem stron, więc obiecuję, że ich kod będzie jak najkrótszy, tak abyś mógł je stworzyć naprawdę szybko. Gotowy?

Podpowiedź

Zazwyczaj, określając strukturę układu ramek, nie będziesz chciał zawracać sobie głowy szczegółami, takimi jak faktyczna zawartość stron, które będą wyświetlane w ramkach. Jednak układ ramek nie zostanie poprawnie wyświetlony w przeglądarce, jeśli nie zdefiniujesz w nim znaczników <FRAME> odwołujących się do istniejących dokumentów. W przypadku, gdybyś chciał tworzyć układ ramek przed stworzeniem stron, które mają być w nim wyświetlane, możesz stworzyć mały, zupełnie pusty dokument HTML o nazwie, na przykład: test.html i użyć go do testowania układu.

Układ ramek, jaki stworzysz w ćwiczeniach od 12.3 do 12.7, składa się z trzech ramek. Ich układ został przedstawiony na rysunku 12.11. W pierwszej kolejności ładowany jest dokument układu ramek, który instruuje przeglądarkę, iż jej okno należy podzielić na trzy części. Następnie są pobierane trzy strony wyświetlane w górnej, lewej oraz głównej ramce. W końcu, jeśli użytkownik próbuje otworzyć układ ramek w przeglądarce, która dysponuje wymaganymi możliwościami, to zostaje pobrana i wyświetlona strona alternatywna.

Rysunek 12.11 Stworzysz układ składający się z trzech ramek: górnej, lewej oraz głównej

W górnej ramce zawsze będzie wyświetlana ta sama strona WWW, o nazwie tytul.html. Strona o nazwie wybor.html zawiera listę połączeń z sześcioma stronami podającymi powody nieobecności, o nazwach powod1.html do powod6.html. Każda z tych sześciu stron zostanie wyświetlona w głównej ramce, zajmującej prawą, dolną część układu.

Zaczniemy od kodu tworzącego górną ramkę. Ta strona zawsze będzie widoczna w układzie ramek. Bez trudu można na niej umieścić dowolne informacje, jakie mają być zawsze widoczne w czasie, gdy użytkownik będzie przeglądał zawartość witryny. W realnych przykładach ramka ta może zawierać nazwę witryny, jej logo, adres poczty elektronicznej autora oraz inne, podobne informacje. Wpisz przedstawiony poniżej kod i zapisz go na dysku w pliku o nazwie tytul.html. Przykład tej strony został przedstawiony na rysunku 12.12.

<html>

<head>

<title>Nie ma mnie przy biurku, gdyż</title>

</head>

<body bgcolor="#cc6600" text="#ffcc33">

<h3>Nie ma mnie przy biurku, gdyż ... </h3>

</body>

</html>

Rysunek 12.12. Zawartość górnej ramki układu ramek

Teraz stworzysz lewą ramkę układu. Zazwyczaj, w praktycznych zastosowaniach, ramka ta zawiera tekstowe lub graficzne paski nawigacyjne umożliwiające przechodzenie do kilku kluczowych stron witryny. Witryna personalna może, na przykład, zawierać pasek nawigacyjny umożliwiający przechodzenie do strony głównej, listy gości, strony o zainteresowaniach autora, itp. W przypadku witryny firmowej, strona ta może zawierać sekcje dotyczące produktów, serwisu, często zadawanych pytań, sekcję dotyczącą zatrudnienia, itp.

Strona przedstawiona poniżej działa dokładnie w taki sam sposób, jak wszystkie paski nawigacyjne, które można znaleźć w witrynach na WWW; po kliknięciu odpowiedniego połączenia, wyświetla odpowiednią stronę w ramce głównej. Strona ta zawiera połączenia do sześciu stron o nazwach powod1.html do powod6.html, które stworzysz w dalszej części ćwiczenia.

Po wpisaniu przedstawionego poniżej kodu strony, zapisz ją na dysku w pliku o nazwie wybor.html i umieść w tym samym folderze, w którym wcześniej zapisałeś dokument tytul.html. Twoja strona powinna wyglądać podobnie do strony przedstawionej na rysunku 12.13.

<html>

<head>

<title>Powody mojej nieobecności</title>

</head>

<body bgcolor="#006699" text="#FFCC66" link="#FFFFFF" vlink="#66CCFF" alink="#FF6666">

<p>Wybierz powód:</p>

<hr>

<p><a href="powod1.html" target="glowna">Powód 1</a></p>

<p><a href="powod2.html" target="glowna">Powód 2</a></p>

<p><a href="powod3.html" target="glowna">Powód 3</a></p>

<p><a href="powod4.html" target="glowna">Powód 4</a></p>

<p><a href="powod5.html" target="glowna">Powód 5</a></p>

<p><a href="powod6.html" target="glowna">Powód 6</a></p>

</body>

</html>

Rysunek 12.13. Zawartość lewej ramki układu

Teraz przejdziemy do stworzenia sześciu stron, które będą wyświetlane w głównej ramce, gdy użytkownik kliknie jedno z połączeń dostępnych w lewej ramce układu. Ramka główna jest przeznaczona do wyświetlania stron, które normalnie byłyby wyświetlane w całym oknie przeglądarki. Jest jednak pewna rzecz, o jakiej powinieneś pamiętać, jeśli masz zamiar wyświetlać strony w układzie zawierającym lewą ramkę nawigacyjną. Otóż grafika oraz pozostałe elementy strony powinne być mniejsze niż w przypadku, gdybyś wyświetlał je w całym oknie przeglądarki.

Aby przykładowe strony były względnie proste, podstawowy układ każdej z nich będzie taki sam. Na każdej ze stron będą się zmieniały wyłącznie trzy, przedstawione poniżej elementy.

• Tytuł strony.

• Obraz wyświetlany na stronie. Wyświetlane obrazy mają nazwy: uhoh.jpg, fliryt.jpg, grumpy.jpg, happy.jpg, scared.jpg oraz duh.jpg. --> Wszystkie te obrazy można znaleźć na witrynie poświęconej książce, pod adresem http://www.tywebpub.com.[Author:p8R]

• Tekst opisujący, co oznacza obraz umieszczony na stronie.

Aby stworzyć pierwszą z sześciu stron, jakie będą wyświetlane w ramce głównej, wpisz podany poniżej kod i zapisz go w dokumencie o nazwie powod1.html. Na rysunku 12.14 pokazałam, w jaki sposób będzie wyglądała każda ze stron, wyświetlona w Internet Explorerze.

<html>

<head>

<title>Powód 1 - Zapomniałem drugiego śniadania</title>

</head>

<body bgcolor="#FFFFFF">

<h2><img src="uhoh.jpg" width="275" height="275" align="LEFT">

Zapomniałem w domu drugiego śniadania.</h2>

</body>

</html>

Rysunek 12.14. Pierwsza z sześciu stron wyświetlanych w głównej ramce

W podobny sposób należy stworzyć pięć pozostałych stron wyświetlanych w ramce głównej. Zmodyfikuj wpisany przed chwilą kod, aby stworzyć drugą z sześciu stron. Jedyne różnice, jakie należy prowadzić (w porównaniu z kodem dokumentu powod1.html), zostały wyróżnione szarym tłem. Zapisz przedstawiony poniżej kod w pliku o nazwie powod2.html. Oto kod tego dokumentu:

<html>

<head>

<title>Powód 2 - Kawa</title>

</head>

<body bgcolor="#FFFFFF">

<h2><img src="flirty.jpg" width="275" height="275" align="LEFT">

Robię sobie kawę.</h2>

</body>

</html>

Aby stworzyć trzecią stronę, ponownie zmodyfikuj kod i zapisz go w pliku o nazwie powod3.html. Kod tej strony przedstawiłam poniżej:

<html>

<head>

<title>Powód 3 - Nie pytaj!</title>

</head>

<body bgcolor="#FFFFFF">

<h2><img src="grumpy.jpg" width="275" height="275" align="LEFT">

Nie Twój interes!</h2>

</body>

</html>

Oto kod czwartej strony (powod4.html):

<head>

<title>Powód 4 - Obiad</title>

</head>

<body bgcolor="#FFFFFF">

<h2><img src="happy.jpg" width="275" height="275" align="LEFT">

Poszedłem na obiad.</h2>

</body>

</html>

Piąta strona (powod5.html) wygląda następująco:

<head>

<title>Powód 5 - U szefa</title>

</head>

<body bgcolor="#FFFFFF">

<h2><img src="scared.jpg" width="275" height="275" align="LEFT">

Poszedłem na rozmowę z szefem.</h2>

</body>

</html>

A oto kod ostatniej, szóstej strony (powod6.html):

<head>

<title>Powód 6 - Już tu nie pracuję</title>

</head>

<body bgcolor="#FFFFFF">

<h2><img src="duh.jpg" width="275" height="275" align="LEFT">

Właśnie mnie wyrzucili mnie.</h2>

</body>

</html>

Teraz dysponujesz już sześcioma stronami, które będą wyświetlane w głównej ramce układu. Jesteś już gotów, by stworzyć sam układ ramek.

Ćwiczenie 12.3. Łączenie atrybutów ROWS i COLS

Aby przypomnieć Ci wygląd układu ramek, który będziesz miał stworzyć, na rysunku 12.15 jeszcze raz przedstawiłam wygląd gotowej strony. Na jej podstawie można zaprezentować w prosty sposób, jak należy wykorzystywać ramki do stworzenia witryny o skomplikowanej strukturze.

Rysunek 12.15 Układ składający się z trzech ramek: górnej, lewej i głównej
	Przy projektowaniu skomplikowanego układu ramek niezastąpionym narzędziem jest notatnik. Pomoże Ci on naszkicować strukturę układu i będzie także nieoceniony, gdy zaczniesz dodawać połączenia. Przekonasz się o tym w ćwiczeniu 12.5, pt.: „Stosowanie połączeń i ramek posiadających nazwy”.

Na rys. 12.15 przedstawiony jest układ, w którym prawa część okna przeglądarki podzielona jest na dwie poziome ramki, natomiast ramka trzecia, umiejscowiona z lewej strony okna zajmuje całą jego wysokość. Aby utworzyć dokument definiujący taki układ ramek, otwórz swój edytor tekstu i wprowadź następujące strukturalne szczegóły HTML-a:

<html>

<head>

<title>Dlaczego mnie nie ma - układ ramek</title>

</head>

<frameset>

</frameset>

</html>

Teraz musisz zdecydować, czy w podstawowym znaczniku <FRAMESET> zastosujesz atrybut ROWS czy COLS. Spójrz na swój szkic (jest nim w tym przypadku rys. 12.15) i sprawdź, czy w jakimś przypadku obszar ramki rozciąga się w poprzek lub wzdłuż ekranu. Jeśli którakolwiek z ramek układu zajmuje całą wysokość okna przeglądarki, tak jak w tym przykładzie, to musisz najpierw zdefiniować układ ramek z atrybutem COLS, w przeciwnym przypadku (gdy jedna z ramek układu zajmuje całą szerokość okna) — układ z atrybutem ROWS. Jeśli natomiast żadna z ramek nie rozciąga się na cały ekran w żad­nym z kierunków, powinieneś wystartować od definicji układu ramek z atrybu­tem COLS.

To samo można wyrazić prościej, w postaci trzech zasad:

• jeśli z lewej do prawej, stosujesz ROWS,

• jeśli od góry do dołu, stosujesz COLS,

• w wątpliwych wypadkach stosujesz COLS.

	Źródłem tych zasad jest sposób wyświetlania układu ramek przez przeglądarki. Każda z definicji <FRAMESET> może podzielić ekran (lub ramkę) pionowo lub poziomo, natomiast nigdy na oba sposoby jednocześnie. Z tego powodu, aby osiągnąć żądany efekt, musisz definiować układy ramek, zachowując logiczny porządek.

Na rys. 12.15 lewa ramka rozpościera się na całą wysokość okna przeglądarki. Stosując więc zasady, o których wspominałam, musisz rozpocząć definiowanie od układu ramek z zastosowanym atrybutem COLS. Oto odpowiedni kod:

<frameset cols="125,*">

<frame src="wybor.html" name="lewa">
<!-- ładuje stronę z wyboru do lewej ramki -->

<frame src="pusta.html"> <!-- ta linia kodu jest tymczasowa -->

</frameset>

Powyższy fragment kodu dzieli okno przeglądarki na dwie części. Pierwsza linia kodu (wewnątrz znacznika <FRAMESET>) definiuje niewielką ramkę o szerokości 125 pikseli, wyświetlaną z lewej strony okna przeglądarki. Kolejna, druga linia definiuje dużą ramkę wyświetlaną z prawej strony okna przeglądarki i zajmującą całą jego dostępną przestrzeń.

Jak już wcześniej wspominałam, sam dokument układu ramek nie opisuje zawartości poszczególnych ramek. Kod HTML wyświetlany w układzie ramek — tekst, obrazy oraz wszelkie pozostałe znaczniki — są zapisane w plikach określanych przez atrybut SRC poszczególnych znaczników <FRAME>. Przykłady tych znaczników możesz zobaczyć w drugiej oraz trzeciej linii przedstawionego wcześniej fragmentu kodu. W drugiej linii kodu zostaje określony URL strony WWW, która zostanie wyświetlona w lewej ramce układu (jest nią strona wybor.html stworzona we wcześniejszej części rozdziału). Trzecia linia powyższego fragmentu kodu spowodowałaby wyświetlenie strony o nazwie chwilowa.html (gdyby oczywiście taka strona została stworzona), jednak w naszym przypadku linia ta została stworzona tymczasowo i zmienimy ją w kolejnym ćwiczeniu.

Ćwiczenie 12.4. Zagnieżdżanie układów ramek

Następny etap to podzielenie prawej ramki na dwie poziome ramki. Efekt ten osiągniesz, umiesz­czając drugi element <FRAMESET> w podstawowym elemencie <FRAMESET>. Aby zagnieź­dzić jeden element <FRAMESET> w innym, zagnieżdżany znacznik musi zastąpić jeden ze znacz­ników <FRAME> nadrzędnego układu ramek. W tym przypadku nowy układ ramek zastąpi znacznik <FRAME> ładujący nieistniejącą stronę pusta.html.

Dlatego, aby podzielić górną ramkę na dwie, zastąp pierwszy ze znaczników <FRAME> elementem <FRAMESET>. W ten sposób nowy układ ramek zostanie osadzony w obrębie obszaru zdefiniowanego przez zastępowany znacznik <FRAME>. W osadzanym znaczniku <FRAMESET> musisz zdefiniować atrybut ROWS, jak pokazałam na poniższym przykładzie:

<html>

<head>

<title>Dlaczego mnie nie ma - układ ramek</title>

</head>

<frameset cols="125,*">

<frame src="wybor.html">

<!-- ładuje stronę z wyboru do lewej ramki -->

<frameset rows="60,*"> <!-- ramka dla drugiej kolumny -->

<frame src="tytul.html"> <!-- została zastąpiona -->

<frame src="powod1.html"> <!-- wewnętrznym -->

</frameset> <!-- układem ramek -->

</frameset>

Atrybut ROWS osadzonego układu ramek definiuje dwa wiersze — górny o szerokości 60 pikseli, i drugi, zajmu­jący pozostałą część wysokości okna przeglądarki. Ponadto, pomiędzy znacznikami <FRAMESET> i </FRAMESET> osadzone są dwa znaczniki <FRAME>, które definiują zawartość każdego z wierszy. Pierwszy znacznik <FRAME> powoduje wyświetlenie w górnej ramce dokumentu o nazwie tutul.html, a drugi, wyświetlenie dokumentu powod1.html w dolnej ramce.

	W przypadku osadzonego układu ramek procentowe rozmiary ramek należy odnosić do całkowitego wymiaru samego układu, a nie do wymiaru ekranu.


Ostatni krok, to zapisanie ukończonego dokumentu HTML na dysku twardym pod nazwą ramki.html. Teraz pozostaje Ci jedynie przetestowa­ć go w przeglądarce obsługującej ramki. Spróbuj także pooglądać dokument w przeglą­darce, która nie obsługuje ramek, o ile oczywiście dysponujesz taką (jedyne, co powinieneś zobaczyć, to pusta strona).

Ćwiczenie 12.5: Stosowanie połączeń i ramek posiadających nazwy

Gdybyś teraz załadował plik ramki.html do przeglądarki obsługującej ramki, na ekranie pojawi­łoby się coś, co przypominałoby rys. 12.15. W niektórych wypadkach wielkości czcionek i odstępów mogłyby odbiegać od oryginału, ale ogólny wygląd byłby taki sam.

Chociaż układ ramek wygląda odpowiednio, to jednak nie działa poprawnie. Próba skorzystania z któregokolwiek z połączeń z lewej ramki dawałaby dziwne rezultaty. Konkretnie rzecz biorąc, przeglądarka próbowałaby wyświetlić zawartość wybranego pliku w tej samej, lewej ramce, a nie, jak sobie tego życzysz, w dużej ramce z prawej strony.

We wcześniejszej części rozdziału poznałeś atrybut TARGET, który umożliwia wyświetlanie stron WWW w różnych oknach przeglądarki. Aby układ ramek zaczął działać, tak jak powinien, będziesz musiał zastosować nieco zmodyfikowaną wersję atrybutu TARGET. W tym przypadku atrybut ten nie ma bowiem wskazywać na nowe okno, lecz na jedną z istniejących ramek układu.

Cel ten możesz osiągnąć, rozpoczynając od nadania wszystkim ramkom układu nazw. Naz­wy definiowane są za pomocą atrybutu NAME znacznika <FRAME>. Oto jego odpowiednia postać:

<frame src="dokument_URL" name="nazwa_ramki">

Dlatego, aby przypisać nazwę każdej z ramek układu zdefiniowanego w dokumencie ramki.html, powinieneś dodać atrybut NAME do każdego znacznika <FRAME>. W przedstawionym poniżej fragmencie kodu wszystkie wprowadzone modyfikacje zostały zaznaczone pogrubioną czcionką. Teraz układ ramek na następującą postać:

<html>

<head>

<title>Dlaczego mnie nie ma - układ ramek</title>

</head>

<frameset cols="125,*">

<frame src="wybor.html" name="lewa">

<!-- ładuje stronę z wyboru do lewej ramki -->

<frameset rows="60,*"> <!-- ramka dla drugiej kolumny -->

<frame src="tytul.html" name="gorna"><!-- została zastąpiona -->

<frame src="powod1.html" name="glowna"> <!-- wewnętrznym -->

</frameset> <!-- układem ramek -->

</frameset>

Ten kod źródłowy wprowadza dla ramki umieszczonej z lewej strony nazwę „lewa”, a dla dwóch ramek w prawej kolumnie nazwy: „gorna” (dla górnej ramki) oraz „glowna” (dla ramki dolnej). Zapisz tak uaktualniony plik pod nazwą ramki.html. Zbliża Cię to do zakończenia ćwiczenia.

Ćwiczenie 12.6. Tworzenie połączeń między ramkami a dokumentami

Określenie nazw ramek to tylko połowa sukcesu. Teraz będziesz musiał zmodyfikować połączenia umieszczone na stronie choice.html w taki sposób, aby ich strony docelowe były wyświetlane nie w ramce lewa, lecz glowna.

Jak sobie przypominasz, aby skierować dokument do określonego okna, do znacznika <A> dodawany jest atrybut TARGET. Ten sam atrybut jest stosowany w celu wskazania ramki, do której dokument ma być załadowany.

Oto, co masz zrobić w tym ćwiczeniu. Chcesz, aby po kliknięciu połączeń wyświetlanych w ramce o nazwie lewa, odpowiednie strony docelowe były wyświetlane w ramce o nazwie glowna (prawej, dolnej ramce układu). Ponieważ już wcześniej przypisałeś dolnej, prawej ramce układu nazwę "glowna", teraz będziesz musiał tylko dodać atrybuty TARGET="glowna" do każdego znacznika <A> umieszczonego w dokumencie wybor.html. Poniższy fragment kodu pokazuje, jak należy wprowadzić te modyfikacje:

<p><a href="powod1.html" target="glowna">Powód 1</a></p>

<p><a href="powod2.html" target="glowna">Powód 2</a></p>

<p><a href="powod3.html" target="glowna">Powód 3</a></p>

<p><a href="powod4.html" target="glowna">Powód 4</a></p>

<p><a href="powod5.html" target="glowna">Powód 5</a></p>

<p><a href="powod6.html" target="glowna">Powód 6</a></p>

Alternatywnie, ponieważ we wszystkich znacznikach <A> dokumentu wybor.html wska­zana jest ta sama ramka, możesz zastosować znacznik <BASE TARGET="wartość">. W tym przypadku nie musisz umieszczać w każdym ze znaczników <A> atrybutu TARGET="glowna". Ten sam efekt możesz uzyskać, umieszczając w nagłówku dokumentu (pomiędzy znacznikami <HEAD> i </HEAD>) znacznik <BASE> o następującej postaci:

<BASE TARGET="glowna">

Po dokonaniu wszystkich zmian i utworzeniu nowych dokumentów, powinno być możliwe załadowanie pliku do przeglądarki i pooglądanie w prawej ramce zawartości do­kumentów wybieranych w ramce z lewej strony.

	Po uruchomieniu połączeń, może okazać się konieczny powrót do doku­mentu definiującego układ ramek i dopasowanie wymiarów ramek w znaczni­kach <FRAMESET>. Pamiętaj, że końcowy wygląd układu ramek zależy od rozdzielczości ekranu i systemu operacyjnego zainstalowanego na komputerze użytkownika.

Ćwiczenie 12.7: Podanie zawartości znacznika <NOFRAMES>

Choć układ ramek stworzony w poprzednich ćwiczeniach działa doskonale, to jednak powinieneś dodatkowo go rozbudować. Pamiętaj, że niektóre osoby będą przeglądać Twoją stronę z układem ramek, korzystając z przeglądarek nie będących w stanie wyświetlać ramek. W tym ćwiczeniu dodasz do dokumentu układu ramek kod HTML, który będzie wyświetlany w takich właśnie przeglądarkach.

Ponownie otwórz stronę ramki.html. Aktualnie jej kod powinien mieć następującą postać:

<html>

<head>

<title>Dlaczego mnie nie ma - układ ramek</title>

</head>

<frameset cols="125,*">

<frame src="wybor.html" name="lewa">

<!-- ładuje stronę z wyboru do lewej ramki -->

<frameset rows="60,*"> <!-- ramka dla drugiej kolumny -->

<frame src="tytul.html" name="gorna"><!-- została zastąpiona -->

<frame src="powod1.html" name="glowna"> <!-- wewnętrznym -->

</frameset> <!-- układem ramek -->

</frameset>

</html>

Bezpośrednio za ostatnim znacznikiem </FRAMESET> i przed znacznikiem </HTML> wstaw element <NOFRAMES>...</NOFRAMES> o następującej zawartości:

<noframes>

<body bgcolor="#FFFFFF">

<h1>Nie ma mnie przy biurku, gdyż ...</h1>

<ul>

<li>Powód 1 - <a href ="powod1.html">

Zapomniałem w domu drugiego śniadania.</a></li>

<li>Powód 2 - <a href ="powod2.html">

Robię sobie kawę.</a></li>

<li>Powód 3 - <a href ="powod3.html">

Nie Twój interes.</a></li>

<li>Powód 4 - <a href ="powod4.html">

Poszedłem na obiad.</a></li>

<li>Powód 5 - <a href ="powod5.html">

Poszedłem na rozmowę z szefem.</a></li>

<li>Powód 6 - <a href ="powod6.html">

Właśnie mnie wyrzucili.</a></li>

</ul>

</body>

</noframes>

Teraz, gdy układ ramek zostanie otworzony w przeglądarce, która nie jest w stanie obsługiwać ramek, pojawi się w niej strona WWW przedstawiona na rysunku 12.16.

Rysunek 12.16. Ta strona jest wyświetlana, gdy układ ramek zostanie otworzony w przeglądarce, która nie jest w stanie obsługiwać ramek

Magiczne nazwy TARGET

Teraz, gdy już wiesz, jaką funkcję pełni atrybut TARGET w układach ramek, powinieneś dowiedzieć się, iż można mu przypisać kilka specjalnych wartości.

Atrybut TARGET może przyjmować pewne specjalne wartości, z których dwie już poznałeś (_blank i _self). W Netscape wartości te noszą nazwę magicznych nazw TARGET. Tabela 12.2 prezentuje je wszystkie wraz z krótkimi opisami.

Tabela 12.2: Magiczne nazwy TARGET

Nazwa	Opis
TARGET="_blank"	Powoduje, że dokument wskazywany w znaczniku <A> jest ładowany do nowego okna nie mającego nazwy.
TARGET="_self"	Powoduje, że dokument wskazywany w znaczniku <A> jest ładowa­ny do tego samego okna lub ramki, w którym znaj­duje się połącze­nie definiowane znacznikiem <A>. Jest to użyteczne, gdy chcesz, by dane połączenie spowodowało wyświetlenie dokumentu nie w ram­ce domyślnej, definiowanej przez znacznik <BASE>, ale w bieżącej.
TARGET="_parent"	Powoduje, że dokument ładowany jest do ramki nadrzędnej wobec ramki zawierającej bieżący dokument. Jeśli jednak nie istnieje ramka nadrzędna, będzie stosowane ustawienie TARGET="_self".
TARGET="_top"	Powoduje, że ładowany dokument zajmuje całe okno przeglądarki, zastępując całkowicie bieżący układ ramek. Jeśli jednak bieżący dokument jest już w ten sposób wyświetlany, stosowane będzie ustawienie TARGET="_self". W przeważającej ilości przypadków, tworząc połączenia z innymi witrynami WWW, nie będziesz chciał, aby były one wyświetlane wewnątrz Twojego układu ramek. Można to osiągnąć, dodając do znacznika definiującego połączenie atrybut TARGET="_top".

Ramki lokalne

W wersji przeglądarki Internet Explorer 3.0 Microsoft wprowadził nową odmianę ramek — ramki lokalne. Pomysł ten, który pojawia się w specyfikacji HTML 4.0, daleko odbiega od idei ramek zapoczątkowanej przez Netscape.

Ramki lokalne mają swoje wady i zalety. Zaletą jest możliwość umieszczenia ramki lokalnej w dowolnym miejscu strony, podobnie jak obrazu, tabeli czy też dowolnego innego elementu. To stwarza wiele nowych możliwości, których nie dają standardowe układy ramek opisane we wcześniejszej części dokumentu.

	Autorzy specyfikacji HTML 4.0 dołączyli do niej ramki lokalne, aczkolwiek z pewnym wahaniem. Zgodnie ze specyfikacją, ten sam efekt można osiągnąć za pomocą znacznika <OBJECT>; stawia to pod znakiem zapytania sens umieszczania w specyfikacji ramek tego typu. Na razie jednak ramki te są elementem pro­pozycji, a Internet Explorer obsługuje te technologie, warto więc się jej nau­czyć.

Stosując ramki lokalne, trzeba jednak zwracać uwagę na kilka spraw. Jedynymi aktualnie dostępnymi przeglądarkami, które obsługują ramki lokalne, jest Internet Explorer 3.0 oraz jego wersje późniejsze. Zanim zaczniesz projektować strony wykorzystujące ramki lokalne, musisz byś świadom jeszcze jednego utrudnienia.

Standardowe układy ramek umożliwiają określenia zawartości alternatywnej, wyświetlanej, jeśli osoba oglądająca stronę korzysta z przeglądarki, która nie obsługuje ramek. Niestety, element <IFRAME> nie daje takich możliwości. Jeśli strona zawierająca ramkę lokalną zostanie wyświetlona w przeglądarce, która nie obsługuje ramek, to miejsce zajmowane przez ramkę lokalną będzie zupełnie puste. Z tego względu, być może, nie będziesz chciał stosować ramek lokalnych, chyba że masz całkowitą pewność, iż wszystkie osoby oglądające Twoje strony używają Internet Explorera w wersji 3.0 lub późniejszej.

Wiedząc o tych zagrożeniach, możesz już poznać sposób tworzenia ramek lokalnych. Tworzy się je za pomocą znacznika <IFRAME>. Podobnie jak obrazy, ramki te pojawiają się jako wpisane w dokument. Znacznik <IFRAME> umożliwia wstawia­nie doku­mentu HTML w ramce w dowolnym miejscu innego dokumentu HTML.

Tabela 12.3 przedstawia kluczowe atrybuty znacznika <IFRAME>. Wszystkie są elementami specyfikacji HTML 4.0, z wyjątkiem tych, które stanowią rozszerzenia przeglądarki Internet Explorer. Oto lista atrybutów:

Tabela 12.3. Kluczowe atrybuty

Atrybut	Opis
WIDTH	Określa szerokość (w pikselach) ramki lokalnej, w której umieszczony zostanie dokument HTML.
HEIGHT	Określa wysokość (w pikselach) ramki lokalnej, w której umieszczony zostanie dokument HTML.
SRC	Określa adres URL dokumentu HTML, który będzie wyświetlany w ramce.
NAME	Określa nazwę ramki, umożliwiając w ten sposób tworzenie celów i połączeń
FRAMEBORDER	Wskazuje, czy wokół ramki ma być wyświetlane obramowanie. Wartość 1 odpowiada obecności obramowania, a wartość 0 wskazuje jego brak.
MARGINWIDTH	Definiuje szerokość marginesu (w pikselach).
MARGINHEIGHT	Definiuje wysokość marginesu (w pikselach).
NORESIZE	Wskazuje, że użytkownik nie ma możliwości zmiany rozmiarów ramki. Jest to rozszerzenie przeglądarki Internet Explorer.
SCROLLING	Tak jak w przypadku znacznika <FRAME>, wskazuje, czy mają być wyświetlane paski przewijania (atrybut ma wartości YES, NO lub AUTO — ta ostatnia jest wartością domyślną).
VSPACE	Definiuje wysokość marginesu. Jest to rozszerzenie przeglądarki Internet Explorer.
HSPACE	Definiuje szerokość marginesu. Jest to rozszerzenie przeglądarki Internet Explorer.
ALIGN	Tak jak w przypadku znacznika <IMG>, określa umiejscowienie ramki względem linii tekstu, w której się ona pojawia. Możliwe wartości to: LEFT, MIDDLE, RIGHT, TOP i BOTTOM, przy czym ostatnia jest wartością domyślną. Wartości ABSBOTTOM, ABSMIDDLE, BASELINE i TEXTTOP są dostępne jako rozszerzenia przeglądarki Internet Explorer.

Już wiesz, jak można tworzyć standardowe ramki oraz ramki lokalne, a zatem zastosowanie znacznika <IFRAME> nie powinno przysporzyć Ci żadnych problemów. Przedstawiony poniżej fragment kodu demonstruje jeden ze sposobów, w jaki można wyświetlić stronę „Dlaczego nie ma mnie przy biurku” przy wykorzystaniu ramek lokalnych. Ten przykład rozpoczniesz od stworzenia strony WWW o czerwonym tle. Połączenia dostępne na tej stronie zostaną wyświetlone w jednej linii, wyśrodkowanej i wyświetlonej powyżej ramki lokalnej. Dla uzyskania większej przejrzystości kodu, każde z połączeń zapisałam w osobnej linii.

Poniżej połączeń, których strony docelowe będą wyświetlane w ramce lokalnej o nazwie "powod", umieściłam kod definiujący ramkę lokalną. Kod ten został umieszczony wewnątrz znacznika <DIV>, wyśrodkowanego na stronie. Jak widać, ramka lokalna będzie miała 450 pikseli szerokości, 315 pikseli wysokości i zostanie wyśrodkowana na stronie (wygląd strony przedstawiłam na rysunku 12.17).

<html>

<head>

<title>Dlaczego mnie nie ma</title>

</head>

<body bgcolor="#ffcc99">

<h2>Nie ma mnie przy biurku, gdyż ...</h2>

<p align="center">

<a href ="powod1.html" target="powod">Powód 1</a>

<a href ="powod2.html" target="powod">Powód 2</a>

<a href ="powod3.html" target="powod">Powód 3</a>

<a href ="powod4.html" target="powod">Powód 4</a>

<a href ="powod5.html" target="powod">Powód 5</a>

<a href ="powod6.html" target="powod">Powód 6</a></p>

<div align="center">

<iframe name="powod" src="powod1.html" width="450" height="315">

</div>

</body>

</html>

Rysunek 12.17 Ramka pływająca, zwana także ramką lokalną

Podsumowanie

Jeśli po przeczytaniu tego rozdziału głowa pęka Ci, nie jesteś chyba jedynym skarżącym się na tę dolegliwość. Chociaż podstawowe zasady dotyczące tworzenia ramek i korzystania z nich są proste, z ich implementacją jest nieco gorzej. W rezultacie, najlepszą metodą nauczenia się obsługi ramek jest eksperyment.

Rozdział, który właśnie kończysz, poświęcony był tworzeniu połączeń do nowych lub istniejących okien. Dowiedziałeś się z niego także, jak tworzyć układy ramek i łączyć je ze sobą za pomocą znaczników wymienionych w tabeli 14.3.

Tabela 14.3: Nowe znaczniki omawiane w rozdziale 14

Znacznik	Atrybut	Opis
<BASE TARGET ="nazwa_okna">		Określa jako globalny cel wszystkich połączeń na stronie WWW okno lub ramkę o wskazanej nazwie.
<FRAMESET>		Definiuje podstawową strukturę układu ramek.
	COLS	Określa liczbę pionowych ramek (kolumn) układu i ich szerokość.
	ROWS	Określa liczbę poziomych ramek (wierszy) układu i ich wysokość.
	FRAMEBORDER	Wskazuje, czy pomiędzy ramkami układu ramek zostanie wyświetlone obramowanie.
	BORDERCOLOR	Określa kolor obramowania układu ramek.
<FRAME>		Określa zawartość ramki układu ramek.
	SRC	Wskazuje adres URL dokumentu, który zostanie wyświetlony w ramce.
	MARGINWIDTH	Określa szerokość marginesów po obu stronach ramki (w pikselach).
	MARGINHEIGHT	Określa wymiary marginesów nad i pod zawartością ramki (w pikselach).
	SCROLLING	Uaktywnia lub dezaktywuje wyświetlanie pasków przewijania w ramkach. Wartości: YES, NO lub AUTO.
	NORESIZE	Uniemożliwia zmianę rozmiarów ramki przez użytkownika.
	FRAMEBORDER	Wskazuje, czy pomiędzy ramkami wyświetlone zostanie obramowanie.
	BORDERCOLOR	Definiuje kolor obramowania układu ramek.
	LONGDESC	Określa URL strony zawierającej bardziej wyczerpujący opis zawartości układu ramek. Atrybut ten wykorzystywany jest przede wszystkim w przeglądarkach, które nie prezentują zawartości stron w sposób wizualny.
	NAME	Określa nazwę ramki. Atrybut używany przy określaniu ramek, w jakich będą wyświetlane docelowe strony połączeń.
<IFRAME>		Definiuje ramkę pływającą lub lokalną.
	SRC	Wskazuje adres URL dokumentu, który zostanie wyświetlony w ramce.
	NAME	Określa nazwę ramki, umożliwiając w ten sposób tworzenie celów i połączeń.
	WIDTH	Określa szerokość (w pikselach) ramki lokalnej, w której umieszczony zostanie dokument HTML.
	HEIGHT	Określa wysokość (w pikselach) ramki lokalnej, w której umieszczony zostanie dokument HTML.
	MARGINWIDTH	Definiuje szerokość marginesu (w pikselach).
	MARGINHEIGHT	Definiuje wysokość marginesu (w pikselach).
	SCROLLING	Wskazuje, czy mają być wyświetlane paski przewijania (atrybut ma wartości YES, NO lub AUTO — ta ostatnia jest wartością domyślną).
	FRAMEBORDER	Wskazuje, czy wokół ramki ma być wyświetlane obramowanie. Wartości: 1 i 0.
	VSPACE	Definiuje wysokość marginesu (Internet Explorer).
	HSPACE	Definiuje szerokość marginesu (Internet Explorer).
	ALIGN	Określa umiejscowienie ramki względem linii tekstu, w której się ona pojawia. Możliwe wartości to: LEFT, MIDDLE, RIGHT, TOP i BOTTOM, przy czy ostat­nia jest wartością domyślną. Wartości ABSBOTTOM, ABSMIDDLE, BASELINE i TEXTTOP są dostępne jako rozszerzenia przeglą­darki Internet Explorer.
<NOFRAMES>		Definiuje tekst, który ma być wyświetlany w przeglądarkach nie obsługujących ramek.

Za to, że dobrnąłeś do tego miejsca książki, powinieneś wystawić sobie laurkę. Nie można się więcej nauczyć, działając na pojedynczym komputerze. Jesteś więc gotowy, by umieś­cić własne strony w Internecie i dodać do nich nieco interaktywnych opcji, takich jak formularze, mapy odsyłaczy i osadzone animacje. Tym właśnie zajmiemy się w dalszej części książki.

Warsztat

Jakbyś jeszcze nie miał dosyć, to w tej części rozdziału umieściłam krótki kurs powtórkowy. Jak zwykle, znajdziesz tu pytania i odpowiedzi, quiz oraz ćwiczenia, które pozwolą Ci utrwalić sobie najważniejsze zagadnienia omawiane w tym rozdziale.

Pytania i odpowiedzi

P. Czy jest jakieś ograniczenie co do liczby poziomów znaczników <FRAMESET>, które mogę zagnieździć w jednym oknie przeglądarki?

O. Nie, nie ma takiego ograniczenia. Z praktycznego punktu widzenia taką granicę sta­nowią cztery poziomy. Dalej obszar okna może stać się niewystarczający.

P. Co by się stało, gdybym zawarł odnośnik do dokumentu definiującego układ ramek w znaczniku <FRAME>?

O. Netscape obsługuje taki odnośnik poprawnie, traktując zagnieżdżony dokument definiu­jący układ ramek jako zagnieżdżony <FRAMESET>. W rzeczywistości ta technika jest często stosowana w celu uproszczenia zagnieżdżonych ramek.

Ma ona jednak jedno ograniczenie. Nie możesz odnośnika do dokumentu-definicji ukła­du ramek umieścić w jednym z jego własnych znaczników <FRAME>. Taka sytuacja nosi nazwę rekursji i powoduje, że układ wchodzi w nieskończoną pętlę. Netscape wbudował specjalne zabezpieczenie przed tego typu odwołaniami.

Quiz

1. Jakie są różnice pomiędzy: dokumentem układu ramek, układem ramek, ramką oraz stroną?

2. Jaki atrybut sprawia, że klikając połączenie, jego strona docelowa zostaje wyświetlona w odpowiedniej ramce układu? (Podpowiedź: chodzi tu o atrybut znacznika <A>.)

3. Jeśli strona WWW zawiera znacznik <FRAMESET>, na jej początku nie można umieścić innego znacznika HTML. Jaki to znacznik?

4. Jakie dwa atrybuty znacznika <FRAMESET> powodują podzielenie okna przeglądarki na kilka niezależnych części?

5. Jaki atrybut znacznika <FRAME> określa dokument HTML, który w pierwszej kolejności zostanie wyświetlony w układzie ramek?

Odpowiedzi

1. Dokument układu ramek to dokument HTML zawierający definicję układu ramek. Układ ramek to fragment dokumentu układu ramek zdefiniowany przez znacznik <FRAMESET>, który informuje przeglądarkę, iż jej okno ma zostać podzielone na kilka niezależnych części. Ramka to jedna z części (lub okien) wchodzących w skład układu ramek. Strona to dokument HTML wyświetlany w ramce.

2. Atrybut TARGET znacznika <A> określa ramkę, w jakiej ma zostać wyświetlona docelowa strona połączenia.

3. Gdy strona zawiera znacznik <FRAMESET>, na jej początku nie można umieścić znacznika <BODY>. Oba te znaczniki wzajemnie się wykluczają.

4. Atrybuty COLS oraz ROWS znacznika <FRAMESET> dzielą okno przeglądarki na niezależne części.

5. Dokument HTML, który początkowo zostanie wyświetlony w układzie ramek jest określany za pomocą atrybutu SRC znacznika <FRAME>.

Ćwiczenia

1. Stwórz układ ramek dzielący okno przeglądarki na trzy części o następującej postaci:

• z lewej strony układu ramek ma się znajdować ramka o szerokości jednej trzeciej szerokości okna przeglądarki i zajmująca całą jego wysokość; nadaj jej nazwę zawartosc,

• prawą część okna przeglądarki podziel na dwa wiersze, z których każdy będzie miał połowę wysokości okna przeglądarki; górnej ramce nadaj nazwę gorna, a dolnej — dolna.

• Stwórz stroną, która będzie wyświetlana w lewej ramce układu stworzonego w poprzednim ćwiczeniu. Strona ta będzie spełniać funkcję spisu treści i ma zawierać dwa połączenia. Pierwsze z nich ma wyświetlać stronę docelową w górnej ramce z prawej strony okna przeglądarki, a drugie — w dolnej ramce.

452

HTML 4 - Vademecum profesjonalisty

453

Ramki i połączenia do nich

Ups - nie wiem czy chcemy się odwoływać do tej witryny, jeśli nie to usunąć.

14

---