Strona z ćwiczeniami jest stroną archiwalną,
wiele materiałów jest już nieaktualnych,
ale jeżeli ktoś ma ochotę, to zapraszam... :)

Dzieła Człowieka

Naprawdę poznajemy człowieka dopiero po jego śmierci

Zajęcia specjalizacyjne: III klasa TI
HTML

Ćwiczenie 7 - Ramki

Zadania do wykonania:


  1. spakowane pliki do zadań: pliki_7.zip (86KB)

W ćwiczeniu 7 zajmujemy się ramkami. Jest to technika budowania witryny w oparciu o specjalne okienka, do których wczytywane są strony. Sposób ten jest jednak uznany w HTML 4.0 i XHTML 1.0 za schyłkowy (pozostaje w obrębie wersji Doctype Transitional i Frameset), zaś w XHTML 1.1 został zaniechany, podobnie jak pływające ramki. Mimo to poświęcamy ramkom jedno ćwiczenie ze względu na fakt, że ciągle są jeszcze stosowane, a ponadto ażeby zapoznać się z samą techniką budowania takich stron.

Podstawową rolę w "ramkowym" dokumencie pełni specjalna strona, na której definiujemy liczbę, wielkość i pozycję ramek oraz zachowanie się innych dokumentów w momencie uaktywnienia łącza hipertekstowego. Jest ona kontenerem dla ramek. Pozostałe strony, wchodzące w skład całego, wielostronicowego układu, są stronami podrzędnymi.

Należałoby tu w tym miejscu wspomnieć o zaletach i wadach ramek.


  1. zalety:
  2. wygoda nawigacji
  3. prostota tworzenia struktury serwisu bez korzystania ze skryptów PHP
  4. oszczędność wczytywania danych przy przechodzeniu na podstrony (menu wczytuje się tylko raz)
  5. Microsoft Internet Explorer 7.0 nie potrafi stopniowo wczytywać tabelek, dlatego jeżeli struktura strony została zbudowana w oparciu o tabele, przy obszernych dokumentach najpierw czekamy dość długo przed białym ekranem, by potem zobaczyć od razu całą stronę - tego problemu nie ma w "czystych" ramkach

  1. wady:
  2. niektórzy uważają, że mają mniej profesjonalny wygląd
  3. zwykle dodanie do zakładek (ulubione) podstron serwisu z ramkami jest utrudnione lub nawet niemożliwe
  4. problem występuje też w przypadku chęci skopiowania adresu konkretnej podstrony
  5. odświeżenie serwisu w ramkach, np. w przypadku problemów w transferem, zawsze powoduje powrót na stronę główną
  6. ramki są przeznaczone do budowy raczej prostszych struktur serwisu
  7. wstawianie na stronie dużej ilości ramek - szczególnie w mniejszych rozdzielczościach ekranu - sprawi, że "okienko" z właściwą treścią strony może okazać się stanowczo za małe

źródło: www.kurshtml.boo.pl


Na samym początku zwracam uwagę, ażeby pamiętać o właściwym szablonie i deklaracji Doctype wczytywanej w kED-zie. Tym razem wybieramy: XHTML 1.0 Frameset.

Krok 1

Do budowy strony z ramkami służą następujące znaczniki:

1. Znacznik <frameset>...</frameset>. Jest to główny znacznik - w nim mieści się cała reszta. Uwaga!!! Używając znacznika <frameset>...</frameset> nie wstawiamy już znacznika <body>...</body>!

W znaczniku <frameset>...</frameset> używamy dwóch podstawowych atrybutów:


  1. <frameset cols="r,s,t,...">...</frameset>
  2. lub
  3. <frameset rows="l,m,n,...">...</frameset>

  1. r,s,t,...:
  2. wielkości kolumn, które chcemy uzyskać na stronie
  3. kolumn może być więcej, ale nie należy przesadzać z ich ilością
  4. wielkość podajemy w pikselach
  5. lub w procentach - koniecznie ze znakiem %
  6. w przynajmniej jednej z kolumn należy podać wielkość * (gwiazdka)
  7. jest to wieloznacznik, który uzupełni do szerokości przeglądarki lub 100%
  8. np.: cols="120,*,120"
  9. przy szerokości okna przeglądarki 800px - środkowa kolumna ma 560px
  10. patrz tutaj
  11. np.: cols="25%,*,30%"
  12. środkowa kolumna będzie miała szerokość na 45%
  13. patrz tutaj
  14. wieloznaczników może być więcej
  15. wtedy podzielą się wielkością proporcjonalnie
  16. np.: cols="100,*,*"
  17. przy 800px druga i trzecia kolumna będą miały po 350px
  18. np.: cols="2*,70%,*"
  19. druga kolumna ma 70% - do podziału zostaje 30%
  20. pierwsza zabiera dwie części czyli 20%
  21. trzecia natomiast pozostałą jedną część czyli 10%

  1. l,m,n,...:
  2. wielkości wierszy, które chcemy uzyskać na stronie
  3. wierszy może być więcej, ale nie należy przesadzać z ich ilością
  4. wielkość podajemy w pikselach
  5. lub w procentach - koniecznie ze znakiem %
  6. w przynajmniej jednym z wierszy należy podać wielkość * (gwiazdka)
  7. jest to wieloznacznik, który uzupełni do wysokości przeglądarki lub 100%
  8. np.: rows="120,*,120"
  9. przy wysokości okna przeglądarki 600px - środkowy wiersz ma 360px
  10. patrz tutaj
  11. np.: rows="25%,*,30%"
  12. środkowy wiersz będzie miał szerokość na 45%
  13. patrz tutaj
  14. wieloznaczników może być więcej
  15. wtedy podzielą się wielkością proporcjonalnie
  16. np.: rows="100,*,*"
  17. przy 600px drugi i trzeci wiersz będą miały po 250px
  18. np.: rows="2*,70%,*"
  19. drugi wiersz ma 70% - do podziału zostaje 30%
  20. pierwszy zabiera dwie części czyli 20%
  21. trzeci natomiast pozostałą jedną część czyli 10%

W znaczniku <frameset>...</frameset> można użyć jeszcze takich atrybutów, choć co prawda nie wchodzą w skład specyfikacji HTML 4.01: <frameset bordercolor="kolor" border="b" frameborder="typ" framespacing="wartość">...</frameset>


  1. kolor:
  2. kolor obramowania - tylko Internet Explorer i Netscape 6
  3. aby uzyskać dokładny kolor i odcień to wartość szesnastkową
  4. #rrggbb - czyli nasycenie czerwienią (r), zielenią (g) i niebieskim (b) koloru
  5. w systemie szesnastkowym jest szesnaście podstawowych cyfr:
  6. 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, a, b, c, d, e, f
  7. przykładowe kolory:

nazwa   #rrggbbkolor    
black#000000
silver#c0c0c0
gray#808080
white#ffffff
maroon#800000
red#ff0000
purple#800080
fuchsia#ff00ff
green#008000
lime#00ff00
olive#808000
yellow#ffff00
navy#000080
blue#0000ff
teal#008080
aqua#00ffff

  1. b:
  2. szerokość obramowania w pikselach dzielącego sąsiadujące ramki

  1. typ:
  2. schowanie obramowania dzielącego ramki (Internet Explorer)
  3. "0" (lub "no") - schowanie obramowania
  4. "1" (lub "yes") - pokazanie obramowania (domyślnie)

  1. wartość:
  2. w Internet Explorerze oprócz frameborder="0"
  3. powinniśmy wpisać framespacing="0"
  4. chyba, że podamy border="0"

Następny znacznik tworzący ramki to <frame />. Umieszczamy w nim następujące atrybuty: <frame src="ścieżka dostępu do strony" name="nazwa ramki" bordercolor="kolor" scrolling="stan" noresize="noresize" marginwidth="w" marginheight="h" frameborder="typ" />

Dwa pierwsze atrybuty: src i name są konieczne, natomiast bordercolor nie wchodzi w skład specyfikacji HTML 4.01.


  1. ścieżka dostępu do strony:
  2. względna ścieżka dostępu do pliku html
  3. należy wpisać drogę uwzględniając wszystkie foldery
  4. wchodząc do folderu wpisujemy jego nazwę/
  5. wychodząc z folderu wpisujemy ../
  6. na końcu podajemy nazwę pliku z rozszerzeniem html

  1. nazwa ramki:
  2. dowolna nazwa dla ramki
  3. każda ramka winna mieć inną, unikatową nazwę

  1. kolor:
  2. kolor obramowania - tylko Internet Explorer i Netscape 6
  3. aby uzyskać dokładny kolor i odcień to wartość szesnastkową
  4. #rrggbb - czyli nasycenie czerwienią (r), zielenią (g) i niebieskim (b) koloru
  5. w systemie szesnastkowym jest szesnaście podstawowych cyfr:
  6. 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, a, b, c, d, e, f
  7. przykładowe kolory:

nazwa   #rrggbbkolor    
black#000000
silver#c0c0c0
gray#808080
white#ffffff
maroon#800000
red#ff0000
purple#800080
fuchsia#ff00ff
green#008000
lime#00ff00
olive#808000
yellow#ffff00
navy#000080
blue#0000ff
teal#008080
aqua#00ffff

  1. stan:
  2. przewijanie zawartości ramki
  3. "yes" - umożliwia przewijanie zawartości ramki
  4. "no" - ramka nie będzie przewijana
  5. "auto" - ramka będzie przewijana (pojawią się suwaki), gdy jej zawartość nie zmieści się w całości na ekranie (domyślnie)

  1. noresize:
  2. zabezpieczenie przed zmianą rozmiarów ramki
  3. taka ramka nie będzie skalowana
  4. nie będzie możliwa zmiana jej rozmiarów przez przeciągnięcie myszką

  1. w:
  2. szerokość marginesu poziomego w pikselach

  1. h:
  2. szerokość marginesu pionowego w pikselach

  1. typ:
  2. schowanie obramowania dzielącego ramki
  3. "0" (lub "no") - schowanie obramowania
  4. "1" (lub "yes") - pokazanie obramowania (domyślnie)

Kolejny znacznik to <noframes>...</noframes>. Zawarta jest w nim treść, która będzie wyświetlana w przypadku, gdy przeglądarka nie obsługuje ramek. Zaleca się tu umieścić odnośniki do stron witryny.

Znacznik <noframes>...</noframes> musi być umieszczony wewnątrz <frameset>...</frameset>. Ponadto w języku XHTML wewnątrz <noframes>...</noframes> muszą się znajdować znaczniki <body>...</body>. W języku HTML nie jest to konieczne.

Ogólny szkielet strony z ramkami wygląda następująco:


  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
  2. <html>
  3. <head>
  4. <title>...</title>
  5. </head>
  6. <frameset cols="x,*">
  7. <frame scrolling="auto" name="nazwa_1" src="plik_1.html">
  8. <frame scrolling="yes" name="nazwa_2" src="plik_2.html">
  9. <noframes>
  10. <body>
  11. zawartość strony dla przeglądarek nie obsługujących ramek
  12. np.: odnośniki do stron w ramkach
  13. </body>
  14. </noframes>
  15. </frameset>
  16. </html>

Na początek proszę wykonać dwie ramki ze stronami:


  1. z podziałem na kolumny
  2. dwie kolumny 180px i reszta
  3. bez obramowania dzielącego ramki
  4. z możliwością przewijania zawartości ramki
  5. z dużą ilością tekstu w obu ramkach

Krok 2


  1. z podziałem na wiersze
  2. dwa wiersze 180px i reszta
  3. bez obramowania dzielącego ramki
  4. z możliwością przewijania zawartości ramki
  5. z dużą ilością tekstu w obu ramkach

Krok 3


Kolejna grupa zadań dotyczy łączenia ramek - tych podzielonych na kolumny i tych podzielonych na wiersze. Inaczej mówiąc chodzi o zagnieżdżanie ramek. Zasada jest taka: zaczynamy z góry na dół i z lewej na prawą stronę.

Dzięki zagnieżdżaniu ramek możliwe jest zbudowanie struktury, w której jedna ramka będzie umieszczona wewnątrz drugiej. Można np. ramkę która jest kolumną, podzielić następnymi ramkami dodatkowo na wiersze.

Zasada zagnieżdżania polega na zastąpieniu dowolnego znacznika <frame />, będącego pojedynczą ramką, nowym znacznikiem <frameset>...</frameset>, wewnątrz którego mogą znajdować się dalsze ramki.

Czyli na początek dzielimy na określoną ilość kolumn lub wierszy, a następnie wybraną kolumnę dzielimy na określoną ilość wiersz lub wybrany wiersz dzielimy na określoną ilość kolumn.

W tym przykładzie strona została podzielona najpierw na trzy wiersze, następnie drugi wiersz został podzielony na trzy kolumny. Patrz tutaj.

W tym przykładzie strona została podzielona najpierw na trzy kolumny, następnie druga kolumna została podzielona na trzy wiersze. Patrz tutaj.

Ogólny schemat może wyglądać tak:


  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
  2. <html>
  3. <head>
  4. <title>...</title>
  5. </head>
  6. <frameset rows="l,*,m">
  7. <frame scrolling="auto" name="nazwa_1" src="plik_1.html">
  8. <frameset cols="x,*,y">
  9. <frame scrolling="auto" name="nazwa_2" src="plik_2.html">
  10. <frame scrolling="auto" name="nazwa_3" src="plik_3.html">
  11. <frame scrolling="auto" name="nazwa_4" src="plik_4.html">
  12. </frameset>
  13. <frame scrolling="auto" name="nazwa_5" src="plik_5.html">
  14. <noframes>
  15. <body>
  16. zawartość strony dla przeglądarek nie obsługujących ramek
  17. np.: odnośniki do stron w ramkach
  18. </body>
  19. </noframes>
  20. </frameset>
  21. </html>

W przykładzie powyżej strona została najpierw podzielona na trzy wiersze, a potem drugi wiersz zostal podzielony na trzy kolumny.

Zadania do wykonania z zagnieżdżaniem ramek:


  1. kolumny i wiersze
  2. dwie główne kolumny: 180px i reszta
  3. w drugiej kolumnie dwa wiersze: 25% i reszta
  4. bez obramowania dzielącego ramki
  5. z możliwością przewijania zawartości ramki
  6. z dużą ilością tekstu we wszystkich ramkach

Krok 4


  1. wiersze i kolumny
  2. dwa główne wiersze: 180px i reszta
  3. w drugim wierszu dwie kolumny: 25% i reszta
  4. bez obramowania dzielącego ramki
  5. z możliwością przewijania zawartości ramki
  6. z dużą ilością tekstu w obu ramkach

Krok 5


Kolejna rzecz związana z ramkami to wczytywanie strony do ramki z odsyłaczy. Strona jest podzielona na dwa wiersze, drugi wiersz na dwie kolumny. Na przykład w ramce z pierwszej kolumny w drugim wierszu, która jest menu, są odsyłacze do innych stron. Strony mają się wczytywać do ramki w drugiej kolumnie będącej główną ramką, z zasadniczą treścią.

Wykonać to można używając znacznika z atrybutami: <a href="ścieżka dostępu do pliku" target="nazwa ramki">opis<a/>


  1. ścieżka dostępu do strony:
  2. względna ścieżka dostępu do pliku html
  3. należy wpisać drogę uwzględniając wszystkie foldery
  4. wchodząc do folderu wpisujemy jego nazwę/
  5. wychodząc z folderu wpisujemy ../
  6. na końcu podajemy nazwę pliku z rozszerzeniem html

  1. nazwa ramki:
  2. tu trzeba wpisać nazwę ramki, do której ma być wczytana strona
  3. dlatego ważne są unikatowe nazwy ramek
  4. wpisywane w znacznikach <frame name="nazwa">...</frame>

  1. specjalne polecenia target:
  2. "_self" - strona zostanie załadowana do bieżącej ramki, czyli do tej na której został wpisany powyższy odsyłacz (domyślnie - można pominąć ten atrybut, a efekt będzie ten sam)
  3. "_top" - strona zostanie wstawiona w miejsce dokumentu pierwszego w hierarchii (strony głównej)
  4. "_parent" - strona zostanie wstawiona w miejsce dokumentu nadrzędnego w hierarchii, czyli w miejsce strony startowej struktury ramek, w której znajduje się dany odsyłacz (w przypadku większej ilości zagnieżdżonych stron startowych)
  5. "_blank" - strona zostanie załadowana w nowym oknie (uruchomi nową kopię przeglądarki)

źródło: www.kurshtml.boo.pl


Zadanie do wykonania:


  1. strona z ramkami
  2. dwa główne wiersze: 180px i reszta
  3. w drugim wierszu dwie kolumny: 25% i reszta
  4. bez obramowania dzielącego ramki
  5. z możliwością przewijania zawartości ramki
  6. trzy dodatkowe podstrony
  7. linki do strony głównej i tych trzech stron w lewej kolumnie
  8. różna treść w każdej ze stron

Krok 6

Krok 7

Krok 8

Krok 9

Kolejny znacznik związany z ramkami to <iframe>...</iframe>. Wstawia ramki lokalne. Ramka taka wyświetla treść zewnętrznego dokumentu. Można ustalać dowolną wielkość ramki. W przypadku treści większej niż ramka - pojawią się paski przewijania.

Posiada takie atrybuty: <iframe src="ścieżka dostępu" name="nazwa ramki" width="x" height="y" scrolling="stan" marginwidth="w" marginheight="h" frameborder="typ" align="rodzaj">...</iframe> Atrybut align jest zdeprecjonowany, ale tu z niego skorzystamy...


  1. ścieżka dostępu:
  2. względna ścieżka dostępu do pliku
  3. należy wpisać drogę uwzględniając wszystkie foldery
  4. wchodząc do folderu wpisujemy jego nazwę/
  5. wychodząc z folderu wpisujemy ../
  6. na końcu podajemy nazwę pliku z rozszerzeniem

  1. nazwa ramki:
  2. dowolna nazwa dla ramki
  3. każda ramka winna mieć inną, unikatową nazwę

  1. x:
  2. szerokość ramki podana w pikselach
  3. lub w procentach - koniecznie ze znakiem: %

  1. y:
  2. wysokość ramki podana w pikselach
  3. lub w procentach - koniecznie ze znakiem: %

  1. stan:
  2. przewijanie zawartości ramki
  3. "yes" - umożliwia przewijanie zawartości ramki
  4. "no" - ramka nie będzie przewijana
  5. "auto" - ramka będzie przewijana (pojawią się suwaki), gdy jej zawartość nie zmieści się w całości na ekranie (domyślnie)

  1. w:
  2. szerokość marginesu poziomego w pikselach w ramce

  1. h:
  2. szerokość marginesu pionowego w pikselach w ramce

  1. typ:
  2. schowanie obramowania
  3. "0" (lub "no") - schowanie obramowania
  4. "1" (lub "yes") - pokazanie obramowania (domyślnie)

  1. rodzaj:
  2. ustawienie ramki na stronie
  3. "left" - ramka ustawiona po lewej stronie, względem otaczającego tekstu
  4. "right" - ramka ustawiona po prawej stronie względem tekstu
  5. "top" - tekst ustawiony na górze ramki
  6. "middle" - tekst ustawiony na średniej wysokości względem ramki
  7. "bottom" - tekst ustawiony na dole ramki (domyślnie)

Następne zadania związane są z ramkami lokalnymi.

Na początek należy wykonać ramkę lokalną o określonych rozmiarach: 400x300, nazwie, obramowaniu, z możliwością przewijania zawartości, z marginesami wewnętrznymi i wczytanym do niej pliku HTML.

Krok 10

Dalej należy wykonać ramkę lokalną o określonych rozmiarach: 400x300, nazwie, obramowaniu, z możliwością przewijania zawartości z marginesami wewnętrznymi i wczytanym do niej pliku - foto_1.jpg. Spakowane pliki do zadań: pliki_7.zip (86KB).

Krok 11

Następne zadanie polega również na wykonaniu ramki lokalnej o określonych rozmiarach: 400x300, nazwie, obramowaniu, z możliwością przewijania zawartości, z marginesami wewnętrznymi i z trzema plikami HTML wczytywanymi do ramki za pomocą odsyłaczy. Tekst odsyłaczy u dołu ramki.

Krok 12

Krok 13

Krok 14

Następne zadanie polega również na wykonaniu ramki lokalnej o określonych rozmiarach: 400x300, nazwie, obramowaniu, z możliwością przewijania zawartości, z marginesami wewnętrznymi i z trzema plikami: foto_2.jpg, foto_3.jpg, foto_4.jpg wczytywanymi do ramki za pomocą odsyłaczy. Tekst odsyłaczy u góry ramki. Spakowane pliki do zadań: pliki_7.zip (86KB).

Krok 15

Krok 16

Krok 17


Oceniany będzie folder ramki z zawartymi w nim plikami HTML, w których znajdą się wszystkie ramki: zwykłe, zagnieżdżone, lokalne oraz pliki wczytywane do tych ramek zgodnie z poleceniami.




Strona Główna


do góry

Przy przygotowywaniu powyższego ćwiczenia wielką pomocą służył kurs HTML-a - w wersji online: http://www.kurshtml.boo.pl, jak również w wersji offline do pobrania z tej samej strony.

Copyright © 2008   Sławek Rokicki