Temat 13: Ramki
Ramki odpowiadają za podział obszaru strony na charakterystyczne bloki Ramki odpowiadają za podział obszaru strony na charakterystyczne bloki. Każdy z nich może wyświetlać inną stronę internetową lub inny obraz. Kiedyś stanowiły idealny sposób na dokonanie podziału na stronie (logo, menu, treść, stopka). Cechą charakterystyczną takich dokumentów jest brak znacznika body. Zastępuje go znacznik <frameset> … </frameset> odpowiadający za sposób podziału strony. Można ją podzielić na kolumny – cols oraz na wiersze – rows. Oba te atrybuty mogą przyjmować wartości na trzy różne sposoby: w pikselach (np. 120), procentach (np. 30%) oraz tak, by pozostały dostępny obszar był oznaczony jako *. Po dokonaniu podziału wprowadzamy odpowiednią ilość ramek za pomocą znacznika frame. Ma on dodatkowy atrybut src, który określa, jaki dokument HTML zostanie wyświetlony w danej ramce. Poniższy przykład przedstawia stronę podzieloną na trzy kolumny. Pierwsza ma szerokość 100 pikseli, druga 140 pikseli, a trzecia zajmuje cały pozostały obszar (*). W każdej ramce wyświetla się podstrona mająca inny kolor tła. <frameset cols=”100,140,*”> <frame src=”strona1.html”> <frame src=”strona2.html”> <frame src=”strona3.html”> <noframes> <body> Strona dla przeglądarek nieobsługujących ramek </body> </noframes> </frameset>
Tworząc stronę opartą na ramkach, dodatkowo należy umieścić znacznik<noframes> … </noframes> zawierający sekcję body. Pozwala to na wyświetlenie treści zawartej w body w przeglądarkach nieobsługujących ramek. Kolejny przykład przedstawia stronę podzieloną na dwa wiersze. Pierwszy ma szerokość 30% drugi zajmuje cały pozostały obszar (*). W każdej ramce wyświetla się podstrona mająca inny kolor tła (w celu przetestowania poniższych listingów należy dodatkowo utworzyć trzy strony różniące się kolorem tła o odpowiednich nazwach strona1.html, strona2.html, strona3.html).
<frameset rows=”30%,*”> <frame src=”strona1.html”> <frame src=”strona2.html”> <noframes> <body> Strona dla przeglądarek nieobsługujących ramek </body> </noframes> </frameset>
Znacznik frame może przyjmować kilka dodatkowych atrybutów: - noresize – pozwala na zablokowanie zmiany rozmiaru ramki - frameborder – określa, czy obramowanie ramki będzie widoczne (wartość 1 – obramowanie widoczne, wartość 0 – obramowanie niewidoczne) - scrolling – określa, czy suwaki przewijania zawartości ramki mają być widoczne (wartość yes – suwak widoczny, no – suwak niewidoczny, auto – suwak pojawi się, gdy jej zawartość nie zmieści się w całości na ekranie) - marginwidth – szerokość marginesu poziomego, mierzona w pikselach - marginheight – wysokość marginesu pionowego, mierzona w pikselach - name – pozwala nadać ramce nazwę Następny przykład prezentuje, w jaki sposób można zagnieździć ramki. Pozwala to na utworzenie strony o bardziej skomplikowanej budowie. Dodatkowo ramka trzecia ma atrybut name=”ramkaglowna”. Została ona użyta dodatkowo jako wartość atrybutu target dla znacznika a na stronie menu.html: <a href=”strona1.html” target=”ramkaglowna>Strona 1</a> W takim przypadku po kliknięciu linku Strona 1 zmieni się zawartość ramki trzeciej, w której aktualnie wyświetlana jest strona start.html. Po zmianie w tej ramce pokaże się strona1.html.
<frameset rows=”40,*”> <frame src=”logo.html”> <frameset cols=”30%,*”> <frame src=”menu.html”> <frame src=”start.html” name=”ramkaglowna”> </frameset> <noframes> <body> Strona dla przeglądarek nieobsługujących ramek </body> </noframes>
ĆWICZENIE Wykonaj stronę opartą na poniższym układzie ramek. W każdej ramce wczytaj inną stronę internetową. Pierwsza ramka: 30% - szerokość, 50% - wysokość, pozostałe ramki analogicznie. 30%, 50% *,* 30%, *