Strona główna
Spis poleceń HTML | Wstęp | Etykieta webmastera | HTML dla bardzo początkujących | Struktura dokumentu | Czcionki | Elementy blokowe | Odsyłacze | Wykazy | Grafika i multimedia | Tabele | Style | Ramki | Pływające ramki | Formularze | Znaki specjalne | Kolory | Ankieta
Księga gości | Wprowadzenie do JavaScript | Przydatne skrypty | Response-O-Matic | TopNet Mailer | Liczniki wizyt | Kilka słów o narzędziach | Leksykon webmastera | Wprowadzenie do FrontPage Express | Jak publikować w języku Esperanto? | Tworzenie stron z ActiveX | Tworzenie stron z HTML Help Java Applet | Narzędzia ICQ | Zasoby webmasterskie

Pływające ramki


[ aktualizacja: 17.12.2000 ]

Pływające ramki, wprowadzone po raz pierwszy przez IE3, zyskały sobie uznanie World Wide Web Consortium i znalazły się w oficjalnej specyfikacji języka HTML 4. 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 przez Internet Explorera, Netscape 6 i Operę 5.

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:

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 4, obejrzeć zawartość na odrębnej stronie. Przykład dla posiadaczy starszego Navigatora:

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.

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.

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

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

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

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

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

Pickup | Minivan | Compact | Sports Car