Ramki pływające są specjalnym typem ramek, które można umieścić w treści strony podobnie jak się umieszcza np. obrazki. Podobnie jak zwykłe ramki, ten typ ramek też ma swoich zwolenników i przeciwników. Ja osobiście odradzam ich stosowanie - więcej na ten temat znajdziesz we wstępie do lekcji Ramki w HTML.
Podobnie jak zwykłe ramki, ramki pływające nie są dozwolone gdy chcesz używać DOCTYPE (X)HTML Strict - musisz użyć wersji Transitional lub Frameset. Z tego też powodu wszystkie przykłady będę prezentował na osobnych podstronach (ta strona używa DOCTYPE XHTML 1.0 Strict).
Aby wstawić ramkę pływającą na stronę, należy użyć znacznika <iframe>. Najprostszy sposób wstawienia ramki pływającej na stronę wygląda następująco:
<iframe src="ramka_iframe.html" width="400" height="300"> Twoja przeglądarka nie obsługuje ramek pływających! </iframe>
W przykładzie powyżej podane są następujące atrybuty dla znacznika <iframe>:
src- określa adres dokumentu który zostanie załadowany do ramki;width- określa szerokość ramki w pikselach;height- określa wysokość ramki w pikselach;
Dodatkowo wewnątrz znacznika umieszczony jest tekst który pojawi się na stronie w przypadku gdy przeglądarka nie obsługuje ramek pływających. Użyłem tutaj tekstu standardowego który pojawia się na wielu stronach internetowych, ale sugeruję jednak wstawić tam coś innego, co pozwoli np. osobie posiadającej starszą wersję przeglądarki na wyświetlenie informacji z ramki pływającej (np. link do dokumentu z ramki).
Ramki pływające są traktowane jako obiekty "inline", czyli są wyświetlane "w linii", w odróżnieniu od elementów blokowych. Ten przykład wyjaśni o co mi dokładnie chodzi:
tekst tekst <iframe src="ramka_iframe.html" width="400" height="300"> Twoja przeglądarka nie obsługuje ramek pływających! </iframe> tekst tekst
Ramki pływające domyślnie posiadają obramowanie. Aby je zlikwidować, ustaw atrybut frameborder na 0:
<iframe src="ramka_iframe.html" width="400" height="300" frameborder="0"> Twoja przeglądarka nie obsługuje ramek pływających! </iframe>
Podobnie jak w przypadku zwykłych ramek, można kontrolować czy paski przewijania mają się pojawić lub nie. Służy do tego atrybut scrolling. Można do niego przypisać następujące wartości:
auto- wartość domyślna. Paski przewijania pojawią się tylko wtedy gdy to będzie konieczne;yes- paski przewijania zawsze będą widoczne (jeżeli zawartość ramki nie będzie wymagała przewijania, pasek przewijania będzie nieaktywny);no- paski przewijania nie będą wyświetlane. Jeżeli zawartość ramki będzie wymagała przewinięcia, jedynym sposobem dostania się do treści poniżej jest przyciśnięcie lewego przycisku myszy w ramce i przeciągnięcie w dół, lub użycie kółeczka na myszce (ale te sposoby nie zawsze dzialają - w Firefox'ie nie działa żaden z nich, w IE działa tylko przeciąganie. W Operze i Netscape Browser'ze działają obydwa).
<iframe src="ramka_iframe.html" width="400" height="300" scrolling="no"> Twoja przeglądarka nie obsługuje ramek pływających! </iframe>
Można też określić szerokość marginesów pomiędzy krawędzią ramki a wyświetlanym w niej dokumentem - służą do tego atrybuty marginwidth (margines w poziomie) i marginheight (margines w pionie). Obydwie wartości podaje się w pikselach:
<iframe src="ramka_iframe.html" width="400" height="300" marginwidth="50" marginheight="30"> Twoja przeglądarka nie obsługuje ramek pływających! </iframe>
Możliwe jest także określenie szerokości odstępu od tekstu otaczającego ramkę pływającą. Służą do tego atrybuty hspace (odstęp w poziomie) i vspace (odstęp w pionie). Te atrybuty działają jednak tylko w IE i Operze, a nie działają w Firefox'ie i Netscape Browserze.
tekst tekst tekst tekst<br> tekst<iframe src="ramka_iframe.html" width="400" height="300" hspace="30" vspace="50"> Twoja przeglądarka nie obsługuje ramek pływających! </iframe>tekst<br> tekst tekst tekst tekst
Ramce pływającej można też przypisać nazwę, za pomocą której można się do niej odwołać jako miejsca docelowego dla odnośnika, lub z poziomu JavaScript. Służy do tego atrybut name:
<a href="ramka1.html" target="ramka">Kliknij tutaj</a><br> <iframe src="ramka_iframe.html" width="400" height="300" name="ramka"> Twoja przeglądarka nie obsługuje ramek pływających! </iframe>
Brak komentarzy:
Prześlij komentarz