Część VI. Tworzenie witryny dla zaawansowanych
Rozdział 21. Rozszerzenia i Extension Manager
Przypuszczalnie czujesz się już w programie Dreamweaver na tyle swobodnie, że bez trudu potrafisz tworzyć strony, o jakich zawsze marzyłeś. Brak Ci jednak jednej umiejętności - korzystania z rozszerzeń. Rozszerzenia rozbudowują możliwości Dreamweavera, a paleta propozycji jest bardzo szeroka. Znajdziesz w niej behawiory, polecenia, obiekty i inspektory.
W tym rozdziale skupimy się głównie na behawiorach. Behawiory mogą wiele, lecz przede wszystkim pozwalają stronie WWW „coś zrobić”. Aktywne obrazy, ruch warstw czy nawet zmieniający się dynamicznie na warstwie lub w ramce tekst, wszystko to można uzyskać stosując behawiory. Dowiesz się także jak instalować i usuwać rozszerzenia oraz jak nimi zarządzać z pomocą menedżera rozszerzeń (ang. Extension Manager). Oto lista głównych tematów tego rozdziału:
Czym są rozszerzenia i jak rozbudowują możliwości programu Dreamweaver
Jak korzystać z behawiorów
Najczęściej stosowane akcje i zdarzenia
Jak za pomocą menedżera rozszerzeń ściągać i instalować rozszerzenia oraz nimi zarządzać
Czym są rozszerzenia?
Dreamweaver jest jednym z niewątpliwie najmocniejszych i najprostszych w użyciu edytorów kodu źródłowego HTML. Jednak żyjemy w świecie, w którym postęp w dziedzinie oprogramowania i sprzętu komputerowego jest zdumiewająco szybki. Z tą świadomością firma Macromedia wyposażyła program Dreamweaver w możliwości bardzo daleko idącego dostosowywania go do potrzeb użytkownika oraz rozszerzania jego opcji. Kwestia dostosowywania nie jest Ci na pewno obca, natomiast możesz nie wiedzieć jakie implikacje niesie za sobą rozszerzalność. Oznacza ona po prostu możliwość rozbudowania programu ponad jego domyślne, standardowe możliwości. Jednym ze sposobów rozbudowywania programu o nowe opcje jest instalacja i wykorzystanie rozszerzeń (ich nazwa bardzo dobrze oddaje ich funkcje). Wśród różnych typów rozszerzeń są:
Behawiory - te rozszerzenia umożliwiają wprowadzenie na strony WWW życia, poprzez umożliwienie użytkownikowi interakcji z elementami strony oraz umożliwienie samej stronie wykonanie różnych zadań. Behawiory składają się akcji wyzwalanych przez zdarzenia. Lista dopuszczalnych zdarzeń zależy od przeglądarki. Behawiorom poświęcony jest cały ten rozdział, a tworzeniu własnych behawiorów rozdział następny.
Polecenia - polecenia można traktować po części jak makroprocedury. Często stosowane są do automatyzowania powtarzalnych zadań. Ułatwiają także automatyczne wprowadzanie zmian w elemencie lub jego formatowaniu na wszystkich stronach witryny. Chociaż sam proces stosowania polecenia do całej witryny jest dość prosty, skonstruowanie polecenia jest w rzeczywistości bardzo trudne.
Obiekty - stanowią one chyba najbardziej podstawowe rozszerzenia. Są proste w użyciu i w przygotowaniu. Zazwyczaj kliknięcie ikony obiektu powoduje wstawienie obiektu w miejscu aktualnej pozycji punktu wstawiania. W przypadku niektórych obiektów, takich jak obiekt programu Flash, niezbędne jest wpisanie dodatkowych parametrów. Informacje na temat tworzenia własnych obiektów znajdziesz w następnym rozdziale.
Inspektory - jak już wiesz, pewne elementy programu Dreamweaver nazywają się inspektorami. Przykładami inspektorów są Property Inspector lub Code Inspector. Są to okna właściwości, które w sposób graficzny i prosty pozwalają modyfikować lub definiować ustawienia lub też atrybuty elementów składowych strony WWW. Twórcy rozszerzeń często tworzą własne okna właściwości współpracujące ze sobą.
Umiejscowienie rozszerzeń na dysku
Dobrze jest wiedzieć, gdzie na dysku twardym komputera przechowywane są pliki rozszerzeń. Macromedia Extension Manager efektywnie automatyzuje proces instalacji rozszerzeń, ich usuwanie i zmianę stanu aktywacji, lecz czasami i tak konieczna będzie ręczna edycja foldera Configuration.
Jak pokazuje rysunek 21.1, wszystkie rozszerzenia przechowywane są w folderze Configuration, który jest folderem podrzędnym instalacyjnego foldera Dreamweaver 4. Typowa ścieżka dostępu do niego na komputerze działającym pod kontrolą systemu Windows to C:\Program Files\Macromedia\Dreamweaver 4\Configuration.
Rys. 21.1. Struktura foldera Configuration |
|
Zobaczysz w tym katalogu prawdopodobnie ponad dwadzieścia katalogów podrzędnych. Nas interesują katalogi Behaviors i Objects. Schemat organizacyjny pozostałych jest zazwyczaj podobny i nie ma potrzeby omawiania go w szczegółach.
Początek ramki
Uwaga
Zanim zagłębisz się w strukturę folderów, ważne jest, abyś pamiętał o konsekwencjach ewentualnej zmiany zawartości i ulokowania foldera. Możesz w ten sposób zniszczyć niechcący całą konfigurację. Powinieneś zawsze mieć aktualną kopię zapasową foldera Configuration i przechowywać ją w innym ulokowaniu na dysku twardym lub na dyskietce, bądź na innym medium przenośnym. Pozwoli Ci to w sposób szybki i bezbolesny odtworzyć oryginalne ustawienia, gdybyś przez przypadek coś pomieszał.
Koniec ramki
Folder Behaviors
Folder Behaviors zawiera dwa foldery podrzędne: Actions i Events. Zazwyczaj nie będzie potrzeby edycji czy też modyfikacji plików foldera Events. W folderze tym zgromadzone są po prostu informacje o możliwych zdarzeniach dla każdej wersji przeglądarki. W plikach tych zawarte jest także zdarzenie domyślne.
Drugi z folderów, Actions, zawiera pliki HTML i JavaScript poszczególnych behawiorów. Pliki HTML definiują interfejs użytkownika stosowany do konfiguracji i edycji właściwości behawiora. Pliki JavaScript zawierają skrypty, dzięki którym behawior działa tak, jak ma działać. O ile nie masz całkowitej pewności co robisz, nie powinieneś ingerować w zawartość plików JavaScript. Możesz natomiast zmieniać pliki HTML, aby zdefiniować nowy interfejs użytkownika. Chociaż usunięcie informacji o twórcach pliku jest możliwe, byłoby daleko nieetyczne - nie rób więc tego. Także ingerencja w kod niesie ze sobą ryzyko takiej destrukcji, która może dawać nieprzewidywalne efekty lub niepoprawne wyniki.
Początek ramki
Uwaga
Większość twórców rozszerzeń poświęca masę czasu na udoskonalanie interfejsu użytkownika oraz kodu źródłowego rozszerzenia. Jeśli Twoje zamierzone modyfikacje interfejsu nie są spowodowane samą chęcią zmiany, lecz dają efekt, z którego ucieszyliby się także inni użytkownicy, zwróć się do twórców rozszerzenia i zaproponuj wprowadzenie zmian. Zwiększające efektywność działania zmiany projektowe przyniosą pożytek wszystkim użytkownikom.
Koniec ramki
Folder Action może mieć (i domyślnie ma) foldery podrzędne. Najprostszymi przykładami są foldery Set Text i Timeline. Umieszczenie podobnych rozszerzeń w tych katalogach da w wyniku dołączenie pozycji do menu podrzędnego. Ilustruje to rysunek 21.2.
Folder Objects
Folder Objects zawiera wiele folderów podrzędnych, w tym Characters, Common, Forms, Frames, Head, Invisibles, Special i Tools. Liczba folderów podrzędnych może być różna, co zależy od konfiguracji. W każdym z nich znajdują się obiekty określonego typu. Na przykład obiekty domyślne w folderze podrzędnym Common to E-Mail Link, Fireworks HTML, Flash Button, Flash Text, Flash, Generator, HR, Image, Layer, Navigation Bar, Rollover, Shockwave, SSI, Table i Tabular Data. Wszystkie te obiekty są zazwyczaj bardzo często wykorzystywane i dlatego rezydują w folderze Common. Z kolei obiekty z foldera Invisibles (takie jak Anchor, Comment i Script) to elementy, które nie są wyświetlane na stronie i nie są dostępne dla użytkownika końcowego.
Paleta obiektów tworzona jest na bazie tych trzech folderów podrzędnych. Jak widać na rysunku 21.2, poszczególne kategorie dostępne w tej palecie mają swoje odzwierciedlenie w strukturze katalogów foldera \Configuration\Objects.
Rys. 21.2. Paleta obiektów odzwierciedla strukturę foldera Objects |
|
Patrząc na zawartość tych folderów podrzędnych zauważysz zapewne, że większości obiektów przypisane są dwa pliki: plik HTML oraz ikona GIF. Niektóre bardziej złożone obiekty wymagają także interfejsu użytkownika, który umożliwi skonfigurowanie właściwości. Te obiekty mają jeszcze trzeci plik - plik JavaScript. Plik GIF to po prostu ikona, którą klikasz na palecie obiektów, aby wstawić określony obiekt. Plik HTML zawiera, w przypadku podstawowych obiektów, tylko kod HTML potrzebny do dodania znaku lub innego elementu do dokumentu. Natomiast bardziej złożone obiekty przypominają w pewien sposób behawiory - podobieństwo to polega na tym, że plik HTML definiuje interfejs użytkownika i korzysta z pliku JavaScript, aby dynamicznie tworzyć kod HTML potrzebny do wstawienia obiektu. W następnym rozdziale dowiesz się jak tworzyć własne obiekty.
Stosowanie behawiorów
Behawiory stanowią jeden z najważniejszych typów rozszerzeń. Będziesz z nich nieustannie korzystał w swojej codziennej pracy. Czy to będą Twoje własne behawiory, czy też zainstalowane z Macromedia Exchange, działają w ten sam sposób. Elementami składowymi behawiorów są akcja i zdarzenie.
Akcja to ta część behawiora, która określa jego rzeczywiste działanie. Jeśli dołączysz do swojej strony behawior Go to URL, to możliwa w tym przypadku akcja będzie polegała na załadowaniu do okna przeglądarki dokumentu o wskazanym adresie URL. Zdarzenia to czynności, które wyzwalają akcje. Najczęściej są to onClick, onMouseDown i onMouseOut. Większość zdarzeń jest tak oczywista, że nie wymaga wyjaśniania. W dalszej części rozdziału znajdziesz opisy najczęstszych zdarzeń i akcji. Ponieważ wiesz już, co może behawior, zobaczmy jak możesz z niego korzystać na swoich stronach.
Paleta Behaviors
Paleta Behaviors, pokazana na rysunku 21.3, to podstawowa (i jedyna, nie licząc ręcznego wpisywania kodu HTML) metoda wstawiania i zarządzania behawiorami w dokumentach. Aby wyświetlić tę paletę, wybierz z menu Window pozycję Behaviors lub zastosuj skrót Shift+F3. Paleta pozwala dodawać, usuwać i segregować behawiory. Na początku posługiwanie się behawiorami może sprawiać trochę kłopotu, lecz gdy poznasz zasady, natychmiast stanie się to proste.
Początek ramki
Uwaga
Można ukryć wszystkie aktywne palety. Wystarczy nacisnąć F4. Klawisz ten przełącza wyświetlanie palet i jest wyjątkowo użyteczny, szczególnie jeśli pracujesz na małym monitorze.
Koniec ramki
Rys. 21.3. Paleta Behaviors |
|
Dodawanie behawiora
Aby dołączyć behawior do dokumentu HTML, sprawdź najpierw czy paleta Behaviors jest wyświetlana, a następnie naciśnij przycisk ze znakiem plus, (+). Spowoduje to rozwinięcie listy wszystkich aktualnie zainstalowanych behawiorów. Jak zauważysz, pewne z nich są pisane szarą czcionką, inne pisane są czcionką czarną (patrz rysunek 21.4). Stosować można tylko te drugie.
Wynika to z faktu, że paleta Behaviors jest paletą kontekstową, a nie każdy behawior można zastosować do każdego znacznika HTML czy też elementu. W zależności od znacznika przydzielane są inne behawiory, tak więc z tego powodu zawartość listy rozwijanej kliknięciem klawisza + będzie inna. Możesz wykorzystać tę wiedzę definiując pierwszą zasadę stosowania behawiorów: behawiory, które można przydzielić zaznaczonemu w dokumencie znacznikowi HTML wyświetlane są na liście palety Behaviors czcionką koloru czarnego.
Po wybraniu behawiora z listy rozwijanej, wyświetlane jest specyficzne dla niego okno dialogowe. W rzeczywistości jest to interfejs użytkownika, z którego każdy behawior korzysta. Dodaj do tego setki rozszerzeń dostępnych z innych źródeł, a pojmiesz sam, że nie jest możliwe szczegółowe opisanie wszystkich sposobów wprowadzania informacji dla każdego z behawiorów. Te najczęściej stosowane behawiory i ich ustawienia zostały zaprezentowane na końcu tego podrozdziału.
Wiele behawiorów można stosować tylko do znacznika <A> (jest to znacznik, który między innymi, służy do definiowania połączeń między stronami). Czasami (może nawet często) będziesz chciał przydzielić behawior wymagający połączenia do fragmentu tekstu lub do obrazu. Jeśli elementy te nie są już połączeniami, będziesz musiał utworzyć połączenie puste. Są to połączenia, które nigdzie nie prowadzą, natomiast pozwalają na dołączenie behawiorów, które wymagają połączeń. Robisz to wpisując javascript: w polu Link inspektora Property. W ten sposób tekst lub obraz stają się połączeniami, lecz gdy zostaną kliknięte, tak naprawdę nic się nie „zdarza”.
Rys. 21.4. Zastosować można tylko behawiory wyświetlane czarną czcionką |
|
Po skonfigurowaniu właściwości behawiora, naciśnij w jego oknie właściwości przycisk OK. Zauważysz, że behawior pojawi się w oknie palety Behaviors, co pokazuje rysunek 21.5. Jeśli zaznaczysz kolejny element HTML, to okno ulegnie prawdopodobnie wyczyszczeniu, chyba że zaznaczonemu elementowi także przypisano taki sam behawior. Ta obserwacja doprowadza nas do drugiej zasady: w oknie palety Behaviors prezentowane są tylko behawiory stowarzyszone z aktualnie zaznaczonym znacznikiem lub elementem HTML.
Paleta Behaviors działa podobnie jak inspektor Property. Oba narzędzia są kontekstowe i dynamicznie aktualizują możliwe do wyboru lub zmiany opcje w zależności od aktualnie zaznaczonego elementu strony.
Rys. 21.5. Behawiory prezentowane w oknie palety Behaviors są przydzielone zaznaczonemu znacznikowi |
|
Ostatni etap procesu dodawania behawiora do strony obejmuje wybór zdarzenia, które uaktywni behawior. Zdarzenie jest zawsze określane domyślnie, lecz wybór domyślny może nie być odpowiedni w danym przypadku. Aby wskazać inne zdarzenie:
W oknie palety Behaviors zaznacz behawior, dla którego chcesz ustawić zdarzenie.
Kliknij przycisk ze strzałką, zlokalizowany z prawej strony kolumny Events. Wyświetlone zostanie menu prezentujące możliwe zdarzenia.
Wskaż zdarzenie, które ma uruchamiać behawior.
Pewne zdarzenia są obsługiwane tylko w określonych wersjach i typach przeglądarek. Ogranicza to wybór. Na szczęście Dreamweaver pozwala na automatyczną selekcję zdarzeń odpowiednich dla danej wersji i typu przeglądarki, co zabezpiecza przez przypadkowym wyborem zdarzenia nieobsługiwanego w przeglądarkach, w których prezentowana będzie Twoja strona. Aby wyświetlić zdarzenia dla danego typu i wersji przeglądarek, kliknij przycisk + w oknie palety Behaviors lub przycisk ze strzałką w dół, który pojawia się obok kolumny Events (gdy behawior jest zaznaczony). Następnie wybierz z menu pozycję Show Events For. Spowoduje to wyświetlenie menu podrzędnego, takiego jak na rysunku 21.6, które umożliwia przegląd i zmianę kryteriów prezentacji zdarzeń na liście. W ten sposób dochodzimy do trzeciej zasady: zdarzenia pojawiają się na liście tylko wówczas, gdy są obsługiwane przez aktualnie zaznaczoną wersję przeglądarki. Tak więc określaj kryteria doboru zdarzeń, aby odpowiadały one możliwościom przeglądarek użytkowników.
Rys. 21.6. Menu podrzędne Show Events For |
|
Ta opcja jest użyteczna, gdy strona przeznaczona jest zarówno do prezentacji w Internecie, jak i w sieci lokalnej. W sieci lokalnej zazwyczaj wszyscy korzystają z takich samych przeglądarek (na przykład z przeglądarki Internet Explorer 5.5). Natomiast w przypadku witryny prezentowanej w Internecie musisz oprzeć się na wspólnych cechach jak najszerszej grupy przeglądarek (i wybrać pozycję 3.0 and Later Browsers). Powinieneś sobie jednak zdawać sprawę, że wybór ten znacznie ograniczy liczbę dostępnych na liście zdarzeń. Niestety, jest to typowa relacja „coś za coś”.
Pytanie, które będzie Ci stale towarzyszyć, a jeśli nie stale, to przynajmniej w najbliższej przyszłości, dotyczy najniższej wersji przeglądarek, dla której powinieneś projektować swoje strony. Pytania podobnej natury pojawiają się także odnośnie stosowanej rozdzielczości ekranu i głębokości kolorów. Obecnie często słyszy się opinię, że należy strony projektować dla przeglądarek w wersji 3.0 i wyższych, stosować 256 kolorów i rozdzielczość 800x600. Ja sam zaczynałem od projektowania dla przeglądarek w wersji 4.0 i wyższych (chyba, że w konkretnym przypadku wymagania były inne), aby wymusić na użytkownikach sięgnięcie po nowe, szybsze technologie. Odpowiedź na pytanie: „Czy projektować dla wersji 3.0, czy dla wersji 4.0?” jest już w zasadzie znana. Całkowicie bezpiecznie możesz wybrać opcję drugą - wersje 4.0 i wyższe. TheCounter.com prezentuje statystyki dotyczące stosowanych przeglądarek. Jak widać na rysunku 21.7, w październiku 2000 roku tylko 6% zanotowanego ruchu (z ponad 554 milionów odwiedzin) przypadało na przeglądarki inne niż Internet Explorer 4.0+ lub Netscape 4.0+. Chociaż ciągle jest to znaczna liczba użytkowników, możliwości przeglądarek nowszych wersji przeważają nad korzyściami płynącymi z trzymania się zgodności z wersją 3.0.
Rys. 21.7. Statystyka przeglądarek - dane dla października 2000 |
|
Początek ramki
Podpowiedź
Chociaż przedstawione sugestie na temat tworzenia stron są generalnie słuszne, musisz uwzględnić także kwestie geograficzne. Jeśli Twoja strona przeznaczona jest przede wszystkim dla zagranicznych odbiorców, lepiej przyjąć kryterium zgodności z wersjami przeglądarek 3.0 i założyć niższą przepustowość łączy. Tego typu czynniki, o których łatwo zapomnieć, powinny być także uwzględniane przy wyborze stosowanych na stronie elementów.
Koniec ramki
Porządkowanie behawiorów
Po dodaniu kolejnego behawiora, Dreamweaver automatycznie sortuje alfabetycznie ich listę względem kolumny Events, a następnie względem kolumny Actions. Jeśli chcesz, możesz zmienić sposób organizacji behawiorów, aby pewne akcje zachodziły przed innymi. Jest to rzadko praktykowane, ponieważ zazwyczaj akcje są niezależne.
Aby zmienić kolejność behawiorów:
Zaznacz w oknie palety Behaviors ten behawior, którego pozycję w palecie chcesz zmienić.
Kliknij jeden z przycisków ze strzałką w dół lub w górę (znajdziesz je w prawym górnym rogu okna palety).
Kolejność, w jakiej behawiory pojawiają się na liście palety Behaviors jest taka sama jak w kodzie HTML.
Zwróć uwagę, że behawiory muszą być pogrupowane tak jak akcje w palecie Behaviors. Dzieje się tak z kilku powodów, a najważniejszy i chyba najbardziej logiczny powód jest taki, że w danej chwili może wystąpić tylko jedno zdarzenie. Nawet zdarzenia onClick i onDblClick występują osobno. Mieszanie akcji różnych zdarzeń nie miałoby sensu.
Usuwanie behawiorów
W życiu zawsze destrukcja jest szybsza niż tworzenie. Z behawiorami nie jest inaczej. Można je usunąć bez trudu ze strony korzystając z palety Behaviors.
Aby pozbyć się behawiora ze strony:
Zaznacz w oknie palety Behaviors behawior, który chcesz usunąć.
Kliknij przycisk ze znakiem minus, (-), lub klawisz Delete.
Często stosowane zdarzenia
Jak wspomniano, zdarzenie to czynność, która wyzwala akcję. Możesz więc zdarzenie określić mianem aktywatora. Różne przeglądarki obsługują różne zdarzenia. Całe szczęście Dreamweaver pozwala ograniczyć listę wyświetlanych zdarzeń do obsługiwanych przez daną wersję i typ przeglądarki. Poniżej znajdziesz opisy najczęściej stosowanych w Dreamweaverze zdarzeń, wraz z informacją odnośnie ich obsługi przez różne wersje i typy przeglądarek. (Legenda: IE3, 4 i 5 = Internet Explorer, wersje 3.0, 4.0 i 5.0; NN3 i 4 = Netscape Navigator, wersje 3.0 i 4.0).
onAbort (NN3, NN4, IE4, IE5). Zachodzi, gdy użytkownik przerywa ładowanie obrazu, klikając połączenie lub naciskając przycisk Stop przeglądarki.
onBlur (NN3, NN4, IE3, IE4, IE5). Zachodzi, gdy okno, ramka lub element formularza przestają być zaznaczone.
onChange (NN3, NN4, IE3, IE4, IE5). Zachodzi, gdy użytkownik zmienia wybór, tekst lub elementy obszaru tekstowego w formularzu.
onClick (NN3, NN4, IE3, IE4, IE5). Zachodzi, gdy użytkownik klika połączenie lub element formularza.
onDblClick (NN4, IE4, IE5). Zachodzi, gdy użytkownik dwukrotnie klika dokument, obszar lub połączenie.
onError (NN3, NN4, IE4, IE5). Zachodzi, gdy w trakcie ładowania dokumentu lub obrazu wystąpi błąd..
onFocus (NN3, NN4, IE3, IE4, IE5). Zachodzi, gdy użytkownik aktywuje okno, ramkę lub element formularza.
onHelp (IE4, IE5). Zachodzi, gdy użytkownik klika przycisk wywoływania pomocy przeglądarki lub wybiera odpowiednią pozycję w jej menu.
onKeyDown (NN4, IE4, IE5). Zachodzi, gdy użytkownik naciska klawisz przy zaznaczonym dokumencie, obszarze tekstowym lub połączeniu.
onKeyPress (NN4, IE4, IE5). Zachodzi, gdy użytkownik wciska i przytrzymuje klawisz.
onKeyUp (NN4, IE4, IE5). Zachodzi, gdy użytkownik zwalnia klawisz przy zaznaczonym dokumencie, obszarze tekstowym lub połączeniu.
onLoad (NN3, NN4, IE3, IE4, IE5). Zachodzi, gdy zakończy się ładowanie dokumentu do okna przeglądarki.
onMouseDown (NN4, IE4, IE5). Zachodzi, gdy użytkownik naciska klawisz myszki wskazując przycisk, dokument lub połączenie.
onMouseMove (IE3, IE4, IE5). Zachodzi, gdy użytkownik przesuwa wskaźnik myszki wskazując określony element.
onMouseOut (NN3, NN4, IE4, IE5). Zachodzi, gdy użytkownik przesuwa wskaźnik myszki poza określony obszar (na przykład obrazu lub połączenia tekstowego).
onMouseOver (NN3, NN4, IE3, IE4, IE5). Zachodzi, gdy użytkownik przesuwa wskaźnik myszki nad określony obszar (na przykład obrazu lub połączenia tekstowego).
onMouseUp (NN4, IE4, IE5). Zachodzi, gdy użytkownik zwalnia klawisz myszki wskazując przycisk, dokument lub połączenie.
onMove (NN4). Zachodzi, gdy użytkownik lub skrypt przesuwają okno lub ramkę.
onreadyStateChange (IE4, IE5). Zachodzi, gdy zmienia się właściwość ReadyState. Pozwala monitorować stan pobierania danych, bez ciągłego sprawdzania wartości właściwości ReadyState.
onReset (NN3, NN4, IE3, IE4, IE5). Zachodzi, gdy polom formularza przywracane są domyślne wartości.
onResize (NN4, IE4, IE5). Zachodzi, gdy użytkownik lub skrypt zmieniają rozmiary okna lub ramki.
onScroll (IE4, IE5). Zachodzi, gdy użytkownik lub skrypt przewijają dokument.
onSelect (NN3, NN4, IE3, IE4, IE5). Zachodzi, gdy użytkownik zaznacza fragment tekstu w polu edycyjnym formularza.
onSubmit (NN3, NN4, IE3, IE4, IE5). Zachodzi, gdy użytkownik przesyła formularz.
onUnload (NN3, NN4, IE3, IE4, IE5). Zachodzi, gdy użytkownik zamyka okno lub przystępuje do załadowania innej strony.
Często stosowane akcje
Skoro dowiedziałeś się, jakie masz do dyspozycji zdarzenia wyzwalające określone akcje, opiszmy behawiory dołączone do wersji 4 programu Dreamweaver:
Call JavaScript - umożliwia wykonanie wyrażenia JavaScript w momencie wystąpienia określonego zdarzenia.
Change Property - zmienia wartość właściwości obiektu (na przykład kolor tła warstwy lub akcje formularza).
Check Browser - umożliwia odesłanie użytkowników do stron o adresach URL, które wskażesz, w zależności od typu i wersji zainstalowanych na ich komputerach przeglądarek. Często umieszczany w sekcji BODY prostej strony początkowej, która będzie działać w każdej przeglądarce obsługującej zdarzenie onLoad.
Check Plugin - umożliwia odesłanie użytkowników do różnych wersji strony, w zależności od tego, czy mają zainstalowane moduły dodatkowe. Na przykład użytkownicy, u których zainstalowany jest moduł Flash, zostaną skierowani do wersji zawierającej obiekty programu Flash, a pozostali - do wersji HTML.
Control Shockwave or Flash - umożliwia sterowanie odtwarzaniem sekwencji wideo. Pozwala włączać odtwarzanie, zatrzymywać je, przewijać sekwencję oraz przechodzić do określonej jej klatki.
Drag Layer - umożliwia przeciąganie warstwy. Jest szczególnie przydatny do tworzenia układanek sieciowych, tzw. puzzli. Atrybuty pozwalają wskazać kierunek przesuwania (na przykład tylko w pionie lub tylko w poziomie) oraz włączyć opcję dosuwania warstwy do obiektów.
Go to URL - umożliwia otwarcie nowej strony w bieżącym oknie lub we wskazanej ramce.
Jump Menu - zazwyczaj Ty nie będziesz samodzielnie dodawał tego behawiora. Robi to automatycznie Dreamweaver, gdy wstawiasz menu nawigacyjne korzystając z polecenia Jump Menu w menu podrzędnym Form Objects menu Insert.
Jump Menu Go - pozwala stowarzyszyć z menu nawigacyjnym przycisk Go. Zazwyczaj przycisk ten nie jest potrzebny, ponieważ wybranie określonej pozycji menu nawigacyjnego powoduje załadowanie strony o odpowiadającym jej adresie URL.
Open Browser Window - umożliwia otwarcie dokumentu o adresie URL w nowym oknie przeglądarki o zdefiniowanych atrybutach.
Play Sound - umożliwia odtworzenie dźwięku w efekcie wystąpienia określonego zdarzenia (np. przy kliknięciu połączenia lub w trakcie ładowania strony).
Popup Message - powoduje wyświetlenie okna komunikatów zawierającego tylko przycisk OK. Nadaje się więc do informowania i oznajmiania, a nie do dokonywania wyboru. W tekście komunikatu można osadzić dowolne wyrażenie JavaScript, umieszczając je w nawiasach klamrowych, {}.
Preload Images - powoduje załadowanie do pamięci podręcznej przeglądarki tych obrazów, które nie są natychmiast potrzebne i nie są ściągane domyślnie. Najlepszy przykład stanowią tu obrazy interaktywne. Dzięki ich wstępnemu załadowaniu, przeglądarka nie musi ponownie nawiązywać połączenia, gdy użytkownik umieści wskaźnik myszki nad obrazem.
Set Nav Bar Image - powoduje przekształcenie obrazu w pasek nawigacji i działa w połączeniu z opcją Navigation Bar. Aby wstawić pasek nawigacji, wybierz pozycję Navigation Bar w menu podrzędnym Interactive Images menu Insert.
Set Text of: Frame, Status Bar, Layer i Text Field - te behawiory pozwalają dynamicznie zmieniać zawartość tekstową i formatowanie określonego elementu (ramki, paska stanu, warstwy i pola tekstowego).
Show-Hide Layers - pozwala wyświetlić lub ukryć warstwę lub grupę warstw oraz przywrócić domyślne ustawienia widzialności.
Swap Image - umożliwia zastąpienie obrazu innym, poprzez zmianę atrybutu Src znacznika <img>.
Swap Image Restore - przywraca obraz oryginalny, który został zastąpiony innym w wyniku działania behawiora Swap Image. Jest automatycznie dodawany wraz z behawiorem Swap Image.
Go To Timeline oraz Play Timeline i Stop Timeline - umożliwiają przejście do określonej klatki linii czasowej oraz włączenie i zatrzymanie odtwarzania linii czasowej.
Validate Form - sprawdza zawartość wskazanych pól tekstowych formularza w celu określenia poprawności wprowadzonych przez użytkownika danych. Możesz kontrolować kolejne pola tekstowe - łącząc behawior w parze ze zdarzeniem onBlur dla danego pola, lub sprawdzać cały formularz, gdy użytkownik klika przycisk Submit (w tym przypadku korzystając ze zdarzenia onSubmit).
Extension Manager
Extension Manager - menedżer rozszerzeń - pokazany na rysunku 21.8, został wprowadzony po wypuszczeniu wersji 3 programu Dreamweaver. Wsparty witryną Macromedia Exchange stał się standardem instalacji rozszerzeń i zarządzania nimi. Wersja 4 programu Dreamweaver jest już wyposażona w menedżera rozszerzeń, który obsługuje rozszerzenia programów Dreamweaver, Dreamweaver UltraDev i Flash. W przyszłości ten innowacyjny program towarzyszący zostanie bez wątpienia dołączony także do innych produktów.
Rys. 21.8. Extension Manager |
|
Ściąganie i instalacja rozszerzeń
Przed wprowadzeniem menedżera rozszerzeń, większość rozszerzeń była dostępna tylko w postaci plików .zip na stronach autorów. Aby skorzystać z rozszerzenia, konieczna była ręczna ekstrakcja niezbędnych plików do odpowiednich katalogów. Usunięcie rozszerzenia lub wyłączenie go sprowadzało się do ręcznego usunięcia pliku rozszerzenia lub przesunięcia go poza katalog.
Po pojawieniu się menedżera rozszerzeń i witryny Exchange, autorzy powoli zaczęli stosować dla swoich rozszerzeń nowy format .mxp. Chociaż ostatniego roku witryna Exchange przejęła szturmem świat rozszerzeń, niektórzy nadal oferują rozszerzenia do ściągnięcia na swoich stronach WWW. Zajmiemy się oboma źródłami rozszerzeń - zaglądniemy zarówno do Macromedia Exchange, jak i na prywatne strony, na których znajdziesz potrzebne Ci rozszerzenia.
Macromedia Exchange
Macromedia Exchange to na razie najpopularniejsze źródło rozszerzeń. Aby do niego dotrzeć, skieruj przeglądarkę pod adres www.macromedia.com/exchange/ lub wybierz w oknie Extension Manager pozycję Go To Macromedia Exchange z menu File. Wybierając połączenie Macromedia Exchange for Dreamweaver wejdziesz na stronę poświęconą programowi Dreamweaver. Znajdziesz tu informacje na temat rozszerzeń, same rozszerzenia oraz narzędzie wyszukiwania, które pozwoli Ci znaleźć potrzebne rozszerzenie. Exchange chlubi się, że jest tu do ściągnięcia parę setek rozszerzeń różnych kategorii. Lista kategorii obejmuje następujące pozycje: Accessibility (ułatwienia), App Servers (serwery aplikacji), Browsers (przeglądarki), DHTML/Layers (DHTML/warstwy), Fireworks, Flash Media, Learning (nauka), Navigation (nawigacja), Productivity (aplikacje biurowe), Rich Media (multimedia), Scripting (skrypty), Security (zabezpieczenia), Style/Format (styl/format), Tables (tabele), Text (tekst) i eCommerce (e-komercja).
Są dwa sposoby efektywnego znajdywania rozszerzeń. Pierwsza metoda jest bardziej skuteczna, jeśli znasz nazwę rozszerzenia lub mniej więcej wiesz jak mogłoby się ono nazywać. W tym przypadku wpisujesz w polu tekstowym, z prawej strony okna, szukany łańcuch znaków i naciskasz przycisk Go (patrz rysunek 21.9). W procedurze wyszukiwania uwzględniane są wszystkie kategorie.
Rys. 21.9. Szukanym behawiorem jest Open Picture Window Fever! |
|
Początek ramki
Uwaga
Możesz także kliknąć połączenie Advanced Search i precyzyjniej zdefiniować kryteria wyszukiwania, takie jak typ rozszerzenia, kategoria czy nawet ocena (w skali od 1 do 5), jaką rozszerzenie otrzymało.
Koniec ramki
Druga metoda polega na przeglądnięciu określonych kategorii. Aby wyświetlić rozszerzenia danej kategorii, wybierz kategorię z menu rozwijanego browse extensions. Zostaniesz automatycznie przeniesiony do listy rozszerzeń wybranej kategorii, takiej jak ta z rysunku 21.10, z której możesz ściągnąć żądane rozszerzenie. Każde z rozszerzeń ma swoją grupę dyskusyjną, do której można dotrzeć wybierając połączenie z nazwą rozszerzenia. Daje Ci to wspaniałą okazję do podzielenia się z innymi wiedzą na temat rozszerzenia lub skorzystania z doświadczeń pozostałych użytkowników.
Rys. 21.10. Kategoria DHTML/Layers |
|
Początek ramki
Podpowiedź
Niezależnie od metody, przedstawione w tabeli dane możesz sortować klikając nagłówek kolumny.
Koniec ramki
Witryny specjalistów od rozszerzeń
Specjaliści od rozszerzeń - każdy, kto zna któregoś z reprezentantów tej nielicznej grupy, docenia i szanuje ich wkład w rozwój społeczności Dreamweavera. Są to mężczyźni i kobiety, którzy tworzą rozszerzenia używane przez nas codziennie. Pomagając zachować poczucie przynależności do społeczności dreaweaverowej, zazwyczaj oferują efekty własnej pracy za darmo. Przed utworzeniem witryny Exchange, rozszerzenia były dostępne na stronach ich osobistych witryn. Nierzadko lista zakładek obejmowała 20 lub więcej adresów, gdzie można było znaleźć różnego rodzaju rozszerzenia.
Dzisiaj ta lista jest krótsza, lecz nadal --> istnieje[Author:r] . Natura tych stron jest bardzo różna - ja mogę jedynie zapewnić, że rozszerzenia są wartościowe. Jeśli nie znajdziesz tego, czego szukasz, na stronach Exchange, witryny prywatne stanowią nieocenione źródło.
Instalacja rozszerzeń
Nie zależnie od tego, z jakiego źródła rozszerzeń korzystasz, pobrane rozszerzenie musisz zainstalować. Instalacja jest szybka i prosta. Aby zainstalować ściągnięte rozszerzenie:
Sprawdź czy menedżer rozszerzeń jest zainstalowany, czy program Dreamweaver został zamknięty, a rozszerzenie, które chcesz zainstalować, ściągnięte. Kliknij dwukrotnie nazwę pliku .mxp, który chcesz instalować.
Powinno ukazać się okno dialogowe Macromedia Extension Manager prezentujące informacje o prawach autorskich. Przeczytaj je i kliknij przycisk Accept, jeśli chcesz kontynuować.
Wyświetlone zostanie zawiadomienie o pomyślnym zainstalowaniu rozszerzenia, a rozszerzenie zostanie dodane do listy pozostałych rozszerzeń.
Jeśli Dreamweaver jest uruchomiony, zamknij go i uruchom ponownie, aby uwzględnione zostały wprowadzone modyfikacje.
Ćwiczenie 21.1. Ściąganie i instalowanie behawiora
Skoro już odkryłeś Exchange, spędzisz prawdopodobnie parę popołudni przeglądając rozszerzenia, które mógłbyś ewentualnie ściągnąć. Być może będziesz próbował ściągać rozszerzenia, aby sprawdzić swoje umiejętności. Na tym właśnie skupimy się w tym ćwiczeniu. Ściągniesz i zainstalujesz rozszerzenie JustSo Picture Window stworzone przez Michaela Brandta.
Uruchom ulubioną przeglądarkę i wpisz w polu adresu URL www.macromedia.com/exchange/dreamweaver/. Być może konieczne będzie zarejestrowanie się w systemie. Jeśli nie masz nazwy użytkownika i hasła, rozpocznij od tej strony proces rejestracji (wejdź w połączenie Get a Macromedia ID - przypis tłum.).
Rozszerzenie, którego szukasz, znajduje się w kategorii Productivity. Wybierz tę właśnie pozycję z menu rozwijanego Browse Extensions, jak pokazuje rysunek 21.11.
Rys. 21.11. Lista Browse Extensions, z której można wybrać kategorię rozszerzeń |
|
W trakcie prac nad książką rozszerzenie JustSo Picture Window dostępne było w kategorii Productivity, w grupie 41-60 (patrz rysunek 21.12). Gdy go znajdziesz, kliknij nazwę. W przypadku kłopotów z odszukaniem rozszerzenia, wpisz w polu tekstowym Search Extensions wyraz picture i naciśnij przycisk Go. Odszukanych zostanie tylko kilka rozszerzeń, w tym także JustSo Picture Window.
Wyświetlona zostanie strona WWW rozszerzenia. Aby ściągnąć plik .mxp, wymagany przez menedżera rozszerzeń do instalacji rozszerzenia, kliknij w sekcji Download Extension ikonę odpowiadającą systemowi operacyjnemu Twojego komputera (Windows lub Macintosh). Aby ułatwić sprawę, zapisz plik .mxp na pulpicie.
Aby zainstalować rozszerzenie, zamknij program Dreamweaver, a następnie kliknij dwukrotnie (lub w inny sposób otwórz) plik .mxp. Spowoduje to automatyczne uruchomienie menedżera rozszerzeń, który wyświetli informacje o prawach autorskich (patrz rysunek 21.13). Zaakceptuj je, aby zainstalować rozszerzenie.
Rys. 21.12. Jeśli nie możesz znaleźć zaznaczonego na rysunku rozszerzenia, skorzystaj z narzędzia Search Extension |
|
Rys. 21.13. Przeczytaj informacje o prawach autorskich! |
|
Dreamweaver wyświetli komunikat o prawidłowym zainstalowaniu rozszerzenia. Możesz teraz zamknąć menedżera rozszerzeń, uruchomić Dreamweavera i korzystać z rozszerzenia.
Zarządzanie rozszerzeniami
Po zainstalowaniu wszystkich rozszerzeń, które chciałbyś mieć u siebie, czeka Cię straszne zadanie obsługi rozszerzeń. Tak naprawdę, to nie jest ono straszne - mógłbyś nawet nie kiwnąć palcem! Najprostsza droga do centrum zarządzania rozszerzeniami wiedzie przez menu Commands i jego pozycję Manage Extensions. Otwierasz w ten sposób menedżera rozszerzeń.
Sortowanie rozszerzeń
Posortowanie rozszerzeń może się przydać, jeśli lista zainstalowanych rozszerzeń jest długa. Aby sprawdzić, która z wersji jest nowsza, uporządkuj rozszerzenia według autora czy nawet typu rozszerzenia.
Aby posortować rozszerzenia, otwórz menedżera rozszerzeń i wybierz z rozwijanego menu aplikacji pozycję Dreamweaver 4. Następnie kliknij nagłówek kolumny, według której chcesz uporządkować rozszerzenia. Rozszerzenia zostaną posortowane w porządku zstępującym względem wybranej kategorii. Ponowne kliknięcie tego samego nagłówka odwraca porządek sortowania (na wstępujący). Rysunek 21.14 prezentuje kolumny, które można stosować jako kryterium sortowania. Kategorie te są także wymienione poniżej:
On/Off - znaczniki w tej kolumnie oznaczają, że rozszerzenie jest aktywne.
Installed Extension - tu pojawiają się nazwy rozszerzeń.
Version - ta kolumna prezentuje numery wersji rozszerzeń.
Type - typ rozszerzenia (obiekt, behawior, polecenie, itp.).
Author - kolumna prezentuje autorów rozszerzeń.
Włączanie i wyłączanie rozszerzeń
Możliwość wyłączenia rozszerzenia okazuje się czasami bardzo przydatna. Jeśli na przykład zainstalowałeś bardzo dużo rozszerzeń, wyłączenie części z nich przyspieszy pracę Dreamweavera. Wyłączone rozszerzenia są ponownie archiwizowane i umieszczane w folderze podrzędnym foldera Configuration.
Znacznik w kolumnie On/Off wskazuje, że rozszerzenie jest aktualnie aktywne. Brak znacznika świadczy o tym, że zostało ono wyłączone. Umieszczając znacznik w polu obok nazwy rozszerzenia lub usuwając go, możesz włączać lub wyłączać rozszerzenie. Operacje te można także przeprowadzać zaznaczając nazwę rozszerzenia i naciskając klawisz spacji.
Rys. 21.14. Sortowanie kolumn według typu rozszerzenia |
|
Przesyłanie rozszerzeń
Jeśli chcesz i potrafisz, możesz tworzyć własne rozszerzenia. To, czy będziesz się nimi dzielił z resztą świata, zależy potem tylko od Ciebie. Jednak Macromedia ułatwia Ci zadanie. Aby przesłać rozszerzenie, musisz je oczywiście mieć i musi być ono zarchiwizowane zgodnie z dokumentacją firmy Macromedia (w następnym rozdziale także zajmujemy się tworzeniem własnych rozszerzeń i zawarte tam informacje przydadzą Ci się w tym procesie). Po stworzeniu, przetestowaniu i zapakowaniu rozszerzenia do pliku .mxp, wybierz z menu File okna menedżera rozszerzeń pozycję Submit Extension. Zostaniesz przeniesiony do witryny Exchange. Aby kontynuować, musisz wprowadzić swoje hasło. Hasło wymaga ponownego wprowadzenia, nawet jeśli było ono poprzednio zapamiętane. Rysunek 21.15 prezentuje pozostałą część procesu. Także na stronach witryny znajdziesz opis całej procedury.
Chcę bardzo mocno podkreślić, że kwestia solidnego przetestowania rozszerzenia ma zasadnicze znaczenie i wpływa na przyjęcie Twojego rozszerzenia. Testuj rozszerzenie w różnych przeglądarkach i na wielu platformach. Gdy jesteś pewien jego stabilności, zareklamuj je na serwerach grup dyskusyjnych Macromedia, w sekcji poświęconej programowi Dreamweaver, prosząc o pomoc w odszukaniu błędów w Twoim kodzie, abyś mógł przesłać rozszerzenie na strony Exchange.
Rys. 21.15. Przesyłanie rozszerzenia |
|
Importowanie rozszerzeń
Menedżer rozszerzeń pozwala importować rozszerzenia z innych instalacji programu Dreamweaver. Możesz też zainstalować rozszerzenia z innych aplikacji Macromedia, które korzystają z podobnych rozszerzeń, na przykład z programu Dreamweaver UltraDev.
Aby zaimportować rozszerzenia do bieżącej instancji programu Dreamweaver:
Sprawdź w oknie menedżera rozszerzeń, czy z menu rozwijanego wybrana została pozycja Dreamweaver 4. Następnie wybierz z menu File pozycję Import Extensions.
Z listy Product to Import From wybierz program stanowiący źródło importowanego rozszerzenia. Następnie przyciśnij przycisk Browse, by znaleźć katalog instalacyjny żądanego programu. Powinien to być katalog instalacyjny, a nie folder przechowujący konfigurację.
Naciśnij OK.
Wyświetlone zostanie okno Import Extensions, takie jak na rysunku 21.16. Zaznacz wszystkie rozszerzenia, które chcesz zaimportować i naciśnij przycisk Import.
Jeśli chcesz zmienić program, którego rozszerzenia importujesz, kliknij przycisk Product.
Rys. 21.16. Importowanie rozszerzeń |
|
Odinstalowywanie rozszerzeń
W pewnych okolicznościach może być konieczne odinstalowanie pewnych rozszerzeń. Menedżer rozszerzeń udostępnia elegancki sposób całkowitego usunięcia rozszerzeń, które zostały przez niego zainstalowane.
Aby nieodwołalnie usunąć rozszerzenie z programu Dreamweaver:
Sprawdź w oknie menedżera rozszerzeń czy z menu rozwijanego wybrana została pozycja Dreamweaver 4.
Zaznacz na liście rozszerzeń rozszerzenie, które chcesz usunąć.
Wybierz z menu File pozycję Remove Extension. Możesz także skorzystać ze skrótu Ctrl+R, nacisnąć klawisz Delete lub kliknąć ikonę Remove Extension na pasku narzędzi.
Potwierdź operację usunięcia rozszerzenia.
Podsumowanie
Ten rozdział poświęcony był kwestii efektywnego wykorzystania rozszerzeń na stronach WWW, ze specjalnym uwzględnieniem behawiorów. Przejrzeliśmy behawiory, które są dostarczane wraz z programem Dreamweaver. Odwiedziliśmy też te miejsca w sieci, z których można ściągnąć nowe behawiory. Mówiliśmy również o menedżerze rozszerzeń. Omawiane zagadnienia obejmowały wszystko, począwszy od instalacji i zarządzania rozszerzeniami, po ich usuwanie. Wreszcie, sporo miejsca poświęciliśmy najczęściej używanym zdarzeniom i behawiorom.
2 Część I ♦ Podstawy obsługi systemu WhizBang (Nagłówek strony)
2 G:\DREAM_trans\rozdz21.doc
tu autor umieszcza odwołanie do dodatku A - nieadekwatne, więc wywalam.