R 12 07, HTML
[ Pobierz całość w formacie PDF ]
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
jak się posługiwać połączenia
są obsługiwane,
mi do ramek,
jak tworzyć złożone układy ramek.
jak się posługiwać ramkami,
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 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świe-
tlane 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
332
Część 4.
Arkusze stylów, tabele i ramki
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
i książki. R
ozważ 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
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.
Połąc
zenia do ramek
Z
anim poznasz sposoby
trybut znacznika
dodawania ramek do stron, najpierw musisz poznać nowy
a
<A>
n 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ę ak-
tualnie wyświetlaną w oknie przeglądarki. W przypadku środowiska ramek nie ma jed-
nak powodu, dla którego zawartość nowej strony nie mogłaby być wyświetlana w no-
wym 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ślen
ia „
_
”. Takie nazwy są bowiem zarezerwowane dla specjalnych wartości
częśc
. Te
Rozdział 12.
Ramki i połączenia do nich
333
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 naj-
pierw sprawdza, czy okno o wskazanej nazwie
nazwa_okna
istnieje. Jeśli tak, wska-
zywany przez połączenie dokument zastępuje zawartość tego okna. Jeśli nie, otwierane
jest nowe okno i nadawana jest mu nazwa
a
. Dokument wskazywany przez
ego okna.
Ćwiczenie 12.1
: Posługiwanie się oknami
Podczas korzystania z układów ramek, w celu wyświetlania stron w odpowiedniej ram-
ce układu, stosowany jest atrybut
TARGET
. Każde z połączeń przedstawionych w poniż-
szym przykładzie wy
zumieć zagadnienia związane z docelowymi ramkami połączeń, jakie można definiować
w układach ramek.
h
strona_zolta
i
strona_niebieska
, przedstawio-
nych na rysunku 12.2. Górne okno prezentuje dokument oryginalny (stronę czerwoną).
strona_zolta
Okno
jest widoczny u dołu rysunku o lewej stronie, a okno
— po prawej.
stro-
na_nieb
ieska
Rysunek 12.2.
Za pomocą połączeń
można otw
nowe okna
dla każdej ze stron, którą
wskazują
R
O
ozp
ocznij pr
rz ulubiony edytor tekstu i wprowadź takie oto wi
acę od utworzenia dokumentu oryginalnego, pokazanego na rysunku 12.3.
twó
ersze kodu:
nazwa_okn
połączenie jest wówczas ładowany do świeżo utworzon
korzystuje atrybut
TARGET
, aby wyświetlić stronę WWW w innym
oknie przeglądarki. Pojęcia, które przedstawię w tym ćwiczeniu, pomogą Ci lepiej zro-
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 nazwac
ierać
334
Część 4.
Arkusze stylów, tabele i ramki
<html>
<head>
<title>Główne okno - czerwone</ti
</head>
<body bgcolo
<h1>Okno główne - czerwone</h1>
<p><a href="zolta.html" target="strona_zolta">Otwórz </a> Stronę
Żółtą
w nowym o
<a href="
tle>
r="#ff9999">
knie przeglądarki.<br>
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
.</p>
ę Żółtą
Stroną Zieloną
</body>
</html>
Rysunek 12.3.
Okno nadrzędne
Powyższy kod tworzy stronę o jasnoczerwonym tle, zawierającą połączenia z pozosta-
ymi
ronami. Zapisz ten kod pod nazwą
glowna.html
.
Tera
z utwórz dokument o nazwie
zolt
dpowiedni kod:
a.html
, którego wygląd pokazuje rysunek 12.4.
Oto o
<html>
<head>
<title>St
</head>
rona Żół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>
</body>
ml>
</ht
ł trzema st
Rozdział 12.
Ramki i połączenia do nich
335
Rysunek 12.4.
Dokument zolta.h
wyświetlany prze
tml
z
knie
zolta
przeglądarkę w o
o nazwie strona_
Po zapisaniu pliku
zolta
.html
, utwórz kolejny dokument o nazwie
niebie
d pokazany jest na rysunku 12.5. Oto kod źródłowy dokumentu:
ska.html
. Jego
wygl
ą
<htm
<hea
l>
d>
<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
knie
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>
by zakończyć to ćwiczenie, wyświetl w przeglądarce stronę
glowna.html
(tę czerw
ą). Kliknij połączenie wskazujące na żółtą stronę,
przeglądarki. Strona zostanie wyświetlona w nowym oknie przeglądarki, gdyż pierwszy
o-
n
aby wyświetlić ją w nowym oknie
przeglądarkę w o
o nazwie
strona_niebieska
A
[ Pobierz całość w formacie PDF ]