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:
q Czym są rozszerzenia i jak rozbudowują możliwości programu Dreamweaver
q Jak korzystać z behawiorów
q Najczęściej stosowane akcje i zdarzenia
q Jak za pomocą menedżera rozszerzeń ściągać i instalować rozszerzenia oraz nimi zarządzać
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ą:
q 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.
q 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.
q 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.
q 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ą.
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 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.
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.
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 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.
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, 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.
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.
Rys. 21.3.
Paleta Behaviors
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:
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
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.
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:
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.
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:
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).
q onAbort (NN3, NN4, IE4, IE5). Zachodzi, gdy użytkownik przerywa ładowanie obrazu, klikając połączenie lub naciskając przycisk Stop przeglądarki.
q onBlur (NN3, NN4, IE3, IE4, IE5). Zachodzi, gdy okno, ramka lub element formularza przestają być zaznaczone.
q onChange (NN3, NN4, IE3, IE4, IE5). Zachodzi, gdy użytkownik zmienia wybór, tekst lub elementy obszaru tekstowego w formularzu.
q onClick (NN3, NN4, IE3, IE4, IE5). Zachodzi, gdy użytkownik klika połączenie lub element formularza.
q onDblClick (NN4, IE4, IE5). Zachodzi, gdy użytkownik dwukrotnie klika dokument, obszar lub połączenie.
q onError (NN3, NN4, IE4, IE5). Zachodzi, gdy w trakcie ładowania dokumentu lub obrazu wystąpi błąd..
q onFocus (NN3, NN4, IE3, IE4, IE5). Zachodzi, gdy użytkownik aktywuje okno, ramkę lub element formularza.
...
Wolf-1