Tematy: Wbudowane ramki | Polecenie Object

Pływające ramki

O rozdziale: Opisujemy tu technikę umieszczania na stronach WWW tzw. pływających ramek, czyli specjalnych okienek, do których wczytywane są inne strony. Technika ta jest jednak uznana w HTML 4 i XHTML 1.0 za schyłkową (pozostaje w obrębie wersji Doctype Transitional i Frameset), zaś w XHTML 1.1 została zaniechana, podobnie jak klasyczne ramki. Opis umieszczamy tutaj ze względu na fakt, że była dość często stosowana przez webmasterów, odradzając jednak jej stosowanie i sugerując ewentualne zastępowanie przez opisane niżej polecenie Object.

Wbudowane ramki

Nazwa "pływająca" pochodzi jeszcze z początków egzystencji tego elementu - "floating frame". Potem używano nazwy "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" lub "wbudowana", co także poprawnie odzwierciedla istotę tego elementu.

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 src="adres_dokumentu" width="szerokość_w_pikselach" height="wysokość_w_pikselach">Twoja przeglądarka nie akceptuje pływających ramek!</iframe>

Na przykład:

<iframe src="car1.htm" width="450" height="250" frameborder="1">Twoja przeglądarka nie akceptuje pływających ramek!</iframe>

Przykład działania:

Zdanie "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 obejrzeć zawartość na odrębnej stronie.

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 atrybut frameborder i jego wartość.

Jeśli podamy w definicji parametr scrolling=no, ramka zostanie pozbawiona suwaka.

Zawartości strony nie można przewinąć, chyba że ktoś użyje kółka myszy lub zaznaczenia bloku i przeciągnięcia.

HTML 4 przewiduje użycie atrybutów marginwidth="x" i marginheight="y". 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ącą ramkę można też ustawić po prawej stronie dokumentu czy bloku, używając atrybutu 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 atrybutem name. Atrybut 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>
...

Ostatecznie otrzymamy taki oto rezultat:


Modele samochodów

Pickup | Minivan | Compact | Sports Car


Informacje o IFRAME

Polecenie Object

Wokół pływających ramek toczyła się od początku 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 dokument HTML 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

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.

Informacje o OBJECT