Rozdział 12. u Ramki i połączenia do nich 361
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:
n czym są ramki, jakie dają możliwości i gdzie są obsługiwane,
n jak się posługiwać połączeniami do ramek,
n jak się posługiwać ramkami,
n jak tworzyć złożone układy ramek.
Z wyjątkiem kaskadowych arkuszy stylów, większość opcji i znaczników, omawianych w poprzednich rozdziałach, będzie równie dobrze działała we wszystkich przeglądarkach. Wygląd strony może się nieco różnić od oczekiwanego, 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 przeglądarce Netscape Navigator 2.0. Internet Explorer 3.0 także dawał możliwość obsługi ramek, które zostały nieco rozbudowane w porównaniu z programem Navigator 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 stronaWWW z ramkami
W tym jednym oknie zgromadzone zostały informacje, które poprzednio wymagałyby kilkakrotnego 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 aktualizowana.
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 ograniczeniem — 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 podrozdział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.
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 otwierać nowe oknadla każdej ze stron, którą wskazują
Rozpocznij pracę od utworzenia dokumentu oryginalnego, pokazanego na rysunku 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 rysunek 12.4. Oto odpowiedni kod:
<title>Strona Żółta</title>
<body bgcolor="#ffffcc">
<h1>Strona Żółta</h1>
<p>To pierwsza strona docelowa. Została ona wyświetlona w
ramce <b>strona_zolta</b>.</p>
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 rysunku 12.5. Oto kod źródłowy dokumentu:
<title>Strona Niebieska</title>
<body bgcolor="#99ccff">
<h1>Strona Niebieska</h1>
<p>To druga strona docelowa. Została ona wyświetlona w
ramce <b>strona_niebieska</b>.</p>
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:
<title>Strona Zielona</title>
<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>
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ą
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
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:
<base target="strona_zolta"> <!-- tu dodaj znacznik base -->
<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>
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 dokumentu 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.
Wprowadzenie obsługi ramek w przeglądarce Netscape 2.0 otworzyło nową erę dla twórcó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. Rysunek 12.7 przedstawia na schemacie, ile osobnych dokumentów jest ko...
lukaszwalda