Kurs języka HTML i CSS

Poradnik webmastera

  • Zwiększ rozmiar czcionki
  • Domyślny  rozmiar czcionki
  • Zmniejsz rozmiar czcionki

Pływające ramki

Email Drukuj PDF

Tematy: Wbudowane ramki | Polecenie Object

logo HTML 5O rozdziale (aktualizacja 15.01.2013): Opisujemy tu technikę umieszczania na stronach WWW tzw. pływających lub osadzonych ramek, czyli specjalnych okienek, do których wczytywane są inne strony znajdujące się na tym samym lub innym serwerze. Technika ta została 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. W HTML 5 polecenie iframe wprowadzające pływające ramki zostało zreformułowane i jest ponownie trwałym elementem specyfikacji, ze znacznie zmodyfikowanym (ale tym razem istotnie uszczuplonym) zestawem atrybutów.

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

Na przykład:

<iframe src="/sciezka/car1.htm" width="450" height="250">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.

W specyfikacji HTML 4 istnieje atrybut frameborder, który nie jest już wspierany w HTML 5. Gdybyśmy chcieli się pozbyć obramowania ramki, moglibyśmy podać definicję:

<iframe width="300" height="200" frameborder="0" src="/sciezka/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 atrybut scrolling=no, ramka zostanie pozbawiona suwaka. Atrybut ten został także wycofany z HTML 5.

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. Atrybuty te zostały wycofane z polecenia w HTML 5 - w ich miejsce można zastosować style CSS definiujące marginesy.

Pływającą ramkę można też ustawić po prawej stronie dokumentu czy bloku, używając atrybutu align="right". Atrybut ten nie jest już jednak wspierany w HTML 5 i zaleca się pozycjonowanie za pomocą stylów.


Wprowadzony w HTML 5 atrybut seamless "wtapia" ramkę w stronę.

 

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="/sciezka/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" seamless src="/sciezka/car1.htm"></iframe>
<a href="/sciezka/car1.htm" target="auto">Pickup</a>
<a href="/sciezka/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="http://pl.wikipedia.org/w/index.php?title=Joomla!&printable=yes" type="text/html" width="600" height="400">
Jeśli twoja przeglądarka nie akceptuje polecenia Object, wczytaj <a href="http://pl.wikipedia.org/w/index.php?title=Joomla!&printable=yes">ten dokument</a>
</object>

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

Plik graficzny

<object data="/sciezka/kubus.jpg" type="image/jpeg" width="400" height="300">
Jeśli twoja przeglądarka nie akceptuje polecenia Object, wczytaj <a href="/sciezka/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

 

HTML5. Rusz głową.

HTML5. Rusz głową!

HTML5. Ćwiczenia praktyczne.

HTML5. Ćwiczenia praktyczne.

HTML5. Nieoficjalny podręcznik.

HTML5. Nieoficjalny podręcznik

Nowości Helionu

Statystyki

Użytkowników : 766
Artykułów : 513
Zakładki : 28
Odsłon : 15166573