Ramki pływające (iframe) - HTML kody i dostosowanie.txt

(4 KB) Pobierz
Ramki pływajšce sš specjalnym typem ramek, które można umiecić w treci strony podobnie jak się umieszcza np. obrazki. Podobnie jak zwykłe ramki, ten typ ramek też ma swoich zwolenników i przeciwników. Ja osobicie 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 - okrela adres dokumentu który zostanie załadowany do ramki;
    * width - okrela szerokoć ramki w pikselach;
    * height - okrela 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 wywietlenie informacji z ramki pływajšcej (np. link do dokumentu z ramki).

Ramki pływajšce sš traktowane jako obiekty "inline", czyli sš wywietlane "w linii", w odróżnieniu od elementów blokowych. Ten przykład wyjani 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 domylnie 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 wartoci:

    * auto - wartoć domylna. 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š wywietlane. Jeżeli zawartoć ramki będzie wymagała przewinięcia, jedynym sposobem dostania się do treci poniżej jest przycinię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ż okrelić szerokoć marginesów pomiędzy krawędziš ramki a wywietlanym w niej dokumentem - służš do tego atrybuty marginwidth (margines w poziomie) i marginheight (margines w pionie). Obydwie wartoci 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 okrelenie szerokoci 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 odnonika, 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>




Zgłoś jeśli naruszono regulamin