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 | 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: 20.03.2002 ]

Pływające ramki | Polecenie Object

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


Nawiasem mówiąc, okoliczność ta jest wygodna dla projektowania układu strony. Jeśli elementy strony są umieszczane w tabeli, w jednej komórce można umieścić odsyłacze, zaś w innej pływającą ramkę, w której będą się pojawiać strony przywoływane przez odsyłacze.

Łatwo też zauważyć, że odsyłacze z jednej pływającej ramki mogą przywoływać dokumenty do innej pływającej ramki. W odsyłaczach tych wystarczy wskazać nazwę docelowej ramki i odpowiedni dokument.



Polecenie Object

Wokół pływających ramek toczyła się zacięta dyskusja - kwestionowano zasadność ich wprowadzania, skoro teoretycznie można je zastąpić poleceniem Object - tym samym, które pozwala wstawiać do dokumentu rozmaite multimedia. Pokażmy, jak działa to polecenie w odniesieniu do prostych elementów strony, jak tekst i grafika.

Dokument HTML

<object data="../porady/porady.htm" type="text/html" width="400" height="300"> Jeśli twoja przeglądarka nie akceptuje polecenia Object, wczytaj <A HREF="../porady/porady.htm">ten dokument</A> </object>

Jeśli twoja przeglądarka nie akceptuje polecenia Object, wczytaj ten dokument

Dokument TXT

<object data="reader.txt" type="text/plain" width="400" height="300"> Jeśli twoja przeglądarka nie akceptuje polecenia Object, wczytaj <A HREF="reader.txt">ten dokument</A> </object>

Jeśli twoja przeglądarka nie akceptuje polecenia Object, wczytaj ten dokument

W przypadku dokumentu tekstowego powinny zostać rozwiązane dwa problemy - zawijania tekstu (każdy wiersz powinien być zakończony znakiem końca akapitu, a nie końca wiersza) oraz strony kodowej, gdyż może nastąpić konflikt między stroną kodową dokumentu macierzystego i dokumentu TXT.

Plik graficzny

<object data="../style/kubus.jpg" type="image/jpeg" width="400" height="300"> Jeśli twoja przeglądarka nie akceptuje polecenia Object, wczytaj <a href="kubus.jpg">ten obrazek</a> </object>

Jeśli twoja przeglądarka nie akceptuje polecenia Object, wczytaj ten obrazek

W przypadku grafiki wyświetlanie w różnych przeglądarkach mocno się różni. W Internet Explorerze pojawia się pasek, zaś w Operze i Netscape 6 może nastąpić deformacja obrazka.


gość specjalny helion.pl