Zdarzyło Ci się kiedyś odwiedzić stronę, w której zerwane były wszystkie łącza z obrazkami? W takich sytuacjach jedynymi obiektami na stronie - oprócz tekstu - są prostokąty z ikoną przeglądarki mówiącą, że "No graphic found" ("Nie znaleziono grafiki"). Dla przeglądarki strona internetowa jest właśnie zbiorem tekstu i prostokątów. Możesz korzystać z obrazków w formacie GIF i ukrywać ich prostokątne kształty, ale łącza nie będziesz mógł ograniczyć jedynie do widzialnego obszaru obrazka. W takich przypadkach musisz wykorzystać mapy obrazków i plastry, które umożliwiają łączenie ze sobą łączy o nieregularnych kształtach, takich jak symbol yin yang.

Fireworks doskonale obsługuje mapy obrazków i plastry. Zarówno jedne, jak i drugie (lub ich odrębne części nazywane obszarami aktywnymi) są w Fireworks nazywane wspólnie obiektami internetowymi i spełniają kilka różnych funkcji. Oprócz możliwości unikania regularnych kształtów na stronach WWW, obiekty internetowe dają także możliwość tworzenia elementów interaktywnych oraz nadawania stronom indywidualnego stylu za pomocą behawiorów. Możesz zaprojektować całą witrynę WWW i nie otrzeć się o obszary aktywne i plastry, ale pełne zrozumienie ich zastosowań i ograniczeń pozwoli urozmaicić Twoje projekty.


	W tym rozdziale poznasz podstawowe zasady definiowania obszarów aktywnych i plastrów oraz niektóre techniki ich umieszczania na stronach WWW. Więcej informacji o tworzeniu elementów reagujących na zdarzenia myszy oraz wykorzystywaniu innych behawiorów w Fireworks znajdziesz w rozdziale 21.

Podstawowe wiadomości o mapach obrazków i obszarach aktywnych

Aby zrozumieć, jak działają mapy obrazków, wystarczy, że przeanalizujesz mapę dowolnego państwa. Podziały na regiony i terytoria są zazwyczaj geograficzne i rzadko mają regularne kształty. Aby taką mapę umieścić w Internecie, każdy z regionów geograficznych (rejonów lub województw) powinien być odrębnym obszarem, który użytkownik będzie mógł kliknąć (rysunek 20.1). W taki właśnie sposób działa każda mapa obrazka.

Rysunek 20.1.

Przykład prostej mapy obrazka wykonanej na podstawie prawdziwej mapy

Circle ... - Okrągły obszar aktywny

Rectangle ... - Prostokątny obszar aktywny

Polygon ... - Wielokątny obszar aktywny

Każdy odrębnie zdefiniowany obszar mapy obrazka nazywany jest obszarem aktywnym. Mogą one mieć kształty okręgów, prostokątów lub wielokątów. Prostokąt oznacza tu prostokąt lub kwadrat, zaś okrąg - okrąg lub owal. Każdy inny kształt jest wielokątem. Po zdefiniowaniu obszaru mapy obrazka możesz nadać mu nazwę i przydzielić do niego URL. Obszary aktywne mogą być wykorzystywane także do uruchamiania różnych zdarzeń, na przykład reakcji na zdarzenia myszy lub wyświetlania komunikatów. Obszary aktywne nie są częścią końcowego obrazka, i są niewidoczne w przeglądarkach internetowych. Aby obszar aktywny mógł zostać wykorzystany na stronie WWW, informacje o nim muszą być przekształcone na kod HTML i osadzone na stronie.

Mapy obrazków i plastry działają dzięki generowanemu kodowi HTML. Jako że w plikach graficznych nie są osadzane żadne dane, musisz wyeksportować z Fireworks zarówno obrazki, jak i cały potrzebny kod HTML i umieścić wszystkie te elementy na stronie WWW. W dalszej części rozdziału dowiesz się, że Fireworks umożliwia nie tylko bezproblemowe ich eksportowanie, ale oferuje wiele dodatkowych opcji, które ułatwiają osadzanie grafiki i kodów na stronach WWW.

Narzędzia do tworzenia obszarów aktywnych

Narzędzia do tworzenia obszarów aktywnych znajdują się w lewej dolnej części palety narzędziowej Fireworks. Poniżej zamieszczone są opisy działania narzędzi do tworzenia obszarów aktywnych o trzech podstawowych kształtach:

u 939r171j 939r171j Rectangle (Prostokąt)

Służy do rysowania prostokątnych i kwadratowych obszarów aktywnych. Nie można zaokrąglać ich narożników, jak w przypadku standardowego narzędzia Rectangle, ale możliwe jest korzystanie z klawiszy modyfikujących.

u 939r171j 939r171j Circle (Okrąg)

Służy do rysowania eliptycznych i okrągłych obszarów aktywnych. Klawisze modyfikujące: Shift i Alt Option) działają tak samo, jak było to przedstawione w przypadku standardowego narzędzia Ellipse

u 939r171j 939r171j Polygon (Wielokąt)

Służy do rysowania obszarów aktywnych o nieregularnych kształtach. Działa podobnie do narzędzia Polygon Lasso - aby utworzyć kształt obszaru aktywnego, nanosi wiele punktów i łączy je za pomocą prostych odcinków.

Po narysowaniu obszary aktywne wyglądają, jakby zostały nałożone na inne obiekty (rysunek 20.2). Fireworks przechowuje wszystkie obszary aktywne (i plastry) na internetowej warstwie (Web Layer), która jest współużytkowana przez wszystkie klatki dokumentu. Warstwa ta może być blokowana, ukrywana, a nawet można zmieniać jej położenie względem innych warstw. Zachowuje się więc jak inne standardowe warstwy. Początkowo wszystkie obszary aktywne wyświetlane są w tym samym kolorze, ale za pomocą palety Object można każdemu z nich nadać inny kolor.

Rysunek 20.2.

Za pomocą trzech narzędzi
do tworzenia obszarów aktywnych możesz rysować je
na warstwie internetowej

Rectangle Hotspot tool - Narzędzie do tworzenia prostokątnych obszarów aktywnych

Polygon Hotspot - Wielokątny obszar aktywny

Circle Hotspot - Okrągły obszar aktywny

Circle Hotspot tool - Narzędzie do tworzenia okrągłych obszarów aktywnych

Polygon Hotspot tool - Narzędzie do tworzenia wielokątnych obszarów aktywnych

Rectangle Hotspot - Prostokątny obszar aktywny

Web Layer - Warstwa internetowa

Prostokątne obszary aktywne

Jak zostało wcześniej wspomniane, narzędzia do tworzenia obszarów aktywnych działają podobnie do narzędzi, które służą do tworzenia standardowych kształtów. Istnieje jednak pomiędzy nimi kilka zasadniczych różnic. Aby utworzyć prostokątny obszar aktywny:

939r171j 939r171j 939r171j 939r171j 939r171j 939r171j 939r171j 939r171j 1. Wybierz narzędzie Rectangle Hotspot z palety narzędziowej.

939r171j 939r171j 939r171j 939r171j 939r171j 939r171j 939r171j 939r171j 2. Kliknij, aby ustalić położenie pierwszego wierzchołka i przeciągnij do przeciwległego wierzchołka prostokąta. W trakcie przeciągania Fireworks będzie wyświetlał kontury tworzonego kształtu.


	Aby utworzyć kwadratowy obszar aktywny, wciśnij w czasie rysowania kształtu klawisz Shift. Aby rysować obszar aktywny od środka zamiast od wierzchołka, wciśnij w czasie rysowania klawisz Alt (Option). Możesz również wcisnąć oba klawisze jednocześnie, aby narysować kwadrat od środka.

939r171j 939r171j 939r171j 939r171j 939r171j 939r171j 939r171j 939r171j 3. Zwolnij przycisk myszy, gdy tworzony prostokąt osiągnie odpowiednie rozmiary i kształt.

Fireworks utworzy obszar aktywny i wypełni go kolorem (rysunek

Rysunek 20.3.

Użyj narzędzia Rectangle Hotspot

do tworzenia kwadratowych i prostokątnych obszarów aktywnych

Okrągłe obszary aktywne

Aby narysować owalny lub okrągły obszar aktywny:

939r171j 939r171j 939r171j 939r171j 939r171j 939r171j 939r171j 939r171j 1. Wybierz narzędzie Circle Hotspot z palety narzędziowej. Jeśli nie widzisz tego narzędzia w palecie, kliknij i przytrzymaj widoczne narzędzie Hotspot. Kiedy zostanie rozwinięta grupa narzędzi, wybierz z niej przycisk Circle Hotspot

939r171j 939r171j 939r171j 939r171j 939r171j 939r171j 939r171j 939r171j 2. Kliknij, aby ustalić początkowy punkt kształtu i przeciągnij po przekątnej, aby utworzyć okrąg lub elipsę. W trakcie przeciągania Fireworks będzie wyświetlał kontury tworzonego kształtu.


	Wciśnij klawisz Shift, aby narysować okrąg. Po wciśnięciu klawisza Alt (Option) kształt będzie tworzony od środka.

939r171j 939r171j 939r171j 939r171j 939r171j 939r171j 939r171j 939r171j 3. Zwolnij przycisk myszy, gdy tworzony okrąg lub elipsa osiągnie odpowiednie rozmiary i kształt.

Fireworks utworzy obszar aktywny (rysunek 20.4).

Rysunek 20.4.

Użyj narzędzia Circle Hotspot
do tworzenia okrągłych i owalnych obszarów aktywnych

Dość trudno jest utworzyć obszar aktywny o wymiarach i kształcie dokładnie pasujących do owalnego obiektu. Jednak istniejące obszary aktywne można przesuwać za pomocą narzędzia Pointer, skalować za pomocą narzędzi transformacji oraz numerycznie dostosowywać ich wymiary i położenia za pomocą palety Info. Jeśli owalny obszar aktywny tworzony jest dla oddzielnego obiektu (a nie dla owalnego fragmentu większego obiektu), najłatwiej jest zaznaczyć obiekt i wybrać z menu polecenie Insert Hotspot. Fireworks utworzy wówczas obszar aktywny za Ciebie.

939r171j 939r171j 939r171j 939r171j 939r171j 939r171j 939r171j 939r171j 4. Wybierz narzędzie Polygon Hotspot z palety narzędziowej. Jeśli nie widzisz go w palecie, kliknij i przytrzymaj widoczne narzędzie Hotspot tak długo, aż zostanie rozwinięta grupa narzędzi, a następnie wybierz z niej przycisk Polygon Hotspot

939r171j 939r171j 939r171j 939r171j 939r171j 939r171j 939r171j 939r171j 5. Kliknij, aby utworzyć pierwszy wierzchołek obszaru aktywnego, przesuń wskaźnik myszy do miejsca, w którym chcesz wstawić kolejny wierzchołek tworzonego kształtu i kliknij ponownie.

Fireworks łączy poszczególne naniesione punkty za pomocą linii prostych (rysunek 20.5).

Rysunek 20.5.

Podczas nanoszenia kolejnych wierzchołków, Fireworks łączy je i tworzy wielokątny obszar aktywny

939r171j 939r171j 939r171j 939r171j 939r171j 939r171j 939r171j 939r171j 6. Powtarzaj poprzednią czynność do czasu, aż uzyskasz odpowiedni kształt.

Po naniesieniu każdego z kolejnych wierzchołków Fireworks wypełni obszar aktywny kolorem domyślnym.

939r171j 939r171j 939r171j 939r171j 939r171j 939r171j 939r171j 939r171j 7. Kliknij pierwszy wierzchołek, aby zamknąć tworzony wielokąt i utworzyć obszar aktywny.

Fireworks utworzy wielokątny obszar aktywny i wypełni go kolorem.

Przydzielanie łączy do obszarów aktywnych

Paleta Object pozwala na wiele więcej niż tylko zdefiniowanie koloru obszarów aktywnych. Właściwie paletę Object (rysunek 20.6) można uznać za czwarte narzędzie do tworzenia obszarów aktywnych. Aby stał się on użyteczny, trzeba do niego przydzielić łącze i zdefiniować odpowiednie opcje HTML. Wszystko to można zrobić z poziomu palety Object

Oto opcje obszarów aktywnych dostępne w palecie Object

Rysunek 20.6.

Za pomocą palety Object można zdefiniować dla zaznaczonego obszaru aktywnego dane niezbędne w Internecie, takie jak adres URL

u 939r171j 939r171j Current URL (Bieżący URL). Pole służące do przydzielania i wyświetlania łącza związanego z zaznaczonym obszarem aktywnym. Nowe łącze możesz wpisać ręcznie w polu tekstowym lub wybrać z rozwijanej listy jedno z istniejących wcześniej. Rozwijana lista łączy może być podzielona na trzy części: opcję No URL noHREF (Brak adresu URL), historię łączy używanych w bieżącym dokumencie i bieżącą bibliotekę URL.


	Więcej informacji na temat zarządzania łączami za pomocą historii oraz bibliotek URL, oraz o łączach w ogóle, znajdziesz w rozdziale 18.

u 939r171j 939r171j Alt tag (Znacznik alt). Pole służące do definiowania tekstu zastępczego wyświetlanego, gdy obrazek nie może zostać znaleziony na serwerze lub gdy użytkownik zbyt długo przytrzyma kursor nad obrazkiem. W tym drugim przypadku zastępczy tekst jest wyświetlany w etykiecie "przyczepionej" do kursora. Fireworks generuje kod HTML zarówno dla standardowego znacznika alt, jak i dla atrybutu title wymaganego przez przeglądarkę Internet Explorer.

u 939r171j 939r171j Link target (Cel). Cel definiujący miejsce wyświetlenia wywoływanej przez łącze strony WWW. Cele są najczęściej wykorzystywane w układach ramek HTML. Możesz ręcznie wpisać nazwę docelowej ramki w polu tekstowym Target lub wybrać jeden z celów standardowych:

u _blank pozostawia dostępne bieżące okno i otwiera łącze w nowym oknie przeglądarki.

u _parent otwiera łącze w nadrzędnej ramce bieżącego układu ramek.

u _self otwiera łącze w bieżącej ramce, zastępując jej dotychczasową zawartość (jest to cel wybierany domyślnie).

u _top otwiera łącze w najbardziej zewnętrznym zestawie ramek bieżącej strony WWW, zastępując dotychczasową zawartość.

u 939r171j 939r171j Color (Kolor) Po utworzeniu, wszystkie obszary aktywne wypełniane są tym samym, półprzezroczystym kolorem. Możesz jednak zmienić kolor każdego z obszarów aktywnych na jeden z kolorów, które dostępne są w rozwijanym próbniku.

u 939r171j 939r171j Shape (Kształt). Wyświetla kształt zaznaczonego obszaru aktywnego. Kształt ten determinowany jest typem narzędzia, które zostało użyte do jego utworzenia i określa odpowiedni fragment kodu HTML. Możesz zmienić kształt obszaru aktywnego, wybierając jedną z opcji dostępnych w liście Shape, ale pamiętaj, że spowoduje to jego radykalną zmianę.

Jeśli wpisujesz łącze bezpośrednio w polu tekstowym Current URL, uważaj na jego pisownię. Serwery internetowe są bardzo wrażliwe na wszelkie błędy literowe (reagują nawet na pomyłki w wielkości liter). Możesz zastąpić wpisywanie łączy jedną z funkcji Fireworks - Import URL - znajdującą się w palecie URL, która umożliwia zaimportowanie łączy z dowolnego pliku HTML. Opis tej funkcji znajdziesz w rozdziale 18.

Przekształcanie obiektów na obszary aktywne

Jako projektant, który niejednokrotnie łączył ze sobą wiele punktów, aby uzyskać obszar aktywny w kształcie gwiazdy, serdecznie polecam możliwość konwersji obiektów na obszary aktywne. Zamiast męczyć się z tworzeniem skomplikowanego kształtu za pomocą narzędzi do tworzenia obszarów aktywnych, zaznacz obiekt i wybierz z menu polecenie Insert Hotspot. Na internetowej warstwie zostanie utworzony obszar aktywny o kształcie dokładnie dopasowanym do obiektu docelowego. Teraz musisz jedynie przydzielić do niego łącze. Polecenie to pracuje z wszystkimi standardowymi kształtami: prostokątami, elipsami i wielokątami, a także ze ścieżkami wektorowymi, obrazkami i obiektami tekstowymi.


	Jeśli przed użyciem polecenia Insert Hotspot zaznaczysz więcej niż jeden obiekt, Fireworks zapyta Cię, czy chcesz utworzyć jeden czy wiele obszarów aktywnych. Jeśli wybierzesz jeden punkt, Fireworks utworzy na internetowej warstwie jeden prostokątny obszar aktywny, który będzie obejmował wszystkie zaznaczone obiekty.

Eksportowanie kodu dla map obrazków

Kod HTML mapy obrazka składa się z dwóch części. Pierwsza z nich to znacznik obrazka - <img> - przechowujący informacje o całej grafice. Atrybuty znacznika <img> to src (nazwa pliku grafiki), rozmiar obrazka i połączenie z mapą obrazka - usemap. Atrybut usemap jest ustawiany na nazwę drugiego elementu mapy obrazka - znacznika <map>. Wewnątrz pary znaczników <map>...</map>, dla każdego obszaru aktywnego w mapie obrazka istnieje odpowiedni znacznik <area>. Poniżej zamieszczony jest kod dla mapy obrazka składającej się z pięciu obszarów aktywnych:

SKŁAD: proszę przepisać tu kod ze strony 632

Fireworks wygeneruje cały powyższy kod i dodatkowo umożliwi wybór stylu kodu, który uzależniony jest od narzędzia do tworzenia stron WWW, dla jakiego został przeznaczony. Wszystko, co będziesz musiał później zrobić, to umieszczenie kodu HTML na tworzonej stronie WWW.

Wybór stylu HTML

Kod HTML dla mapy obrazka jest generowany przez Fireworks podczas eksportu obrazka. Styl eksportowanego kodu HTML zależy od ustawienia HTML Style w oknie dialogowym HTML Setup (rysunek 20.7). Możliwość wyboru stylu, który jest dopasowany do potrzeb Twojego programu do tworzenia stron WWW, ułatwia późniejsze osadzanie kodów generowanych przez Fireworks.

Rysunek 20.7.

W oknie dialogowym HTML Setup wybierz styl kodu HTML i dodatkowe opcje

Oto standardowe style kodu HTML eksportowane przez Fireworks:

u 939r171j 939r171j Generic (Ogólny). Podstawowy kod, który bywa przydatny przy ręcznym tworzeniu stron WWW. Jest odpowiedni dla większości narzędzi autorskich obsługujących standardowy HTML.

u 939r171j 939r171j Dreamweaver. Kod dostosowany do Dreamweaver. Dla kodu map obrazków, nie ma specjalnej różnicy pomiędzy stylami Generic i Dreamweaver

Fireworks może również eksportować kod HTML jako pozycję biblioteki Dreamweaver Library. Więcej informacji w dalszej części rozdziału.

u 939r171j 939r171j GoLive. Kod optymalizowany pod kątem edytora GoLive firmy Adobe.

u 939r171j 939r171j FrontPage. FrontPage do formatowania kodu używa serii elementów nazywanych webbots. Fireworks generuje kod wymagany przez wszystkie takie elementy oraz komentarze wyświetlane po otwarciu dokumentu w programie FrontPage.


	Na CD-ROM-ie dołączonym do książki, w katalogu HTML Templates znajdziesz dodatkowe szablonu kodów HTML. Aby je wykorzystać, wystarczy skopiować odpowiedni folder i wszystkie znajdujące się w nim pliki do katalogu Fireworks/Settings/HTML Settings (nie musisz uruchamiać ponownie Fireworks).

Aby wyeksportować mapę obrazka:

939r171j 939r171j 939r171j 939r171j 939r171j 939r171j 939r171j 939r171j 8. Zoptymalizuj swój obrazek za pomocą palety Optimize

939r171j 939r171j 939r171j 939r171j 939r171j 939r171j 939r171j 939r171j 9. Wybierz z menu polecenie File Export, aby rozpocząć proces eksportu.

Zostanie otwarte okno dialogowe Export (rysunek 20.8).

939r171j 939r171j 939r171j 939r171j 939r171j 939r171j 939r171j 939r171j 10. Wybierz katalog, w którym chcesz zapisać eksportowany plik i wpisz jego nazwę.

939r171j 939r171j 939r171j 939r171j 939r171j 939r171j 939r171j 939r171j 11. W liście opcji Save as type Save As) zaznacz HTML and Images

939r171j 939r171j 939r171j 939r171j 939r171j 939r171j 939r171j 939r171j 12. W liście opcji HTML wybierz, czy chcesz eksportować plik HTML, czy skopiować plik do schowka.

Rysunek 20.8.

Okno dialogowe Export udostępnia ustawienia eksportu

Fireworks zapamiętuje ostatnio używane ustawienie listy Style.

939r171j 939r171j 939r171j 939r171j 939r171j 939r171j 939r171j 939r171j 14. Zaznacz pole Put Images in Subfolder (Umieść obrazki w podkatalogu), jeżeli jest taka potrzeba, i kliknij przycisk Browse, aby wybrać lokalizację dla plików obrazków.

939r171j 939r171j 939r171j 939r171j 939r171j 939r171j 939r171j 939r171j 15. Aby zmodyfikować ustawienia w oknie dialogowym HTML Setup, kliknij przycisk Options, aby otworzyć okno dialogowe HTML Setup i dostosuj w nim żądane ustawienia.

939r171j 939r171j 939r171j 939r171j 939r171j 939r171j 939r171j 939r171j 16. Po zaznaczeniu wszystkich ustawień kliknij przycisk Save, aby zakończyć eksportowanie mapy.

939r171j 939r171j 939r171j 939r171j 939r171j 939r171j 939r171j 939r171j 17. Jeśli skopiowałeś kod HTML do schowka, wklej go do edytora HTML.

Umieszczanie kodu mapy obrazka na stronie WWW

Po utworzeniu grafiki, przydzieleniu łączy do obszarów aktywnych i wygenerowaniu kodu zaczniesz się zastanawiać, jak wszystkie te elementy umieścić na stronie WWW. Mimo że wielu projektantów grafiki przeraża już sama myśl o edycji kodu HTML, w większości sytuacji nie jest to aż taki problem. Jakieś wskazówki? Jeżeli potrafisz wycinać i wklejać tekst w edytorze tekstu, nie będziesz miał kłopotów z umieszczeniem mapy obrazka na stronie WWW.

Mimo że proces umieszczania mapy na stronie jest zbliżony dla większości typów kodu generowanego przez Fireworks, istnieje w nim również kilka różnic. W poniższych podrozdziałach znajdziesz szczegółowe opisy umieszczania na stronach WWW wszystkich typów kodu HTML, które są generowane przez Fireworks.

Generic (Ogólny)

Ogólny (Generic kod HTML jest, jak sama nazwa wskazuje, stosowany w większości sytuacji. Jeśli stronę WWW tworzysz ręcznie, czyli z wykorzystaniem edytora tekstu, takiego jak Notepad (Notatnik) w Windows lub SimpleText w MacOS, styl Generic jest tym, czego potrzebujesz. Stylu Generic powinieneś używać również do generowania kodów HTML przeznaczonych dla edytorów, dla których Fireworks nie posiada zdefiniowanych szablonów.

Ogólna procedura umieszczania kodu typu Generic na stronach WWW jest dość prosta:

939r171j 939r171j 939r171j 939r171j 939r171j 939r171j 939r171j 939r171j 18. Otwórz kod w aplikacji do edycji tekstu lub edytorze tekstowym, który jest częścią programu do tworzenia stron WWW.

939r171j 939r171j 939r171j 939r171j 939r171j 939r171j 939r171j 939r171j 19. Zaznacz i skopiuj do schowka sekcję <body>, rozpoczynającą się od wiersza

i kończącą się wierszem

939r171j 939r171j 939r171j 939r171j 939r171j 939r171j 939r171j 939r171j 20. Otwórz stronę WWW w aplikacji do edycji tekstu lub edytorze tekstowym, który jest częścią narzędzia autorskiego WWW.

939r171j 939r171j 939r171j 939r171j 939r171j 939r171j 939r171j 939r171j 21. W części <body> strony WWW, wstaw kod HTML w miejscu, w którym ma być wyświetlany obrazek.


	Wstaw kod pomiędzy znaczniki <body> i </body>, a nie pomiędzy <head> i </head>.

939r171j 939r171j 939r171j 939r171j 939r171j 939r171j 939r171j 939r171j 22. Obejrzyj stronę w przeglądarce i, jeśli będzie to konieczne, dostosuj położenie znacznika <img>

Dopóki znacznik <img> , który jest częścią mapy obrazka, i część <map> znajdują się w tym samym dokumencie, nie muszą one być położone obok siebie.


	Jeśli mapa obrazka ma być podstawowym elementem strony WWW, a Ty nie wykorzystujesz żadnej innej strony, nie musisz usuwać lub przenosić żadnego kodu. Wystarczy, że w trakcie budowania nowej strony dodasz odpowiednie elementy kodu HTML, otaczające mapę obrazka. Jeśli chcesz, możesz usunąć wszystkie komentarze, choć szczerze mówiąc, nie zajmują one tyle miejsca, aby było to konieczne.

Dreamweaver

Kod przeznaczony na stronę WWW tworzoną w Dreamweaverze można umieszczać za pomocą dwóch różnych metod. Pierwsza z nich jest podobna do procedury umieszczania kodu typu Generic - wytnij kod z wygenerowanej przez Fireworks strony i wklej go na stronę tworzoną w Dreamweaverze w inspektorze Dreamweavera Code Inspector, lub w Code View Dreamweavera. Dopóki kod będziesz umieszczał w sekcji <body> - a nie w sekcji <head> - nie powinieneś mieć żadnych problemów.

Druga metoda umieszczania kodu wykorzystuje zalety niewidzialnych elementów (Invisible Elements) Dreamweavera i nie wymaga otwierania Code Inspector, czy przełączania na Code View. Aby wizualnie umieścić kod HTML w Dreamweaverze:

939r171j 939r171j 939r171j 939r171j 939r171j 939r171j 939r171j 939r171j 23. Otwórz w Dreamweaverze stronę wygenerowaną przez Fireworks.

939r171j 939r171j 939r171j 939r171j 939r171j 939r171j 939r171j 939r171j 24. Upewnij się, że włączona jest opcja View Visual Aids Invisible Elements

Zwróć uwagę na znajdujący się obok obrazka symbol komentarza oraz symbol mapy; zaznaczone na rysunku 20.9.

939r171j 939r171j 939r171j 939r171j 939r171j 939r171j 939r171j 939r171j 25. Zaznacz obrazek, wciśnij klawisz Shift i kliknij symbol mapy (Map), który znajduje się po prawej stronie obrazka.


	Jeśli chcesz przenieść także wszystkie komentarze, kliknij pierwszy symbol komentarza (Comment), wciśnij klawisz Shift i kliknij ostatni symbol komentarza.

939r171j 939r171j 939r171j 939r171j 939r171j 939r171j 939r171j 939r171j 26. Wybierz z menu polecenie Edit Copy lub użyj skrótu klawiaturowego Ctrl+C Command+C

Rysunek 20.9.

Wykorzystując zalety niewidzialnych elementów Dreamweavera, możesz kopiować i wklejać ikony tych elementów w oknie dokumentu zamiast łańcuchy kodu HTML w Code Inspector lub Code View

939r171j 939r171j 939r171j 939r171j 939r171j 939r171j 939r171j 939r171j 27. Otwórz stronę WWW, na której chcesz umieścić mapę obrazka.

939r171j 939r171j 939r171j 939r171j 939r171j 939r171j 939r171j 939r171j 28. Umieść kursor w miejscu, w którym ma być wyświetlana mapa.

939r171j 939r171j 939r171j 939r171j 939r171j 939r171j 939r171j 939r171j 29. Wybierz z menu polecenie Edit Paste lub użyj skrótu klawiaturowego Ctrl+V Command+V

Mapa obrazka i jej kod HTML zostaną wstawione do dokumentu Dreamweavera.


	Jeżeli z jakiegoś powodu nie będziesz widział w oknie dokumentu Dreamweavera symboli komentarzy i mapy, wybierz z menu polecenie Edit Preferences i upewnij się, że w panelu Invisible Elements zaznaczone są opcje Comments i Client-side Image Map. Jeżeli wciąż nie będziesz widział symboli komentarzy i mapy, wybierz w Fireworks polecenie File HTML Setup i upewnij się, że zaznaczona jest opcja Include HTML Comments

GoLive

Kod HTML można łatwo zaznaczać i kopiować, a następnie wklejać do okna HTML Source Editor (Edytor źródła HTML) programu GoLive lub przeciągać do okna HTML Outline (rysunek 20.10). Okno HTML Outline umożliwia przenoszenie poszczególnych znaczników kodu pomiędzy dokumentami, ponieważ znaczniki <img> oraz <map> mogą być zawierane w pojedynczych wierszach. Oprócz znaczników <img> i <map> kod generowany przez Fireworks po wybraniu stylu GoLive może zawierać znaczniki cssscriptdict, które przekazują programowi GoLive informacje o tym, jak ma edytować mapy obrazków. Wszystkie trzy znaczniki musisz skopiować do nowo tworzonego dokumentu. Znaczniki <img> i <map> umieść wewnątrz znacznika body, zaś znacznik cssscriptdict w znaczniku head. Kod generowany przez Fireworks dla GoLive jest bardzo prosty i zawiera jedynie komentarz "exported by Fireworks".

Rysunek 20.10.

Okno HTML Outline edytora GoLive
to dobry sposób
na umieszczenie
za pomocą przeciągania
i upuszczania znajdujących się w eksportowanym kodzie znaczników <img>, <map> i cssscriptdict w dokumencie

Aby wyeksportowaną z Fireworks mapę obrazka umieścić w dokumencie GoLive:

939r171j 939r171j 939r171j 939r171j 939r171j 939r171j 939r171j 939r171j 30. Otwórz w GoLive stronę wygenerowaną przez Fireworks.

939r171j 939r171j 939r171j 939r171j 939r171j 939r171j 939r171j 939r171j 31. W oknie HTML Outline wyświetl oba dokumenty: źródłowy i docelowy.

939r171j 939r171j 939r171j 939r171j 939r171j 939r171j 939r171j 939r171j 32. Zaznacz znacznik <img>, który znajduje się w wyeksportowanym kodzie i przeciągnij go do docelowego dokumentu. To samo zrób ze znacznikiem <map>. Następnie oba umieść wewnątrz znacznika body docelowego dokumentu.

939r171j 939r171j 939r171j 939r171j 939r171j 939r171j 939r171j 939r171j 33. Zaznacz znajdujący się w części head źródłowego dokumentu znacznik cssscriptdict i przeciągnij go do tej samej części docelowego dokumentu.


	Jeżeli chcesz przenieść do nowego dokumentu także generowane przez Fireworks komentarze, zaznacz je w źródłowym dokumencie i przeciągnij do dokumentu docelowego.

FrontPage

FrontPage Microsoft jest narzędziem autorskim WWW, używającym zastrzeżonego kodu dla wielu jego efektów specjalnych, takich jak mapy obrazków. Gdy w trakcie eksportu grafiki z rozwijanej listy HTML Style wybierzesz opcję FrontPage, Fireworks wygeneruje kod w formacie FrontPage'a. Eksportowana mapa obrazka zostanie wstawiona na stronę, zawierającą informacje dla użytkowników FrontPage'a o tym, jak umieścić kod na stronie WWW.

Aby mapę obrazka wyeksportowaną z Fireworks wstawić do dokumentu FrontPage'a:

939r171j 939r171j 939r171j 939r171j 939r171j 939r171j 939r171j 939r171j 34. Otwórz we FrontPage'u stronę wygenerowaną przez Fireworks.


	Dokument FrontPage'a i dokument wygenerowany przez Fireworks muszą znajdować się w tym samym katalogu.

939r171j 939r171j 939r171j 939r171j 939r171j 939r171j 939r171j 939r171j 35. Wybierz opcję HTML View

939r171j 939r171j 939r171j 939r171j 939r171j 939r171j 939r171j 939r171j 36. Zaznacz kod zaczynający się od wiersza

i kończący się wierszem

939r171j 939r171j 939r171j 939r171j 939r171j 939r171j 939r171j 939r171j 37. Wybierz z menu polecenie Edit Copy

939r171j 939r171j 939r171j 939r171j 939r171j 939r171j 939r171j 939r171j 38. Otwórz dokument, do którego chcesz wstawić mapę obrazka.

939r171j 939r171j 939r171j 939r171j 939r171j 939r171j 939r171j 939r171j 39. Przy wciąż włączonej opcji HTML View wybierz z menu polecenie Edit Paste, aby wstawić kod do dokumentu.

Plastry

Skoro mapy obrazków umożliwiają przydzielanie łączy do wyznaczonych obszarów grafiki, dlaczego nie wykorzystać ich w innych celach? Mapy obrazków mają jedną poważną wadę, która jednocześnie jest ich główną cechą charakterystyczną - są pojedynczymi plikami. Dlatego, mapy obrazków o dowolnych rozmiarach (przeważnie duże, gdyż muszą pomieścić wszystkie obszary aktywne) są długo pobierane z Internetu, co może zdenerwować niejednego odwiedzającego Twoją witrynę. Poza tym, w jednym pliku można użyć tylko jednego formatu grafiki i jednej palety kolorów. A co zrobić, gdy mapa obrazka składa się ze zdjęcia i wielu obszarów jednolitych kolorów? Będziesz zmuszony wyeksportować cały plik w formacie JPEG, aby zapewnić jak najlepszy wygląd zdjęcia. Rozmiar pliku będzie wówczas o wiele większy niż gdybyś wyeksportował grafikę w formacie GIF. Musisz zrezygnować także z dołączania do pliku jakichkolwiek animacji lub efektów specjalnych, takich jak przyciski reagujące na zdarzenia myszy (duplikowanie klatek znacznie zwiększyłoby rozmiar końcowego pliku).

Rozwiązaniem alternatywnym dla map obrazków jest technika zwana plastrowaniem. Polega ono dosłownie na "krojeniu" dużych obrazków na mniejsze grafiki i przydzielaniu do nich kodu rozmieszczającego plastry w poszczególnych komórkach tabeli HTML. Każdy utworzony w ten sposób obrazek nazywany jest plastrem, zaś proces ich tworzenia - plastrowaniem. Oto najważniejsze zalety plastrowania:

u 939r171j 939r171j Przyspieszenie pobierania. W przypadku większości serwerów, każdy plaster jest wyświetlany w czasie pobierania, co powoduje szybsze ładowanie całej grafiki.

u 939r171j 939r171j Tworzenie łączy bez map obrazków. Każdy plaster może posiadać własne łącze, ale obszary łącza mogą być tylko prostokątne.

u 939r171j 939r171j Łączenie różnych formatów plików. Każdy plaster może być oddzielnie optymalizowany, co pozwala na uzyskanie jak najmniejszych rozmiarów całego pliku z zachowaniem wysokiej jakości. Oznacza to, że nie tylko możesz umieszczać obok siebie obrazki, które są zapisane w różnych formatach - na przykład JPEG i GIF, ale także wyeksportować jeden plaster jako JPEG ze 100
-procentową jakością, zaś inny - jako JPEG o jakości wynoszącej 30%.

u 939r171j 939r171j Aktualizowanie obszarów obrazka. Jeżeli grafika zawiera obszar, który musi być często aktualizowany, na przykład nagłówek lub datę, możesz zmodyfikować tylko pojedynczy obrazek, który jest zdefiniowany jako plaster, a resztę grafiki pozostawić niezmienioną.

u 939r171j 939r171j Osadzanie elementów reagujących na zdarzenia myszy. Jednym z głównych zastosowań plastrów (szczególnie w Fireworks) jest tworzenie elementów reagujących na zdarzenia myszy. Za pomocą plastrów całą grupę elementów reagujących na zdarzenia myszy - na przykład pasek nawigacyjny - możesz zawrzeć w jednej grafice. Plaster można wykorzystać również do uruchamiania zdarzeń w elementach, które znajdują się w innych częściach obrazka.

u 939r171j 939r171j Osadzanie animacji. Używając plastra do przechowywania animowanego GIF-a, możesz osiągnąć efekty specjalne, na przykład migający neon na tle większej grafiki, bez podwajania czy potrajania wielkości pliku.

Podstawowym ograniczeniem plastrów jest ich kształt; mogą być jedynie prostokątne. Prostokątne są nie tylko obrazki, na podstawie których tworzone są plastry, ale także komórki tabel, w których plastry są umieszczane. Aby utworzyć wrażenie nieregularnych kształtów, musisz użyć formatu GIF lub PNG z przezroczystością. Kolejnym ograniczeniem jest to, iż plastry nigdy nie mogą zachodzić na siebie.

Podejmując decyzję, czy plastrować obrazek, czy nie, pamiętaj, że plastry są uzależnione od tabel HTML, za pomocą których są rozmieszczane w przeglądarce. Tabele z kolei także posiadają pewne ograniczenia. Język HTML nie pozwala na przykład na umieszczenie dwóch tabel obok siebie na stronie WWW. Podobny efekt możesz jednak otrzymać poprzez zagnieżdżenie jednej tabeli w innej.

Plastry są łączone ze sobą w tabelach HTML, zawsze więc należy się upewnić, czy wszystkie przeglądarki interpretują tworzone tabele w taki sam sposób. W pewnych sytuacjach tabele mogą w niektórych przeglądarkach "rozpadać się" i tracić wszystkie informacje o wymiarach komórek, niezbędne do poprawnego wyświetlenia wielu plastrów jako pojedynczej grafiki. Sposobem na obejście tego problemu jest użycie bardzo małych (1-pikselowych) przezroczystych obrazków nazywanych klinami. Jeśli zechcesz, Fireworks może automatycznie utworzyć wszystkie niezbędne kliny. Tworzenie 1-pikselowych obrazków zostanie opisane w jednym z kolejnych podrozdziałów.


	W tym rozdziale opisane są podstawowe zagadnienia dotyczące plastrów. Jeśli chcesz się dowiedzieć, jak wykorzystać plastry do tworzenia elementów, które reagują na zdarzenia myszy, zerknij do rozdziału 21.

Plastrowanie obrazków w Fireworks

Tworzenie plastrów przebiega w sposób podobny do tego, w jaki tworzyłeś obszary aktywne: rysujesz plaster na wierzchu obrazka. Gdy jednak obszary aktywne mogą mieć dowolne kształty, na przykład okrągłe, plastry mogą być tylko prostokątne. Wprawdzie Fireworks pozwala na tworzenie bardziej złożonych plastrów za pomocą narzędzia Polygon Slice (Wielokątny plaster), ale plastry takie podczas eksportu grafiki przekształcane są na wiele prostokątów.

Dwa narzędzia służące do tworzenia plastrów znajdują się w prawym dolnym rogu palety narzędziowej, w grupie podobnej do grupy narzędzi do tworzenia obszarów aktywnych.

Po narysowaniu plastra za pomocą narzędzia Slice, Fireworks utworzy prowadnice plastra, które pomagają w takim rozmieszczeniu plastrów, aby wyeksportowana była jak najmniejsza liczba końcowych plików. Im mniej obrazków zostanie wykorzystanych w ostatecznej grafice, tym szybciej będzie ona wyświetlana w przeglądarce. Gdy plastry nakładają się na siebie, Fireworks za ważniejsze uważa plastry znajdujące się wyżej w stosie.


	Fireworks wykorzystuje teraz kolejność plastrów w stosie do określenia, jak będą eksportowane plastry nakładające się na siebie. W większości przypadków ogranicza to ilość eksportowanych plastrów.

Prostokątne plastry

Aby podzielić obrazek na plastry za pomocą narzędzia Slice w Fireworks:

939r171j 939r171j 939r171j 939r171j 939r171j 939r171j 939r171j 939r171j 40. Wybierz narzędzie Slice z palety narzędziowej.

939r171j 939r171j 939r171j 939r171j 939r171j 939r171j 939r171j 939r171j 41. Kliknij obrazek i narysuj prostokątny plaster o żądanych wymiarach i proporcjach (rysunek 20.11).

Rysunek 20.11.

Narzędzie Slice dzieli dokument Fireworks na prostokątne plastry, które są eksportowane jako oddzielne pliki graficzne

Podobnie jak w przypadku standardowego narzędzia Rectangle, możesz korzystać z klawisza Alt (Option), aby rysować plastry od ich środków zamiast od wierzchołków, oraz klawisza Shift, aby rysować kwadratowe plastry.

Fireworks utworzy prostokątny plaster i wypełni go domyślnym, półprzezroczystym kolorem. Jeśli będą aktywne, wyświetlone zostaną także prowadnice plastra.

Po narysowaniu plastra możesz go modyfikować jak każdy inny obiekt Fireworks. Do skalowania plastra możesz wykorzystać znane już cztery uchwyty. Wystarczy przeciągnąć jeden z nich w pożądanym kierunku. Prostokątne plastry zawsze będą prostokątne, więc przeciąganie jednego z wierzchołków powoduje przemieszczanie całego boku plastra. Nie musisz nawet zaznaczyć żadnego wierzchołka - kliknij i przeciągnij jeden z boków plastra. Plastry możesz modyfikować również za pomocą narzędzi transformacji, takich jak Scale (Skalowanie), ale w końcowej grafice wszystkie plastry o nieregularnych kształtach i tak zostaną przekształcone na prostokąty. Aby przesunąć je dokładnie o jeden piksel, użyj jednego z klawiszy strzałek.

Alternatywą dla narzędzia Slice są standardowe prowadnice. Są one wyciągane z poziomych i pionowych linijek dokumentu, aby utworzyć siatkę plastrowania. Następnie
- już przy eksporcie grafiki - wystarczy zaznaczyć opcję Slice Along Guides, aby Fireworks utworzył plastry z obszarów wytyczonych przez prowadnice. Technika taka sprawdza się doskonale, gdy Twoim celem jest podzielenie grafiki na mniejsze fragmenty, aby obrazek był szybciej ładowany z Internetu. Jeśli chcesz przydzielić do plastra URL lub behawior, musisz utworzyć obiekt plastra za pomocą narzędzia Slice

Wielokątne plastry

Jak zostało wspomniane wcześniej, wielokątne plastry mogą istnieć tylko w Fireworks. Podczas eksportowania dokumentu, Fireworks użyje wielokątnych plastrów jako prowadnic do utworzenia złożonych kombinacji prostokątnych plastrów. Wielokątne plastry, podobnie jak wielokątne obszary aktywne, mogą mieć dowolne kształty (rysunek 20.12).

Rysunek 20.12.

Za pomocą narzędzia Polygon Slice możesz rysować różne obszary o nieregularnych kształtach

Efektem ubocznym takich przekształceń jest fakt, iż wielokątne plastry powodują powstawanie przy eksporcie dużych ilości odrębnych plików graficznych. Może to niekorzystnie wpływać na szybkość wyświetlania grafiki w przeglądarce. Każdy z nich musi bowiem zostać oddzielnie wywołany przez przeglądarkę, wysłany przez serwer, a następnie wyświetlony przez przeglądarkę użytkownika. Jeśli utworzysz dziesięć lub piętnaście pojedynczych obrazków, użytkownik może zauważyć wyraźne zmniejszenie szybkości ładowania grafiki.

Aby narysować wielokątny plaster:

939r171j 939r171j 939r171j 939r171j 939r171j 939r171j 939r171j 939r171j 43. Wybierz narzędzie Polygon Slice z palety narzędziowej. Jeśli nie widzisz tego narzędzia w palecie, kliknij i przytrzymaj narzędzie Slice tak długo, aż zostanie rozwinięta grupa narzędzi, a następnie wybierz z niej przycisk Polygon Slice

939r171j 939r171j 939r171j 939r171j 939r171j 939r171j 939r171j 939r171j 44. Kliknij, aby utworzyć pierwszy wierzchołek plastra, przesuń kursor do miejsca, w którym chcesz wstawić kolejny wierzchołek tworzonego kształtu i kliknij ponownie.

Fireworks połączy naniesione punkty za pomocą linii prostych.

939r171j 939r171j 939r171j 939r171j 939r171j 939r171j 939r171j 939r171j 45. Powtarzaj poprzednią operację do czasu uzyskania pożądanego kształtu.

Po naniesieniu każdego z kolejnych wierzchołków Fireworks wypełni plaster kolorem domyślnym.

939r171j 939r171j 939r171j 939r171j 939r171j 939r171j 939r171j 939r171j 46. Kliknij pierwszy wierzchołek, aby zamknąć tworzony wielokąt i utworzyć plaster.

Fireworks utworzy wielokątny plaster i wypełni go kolorem standardowym.

Prowadnice plastrów

Zanim pojawił się Fireworks, ręczne plastrowanie obrazków było żmudnym, męczącym wzrok zajęciem. Każdy z plastrów trzeba było narysować i wyciąć z dokładnością do jednego piksela. Jeśli pominąłeś choć jeden piksel, ostateczny obrazek mógł posiadać "dziury" lub nakładające się na siebie obszary. Aby zobaczyć, jak to dawniej bywało, możesz spróbować wyłączyć w Fireworks prowadnice plastrów.

W przeciwieństwie do zwykłych prowadnic, prowadnic plastrów nie musisz rozmieszczać ręcznie; są one automatycznie tworzone przez program po narysowaniu plastra. Prowadnice plastrów pokazują układ tabeli utworzona dla plastrów, które znajdują się w grafice. Co więcej - prowadnice posiadają funkcję Snap to Guides (Przyciągaj do prowadnic) oraz pomagają ustrzec się "dziur" w plastrach i nakładania się na siebie ich obszarów.

Osobiście twierdzę, że prowadnice plastrów są bardzo użytecznym narzędziem i gorąco polecam ich stosowanie. Wybierz z menu polecenie View Slice Guides, aby je uaktywnić lub ukryć. Prowadnice są automatycznie przyciągane do krawędzi dokumentu. Jeśli chcesz, aby obiekty były przyciągane do prowadnic, wybierz z menu polecenie View Guides Snap to Guides

Zwykłe prowadnice i prowadnice plastrów są rysowane za pomocą dwóch różnych kolorów. Czasami może się zdarzyć, że odcień prowadnic będzie bardzo zbliżony do barw używanych w grafice i nie będziesz widział, gdzie prowadnice są położone. Aby zmienić kolor prowadnic, wybierz z menu polecenie View Guides Edit Guides. Zostanie otwarte okno dialogowe Guides Grids and Guides) (rysunek 20.13), w którym za pomocą rozwijanego próbnika Slice Color możesz wybrać nowy kolor prowadnic plastrów.

Rysunek 20.13.

W oknie dialogowym Guides (Grids and Guides) możesz zdefiniować nowy kolor prowadnic plastrów

W Windows opcje prowadnic i siatki są wyświetlane w dwóch oknach dialogowych: Grids i Guides. W MacOS wszystkie opcje dotyczące tych elementów skupione są w jednym oknie dialogowym
- Grids and Guides - podzielonym na zakładki.


	W przeciwieństwie do zwykłych prowadnic prowadnice plastrów nie mogą być przeciągane w nowe położenia. Ich pozycje wytyczane są przez położenia plastrów. Dlatego też znajdująca się w oknie dialogowym Guides (Grids and Guides) opcja Lock Guides (Zablokuj prowadnice), stosuje się jedynie do zwykłych prowadnic.

Kopiowanie obrazków do plastrów

Niekiedy upewnienie się, że określony obiekt jest kompletny stanowi bardzo skomplikowane zadanie, zwłaszcza gdy obiekt posiada jakiś efekt, na przykład zewnętrzny cień lub blask. Niewłaściwe umieszczenie plastra może spowodować obcięcie fragmentu obrazka. Aby ustrzec się tego typu problemów, Fireworks może wykonać całe plastrowanie za Ciebie. Podobnie jak konwertowałeś obiekty na obszary aktywne, możesz je także przekształcać na plastry.

Aby utworzyć plaster w oparciu o istniejący obiekt, zaznacz ten obiekt i wybierz z menu polecenie Insert Slice. Fireworks narysuje plaster całkowicie obejmujący zaznaczony obiekt (wraz z efektami specjalnymi). Jeśli zaznaczysz więcej niż jeden obiekt, Fireworks zapyta Cię, czy chcesz utworzyć jeden czy wiele plastrów.

Przydzielanie adresów URL do plastrów

Aby użyć plastra jako łącza, trzeba do niego przydzielić adres URL. Możesz to zrobić w dwóch różnych miejscach programu: palecie Object i palecie URL. Znajdujące się w obu paletach opcje plastrów są takie same, jak te opisywane w podrozdziale o obszarach aktywnych.

Aby przydzielić łącze do plastra za pomocą palety Object

939r171j 939r171j 939r171j 939r171j 939r171j 939r171j 939r171j 939r171j 47. Zaznacz plaster, do którego chcesz przydzielić łącze.

939r171j 939r171j 939r171j 939r171j 939r171j 939r171j 939r171j 939r171j 48. Wybierz z menu polecenie Window Object lub użyj skrótu klawiaturowego Alt+F2 Option+F2

Zostanie wyświetlona paleta Object (rysunek 20.14).

Rysunek 20.14.

W palecie Object możesz przydzielić adres URL
do plastra i wpisać tekst zastępczy

939r171j 939r171j 939r171j 939r171j 939r171j 939r171j 939r171j 939r171j 49. Wpisz łącze w polu tekstowym Current URL lub wybierz jedno z łączy znajdujących się w rozwijanej liście. W liście wyświetlana jest historia URL oraz biblioteka URL.

939r171j 939r171j 939r171j 939r171j 939r171j 939r171j 939r171j 939r171j 50. Jeśli chcesz - w polu tekstowym Alt możesz wpisać tekst zastępczy.

939r171j 939r171j 939r171j 939r171j 939r171j 939r171j 939r171j 939r171j 51. Aby ustawić cel, w którym ma być ładowana docelowa strona WWW, wybierz jedną z opcji listy Target lub ręcznie wpisz nazwę ramki.

939r171j 939r171j 939r171j 939r171j 939r171j 939r171j 939r171j 939r171j 52. Aby zmienić kolor zaznaczonego plastra, wybierz nowy kolor z rozwijanego próbnika.

939r171j 939r171j 939r171j 939r171j 939r171j 939r171j 939r171j 939r171j 53. Aby przydzielić własną nazwę do plastra, usuń zaznaczenie opcji Auto-Name Slices i wpisz nową nazwę w polu tekstowym Custom Base Name

W oknie dialogowym HTML Setup możesz zdefiniować nowy schemat automatycznego nadawania nazw, co zostanie opisane w jednym z kolejnych podrozdziałów.

Plastry tekstowe

Mało kto wie o przydatnej funkcji, umożliwiającej tworzenie plastrów tekstowych (Text Slice). Plastry tekstowe pozwalają na wyświetlanie tekstu HTML zamiast określonego fragmentu obrazka (rysunek 20.15).

Rysunek 20.15.

Zmiana typu plastra na Text umożliwia wkomponowanie w plastrowaną grafikę tekstu HTML

Aby utworzyć plaster tekstowy:

939r171j 939r171j 939r171j 939r171j 939r171j 939r171j 939r171j 939r171j 54. Zaznacz plaster i otwórz paletę Object

939r171j 939r171j 939r171j 939r171j 939r171j 939r171j 939r171j 939r171j 55. Z rozwijanej listy Type wybierz opcję Text

W palecie Object zostanie wyświetlony obszar tekstowy.

939r171j 939r171j 939r171j 939r171j 939r171j 939r171j 939r171j 939r171j 56. Wpisz tekst i (lub) kod HTML bezpośrednio w obszarze tekstowym palety Object

939r171j 939r171j 939r171j 939r171j 939r171j 939r171j 939r171j 939r171j 57. Po zakończeniu wpisywania tekstu wybierz dowolne inne narzędzie lub obiekt.

Program wyświetli wpisany tekst na nakładce plastra.


	W Fireworks 4 tekst w obiektach tekstowych jest przestawiany w ich nakładkach, dzięki czemu są od razu widoczne.

939r171j 939r171j 939r171j 939r171j 939r171j 939r171j 939r171j 939r171j 58. Aby zmodyfikować tekst, zaznacz plaster i wprowadź odpowiednie zmiany w palecie Object


	Tabele HTML używane do rozmieszczania plastrów standardowo nie posiadają żadnego obramowania czy dodatkowych odstępów pomiędzy komórkami lub pomiędzy obiektami a obramowaniem tabeli, więc wszystkie obrazki są umieszczane obok siebie. Może to być problemem przy korzystaniu z plastrów tekstowych, ponieważ tekst będzie znajdował się bezpośrednio przy obrazku i nie będzie posiadał żadnych marginesów. Rozwiązaniem tego problemu jest utworzenie dużego, pustego plastra tekstowego i umieszczenie go nad plastrem z tekstem właściwym.

Opcje plastrów

Nawet jeśli wyraźnie zdefiniowane będą jedynie dwa plastry (w zależności od ich położenia), dla jednego obrazka możesz wygenerować większą ilość plastrów. Aby plastry mogły zostać umieszczone w tabeli, każdy z nich musi posiadać swoją własną nazwę. Aby uchronić Cię od ręcznego wpisywania wszystkich nazw, Fireworks umożliwia stworzenie w oknie dialogowym HTML Setup File HTML Setup) techniki nazywania plastrów. W dowolnym momencie możesz wyłączyć automatyczne nadawanie nazw poprzez usunięcie zaznaczenia opcji Auto-Naming Slices w palecie Object i wpisać własną nazwę w odpowiednie pole tekstowe. Zwykle pozwalam Fireworks nadawać automatyczne nazwy większości tworzonych plastrów, a ręcznie nazywam jedynie plastry wykorzystywane w paskach nawigacyjnych, co pozwala mi później łatwo odnaleźć odwołanie do obrazka w kodzie HTML.


	W Fireworks zastosowano nową metodę określania nazw domyślnych dla plastrów. W rozdziale 3. znajdziesz dokładny opis nazywania plastrów i innych opcji okna dialogowego HTML Setup.

W wyniku plastrowania Fireworks może tworzyć bardzo skomplikowane tabele. Niczym niezwykłym nie są tabele posiadające wiele wierszy i kolumn. Tak złożone tabele pod pewnymi względami można porównać do domków z kart, zaś przeglądarkę do silnego wiatru, który może je zburzyć. W pewnych warunkach, komórki tabeli mogą wyglądać tak, jakby utracone zostały wyniki wszystkich obliczeń dotyczących szerokości czy wysokości i tabela jest wówczas dzielona na położone w dużych odległościach od siebie komórki, w których wyświetlane są poszczególne obrazki.

Do tworzenia takich tabel Fireworks używa 1-pikselowych obrazków. Są to przezroczyste obrazki w formacie GIF o wymiarach 1 1 piksel umieszczane przy górnych i prawych krawędziach komórek tabeli HTML. Fireworks wykorzystuje sposób działania HTML i używa tylko jednego obrazka o nazwie spacer.gif, którego rozmiar fizyczny to jedynie 43 bajty, czyli 0,04K. Ten sam obrazek jest wykorzystywany przez wszystkie kliny umieszczone w tabeli, które są jedynie odpowiednio skalowane. HTML pozwala na zdefiniowanie określonej szerokości i wysokości obrazka, który jest następnie skalowany przez przeglądarkę. Metoda ta nie sprawdza się zbyt dobrze z większością obrazków (przeglądarki nie posiadają dobrych algorytmów skalowania), ale w przypadku klinów jest w zupełności wystarczająca. Kliny są prawie niewidoczne. Te umieszczane przy górnej krawędzi komórki dodają jeden piksel do jej wysokości, zaś te znajdujące się przy prawej krawędzi - jeden piksel do szerokości. Co najważniejsze - 1-pikselowe obrazki doskonale wywiązują się z powierzonego im zadania - utrzymania kształtu i integralności tabeli z plastrami bez względu na używaną do jej wyświetlenia przeglądarkę.

Mimo ich wszystkich zalet, 1-pikselowe obrazki nie sprawdzają się we wszystkich sytuacjach. Dlatego Fireworks oferuje opcje dotyczące ich tworzenia, znajdujące się na zakładce Table w oknie dialogowym HTML Setup. Możesz wybrać używanie przezroczystych 1-pikselowe obrazków (One-Pixel Transparent Spacer), tworzenie zagnieżdżonych tabel bez przezroczystych obszarów (Nested Table-No Spacers) lub tworzenie pojedynczych tabel bez przezroczystych obszarów (Single Table-No Spacers). Przy korzystaniu z opcji Single Table-No Spacers sprawdź rezultaty w różnych przeglądarkach, aby upewnić się, czy akceptują twoje ustawienia.

Eksportowanie plastrów

Po wyeksportowaniu mapy obrazka, otrzymywałeś obrazek i kod HTML. Eksportowanie plastrów generuje wiele różnych obrazków i trochę więcej kodu HTML. Musisz wiedzieć o tym, że eksport każdego plastrowanego obrazka prowadzi do utworzenia wielu plików graficznych, które muszą być przechowywane w jednym miejscu. Fireworks oferuje dwie różne metody plastrowania i możliwość wyboru stylu kodu HTML. Wybrane ustawienia uzależnione są od sposobu, w jaki tworzysz plastry oraz używanego przez Ciebie programu do tworzenia stron WWW.

Eksportowanie plastrów jako różnych typów obrazków

Kolejną rzeczą dającą plastrom przewagę nad obszarami aktywnymi jest fakt, iż każdy plaster może zostać wyeksportowany w innym formacie, gdyż każdy z nich może być odrębnym plikiem graficznym. Funkcja taka umożliwia Ci wyeksportowanie jednego plastra w formacie JPEG, innego jako GIF, a jeszcze innego jako PNG.

Zdefiniowanie formatu eksportu plastra jest proste. Zaznacz plaster w oknie dokumentu i wybierz z menu polecenie Window Optimize, aby wyświetlić paletę Optimize. Przy zaznaczonym plastrze, w palecie Optimize wyświetlane są jego ustawienia eksportu. Określ format pliku i ustawienia optymalizacji. Następnie zaznacz kolejny plaster i zmień jego ustawienia lub usuń zaznaczenia wszystkich plastrów, aby zmodyfikować opcje eksportu dla całego dokumentu.

Określanie opcji eksportu

Po zdefiniowaniu ścieżki dostępu i nazw eksportowanych plików, musisz jeszcze wybrać metodę tworzenia plastrów. Oto opcje dostępne w rozwijanej liście Slicing (Plastrowanie), która znajduje się w oknie dialogowym Export

u 939r171j 939r171j None (Bez plastrowania). Bez względu na liczbę zdefiniowanych plastrów, obrazek jest eksportowany jako jeden plik.

u 939r171j 939r171j Export Slices (Eksportuj plastry). Obrazki są tworzone z plastrów, które znajdują się w dokumencie.

u 939r171j 939r171j Slice Along Guides (Plastrowanie wzdłuż prowadnic). Do tworzenia plastrów wykorzystywane są standardowe prowadnice, które znajdują się w dokumencie.

W większości przypadków najlepszym wyborem jest opcja Export Slices. Tworzenie plastrów wymaganych przez "rollovery" i inne behawiory jest bardzo proste. Jedynym powodem, dla którego powinieneś wybrać opcję Slice Along Guides jest podzielenie obrazka na wiele mniejszych części, do jakich nie są przydzielane żadne behawiory. Aby użyć opcji Slice Along Guides musisz najpierw odpowiednio rozmieścić w dokumencie prowadnice, co zostało opisane w jednym z poprzednich podrozdziałów.

Aby wyeksportować plastrowany obrazek:

939r171j 939r171j 939r171j 939r171j 939r171j 939r171j 939r171j 939r171j 59. Wybierz z menu polecenie File Export

Zostanie otwarte okno dialogowe Export

939r171j 939r171j 939r171j 939r171j 939r171j 939r171j 939r171j 939r171j 60. W górnej części okna dialogowego określ położenie i nazwy eksportowanych plików.

939r171j 939r171j 939r171j 939r171j 939r171j 939r171j 939r171j 939r171j 61. Z listy opcji Save as type Save As) wybierz HTML and Images

939r171j 939r171j 939r171j 939r171j 939r171j 939r171j 939r171j 939r171j 62. Wybierz Export HTML File lub Copy to Clipboard z listy HTML

939r171j 939r171j 939r171j 939r171j 939r171j 939r171j 939r171j 939r171j 63. Wybierz albo Export Slices, albo Slice Along Guides z listy Slicing

939r171j 939r171j 939r171j 939r171j 939r171j 939r171j 939r171j 939r171j 64. Aby pliki obrazka zostały zapisane w innym katalogu, zaznacz pole Put Images in Subfolder, kliknij przycisk Browse i wybierz docelową lokalizację dla obrazków.

939r171j 939r171j 939r171j 939r171j 939r171j 939r171j 939r171j 939r171j 65. Aby zmienić dowolne z określonych wcześniej ustawień plastrów, kliknij przycisk Save, aby ponownie otworzyć okno dialogowe HTML Setups i dostosuj ustawienia.

939r171j 939r171j 939r171j 939r171j 939r171j 939r171j 939r171j 939r171j 66. Po dokonaniu wszystkich ustawień kliknij przycisk Save, aby zakończyć proces eksportu.

939r171j 939r171j 939r171j 939r171j 939r171j 939r171j 939r171j 939r171j 67. Jeśli skopiowałeś kod do schowka, wklej go do dokumentu otwartego w twoim edytorze HTML.

Wstawianie plastrów na stronę WWW

Podobnie jak w przypadku map obrazków, cztery style HTML: Generic (Ogólny), Dreamweaver FrontPage i GoLive, determinują pewne aspekty kodu HTML, generowanego przez Fireworks. Umieszczenie kodu dla plastrowanego obrazka jest bardzo prostą czynnością. Cały kod takiego obrazka znajduje się w jednym znaczniku - <table>. Pamiętaj, że w języku HTML dane zawierane są pomiędzy dwoma znacznikami - otwierającym i zamykającym. W przypadku kodu tabeli HTML znacznikiem otwierającym jest <table>, zaś zamykającym </table>. Fireworks oznacza ten kod za pomocą komentarzy HTML, które wyjaśniają, gdzie zacząć, a gdzie zakończyć kopiowanie.


	Technika opisywana w tym rozdziale dotyczy wstawiania na stronę WWW jedynie prostych plastrów, bez dołączonych "rolloverów" lub innych behawiorów. Jeśli chcesz się dowiedzieć, jak eksportować plastry z behawiorami, zerknij do rozdziału 21.

Szablon Generic (Ogólny)

Szablonu Generic używaj, gdy stronę WWW tworzysz ręcznie w edytorze tekstowym lub aplikacji do tworzenia stron WWW, dla której nie został zdefiniowany w Fireworks żaden szablon.

Aby umieścić na stronie ogólny kod HTML dla plastrowanych obrazków:

939r171j 939r171j 939r171j 939r171j 939r171j 939r171j 939r171j 939r171j 68. Otwórz kod w edytorze tekstu lub oknie tekstowym edytora HTML.

939r171j 939r171j 939r171j 939r171j 939r171j 939r171j 939r171j 939r171j 69. Zaznacz i skopiuj do schowka część <body>, rozpoczynającą się od wiersza

i kończącą się wierszem

939r171j 939r171j 939r171j 939r171j 939r171j 939r171j 939r171j 939r171j 70. Otwórz istniejącą stronę WWW w edytorze tekstu lub oknie tekstowym edytora HTML.

939r171j 939r171j 939r171j 939r171j 939r171j 939r171j 939r171j 939r171j 71. W części <body> strony WWW, w miejscu, w którym ma być wyświetlany obrazek, wstaw skopiowany do schowka kod HTML.

939r171j 939r171j 939r171j 939r171j 939r171j 939r171j 939r171j 939r171j 72. Obejrzyj stronę w przeglądarce i, jeśli będzie to konieczne, dostosuj położenie znacznika <img>

Dreamweaver

Mimo że do umieszczania wygenerowanego przez Fireworks kodu powinieneś wykorzystać inspektora Dreamweavera Code Inspector lub Code View, dzięki narzędziu Tag Selector możesz także pozostać w Design View i robić to wizualnie.

Aby umieścić w Dreamweaverze kod plastrowanego obrazka wygenerowany przez Fireworks:

939r171j 939r171j 939r171j 939r171j 939r171j 939r171j 939r171j 939r171j 73. Otwórz w Dreamweaverze plik HTML wygenerowany przez Fireworks.

939r171j 939r171j 939r171j 939r171j 939r171j 939r171j 939r171j 939r171j 74. Kliknij wyeksportowany obrazek.

Obrazek jest podzielony na plastry, zaznaczony więc zostanie tylko jeden plaster, a nie cały obrazek.

939r171j 939r171j 939r171j 939r171j 939r171j 939r171j 939r171j 939r171j 75. Wybierz znacznik <table> z przełącznika znaczników (Tag Selector), który znajduje się w lewym dolnym rogu okna dokumentu (rysunek 20.16).

Zaznaczone zostaną wszystkie plastry obrazka i ich kod HTML.

939r171j 939r171j 939r171j 939r171j 939r171j 939r171j 939r171j 939r171j 76. Wybierz z menu polecenie Edit Copy lub użyj skrótu klawiaturowego Ctrl+C Command+C

939r171j 939r171j 939r171j 939r171j 939r171j 939r171j 939r171j 939r171j 77. Otwórz stronę WWW, na której chcesz umieścić plastrowany obrazek.

939r171j 939r171j 939r171j 939r171j 939r171j 939r171j 939r171j 939r171j 78. Umieść kursor w miejscu, w którym chcesz wstawić obrazek.

939r171j 939r171j 939r171j 939r171j 939r171j 939r171j 939r171j 939r171j 79. Wybierz z menu polecenie Edit Paste lub użyj skrótu klawiaturowego Ctrl+V Command+V

Rysunek 20.16.

Użyj przełącznika znaczników Dreamweavera, aby zaznaczyć plastry, które chcesz wycinać i kopiować

Plastrowany obrazek i jego kod HTML zostaną umieszczone w dokumencie.

GoLive

Okno HTML Outline programu GoLive umożliwia łatwe przeciąganie kodu HTML pomiędzy dwoma dokumentami. Kod wyeksportowany z wybranym szablonem GoLive zawiera znacznik cssscriptdict, który "mówi" GoLive, jak edytować kod. Upewnij się, że skopiowałeś znacznik cssscriptdict wraz z pozostałym kodem HTML.

Aby kod wygenerowany przez Fireworks dla plastrowanego obrazka umieścić w GoLive:

939r171j 939r171j 939r171j 939r171j 939r171j 939r171j 939r171j 939r171j 80. Otwórz w GoLive plik HTML wygenerowany przez Fireworks.

939r171j 939r171j 939r171j 939r171j 939r171j 939r171j 939r171j 939r171j 81. Przejdź do widoku HTML Outline dla dokumentu źródłowego i docelowego.

939r171j 939r171j 939r171j 939r171j 939r171j 939r171j 939r171j 939r171j 82. W dokumencie źródłowym zaznacz znacznik <table>. Tabela ta zawiera wszystkie elementy plastrowanego obrazka.

939r171j 939r171j 939r171j 939r171j 939r171j 939r171j 939r171j 939r171j 83. Przeciągnij znacznik <table> do docelowego dokumentu.

939r171j 939r171j 939r171j 939r171j 939r171j 939r171j 939r171j 939r171j 84. Zaznacz znajdujący się w części <head> źródłowego dokumentu znacznik cssscriptdict i przeciągnij go do takiej samej części dokumentu docelowego.

FrontPage

Microsoft FrontPage przechowuje zewnętrzny kod (wliczając kod JavaScriptu) w strukturach nazywanych znacznikami HTML (lub - w języku FrontPage'a - "webbotami"). Fireworks umożliwia poprzez szablon FrontPage generowanie odpowiednich struktur kodu, który może być następnie umieszczany na stronach WWW, tworzonych w tym edytorze.

Aby umieścić plastrowany obrazek Fireworks w dokumencie FrontPage:

939r171j 939r171j 939r171j 939r171j 939r171j 939r171j 939r171j 939r171j 85. Otwórz we FrontPage'u plik wygenerowany przez Fireworks.


	Dokument FrontPage'a i dokument wygenerowany przez Fireworks muszą znajdować się w tym samym katalogu.

939r171j 939r171j 939r171j 939r171j 939r171j 939r171j 939r171j 939r171j 86. Wybierz opcję HTML View

939r171j 939r171j 939r171j 939r171j 939r171j 939r171j 939r171j 939r171j 87. Zaznacz i skopiuj do schowka kod rozpoczynający się od wiersza

i kończący się wierszem

939r171j 939r171j 939r171j 939r171j 939r171j 939r171j 939r171j 939r171j 88. Wybierz z menu polecenie Edit Copy

939r171j 939r171j 939r171j 939r171j 939r171j 939r171j 939r171j 939r171j 89. Otwórz dokument, do którego chcesz wstawić plastrowany obrazek.

939r171j 939r171j 939r171j 939r171j 939r171j 939r171j 939r171j 939r171j 90. Wybierz z menu polecenie Edit Paste, aby wstawić kod do dokumentu.

Eksportowanie pojedynczych plastrów

Czasami chcemy wyeksportować niewielki fragment obszaru roboczego Fireworks jako plik pojedynczego obrazka. Zamiast kopiować część całego obrazka i umieszczać ją w nowym dokumencie, a następnie eksportować, można szybko określić obszar eksportowanego pliku obrazka przez umieszczenie na nim plastra i następnie wyeksportować ten pojedynczy plaster. Taki pojedynczy plaster można również osobno zoptymalizować przed eksportowaniem.

Aby wyeksportować pojedynczy plaster:

1. 939r171j Zaznacz plaster, który ma być eksportowany.

2. 939r171j Wybierz z menu polecenie Window Optimize, aby otworzyć paletę Optimize

3. 939r171j Określ ustawienia eksportu w palecie Optimize

Powyższe ustawienia dotyczą tylko zaznaczonego plastra.

4. 939r171j Wybierz z menu polecenie File Export

Pojawi się okno dialogowe Export

5. 939r171j Wyszukaj katalog, do którego eksportujesz plaster i określ nazwę pliku.

6. 939r171j Z listy Save As wybierz Images Only

7. 939r171j Z listy Slices wybierz Export Slices

8. 939r171j Zaznacz pole wyboru Selected Slices Only

9. 939r171j Kliknij Save

Zaznaczony plaster jest eksportowany jako plik pojedynczego obrazka.

Technika Fireworks: Eksportowanie pozycji Dreamweaver Library

Biblioteki są istotną funkcją Dreamweavera, która umożliwia modyfikację jednej z części strony WWW, po której Dreamweaver aktualizuje wszystkie strony, zawierające tę część. Pierwotnie, biblioteki Dreamweavera projektowane były z myślą o umieszczaniu na stronach WWW często powtarzających się elementów, takich jak logo lub informacje o prawach autorskich. Umożliwiają one również interpretowanie poszczególnych części kodu HTML jako pojedynczych, łatwych w zarządzaniu jednostek. Jeśli jako projektant grafiki zetknąłeś się kiedyś z formatem Encapsulated PostScript (EPS), biblioteki Dreamweavera możesz traktować jako Encapsulated HTML.

Aby element biblioteki mógł zostać rozpoznany, należy go umieścić w specjalnym katalogu lokalnej witryny. Jeśli w trakcie eksportu grafiki, z rozwijanej listy Save as type Save As), w oknie dialogowym Export, wybierzesz opcję Dreamweaver Library (.lbi), program zapyta Cię o lokalizację katalogu z bibliotekami. Jeśli nie utworzyłeś do tej pory dla bieżącej witryny żadnego elementu biblioteki, będziesz musiał stworzyć nowy katalog. Musi on znajdować się w głównym katalogu witryny i posiadać nazwę Library. Jeżeli na przykład główny katalog witryny znajduje się w katalogu Strony WWW, katalog bibliotek należy utworzyć w katalogu StronyWWW/Library.


	W większości witryn, w nazwach stosowane są małe litery. Katalog z bibliotekami może nazywać się "library" i nie stworzy to żadnych problemów w Dreamweaverze.

Opcja eksportu Dreamweaver Library (.lbi) eksportuje mapy obrazka lub plastry w tej samej tabeli co szablon Dreamweaver HTML, ale dodatkowo oznacza tabelę jako element biblioteki, który może być wielokrotnie wstawiany do różnych dokumentów. Korzystając z opcji Dreamweaver Library (.lbi), możesz w dowolnym momencie dokonywać eksportowania, niezależnie od ustawień stylu HTML w oknie dialogowym HTML Setup

Aby wyeksportować HTML i obrazki z Fireworks jako element biblioteki Dreamweavera:

939r171j 939r171j 939r171j 939r171j 939r171j 939r171j 939r171j 939r171j 91. Wybierz z menu polecenie File Export

Zostanie wyświetlone okno dialogowe Export

939r171j 939r171j 939r171j 939r171j 939r171j 939r171j 939r171j 939r171j 92. Wyszukaj główny katalog witryny i przejdź do podkatalogu Library witryny. Jeżeli witryna nie posiada katalogu z bibliotekami, musisz go utworzyć.

939r171j 939r171j 939r171j 939r171j 939r171j 939r171j 939r171j 939r171j 93. Określ nazwę pliku dla pozycji biblioteki, jeżeli jest taka potrzeba.

939r171j 939r171j 939r171j 939r171j 939r171j 939r171j 939r171j 939r171j 94. Z listy Save as type Save As) wybierz Dreamweaver Library (.lbi)


	Jeżeli wcześniej nie przechodziłeś do katalogu z bibliotekami, program wyświetli ostrzeżenie, informujące, że taki katalog jest niezbędny i poprosi o jego wybranie. Przejście do katalogu z bibliotekami przed wybraniem opcji Dreamweaver Library (.lbi) pozwala uniknąć tego ostrzeżenia - jak to zrobiono w kroku 2. - co pozwala wybrać katalog Library w większym oknie dialogowym, a Fireworks będzie powracał do tego katalogu przy następnej operacji eksportowania z tego samego dokumentu.

939r171j 939r171j 939r171j 939r171j 939r171j 939r171j 939r171j 939r171j 95. Zaznacz pole wyboru Put Images in Subfolder i kliknij przycisk Browse, aby wybrać folder obrazków witryny.

939r171j 939r171j 939r171j 939r171j 939r171j 939r171j 939r171j 939r171j 96. Kliknij Save

Aby po wyeksportowaniu pozycji biblioteki z Fireworks umieścić pozycje biblioteki w Dreamweaverze:

939r171j 939r171j 939r171j 939r171j 939r171j 939r171j 939r171j 939r171j 97. Wybierz w Dreamweaverze z menu polecenie Window Assets lub użyj skrótu klawiaturowego F11., aby otworzyć paletę Assets (Składniki)

Zostanie wyświetlona paleta Assets bieżącej witryny.

Dla użytkowników MacOS: Jeśli w panelu kontrolnym klawiatury (Keyboard Control Panel) zamapowane są jakieś klawisze funkcyjne do uruchamiania programów lub wykonywania innych zadań, nie będziesz mógł używać tych klawiszy w Fireworks. W takim przypadku możesz korzystać jedynie z poleceń menu, chyba że wyłączysz mapowanie klawiszy w panelu kontrolnym klawiatury.

Rysunek 20.17.

Po wyeksportowaniu mapy obrazka z Fireworks jako elementu biblioteki Dreamweavera, będzie ona dostępna w Dreamweaverze w kategorii Library palety Assets

939r171j 939r171j 939r171j 939r171j 939r171j 939r171j 939r171j 939r171j 99. Umieść kursor w tym miejscu dokumentu, w którym chcesz umieścić mapę obrazka

939r171j 939r171j 939r171j 939r171j 939r171j 939r171j 939r171j 100. Wybierz wyeksportowaną mapę obrazka z listy, która znajduje się w palecie Assets

W panelu podglądu palety Assets wyświetlana jest pozycja biblioteki.

939r171j 939r171j 939r171j 939r171j 939r171j 939r171j 939r171j 101. Kliknij przycisk Insert albo przeciągnij element biblioteki z panelu podglądu lub z listy i upuść go w oknie dokumentu.

Mapa obrazka i cały niezbędny kod HTML zostanie umieszczony na tworzonej w Dreamweaverze stronie WWW.

Jeżeli będziesz chciał zmodyfikować mapę obrazka, zaznacz ją i kliknij przycisk Open, znajdujący się w inspektorze Property Dreamweavera. Zostanie otwarte okno dokumentu, zawierające jedynie modyfikowaną pozycję biblioteki. Zaznacz obrazek na stronie i kliknij przycisk Edit w inspektorze Property lub wybierz z menu polecenie Commands Optimize Image in Fireworks. Gdy po zakończeniu edycji będziesz chciał zamknąć okno dokumentu, Dreamweaver zapyta Cię, czy chcesz uaktualnić bibliotekę. Kliknij przycisk Yes, aby uaktualnić bibliotekę lub przycisk No, aby odłożyć to na później.

Technika Fireworks: animowanie plastrów

W Fireworks można budować doskonałe animacje. Wykorzystując opisywaną poniżej technikę, możesz z wykorzystaniem plastrów wkomponować dowolną animację w większy obrazek. Jeśli animowana ma być jedynie niewielka część całego obrazka, na przykład ekran radaru na panelu kontrolnym, przekształcenie całego obrazka na animację mogłoby spowodować drastyczne zwiększenie rozmiaru pliku. Za pomocą plastrów możesz animować jedynie wybrane obszary grafiki, podczas gdy pozostałe są statyczne. Umożliwia to znaczne zmniejszenie rozmiarów końcowych plików.

Aby utworzyć w Fireworks plaster z animacją:

939r171j 939r171j 939r171j 939r171j 939r171j 939r171j 939r171j 102. Utwórz w Fireworks animację, używając normalnej procedury.


	Tworzenie animacji zostanie szczegółowo opisane w części VI.

939r171j 939r171j 939r171j 939r171j 939r171j 939r171j 939r171j 103. Jeśli animacja nie jest jeszcze częścią większego obrazka, przejdź w palecie Frame do klatki Frame 1 i wybierz z menu polecenie Modify Canvas Size, aby powiększyć obszar roboczy.

939r171j 939r171j 939r171j 939r171j 939r171j 939r171j 939r171j 104. Utwórz grafikę otaczającą animację.

939r171j 939r171j 939r171j 939r171j 939r171j 939r171j 939r171j 105. Utwórz plaster z animacji. Możesz zaznaczyć animację i wybrać z menu polecenie Insert Slice lub za pomocą narzędzia Slice narysować prostokąt obejmujący cały obszar animacji.

939r171j 939r171j 939r171j 939r171j 939r171j 939r171j 939r171j 106. Wyświetl paletę Object, jeśli jeszcze nie ma jej na ekranie.

939r171j 939r171j 939r171j 939r171j 939r171j 939r171j 939r171j 107. W palecie Object ustaw łącze plastra i inne pożądane opcje.

939r171j 939r171j 939r171j 939r171j 939r171j 939r171j 939r171j 108. Wyświetl paletę Optimize, jeśli jeszcze nie ma jej na ekranie.

939r171j 939r171j 939r171j 939r171j 939r171j 939r171j 939r171j 109. Z rozwijanej listy Export File Format (Format eksportowanego pliku) wybierz opcję Animated GIF

939r171j 939r171j 939r171j 939r171j 939r171j 939r171j 939r171j 110. Zdefiniuj inne ustawienia optymalizacji.


	Opcje optymalizacji grafiki w Fireworks zostały opisane w rozdziale 15.

939r171j 939r171j 939r171j 939r171j 939r171j 939r171j 939r171j 111. Powtórz polecenia od czwartego do dziewiątego dla wszystkich statycznych plastrów obrazka, a z listy Export File Format w palecie Optimize wybierz dla nich opcje inne niż Animated GIF. Możesz także usunąć zaznaczenia wszystkich plastrów i w palecie Optimize wybrać format eksportu dla całego dokumentu, który zostanie użyty dla wszystkich plastrów, dla których nie wybrałeś wcześniej żadnego innego formatu.

939r171j 939r171j 939r171j 939r171j 939r171j 939r171j 939r171j 112. Gdy już przygotujesz dokument do eksportu, wybierz z menu polecenie File Export

Zostanie otwarte okno dialogowe Export

939r171j 939r171j 939r171j 939r171j 939r171j 939r171j 939r171j 113. W górnej części okna dialogowego określ położenie i nazwy eksportowanych plików.

939r171j 939r171j 939r171j 939r171j 939r171j 939r171j 939r171j 114. Z listy Save as type (Save As) wybierz opcję HTML and Images

939r171j 939r171j 939r171j 939r171j 939r171j 939r171j 939r171j 115. Z listy opcji HTML wybierz, czy eksportować plik HTML, czy kopiować kod do schowka.

939r171j 939r171j 939r171j 939r171j 939r171j 939r171j 939r171j 116. Z listy Slices wybierz opcję Export Slices

939r171j 939r171j 939r171j 939r171j 939r171j 939r171j 939r171j 117. Aby zmodyfikować opcje ustawienia HTML, kliknij przycisk Options w celu otwarcia okna dialogowego HTML Setup

939r171j 939r171j 939r171j 939r171j 939r171j 939r171j 939r171j 118. Kliknij przycisk Save, aby zakończyć proces eksportu.

Animacja zostanie wyeksportowana jako część większego, statycznego obrazka (rysunek 20.18).

Rysunek 20.18.

Na ilustracji animowany jest jedynie ekran radaru, zaś pozostałe części obrazka są statyczne

Podsumowanie

Obiekty internetowe Fireworks: obszary aktywne i plastry są doskonałymi elementami umożliwiającymi integrowanie grafiki z Internetem. łącząc obiekty internetowe z innymi elementami grafiki, projektanci grafiki mogą bezproblemowo przechodzić z jednego środowiska do innego, przez cały czas zachowując możliwość edycji wszystkich obiektów. Podczas pracy z obiektami internetowymi musisz pamiętać o następujących rzeczach:

u 939r171j 939r171j Fireworks obsługuje dwa typy obiektów internetowych: obszary aktywne i plastry. Obszary aktywne służą do oznaczania kodem HTML wybranych fragmentów większej grafiki, zaś plastry dzielą duże obrazki na wiele mniejszych części.

u 939r171j 939r171j Obszary aktywne mogą mieć jeden z trzech podstawowych kształtów: prostokąta, okręgu lub wielokąta. Dla każdego z ich typów Fireworks oferuje odrębne narzędzie. Termin "obszar aktywny" oznacza fragment większej grafiki, nazywanej mapą obrazka.

u 939r171j 939r171j Dowolny obiekt Fireworks może być łatwo przekształcony na obszar aktywny za pomocą polecenia Insert Hotspot

u 939r171j 939r171j Podczas eksportowania map obrazków upewnij się, że wygenerowane zostaną obie części kodu: znacznik <img>, który zawiera łącze do źródłowego obrazka, oraz znacznik <map> z informacjami o obszarze aktywnym.

u 939r171j 939r171j W Fireworks istnieją trzy sposoby tworzenia plastrów: narzędzia Rectangle lub Polygon Slice, polecenie Insert Slice oraz standardowe prowadnice.

u 939r171j 939r171j Włączenie opcji View Slice Guides (Prowadnice plastrów) pozwala liczbę tworzonych plastrów zredukować do minimum.

u 939r171j 939r171j Poszczególne plastry mogą być eksportowane w różnych formatach plików, nawet jako animowane GIF-y, co pozwala łączyć ze sobą animowane i statyczne plastry.

W następnym rozdziale dowiesz się, jak przydzielać behawiory i tworzyć w ten sposób interaktywne elementy grafiki.

Document Info

Accesari: 1588
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