Ramki#

Odsyłacze w ramkach#

Serwis zbudowany na ramkach składa się z pliku bazowego, w którym dokonujemy podziału na poszczególne ramki. Przy wczytywaniu pliku bazowego wczytywane są także pliki domyślne dla każdej ramki. W każdym z tych plików mogą znajdować się odnośniki do innych dokumentów. Linki mogą być tworzone w tradycyjny sposób. Przy ustawieniach domyślnych, każde kliknięcie odsyłacza wczyta stronę, która zastąpi nam aktualną treść widoczną w ramce.

Ideą wprowadzenia ramek było podzielenie strony na dowolną liczbę fragmentów (pól). Każdy z nich mógł być statyczny (np. menu), którego zadaniem było wyświetlenie listy odsyłaczy, po kliknięci których zawartość innej ramki miała zostać podmieniona. W tym celu należy skorzystać z odpowiedniej konstrukcji odnośników oraz oznaczać ramki (będące źródłem docelowym dla odsyłacza) unikatowym atrybutem name.

Wczytywanie strony do ramki#

  1. —
  2. L
  3. K
  4. T'
  5. T
  6. A
  7. O
  8. Z'
  9. Z
  10. #
<a target="cel" href="ścieżka dostępu do pliku">Opis odsyłacza</a>

Dla atrybutu href podajemy adres zasobu, który będzie wczytywany po kliknięciu odsyłacza. Najczęściej będzie on wskazywał na stronę internetową.

Osobnego omówienia wymaga atrybut target. W jego przypadku możemy podać:

  1. "nazwę ramki", do której ma zostać wczytana strona. Nazwę ramki definiujemy wcześniej na stronie bazowej w znaczniku frame. Jeśli strona ma zostać wczytana do tej samej ramki, w której znajduje się odsyłacz, atrybut target można całkowicie pominąć.

    Jeśli podamy nazwę ramki, która nie istnieje, spowoduje to otworzenie nowego okna. Następnie będzie można do niego wczytywać dokumenty, podając tę samą nazwę (jeśli użytkownik wcześniej go nie zamknie).

  2. Cztery wartości specjalne:
    • _self - załadowanie strony do bieżącej ramki, czyli do tej na której został umieszczony odsyłacz. Jest to domyślne zachowanie (atrybut target można pominąć).
    • _blank - załadowanie strony do nowego, pustego okna (uruchomi nowe okno lub instancję przeglądarki).
    • _parent - załadowanie strony w miejsce dokumentu nadrzędnego w hierarchii, czyli w miejsce strony bazowej struktury ramek, w której znajduje się dany odsyłacz (w przypadku większej ilości zagnieżdżonych stron bazowych).
    • _top - załadowanie strony w miejsce dokumentu pierwszego w hierarchii (strony głównej).

Wsparcie target#

Atrybut target nie wchodzi w skład specyfikacji Strict DTD (dla HTML 4.01 oraz XHTML 1.0). W przypadku XHTML 1.1 został całkowicie usunięty (podobnie jak ramki). Jeśli stosujemy ramki musimy podać odpowiedni Doctype. Jest to szczególnie istotne dla plików, które zawierają linki wczytujące treść do innych ramek. Konstrukcja tych odnośników wymaga stosowania atrybutu target.

Wszystkie strony, które ładowane są do konkretnej ramki, a które nie wczytują dokumentów do innej ramki (brak atrybutu target) mogą mieć deklarację DTD odpowiadającą wersji Strict.

Jeśli bardzo zależy nam na walidacji tworzonych przez nas dokumentów, a jednocześnie chcemy stosować język xHTML w wersji Strict, możemy posłużyć się językiem JavaScript. Oczywiście całość zadziała jeśli czytelnik ma włączoną obsługę języka w przeglądarce (zazwyczaj tak jest).

Przykłady dla wartości specjalnych target#

Wartości specjalne mogą być niezrozumiałe dla początkujących webmasterów, dlatego zaprezentuję przykłady dla każdej z nich.

_self#

Domyślne zachowanie dla wszystkich klikniętych odsyłaczy. Każdy link, który owego atrybutu nie posiada, działa analogicznie jakbyśmy go ręcznie wpisali. Konstrukcja dotyczy zarówno plików tradycyjnych, jaki i tych opartych na ramkach. Dla zwykłej strony kliknięcie w link podmieni jej treść na tę wskazywaną przez odsyłacz. W ramkach będzie podobnie, ale treść załadowana zostanie do ramki, w której został kliknięty odsyłacz.

Przykład (dla klasycznej strony):

  1. —
  2. L
  3. K
  4. T'
  5. T
  6. A
  7. O
  8. Z'
  9. Z
  10. #
<a href="html_ramki_frame.html">FRAME</a>

Efekt:

FRAME

Dla ramek można przeanalizować Wariant 1 (na żywo). W prawej ramce umieściłem link, którego kliknięcie wczyta plik do aktualnej ramki.

_blank#

Każdy kliknięty odnośnik posiadający zdefiniowany atrybut target="_blank" otworzy nowe okno przeglądarki, do której załadowana zostanie treść wskazywana przez odsyłacz. Przyjęło się, że otwieranie treści w nowych oknach to zła praktyka. To użytkownik powinien decydować o takim zachowaniu. Klikając prawym przyciskiem myszki na odsyłaczu możemy zdecydować, czy otwierać go w karcie, czy może w nowym oknie (więcej).

Przykład (obejście JavaScript):

  1. —
  2. L
  3. K
  4. T'
  5. T
  6. A
  7. O
  8. Z'
  9. Z
  10. #
<a href="html_ramki_frame.html" onclick="window.open(this.href); return false">FRAME</a>

Efekt:

FRAME

Nowoczesne przeglądarki internetowe mają odpowiednie zabezpieczenia (włączone domyślnie), które nie pozwalają na otwieranie nowych okien. Stosowanie atrybutu target="_blank" zaowocuje jedynie otwarciem nowej karty.

_top i _parent#

Polecenia działają bardzo podobnie, a dokładną różnicę zaobserwujemy w sytuacji, kiedy pozagnieżdżamy pliki bazowe (w jednej ramce pliku bazowego wczytywany jest plik, który tworzy nowy podział).

Kliknięcie odsyłacza (z target="_top") spowoduje wczytanie pliku w oknie głównym. Wszystko co było wcześniej (nawet pozagnieżdżane ramki) zostanie zastąpione nową treścią.

Kliknięcie odsyłacza (z target="_parent") spowoduje wczytanie pliku treści w miejscu pliku bazowego, definiującego podział na ramki, w którym znajduje się kliknięty odsyłacz. Czyli zmianie ulega jedynie jeden z plików podrzędnych definiujących dalszy podział, nie cała struktura.

#Najwygodniej będzie zobaczyć całość na żywym przykładzie. Mamy plik index.html, który tworzy stronę startową opartą na ramkach:

  1. —
  2. L
  3. K
  4. T'
  5. T
  6. A
  7. O
  8. Z'
  9. Z
  10. #
<!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 główna</title>
	</head>

	<frameset cols="40%,*">
		<frameset rows="50%,*">
			<frame src="test.html" name="lewagorna">
			<frame src="test.html" name="lewadolna">
		</frameset>
		<frame src="index2.html" name="prawa">
	</frameset>

</html>

Do jednej z ramek (prawej) w powyższym pliku zostanie wczytana kolejna strona (index2.html), tworząca własny podział na ramki:

  1. —
  2. L
  3. K
  4. T'
  5. T
  6. A
  7. O
  8. Z'
  9. Z
  10. #
<!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>Ramka podrzędna</title>
	</head>

	<frameset rows="30%,*">
		<frame src="test.html" name="prawagorna">
		<frame src="target.html" name="prawadolna">
	</frameset>

</html>

W pliku target.html umieściłem różne odsyłacze posiadające odmienne wartości atrybutu target. Kliknięcie każdego z nich wywoła inną reakcję dla wczytywanego pliku.

#Efekt opisywany w powyższym przykładzie można uzyskać tylko w przypadku określenia dwóch (lub większej ilości) stron bazowych, z których jedna jest podrzędna w stosunku do drugiej. Jeżeli stworzymy taką strukturę przy użyciu pojedynczego pliku (żywy przykład), atrybut target="_parent" będzie równoważny z target="_top". Oto kod pliku index.html z nowego przykładu:

  1. —
  2. L
  3. K
  4. T'
  5. T
  6. A
  7. O
  8. Z'
  9. Z
  10. #
<!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 główna</title>
	</head>

	<frameset cols="40%,*">
		<frameset rows="50%,*">
			<frame src="test.html" name="lewagorna">
			<frame src="test.html" name="lewadolna">
		</frameset>
		<frameset rows="30%,*">
			<frame src="test.html" name="prawagorna">
			<frame src="target.html" name="prawadolna">
		</frameset>
	</frameset>
</html>

Jednoczesne wczytywanie do kilku ramek#

Składnia xHTML-a umożliwia tworzenie odsyłaczy, które mogą wczytywać stronę tylko do jednej ramki jednocześnie. Jeśli chcielibyśmy aby po kliknięciu odnośnika zmieniła się zawartość dwóch (lub więcej) ramek, musimy skorzystać z odpowiedniego kodu JavaScript:

  1. —
  2. L
  3. K
  4. T'
  5. T
  6. A
  7. O
  8. Z'
  9. Z
  10. #
<a href="" onclick="parent.nazwaramki1.location.href = 'adres1.html'; parent.nazwaramki2.location.href = 'adres2.html'; return false;">
	...
</a>

gdzie "nazwaramki1" i "nazwaramki2" to wartości dla atrybutów name="..." nadane elementom frame na stronie bazowej. W zależności od budowy pliku bazowego (pozagnieżdżanie kolejnych plików bazowych) zamiast parent.nazwaramki należy użyć top.nazwaramki.

Oczywiście metoda umożliwia załadowanie więcej niż dwóch ramek. Należy wtedy wpisać dalsze polecenia typu: parent.nazwaramki.location.href = 'adres.html', oddzielając je średnikami (";").

Oto żywy przykład, w którym jednocześnie ładowane są różne pliki do trzech ramek.

Ogólnie rzecz biorąc, język JavaScript pozwala dowolnie manipulować zachowaniem ramek (a także klasycznych pojedynczych stron). Jest to jednak rozległy temat, który mam nadzieję opisać w odrębnym kursie poświęconym głównemu (i na dzień dzisiejszy jedynemu) językowi skryptowemu dla przeglądarek.

Pasek społecznościowy

SPIS TREŚCI AKTUALNEJ STRONY

Ramki (H1) Odsyłacze w ramkach (H2) Wczytywanie strony do ramki (H3) Wsparcie target (H3) Przykłady dla wartości specjalnych target (H3) _self (H4) _blank (H4) _top i _parent (H4) Jednoczesne wczytywanie do kilku ramek (H3)