Przejdź do treści

Ramki

Gotowiec

Z doświadczenia wiem, że stworzenie strony z ramkami często sprawia problemy początkującym webmasterom. Albo ramki wyglądają nie tak, jak byśmy chcieli, albo strona wybrana w spisie treści, zostaje wczytana do niewłaściwej ramki itd. Zapewne wszystkich ucieszy fakt, że po przeczytaniu tego krótkiego punktu, każdy będzie mógł stworzyć stronę zawierającą strukturę ramek, nawet bez potrzeby studiowania dalszej treści, znajdującej się na tej stronie. A więc zaczynamy...

Przykład 1:

Aby stworzyć taką stronę, należy wykonać następujące czynności:

  1. W swoim edytorze HTML stwórz nową stronę. Wykasuj wszystkie wpisy, jeśli edytor automatycznie przy tworzeniu nowego pliku, wpisał w nim jakieś informacje domyślne. Następnie wklej poniższy kod: 
    <!DOCTYPE html 
	PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" />
	<meta name="Description" content="Opis zawartości strony" />
	<meta name="Keywords" content="Wyrazy kluczowe" />
	<meta name="Author" content="Autor strony" />
	<title>Tytuł strony</title>
</head>
<frameset cols="180,*" border="0" frameborder="0" framespacing="0">
  <frame name="spis" noresize="noresize" frameborder="0" src="spis.html" />
  <frame name="strona" noresize="noresize" frameborder="0" src="home.html" />
  <noframes><body><a href="spis.html">spis treści</a></body></noframes>
</frameset>
</html>

    W miejsce wyróznionych wyrażeń należy wpisać:

    Opis zawartości strony
    Niezbyt długi opis zawartości strony
    Wyrazy kluczowe
    Wyrazy kluczowe rozdzielone przecinkami
    Autor strony
    Twoje imię i nazwisko (jeśli chcesz zaznaczyć, kto jest autorem strony - jeśli nie chcesz, usuń całą tą linijkę)
    Tytuł strony
    Tutaj wpisz tytuł Twojej strony
    180
    Szerokość lewej ramki - okienka ("Spis treści") podana w pikselach; dozwolone jest również podanie wartości procentowej (np.: 25%), ale wtedy wygląd strony (rozmiar absolutny lewej ramki) będzie zależał od wielkości okna przeglądarki i rozdzielczości ekranu.

    Powyższą stronę należy zapisać na dysku pod nazwą index.html

  2. W analogiczny sposób stwórz nową stronę i wklej na niej następujący kod: 
    <!DOCTYPE html 
	PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" />
  <meta name="Author" content="Autor strony" />
  <title>Spis treści</title>
<style type="text/css">
<![CDATA[
a:hover { color: red }
]]>
</style>
</head>
<body>
<h2>Spis treści:</h2>
<a target="strona" href="home.html">Strona główna</a><br />
<a target="strona" href="rozdzial1.html">Rozdział 1</a><br />
<a target="strona" href="rozdzial2.html">Rozdział 2</a><br />
<a target="strona" href="linki.html">Linki</a><br />
<a href="mailto:jan_kowalski@example.com">Kontakt</a>
</body>
</html>

    W miejsce wyrażeń napisanych czcionką koloru czerwonego należy wpisać:

    Autor strony
    Twoje imię i nazwisko (jeśli chcesz zaznaczyć, kto jest autorem strony - jeśli nie chcesz, usuń całą tą linijkę)
    red
    Definicja koloru, jaki otrzymają odsyłacze w spisie treści, po wskazaniu ich myszką. Jeśli chcesz zrezygnować z tego efektu, usuń z kodu fragment: 
    <style type="text/css">
<![CDATA[
a:hover { color: red }
]]>
</style>
    *.html
    Lokalizacja na dysku, gdzie znajdują się pojedyncze podstrony, do których ma nastąpić przeniesienie, po kliknięciu określonego odsyłacza w spisie treści
    Strona główna, Rozdział 1, Rozdział 2, Linki
    dowolne tytuły stron, do których ma nastąpić przeniesienie, po kliknięciu określonego odsyłacza w spisie treści
    jan_kowalski@example.com
    Twój adres e-mail

    W analogiczny sposób można wpisać dalsze odsyłacze do innych podstron (rozdziałów) w Twoim serwisie internetowym lub inne informacje, które mają się znaleźć w spisie treści. Należy jedynie pamiętać, aby każdy nowy odsyłacz zawierał atrybut TARGET="strona" (patrz powyżej). Dla znacznika <body>...</body> można także określić atrybuty: bgcolor="..." (kolor tła), background="..." (tło obrazkowe), text="..." (kolor tekstu) i inne.

    Powyższą stronę należy zapisać na dysku pod nazwą spis.html

  3. W edytorze stwórz trzecią nową stronę i wklej na niej kod: 
    <!DOCTYPE html 
	PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" />
	<meta name="Author" content="utor strony" />
	<title>Strona główna</title>
</head>
<body>
<h2 align="center">Strona główna</h2>
<p>To jest strona główna, która zostanie załadowana na starcie.</p>
<p>Można tutaj podać informacje o tym, co znajduje się w serwisie, krótkie streszczenie
ważniejszych rozdziałów, listę wprowadzonych ostatnio nowości, a także odsyłacze do
szczególnie interesujących podstron itd. (np. kliknij <a href="test.html">tutaj</a>).
strona główna powinna zachęcić internautów do dokładniejszego zaznajomienia się z innymi
rozdziałami serwisu oraz przedstawić ogólny zarys informacji w nim zawartych.</p>
</body>
</html>

    W miejsce wyróżnionego tekstu: "To jest strona główna..." można wpisać dowolne informacje, które mają się znaleźć na stronie głównej, załadowanej przy starcie. Również tutaj - wewnątrz znacznika <body>...</body> - można oczywiście umieszczać dodatkowe znaczniki formatujące tekst, wyświetlające grafikę i inne. W przypadku odsyłaczy do podstron znajdujących się na tej stronie (jak i na wszystkich innych, które będą później wczytywane do prawej ramki, poprzez kliknięcie odpowiedniego odsyłacza ze spisu treści w lewej ramce), atrybut TARGET nie jest potrzebny (patrz powyżej). Dla znacznika <body>...</body> można dodatkowo określić atrybuty: bgcolor="..." (kolor tła), background="..." (tło obrazkowe), text="..." (kolor tekstu) itd.

    Powyższą stronę należy zapisać na dysku pod nazwą home.html

UWAGA! Strony: index.html, spis.html oraz home.html muszą znajdować się w tym samym katalogu.

Na koniec dobra rada: na każdej stronie w Twoim serwisie (również: spis.html oraz home.html, ale nie index.html), opartym na strukturze ramek, dobrze jest umieścić skrypt ostrzegający użytkownika przed ramką.

Przykład 2:

Aby stworzyć taką stronę, należy wykonać następujące czynności:

  1. W edytorze HTML stwórz następującą stronę startową (index.html): 
    <!DOCTYPE html 
	PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" />
	<meta name="Description" content="opis zawartości strony" />
	<meta name="Keywords" content="wyrazy kluczowe" />
	<meta name="Author" content="autor strony" />
	<title>tytuł strony</title>
</head>
<frameset rows="80,*" border="0" frameborder="0" framespacing="0">
	<frame name="banner" noresize="noresize" scrolling="no" frameborder="0" src="banner.html" />
	<frameset cols="180,*" border="0" frameborder="0" framespacing="0">
		<frame name="spis" noresize="noresize" frameborder="0" src="spis.html" />
		<frame name="strona" noresize="noresize" frameborder="0" src="home.html" />
	</frameset>
	<noframes><body><a href="spis.html">Spis treści</a></body></noframes>
</frameset>
</html>

    W miejsce wyróżnionego tekstu: "80" należy wpisać wysokość górnej ramki (z bannerem) podaną w pikselach (wartość procentowa nie jest w tym przypadku zalecana), która zależy od wymiarów bannera.
    Natomiast "180" oznacza szerokość lewej ramki ("Spis treści") podaną w pikselach.

  2. Utwórz w edytorze nową stronę banner.html i wklej na niej następujący kod: 
    <!DOCTYPE html 
	PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" />
	<meta name="Author" content="Autor strony" />
	<title>Banner</title>
</head>
<body>
<center><img src="logo.gif" alt="Nazwa serwisu" /></center>
</body>
</html>

    W miejsce wyróznionego tekstu: "logo.gif" podaj lokalizację na dysku, gdzie znajduje się obrazek z bannerem Twojej strony. Animowany banner można stworzyć przy użyciu takich programów jak np.: Animation Shop czy Ulead GIFAnimator itd. Może on mieć przykładowo rozmiary 400x50.

  3. Utwórz w edytorze stronę spis.html, taką samą jak w poprzednim przykładzie.
  4. Utwórz w edytorze stronę home.html, taką samą jak w poprzednim przykładzie.

UWAGA! Strony: index.html, banner.html>, spis.html oraz home.html muszą znajdować się w tym samym katalogu.

Na każdej stronie w Twoim serwisie (również: spis.html oraz home.html, ale nie index.html), opartym na strukturze ramek, dobrze jest umieścić skrypt ostrzegający użytkownika przed ramką.

Informacje zawarte powyżej, powinny pozwolić Ci, na stworzenie strony, zawierającej jedną z dwóch najczęściej spotykanych struktur ramek. Jednak jeśli chcesz poznać bardziej szczegółowe informacje na ten temat i przez to poruszać się bardziej swobodnie w tym obszarze, zachęcam do przeczytania dalszych rozdziałów umieszczonych poniżej. Poza tym dowiesz się tam m.in. jak wstawić ramkę lokalną w postaci "okienka" wprost na stronie.

Zobacz także

ramki (11), przykład (3)

Komentarze

Zobacz więcej komentarzy

Dotacje

Pomogła Ci ta strona? Chcesz, aby dalej się rozwijała?
Dotpay - Bezpieczne transakcje internetowePayPalWpłać dobrowolną dotację...