453

14

              Ramki i połączenia do nich

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:

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.

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.

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.

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

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:

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:

Kolejny krok to utworzenie czwartego dokumentu o nazwie zielona.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.

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>.

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

...