Samouczek: Zastosowanie pływających ramek w dokumencie HTML - Kurs HTML i CSS
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ć:
- Jak tworzyć odnośniki do innych witryn, lokalizacji, obiektów
- Jak zarządzać treścią na stronie WWW
- Jak osadzać elementy graficzne w dokumencie HTML
- Jak tworzyć tabele w dokumencie HTML
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
- 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:
Jeśli chcemy na początku mieć pustą zawartość ramki pływającej, należy ustawić pusty atrybut src lub całkowicie go pominąć. |
- 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>
- Druga ramka pływająca powinna zostać dodana pomiędzy komentarzami
<!-- AdvertisementIframe --> i <!-- /AdvertisementIframe -->
- 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>
- 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:
|
- 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”).
- 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: