Ramki (4)
Tomasz Bartuś
Zajmiemy się teraz kilkoma mniej istotnymi efektami. należy pamiętać, że nie działają one tak samo ze wszystkimi przeglądarkami. Jeśli przeglądarka nie potrafi zinterpretować jakiegoś atrybutu, jedyne co można zrobić to zignorować to.
Zmieńmy grubość krawędzi ramki.
<frameset cols="146,*" border="20">
<frameset rows="162,*">
<frame src="world.gif" width="146" height="162" scrolling="no"
marginwidth="0" marginheight="0">
<frame src="maciek.html">
</frameset>
<frame src="aga.html">
</frameset>
Podgląd index.html
Zmieńmy teraz kolor krawędzi ramek.
<frameset cols="146,*" border="20" bordercolor="#FFOOOO">
<frameset rows="162,*">
<frame src="world.gif" width="146" height="162" scrolling="no"
marginwidth="0" marginheight="0">
<frame src="maciek.html">
</frameset>
<frame src="aga.html">
</frameset>
Podgląd index.html
Możemy indywidualnie, dla każdej deklaracji <frameset> z osobna, wyłączać widoczność krawędzi ramek. Służy do tego atrybut frameborder.
<frameset cols="146,*" border="20" bordercolor="#FFOOOO">
<frameset rows="162,*" frameborder="no">
<frame src="world.gif" width="146" height="162" scrolling="no"
marginwidth="0" marginheight="0">
<frame src="maciek.html">
</frameset>
<frame src="aga.html">
</frameset>
Podgląd index.html
W przeglądarce IE, ramka, pomimo braku jej widoczności, nadal jest możliwa do "ręcznego przesuwania". W przeglądarce Mozilla Firefox, nie jest to możliwe.
Istnieje atrybut, którego użycie uniemożliwia ręczne przesuwanie ramek. Zwróć uwagę na zachowanie ramki oddzielającej dwie kolumny okna przeglądarki.
<frameset cols="146,*" border="20" bordercolor="#FFOOOO">
<frameset rows="162,*" frameborder="no" >
<frame src="world.gif" width="146" height="162" scrolling="no"
marginwidth="0" marginheight="0">
<frame src="maciek.html">
</frameset>
<frame src="aga.html" noresize="noresize">
</frameset>
Podgląd index.html
W porządku..., dowiedzieliśmy się trochę o formatowaniu ramek, pora wrócić do prostej ramki i zająć się problemem linkowania pomiędzy ramkami.
<frameset cols="33%,67%">
<frame src="adam.html">
<frame src="aga.html">
</frameset>
Podgląd index.html
Utworzymy teraz w pliku adam.html (lewa ramka), link do pliku magda.html. Otwórzmy plik adam.html w Notatniku i dodajmy do niego kod:
<!DOCTYPE html>
<html lang="pl">
<head>
<title>Strona z ramkami</title>
<meta charset="utf-8">
</head>
<body>
<p>
Adam
</p>
<p>
Musimy odwiedzić Magdę
</p>
</body>
</html>
Tag <p>...</p> nazywany jest akapitem albo paragrafem. Tworzy się go w celu wyodrębnienia fragmentów tekstu od kolejnych jego części. Następujące bezpośrednio po sobie akapity są oddzielone przerwą w tekście (pustą linią). Stosuje się je dla odróżnienia w kolejnych akapitach treści różniących się od siebie tematycznie. Poprawia to estetykę strony i jej czytelność.
Utwórz teraz link i zapisz zmiany w pliku.
<!DOCTYPE html>
<html lang="pl">
<head>
<title>Strona z ramkami</title>
<meta charset="utf-8">
</head>
<body>
<p>
Adam
</p>
<p>
Musimy odwiedzić <a href="magda.html">Magdę</a>
</p>
</body>
</html>
Spróbujmy jak to będzie działało:
<frameset cols="33%,67%">
<frame src="adam.html">
<frame src="aga.html">
</frameset>
Podgląd index.html
Po kliknięciu na link, plik magda.html został wgrany w ramce Adama. Musimy spowodować, aby plik Magdy otwierał się w miejscu przeznaczonym na zasadniczą część strony, czyli w ramce Agi (prawa ramka). Wymaga to jeszcze jednego elementu.
Ostatnią rzeczą jaką musimy zrobić, jest nazwanie ramki(ek), do której będą się odwoływały linki. Warto aby tworzyć nazwy, ktore w łatwy sposób będzie można skojarzyć z istniejącym projektem np: manu_lewe; menu_prawe; tresc; baner; itp. Nazwy ramek przypisuje się wewnątrz tagu <frame>. Służy do tego atrybut name.
<frameset cols="33%,67%">
<frame src="adam.html">
<frame src="aga.html" name="tresc">
</frameset>
Może jeszcze słowo komentarza. Dlaczego nie nazwać drugiej ramki Aga(?). To proste. W prawej ramce zadeklarowano, że plik aga.html ma się wyświetlać tylko w pierwszym momencie, zaraz po otwarciu strony WWW. Po chwili, użytkownik będzie docelowo mógł zmienić wyświetlaną stronę na inną. Lepszą więc nazwą będzie tresc.
Potrzebna jest jeszcze deklaracja w linku, do jakiej ramki się odwołujemy. W której ramce mają zostać wyświetlone nowe treści. Wróćmy więc do edycji pliku adam.html i dodajmy do linku atrybut target.
<!DOCTYPE html>
<html lang="pl">
<head>
<title>Strona z ramkami</title>
<meta charset="utf-8">
</head>
<body>
<p>
Adam
</p>
<p>
Musimy odwiedzić <a href="magda.html" target="tresc">Magdę</a>
</p>
</body>
</html>
Spowoduje to, że link, zostanie załadowany do okna o nazwie tresc.
Podgląd index.html
Już wiemy jak tworzyć linki w obrębie projektu z ramkami (w obrębie jednej witryny). Ale co zrobić, jeżeli chcemy zamieścić link do zewnętrznej, samodzielnej strony/portalu. Załadowanie takich stron do naszego okna tresc, raczej nie będzie wyglądało dobrze.
<!DOCTYPE html>
<html lang="pl">
<head>
<title>Strona z ramkami</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
<p>
Adam
</p>
<p>
Musimy odwiedzić <a href="magda.html" target="tresc">Magdę</a>
</p>
<p>
Link do prowadzącego <a href="http://home.agh.edu.pl/bartus/" target="tresc">Tomasz Bartuś</a>
</p>
</body>
</html>
Podgląd index.html
Tak jak podejrzewaliśmy, strona załadowana do okna tresc nie wygląda dobrze.
Idealnym rozwiązaniem byłoby otwarcie nowego okna przeglądarki i załadowanie do niego zewnętrznej strony WWW. To proste. Wystarczy tylko zmienić wartość atrybutu target na _top.
<!DOCTYPE html>
<html lang="pl">
<head>
<title>Strona z ramkami</title>
<meta charset="utf-8">
</head>
<body>
<p>
Adam
</p>
<p>
Musimy odwiedzić <a href="magda.html" target="tresc">Magdę</a>
</p>
<p>
Link do prowadzącego <a href="http://home.agh.edu.pl/bartus/" target="_top">Tomasz Bartuś</a>
</p>
</body>
</html>
Podgląd index.html
Zawsze używaj tej metody aby linkować do zewnętrznych stron WWW.
_top jest jednym z czterech tzw. 'magicznych targetów'. Należą do nich:
_self,
_blank,
_parent i oczywiście
_top. Jak widać wszystkie rozpoczynają się od znaku podkreślenia "_".
Znaczenie poszczególnych magicznych targetów:
_self - strona zostanie załadowana do bieżącej ramki, czyli do tej na której został wpisany powyższy odsyłacz
_top - strona zostanie wstawiona w miejsce dokumentu pierwszego w hierarchii (strony głównej)
_parent - strona zostanie wstawiona w miejsce dokumentu nadrzędnego w hierarchii, czyli w miejsce strony startowej struktury ramek, w której znajduje się dany odsyłacz (w przypadku większej ilości zagnieżdżonych stron startowych)
_blank - strona zostanie załadowana w nowym oknie (uruchomi nową kopię przeglądarki)
