Dokumenty złożone - ramki

Poniżej przedstawiony jest kod źródłowy przykładowego dokumentu - należy zwrócić uwagę na sposób tworzenia ramek i dzielenie ich na kolumny i wiersze. Analizując poniższy przykład, skoncentruj się - kod źródłowy jest dość skomplikowany.

<html>
<head>
<title>Gimnazjum nr3</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2">
</head>

Poniższy fragment tekstu przedstawia przykład kodu źródłowego HTML tworzącego dość skomplikowany układ ramek, pozwalających na jednoczesne oglądanie kilku dokumentów.

<frameset rows="25%,*,20" frameborder="YES" border="1" framespacing="0">

(Pierwszy podział) Podział okna przeglądarki na 3 wiersze w następujący sposób:
wysokość pierwszego (od góry) zajmie 25% okna przeglądarki,
wysokość drugiego wypełni obszar, jaki pozostanie po dokonaniu podziału,
wysokość trzeciego będzie równa 20 pikseli.

<frameset cols="100,*,100" frameborder="YES" border="1" framespacing="0">

(Drugi podział) Podział pierwszego wiersza (25%) na trzy kolumny:
pierwsza o szerokości 100 pikseli,
druga wypełni obszar, jaki pozostanie po podziale,
trzecia, podobnie jak pierwsza, zajmie obszar o szerokości 100 pikseli.

<frame scrolling="NO" name="1lew" src="1lew.htm" frameborder="NO" border="0">

Zdefiniowanie komórki należącej do pierwszej kolumny (100 pikseli) pierwszego wiersza ramki(25%); do tej komórki załadowany zostanie dokument 1lew.htm.

<frameset rows="30,*,30" frameborder="YES" border="1" framespacing="0">

(Trzeci podział) Podział drugiej kolumny (*) pierwszego wiersza (25%) na trzy wiersze:
wysokość pierwszego (od góry) zajmie 30 pikseli,
wysokość drugiego wypełni obszar, jaki pozostanie po dokonaniu podziału,
wysokość trzeciego będzie równa 30 pikseli.

<frame noresize scrolling="NO" name="1góra" src="dol.htm" frameborder="NO" border="0">
<frame noresize scrolling="auto" name="le" src="menu.htm" frameborder="YES" border="4">
<frame noresize scrolling="NO" name="2góra" src="dol.htm" frameborder="NO" border="0">

Zdefiniowanie komórek powstałych w wyniku trzeciego podziału.
UWAGA: Do ramki "le" załadowany zostanie dokument menu.htm; dokument ten umożliwia jednoczesne przeglądanie w osobnych ramkach kodów źródłowych i dokumentów utworzonych zgodnie z tymi kodami.
Aby zrozumieć działanie omawianego tu dokumentu, należy przeanalizować również treść zbioru menu.htm. Na dole niniejszej strony znajdziesz odnośnik do omówienia zbioru menu.htm.

</frameset>

(Koniec trzeciego podziału)

<frame scrolling="NO" name="1pra" src="1praw.htm" frameborder="NO" border="0">

Zdefiniowanie komórki należącej do trzeciej kolumny pierwszego wiersza ramki (25%).

</frameset>

(Koniec drugiego podziału)

<frameset cols="7,50%,7,50%,7" frameborder="YES" border="1" framespacing="0">

(Czwarty podział) Podział na pięć kolumn drugiego wiersza (*) powstałego w wyniku pierwszego podziału:
szerokość pierwszej kolumny 7 pikseli,
szerokość drugiej kolumny 50% pozostałego obszaru,
szerokość trzeciej kolumny 7 pikseli,
szerokość czwartej kolumny 50% pozostałego obszaru,
szerokość piątej kolumny 7 pikseli.

<frame scrolling="NO" name="2lewy" src="dol.htm" frameborder="NO" border="0">
<frame scrolling="auto" name="pra" src="start1.htm" frameborder="YES" border="4">
<frame scrolling="NO" name="śro" src="dol.htm" frameborder="NO" border="0">
<frame scrolling="auto" name="lew" src="start2.htm" frameborder="YES" border="4">
<frame scrolling="NO" name="2pra" src="dol.htm" frameborder="NO" border="0">

Zdefiniowanie komórek powstałych w wyniku czwartego podziału.

</frameset>

(Koniec czwartego podziału)

<frame noresize scrolling="NO" name="dół" src="dol.htm" frameborder="NO" border="0">

Zdefiniowanie komórki (trzeci wiersz 15 pikseli) powstałej w wyniku pierwszego podziału.

<noframes>
<body>
<p>
Niestety twoja przeglądarka nie akceptuje ramek.<br>
Uruchom <a href="http://www.microsoft.com/ie/ie.htm">MS Explorator 3.0
</a>
... lub <a href="http://home.netscape.com/comprod/mirror/client_download.htm">
Netscape Navigator 3.0 lub nowszy
</a> - powinno pomóc... 8-)
</p>
</body>
</noframes>
</frameset>

(Koniec pierwszego podziału)

</html>

(KONIEC DOKUMENTU)

Opis znaczników i ich atrybutów stosowanych do tworzenia ramek:

<frameset> - rozpoczyna tworzenie ramek.
</frameset> - kończy definiowanie ramek.
<frame> - definiuje dany obszar.
</frame> - kończy definiowanie obszaru.

Wyżej przedstawione znaczniki otwierające mogą używać następujących atrybutów:

rows"specyfikacja wierszy" (tylko FRAMESET)
specyfikacja określa liczbę i wysokość wierszy;
może przyjmować postaci:
n - wysokość w pikselach -
n% - wysokość wyrażona w procentach.
* - wartość wyrażana jako część całego obszaru, np. "2*,*", oznacza, że pierwszy wiersz będzie dwa razy wyższy niż drugi.

cols"specyfikacja kolumn" (tylko FRAMESET)
specyfikacja określa liczbę i szerokość kolumn;
może przyjmować postaci:
n - szerokość w pikselach,
n% - szerokość wyrażona w procentach,
* - szerokość wyrażana jako część całego obszaru, np. "2*,*", oznacza, że pierwszy wiersz będzie dwa razy wyższy niż drugi.

frameborder="wartość" (FRAMESET i FRAME) określa, czy ma być wyświetlana linia obramowania;
może przyjmować wartości:
yes - linia będzie wyświetlana,
no - linia nie będzie wyświetlana.

border="wartość" (FRAMESET i FRAME) określa grubość obramowania wyrażonego w pikselach.

scr="URL" (tylko FRAME) zawartością ramki będzie dokument określony przez URL, jeśli parametr nie wystąpi, zawartość pozostanie pusta.

name="nazwa pola" (tylko FRAME) określa nazwę pola . Nazwa może być wykorzystana do realizacji odwołań z innych części lub innych dokumentów.

marginwidth="odstęp poziomy" (FRAMESET i FRAME) definiuje lewy i prawy margines w ramce.

marginheight="odstęp pionowy" (FRAMESET i FRAME) definiuje górny i dolny margines w ramce.

scrolling="wartość" (FRAMESET i FRAME) definiuje sposób przewijania zawartości ramki;
może przyjmować wartości:
yes - ramka będzie miała suwak przewijania,
no - ramka nie będzie miała suwaka przewijania,
auto - przeglądarka wyświetli suwak przewijania jeśli zawartość ramki nie mieści się w jej obszarze.

noresize (FRAMESET i FRAME) szerokość okna nie będzie mogła być zmieniana w trybie interakcyjnym.

framespacing="n" (FRAMESET i FRAME) tworzy dodatkowy odstęp między ramkami (n - liczba pikseli).

Uwaga: Dla przeglądarek, które nie reagują na znacznik FRAMESET, można zdefiniować tekst zastępczy. W tym wypadku stosuje się taką konstrukcję:
<noframes>
<body>
tekst zastępczy
</body>
</noframes>
Przeglądarki akceptujące znacznik FRAMESET ignorują tekst zastępczy.

Poniżej możesz poćwiczyć.

W oknie edytora możesz wprowadzić zmiany w tekście kodu HTML, a po naciśnięciu przycisku "Pokaż wygląd strony" zobaczysz efekt działania zmodyfikowanego kodu, który sam dokonałeś pozmieniaj w ramce dane i obejrzyj je.