Rozdział 9. Definiowanie układu strony za pomocą ramek
Układy ramek to niedoceniane narzędzie tworzenia stron WWW. A dzięki niemu można zorganizować wiele dokumentów HTML tak, by stały się dostępne w jednym miejscu (patrz rysunki 9.1 i 9.2). Nie można ignorować ogromnych możliwości jakie stwarza to dla projektanta.
Rys. 9.1. Trzy odrębne dokumenty HTML |
|
Rys. 9.2. Te same trzy dokumenty HTML w układzie ramek |
|
Zazwyczaj witryny sieciowe zawierają masę powtarzalnych elementów - takich jak narzędzia nawigacji, tytuły, znaki logo. Jeśli zrobisz użytek z ramek, raz zdefiniowawszy takie elementy będziesz mógł wielokrotnie z nich korzystać na wszystkich stronach witryny.
Obok tej ulgi jaką daje ograniczenie liczby powtarzalnych operacji, największe korzyści ze stosowania układu ramek wiążą się z niezależnością elementów składowych układu, które zachowują się jak odrębne dokumenty HTML. Dlatego można jedną z ramek układu wyposażyć w paski przewijania, a resztę pozostawić jako ramki statyczne. Można także zmieniać zawartość jednej z ramek (lub kilku ramek), nie naruszając zawartości innych. Oznacza to, że zmiana zawartości w jednych ramkach nie wpływa na w statyczne elementy w innych - te są raz ładowane i pozostają niezmienne. Tak więc użytkownik nie musi ściągać statycznej zawartości strony skupiając się tylko na pobieraniu nowych danych.
W tym rozdziale dowiemy się, co tworzy układ ramek oraz jak korzystać z programu Dreamweaver, aby zaimplementować na swoich stronach możliwości, które daje tego typu struktura.
Oto lista szczegółowych tematów:
Podstawy tworzenia układu ramek
Tworzenie ramek
Definiowanie wymiarów i formatowanie ramek
Tworzenie połączeń między ramkami
Ramki i układy ramek
Aby układ dokumentu HTML oprzeć na ramkach, niezbędne są dwie składowe struktury ramkowej: układ ramek i ramki. Jeśli chodzi o układ ramek, ważne jest aby rozróżnić jego dwa elementy kluczowe. Pierwszy to dokument układu ramek, będący czystym kodem HTML. Drugi to kod w tym dokumencie, który definiuje rozmieszczenie i wymiary ramek. Należy sobie zdać sprawę, że dokument układu ramek nie zawiera treści strony. Podaje on natomiast lokalizacje innych dokumentów HTML, które będą wyświetlane w ramkach układu. To właśnie te dokumenty, do których odwołuje się układ ramek, zawierają treść.
Dokument układu ramek
Układ ramek jest dokumentem HTML, który opisuje podział strony WWW na odpowiednie ramki. Same ramki są z kolei odrębnymi dokumentami HTML rozłożonymi (w czasie ładowania dokumentu) zgodnie z opisem zawartym w elemencie FRAMESET.
Celem układu ramek jest podział strony na szereg kolumn i wierszy. Podział ten wprowadzony jest poprzez znacznik <FRAMESET>. Oto przykład:
<HTML>
<HTML>
<TITLE>Przykładowy układ ramek</TITLE>
</HTML>
<FRAMESET cols=”30%,70%”>
Ten układ ramek składa się z dwóch kolumn (bowiem podano dwie wartości atrybutu cols). Szerokość pierwszej z nich to 30% szerokości całego dokumentu. Szerokość drugiej kolumny to pozostałe 70%. Zamiast atrybutu cols definiującego kolumny mógłbyś w tym przykładzie użyć atrybutu rows, definiującego wiersze. Wówczas, przy tych samych wartościach, atrybutu powstałby wiersz o wysokości 30% okna, a na drugi wiersz pozostałoby 70% wysokości. Kombinacja obu atrybutów (cols i rows) jest także możliwa (patrz rysunek 9.3).
Rys. 9.3. Układ ramek zbudowany z kolumn i wierszy |
|
Oto odpowiednia chwila, aby porozmawiać o wartościach, które przypisujemy atrybutom cols i rows. Jak pokazano w poprzednim przykładzie, wymiary ramek można definiować w procentach wymiarów okna dokumentu. Można także podawać proporcje wymiarów, na przykład: 2, 2, 4, 2 - w tym przypadku definiowane są cztery ramki o wymiarach odpowiednio 20%, 20%, 40% i 20%. Obie metody - procentowa i proporcjonalna - umożliwiają zmianę rozmiarów ramek, na tyle dowolnie na ile pozwala rozmiar okna przeglądarki. Z drugiej strony, jeśli chcesz dokładnie określić rozmiary ramki, możesz podać wartości w pikselach, na przykład: cols=”355,135”. Taka definicja jest równoważna dwóm kolumnom o szerokości 355 i 135 pikseli. I w końcu, istnieje także kombinacja łącząca ramki o rozmiarach sztywno określonych w pikselach z ramkami o rozmiarach zmiennych - w tym przypadku atrybut przyjmuje względne wartości. Na przykład stosując wyrażenie cols=”500, ” utworzysz jedną kolumnę o szerokości 500 pikseli, a druga kolumna zajmie pozostałą część okna przeglądarki. Jeśli użyjesz wyrażenia rows=”2, *”, wysokość pierwszego wiersza będzie dwa razy większa niż drugiego.
Zagnieżdżanie elementów FRAME i FRAMESET
Znaczniki <FRAME> są zagnieżdżane w elemencie FRAMESET. Znaczniki te odnoszą się do strony, która zostanie załadowana do określonej ramki. Znaczniki <FRAME> są jedynymi znacznikami dopuszczalnymi w obrębie elementu FRAMESET, nie licząc innego elementu FRAMESET zagnieżdżonego w pierwszym. Czy to brzmi nieco zbyt zagmatwanie? No to porównaj kod źródłowy układu ramek z wynikowym układem ramek pokazanym na rysunku 9.4.
<FRAMESET rows=”10%,90% cols=”*”>
<FRAME name=”topFRame” src=”top.html”>
<FRAMESET cols=”10,90%”>
<FRAME name=”leftFrame” src=”left.html”>
<FRAME name=”mainFrame” src=”main.html”>
</FRAMESET>
</FRAMESET>
Rys. 9.4. Układ ramek utworzony na podstawie kodu przedstawionego wyżej |
|
Ramki w programie Dreamweaver
W tym podrozdziale poznasz podstawowe narzędzia programu Dreamweaver służące do tworzenia układów ramek. Narzędzia te dostępne są na palecie obiektów, w inspektorach Frames i Property.
Tworzenie ramek i układów ramek
Zazwyczaj Dreamweaver pozwala daną rzecz zrobić na kilka sposobów. Dotyczy to także tworzenia ramek. Masz do dyspozycji trzy metody:
Menu Frameset
Frame Borders w menu Visual Aids
Kliknąć i przeciągnąć obramowania okna
W menu podrzędnym Frameset menu Modify możesz wybrać sposób podziału bieżącej ramki (patrz rysunek 9.5). Powstałe ramki można dalej dzielić, aby uzyskać żądany układ. Jest to bardzo intuicyjna metoda, o ile jesteś wprawny w posługiwaniu się menu przy modyfikacjach dokumentów. Jeśli wolisz widzieć wprowadzane zmiany, radzę skorzystać z pozostałych dwóch metod.
Rys. 9.5. Definiowanie ramek przy pomocy menu |
|
Układ ramek można utworzyć od zera korzystając tylko z myszki. Musisz jedynie włączyć opcję Frame Borders w menu podrzędnym Visual Aids menu View (patrz rysunek 9.6). Jeśli umieścisz znacznik obok tej pozycji, wokół dokumentu wyświetlone zostanie pogrubione obramowanie.
Rys. 9.6. Wyświetl obramowania ramek |
|
Aby utworzyć ramki poziome, umieść wskaźnik myszki nad grubym obramowaniem u góry dokumentu, a gdy wskaźnik przekształci się w pionową strzałkę, kliknij i przeciągnij obramowanie w nowe ulokowanie. Po zwolnieniu klawisza myszki, dokument zostanie podzielony na dwie poziome ramki. Aby powstał układ ramek pionowych, powtórz całą operację, lecz skieruj wskaźnik myszki nad boczne obramowanie. Wskaźnik przyjmie postać poziomej strzałki - oznacza to, że możesz przeciągnąć obramowanie w inne miejsce. Możesz także wskazać narożnik obramowania i przeciągnąć go w głąb dokumentu, dzieląc dokument na cztery ramki. Jeśli chcesz podzielić tylko jedną z ramek, a nie cały dokument, wciśnij klawisz Alt i kliknij ramkę, aby ją zaznaczyć. Następnie przeciągnij obramowanie ramki, aby ją podzielić (w trakcie tej operacji trzymaj wciśnięty klawisz Alt). Ta operacja tworzy zagnieżdżony układ ramek (patrz rysunek 9.7).
Rys. 9.7. W górnej ramce zdefiniowano zagnieżdżony układ ramek |
|
Zaznaczanie ramek
Oto parę rad, które będą przydatne przy tworzeniu ramek w programie Dreamweaver. Układ ramek składa się z wielu dokumentów. Z tego względu, jeśli chcesz wprowadzić w nim modyfikacje, musisz zaznaczyć cały układ. Aby zaznaczyć układ ramek, kliknij obramowanie ramek w oknie dokumentu. Innym sposobem zaznaczenia układu ramek jest skorzystanie z inspektora Frames (aby go wyświetlić, wybierz pozycję Frames w menu Window). Inspektor Frames prezentuje Twój układ ramek w pomniejszeniu, wyświetlając nazwy obok każdej z ramek. Klikając ramki lub obramowania możesz zaznaczyć poszczególne elementy.
Początek ramki
Zaznaczone układy ramek
Bez trudu możesz stwierdzić czy Twój układ ramek został zaznaczony, czy też nie. Jeśli tak, to w widoku projektu obramowania ramek będą obwiedzione kropkowaną linią. Jeśli korzystasz z inspektora Frames, to zaznaczoną ramkę (bądź układ ramek) zobaczysz w nim jako obwiedzioną czarną grubą linią. Jeśli modyfikacjom podlegać ma tylko jedna ramka, musisz wcisnąć i przytrzymać klawisz Alt, a następnie kliknąć w ramce. Pamiętaj, że dzielenie pojedynczej ramki jest od strony kodu HTML równoważne zagnieżdżeniu nowego elementu FRAMESET w istniejącym elemencie FRAMSET. Wokół poprawnie zaznaczonej ramki widoczna jest kropkowane linia.
Koniec ramki
Wstępnie zdefiniowane układy ramek udostępnia paleta obiektów. Znajdziesz je w kategorii Frames. Aby ją wyświetlić, rozwiń menu u góry palety obiektów (domyślną jego pozycją jest Common) i wybierz Frames. Następnie zaznacz ramkę, którą chcesz podzielić, i wybierz spośród propozycji ikonę odpowiadającą żądanemu podziałowi.
Każda z opisanych technik pozwala szybko utworzyć układ o wielu ramkach. Jednak druga z metod wydaje się najbardziej intuicyjna, szczególnie dla tych, którzy przywykli do programów z graficznym interfejsem. Przypomina ona bowiem proces definiowania prowadnic w większości aplikacji tego typu.
Zapisywanie ramek
Zapisywanie dokumentów składowych układu ramek to sprawa równie skomplikowana jak same układy ramek. Aby zrozumieć ten proces, trzeba wrócić do struktury układu ramek. Jak pamiętasz, układ ramek to dokument HTML, który określa ulokowania dokumentów składowych układu (stanowiących zawartość ramek) i określa sposób ich prezentacji w oknie przeglądarki. Ramki są natomiast zwykłymi dokumentami HTML. Tak więc, aby zapisać dokładnie to, co składa się na ukończony układ ramek, konieczne jest zapisanie kilku dokumentów. Zapisując układ ramek zwróć uwagę na dwie rzeczy. Pierwsza kwestia, to wybór odpowiedniego polecenia zapisu dokumentu. Druga ważna sprawa, to porządek w jakim Dreamweaver zapisuje kolejne dokumenty.
W przypadku zapisywania nowego układu ramek i dokumentów składowych tego układu odpowiednim poleceniem będzie pozycja Save All z menu File. Jej wybranie spowoduje zapisanie wszystkich dokumentów w aktualnie otwartym oknie. Dreamweaver poprosi także o podanie nazw tych dokumentów, dla których nie zostały one jeszcze zdefiniowane. Zwróć uwagę na sekwencję w jakiej Dreamweaver zapisuje dokumenty. W pierwszej kolejności zapisywany jest dokument układu ramek. Potem Dreamweaver poprosi Cię o zapisanie dolnej prawej ramki układu. Następna będzie ramka z lewej strony poprzedniej ramki - i tak aż do końca wiersza. Potem program przystąpi do zapisywania ramek kolejnego wiersza stosując się do tej samej zasady, aż wszystkie ramki zostaną zapisane.
Jeśli chcesz zapisać tylko nowy dokument układu ramek, zastosuj polecenie Save Frameset z menu File. Dreamweaver poprosi o podanie nazwy dokumentu układu ramek, o ile nie została ona wcześniej zdefiniowana. Jeśli już istnieje, zaktualizuj po prostu wcześniej zapisaną wersję.
Początek ramki
Tworzenie połączeń między ramkami a dokumentem układu ramek
Jeśli dokumenty składowe są już w całości lub w części przygotowane i pozostaje jedynie utworzyć dokument układu ramek, skorzystaj z inspektora Property, aby połączyć ramki z układem ramek. Zaznacz ramkę, do której chcesz ładować zapisany dokument. Wpisz następnie w polu SRC inspektora Property adres URL pliku lub kliknij ikonę foldera i znajdź plik. Dzięki temu dokument pojawi się w wybranej ramce.
Koniec ramki
Zmiana rozmiarów ramek
Aby zmienić rozmiary ramek, najprościej jest posłużyć się myszką (kliknąć i przeciągnąć). Wówczas jednak rozmiarom ramek przypisywane są wartości bezwzględne, w pikselach. Takie rozwiązanie nie zawsze jest jednak pożądane, a szczególnie wówczas, gdy strona ma być wyświetlana przy różnych rozdzielczościach. W takim przypadku należałoby raczej zaimplementować dynamiczne dostosowywanie się rozmiarów ramek.
Zacznijmy od utworzenia układu ramek takiego jak na rysunku 9.8.
Rys. 9.8. Prosty układ ramek |
|
Zaznacz teraz cały układ ramek, klikając jego obramowanie. W inspektorze Property wyświetlone zostaną ustawienia dla układu ramek (patrz rysunek 9.9). (Układ ramek można także zaznaczyć korzystając z inspektora Frames).
Rys. 9.9. Inspektor Property wyświetla ustawienia dla układu ramek |
|
Zwróć uwagę na dwa narzędzia. Pierwsze z nich, to graficzna reprezentacja aktualnie stosowanego układu ramek - jest ona wyświetlana z prawej strony inspektora Property. Drugie z narzędzi, u dołu okna, to pole tekstowe Value oraz lista rozwijana Units. Aby zmienić wymiary ramki korzystając z tych ustawień, określ najpierw, który z elementów będziesz modyfikować - wiersz czy kolumnę. Wybór elementu umożliwia graficzna reprezentacja , o której wspominaliśmy na wstępie. Klikając komórkę zaznaczysz wiersz lub kolumnę, które ją zawierają. Ponowne kliknięcie tej samej komórki spowoduje przełączenie zaznaczenia z wiersza na kolumnę lub odwrotnie (patrz rysunki 9.10 i 9.11).
Początek ramki
Podpowiedź
W przypadku układu ramek składającego się z ramki nawigacyjnej (czyli ramki, w której umieszczasz przyciski nawigacji) i ramki treści, zazwyczaj zaleca się, aby definiować ramkę treści jako dynamiczną, a ramkę nawigacyjną jako ramkę statyczną. Innymi słowy, wymiary ramki nawigacyjnej należy podać w pikselach, natomiast wymiary ramki treści określić jako względne. Da Ci to pewność, że przy zmianie wielkości okna przeglądarki lub gdy okno przeglądarki użytkownika będzie miało inną wielkość niż u Ciebie, użytkownik nadal będzie miał pełny dostęp do ramki nawigacyjnej, a zawartość ramki treści dostosuje się do nowych warunków.
Koniec ramki
Rys. 9.10. Układ ramek został zaznaczony |
|
Rys. 9.11. Zaznaczono kolumnę układu ramek |
|
Po zaznaczeniu właściwego elementu, możesz podać w polu Value wartość, a z listy Units wybrać jednostkę, w której definiujesz rozmiary. Zobacz jakie to proste.
Usuwanie ramek
Procedura usuwania ramki z układu ramek jest prosta. Po prostu przeciągnij obramowanie ramki na obramowanie ramki nadrzędnej. Jeśli chcesz usunąć ramkę nadrzędną, przeciągnij jej obramowanie w kierunku krawędzi okna dokumentu. Aby można było skorzystać z tej metody, konieczne jest włączenie wyświetlania obramowań ramek (pozycja Visual Aids w menu View, a następnie pozycja Frame Borders w menu podrzędnym).
Zaawansowane właściwości ramek i układów ramek
Dotychczas dyskusja skupiała się na tworzeniu układów ramek, z pominięciem opcji zaawansowanych, określających ich wygląd i funkcjonalność. W zależności od doboru atrybutów znaczników <FRAMESET> i <FRAME> można zmieniać wygląd układu ramek i sposób wyświetlania zawartości.
Atrybuty układu ramek
Pierwszym elementem rzucającym się w oczy w przypadku układu ramek są obramowania. Można jednak zmieniać ich wygląd, a nawet całkowicie je usuwać.
Szerokość obramowania układu ramek definiuje się w pikselach w polu Border Width inspektora Property. Aby całkowicie usunąć obramowanie, wystarczy wpisać w tym polu wartość 0 (tylko zastosowanie wartości No atrybutu Borders usunie całkowicie obramowanie - przypis tłumacza).
W końcu, można także zmienić kolor i sposób prezentacji obramowania. Aby zmienić kolor, wpisz szesnastkowy kod koloru w polu Border Color lub kliknij próbkę koloru obok tego pola i wybierz próbnikiem kolor z palety. Aby zastąpić pseudo-trójwymiarowe obramowania zwykłymi, rozwiń listę Borders i wybierz pozycję Yes lub No. Opcja Default pozostawia wybór przeglądarce (pole Borders kontroluje tylko wyświetlanie obramowań, a nie sposób ich wyświetlania. Wartości tego atrybutu to Yes, No i Default. Pierwsza włącza wyświetlanie, druga wyłącza, a trzecia obsługę pozostawia przeglądarce - przypis tłumacza).
Atrybuty ramek
Aby zmienić atrybuty znacznika <FRAME> definiującego ramkę, musisz zacząć od zaznaczenia ramki. Wówczas atrybuty staną się dostępne w inspektorze Property.
Początek ramki
Uwaga
Przy zaznaczaniu pojedynczych ramek pomocna jest paleta Frames. Wybierz pozycję Frames w menu Window lub zastosuj skrót Shift+F2, aby ją wyświetlić. Paleta Frames odzwierciedla proporcje między ramkami w dokumencie. Kliknięcie ramki na palecie Frames spowoduje zaznaczenie odpowiedniej ramki w dokumencie (patrz rysunek 9.12).
Koniec ramki
Inne atrybuty znacznika <FRAME> dostępne w inspektorze Property to Name, Scroll, Borders, Color, Resize, Margin Width i Margin Height. Przyjrzyjmy się ich funkcjom i sposobowi konfiguracji.
Name
Nie myl tego atrybutu z nazwą pliku dokumentu. Atrybut Name jest bardzo użyteczny, aczkolwiek niedoceniany. Przede wszystkim identyfikacja ramki za pomocą jednoznacznej i opisowej nazwy pozwala skierowywać połączenia na tę ramkę. Gdyby ramka nie mała nazwy, nie można byłoby definiować połączeń, a to z kolei oznaczałoby znaczne ograniczenie możliwości wymiany zawartości ramki. Po drugie, stosowanie nazw zawsze ułatwia odwoływanie się do ramek z poziomu skryptów (tym zajmiemy się w rozdziale 19., „Tworzenie skryptów JavaScript w programie Dreamweaver”). Pamiętaj, aby zawsze definiować nazwy ramek.
Rys. 9.12. Paleta Frames |
|
Istnieje tylko kilka reguł stosowanych przy definiowaniu nazw ramek, lecz są one bardzo istotne:
Nie stosuj nazw zarezerwowanych. Nazwy zarezerwowane to: _blank, _parent, _self i _top. Ich funkcje są opisane szczegółowo w dalszej części rozdziału, w punkcie „Cele zarezerwowane”.
Nie stosuj w nazwach znaków specjalnych, takich jak kropki, przecinki, znaki zapytania, itp.
Nazwa powinna stanowić jeden wyraz, bez spacji.
Pamiętaj także, że w nazwach ramek wielkość liter ma znaczenie. Odwołując się do ramki, sprawdź wielkość liter nazwy i zastosuj identyczną nazwę w odwołaniach.
Scroll
Atrybut Scroll umożliwia wyświetlenie w ramce pasków przewijania. Opcja ta jest szczególnie użyteczna, jeśli chcesz umieścić w ramce zawartość przekraczającą jej rozmiary. Atrybut Scroll ma cztery wartości, które dostępne są na liście rozwijanej inspektora Property:
Yes - w przypadku wybrania tej wartości, ramka zawsze będzie miała pasek przewijania, bez względu na to, jak obszerny dokument jest w niej wyświetlany. Nie polecam tej opcji, chyba że masz wyraźny powód, by ją stosować.
No - w tym przypadku rezygnujesz z udostępnienia przewijania, co może spowodować, że zawartość dokumentu nie da się w całości odczytać. Można stosować takie rozwiązanie, jeśli masz pewność, że zawartość ramki zawsze ma określony rozmiar lub jeśli skonfigurowałeś rozmiary ramki w jednostkach bezwzględnych, dobierając je do zawartości. Ze względu na arbitralność tego ustawienia, decydując się nie powinieneś mieć także pewność, że użytkownik korzysta przynajmniej z tej samej lub wyższej rozdzielczości jak ta, przy której przygotowano strony witryny.
Auto - ta opcja automatycznie włącza lub wyłącza wyświetlanie pasków przewijania w zależności od potrzeb. Jest użyteczna, jeśli objętość zawartości ramki jest nieprzewidywalna w innych przeglądarkach, a także wtedy, gdy nie są Ci znane ustawienia ekranu i przeglądarki użytkownika.
Default - opcja pozostawia kwestię wyświetlenia pasków przewijania w gestii przeglądarki.
Borders i Border Color
Atrybuty te pozwalają zdefiniować obramowanie i jego kolor. Ustawienia te są niezależne od ustawień dla elementu FRAMESET. Przypisując atrybutom określone wartości czynisz próbę zdominowania ustawień wprowadzonych w elemencie FRAMESET. „Czynić próbę” jest tu właściwym określeniem, bowiem jeśli obramowania nie są od siebie niezależne, tak jak na przykład w dokumencie składającym się z wielu zestawów ramek, wszystkie będą dzieliły ten sam typ i atrybuty.
Resize
Domyślnie, użytkownik ma możliwość zmiany rozmiarów ramek za pomocą myszki.
Nie jest to to, o co chodzi projektantom. Dlatego masz do dyspozycji atrybut, który pozwala wyłączyć zachowanie domyślne. W programie Dreamweaver wystarczy po prostu zaznaczyć pole wyboru No Resize w inspektorze Property. Uniemożliwi to użytkownikowi przeciąganie krawędzi ramek i zmianę rozmiarów ramek w oknie przeglądarki (możliwość zmiany rozmiarów zostaje zachowana w Dreamweaverze). Pamiętaj, że to ustawienie musisz definiować osobno dla każdej ramki, której rozmiary chcesz zablokować.
Margin Width i Margin Height
Domyślnie, wszystkie dokumenty układu ramek mają marginesy. Jest to obszar wokół obramowania, w którym nie można umieścić zawartości. Aby go zlikwidować i wykorzystać całą przestrzeń ramki, skorzystaj z atrybutów Margin Width i Margin Height, i przypisz im wartość 0. Dzięki temu zawartość ramki można dosunąć do obramowania.
Definiowanie połączeń nakierowanych na ramki
Tworząc połączenie w dokumencie możesz wskazać ramkę, do której dokument ma zostać załadowany. Daje to możliwość dynamicznej zmiany elementów w układzie ramek, bez konieczności ponownego ściągania całego dokumentu. Technika ta nosi nazwę kierowania połączeń na cel.
Znajduje ona jedno z najpopularniejszych zastosowań w układzie ramek. Jedna z ramek pełni w takim przypadku funkcje ramki nawigacyjnej, a więc ramki z połączeniami do różnych dokumentów, a połączenia te są nakierowane na pozostałe ramki układu - w tych ramkach pojawi się treść dokumentu, gdy użytkownik wejdzie w połączenie.
Nazwy zarezerwowane
Jak wcześniej wspominano, istnieją cztery nazwy predefiniowane, reprezentujące cele połączeń. Oto ich funkcje:
_blank - spowoduje załadowanie dokumentu docelowego (otwieranego kliknięciem połączenia) w nowym oknie przeglądarki, pozbawionym nazwy.
_parent - spowoduje załadowanie dokumentu docelowego w układzie ramek nadrzędnym względem ramki bieżącej. Jeśli ramka, w której zdefiniowano połączenie, nie jest ramką zagnieżdżoną, dokument zostanie wyświetlony w pełnym oknie (co jest równoważne zastosowaniu nazwy _top).
_self - spowoduje załadowanie dokumentu do tej samej ramki, z której został on wywołany. Jeśli cel nie zostanie wskazany, jest to ustawienie domyślne.
_top - dokument docelowy zastępuje poprzednią zawartość (a więc ramki zostają usunięte).
Aby zastosować cele połączeń, utwórz w jednej z ramek połączenie i wybierz z listy rozwijanej Target w inspektorze Property nazwę celu. Na liście umieszczone są wszystkie nazwy ramek - i te predefiniowane, i te zdefiniowane w układzie ramek.
Nazwy ramek
Jak wspomniano wcześniej w tym rozdziale, zdefiniowanie nazw ramek to ważny element procesu tworzenia układu ramek. Teraz dowiesz się dlaczego jest on tak ważny.
Aby nakierować połączenie na określoną ramkę, musisz znać jej nazwę. Procedura kierowania połączeń na ramkę jest identyczna jak ta, stosowana dla nazw predefiniowanych. Jedyna różnica polega na wybieraniu nazwy ramki z listy Target.
Odpowiednie informacje można także wpisać ręcznie. Pamiętaj jednak, że w nazwach wielkość liter jest istotna i Twoje połączenie nie będzie działać, jeśli wpiszesz je z błędem. Korzystając z języków skryptowych, takich jak JavaScript, możesz jednym kliknięciem załadować kilka dokumentów do kilku ramek. W programie Dreamweaver behawior Goto URL to jeden z takich skryptów. Przejdź do rozdziału 119., aby znaleźć więcej informacji na ten temat.
Element NOFRAMES
Im więcej zaawansowanych opcji języka HTML, tym większy problem z ich obsługą w przeglądarkach starszej generacji. Układy ramek nie są tu wyjątkiem. Zamiast kierować użytkownika do innej strony HTML, możesz skorzystać z elementu NOFRAMES i zdefiniować zawartość strony dla przeglądarek, które nie obsługują ramek.
Dreamweaver automatycznie wstawia parę znaczników <NOFRAMES> </NOFRAMES>, bezpośrednio za definicją układu ramek. Między te znaczniki możesz wstawić znaczniki <BODY> </BODY>, a w nich przygotować alternatywny układ strony.
Aby zdefiniować lub zmienić zawartość elementu NOFRAMES, wybierz w menu Modify pozycję Frameset, a następnie pozycję Edit NoFrames Content w menu podrzędnym. Okno dokumentu zostanie zastąpione zawartością elementu NOFRAMES.
Traktuj je jak zwykłe okno dokumentu i w taki sposób z niego korzystaj definiując zastępczy układ. Po zakończeniu działań, wybierz w menu Modify ponownie te same pozycje, aby powrócić do układu ramek.
Podsumowanie
Układy ramek pozwalają zorganizować w jednym miejscu wiele dokumentów HTML. Raz jeszcze podkreślam, nie lekceważ tej możliwości. W tym rozdziale omawialiśmy układy ramek - podstawy, tworzenie ramek, definiowanie ich rozmiarów i formatowanie. Mówiliśmy też o ramkach stanowiących cel połączenia. Mam nadzieję, że zrozumiałeś teraz jakie ogromne możliwości dają ramki twórcy stron WWW.
2 Część I ♦ Podstawy obsługi systemu WhizBang (Nagłówek strony)
2 G:\DREAM_trans\rozdz09.doc