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:
q Podstawy tworzenia układu ramek
q Tworzenie ramek
q Definiowanie wymiarów i formatowanie ramek
q Tworzenie połączeń między ramkami
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ść.
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>
<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.
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>
Rys. 9.4.
Układ ramek utworzony na podstawie kodu przedstawionego wyżej
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.
Zazwyczaj Dreamweaver pozwala daną rzecz zrobić na kilka sposobów. Dotyczy to także tworzenia ramek. Masz do dyspozycji trzy metody:
q Menu Frameset
q Frame Borders w menu Visual Aids
q 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
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
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 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ę.
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.
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).
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.
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.
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).
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.
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).
Aby zmienić atrybuty znacznika <FRAME> definiującego ramkę, musisz zacząć od zaznaczenia ramki. Wówczas atrybuty staną się dostępne w inspektorze Property.
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).
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.
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:
q 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”.
q Nie stosuj w nazwach znaków specjalnych, takich jak kropki, przecinki, znaki zapytania, itp.
q 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.
...
Wolf-1