Aplikacje internetowe

Aplikacje internetowe

Posługiwanie się ramkami

Zastosowanie ramek

• Wprowadzenie obsługi ramek w przeglądarce Netscape 2.0 otworzyło nową erę dla twórców stron WWW. Dzięki ramkom możemy tworzyć strony zdecydowanie różniące się od wszystkich innych. Możemy umieszczać tabele w tabelach, dodawać do stron nagłówki, stopki i paski z połączeniami.

• Jednocześnie ramki zmieniają sposób widzenia „strony” przez przeglądarkę i czytelników. Kiedyś, wyświetlane na ekranie informacje stanowiły zawartość pojedynczej strony HTML — teraz, gdy tworzysz witryny korzystające z ramek, na jednym ekranie wyświetlane są informacje z kilku powiązanych ze sobą, jednak osobnych dokumentów HTML.

Tworzenie ramek

• Podstawowym dokumentem HTML, który musimy utworzyć, jest dokument układu ramek - to strona, która zawiera informacje na temat układu poszczególnych ramek oraz nazwy dokumentów HTML, które zostaną w nich umieszczone.

• Wprowadzamy w nim kody HTML definiujące układ poszczególnych ramek.

• Dokument układu ramek zawiera także nazwy dokumentów HTML, których zawartość będzie wyświetlana w odpowiednich ramkach.

Przykładowy układ ramek

Przykładowy układ ramek

• Dokument przedstawiony w poprzednim slajdzie miał cztery ramki.

• Każdy z pozostałych czterech dokumentów (wyświetlanych w poszczególnych ramkach) zawiera normalne znaczniki HTML definiujące zawartość poszczególnych ramek. Do tych dokumentów odwołuje się właśnie dokument układu ramek.

Znacznik <frameset>• Aby móc stworzyć dokument układu ramek, musimy poznać znacznik

<frameset>.

• Znacznik ten zastępuje w dokumencie HTML znacznik <body>, tak jak pokazano poniżej:

<html>

<head>

<title>Tytuł strony</title>

</head>

<frameset>

... tu rozpoczyna się definicja Twojej ramki. ...

</frameset>

</html>

Znacznik <frameset>

• Zrozumienie różnicy pomiędzy zwykłym dokumentem HTML, a dokumentem zawierającym definicje układu ramek jest niezwykle istotne.

• Umieszczenie znacznika <frameset> w dokumencie HTML wyklucza stosowanie znacznika <body>. Innymi słowy, oba znaczniki wzajemnie się wykluczają.

• Co więcej, dokument układu ramek nie może zawierać innych znaczników formatujących, połączeń oraz dokumentów tekstowych.

• Jedynym wyjątkiem jest sytuacja, gdy stosowany jest znacznik <noframes>.

• Element <frameset> zawiera więc wyłącznie definicje ramek dla tego dokumentu, noszą one nazwę układu ramek.

Atrybut cols• Definiując układ ramek za pomocą znacznika <frameset>,

musimy dołączyć do definicji jeden z atrybutów znacznika. Pierwszym z nich jest atrybut cols. Oto odpowiednia postać znacznika:

<frameset cols="szerokość_kolumny, szerokość_kolumny, …">

• Atrybut cols informuje przeglądarkę, by podzieliła ekran na odpowiednią liczbę pionowych ramek, których szerokości zdefiniowane są poprzez kolejne wartości atrybutu cols (szerokość_kolumny), oddzielone przecinkami.

Atrybut cols• Szerokość ramki może być wprowadzana na trzy sposoby:

‒ bezpośrednio w pikselach, ‒ w procentach względem całkowitej szerokości układu ramek ‒ za pomocą znaku „*”.

• W ostatnim przypadku przeglądarka przydziela tak zdefiniowanej ramce maksymalną możliwą szerokość.

• Jeśli w pełnej definicji układu ramek pojawi się znacznik <frameset> w postaci

<frameset cols="100,50%,*">• ekran zostanie podzielony na trzy pionowe ramki. Pierwsza ramka

ma szerokość 100 pikseli, szerokość drugiej stanowi 50% szerokości całego okna przeglądarki, a trzecia zajmie pozostały obszar.

Atrybut rows• Atrybut rows działa tak, jak atrybut cols, z tym, że podział ekranu

następuje w poziomie. Szerokość ramki podobnie jak w atrybucie cols może być wprowadzana na trzy sposoby: ‒ bezpośrednio w pikselach, ‒ w procentach względem całkowitej szerokości układu ramek ‒ za pomocą znaku „*”.

• Jeśli w pełnej definicji układu ramek pojawi się znacznik <frameset> w postaci

<frameset rows="100,50%,*">• ekran zostanie podzielony na trzy poziome ramki. Pierwsza ramka

ma szerokość 100 pikseli, szerokość drugiej stanowi 50% szerokości całego okna przeglądarki, a trzecia zajmie pozostały obszar.

Znacznik <frame>

• Po zdefiniowaniu układu ramek, musimy stowarzyszyć dokumenty HTML z poszczególnymi ramkami. Służy do tego znacznik <frame>, którego zawartość powinna być następująca:

<frame src="dokument_URL">

• Taka definicja powinna pojawić się dla każdej z ramek układu ramek utworzonego za pomocą znacznika <frameset>.

• Dokument_URL określa nazwę pliku ze stroną która powinna być wyświetlona w ramce lub adres URL strony w sieci.

Przykład pionowego podziału okna przeglądarki

Przykład pionowego podziału okna przeglądarki kod w HTML

<html>

<head>

<title>Znacznik FRAME</title>

</head>

<frameset cols="*,*,*">

<frame src="doc1.html">



</frameset>

</html>

Przykład poziomego podziału okna przeglądarki

Przykład pionowego podziału okna przeglądarki kod w HTML

<html>

<head>

<title>Znacznik FRAME</title>

</head>

<frameset rows="*,*,*">




</frameset>

</html>

Uwagi na temat ramek

• Ponieważ projektowane przez Nas strony będą wyświetlane w oknach o różnych rozmiarach, powinniśmy unikać stosowania absolutnych rozmiarów ramek.

• Jeśli jednak zdefiniujemy rozmiar ramki w ten sposób, wymiary pozostałych ramek określaj za pomocą gwiazdki (*), aby pozostała część okna została wypełniona.

Znacznik <noframes>

• Specjalny znacznik <noframes> umożliwia zdefiniowanie w dokumencie układu ramek dodatkowego fragmentu kodu HMTL.

• Kod HTML umieszczony wewnątrz tego znacznika nie jest wyświetlany w przeglądarkach obsługujących ramki; pojawia się on wyłącznie w przeglądarkach, które nie są w stanie wyświetlać ramek.

• Aktualnie wszystkie aktualne wersje przeglądarek obsługują ramki.

Przykład strony z użyciem znacznika <noframes>

<html><head><title>Układ ramek bez żadnej zawartości w ramkach</title></head><frameset>

Tu rozpoczynają się definicje ramek.<noframes>

Tu wprowadź dowolny tekst, połączenia i znaczniki.</noframes></frameset></html>

Zmiana obramowań ramek

• Korzystając z atrybutu frameborder, możemy stosować obramowania lub z nich rezygnować. Atrybut ten przybiera dwie możliwe wartości: - 1 – oznaczającą, że ramki mają być wyświetlane,- 0 – oznaczającą, że ramki mają być niewidoczne.

• W przypadku gdy ramki mają być widoczne możemy zastosować drugi atrybut, bordercolor określający kolor ramki.

• Atrybuty te mogą byś stosowane w zarówno w znaczniku <framaset> jak i w <frame>.

Przykład• Na przykład, przedstawiony poniżej fragment kodu wyświetla

ciemnoczerwoną (#cc3333) ramkę wokół środkowej ramki układu:<html><head><title>Znacznik FRAME</title></head><frameset rows="*,*,*">

<frame src="doc1.html"><frame src="doc2.html" frameborder="1" bordercolor="#cc3333"><frame src="doc3.html">

</frameset></html>

Konflikty obramowań ramek• Oczywiście, korzystanie z kolorowych obramowań może być źródłem

nieporozumień.• W przedstawionym poniżej przykładowym układzie ramek występuje konflikt,

gdyż dwóm ramkom mającym wspólną krawędź zostały przypisane inne kolory (przy użyciu atrybutu bordercolor):<html><head><title>Znacznik FRAME</title></head><frameset rows="*,*,*" frameborder="0">

<frame src="doc1.html" frameborder="1" bordercolor="yellow"><frame src="doc2.html" bordercolor="#cc3333"><frame src="doc3.html" >

</frameset></html>

Konflikty obramowań ramek

W takich sytuacjach należy zastosować trzy proste zasady:• atrybuty zewnętrznego układu ramek mają najniższy

priorytet,• atrybuty zagnieżdżonego znacznika <frameset> dominują

nad atrybutami znacznika nadrzędnego,• atrybut bordercolor danej ramki dominuje nad

ustawieniem wprowadzonym w znaczniku <frameset>.

Tworzenie złożonych układów ramek

• W większości przypadków układy ramek służą do stworzenia paska nawigacyjnego ułatwiającego użytkownikom poruszanie się po witrynie.

• Zdecydowanie najpopularniejszym miejscem, w którym są umieszczane takie paski nawigacyjne, jest lewa część okna przeglądarki. Za każdym razem, gdy użytkownik klika połączenie w lewej, nawigacyjnej ramce, wybrana strona jest wyświetlana w ramce głównej. Bardzo prosty układ ramek, jaki stworzymy w tym ćwiczeniu przedstawi tę technikę.

• Choć nie jest to praktyczny przykład, to jednak jest prosty i zabawny, a dodatkowo demonstruje te same techniki, które są wykorzystywane przy tworzeniu pasków nawigacyjnych.

Strona którą utworzymy. Ćwiczenie.

Dokument definiujący układ ramek<head>

<title>Dlaczego mnie nie ma - układ ramek</title>

</head>

<frameset cols="125,*">

<frame src="wybor.html">

<frameset rows="60,*">

<frame src="tytul.html">

<frame src="powod1.html">

</frameset>

</frameset>

</html>

Dokument definiujący układ ramekz komentarzem

<html><head><title>Dlaczego mnie nie ma - układ ramek</title></head><frameset cols="125,*">

<frame src="wybor.html"> <frameset rows="60,*"> 

<frame src="tytul.html"> <frame src="powod1.html"> 

</frameset> </frameset></html>

Atrybut name znacznika <frame>

• Za pomocą atrybutu name znacznika <frame> możemy nadać nazwę ramce. Jest to niezbędne jeżeli połączenia z jednej ramki przeglądarka ma wyświetlić w innej ramce.

• Ogólny schemat użycia znacznika <frame> z ayrybutem name:

<frame src="dokument_URL" name="nazwa_ramki">

Atrybut target znacznika <a>

• Ten nowy atrybut, o nazwie target, ma następującą postać:

target="nazwa_okna"

• Za pomocą atrybutu target możemy poinformować przeglądarkę, by wyświetliła stronę, do której prowadzi połączenie, w oknie o nazwie nazwa_okna.

• W zasadzie, nazwa nowego okna może być dowolna, z jednym ograniczeniem — nie może rozpoczynać się od znaku podkreślenia „_”. Takie nazwy są bowiem zarezerwowane dla specjalnych wartości atrybutu target.

Atrybut target znacznika <a>

• W przypadku zastosowania ramek możemy poinformować przeglądarkę, by wyświetliła stronę, do której prowadzi połączenie, w ramce o nazwie nazwa_okna.

Dokument definiujący układ ramek z ich nazwami

<head><title>Dlaczego mnie nie ma - układ ramek</title></head><frameset cols="125,*">

<frame src="wybor.html" name="lewa"><frameset rows="60,*">

<frame src="tytul.html" name="gorna"><frame src="powod1.html" name="glowna">

</frameset></frameset></html>

Zmieniona zawartość pliku wybor.html<html>

<head>

<title>Powody mojej nieobecności</title>

</head>

<body bgcolor="#006699" text="#FFCC66" link="#FFFFFF" vlink="#66CCFF" alink="#FF6666">

<p>Wybierz powód:</p>

<hr>

<p><a href="powod1.html" target="glowna">Powód 1</a></p>






</body>

</html>

Znacznik <base>• Stosując atrybut target w definicjach połączeń, napotkamy czasami sytuacje,

w których wszystkie połączenia na stronie (lub ich większość) skierowane są do tego samego okna — zdarza się to najczęściej w przypadku korzystania z ramek.

• W takich przypadkach, zamiast dodawać atrybut target do każdego znacznika <a>, możemy skorzystać ze znacznika <base> i zdefiniować za jego pomocą globalny cel wszystkich połączeń na stronie WWW. Znacznik ten ma następującą postać:

<base target="nazwa_okna">

• Jeśli znacznik <base> umieszczony zostanie w sekcji <head>…</head> dokumentu, każde połączenie utworzone za pomocą znacznika <a>, nie posiadającego odpowiedniego atrybutu target, spowoduje wyświetlenie wskazywanego przez nie dokumentu w oknie określonym przez kod <base target="nazwa_okna">.

Specjalne wartości atrybutu targettarget="_blank" Powoduje, że dokument wskazywany w

znaczniku <a> jest ładowany do nowego okna nie mającego nazwy.

target="_self" Powoduje, że dokument wskazywany w znaczniku <a> jest ładowany do tego samego okna lub ramki, w którym znajduje się połączenie definiowane znacznikiem <a>. Jest to użyteczne, gdy chcemy, by dane połączenie spowodowało wyświetlenie dokumentu nie w ramce domyślnej, definiowanej przez znacznik <base>, ale w bieżącej.

Specjalne wartości atrybutu targettarget="_parent" Powoduje, że dokument ładowany jest do

ramki nadrzędnej wobec ramki zawierającej bieżący dokument. Jeśli jednak nie istnieje ramka nadrzędna, będzie stosowane ustawienie target="_self".

target="_top" Powoduje, że ładowany dokument zajmuje całe okno przeglądarki, zastępując całkowicie bieżący układ ramek. Jeśli jednak bieżący dokument jest już w ten sposób wyświetlany, stosowane będzie ustawienie target="_self".

Aplikacje internetowe

Documents

Transcript of Aplikacje internetowe