Nie wszyscy projektanci mają przyjemność (lub nieprzyjemność) pracować jedynie z grafiką internetową. Większość artystów tworzy zarówno grafikę, jak i kompletne strony WWW. Projektanci, którzy tworzą jedynie grafikę muszą z kolei blisko współpracować z ludźmi projektującymi całe strony WWW, aby ułatwić im umieszczanie na nich grafiki. Jakby na to nie patrzeć - Fireworks nie jest (i nigdy nie miał być) produktem autonomicznym. Wszystkie grafiki utworzone w tym programie są przeznaczone do publikacji w Internecie.

Doskonałym partnerem Fireworks jest Dreamweaver - program firmy Macromedia do tworzenia stron WWW. Oba programy nie tylko korzystają ze wspólnego Macromedia User Interface, ale dzięki poleceniom pisanym w języku JavaScript, behawiory Fireworks można z powodzeniem wykorzystywać także w Dreamweaverze. Dreamweaver rozpoznaje również obrazki z Fireworks, zarówno całe, jak i pokrojone, i wyświetla inspektora Property Inspector, aby grafikę umieszczoną w Dreamweaverze można było edytować za pomocą narzędzi Fireworks bez konieczności otwierania tego programu. W tym rozdziale omówimy wyżej wymienione funkcje i wiele innych, na przykład wywoływanie poleceń Fireworks z poziomu Dreamweavera.


	Jeśli nie posiadasz własnej kopii Dreamweavera, wykorzystaj demonstracyjną wersję tego programu, która znajduje się na dołączonym do książki CD-ROM-ie.

Podstawowe wiadomości o integracji Fireworks i Dreamweavera

Jak już zostało wspomniane, grafika internetowa wymaga tyle samo pracy twórczej, produkcji i utrzymania. Im wyższa będzie Twoja wydajność (lub wydajność Twoich współpracowników) w umieszczaniu i aktualizowaniu grafiki na stronach WWW, tym bardziej efektywny będzie tok Twojej pracy. Typowa strona WWW składa się przeważnie z wielu elementów graficznych oraz tekstu i innych mediów (takich jak filmy Shockwave i QuickTime), każdy projektant musi zatem wiedzieć, jak wszystkie te elementy mogą ze sobą współpracować. Projekty stron WWW muszą być nie tylko estetyczne, ale i praktyczne, co oznacza, że czas ich pobierania należy ograniczyć do minimum. Wszystkie te zagadnienia wymagają ciągłej współpracy pomiędzy projektantem grafiki i projektantem stron WWW. Firma Macromedia, starając się rozwiązać powyższe problemy, zintegrowała programy Fireworks i Dreamweaver w kompletne środowisko produkcji internetowej.


	Firma Macromedia kontynuuje rozpoczętą od wersji 2 integrację Fireworks z Dreamweaverem. W czwatych wersjach tych programów znajduje się jeszcze więcej funkcji integracyjnych. Nie ma znaczenia kolejność instalowania Fireworks i Dreamweavera - integracja zawsze będzie funkcjonować.

Optymalizacja obrazków z poziomu Dreamweavera

Co jest najczęściej modyfikowane w grafice umieszczonej na stronie WWW? Nie wiem jak inni, ale ja jestem pewien, że chodzi tu o skalowanie obrazków do właściwych wymiarów. Zmiana wymiarów polega na skalowaniu i kadrowaniu obrazka, aby uzyskać jak najmniejszy rozmiar pliku przy utrzymaniu jak najwyższej jakości grafiki. Wszystkie te funkcje zapewnia polecenie Optimize Image in Fireworks, dające pełną kontrolę nad kolorem i animacją grafiki. Najlepsze jednak jest to, że poleceniem tym otwierany jest w Dreamweaverze standardowy interfejs Fireworks.

Jeśli jeszcze nigdy nie korzystałe 16216d318q 47; z polecenia Optimize Image in Fireworks, ostatnie zdanie mogło Cię wprawić w zakłopotanie. Jak można optymalizować obrazek w Dreamweaverze za pomocą standardowego interfejsu Fireworks? Czyż nie mówimy tutaj o dwóch zupełnie różnych programach? Niby tak, ale (i to jest najdziwniejsze) jednak nie. Aby polecenie to mogło zadziałać, musisz mieć zainstalowane oba programy, ale w Dreamweaverze nie jest uruchamiana pełna wersja Fireworks. Zamiast tego, uruchamiana jest "mała" wersja programu wyświetlająca jedynie okno dialogowe Export Preview (rysunek 22.1).

Rysunek 22.1.

Polecenie Optimize Image in Fireworks, bez uruchamiania Fireworks, otwiera okno dialogowe Export Preview, takie samo jak okno o tej samej nazwie używane w Fireworks

Okno dialogowe Optimize posiada wszystkie funkcje okna Export Preview z jednym, małym wyjątkiem: zamiast przycisku Next znajdziesz tutaj przycisk Update. W Fireworks, kliknięcie znajdującego się w oknie Export Preview przycisku Next powodowało otwarcie okna dialogowego Export, w którym mogłeś zdefiniować opcje plastrowania i szablon kodu HTML. Polecenie Optimize Image in Fireworks otwiera okno, w którym domyślnie wybrane będą opcje zdefiniowane przy ostatnim wykorzystaniu tego okna w Fireworks.

Aby z poziomu Dreamweavera zoptymalizować obrazek w Fireworks:

1. Zaznacz w Dreamweaverze obrazek, który chcesz optymalizować.


	Przed uruchomieniem polecenia Optimize Image in Fireworks musisz co najmniej raz zapisać bieżący dokument w Dreamweaverze. Nie chodzi tutaj o zapisanie bieżącego układu strony, lecz o utworzenie pliku, który jest konieczny do poprawnego działania polecenia. Jeśli nie zapiszesz pliku, Dreamweaver wyświetli odpowiednie ostrzeżenie po wybraniu polecenia Optimize Image.

2. Wybierz z menu polecenie Commands Optimize Image in Fireworks


	Polecenie Optimize Image in Fireworks można również wywołać z menu kontekstowego - kliknij prawym klawiszem (kliknij z wciśniętym klawiszem Control) obrazek w Dreamweaverze

3. Jeżeli zaznaczony obrazek jest zapisany w formacie innym niż PNG (Portable Network Graphics), będziesz miał możliwość wyboru, czy Fireworks ma użyć źródłowego pliku zamiast niskiej jakość GIF-a (Graphics Interchange Format) lub JPEG (Joint Photographic Experts Group), co pokazano na rysunku 22.2.

4. Kliknij przycisk No znajdujący się w oknie dialogowym Find Source for Optimizing, aby kontynuować optymalizację obrazka GIF lub JPEG. Kliknij przycisk Yes, jeśli chcesz, aby Dreamweaver automatycznie odszukał, o ile jest to możliwe, plik źródłowy Fireworks. Jeżeli odszukanie pliku nie będzie możliwe, zostanie wyświetlone okno dialogowe Open. Zaznacz w nim źródłowy plik PNG i kliknij przycisk Open

Rysunek 22.2.

Określ czy chcesz, aby Dreamweaver użył jako źródła obrazka źródłowego pliku PNG, jeśli taki istnieje

5. Wprowadź odpowiednie zmiany w zakładkach Options File i Animation okna dialogowego Optimize

6. Po zakończeniu dostosowywania opcji kliknij przycisk Update

Jeżeli pracowałeś ze źródłowym plikiem Fireworks, zmiany zostaną zapisane zarówno w pliku źródłowym, jak i eksportowanym. W przeciwnym wypadku zmodyfikowany zostanie jedynie plik eksportowany.

Jeśli w czasie optymalizacji zmienisz skalę, rozmiar lub skadrujesz obrazek, będziesz musiał dostosować wartości wysokości i szerokości grafiki w inspektorze Property Dreamweavera. Aby to zrobić, wystarczy kliknąć przycisk Refresh (Odśwież).


	Jeśli optymalizowany obrazek jest zapisany w formacie PNG (obojętnie, czy będzie to rozszerzony format używany przez Fireworks do zapisywania wszystkich dodatkowych informacji wykorzystywanych przy edycji, czy też zwykła bitmapa PNG), polecenie Optimize Image in Fireworks zapisze go jako plik bitmapowy. Innymi słowy - zostanie utracona możliwość edycji grafiki. Najlepiej jest więc zapisać plik źródłowy Fireworks w jednym katalogu, zaś do eksportu plików używanych w Internecie (GIF, JPEG lub PNG) używać innego katalogu.

Edycja obrazków z poziomu Dreamweavera

W wielu wypadkach edycja grafiki ogranicza się jedynie do jej optymalizacji. Może to być lekkie wykadrowanie jednej ze stron obrazka lub redukcja rozmiaru pliku. Najczęściej jednak potrzebnych jest więcej możliwości edycji, na przykład gdy klient zadecyduje o zmianie znajdującej się na przycisku nawigacyjnym nazwy oddziału firmy. Gdyby nie integracja Fireworks z Dreamweaverem, musiałbyś w takiej sytuacji uruchomić program graficzny, załadować obrazek, wprowadzić odpowiednie zmiany, zapisać obrazek, przejść do edytora stron WWW i ponownie załadować grafikę. Korzystając z Dreamweavera 4 i Fireworks 4 można znacznie uprościć proces modyfikacji grafiki. Wystarczy wykonać następujące czynności:

1. Zaznacz obrazek w Dreamweaverze i kliknij przycisk Edit w inspektorze Property

Obrazek zostanie automatycznie otwarty w Fireworks (rysunek 22.3).

Rysunek 22.3.

Od razu widać, że obrazek w Fireworks pochodzi z Dreamweavera

2. Zmodyfikuj obrazek w Fireworks i kliknij przycisk Done

Zmodyfikowany obrazek zostanie zapisany i automatycznie zaktualizowany w Dreamweaverze.

Zdefiniowanie Fireworks
jako edytora grafiki dla Dreamweavera

Aby czerpać korzyści z rozbudowanej integracji pomiędzy tymi dwoma programami, musisz ustawić w preferencjach Dreamweavera Fireworks jako domyślny edytor graficzny. Aby to zrobić:

3. W Dreamweaverze, wybierz z menu polecenie Edit Preferences

Zostanie otwarte okno dialogowe Preferences

4. Z listy znajdującej się po lewej stronie okna wybierz kategorię File Types / Editors

5. W panelu File Types / Editors rysunek 22.4) kliknij najpierw typ obrazka w części Extensions (po lewej) i nastepnie kliknij przycisk plus ( ) - nad częścią Editors aby odszukać aplikację Fireworks.

Rysunek 22.4.

Aby szybko zmodyfikować grafikę umieszczoną w Dreamweaverze upewnij się,
że domyślnym edytorem najpopularniejszych formatów grafiki, takich jak GIF,
jest Fireworks

Domyślna ścieżka dostępu Fireworks w Windows to C:\Program Files\ Macromedia\Fireworks 4\Fireworks.exe (rozszerzenie .exe może być niewidoczne). Domyślna ścieżka dostępu Fireworks w MacOS to Macintosh HD:Applications:Fireworks 4:Fireworks 3.


	W jednym przypadku Fireworks nie stosuje się do preferencji Launch i Edit Dreamweavera. Jeżeli wybrany obrazek będzie składał się z plastrów, Fireworks zawsze, niezależnie od ustawień, będzie optymalizował plik eksportowany, a nie źródłowy.

Po zmodyfikowaniu pliku w Fireworks, kliknij przycisk Done albo wybierz z menu polecenie File Update lub użyj skrótu klawiaturowego Ctrl+S Command+S). Jeśli pracujesz ze źródłowym plikiem Fireworks, uaktualnione i zapisane zostaną dwa pliki: źródłowy i eksportowany.


	Jeśli wybierzesz polecenie File Update upewnij się, że plik źródłowy i eksportowany mają takie same wymiary. Jeżeli eksportowany plik jest skadrowaną wersją pliku źródłowego, eksportowany plik zostanie utworzony na podstawie pliku źródłowego i wszelkie informacje o kadrowaniu zostaną utracone. Aby zachować te informacje, zamiast File Update wybierz z menu polecenie File Export, aby ponownie wyeksportować plik.

Odczytywanie dziennika projektu (Design Notes) w Dreamweaverze

Zarówno Dreamweaver, jak i Fireworks mają możliwość zapisywania dziennika projektu, innowacyjnej metody współużytkowania informacji pomiędzy projektantami grafiki pracującymi w Fireworks i twórcami stron WWW używającymi Dreamweavera. Dziennik projektu to zewnętrzny plik zawierający edytowalne informacje o wszystkich elementach Dreamweavera, takich jak dokumenty HTML lub grafiki. Fireworks dodaje dziennik projektu do obrazków eksportowanych na strony Dreamweavera i zapisuje informacje o lokalizacji źródłowego pliku. Umożliwia to Dreamweaverowi optymalizowanie lub edytowanie źródłowego pliku obrazka, bez pytania użytkownika o jego lokalizację.

W Dreamweaverze można odczytywać dziennik projektu Fireworks lub dodawać do niego własne informacje. Najpierw jednak musisz włączyć dziennik projektu dla bieżącej witryny. Aby uaktywnić dziennik projektu:

6. W Dreamweaverze wybierz z menu polecenie Site Define Sites

Zostanie otwarte okno dialogowe Define Sites

7. Zaznacz swoją bieżącą witrynę i kliknij przycisk Edit

Dreamweaver wyświetli okno dialogowe Edit Sites

8. Wybierz kategorię Design Notes, aby wyświetlić panel Design Notes

9. Włącz opcję Maintain Design Notes

10. Jeśli chcesz, aby dostęp do dziennika projektu mieli także Twoi współpracownicy, zaznacz opcję Upload Design Notes for Sharing

11. Kliknij OK, aby zamknąć okno dialogowe Edit Sites, a następnie przycisk Done aby zamknąć okno dialogowe Define Sites

Aby wyświetlić lub dodać dziennik projektu do obrazka Fireworks (lub dowolnego innego):

12. Zaznacz i kliknij obrazek prawym przyciskiem myszy (kliknij z wciśniętym klawiszem Control), aby wyświetlić menu kontekstowe i wybierz z niego pozycję Design Notes

Zostanie otwarte okno dialogowe Design Notes

13. Wybierz zakładkę All Info, aby wyświetlić ścieżkę dostępu pliku źródłowego. Informacje o lokalizacji tego pliku znajdują się w dzienniku projektu pod słowem kluczowym fw_source. Wygląda to mniej więcej tak:

fw_source=file:///D|/DW4 Bible/images/house.png

14. Aby dodać informacje do dziennika projektu, kliknij przycisk Add, a następnie wypełnij pola Name i Value


	Aby zatwierdzić wartość wpisaną w polu Value, wciśnij klawisz Tab zamiast Enter (Return).

Modyfikowanie plastrowanych obrazków

Dzięki poleceniu Insert Fireworks HTML umieszczanie plastrowanych obrazków na stronie WWW w Dreamweaverze jest bardzo prostą operacją. Ale, podobnie jak standardowe nieplastrowane obrazki, często muszą być one modyfikowane. Jedną ze stosowanych metod jest otoczenie tekstu HTML grafiką; w Fireworks, w plastrowanym obszarze, określonym jako plaster tekstowy, może znajdować się dowolna zawartość HTML. Tekst jest często modyfikowany i - jeżeli nie będzie otoczony grafiką, oznaczać to będzie, że obrazek będzie musiał być zmieniony lub widać będzie pojedyncze plastry w związku z podziałem tabeli.

W Dreamweaverze 4, plastrowane obrazki z Fireworks są rozpoznawane jako tabele Fireworks i mogą być modyfikowane przy użyciu dedykowanego inspektora Property (rysunek 22.5). Fireworks Table Property Inspector wyświetla plik źródłowy PNG oraz przycisk Edit, umożliwiający przesłanie całej tabeli z powrotem do Fireworks w celu jej modyfikacji. Podobnie jak w przypadku innych grafik, po zakończeniu modyfikacji kliknij przycisk Done w pasku tytułu dokumentu, aby zaktualizować plik źródłowy i eksportowany. Eksportowane obrazki są następnie ponownie ładowane do Dreamweavera.

Rysunek 22.5.

Aby zmodyfikować grafikę plastrowaną, zaznacz otaczającą ją tabelę i następnie wybierz przycisk Edit w inpektorze Dreamweavera Fireworks Table Property

Fireworks z reguły uwzględnia zmiany wprowadzane w tabeli HTML, jednak przy niektórych zmianach może zamienić Twoją tabelę. Jeżeli, na przykład, w Dreamweaverze dodasz lub usuniesz komórkę z tabeli, Fireworks uzna, że tabele nie pasują do siebie. Pojawi się ostrzeżenie, informujące, że Fireworks zamieni tabelę w Dreamweaverze. Aby nie zmieniać tabeli w Dreamweaverze, nie wprowadzaj żadnych zmian w Fireworks i kliknij przycisk Done.

Obecnie Fireworks płynnie włada językiem Dreamweavera. Wszystkie operacje eksportu umożliwiają generowanie kodu HTML dla obszarów aktywnych, plastrów i behawiorów z użyciem stylu Dreamweaver lub Dreamweaver Library. Programiści projektujący Fireworks i Dreamweavera postarali się o jak najlepsze dostosowanie kodu do obydwu programów.

Styl generowanego kodu HTML, używanego do standardowej operacji eksportu HTML and Images, jest definiowany w oknie dialogowym HTML Setup. Wybierz polecenie File HTML Setup i z rozwijanej listy HTML Style w zakładce General wybierz opcję Dreamweaver. Teraz, podczas operacji eksportu HTML and Images, w oknie dialogowym Export, eksportowany jest kod Dreamweavera.

Polecenie Dreamweavera - Insert Fireworks HTML

W palecie Object Dreamweavera znajduje się logo Fireworks. Przypisane do niego polecenie Insert Fireworks HTML Object umożliwia odszukanie pliku HTML wyeksportowanego z Fireworks i umieszczenie go w bieżącym dokumencie Dreamweavera. Po jego włączeniu, polecenie prosi o podanie lokalizacji pliku generowanego przez Fireworks, co możesz zobaczyć na poniższej ilustracj

Polecenie Insert Fireworks HTML Object przydaje się w sytuacjach, gdy należy wyeksportować z Fireworks większe ilości kodu. Nie trzeba wówczas martwić się o położenia plików HTML. Można eksportować je wszystkie do jednego katalogu, a następnie wstawić w odpowiednie miejsca dokumentu Dreamweavera.

Bardziej szczegółowe informacje na temat eksportowania z Fireworks kodu HTML w formacie Dreamweavera i umieszczania go na tworzonych w Dreamweaverze stronach WWW znajdziesz w rozdziałach 20. i 21.

Biblioteki Dreamweavera eliminują konieczność obsługi kodu generowanego przez Fireworks przy wstawianiu go do Dreamweavera. Dotyczy to nawet najbardziej złożonych behawiorów. Co to jest biblioteka Dreamweavera? Podoba mi się wyjaśnienie jednego z programistów tworzących Fireworks: "Myśl o nich jak o formacie Encapsulated HTML". Porównanie to będzie natychmiast zrozumiałe dla grafików, którzy pracują zwykle z formatem Encapsulated PostScript (EPS). Podobnie jak pliki EPS, elementy bibliotek Dreamweavera mogą zawierać setki wierszy kodu, ale projektant będzie musiał się martwić tylko o jeden element i to na dodatek wizualny.

Aby wyeksportować dokument Fireworks jako element biblioteki Dreamweavera:

15. Wybierz w Fireworks polecenie File Export

Fireworks wyświetli okno dialogowe Export

16. Z listy rozwijanej Save as type Save As) wybierz Dreamweaver Library (.lbi)

Fireworks wyświetli ostrzeżenie, informujące, że musi znać lokalizację katalogu biblioteki witryny w Dreamweaverze. Kliknij OK, aby usunąć ostrzeżenie.

Fireworks wyświetli okno dialogowe Choose a Folder (Wybierz katalog).

17. Wyszukaj katalog biblioteki witryny w Dreamweaverze, a następnie kliknij Select Choose) (Wybierz).

Fireworks ponownie wyświetli okno dialogowe Export

18. W oknie dialogowym Export kliknij przycisk Save, aby zapisać kod biblioteki Dreamweavera.

19. Otwórz w Dreamweaverze dokument, do którego chcesz wstawić eksportowany kod Fireworks.

20. Wybierz polecenie Window Assets, lub kliknij ikonę Assets w Dreamweaver Launcher

Zostanie otwarta paleta Assets

21. Wybierz kategorię Library palety Assets (rysunek 22.6).

22. Zaznacz wyeksportowany element w liście palety.

23. Wybierz polecenie Add to Page lub przeciągnij do okna dokumentu element, który znajduje się na liście albo w panelu podglądu palety, aby wstawić element biblioteki do dokumentu HTML.

Element biblioteki zostanie wstawiony na stronę i zaznaczony.

Rysunek 22.6.

W kategorii Library palety Assets znajdziesz eksportowany element biblioteki Dreamweavera

Elementy biblioteki eksportowane z Fireworks możesz przemieszczać w dowolne położenia na stronie. To samo dotyczy również związanego z tym elementem kodu.

Największą zaletą elementów bibliotek Dreamweavera jest możliwość ich aktualizowania. Po zmodyfikowaniu pojedynczego elementu biblioteki, Dreamweaver automatycznie uaktualni wszystkie wykorzystujące go strony WWW. Jest to funkcja pozwalająca zaoszczędzić mnóstwo pracy i czasu. W przeciwieństwie do zwykłych grafik, które mogą być edytowane po kliknięciu przycisku Edit, który znajduje się w inspektorze Property Dreamweavera, grafikę elementu biblioteki trzeba najpierw odblokować.

Aby zmodyfikować element biblioteki:

24. Wybierz z menu Dreamweavera polecenie Window Assets, aby otworzyć paletę Assets

25. W palecie Assets wybierz kategorię Library

26. Wybierz element biblioteki osadzony na stronie, zaznaczając go na stronie WWW lub w palecie Assets

27. Kliknij znajdujący się w inspektorze Library Item Property przycisk Open (rysunek 22.7).

Rysunek.22.7.

Aby zmodyfikować element biblioteki, zaznacz go i kliknij przycisk Open, który znajduje się w inspektorze Property

Element biblioteki zostanie otwarty w osobnym oknie Dreamweavera.

28. Zaznacz grafikę i kliknij przycisk Edit, który znajduje się w inspektorze Property

Jeżeli plik nie jest zapisany w formacie PNG, Fireworks zapyta Cię, czy chcesz edytować źródłowy plik grafiki i umożliwi jego zlokalizowanie. Wybrany plik PNG zostanie otwarty w Fireworks.

29. Wprowadź żądane zmiany grafiki.

30. Po zakończeniu edycji wybierz z menu polecenie File Update

Zmodyfikowany plik zostanie automatycznie uaktualniony w bibliotece Dreamweavera.

31. Wybierz z menu Dreamweavera polecenie File Save

Dreamweaver zarejestruje, że element biblioteki został zmodyfikowany i zapyta Cię, czy chcesz uaktualnić wszystkie strony bieżącej witryny zawierające ten element. Kliknij przycisk Yes, aby zaktualizować wszystkie elementy biblioteki (wraz z tym, który właśnie zmodyfikowałeś) lub przycisk No, aby odłożyć te zmiany na później.

32. Wybierz z menu polecenie File Close, aby zamknąć okno edycyjne.

Jeśli wolisz odkładać aktualizację elementów biblioteki na później, możesz to zrobić w dowolnej chwili za pomocą polecenia Modify Library Update Pages

Technika Fireworks:
dodawanie warstw CSS do Dreamweavera

W rozdziale tym warto wspomnieć o jeszcze jednej funkcji eksportu oferowanej przez Fireworks 4. Nie jest to funkcja przydatna wyłącznie w Dreamweaverze, ale można ją z powodzeniem wykorzystywać jako element integracji Dreamweaver-Fireworks. Fireworks umożliwia eksportowanie obrazków bezpośrednio do warstw CSS (Cascading Style Sheet - Kaskadowe arkusze stylów). Warstwa CSS jest strukturą, która może być wyświetlana przez wszystkie przeglądarki, w ich wersjach 4. lub późniejszych. Warstwy CSS mają kilka godnych uwagi właściwości:

u Position (Położenie). Warstwy (i oczywiście ich zawartość) mogą być precyzyjnie rozmieszczane na stronach WWW. Umożliwia to dużo łatwiejsze projektowanie stron niż za pomocą tradycyjnych poleceń HTML.

u Depth (Głębia). Warstwy mogą być układane jedna nad drugą, zaś ich kolejność w stosie może być dynamicznie modyfikowana.

u Visibility (Widzialność). Warstwy CSS mogą być ukrywane lub wyświetlane.

u Movement (Ruch). Warstwy mogą być dynamicznie pozycjonowane i przesuwane po ekranie w celu utworzenia animacji.

Eksportuję warstwy CSS do wykorzystania w Dreamweaverze za pomocą dwóch różnych metod: eksportuję warstwy Fireworks lub klatki Fireworks. Wykorzystanie warstw Fireworks jest przydatne przy precyzyjnym definiowaniu układu grafiki względem tła strony. W jednym z projektów, nad tłem strony musiałem precyzyjnie rozmieścić nawet osiem odrębnych grafik. Aby ułatwić sobie pracę, korzystam z poniższej techniki:

33. Otwórz w Fireworks grafikę tła i zablokuj ją w palecie Layers

34. Kliknij przycisk New Layer w palecie Layers

Zostanie utworzona nowa warstwa.


	Jeśli chcesz, możesz zmienić nazwę warstwy. Nazwy warstw Fireworks są używane jako nazwy warstw CSS.

35. Wybierz z menu polecenie Insert Image, aby otworzyć grafikę pierwszego planu.

Możesz również wycinać i wklejać obiekty lub obrazki z innych, otwartych plików.

36. Umieść grafikę w odpowiednim położeniu względem tła.

37. Powtórz kolejno operacje od drugiej do czwartej, tworząc nową warstwę dla każdego obiektu.

Mimo że każdy obiekt jest umieszczany w odrębnej warstwie, w dokumencie są one wyświetlane, jakby znajdowały się wszystkie obok siebie.

38. Po poprawnym rozmieszczeniu wszystkich obiektów, ukryj warstwę tła poprzez kliknięcie ikony oka, która znajduje się obok nazwy warstwy w palecie Layers

39. Wybierz z menu polecenie File Export

Zostanie otwarte okno dialogowe Export

40. Z listy Save as type Save As) wybierz CSS Layers

Fireworks udostępni dalsze opcje związane z eksportowaniem warstw CSS.

41. Z rozwijanej listy Source wybierz element Fireworks, który ma być eksportowany jako warstwa CSS. Do wyboru masz Fireworks Layers Fireworks Frames lub Fireworks Slices

42. Upewnij się, że opcja Trim Images nie jest zaznaczona.

43. Jeżeli eksportujesz przy ustawieniu Fireworks Frames, zanacz pole Current Frame Only, aby ograniczyć eksport tylko do bieżącej klatki.

44. Zaznacz pole wyboru Put Images in Subfolder, aby Fireworks umieszczał pliki obrazków w ich własnym katalogu.

Kliknij przycisk Browse, aby wyszukać stosowny katalog.

45. Kliknij przycisk Save

Każda warstwa Fireworks zostanie zapisana jako odrębny obrazek, zaś w pliku HTML będą zapisane informacje o warstwach CSS.

46. Otwórz w Dreamweaverze plik HTML wygenerowany przez Fireworks.

47. Za pomocą jednej z poniższych metod zaznacz wszystkie znajdujące się na stronie warstwy CSS:

u Wciśnij klawisz Shift i zaznacz wszystkie warstwy w palecie Layers

u Wciśnij klawisz Shift i klikaj kolejno wszystkie symbole warstw CSS wyświetlane w oknie dokumentu Dreamweavera.

48. Wybierz z menu polecenie Edit Copy, aby skopiować zaznaczone warstwy.

49. Wybierz z menu polecenie File Open, aby wyszukać i otworzyć stronę WWW, na której chcesz umieścić warstwy. Docelową stronę WWW możesz otworzyć również z oknie Site

50. Wybierz z menu polecenie Edit Paste, aby wstawić warstwy do dokumentu.

Głębia warstw CSS determinowana jest kolejnością warstw Fireworks - warstwy z większymi numerami umieszczane są nad warstwami z mniejszymi numerami - podobnie jak warstwy znajdujące się wyżej w palecie Layers są wyświetlane nad warstwami znajdującymi się niżej.

Inna metoda wykorzystania warstw CSS eksportowanych z Fireworks - eksportowanie klatek - przydaje się, gdy chcesz utworzyć w Dreamweaverze złożony behawior Show-Hide Layer (Pokaż-Ukryj warstwę). Najczęściej - warstwy są na przemian wyświetlane
i ukrywane nad innymi warstwami. Możliwość takiego rozmieszczania warstw możesz uzyskać poprzez umieszczenie poszczególnych obiektów w odrębnych klatkach Fireworks. Następnie wybierz z menu polecenie File Export i wybierz CSS Layers i Fireworks Frames odpowiednio z rozwijanych list Save as type Save As) i Source. Jeśli chcesz utrzymać względne rozmieszczenie obrazków w klatkach, usuń zaznaczenie opcji Trim Images (Przytnij obrazki). Jeśli zaznaczysz tę opcję, lewe górne wierzchołki wszystkich obrazków będą znajdowały się w jednym punkcie.


	Jeżeli chcesz wyświetlić większą ilość osobno zapisanych obrazków, możesz użyć polecenia Open z włączoną opcją Open as Animation (Otwórz jako animację) w oknie dialogowym Open, aby każdy obrazek został umieszczony w osobnej klatce dokumentu. Następnie wyeksportuj jako warstwy CSS, aby uzyskać eksport w postaci warstw.

Wykorzystywanie behawiorów Fireworks w Dreamweaverze

Programiści rozpoczęli tworzenie Fireworks 4 od modyfikowania kodu Dreamweavera, dlatego behawiory Fireworks mogą być odczytywane przez Dreamweavera. Być może zapytasz i co z tego?. Jeżeli Dreamweaver potrafi rozpoznawać behawiory Fireworks jako swoje własne, zyskujesz możliwość edytowania w Dreamweaverze ich parametrów. Jeśli zastosujesz w Fireworks behawior Set Text of Status Bar, będziesz mógł zmodyfikować w Dreamweaverze treść wyświetlanego przez niego komunikatu.

Fireworks 4 umożliwia eksportowanie kodu dla pięciu kategorii behawiorów: Simple Rollover (Prosty rollover), Swap Image (Zamień obrazek), Set Nav Bar Image (Ustaw obrazek paska nawigacyjnego), Set Pop-Up Menu (Wstaw Listę rozwijaną) i Set Text of Status Bar (Wyświetl komunikat w pasku stanu).


	Do wszystkich behawiorów Fireworks automatycznie wstawiany jest także inny behawior - Preload Images (Załaduj obrazki). Jak wskazuje jego nazwa - powoduje on załadowanie do pamięci podręcznej przeglądarki wszystkich obrazków używanych w rolloverach, by zapewnić ich płynne wyświetlanie.

Aby zmodyfikować behawior Fireworks zastosowany w Dreamweaverze, musisz najpierw otworzyć paletę Dreamweavera - Behaviors (rysunek 22.8), która wygląda podobnie do palety Behaviors Fireworks. Zaznacz w Dreamweaverze obiekt lub znacznik, a wszystkie przydzielone do niego behawiory zostaną wyświetlone w palecie Behaviors

Rysunek 22.8.

Paleta Behaviors Dreamweavera używa zdarzeń i akcji, czyli zachowuje się podobnie jak paleta Behaviors Fireworks

Każdy z behawiorów używa w Dreamweaverze innego okna dialogowego do modyfikowania swoich parametrów, jednak cała procedura edycji właściwości jest taka sama. Aby zmodyfikować w Dreamweaverze behawior wygenerowany z Fireworks:

51. Otwórz w Dreamweaverze plik zawierający kod HTML wygenerowany przez Fireworks.

52. Wybierz z menu polecenie Window Behaviors, aby otworzyć paletę Behaviors

Możesz również kliknąć przycisk Behavior w Launcherze Dreamweavera.

53. Zaznacz obrazek, obiekt lub znacznik, do którego przydzielony jest behawior.

W palecie Behaviors zostaną wyświetlone zdarzenia i akcje behawiora.

54. Aby zmienić zdarzenie uruchamiające behawior, kliknij strzałkę znajdującą się obok jego nazwy i wybierz nowe zdarzenie z listy rozwijanej.


	Lista dostępnych zdarzeń zmienia się w zależności od znacznika związanego z behawiorem.

55. Aby zdefiniowana akcja była uruchamiana przed inną akcją, która korzysta z tego samego zdarzenia (na przykład dwa zdarzenia onClick), zaznacz akcję i użyj przycisków Up (Do góry) i Down (W dół) w palecie Behaviors, aby zmienić kolejność behawiorów.

56. Kliknij dwukrotnie behawior, który chcesz zmodyfikować.

Zostanie otwarte odpowiednie okno dialogowe, na przykład Set Nav Bar Image pokazane na rysunku 22.9.

Rysunek 22.9.

Za pomocą specyficznego
dla każdego behawiora okna dialogowego Dreamweavera możesz wprowadzić wszystkie niezbędne zmiany parametrów behawiora.

57. Wprowadź wszystkie żądane zmiany w otwartym oknie dialogowym.

58. Kliknij przycisk OK

Behawior Fireworks Set Nav Bar Image jest w Dreamweaverze 4 przekształcany na trzy osobne behawiory, z których każdy może być oddzielnie modyfikowany. Oto one:

u Set Nav Bar Image (Ustaw obrazek paska nawigacyjnego). Steruje stanami Down i wyróżnionym Down (są to przeważnie klatki Frame 3 i Fireworks).

u Swap Image (Zamień obrazek). Steruje rolloverami paska nawigacyjnego.

u Swap Image Restore (Przywróć oryginalny obrazek). Przywraca rolloverom ich stany Up, gdy użytkownik przesunie kursor znad przycisku w inne położenie.

Technika Fireworks: tworzenie internetowego albumu fotograficznego

Katalogi internetowe i inne witryny do prezentacji sprzedawanych produktów wykorzystują przeważnie obrazki. Pełnowymiarowe zdjęcia są duże i długo bywają pobierane z Internetu, więc większość projektantów wykorzystuje na stronach miniaturowe wersje obrazków. Jeżeli użytkownik chce obejrzeć więcej szczegółów, może kliknąć miniaturę i załadować większe zdjęcie. Zapisanie pomniejszonych wersji obrazków w programach graficznych i umieszczenie ich w edytorze HTML nie jest zbyt trudnym zadaniem, ale utworzenie wielu stron zawierających takie obrazki bywa uciążliwe. Z pomocą przychodzi w takich sytuacjach oferowane przez Dreamweavera polecenie, które jest doskonałym przykładem integracji Dreamweaver-Fireworks - Create Web Photo Album (Utwórz internetowy album fotograficzny).

Jeżeli posiadasz Dreamweavera 4 i Fireworks 4, możesz wykorzystywać polecenie Create Web Photo Album do tworzenia prezentacji, które umożliwiają użytkownikowi przeglądanie miniatur obrazków, które mogą być klikane w celu wyświetlenia pełnowymiarowych wersji. Create Web Photo Album jest poleceniem Dreamweavera, ale do przetwarzania obrazków wykorzystuje Fireworks, który je skaluje i przekształca wszystkie pełnowymiarowe obrazki na miniatury.

Aby utworzyć internetowy album fotograficzny z wykorzystaniem Dreamweavera i Fireworks:

59. Umieść wszystkie potrzebne obrazki w jednym katalogu znajdującym się w dowolnym miejscu.

Polecenie Create Web Photo Album umożliwia wybranie tylko jednego katalogu z obrazkami.

60. Wybierz z menu Dreamweavera polecenie Commands Create Web Photo Album

Dreamweaver otworzy okno dialogowe Create Web Photo Album (rysunek 22.10).

Rysunek 22.10.

Podczas tworzenia internetowego albumu fotograficznego możesz wybierać spośród bogatego zestawu opcji

61. W polu tekstowym Photo Album Title wpisz tytuł swojego albumu.

Tytuł ten będzie wyświetlany u góry strony WWW z miniaturami.

62. Jeżeli chcesz, w polu Subheading Info możesz wpisać podtytuł albumu.

Będzie on wyświetlany bezpośrednio pod tytułem strony z miniaturami.

63. Jeśli chcesz, w polu Other Info możesz wpisać dodatkowe informacje, które będą wyświetlane bezpośrednio pod tytułem i podtytułem strony z miniaturami.

64. Kliknij przycisk Source Images Folder Browse i wybierz katalog zawierający zdjęcia, które chcesz dodać do albumu.

Do albumu zostaną dodane wszystkie obrazki znajdujące się w wybranym katalogu i posiadające następujące rozszerzenia plików:

u .gif

u jpg lub .jpeg


	Korzystanie z obrazków JPEG jako plików źródłowych nie jest zalecane. Kompresja JPEG tworzy pliki nadające się do przeglądania, ale nie do importu lub ponownego eksportu.

u .png

u .tif lub .tiff

u .psd


	Dla użytkowników MacOS: Obrazki nie posiadające rozszerzeń plików są ignorowane przez Fireworks i nie zostaną dodane do albumu fotograficznego. Do każdego takiego obrazka będziesz musiał dodać odpowiednie rozszerzenie pliku.

65. Kliknij przycisk Destination Folder Browse, aby wybrać lub utworzyć katalog dla wszystkich eksportowanych obrazków i plików HTML.

66. Z rozwijanej listy Thumbnail Size wybierz rozmiar tworzonych miniatur obrazków.

Aby utworzyć miniatury o zdefiniowanych rozmiarach, Fireworks proporcjonalnie skaluje obrazki.

67. Zaznacz opcję Show Filename, aby pod miniaturami wyświetlić nazwy plików oryginalnych obrazków.

68. W polu Columns wpisz liczbę kolumn miniatur.

69. Z rozwijanej listy Format wybierz format eksportowanych miniatur.

70. Z rozwijanej listy Photo Format wybierz format eksportowanych pełnowymiarowych obrazków albumu.

71. Jeżeli chcesz, w polu Scale możesz wpisać skalę obrazków albumu. Pozostawienie wartości 100% pozwala utworzyć obrazki o takich samych wymiarach, jakie mają oryginalne obrazki.


	Ustawienie skali jest stosowane do wszystkich obrazków albumu.

72. Jeżeli chcesz, możesz zaznaczyć opcję Create Navigation Page for Each Photo, aby dla każdego obrazka w albumie utworzyć osobną stronę WWW.


	Jeżeli nie zaznaczysz opcji Create Navigation Page for Each Photo, miniatury będą połączone bezpośrednio z pełnowymiarowymi obrazkami. Jest to najczęściej wykorzystywana metoda przy tworzeniu internetowych albumów fotograficznych.

73. Kliknij przycisk OK

Zostanie uruchomiony Fireworks (jeśli jeszcze nie jest otwarty), który dla każdego obrazka zaimportowanego do albumu utworzy miniaturę i pełnowymiarowy obrazek. Po utworzeniu wszystkich obrazków, Dreamweaver wygeneruje niezbędny kod HTML.

74. Dreamweaver wyświetli okno dialogowe Album Complete. Kliknij przycisk OK aby zakończyć sesję tworzenia albumu.

Otwórz album fotograficzny w przeglądarce internetowej albo umieść go na stronie WWW tworzonej w Dreamweaverze.

Tworzenie poleceń hybrydowych

Obsługa skryptów przez Dreamweavera i Fireworks umożliwia projektantom internetowym tworzenie własnych poleceń przeznaczonych dla obu aplikacji. Ogromne możliwości zapewnia fakt, że Dreamweaver obsługuje skrypty Fireworks, co z kolei pozwala na wykonywanie skryptów Dreamweavera przez Fireworks.

Poniższa procedura przedstawia sposób komunikacji Dreamweavera z Fireworks:

75. Użytkownik uruchamia polecenie w Dreamweaverze.

76. Dreamweaver otwiera okno dialogowe, jak w przypadku innych rozszerzeń.

77. Po zdefiniowaniu opcji polecenia i kliknięciu przycisku OK, polecenie jest wykonywane.

78. Wszystkie parametry zdefiniowane przez użytkownika są odczytywane i używane do utworzenia skryptletu JavaScript lub funkcji, które dostarczają instrukcje dla Fireworks.

79. Jeśli zostanie użyty skryptlet, jest on zapisywany na dysku.

80. Fireworks jest uruchamiany i powiadamiany o konieczności wykonania skryptletu lub funkcji utworzonej przez Dreamweavera.

81. Fireworks wykonuje skryptlet lub funkcję, zaś Dreamweaver śledzi ich postęp za pomocą cookies znajdujących się w komputerze użytkownika.

82. Po wykonaniu operacji przez Fireworks zwracany jest pozytywny rezultat.

Interfejs API (Application Programming Interface) Fireworks zawiera kilka kodów obsługujących napotkane błędy, takie jak brak wolnego miejsca na dysku.

83. Śledząc postęp wykonywania operacji przez Fireworks, Dreamweaver "zauważy" pozytywny wynik i umieści grafikę na bieżącej stronie poprzez przeformatowanie tzw. DOM (Document Object Model) dla aktualnie otwartej w nim strony.

84. Okno dialogowe zostanie zamknięte, zaś bieżąca strona zostanie odświeżona, aby poprawnie wyświetlić końcowy produkt.

Aby wykorzystać wszystkie możliwości sterowania Fireworks, musisz w pełni zrozumieć możliwości oferowane przez DOM Fireworks i jego rozszerzenia. Potrzebne informacje znajdziesz w dokumentacji o nazwie Extending Fireworks wydanej przez firmę Macromedia, którą znajdziesz na CD-ROM-ie Fireworks 4 lub na stronie Fireworks Support Center pod adresem www.macromedia.com/support/fireworks.


	Szczegółowe informacje o interfejsie API Fireworks znajdziesz w rozdziale 26., a o palecie History, pozwalającej na tworzenie poleceń bez pisania kodu, przeczytasz w rozdziału 19.

W interfejsie API znajdziesz również siedem przydatnych metod FWLaunch JSExtension, które dotyczą Dreamweavera, i które opisane zostały w tabeli 22.2.

Nie bój się eksperymentować z funkcjami integracji Dreamweaver-Fireworks i ogólnie z rozszerzeniami. Ekscytujące możliwości czekają tylko na ich odkrycie.

Tabela 22.1.

Metody FWLaunch

Metoda	Zwracana wartość	Zastosowanie
BringDWToFront()	Brak	Przenosi okno Dreamweavera na wierzch okien wszystkich innych uruchomionych aplikacji
BringFWToFront()	Brak	Przenosi okno Fireworks na wierzch okien wszystkich innych uruchomionych aplikacji
ExecJsInFireworks (javascriptOrFileURL)	Zwraca wynik skryptletu uruchomionego w Fireworks. Jeśli operacja się nie powiedzie, zwracany jest kod błędu*	Wykonuje dostarczone funkcje lub skryptlety napisane w JavaScripcie
GetJsResponse (progressTrackerCookie)	Zwraca wynik skryptletu uruchomionego w Fireworks: czy uruchomienie się powiodło, zero, jeżeli wciąż jest uruchamiany, lub zwracany jest kod błędu*	Ustala, czy Fireworks zakończył uruchamianie przekazanego JavaScriptu, czy powiodło się uruchomienie, czy zwrócił błąd.
MayLaunchFireworks()	boole'owska	Ustala, czy może zostać uruchomiony Fireworks
OptimizeInFireworks (fileURL, docURL, )	Zwraca wynik skryptletu uruchomionego w Fireworks. Jeśli operacja się nie powiedzie, zwracany jest kod błędu*	Wykonuje optymalizację grafiki w oknie Export Preview Fireworks
ValidateFireworks (versionNumber)	boole'owska	Ustala, czy użytkownik posiada określoną przez parametr wersję Fireworks

Kody błędów: 1) nieprawidłowy argument; 2) błąd wejścia-wyjścia pliku (File I/O); 3) niewłaściwa wersja Dreamweavera; 4) niewłaściwa wersja Fireworks; 5) operacja przerwana przez użytkownika

Podsumowanie

Integrację Fireworks z Dreamweaverem jest typowym przykładem potwierdzającym przysłowie "w jedności siła". Każdy z programów posiada własne zalety, czyniące go doskonałym narzędziem internetowym, które po połączeniu dają rozwiązanie kompletne, umożliwiające tworzenie grafiki internetowej. Pracując z Dreamweaverem i Fireworks jednocześnie, powinieneś pamiętać o następujących rzeczach:

u Dreamweaver 4 zyskuje nowe funkcje po zainstalowaniu Fireworks 4.

u Wykorzystując polecenie Optimize Image in Fireworks, nie musisz nawet opuszczać Dreamweavera, aby przeskalować, skadrować lub zapisać grafikę w innym formacie.

u Po zdefiniowaniu Fireworks jako edytora grafiki Dreamweavera, edytowane w Fireworks obrazki będą automatycznie aktualizowane na tworzonej stronie WWW.

u Fireworks generuje kod zgodny z Dreamweaverem, co umożliwia łatwe modyfikowanie tego kodu w Dreamweaverze.

u Obrazki Fireworks eksportowane jako elementy biblioteki Dreamweavera mogą być umieszczane na stronach WWW bez konieczności wycinania i wklejania.

u Eksportując warstwy Fireworks jako warstwy CSS, możesz na stronie WWW zachować rozmieszczenie obiektów ustalone w dokumencie Fireworks.

u Polecenia hybrydowe pracujące w Dreamweaverze i Fireworks otwierają nowe możliwości w automatyzacji pracy.

W następnym rozdziale poznasz możliwości tworzenia animacji w Fireworks

Document Info

Accesari: 2329
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.

eCoduri.com - coduri postale, contabile, CAEN sau bancare

Politica de confidentialitate | Termenii si conditii de utilizare

Integracja z Dreamweaverem

Poloneza

ALTE DOCUMENTE