Behawiory, czyli ożywiamy Fireworks

W tym rozdziale:

u      Wykorzystywanie behawiorów.

u      Tworzenie przycisków reagujących na zdarzenia myszy (rollovers).

u      Wykorzystanie palety URL.

u      Eksportowanie rolloverów do wykorzystania w Internecie.

u      Praca w oknie Button Editor.

u      Tworzenie rozdzielnych rolloverów.

u      Tworzenie zewnętrznych rolloverów.

u      Umieszczanie rolloverów w plastrach.

Z perspektywy użytkownika w Internecie można znaleźć dwa typy grafiki: obrazki, któ­re można oglądać i takie, na które można oddziaływać. W większości programów gra­ficz­nych udaje się tworzyć wiele różnych obrazków typu "oglądaj, ale nie dotykaj", zaś Fire­works jest jednym z kilku programów, w których można tworzyć grafikę interaktywną.

W rezultacie projektowania interaktywnej grafiki może powstać skomplikowana kom­bi­na­cja grafiki i kodu, ale Fireworks upraszcza cały proces za pomocą behawiorów. Używając behawiorów w Fireworks możesz tworzyć całą gamę elementów interak­tyw­nych: od prostych rolloverów (elementów reagujących na zdarzenia myszy) do bardziej zło­żonych interakcji, w których obszar aktywny znajdujący się w jednej lokalizacji, mo­że uruchamiać rollover położony zupełnie gdzie indziej i jednocześnie wyświetlać ko­mu­nikat w pasku stanu przeglądarki. Wszystko to możesz wykonać w Fireworks, nie pi­sząc ani jednego wiersza kodu.

Ten rozdział opisuje wszystkie zawiłości dotyczące korzystania z behawiorów oraz nie­które techniki umożliwiające łączenie ze sobą większych ilości różnych behawiorów. Być może jeszcze nigdy nie wykorzystałeś żadnego z behawiorów Fireworks, ale gdy zacz­niesz ich używać, Twoje strony już nigdy nie będą takie same.

Podstawowe wiadomości o behawiorach

Zanim pojawił się Fireworks, tworzenie stron WWW, które reagowałyby na działania użyt­kow­nika, wymagało od projektanta umiejętności zaawansowanego programowania lub po­sia­dania edytora HTML (takiego jak Macromedia Dreamweaver), potrafiącego zau­to­ma­tyzować ten proces. Zwykła strona WWW napisana w HTML-u jest dość statyczna; je­dy­nymi elementami, z którymi może współpracować użytkownik są formularze. Aby oży­wić Twoją stronę, musisz użyć bardziej zaawansowanego języka programowania. Języ­kiem najczęściej wykorzystywanym przez projektantów internetowych jest Java­Script, gdyż jest on obsługiwany przez obie najważniejsze przeglądarki. JavaScript nie jest tak trudny jak na przykład C++, ale i tak większość projektantów nie ma czasu lub zdol­ności potrzebnych do jego opanowania. Teraz, gdy Fireworks umożliwia łączenie beha­wiorów z grafiką, projektanci nie muszą w ogóle znać JavaScript.

Każdy behawior składa się z dwóch części: zdarzenia (ang. event) i akcji (ang. action). Zda­rzenie jest elementem uruchamiającym akcję. Można je porównać do przycisku "Play", który służy do włączania odtwarzania taśmy wideo. Zdarzenia w Internecie mo­gą być wynikiem działania użytkownika, wywołanego przez umieszczenie kursora nad obraz­kiem, lub "automatyczne", na przykład zakończenia ładowania strony. Akcje mogą być bardzo różne - od wyświetlania prostych komunikatów do otwierania nowych okien przeglądarki.

Behawior musi zostać przydzielony do określonego elementu znajdującego się na stro­nie WWW, na przykład łącza tekstowego lub obrazka. W Fireworks behawiory są zaw­sze przy­dzielane do plastrów lub obszarów aktywnych. Behawiory podobne do wyko­rzys­tywanych w Fireworks można znaleźć także w innych programach firmy Macro­me­dia, takich jak Dreamweaver i Director.

O behawiorach można myśleć jak o formacie Encapsulated JavaScript. Jako projektant bę­dziesz musiał podjąć jedynie kilka kluczowych decyzji, na przykład które dwa obraz­ki mają być podmieniane, zaś Fireworks zajmie się resztą i wygeneruje ca­ły potrzebny kod w wybranym przez Ciebie stylu HTML. W Fireworks możesz generować ko­dy przeznaczone dla różnych edytorów WWW, takich jak Dreamweaver. Zanim jed­nak będziesz mógł wyeksportować obrazki i kody związanych z nimi behawiorów, naj­pierw musisz je przydzielić do elementów graficznych za pomocą palety Behaviors

Paleta Behaviors

Paleta Behaviors służy do dodawania i usuwania behawiorów. Mimo że każdy z nich po­siada własne okno dialogowe, które pozwala na wybranie opcji i zdefiniowanie odpo­wied­nich parametrów, w palecie Behaviors znajdziesz podstawowe informacje o wszys­tkich przydzielonych behawiorach. Do jednego plastra lub obszaru aktywnego możesz przy­dzielić wiele behawiorów (kilka takich samych lub różnych). Liczba behawiorów, jaka może zostać przydzielona do jednego obiektu internetowego nie jest niczym ogra­ni­czona.

W Fireworks znajdziesz pięć różnych behawiorów:

u      Simple Rollover (Prosty rollover). Automatycznie zamienia obrazek z klatki Fra­me 1 na obrazek z klatki Frame 2, gdy użytkownik umieści nad obrazkiem kur­sor. Opcjonalnie można także przełączać obrazki, które znajdują się w in­nych klatkach, na przykład trzeciej i czwartej.

u      Swap Image (Swap Image Restore) (Zamień obrazek/Przywróć obrazek). Za­mie­nia jeden obrazek na inny. Podmieniane obrazki mogą znajdować się w in­nych klatkach lub nawet w innych plastrach. W każdym z plastrów, które znaj­du­ją się w dokumencie, można podmieniać również zewnętrzne obrazki. Beha­wior Swap Image Restore automatycznie przywraca oryginalny stan zamienianego obrazka.

u      Set Nav Bar Image (Nav Bar Over, Nav Bar Down, Nav Bar Restore) (Ustaw obra­zek paska nawigacyjnego (Pasek nawigacyjny pod kursorem, Wciśnięty pa­sek nawigacyjny, Przywróć obrazek paska nawigacyjnego). Grupa beha­wio­rów definiujących stany elementów paska nawigacyjnego, które znajdują się w za­znaczonych plastrach.

u      Set Pop-up Menu (Wyświetl listę rozwijaną). Behawior tworzy listę rozwijaną na stronie WWW.

u      Set Text of Status Bar (Wyświetl tekst w pasku stanu). Wyświetla komunikat w pasku stanu przeglądarki.

Centrum zarządzania behawiorami znajduje się w palecie Behaviors (rysunek 21.1). Aby wyświetlić lub ukryć paletę Behaviors, wybierz z menu polecenie Window Be­ha­viors, użyj skrótu klawiaturowego Shift+F3 lub kliknij za­kład­kę palety. Paleta Behaviors umożliwia dodawania lub usuwanie behawiorów z zazna­czo­nych plastrów lub obszarów aktywnych. Wyświetlane są w niej także wszystkie beha­wio­ry, które już wcześniej zostały dodane do zaznaczonego obiektu. Gdy po dodaniu beha­wiora do obszaru aktywnego lub plastra zaznaczysz ten obiekt ponownie, paleta Beha­viors umożliwi Ci usunięcie behawiora lub zmodyfikowanie jego parametrów.

Przydzielanie behawiorów

Jak zostało wspomniane wcześniej, behawiory są przydzielane do obiektów in­ter­netowych Fireworks: obszarów aktywnych i plastrów. Musisz wiedzieć, że obszary aktyw­ne mogą tylko uruchamiać zdarzenia i nie pozwalają na wykonywanie żadnych ak­cji. Plastry z kolei mogą zarówno uruchamiać, jak i otrzymywać zdarzenia.

W praktyce oznacza to, że obszary aktywne mogą być używane jedynie wraz z beha­wio­rem Set Text of Status Bar; wszystkie inne behawiory pracują tylko z plastrami. Mo­żesz jednak użyć obszaru aktywnego do uruchamiania akcji wykonywanych w plas­trach, co zostanie opisane w podrozdziale "Rollovery w obszarach aktywnych".

Oto typowa procedura przydzielania behawiorów do obiektów internetowych:

1. Zaznacz obszar aktywny lub plaster, do którego chcesz przydzielić behawior.

2. Wybierz z menu polecenie Window Behaviors lub użyj skrótu klawiaturowego Shift+F3, aby otworzyć paletę Behaviors. Jeśli paleta ta jest wyświetlana na ekranie w grupie innych palet, możesz ją również wy­świe­tlić poprzez kliknięcie zakładki.

3. Kliknij przycisk Add Action (znak plus) i wybierz odpowiedni behawior z listy roz­wi­janej.

Zostanie otwarte okno dialogowe, specyficzne dla wybranego behawiora.

4. Zdefiniuj odpowiednie opcje behawiora i kliknij przycisk OK

W palecie Behaviors zostanie wyświetlona nazwa nowo przydzielonego beha­wiora.

Modyfikowanie behawiorów

Aby zmodyfikować behawior przydzielony do obszaru aktywnego lub plastra, zaznacz ten obiekt w oknie dokumentu i kliknij dwukrotnie nazwę behawiora wyświetlaną w pa­le­cie Behaviors. Fireworks wyświetli okno dialogowe wybranego behawiora, w którym bę­dziesz mógł zmodyfikować jego ustawienia.

Oprócz możliwości zmiany ustawień behawiora, możesz również zdefiniować inną ak­cję uruchamiającą go. Domyślnie Fireworks do wszystkich akcji przydziela zdarzenie onMouseOver. Oto lista dostępnych zdarzeń:

u      onMouseOver (Najechanie myszą). Akcja jest uruchamiana, gdy użytkownik prz­esunie kursor nad obrazek.

u      onMouseOut (Usunięcie myszy). Akcja jest uruchamiana, gdy użytkownik prze­sunie kursor z obszaru obrazka w inne położenie.

u      onClick (Kliknięcie). Akcja jest uruchamiana, gdy użytkownik kliknie obra­zek.

u      onLoad adowanie). Akcja jest uruchamiana po zakończeniu ładowania strony.

Po zaznaczeniu behawiora w liście palety Behaviors, po prawej stronie nazwy zda­rze­nia wyświetlany jest przycisk rozwijanego menu Event (strzałka skierowana w dół). Klik­nięcie tego przycisku umożliwia wybranie z menu nowego zdarzenia (rysunek 21.2).

Usuwanie behawiorów

Usunięcie behawiora powoduje utratę wszystkich zdefiniowanych dla niego ustawień.

Aby usunąć behawior:

1. Zaznacz obszar aktywny lub plaster, z którego chcesz usunąć behawior.

2. Z listy behawiorów wyświetlanej w palecie Behaviors wybierz ten, który chcesz usunąć.

Wyróżnione zostanie zdarzenie, akcja i informacje o behawiorze.

3. Kliknij znajdujący się w palecie Behaviors przycisk Remove Action (znak minus).

Behawior zostanie usunięty z obszaru aktywnego lub plastra oraz skasowany zostanie je­go wpis w palecie Behaviors

Tworzenie rolloverów

Najpopularniejszym zastosowaniem JavaScriptu w Internecie jest prawdopodobnie two­rze­nie rolloverów. Rollovery to obrazki znajdujące się na stronie WWW, które zmie­nia­ją swój wygląd, gdy użytkownik umieszcza nad nimi kursor.

Popularność rolloverów wynika z łatwości ich użycia, obsługi przez większość prze­glą­da­rek internetowych oraz efektywności w tworzeniu interakcji dla odwiedzających Two­ją witrynę internetową.

Jak działają rollovery

Aby zrozumieć zasadę działania rolloverów, musisz znać podstawy HTML. Strony in­ter­netowe nie zawierają obrazków, ale łącza do nich. łącze jest odwołaniem do pliku obraz­ka definiowanym za pomocą atrybutu src, który jest częścią znacznika <img>.

Gdy użytkownik umieści nad obrazkiem kursor (lub go kliknie), atrybut src jest za­mie­nia­ny na inny plik graficzny. Dzieje się to bardzo szybko, więc wygląda tak, jakby zmie­niany był sam obrazek.

Oto typowy znacznik <img> przed zastosowaniem rollovera:

<a href="home.html"><img src="button_regular.gif" height="100" width="50" alt="home"></a>

A tak wyglądałby ten kod po zastosowaniu rollovera:

<a href="home.html"><img src="button_over.gif" height="100" width="50" alt="home"></a>

Jak możesz zobaczyć w powyższym przykładzie, wysokość, szerokość, tekst zastępczy obraz­ka oraz wskazanie hiperłącza (w naszym przykładzie home.html) definiowane w zna­czniku <a> pozostają niezmienione. Modyfikowane jest jedynie wskazanie do pliku GIF, JPEG lub PNG definiowane za pomocą atrybutu src

Pamiętaj, że modyfikowane mogą być dowolne znaczniki <img>, a nie tylko te, które są uży­wane w rolloverach. Umożliwia to tworzenie rozdzielnych rolloverów, co zostanie opi­sane w jednym z kolejnych podrozdziałów.

Stany rolloverów

Rollover służy do zamieniania jednych obrazków na inne, co realizowane jest przez pro­jektantów za pomocą różnych trybów, czyli stanów przycisków. Zanim użytkownik uru­chomi rollover, obrazek ma stan Up (Normalny). Po uruchomieniu rollovera, obra­zek przybiera stan Over (Pod kursorem), gdyż kursor znajduje się nad obrazkiem. W Fire­works do tworzenia różnych stanów rolloverów najczęściej wykorzystywane są klatki.

Prosty rollover używa tylko dwóch stanów (czyli dwóch klatek): Up i Over. Każdy rol­lo­ver może mieć jednak aż cztery stany, tworzone na podstawie czterech klatek doku­men­tu Fire­works. W tabeli 21.1 znajdziesz opis stanów rolloverów i numery związa­nych z ni­mi klatek.

Tworzenie obrazków używanych w rolloverach

Pierwszym krokiem w budowaniu rolloverów jest utworzenie poszczególnych obraz­ków przechowywanych w oddzielnych klatkach dokumentu Fireworks. Przy tworzeniu obraz­ków rolloverów używam dwóch podstawowych technik. Wybór techniki zależy od tego, czy będzie to rollover wykorzystywany niezależnie (tworzę je wówczas w oddziel­nych dokumentach) czy też będzie częścią większego dokumentu.

Tabela 21.1.

Stany rolloverów

Bez względu na tech­ni­kę - budowa rollovera rozpoczyna się od utworzenia począt­ko­wego stanu przycisku, któ­ry jest następnie duplikowany i modyfikowany.

Aby utworzyć rollover, który ma być niezależnym dokumentem:

4. W klatce Frame 1 utwórz początkowy stan przycisku, czyli taki jaki ma mieć przed kliknięciem przez użytkownika.

5. Kliknij przycisk i wybierz z menu polecenie Edit Clone, aby utworzyć du­pli­kat umie­szczony dokładnie nad oryginalnym przyciskiem.

6. Jeśli chcesz utworzyć również stan Down przycisku, powtórz krok 2. Jeżeli przy­cisk ma mieć dodatkowo stan Over Down, jeszcze raz powtórz krok 2. W re­zultacie otrzymasz w klatce Frame 1 cztery obiekty, położone dokładnie je­den nad drugim.

7. Zaznacz wszystkie cztery stany przycisku, rysując za pomocą myszy ota­cza­ją­ce je zaznaczenie prostokątne. Kliknij znajdujący się w palecie Frames przy­cisk Distribute to Frames (Rozłóż na klatki), oznaczony ikoną przedstawiającą taś­mę filmową.

Obiekty zostaną rozłożone na odrębne klatki tak, aby każdy ze stanów przy­cis­ku znajdował się we własnej klatce.

8. W pierwszej klatce już teraz znajduje się odpowiedni stan Up przycisku. Przejdź do klatki Frame 2 i zmodyfikuj przycisk, aby utworzyć dla niego stan Over. Możesz dodać do niego efekt Glow (Blask) lub zmienić ustawienia wy­peł­nienia albo obrysu.

9. Jeżeli posiadasz stany Down i Over Down, przejdź kolejno do klatek Frame 3 i Fra­me 4, aby utworzyć odpowiednie dla tych stanów przyciski.

Jeśli twoje rollovery są częścią większego dokumentu, który zawiera wiele przycisków i in­nych obiektów, przy ich tworzeniu musisz wykonać następujące kroki:

10. Utwórz wszystkie początkowe obiekty w pierwszej klatce dokumentu.

11. Z rozwijanego menu palety Frames wybierz polecenie Duplicate Frames (Du­pli­kuj klatki).

Zostanie otwarte okno dialogowe Duplicate Frames

12. W oknie dialogowym Duplicate Frames wpisz liczbę klatek, jaką chcesz dodać do dokumentu. W polu tekstowym Number dodaj jedną klatkę dla każdego do­dat­kowego stanu.

Dla prostych rolloverów składających się tylko z dwóch stanów - Up i Over
- wy­starczy dodać jedną klatkę. W rolloverach posiadających również stany Down i Over Down, będą Ci potrzebne trzy dodatkowe klatki.

13. Upewnij się, że zaznaczona jest opcja Insert New Frame After the Current Fra­me (Dodaj nowe klatki po klatce bieżącej) i kliknij przycisk OK

Do dokumentu zostaną wstawione zduplikowane klatki.

14. W każdej nowej klatce zmodyfikuj odpowiednio rollover, aby nadać mu wy­gląd, który będzie reprezentował stan przycisku.

Bez względu na technikę użytą do utworzenia oddzielnych obrazków rollovera, naj­lep­szy efekt uzyskasz zawsze poprzez stosowanie do nich subtelnych modyfikacji. Jeśli je­den z przy­cisków będzie się bardzo różnił od pozostałych stanów, wyraźnie będzie wi­dać mo­ment zamiany grafiki, co spowoduje utratę wrażenia pojedynczego klikniętego lub wy­różnionego przycisku. Zamiast tego, użytkownik zobaczy jedynie zmianę jednego obraz­ka na inny. Najlepiej w rolloverach wyglądają niewielkie zmiany położenia lub wy­glądu grafiki (rysunek 21.3).

	Rysunek 21.3. Najbardziej przekonujące zmiany stanów rollovera można uzyskać za pomocą niewielkich modyfikacji oryginalnego przycisku. Na ilustracji przedstawione zostały trzy przyciski i ich kolejne stany: Up, Over, Over Down i Down
		Możesz podglądać rollovery w trakcie ich tworzenia, za pomocą przy­cis­ku Play, który służy do sterowania animacjami. Po jego wciśnięciu zos­taną odtworzone - jedna po drugiej - wszystkie klatki obrazka.		Stosowanie behawiora Simple Rollover (Prosty rollover) W Fireworks prosty rollover (ang. simple rollover) jest naprawdę prosty. Beha­wior Simple Rollover tworzy klasyczny efekt posiadających dwa podstawowe stany: Up i Over, i nie oferuje żadnych ustawień dla użytkownika. Jeżeli jest nam potrzebny klasyczny rollover, możemy go stworzyć w mgnieniu oka. Jedyne różnice pomiędzy behawiorami Simple Rollover i Swap Image to interfejs i licz­ba opcji. Dla obu behawiorów Fireworks generuje kod w języku JavaScript. Aby zastosować behawior Simple Rollover 15. Zaznacz plaster, który znajduje się na warstwie internetowej (Web Layer) dokumentu. 16. Z rozwijanego menu Add Action palety Behaviors wybierz pozycję Simple Rollover Aby przetestować działanie rollovera, kliknij zakładkę Preview w oknie dokumentu i umieść kursor nad przyciskiem. Wciskając przycisk F12, możesz także sprawdzić dzia­ła­nie rollovera w głównej przeglądarce internetowej. Dla behawiora Simple Rollover nie trzeba definiować żadnych opcji. Gdy klikniesz dwu­krotnie behawior znajdujący się w liście palety Behaviors, Fireworks wyświetli je­dy­nie okno z informacjami na temat jego działania (rysunek 21.4). Rysunek 21.4. "Okno dialogowe" Simple Rollover zawiera jedynie informacje o działaniu behawiora, nie oferując żadnych opcji. Na tym właśnie polega prostota tego behawiora Oczywiście - jak w przypadku każdego innego behawiora, z listy Event, która znajduje się w palecie Behaviors, możesz wybrać inne zdarzenie uruchamiające akcje, na przy­kład onClick lub onLoad Jeżeli będziesz chciał wykorzystać rollover jako łącze, najpierw musisz przy­dzielić do niego URL. Więcej informacji o dodawaniu łączy do obiek­tów internetowych znajdziesz w rozdziale 20.   Eksportowanie rolloverów Z Fireworks możesz oczywiście eksportować obrazki. Podczas tworzenia rolloverów, w pli­ku HTML eksportowany jest kod JavaScript, który steruje działaniem behawiorów przy­dzielonych do obrazków. JavaScript jest zgodny z Netscape Navigatorem w wersji 3 i późniejszych oraz Microsoft Internet Explorer w wersji od 4 w górę. Rollovery mogą być także wyświetlane w Internet Explorerze 3 dla MacOS, ale w tej samej przeglądarce w Windows już nie będą widoczne, choć przydzielone do nich hiperłącza wciąż są ak­tyw­ne. Firma Macromedia wciąż poprawiała zgodność eks­portowanego z Fireworks kodu JavaScript. W pierwszej wersji programu mógł być ge­ne­rowany tylko jeden typ kodu dla rolloverów. Działał on oczywiście w prze­glą­dar­kach, ale trzeba go było ręcznie modyfikować po otwarciu w wizualnych edytorach. W Fire­works 4 możesz wybrać styl kodu najlepiej pasujący do Twojego środowiska ro­bo­czego lub nawet tworzyć własne szablony, aby dokładnie dopasować ustawienia. Przed wyeksportowaniem pierwszego rollovera warto się na chwilę zatrzymać w oknie dialogowym HTML Setup, przynajmniej po to, aby wybrać styl HTML najbardziej odpowiedni dla naszego środowiska. W większości przypadków wybór stylu jest narzucany przez edytor używany do two­rzenia stron WWW, w którym będziesz chciał umieścić rollover. Oto stan­dar­do­we style kodu HTML oferowane przez Fireworks: u      Dreamweaver. Kod dopasowany do Dreamweavera. Kod rollovera wyeksportowany z użyciem stylu Dream­we­aver jest po otwarciu w Dreamweaverze rozpoznawany jako źród­ło­wy behawior Dreamweavera. u      GoLive. Kod dostosowany do umieszczenia w programie GoLive firmy Ado­be, zawiera specjalne znaczniki, które ułatwiają jego edycję w GoLive. u      FrontPage. FrontPage do tworzenia elementów internetowych używa serii tzw. webbotów, fragmentów kodu rozpoznawanych jedynie przez program Front­Page. Fireworks generuje cały kod wymagany przez mapę obrazka, która mo­że być następnie poprawnie wyświetlana po otwarciu dokumentu we Front­Page'u. u      Generic (Ogólny). Najbardziej podstawowy kod, przydatny przy ręcznym pro­gra­mowaniu stron WWW oraz w większości narzędzi autorskich, pracujących ze standardowym kodem HTML. Jeżeli nie wiesz jaki styl HTML wybrać, wybierz właśnie ten. W oknie dialogowym HTML Setup można również zmienić ustawienie rozszerzenia plików HTML z niestandardowego .htm na standardowe .html. Można wybrać również, czy Fireworks ma umieszczać swoje własne komentarze, oraz zamienić nazwy eksportowanych plików na pisane małymi literami, dla pełniejszej zgodności z różnymi typami przeglądarek. Użytkownicy MacOS mogą wybrać kod Creator, jaki powinien mieć eksportowany plik HTML, aby mógł być otwierany w edytorze HTML po dwukrotnym jego kliknięciu. Okno dialogowe HTML Setup zostało opisane w rozdziale 3.   Umieszczenie eksportowanych z Fireworks rolloverów na stronach WWW jest pro­ce­sem składającym się z trzech etapów: u      Etap 1: Utworzenie i przetestowanie rolloveru w Fireworks. u      Etap 2: Wyeksportowanie obrazka i kodu z Fireworks. Kod można wyeksportować jako plik HTML lub do schowka sys­temowego. u      Etap 3: Umieszczenie kodu na stronie WWW z wykorzystaniem dowolnego edy­tora (może być to nawet prosty edytor tekstowy, na przykład Notepad w Win­dows lub SimpleText w MacOS). Albo otwórz plik HTML w edytorze, albo - jeżeli kod skopiowałeś do schowka, wklej go do edytora. Eksportowanie kodu z Fireworks Aby wyeksportować z Fireworks rollover i jego kod: 17. Zdefiniuj ustawienia eksportu grafiki w palecie Optimize 18. Wybierz z menu polecenie File Export Zostanie otwarte okno dialogowe Export (rysunek 21.5). Rysunek 21.5. W oknie dialogowym Export, z listy Save as type (Save As) możesz wybrać inny styl niż HTML and Images 19. Zdefiniuj ścieżkę dostępu i wpisz nazwę eksportowanego pliku. 20. Z listy Save as type (Save As) wybierz HTML and Images, aby eksportować HTML, lub wybierz Dreamweaver Library (.lbi), aby eksportować HTML jako bibliotekę Dreamweavera. Jeśli wybierzesz opcję Dreamweaver Library, zostanie otwarte okno dia­lo­go­we Locate Site Library Directory, w którym będziesz mógł odszukać katalog z bi­bliotekami swojej witryny. 21. Z listy opcji HTML wybierz HTML File lub Copy to Clipboard 22. Z rozwijanej listy Slices wybierz jedną z poniższych opcji: u      None (Brak). Wyłącza zupełnie plastrowanie. u      Export Slices (Eksportuj plastry). Obrazek zostanie pocięty na plastry zgodnie z rozmieszczeniem plastrów. Export Slices jest prawdopodobnie najczęściej wykorzystywaną opcją plas­tro­wa­nia. u      Slice Along Guides (Plastruj wzdłuż prowadnic). Dzieli obrazek wzdłuż prowadnic. 23. Zaznacz pole Selected Slices Only, aby eksportować tylko wybrane plastry. 24. Zaznacz Current Frame, aby eksportować tylko obrazki z bieżącej klatki. 25. Zaznacz Include Areas without Slices, aby eksportować obrazki bez określonych plastrów. 26. Aby zapisać pliki w innym katalogu, zaznacz pole Put Images in Subfolder, kliknij przycisk Browse i wybierz katalog dla obrazków. 27. Aby zmodyfikować dowolne z wcześniej ustalonych ustawień plastrów, kliknij przy­­cisk Options, aby ponownie otworzyć okno dialogowe HTML Setup i do­­­stosuj odpowiednie ustawienia Przegląd możliwych ustawień plastrów znajdziesz w rozdziale 20.   28. Kliknij przycisk Save, aby zakończyć eksportowanie rollovera. Wstawianie kodu rollovera na stronę WWW Po wybraniu określonego stylu kodu HTML, Fireworks automatycznie wygeneruje zde­fi­niowany kod jako plik HTML lub do schowka systemowego. Jeśli wybierzesz opcję ko­piowania kodu do schowka, otwórz docelowy plik HTML w swoim edytorze i wklej w odpowiednie miejsce kod znajdujący się w schowku. Jeżeli wyeksportujesz kod do pli­ku, otwórz ten plik i plik docelowy w swoim edytorze, a następnie kopiuj i wklejaj po­między nimi niezbędne wiersze kodu. Proces umieszczania kodu rollovera na stronie WWW jest podobny do wstawiania kodu dla map obrazków lub plastrów. Istnieje tylko jedna istotna różnica: kod generowany dla rolloverów (i wszystkich innych behawiorów) składa się z dwóch części: u      Część kodu definiująca zdarzenie - w której znajduje się znacznik <img> i ele­men­ty uruchamiające zdarzenie - przechowywana jest w części <body> strony WWW. u      Część kodu definiująca akcje (zawierająca wszystkie funkcje JavaScriptu) jest prze­chowywana w części <head> Aby rollover mógł poprawnie funkcjonować, na stronie WWW musisz umieścić obie częś­ci kodu. Proces umieszczania kodu rollovera wygenerowanego z wykorzystaniem stylów Ge­ne­ric Dreamweaver i GoLive jest podobny. Wytnij lub skopiuj kod znaj­dujący się w częściach <body> i <head> dokumentu wygenerowanego przez Fire­works, a następnie wklej go na istniejącą stronę WWW. Kod generowany dla rollovera z wykorzystaniem stylu FrontPage nie jest podzielony na części <body> i <head>, więc możesz skopiować i wkleić do docelowego dokumentu całą część kodu. Po wy­bra­niu opcji Dreamweaver Library, proces umieszczania wygenerowanego kodu HTML na stronie WWW jest nawet jeszcze łatwiejszy. Kod możesz wstawić na stronę z wy­korzystaniem kategorii Library palety Assets tak, jakbyś umieszczał na niej każdy inny element bi­blio­teki. Aby wstawić na stronę WWW kod HTML wygenerowany po wybraniu stylu Generic Dream­weaver lub FrontPage 29. Otwórz w swoim edytorze źródłowy plik HTML wygenerowany przez Fireworks. 30. Zaznacz i skopiuj do schowka część <body> rozpoczynającą się od wiersza <!---------- BEGIN COPYING THE HTML HERE ----------> i kończącą się wierszem <!---------- STOP COPYING THE HTML HERE ----------> Jeżeli do tworzenia stron WWW używasz Dreamweavera, nie musisz ot­wierać okna HTML Source lub zewnętrznego edytora, aby skopiować kod. Upewnij się jedynie, że włączona jest opcja View Invisible Ele­ments i skopiuj ikony reprezentujące kod.   31. Otwórz w edytorze tekstowym lub HTML docelową stronę WWW. 32. W części <body> docelowego dokumentu wklej kod odpowiedzialny za wy­świe­tlanie obrazka w odpowiednim miejscu. Jeżeli kod był generowany z wybranym stylem FrontPage, proces umie­szcza­nia go na stronie WWW został właśnie ukończony i możesz pominąć pozostałe ope­racje i zająć się testowaniem swojego rollovera w przeglądarce. 33. Powróć do źródłowego dokumentu HTML i odszukaj w nim część <head> 34. Zaznacz i skopiuj do schowka część <head> rozpoczynającą się od wiersza <!---------- BEGIN COPYING THE JavaScript SECTION HERE ----------> i kończącą się wierszem <!---------- STOP COPYING THE JavaScript SECTION HERE ----------> 35. Przejdź do docelowego dokumentu HTML. 36. Wklej kod do części <head> Twojej strony WWW. Umieszczenie kodu JavaScript ze znacznikiem <title> i wszystkimi zna­cznikami <meta> umożliwi lepszą obsługę Twojej strony WWW przez programy sieciowe, dodające strony do wyszukiwarek.   Po umieszczeniu na stronie obu części kodu rollovera, możesz go obejrzeć w prze­glą­dar­ce internetowej. Wstępne ładowanie obrazków rolloverów Przy pierwszym otwarciu dokumentu HTML zawierającego rollovery, wyświetlane są ich stany Up wraz z pozostałymi obrazkami znajdu­ją­cymi się na stronie. Idealną sytuacją byłaby taka, w której po naje­cha­niu myszą na rollover, jego pozostałe stany byłyby natychmiast dos­tęp­ne w pamięci podręcznej przeglądarki, a nie powoli ładowane z Inter­ne­tu. Natychmiastowe reakcje na działania użytkownika pozwala wzmo­­c­nić wrażenie modyfikacji obiektów, na przykład wciskania przycisku. Nie wygląda to wówczas jedynie jak zamiana jednego obrazka innym. Aby wszystkie stany rollovera zostały załadowane do pamięci pod­ręcz­nej przeglądarki, Fireworks dołącza dla nich w generowanym kodzie HTML funkcje JavaScript, które wstępnie ładują pliki obrazków dla sta­nów Over, Over Down i Down przycisku. Biblioteka Dreamweavera umożliwia umieszczanie pojedynczego elementu na wielu róż­nych stronach WWW. Aby później zmodyfikować wszystkie elementy równocześnie, wystarczy zmie­nić jedną pozycję biblioteki. Jedynym warunkiem jest to, że rollover musi być przy eksporcie za­pi­sany w specjalnym katalogu o nazwie Library w katalogu witryny. Jeśli dotychczas nie tworzyłeś jeszcze żadnych elementów biblioteki swojej witryny, będziesz musiał utwo­rzyć katalog Library w głównym jej katalogu. Aby umieścić na stronie obrazki i kod rollovera wygenerowanego jako element bi­blio­te­ki Dreamweavera: 37. W Dreamweaverze wybierz z menu polecenie Window Assets Dreamweaver wyświetli paletę Assets 38. W palecie Assets wybierz kategorię Library W palecie Assets pojawią się bieżące pozycje biblioteki. 39. Umieść kursor w miejscu, w którym chcesz wstawić rollover. 40. Z listy palety Assets wybierz wyeksportowaną pozycję biblioteki. W palecie Assets pojawi się podgląd pozycji biblioteki. 41. Kliknij przycisk Insert albo przeciągnij element biblioteki z panelu podglądu lub z listy na tworzoną stronę WWW. Obrazki i cały niezbędny kod rollovera zostaną wstawione na tworzoną w Dream­weaverze stronę WWW. Behawior Nav Bar Pasek nawigacyjny (Nav Bar) jest zestawem rolloverów działających jako przyciski op­cji. Wszys­tkie przyciski są ze sobą połączone, więc kliknięcie jednego z nich i usta­wie­nie go na stan Down powoduje przestawienie wszystkich pozostałych przycisków na stan Up. Paski nawigacyjne są tworzone przez Fireworks za pomocą cookies. Są to małe pli­ki zapisywane przez przeglądarkę na komputerze osoby odwiedzającej stronę. Naj­częś­ciej są one wykorzystywane do zapisywania wyborów dokonywanych przez użyt­kow­nika na określonych stronach WWW, na przykład wózka z zakupami w sklepach inter­netowych. Fireworks używa tej technologii do sprawdzania, który z przycisków pra­cujących w jednej grupie został wybrany przez użytkownika. Paski nawigacyjne i wspomniane pliki mogą się wydawać skomplikowaną technologią, ale tak naprawdę już ich używałeś, jeśli korzystałeś wcześniej z trzy- lub cztero­klat­ko­we­go behawiora Simple Rollover. Fireworks dla każdego behawiora Simple Rollover, któ­ry posiada stan Down i (lub) Over Down, automatycznie tworzy pasek nawigacyjny o naz­wie FwNavBar. Nie musisz robić nic więcej w celu uzyskania efektu przełączania. Je­żeli jednak do utworzenia rollovera użyjesz behawiora Swap Image lub chcesz korzystać z behawiora Simple Rol­lo­ver posiadającego tylko stany Up i Over, do stworzenia paska nawigacyjnego będzie Ci po­trzebny behawior Nav Bar Tworzenia paska nawigacyjnego Aby utworzyć pasek nawigacyjny: 42. W odpowiednich klatkach (od 1 do 4) utwórz swoje rollovery posiadające odpowiednie sta­ny: Up Over Down i Over Down 43. W pierwszej klatce narysuj plaster nad każdym rolloverem. 44. Zaznacz wszystkie plastry po kolei i przekształć je na rollovery poprzez wybranie Simple Rollover z rozwijanej listy Add Action w palecie Behaviors Rollovery są już przygotowane do wykorzystania w pasku nawigacyjnym. 45. Zaznacz wszystkie plastry, która mają zostać dołączone do paska nawi­ga­cyjnego. 46. Wybierz behawior Set Nav Bar Image z listy Add Action w palecie Behaviors Fireworks wyświetli okno dialogowe Set Nav Bar Image (rysunek 21.6). Rysunek 21.6. Behawior Nav Bar ustanawia połączenia pomiędzy wszystkimi rolloverami, dlatego też w danym momencie może być wybrany tylko jeden z przycisków 47. Jeżeli dodałeś do rolloverów stan Over Down, zaznacz opcję Include Over While Down State Kliknij przycisk OK 48. Jeżeli chcesz, aby jeden z przycisków był zawsze domyślnie wyświetlany w sta­nie Down, usuń zaznaczenia wszystkich plastrów, a następnie zaznacz tyl­ko jeden z nich. Kliknij dwukrotnie behawior Set Nav Bar Image w palecie Beha­viors i zaznacz opcję Show Down Image Upon Load Kliknij przycisk OK Jeżeli wyświetlisz pasek nawigacyjny w zakładce Preview okna dokumentu lub w prze­glą­darce internetowej (rysunek 21.7), zobaczysz, że przyciski będę zmieniane w zależ­noś­ci od tego, który z nich wybierze użytkownik.   Rysunek 21.7. Drugi przycisk paska nawigacyjnego posiada stan Down. W danym momencie może być wciśnięty tylko jeden przycisk w pasku nawigacyjnym, więc pasek działa jak grupa przycisków opcji ("przycisków radiowych")   Termin "przyciski radiowe" pochodzi od przycisków odbiorników radio­wych pracujących na zakresach AM/FM. Jednocześnie może być od­bie­rana tylko jedna stacja, więc wciśnięty może być tylko jeden przy­cisk. Wciśnięcie jednego z przycisków powoduje "wyskoczenie" wszystkich po­zostałych. Aby utworzyć rollover w oknie Button Editor 49. Wybierz z menu polecenie Insert New Button Fireworks otworzy okno edytora przycisków (rysunek 21.8). 50. W zakładce Up okna Button Editor utwórz stan Up przycisku. 51. Kliknij zakładkę Over i utwórz stan przycisku znajdującego się pod kursorem. Aby stan Over utworzyć na podstawie stanu Up przycisku, kliknij przycisk Co­py Up Graphic (Kopiuj grafikę stanu Up). Fireworks skopiuje do zakładki Over stan utworzony w zakładce Up   Rysunek 21.8. Okno Button Editor może wyświetlać w swoich pięciu obszarach roboczych cztery stany przycisków (cztery klatki Fireworks) oraz plaster   W dowolnym momencie możesz zaznaczyć opcję Onion Skinning, aby w każdej zakładce okna Button Editor były wyświetlane wszys­tkie stany przycisku jednocześnie. Ułatwia to poprawne roz­mie­szcze­nie poszczególnych stanów. Możesz także korzystać z kontrolek wido­ku umożliwiających powiększanie lub zmniejszanie podglądu oraz przełą­czanie się pomiędzy trybami Full (Dokładny) i Draft (Upro­szczo­ny). Kliknij znajdujący się w prawym górnym rogu okna Button Editor przy­cisk Play, aby odtworzyć kolejno wszystkie stany przycisku. 53. Jeżeli Twój przycisk będzie eksportowany jako pasek nawigacyjny, zaznacz op­cję Show Down State Upon Load, aby po załadowaniu strony wyświetlony zo­stał stan Down przycisku. 54. Aby dodać do przycisku stan Over While Down, kliknij zakładkę Down edytora przy­cisków i utwórz nowy stan od nowa lub skopiuj grafikę poprzedniego sta­nu (kliknij przycisk Copy Down Graphic) i dokonaj modyfikacji. 55. Kliknij zakładkę Active Area. Fireworks automatycznie utworzy w tej zakładce pla­ster obejmujący obszar przycisku, ale jeśli chcesz, możesz zmodyfikować je­go rozmiary. Plaster tworzony w zakładce Active Area jest podobny do obszaru Hit w przyciskach budowanych w programie Flash.   56. Aby Fireworks poprowadził Cię przez proces przydzielania łącza do przycisku, klik­nij przycisk Link Wizard (Kreator łączy) i wprowadź odpowiednie usta­wie­nia w poszczególnych zakładkach okna dialogowego Link Wizard 57. Zamknij okno Button Editor Nowy symbol przycisku zostanie umieszczony w palecie Library, zaś jego kopia - w oknie dokumentu (rysunek 21.9). Kliknij zakładkę Preview okna dokumentu, aby spraw­dzić działanie nowego rollovera.   Rysunek 21.9. W oknie Button Editor tworzone są nowe symbole przycisków, które są następnie umieszczane w bibliotece. W oknie dokumentu umieszczana jest kopia symbolu   Więcej informacji o symbolach i bibliotekach znajdziesz w rozdziale 17. Tworzenie rozdzielnych rolloverów Rozdzielne rollovery to takie, w których użytkownik umieszcza kursor nad jedną częś­cią obrazka (obszarem zdarzeń), zaś druga część (obszar ce­lu) wykonuje funkcję rollovera. Typowym zastosowaniem rozdzielnych rolloverów jest wyświetlanie w jednym, wspól­nym obszarze opisów działania przycisków paska nawigacyjnego. Aby utworzyć roz­dzielny rollover, trzeba za pomocą plastrów utworzyć obszar zdarzeń i obszar celu, chociaż rollovery te mogą być uruchamiane także za pomocą obszarów aktywnych. Aby utworzyć rozdzielny rollover: 58. Utwórz plaster nad obszarem zdarzeń (częścią obrazka, w której musi znaleźć się kursor, aby rollover został uruchomiony). 59. Utwórz plaster nad obszarem celu (częścią obrazka, która będzie mody­fi­ko­wa­na). 60. Zaznacz plaster obszaru zdarzeń i z rozwijanej listy Add Action, która znajduje się w palecie Behaviors, wybierz pozycję Swap Image Fireworks otworzy okno dialogowe Swap Image (rysunek 21.10). Rysunek 21.10. W oknie dialogowym Swap Image znajdziesz opcje umożliwiające przełączanie dowolnego plastra dokumentu w odpowiedzi na wybranie innego plastra przez użytkownika 61. Wybierz plaster docelowego obszaru za pomocą rozwijanej listy Target z naz­wa­mi plastrów lub podglądu Slice, który znajduje się po prawej stronie listy Tar­get. Obojętnie, którym elementem się posłużysz do wybrania plastra, drugi tak­że zostanie natychmiast uaktualniony. 62. Wybierz obrazek przełączania, zaznaczając numer odpowiedniej klat­ki z rozwijanej listy Frames. Jako przełączany obrazek zostanie wykorzystany ob­szar, który znajduje się pod plastrem celu. 63. Zaznacz opcję Restore Image onMouseOut, aby obrazek został z powrotem prze­łączony, gdy użytkownik przesunie kursor poza obszar zdarzeń. Kliknij przy­cisk OK 64. Powtórz powyższe operacje, aż przydzielisz behawior Swap Image do wszystkich plastrów. Aby jednocześnie przełączać więcej niż jeden plaster, powtórz powyższe kroki i za­sto­suj behawiory Swap Image do tego samego obiektu w warstwie Web Layer. Wyko­rzys­tu­jąc tę technikę można utworzyć przycisk nawigacyjny, który sam może być rolloverem, a oprócz tego wyświetlać inne rozdzielne rollovery. Tworzenie zewnętrznych rolloverów Jako stany Over rolloverów, zamiast obiektów, które znajdują się w innych klatkach, w Fire­works można używać również zewnętrznych obrazków GIF (zwykłych lub ani­mo­wanych), JPEG i PNG. Gdy rollover jest wyświetlany w przeglądarce, jako jego źród­ło - zamiast obszaru jednej z klatek znajdujących się w dokumencie - używany jest plik zew­nętrzny. Zewnętrzne rollovery umożliwiają także dołączanie animowanych GIF-ów do istniejących obrazków. Z powodu ograniczeń przeglądarek internetowych nie można przełą­czać obrazków zapisanych w różnych formatach. Jeżeli eksportujesz plas­ter w formacie GIF powinieneś użyć zewnętrznego GIF-a lub ani­mo­wanego GIF-a jako stanu Over rollovera. Podobnie, gdy eks­por­tu­jesz plaster w formacie JPEG lub PNG, jako stanu Over rollovera powi­nie­neś użyć obrazka zapisanego odpowiednio w formacie JPEG lub PNG.   Pamiętaj, że zmieniane jest jedynie źródło obrazka (atrybut src znacznika <img>), więc przeglądarka przeskaluje zewnętrzny obrazek, aby dopasować go do wymiarów po­czątkowego plastra. Jeśli chciałbyś utworzyć plaster o takich samych wymiarach, jakie ma zew­nętrzny obrazek i przełączać plaster obrazka na zewnętrzny plik, za­znacz plaster, wybierz z menu polecenie Modify Trans­form Nu­me­ric Tran­sform lub użyj skrótu klawiaturowego Ctrl+Shift+T (Command+Shift+T), wybierz po­zy­cję Resize z rozwijanej listy, która znajduje się w oknie dialo­go­wym Nu­meric Transform, a następnie wprowadź odpowiednie wartości wy­so­kości i szerokości obrazka.   Aby utworzyć zewnętrzny rollover: 65. Zaznacz plaster, który ma uruchamiać zewnętrzny rollover. 66. Wybierz pozycję Swap Image z rozwijanej listy Add Action w palecie Behaviors Fireworks wyświetli okno dialogowe Swap Image 67. Zaznacz plaster, na który będzie przełączany zewnętrzny obrazek. 68. Kliknij ikonę katalogu, aby otworzyć standardowe okno dialogowe Open i od­szu­kać zewnętrzny plik. 69. Zaznacz opcję Restore Image onMouseOut, aby przywrócić oryginalny stan obraz­ka, gdy użytkownik przesunie kursor poza obszar zdarzeń. 70. Kliknij przycisk OK Rollovery w obszarach aktywnych Rollovery w obszarach aktywnych umożliwiają wykorzystanie w rolloverach obszarów o nieregularnych kształtach. Wszystkie obrazki są prostokątami, więc przełączane mogą być jedynie prostokątne obszary grafiki. Jednak obrazki używane do uruchamiania rol­lo­verów nie muszą być prostokątne. Można w tym celu wykorzystać obszar aktywny o do­wolnym kształcie. Kluczem do tworzenia rolloverów w obszarach aktywnych jest zdol­ność Fireworks do przełączania całych plastrów znajdujących się w różnych klatkach. Rysunek 21.11 przedstawia obrazek z plastrami o kształcie dalekim od prostokąta. Aby ca­ły projekt mógł działać, wszystkie obszary nie tylko muszą być niezależnie wyróż­nia­ne przez użytkownika, który zaznaczy je kursorem, ale również powinny zawierać łącza do różnych stron znajdujących się w witrynie WWW. Rollovery w obszarach ak­tyw­nych przełączają całe obrazki, więc każde wyróżnienie może mieć dowolny kształt. Rysunek 21.11. System nawigacyjny używający obszarów aktywnych do uruchamiania rolloverów w całym obrazku. Można utworzyć w ten sposób rollovery o nieregularnych kształtach Istnieje jednak pewne ograniczenie tej techniki: każdy z obszarów aktywnych przełącza ca­ły obrazek, więc obszary aktywne nie mogą nakładać się na siebie, gdyż zostanie utra­cone wrażenie odrębności wyróżnianych obszarów. Dobrze jest także zachować jak naj­mniejsze rozmiary całego obrazka, gdyż każdy dodany obszar aktywny wymaga osobnej kopii całego obrazka i pobieranie dużego obrazka na komputer użytkownika zabierałoby zbyt dużo czasu. Aby utworzyć rollover w obszarze aktywnym: 71. Utwórz obszary aktywne za pomocą narzędzia Rectangle Circle lub Polygon Hotspot 72. Utwórz jeden plaster przykrywający cały obrazek. 73. Zaznacz plaster i wybierz z menu polecenie Modify Arrange Send to Back, aby prze­sunąć go pod obszary aktywne. Będziesz mógł później łatwo wybierać poszczególne obszary aktywne i przydzielać do nich behawiory. 74. Zduplikuj bieżącą klatkę, aby otrzymać tyle klatek, ile posiadasz aktywnych ob­szarów. Jeżeli masz ich dziesięć, utwórz dziesięć klatek. 75. W każdej klatce tak zmodyfikuj aktywny obszar, aby był wyróżniany w okre­ślo­ny sposób. Obszary te będą stanami Over rollovera. Pozostałe obszary każ­dej klatki będą posiadały swoje stany domyślne. Ukrycie warstwy internetowej (i obszarów aktywnych) ułatwi Ci modyfi­ko­wanie aktywnych obszarów. Warstwę Web Layer możesz ukryć, kli­ka­jąc ikonę oka znajdującą się obok nazwy warstwy w palecie Layers. 76. Zaznacz obszar aktywny i wpisz wywoływany nim adres URL w palecie Object 77. Utrzymując zaznaczenie obszaru aktywnego, otwórz paletę Behaviors i wy­bierz z niej behawior Swap Image. W oknie dialogowym Swap Image wykonaj na­stępujące czynności: u      Zaznacz jeden plaster znajdujący się w liście plastrów. u      W części Show the Swapped Image from wpisz w polu Frame No. numer od­po­wiadający klatce, w której znajduje się wyróżniony obszar aktywny. Jeżeli wyróżniony obszar aktywny znajduje się w klatce Frame 3, w polu Fra­me No. ustaw klatkę Frame 3 78. Powtórz polecenie szóste i siódme dla każdego obszaru aktywnego, dopóki każ­dy z nich nie będzie miał przydzielonego adresu URL i behawiora. 79. Wyeksportuj obrazek wraz z kodem HTML. Z rozwijanej listy Slicing okna dia­logowego Export wybierz opcję Export Slices Fireworks wyeksportuje dokument HTML oraz pliki graficzne dla wszystkich klatek gra­fiki. Przy wyświetlaniu w przeglądarce internetowej powstanie wrażenie pojedyn­cze­go obrazka z rolloverami o nieregularnych kształtach. Wyświetlanie komunikatów w pasku stanu przeglądarki Komunikaty wyświetlane w pasku stanu przeglądarki są sposobem na ułatwienie użyt­kow­nikowi nawigacji w Internecie. Komunikaty te są często wykorzystywane wraz z ob­szarami aktywnymi i mapami obrazków. Ich wielkość jest ograniczona szerokością ob­szaru paska stanu przeglądarki użytkownika, który w przypadku Internet Explorera 4 (ale nie 5) jest bardzo mały. Odradzam stosowanie długich komunikatów nawet w innych prze­glą­dar­kach, ponieważ każde z okien przeglądarki może mieć różne wymiary. Aby dodać do dokumentu komunikat wyświetlany w pasku stanu przeglądarki: 80. Zaznacz plaster lub obszar aktywny, a następnie z menu Add Action w palecie Be­ha­viors wybierz behawior Set Text of Status Bar Fireworks wyświetli okno dialogowe Set Text of Status Bar (rysunek 21.12). 81. W polu tekstowym Message wpisz komunikat, który będzie wyświetlany w pas­ku stanu, gdy użytkownik uaktywni plaster. Kliknij przycisk OK 82. Jeśli chcesz, zamiast onMouseOver możesz wybrać inne zdarzenie włączające ko­munikat, na przykład onMouseOut onClick lub onLoad Rysunek 21.12. Okno dialogowe Set Text of Status Bar umożliwia przydzielenie do plastra lub obszaru aktywnego komunikatu wyświetlanego w pasku stanu przeglądarki, który ma za zadanie ułatwić użytkownikowi nawigację wewnątrz witryny WWW Pop-Up Menus (Listy rozwijane) Witryny WWW stają się coraz bardziej złożone i prezentują setki, a nawet tysiące informacji. Tradycyjny pasek przycisków internetowych, zawierający kilka opcji może pękać w szwach od ogromnej ilości tematów i podtematów zawartych na tych witrynach. Behawior Set Pop-Up Menu pomaga w szybkim tworzeniu wydajnych hierarchicznych systemów wyszukiwania, bardzo czytelnych dla użytkowników (rysunek 21.13)   Rysunek 21.13. W Fireworks łatwo można tworzyć listy rozwijane, które z kolei ułatwiają wyszukiwanie w przeglądarce   Dzięki behawiorowi Set Pop-Up Menu, kilka prostych kroków w Fireworks zastępuje tworzenie kodu, uprzednio niezbędne do umieszczenia list rozwijanych na stronie WWW. Zaznacz plaster lub obszar aktywny i z listy Add Action w palecie Behaviors wybierz Set Pop-Up Menu lub wybierz polecenie Insert Pop-Up Menu Fireworks otworzy okno dialogowe Set Pop-Up Menu (rysunek 12.14). Rysunek 21.14. Okno dialogowe Set Pop-Up Menu umożliwia łatwe określenie charakteru tworzonej listy Add Menu button - Przycisk Add Menu (Dodaj listę) Delete Menu button - Przycisk Delete Menu (Usuń listę) Promote Menu button - Przycisk Outdent Menu (Poziom wyżej) Create Menu button - Przycisk Indent Menu (Poziom niżej) Menu - Lista Submenu - Podlista Aby utworzyć nową pozycję listy, w polu tekstowym Text wpisz nazwę, w polu Link wpisz adres URL, a w polu Target (Cel) URL docelowy i kliknij przycisk Add Menu lub naciśnij klawisz Enter Return Aby zmienić właściwości pozycji listy, zaznacz tę pozycję i zmień zawartość pól Text Link lub Target i kliknij przycisk Change (Zmień). Pole Link zawiera również listę rozwijaną, udostępniającą wszystkie adresy URL dokumentu. Aby przekształcić listę w podlistę, zaznacz pozycję listy i kliknij przycisk Indent Menu. Aby utworzyć listę z podlisty, kliknij przycisk Outdent Menu Aby przenieść pozycję w górę lub w dół listy, zaznacz ją i przeciągnij w żądaną stronę. Po zakończeniu ustawiania opcji kliknij przycisk Next Po kliknięciu przycisku Next, aby przywrócić okno dialogowe Set Pop-Up Menu do poprzedniego stanu, wystarczy kliknąć przycisk Back.   Fireworks wyświetli drugi stan okna dialogowego Set Pop-Up Menu Określ styl listy - albo HTML (rysunek 21.15), albo Image (rysunek 21.16) Listy HTML składają się z tekstu HTML i tabel po eksporcie, Listy Image (Obrazek) korzystają z obrazków sformatowanych stylami Fireworks. Rysunek 21.15. Opcje formatowania HTML zawierają kolory tekstu i komórek tabeli. Zawsze dostępny jest podgląd tworzonej listy rozwijanej Określ czcionkę, rozmiar i styl - pogrubiony i (lub) kursywa dla tekstu w liście. Wybierz kolor tekstu (Text) i komórki (Cell) dla stanu Up Tak właśnie będzie początkowo wyglądała lista. Wybierz kolor tekstu (Text) i komórki (Cell) dla stanu Over Tak właśnie będzie wyglądała lista pod kursorem myszy. W trakcie dopasowywania ustawień, warto zwrócić uwagę na przedstawiany przez Fireworks podgląd tworzonej listy.   Jeżeli tworzysz listę rozwijaną Image (rysunek 21.16), wybierz styl stanu Up i styl stanu Over dla obrazków tworzących listę. Rysunek 21.16. Opcje formatowania Image korzystają ze stylów Fireworks w celu uatrakcyjnienia monotonnych list Po zakończeniu kliknij Finish Po dodaniu do dokumentu behawiora Pop-Up Menu, można zawsze modyfikować jego ustawienia - wystarczy kliknąć dwukrotnie jego nazwę w palecie Behaviors lub dwukrotnie kliknąć w dokumencie obrys listy rozwijanej. Nie ma możliwości oglądania list rozwijanych w środowisku roboczym. Naciśnij klawisz F12, aby zobaczyć w swojej głównej przeglądarce, jak działają listy rozwijane.   Style listy rozwijanej są przechowywane w katalogu Nav Menu, wewnątrz katalogu Configuration, znajdującego się w katalogu programu Fireworks. Są to te same style, które znamy z palety Styles, zatem dodanie własnych stylów do okna dialogowego Set Pop-Up Menu i udostępnienie ich dla listy rozwijanej jest tak proste jak eksportowanie stylów z palety Styles do katalogu Nav Menu. Katalog programu Fireworks znajdziesz pod C:\Program Files\Macromedia\Fireworks 4 - dla Windows, lub pod Macintosh HD:Applications:Macromedia Fireworks 4 - dla MacOS   Aby dodać własne style do behawioru Set Pop-Up Menu: Utwórz obiekt o wypełnieniu, obrysie i efektach takich, jakie ma mieć lista rozwijana. Wybierz polecenie Window Styles, aby wyświetlić paletę Styles Zaznacz obiekt i kliknij przycisk New Style (Nowy styl) w palecie Styles Własności obiektu zostaną zapisane jako nowy styl. Zaznacz ten nowy styl w palecie Styles i wybierz pozycję Export Styles z listy rozwijanej palety Styles Fireworks wyświetli okno dialogowe Save Wyszukaj katalog programu Fireworks, w którym następnie wyszukaj katalog Configuration, a w nim katalog Nav Bar. Kliknij Save, aby wyeksportować wybrany wcześniej styl jako plik Fireworks .stl. Nowo dodany styl będzie dostępny przy następnym korzystaniu z behawiora Set Pop-Up Menu Behawiory Drag-and-Drop ("Przeciągnij i upuść") Behawiory Drag-and-drop umożliwiają szybkie tworzenie rolloverów przy użyciu techniki przeciągania i upuszczania. Zamiast zaznaczać plaster lub obszar aktywny i następnie działać w palecie Behaviors, można bezpośrednio działać na obiekcie internetowym uruchamiającym funkcję - obszarze, nad którym użytkownik przesuwa mysz, lub który klika, aby uruchomić behawior - i na obiekcie celu - tam, gdzie wykonywana jest funkcja. Połączenie tych dwóch obszarów przy użyciu techniki "przeciągnij i upuść" powoduje utworzenie rollovera. Behawiory Drag-and-Drop to nowa metoda pracy z behawiorami w Fireworks.   Po zaznaczeniu obszaru aktywnego lub plastra pojawia się przy nim uchwyt przeciągania (rysunek 21.17). Przeciągnij ten uchwyt z plastra lub obszaru roboczego (uruchamiającego rollover) do plastra celu, aby utworzyć rollover. Możesz utworzyć rollover prosty, przeciągając uchwyt przeciągania behawiora i upuszczając go w tym samym plastrze, lub utworzyć rollover rozdzielny, przeciągając uchwyt przeciągania behawiora i upuszczając go w innym plastrze. Rysunek 21.17. Po zaznaczeniu obszaru aktywnego lub plastra pojawia się przy nim uchwyt przeciągania Istotne jest, aby przed operacją przeciągania przygotować plastry i klatki. Fireworks sam nie doda klatek do dokumentu, tylko dlatego, że przydzielamy do plastra behawior rollover. Tworzenie prostego rollovera za pomocą techniki "przeciągnij i upuść" Aby utworzyć rollover prosty, w którym obszary - uruchamiający i celu, są w tym samym miejscu: Upewnij się, że w swoim dokumencie utworzyłeś drugą klatkę, zawierającą obrazek, który ma pojawić się, gdy użytkownik przesunie kursor nad obszar uruchamiający. Zaznacz plaster uruchamiający, zakrywający obszar obrazka, który będzie uruchamiał behawior. Kliknij i przytrzymaj uchwyt przeciągania behawiora w środku plastra. Kursor przyjmuje kształt pięści. Przeciągnij lekko kursor i upuść go w tym samym plastrze. Pojawi się niebieska linia przeciągania behawiora, biegnąca od środka do lewego górnego rogu obszaru aktywnego lub plastra (rysunek 21.18) Rysunek 21.18. Podczas operacji przeciągania i upuszczania w tym samym obszarze aktywnym lub plastrze, pojawia się w nim linia przeciągania behawiora, biegnąca od środka do lewego górnego rogu Fireworks wyświetli okno dialogowe Swap Image (Zmień obrazek) (rysunek 21.19). Rysunek 21.19. Po operacji przeciągania i upuszczania pojawia się specjalne okno dialogowe Swap Image Z listy rozwijanej Swap Image From wybierz klatkę, która ma zastąpić klatkę bieżącą. Aby otworzyć całe okno dialogowe Swap Image, kliknij przycisk More Options (Więcej opcji). Pełne okno dialogowe Swap Image zostało już omówione w tym rozdziale.   Po zakończeniu kliknij OK Fireworks przydzieli behawior do plastra. Tworzenie rolloverów rozdzielnych za pomocą techniki "przeciągnij i upuść" Aby utworzyć rollover rozdzielny, w którym internetowe obiekty - uruchamiający i celu, znajdują się w różnych miejscach, połącz ze sobą te obiekty za pomocą linii przeciągania behawiora. Aby utworzyć rollover rozdzielny: Upewnij się, że w swoim dokumencie utworzyłeś drugą klatkę, zawierającą obrazek, który ma pojawić się, gdy użytkownik przesunie kursor nad obszar uruchamiający. Upewnij się, że dysponujesz zarówno uruchamiającym, jak i docelowym obszarem roboczym lub plastrem. Zaznacz obiekt internetowy nad obszarem uruchamiającym. Kliknij i przytrzymaj uchwyt przeciągania behawiora w środku plastra lub obszaru aktywnego. Kursor przyjmuje kształt pięści. Przeciągnij kursor i upuść w plastrze celu. Pojawi się niebieska linia przeciągania behawiora, biegnąca od środka internetowego obiektu uruchamiającego do lewego górnego rogu plastra celu (rysunek 21.20). Rysunek 21.20. Po operacji przeciągania i upuszczania, niebieska linia przeciągania behawiora pokazuje związek między plastrem uruchamiającym i celu. Teraz kliknięcie przycisku spowoduje przełączenie większego plastra u dołu Fireworks wyświetli okno dialogowe Swap Image Z listy Swap Image From wybierz klatkę, która będzie przełączana. Aby otworzyć całe okno dialogowe Swap Image, kliknij przycisk More Options Fireworks przydzieli behawior do zaznaczonego obiektu internetowego. Usuwanie behawiorów Drag-and-Drop Aby usunąć behawior Drag-and-Drop, przydzielony do obszaru aktywnego lub plastra: Zaznacz obszar aktywny lub plaster. Istniejące dla obiektu internetowego związki behawiora są prezentowane w postaci niebieskiej linii. Kliknij niebieską linię, którą chcesz usunąć. Fireworks wyświetli okno dialogowe, w którym powierdzasz, że chcesz usunąć behawior. Kliknij OK, aby usunąć behawior. Podsumowanie Fireworks umożliwia dodawanie do obrazków dynamicznych efektów pisanych w ję­zy­ku JavaScript. Wykorzystując behawiory Fireworks, nie musisz nawet znać JavaScriptu, aby stosować go w swoich dokumentach. Korzystając z behawiorów, powinieneś pa­miętać o następujących rzeczach: u      Centrum zarządzania behawiorami znajduje się w palecie Behaviors u      Behawiory mogą być przydzielane tylko do obiektów z warstwy internetowej (ob­szarów aktywnych i plastrów) i nie można ich stosować ze zwykłymi obiek­ta­mi wektorowymi lub bitmapowymi normalnych warstw. u      Rollovery mogą być zwykłymi przyciskami lub rolloverami rozdzielnymi, w któ­rych modyfikowany jest obszar znajdujący się w innym miejscu niż ele­ment uruchamiający zdarzenie. u      Fireworks oferuje okno Button Editor ułatwiające proces tworzenia sym­boli przycisków. u      Działanie rolloverów można sprawdzać w zakładce Preview okna dokumentu. u      Za pomocą behawiora Set Text of Status Bar można wprowadzać komunikaty wy­świe­tlane w pasku stanu przeglądarki. u      Behawior Set Pop-Up Menu umożliwia tworzenie wydajnych i złożonych systemów wyszukiwania, przy minimalnym nakładzie czasu i wysiłku. u      Przy użyciu behawiorów Drag-and-Drop można łatwo i szybko tworzyć rollovery. W następnym rozdziale przyjrzymy się integracji Fireworks z Dreamweaverem. Document Info Accesari: 1554 Apreciat: Comenteaza documentul: Nu esti inregistrat Trebuie sa fii utilizator inregistrat pentru a putea comenta Creaza cont nou A fost util? Daca documentul a fost util si crezi ca merita sa adaugi un link catre el la tine in site Copiaza codul: in pagina web a site-ului tau. <a href="https://www.scritub.com/limba/poloneza/Behawiory-czyli-oywiamy-Firewo6213932.php" target="_blank" title="Behawiory, czyli ożywiamy Fireworks - https://www.scritub.com">Behawiory, czyli ożywiamy Fireworks</a> eCoduri.com - coduri postale, contabile, CAEN sau bancare Politica de confidentialitate | Termenii si conditii de utilizare Copyright © Contact (SCRIGROUP Int. 2025 )