• Artykuł

          

Samouczek: Zastosowanie pływających ramek w dokumencie HTML - Kurs HTML i CSS  Udostępnij na: Facebook

Autor: Witold Lasik

Opublikowano: 2011-10-04

Typowymi zadaniami, z jakimi muszą zmierzyć się developerzy, projektujący i zarządzający dużymi projektami webowymi, są wszelkie operacje, związane z modyfikacjami treści. Coraz częściej powstają systemy w postaci aplikacji webowych, które ułatwiają ten proces – są to tzw. systemy CMS (Content Management Systems). W przypadku, kiedy developer samodzielnie projektuje cały system, problem zarządzania treścią spoczywa na jego barkach. W tym samouczku przedstawiony zostanie znacznik HTML <iframe>, który w znaczny sposób ułatwia procesy związane zarówno z zarządzaniem treścią jak i z budowaniem układu (layout) strony WWW.

Przed wykonaniem zadań powinieneś wiedzieć:

Po wykonaniu zadań nauczysz się:

  • tworzenia prostych layout’ów, wykorzystujących ramki pływające,
  • szybkiego zarządzania treścią wielu dokumentów HTML,
  • efektywnego wykorzystania zasobów serwerowych, dzięki ograniczeniu przeładowań dużych podstron serwisu.

Implementacja

W kolejnych zadaniach dowiesz się, jak dodawać do dokumentu HTML ramki pływające oraz jak je w praktyczny sposób wykorzystywać.

Pobierz archiwum Samouczek-HTML-CSS.zip  i je rozpakuj. Otwórz w dowolnym edytorze tekstowym (np. Notatnik) plik HTML\Zastosowanie-ramek-plywających-w-dokumencie-HTML\index.html oraz wywołaj go w przeglądarce Internet Explorer w wersji 9 lub wyższej.

Tworzenie prostego layout’u, wykorzystującego ramki pływające

  1. Dodaj ramkę pływającą pomiędzy komentarzami <!-- Main Iframe --> i <!-- /Main Iframe -->
Informacja

Atrybut src dla znacznika <iframe> określa początkowy dokument lub obiekt, który zostanie załadowany do ramki pływającej po jej wyrenderowaniu. Przykładowe iframe’y, zawierające różne zawartości wejściowe:

  • ramka zawierająca obrazek, w tym przykładzie zastosowano adresowanie względne:
    <iframe name="if1" src="images/img1.jpg" widht="800" height="600" frameborder="no"></iframe>
  • ·      ramka zawierająca dokument hipertekstowy, znajdujący się pod adresem https://www.microsoft.com, w tym przykładzie zastosowanoadresowanie bezwzględne:
    <iframename="if2" src="http://www.microsoft.com" widht="800" height="600" frameborder="no"></iframe>

Jeśli chcemy na początku mieć pustą zawartość ramki pływającej, należy ustawić pusty atrybut src lub całkowicie go pominąć.
  1. Ramka ta będzie wyświetlała zawartość poszczególnych podstron serwisu. Jej kod jest następujący:
<iframe name="main" src="" widht="400" height="700" frameborder="no" scrolling="no"></iframe>
  1. Druga ramka pływająca powinna zostać dodana pomiędzy komentarzami <!-- AdvertisementIframe --> i <!-- /AdvertisementIframe -->
  2. Będzie ona wyświetlała zmieniające się reklamy w formacie wideskyscraper (160x600). Za jej generowanie odpowiedzialny będzie kod:
<iframe name="adv" src="" width="160" height="610" frameborder="no" scrolling="no" marginheight="10" marginwidth="0"></iframe>
  1. Następnie dodaj linki do fraz, które znajdują się w menu (pomiędzy komentarzami <!-- Menu --> i <!-- /Menu -->):
Informacja

Aby zarządzać zawartością ramki pływającej, należy przy tworzeniu hiperłącz dodawać atrybut target=”nazwa_docelowego_iframe”. Przykładowe linki:

  • odnośnik otwierający podstronę strona_glowna.html w ramce pływającej o nazwie if1.
    <a href="strona_glowna.html" target="if1">Strona Główna</a>
  • odnośnik otwierający stronę internetową https://www.microsoft.com w ramce pływającej o nazwie if2.
    <a href="http://www.microsoft.com" target="if2">Microsoft</a>
  • fraza Strona Główna ma być hiperłączem do strony strona_glowna.html, miejscem docelowym dla odnośnika ma być iframe o nazwie main (target=”main”),
  • fraza Podstrona 1 ma być hiperłączem do strony podstrona_1.html, miejscem docelowym dla odnośnika ma być iframe o nazwie main (target=”main”),
  • fraza Podstrona 2 ma być hiperłączem do strony podstrona_2.html, miejscem docelowym dla odnośnika ma być iframe o nazwie main (target=”main”),
  • fraza Podstrona 3 ma być hiperłączem do strony podstrona_3.html, miejscem docelowym dla odnośnika ma być iframe o nazwie main (target=”main”),
  • fraza Podstrona 4 ma być hiperłączem do strony podstrona_4.html, miejscem docelowym dla odnośnika ma być iframe o nazwie main (target=”main”),
  • fraza Podstrona 5 ma być hiperłączem do strony podstrona_5.html, miejscem docelowym dla odnośnika ma być iframe o nazwie main (target=”main”),
  • fraza Reklama 1 ma być hiperłączem do grafiki images/adv_1.jpg, miejscem docelowym dla odnośnika ma być iframe o nazwie adv (target=”adv”),
  • fraza Reklama 2 ma być hiperłączem do grafiki images/adv_2.jpg, miejscem docelowym dla odnośnika ma być iframe o nazwie adv (target=”adv”),
  • fraza Reklama 3 ma być hiperłączem do grafiki images/adv_3.jpg, miejscem docelowym dla odnośnika ma być iframe o nazwie adv (target=”adv”),
  • fraza Reklama 4 ma być hiperłączem do grafiki images/adv_4.gif, miejscem docelowym dla odnośnika ma być iframe o nazwie adv (target=”adv”).
  1. Poniżej zamieszczony jest rysunek poglądowy (Rys. 1.).

Rys. 1. Poglądowy zrzut ekranu, prezentujący poprawne rozwiązanie zadania.

Podsumowanie

W tym artykule nauczyliśmy się tworzyć ramki pływające, osadzać je w dokumencie HTML, a następnie tworzyć hiperłącza, odnoszące się do nich. Zastosowanie ramek pływających ułatwia pracę przy dużych serwisach, dzięki możliwości oparcia struktury strony o stały szablon. Wszelka zawartość jest wywoływana przez linki, znajdujące się w głównym szablonie, a miejscem prezentacji są ramki pływające. W tym artykule zostało również zademonstrowane wyświetlanie dokumentów HTML i grafik w obrębie ramek pływających.

Dodatkowo zobacz: