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.

Prezentacja na temat: "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."— Zapis prezentacji:

1 Aplikacje internetowe Posługiwanie się ramkami

2 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.

3 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.

4 Przykładowy układ ramek

5 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.

6 Znacznik Aby móc stworzyć dokument układu ramek, musimy poznać znacznik. Znacznik ten zastępuje w dokumencie HTML znacznik, tak jak pokazano poniżej: Tytuł strony... tu rozpoczyna się definicja Twojej ramki....

7 Znacznik Zrozumienie różnicy pomiędzy zwykłym dokumentem HTML, a dokumentem zawierającym definicje układu ramek jest niezwykle istotne. Umieszczenie znacznika w dokumencie HTML wyklucza stosowanie znacznika. 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. Element zawiera więc wyłącznie definicje ramek dla tego dokumentu, noszą one nazwę układu ramek.

8 Atrybut cols Definiując układ ramek za pomocą znacznika, musimy dołączyć do definicji jeden z atrybutów znacznika. Pierwszym z nich jest atrybut cols. Oto odpowiednia postać znacznika: 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.

9 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 w postaci 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.

10 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 w postaci 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.

11 Znacznik Po zdefiniowaniu układu ramek, musimy stowarzyszyć dokumenty HTML z poszczególnymi ramkami. Służy do tego znacznik, którego zawartość powinna być następująca: Taka definicja powinna pojawić się dla każdej z ramek układu ramek utworzonego za pomocą znacznika. Dokument_URL określa nazwę pliku ze stroną która powinna być wyświetlona w ramce lub adres URL strony w sieci.

12 Przykład pionowego podziału okna przeglądarki

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

14 Przykład poziomego podziału okna przeglądarki

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

16 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.

17 Znacznik Specjalny znacznik 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.

18 Przykład strony z użyciem znacznika Układ ramek bez żadnej zawartości w ramkach Tu rozpoczynają się definicje ramek. Tu wprowadź dowolny tekst, połączenia i znaczniki.

19 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 jak i w.

20 Przykład Na przykład, przedstawiony poniżej fragment kodu wyświetla ciemnoczerwoną (#cc3333) ramkę wokół środkowej ramki układu: Znacznik FRAME

21 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): Znacznik FRAME

22 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 dominują nad atrybutami znacznika nadrzędnego, atrybut bordercolor danej ramki dominuje nad ustawieniem wprowadzonym w znaczniku.

23 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.

24 Strona którą utworzymy. Ćwiczenie.

25 Dokument definiujący układ ramek Dlaczego mnie nie ma - układ ramek

26 Dokument definiujący układ ramek z komentarzem Dlaczego mnie nie ma - układ ramek

27 Atrybut name znacznika Za pomocą atrybutu name znacznika 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 z ayrybutem name:

28 Atrybut target znacznika 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.

29 Atrybut target znacznika 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.

30 Dokument definiujący układ ramek z ich nazwami Dlaczego mnie nie ma - układ ramek

31 Zmieniona zawartość pliku wybor.html Powody mojej nieobecności Wybierz powód: Powód 1 Powód 2 Powód 3 Powód 4 Powód 5 Powód 6

32 Znacznik 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, możemy skorzystać ze znacznika i zdefiniować za jego pomocą globalny cel wszystkich połączeń na stronie WWW. Znacznik ten ma następującą postać: Jeśli znacznik umieszczony zostanie w sekcji … dokumentu, każde połączenie utworzone za pomocą znacznika, nie posiadającego odpowiedniego atrybutu target, spowoduje wyświetlenie wskazywanego przez nie dokumentu w oknie określonym przez kod.

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

34 Specjalne wartości atrybutu target target="_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".