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: <framesetcols="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 colsmoż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: <framesrc="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"> <frame src="doc2.html"> <frame src="doc3.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="*,*,*"> <frame src="doc1.html"> <frame src="doc2.html"> <frame src="doc3.html"> </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> <framesetrows="*,*,*"> <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> <framesetrows="*,*,*" 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,*"> <framesrc="wybor.html"> <frameset rows="60,*"> <framesrc="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,*"> <framesrc="wybor.html">  <frameset rows="60,*">  <framesrc="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 ayrybutemname: <framesrc="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,*"> <framesrc="wybor.html" name="lewa"> <frameset rows="60,*"> <framesrc="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"> Wybierz powód: <hr> <a href="powod1.html" target="glowna">Powód 1</a> <a href="powod2.html" target="glowna">Powód 2</a> <a href="powod3.html" target="glowna">Powód 3</a> <a href="powod4.html" target="glowna">Powód 4</a> <a href="powod5.html" target="glowna">Powód 5</a> <a href="powod6.html" target="glowna">Powód 6</a> </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ć: <basetarget="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 <basetarget="nazwa_okna">.

Specjalne wartości atrybutu target

Aplikacje internetowe