«

»

Lis 03

Wydrukuj to Wpis

Tworzenie ramek w html

tworzenie-ramek-w-html

Pomimo tego, że strony z ramkami są coraz mniej używane, nauka html byłaby niepełna bez uwzględnienia tematu ramek. W tym artykule postaram się pokazać jak można stworzyć strony z ramkami.

Do utworzenia strony z ramkami służy znacznik frameset, który zastępuje body. W przypadku korzystania z ramek wymaga co najmniej cztery pliki html: top.html – ładuje nagłówek strony, index.html – określa strukturę dokumentu, menu.html – ładuje menu strony i content.html – ładuje zawartość strony. Spośród nich tylko index.html różni się od innych plików.

Plik index.html
W pierwszej linii kodu piszemy następujący typ dokumentu z ramkami.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE  HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Strona z ramkami</title>
 </head>
 <frameset rows="15%,85%">
  <frame src="top.html" name="gora" scrolling="no" noresize>
  <frameset cols="160px,*">
   <frame src="menu.html" name="menu">
   <frame src="content.html" name="zawartosc">
  </frameset>
 </frameset>
</html>

W takim przypadku znacznik jest używany dwukrotnie, jeden znacznik osadzony w drugim.
Partycjonowanie poziome tworzone jest przez atrybut row, gdzie zastosowany jest zapis procentowy.
Okno przeglądarki jest podzielone na dwie kolumny przez atrybut cols, lewa (menu strony) kolumna zajmuje 100 px, a prawa (zawartość strony) – pozostałe miejsce. Aby użytkownik nie mógł zmienić rozmiaru ramki, dodajemy atrybut scrolling=”no” i noresize.
W tagu określa nazwę pliku html, który jest ładowany w określonym obszarze za pomocą atrybutu src.
W lewym oknie załaduje plik o nazwie menu.html i prawy – content.html. Dla każdej ramki lepej ustawić unikalną nazwę, aby dokument mógł być załadowany do określonego okna za pomocą atrybutu name.

Plik top.html

1
2
3
4
5
6
7
8
9
10
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Nagłówek Strony</title>
 </head>
 <body>
   <p>Nagłówek Strony</p>
 </body>
</html>

Plik menu.html

1
2
3
4
5
6
7
8
9
10
11
12
13
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Menu stronu</title>
 </head>
 <body>
   <p>Menu</p>
   <ul>
      <li><a href="content.html" target="zawartosc">Strona Główna</a></li>
   </ul>
 </body>
</html>

Plik content.html

1
2
3
4
5
6
7
8
9
10
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Zawartoćś strony</title>
 </head>
 <body>
  <p>Zawartość</p>
 </body>
</html>
Atrybuty framset
border Grubość granicy między ramkami
bordercolor Kolor linii granicznej
cols Ustawia szerokość lub część ramek w postaci kolumn
frameborder Ustawienie wyświetlania ramki lub nie.
framespacing Ustawia szerokość obramowania.
rows Określa wielkość i proporcje ramy w postaci wierszy

Załączniki do pobrania

Permalink do tego artykułu: http://tmall.com.pl/tworzenie-ramek-w-html/

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *

Możesz użyć tych znaczników i atrybutów HTMLa: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>