Kurs języka HTML - poradnik webmastera: Pływające ramki










Strona główna -
HTML dla bardzo początkujących -
Etykieta webmastera -
Struktura dokumentu -
Czcionki -
Bloki -
Odsyłacze -
Wykazy -
Grafika i multimedia -
Tabele -
Style -
Ramki -
Pływające ramki -
Formularze -
Response-O-Matic -
TopNet Mailer -
Liczniki wizyt -
Księga gości -
Kanały informacyjne -
Wprowadzenie do JavaScript -
Przykłady skryptów -
Narzędzia -
Słowniczek -
Znaki specjalne -
Ankieta -
Kolory






Pływające ramki



Pływające ramki, wprowadzone po raz pierwszy przez IE3, zyskały sobie ostatnio uznanie World Wide Web Consortium i znalazły się w oficjalnej specyfikacji języka. Nazwa "pływająca" pochodzi jeszcze z początków egzystencji tego elementu - "floating frame". W tej chwili coraz częściej używana jest nazwa "inline frame" i stosownie do tego zostało nawet zmienione definiujące ją polecenie - IFRAME. Moglibyśmy się więc równie dobrze posłużyć nazwą "ramka lokalna", co także poprawnie odzwierciedla istotę tego elementu.

Uwaga: pływające ramki są interpretowane obecnie (marzec 1998) jedynie przez Internet Explorera.

Klasyczne ramki pozwalają dzielić ekran przeglądarki na odrębne okna. Pływająca ramka jest ramką umieszczoną w dowolnym miejscu strony i jest prostsza w konstrukcji, gdyż ogranicza się w zasadzie do jednego polecenia:

<IFRAME WIDTH=ileśtampunktów HEIGHT=ileśtampunktów SRC="jakiśtamdokument">Twoja przeglądarka nie akceptuje pływających ramek!</IFRAME>

Przykład:

[Oops! Twoja przeglądarka nie akceptuje pływających ramek]

Zdanie "Oops! Twoja przeglądarka nie akceptuje pływających ramek" zostanie wyświetlone w przeglądarkach nie akceptujących pływających ramek. Możemy jednak podać w tym miejscu adres dokumentu, który jest wczytywany do pływającej ramki. Kliknięcie na tym adresie pozwoli użytkownikowi takiej przeglądarki, np. Navigatora, obejrzeć zawartość na odrębnej stronie. Przykład dla posiadaczy "nieInternetExplorera":

[Twoja przeglądarka nie akceptuje pływających ramek, ale możesz zobaczyć ten dokument tutaj]

Tutaj akurat ramka ma 450x250 punktów i został do niej automatycznie wczytany dokument car1.html.

Oczywiście, gdyby dokument był nieco dłuższy, pojawiłby się suwak.

[Oops! Twoja przeglądarka nie akceptuje pływających ramek]

Gdybyśmy z kolei chcieli się pozbyć obramowania ramki, moglibyśmy podać definicję:

<IFRAME WIDTH=300 HEIGHT=200 FRAMEBORDER=0 SRC="ie3font.htm">Oops! Twoja przeglądarka nie akceptuje pływających ramek</IFRAME>
Proszę zwrócić uwagę na parametr FRAMEBORDER.

[Oops! Twoja przeglądarka nie akceptuje pływających ramek]

Jeśli podamy w definicji parametr SCROLLING=NO, ramka zostanie pozbawiona suwaka.

[Oops! Twoja przeglądarka nie akceptuje pływających ramek]

No i nie dowiemy, się, gdyż dokumentu w ramce nie da się przewinąć.

HTML 4 przewiduje użycie parametrów MARGINWIDTH=x i MARGINHEIGHT=x. Pozwalają one wprowadzić dodatkowe marginesy w pływającej ramce (proszę porównać przykład, w którym użyto marginesów 70 pikseli, z następnym obrazkiem).

[Oops! Twoja przeglądarka nie akceptuje pływających ramek]

Pływająca ramka może być oddzielona od sąsiadujących z nią elementów o podaną liczbę pikseli, w pionie lub/i w poziomie.

VSPACE=x dotyczy odstępu pionowego, natomiast HSPACE=y - poziomego (HTML 4 nie przewiduje jednak stosowania tych parametrów w odniesieniu do pływających ramek).

[Oops! Twoja przeglądarka nie akceptuje pływających ramek]

Ta ramka jest odzielona o 50 pikseli w pionie od tekstu nad i pod nią.

[Oops! Twoja przeglądarka nie akceptuje pływających ramek]

Pływającą ramkę można ustawić po prawej stronie, używając polecenia ALIGN=RIGHT.

To były zabawy, a na zakończenie pokażemy jeszcze całkiem praktyczne zastosowanie pływających ramek, wykorzystując imienne ich adresowanie.

Autorzy stron, którzy stosowali ramki w postaci klasycznej, zetknęli się oczywiście z parametrem NAME. Parametr ten pozwalał nadać nazwę ramce, a następnie kierować do niej dokumenty HTML, powołując się na nazwę.

Także i tutaj można wykorzystać ten mechanizm. Wystarczy w definicji ramki podać NAME="jakaśnazwa". Na przykład:

<IFRAME WIDTH=300 HEIGHT=200 NAME="jakaśnazwa" SRC="dokument.htm"></IFRAME>

A teraz możemy zdefiniować odsyłacze do kilku stron, które po kliknięciu będą wczytywać do ramki podane strony. Na przykład:


<IFRAME WIDTH=300 HEIGHT=200 NAME="auto" SRC="car1.htm"></IFRAME>
<A HREF="car1.htm" TARGET="auto">Pickup</A>
<A HREF="car2.htm" TARGET="auto">Minivan</A>


i tak dalej.

Ostatecznie otrzymamy taki oto rezultat:

Oto moja menażeria
[Oops! Twoja przeglądarka nie akceptuje pływających ramek]

Pickup | Minivan | Compact | Sports Car