Pływające ramki

Pływające ramki
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.
Czcionki
Algerian
Book Antiqua
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.
Czcionki
Algerian
Book Antiqua
Jeśli podamy w definicji parametr SCROLLING=NO, ramka zostanie pozbawiona suwaka.
Czy wiesz, kim są
naprawdę Kat i
Minim?
Jeśli jesteś tego ciekaw,
przewiń dokument w tej
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.
Czasopisma w
Sieci
Enter
Chip
PCWorld
Komputer
PCkurier
Internet
Czasopisma w Sieci
Tutaj pojawią się witryny czasopism w Sieci, gdy
klikniesz na odsyłaczu.
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>
Strona główna
Spis poleceń HTML | Wstęp | Etykieta webmastera | HTML
dla bardzo początkujących | Struktura dokumentu |
C zcionki | 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 IC Q | Zasoby
webmasterskie
Etykieta
webmastera
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>
Elektroniczne ksi±żki
Lasom lżej
Na kilka tygodni przed ¶więtami Mi
MS Reader jest programem do czytan
Spyta kto¶, czy czytanie na ekrani
Czy jest to już obiecana kraina el
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>
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.
25-09-2005