plik

��IDZ DO IDZ DO PRZYK�ADOWY ROZDZIA� PRZYK�ADOWY ROZDZIA� Dreamweaver 4. SPIS TRERCI SPIS TRERCI Vademecum profesjonalisty KATALOG KSI��EK KATALOG KSI��EK Autorzy: Anne-Marie Yerks, John Pickett T�umaczenie: Maria Sok�� KATALOG ONLINE ISBN: 83-7197-542-2 KATALOG ONLINE Tytu� orygina�u: Inside Dremweaver 4 Format: B6, stron: 662 ZAM�W DRUKOWANY KATALOG ZAM�W DRUKOWANY KATALOG oprawa twarda Zawiera CD-ROM TW�J KOSZYK TW�J KOSZYK Si�gaj�c po t� ksi��k�, zyskasz nie tylko dwadzieScia cztery rozdzia�y jej zawartoSci. Skorzystasz tak�e z okazji, aby ulepszy� swoj� stron� WWW i podwy�szy� poziom DODAJ DO KOSZYKA DODAJ DO KOSZYKA w�asnych umiej�tnoSci jako projektanta stron WWW, poprzez prac� z programem Dreamweaver 4. JeSli zastanawiasz si�, dlaczego akurat ta wiedza jest Ci potrzebna, sp�jrz na inne strony WWW, kt�re teraz pojawiaj� si� w Internecie. Zauwa�ysz bez CENNIK I INFORMACJE CENNIK I INFORMACJE trudu, �e dominuje tendencja do interaktywnego wsp��dzia�ania z u�ytkownikiem, cz�sto za poSrednictwem animacji Flash, DHTML-a i JavaScriptu. Stwierdzisz tak�e, ZAM�W INFORMACJE ZAM�W INFORMACJE �e mn�stwo naprawd� u�ytecznych informacji dost�pnych w Internecie pochodzi O NOWORCIACH O NOWORCIACH z baz danych, a prezentuje si� je dzi�ki skryptom Cold Fusion i technologii Active Server Pages. ZAM�W CENNIK ZAM�W CENNIK �aden z tych trend�w nie jest nowy. Internet od samego pocz�tku ewoluuje w kierunku Srodowiska konfigurowanego przez u�ytkownika. JeSli nawet pojawiaj� si� nowe pomys�y, to i tak wyrastaj� one ze starych korzeni. Teraz, bardziej ni� kiedykolwiek, CZYTELNIA CZYTELNIA narz�dzia programowania niezb�dne do stworzenia kompletnej strony WWW, s� dost�pne dla wszystkich, a nie tylko dla programist�w. Co wi�cej, narz�dzia FRAGMENTY KSI��EK ONLINE FRAGMENTY KSI��EK ONLINE projektowe, dzi�ki kt�rym mo�liwe jest przygotowanie naprawd� wspania�ej strony WWW, tak�e staj� si� powszechnie osi�galne. Chocia� nic nie zast�pi wiedzy i talentu, umiej�tnoS� pracy z programem pozwala usun�� niekt�re przeszkody i u�atwia �ycie projektantom i programistom. Dzi�ki programowi Dreamweaver 4i tej ksi��ce mo�na �atwiej sprosta� wyzwaniom, stawianym przez programowanie i projektowanie. Godziny pr�b, b��d�w i frustracji zamieniaj� si� w czas przyjemnie sp�dzony nad przekszta�caniem w�asnej strony WWW w pokazowy przyk�ad formy i funkcjonalnoSci. Instruktorzy znajd� w naszej ksi��ce wszystko, co niezb�dne, aby nauczy� student�w tworzenia i rozbudowywania stron WWW. �wiczenia, pytania testowe i podsumowania sk�adaj� si� na solidny program nauczania. Ksi��ka jest tak�e idealna dla tych u�ytkownik�w programu Dreamweaver, kt�rzy samodzielnie chcieliby nauczy� si� Wydawnictwo Helion obs�ugi programu w domu lub w pracy. Potraktuj t� ksi��k� jako xr�d�o inspiracji ul. Chopina 6 i narz�dzie pomocne w nauce programu Dreamweaver 4 oraz jako poradnik korzystania 44-100 Gliwice z jego mo�liwoSci. Ka�dy z rozdzia��w dostarczy Ci wiedzy, niezb�dnej do wykonania tel. (32)230-98-63 okreSlonych zada�. �wiczenia lub ich zestawy, do��czone do poszczeg�lnych rozdzia��w, e-mail: helion@helion.pl zilustruj� zastosowania funkcji programu Dreamweaver, a podstawowe informacje, pytania testowe i podpowiedzi przyspiesz� realizacj� tych�e �wicze�. Au h I n u n PBywajce palety ....................................................................................................................23 Kod zr�dBowy ........................................................................................................................24 Zintegrowany edytor tekstu .............................................................................................24 Widok kodu i projektu.....................................................................................................24 JavaScript Debugger........................................................................................................24 Dodatkowe informacje na temat kodu.............................................................................25 Skr�ty klawiszowe z mo|liwo[ci dostosowania............................................................25 Nawigacja w kodzie.........................................................................................................25 Zmiana kolorystyki skBadni na bie|co ...........................................................................26 Edycja dokument�w w formacie innym ni| HTML........................................................26 Pasek narz�dzi programu Dreamweaver .........................................................................26 Projekt....................................................................................................................................27 Widok ukBadu strony .......................................................................................................27 Tekst i przyciski programu Macromedia Flash ...............................................................27 Edycja grafiki za pomoc aplikacji Roundtrip ................................................................27 Interfejs u|ytkownika w programach Macromedia .........................................................28 Opcje pracy grupowej............................................................................................................28 Zarzdzanie zasobami......................................................................................................28 Integracja z Visual SourceSafe........................................................................................29 Integracja z WebDAV .....................................................................................................29 Site Reporting ..................................................................................................................29 Konfigurowalne okno Site...............................................................................................30 Wbudowana obsBuga poczty e-mail.................................................................................30 Extension Manager ..........................................................................................................31 Macromedia Exchange ....................................................................................................31 Zarzdzanie oknami...............................................................................................................32 Podsumowanie .......................................................................................................................32 n u n h Okno dialogowe Preferences .................................................................................................34 File Options .....................................................................................................................34 Editing Options................................................................................................................35 Code Colors .....................................................................................................................37 Code Format ....................................................................................................................38 Inne atrybuty formatowania kodu....................................................................................39 Code Rewriting................................................................................................................40 File Types/Editors............................................................................................................42 Invisible Elements ...........................................................................................................44 Layers ..............................................................................................................................44 Panels...............................................................................................................................46 Preview in Browser .........................................................................................................47 Quick Tag Editor .............................................................................................................48 Status Bar.........................................................................................................................48 Posumowanie .........................................................................................................................50 Podstawy j�zyka HTML ........................................................................................................51 Zawarto[ sekcji HEAD ..................................................................................................52 Sekcja BODY ..................................................................................................................60 Edycja kodu HTML ...............................................................................................................66 Widok projektu (Quick Tag Editor) ................................................................................66 Widok kodu i Code Inspector..........................................................................................69 Widok kodu i projektu.....................................................................................................71 Paleta Reference ..............................................................................................................73 Czyszczenie kodu HTML................................................................................................74 Korzystanie z edytor�w zewn�trznych ..................................................................................76 Co to jest Roundtrip HTML?...........................................................................................76 Homesite, BBEdit, TextPad i Notepad............................................................................76 Podsumowanie .......................................................................................................................77 II u Importowanie tekstu...............................................................................................................83 Wklejanie tekstu do dokumentu programu Dreamweaver ..............................................83 Wklejanie kodu HTML ...................................................................................................83 Eksportowanie tekstu z programu Dreamweaver............................................................84 Importowanie tekstu z edytora Microsoft Word..............................................................84 Zapisywanie pliku HTML z edytora Word .....................................................................85 Formatowanie tekstu w inspektorze Property........................................................................88 Dodawanie i usuwanie czcionek......................................................................................88 Kroje czcionek.................................................................................................................89 Rozmiar czcionki, style i wyr�wnanie tekstu..................................................................90 Kolor tekstu .....................................................................................................................95 Prostszy spos�b formatowania tekstu ....................................................................................96 Style HTML.....................................................................................................................96 Korzystanie z palety HTML Styles .................................................................................97 Znaki specjalne ....................................................................................................................100 Podsumowanie .....................................................................................................................102 n n Rodzaje [cie|ek dost�pu ......................................................................................................105 Co to jest [cie|ka dost�pu?............................................................................................106 Zrozumienie [cie|ek dost�pu.........................................................................................106 Zcie|ki dost�pu definiowane wzgl�dem dokumentu.....................................................107 Zcie|ki wzgl�dne definiowane wzgl�dem foldera nadrz�dnego ...................................107 Definiowanie poBczeD.........................................................................................................108 Usuwanie poBczeD ........................................................................................................111 Definiowanie poBczeD prowadzcych na zewntrz witryny ........................................112 Kolory poBczeD i podkre[lenia ...........................................................................................112 Wyb�r schemat�w kolorystycznych..............................................................................113 WyBczanie opcji podkre[lania poBczeD.......................................................................113 PoBczenia e-mail.................................................................................................................114 Definiowanie poBczeD e-mail z poziomu inspektora Property.....................................115 Zakotwiczenia o zdefiniowanych nazwach .........................................................................116 Definiowanie zakotwiczeD przy pomocy Point-to-File .................................................117 Definiowanie mapy odno[nik�w .........................................................................................118 Usuwanie obszar�w aktywnych ....................................................................................120 Paski nawigacji ....................................................................................................................120 Interaktywne paski nawigacji cig dalszy ................................................................122 Menu rozwijane ...................................................................................................................122 Edycja menu rozwijanego .............................................................................................124 Podsumowanie .....................................................................................................................124 Formaty plik�w graficznych................................................................................................126 Format GIF ....................................................................................................................126 Format JPEG..................................................................................................................128 Format PNG...................................................................................................................128 Projektowanie z wykorzystaniem obraz�w .........................................................................130 Obraz jako poBczenie ...................................................................................................133 Obramowanie obrazu.....................................................................................................135 Przypisywanie obrazowi behawioru..............................................................................135 Edycja obraz�w....................................................................................................................138 Opcja Roundtrip Graphics Editing i Fireworks.............................................................138 Zmiana rozmiar�w obrazu.............................................................................................138 Paleta Assets i obrazy ..........................................................................................................140 Miniatury obraz�w...............................................................................................................143 Internetowy album fotograficzny ..................................................................................144 Podpowiedzi dotyczce umieszczania obraz�w na serwerze ..............................................146 Podsumowanie .....................................................................................................................147 n n n n n PosBugiwanie si� kolorami ...................................................................................................150 Definiowanie kolor�w ...................................................................................................150 WBasne kolory................................................................................................................156 Paleta Assets i kolory ....................................................................................................157 Lista Favorite palety Assets...........................................................................................158 Projekt i ukBad strony...........................................................................................................159 Wzory tBa .......................................................................................................................160 Linie siatki .....................................................................................................................160 Kalki ..............................................................................................................................162 Marginesy strony i ich szeroko[ ..................................................................................164 Linijki ............................................................................................................................164 Projektowanie internetowe: du|y obraz...............................................................................165 Rozdzielczo[ ekranu ....................................................................................................165 Strategia projektowa ......................................................................................................166 Przepustowo[ Bczy a rozmiar plik�w .........................................................................168 Podsumowanie .....................................................................................................................172 III n n n u n u n n u u n Wstawianie tabel..................................................................................................................178 Piksele czy procenty? ....................................................................................................179 Wprowadzanie danych do tabeli..........................................................................................180 Wyr�wnywanie tabel i definiowanie obramowaD ...............................................................181 Obramowanie tabeli.......................................................................................................182 Formatowanie tabel..............................................................................................................184 Rozpinanie kom�rek tabeli............................................................................................184 PodziaB i scalanie kom�rek ............................................................................................186 Tabele zagnie|d|one......................................................................................................187 Modyfikacja tabel ..........................................................................................................189 Kolory w tabelach i w kom�rkach oraz kolory obramowaD................................................191 Stosowanie kolor�w i obraz�w jako tBa tabeli...............................................................193 PodziaB obrazu na wycinki a tabele......................................................................................195 PodziaB obraz�w na wycinki za pomoc Fireworks ......................................................195 Widok ukBadu.......................................................................................................................197 Rysowanie kom�rek tabeli ............................................................................................199 Edycja tabel w widoku projektu ....................................................................................201 Podsumowanie .....................................................................................................................201 n n u u n Ramki i ukBady ramek..........................................................................................................204 Dokument ukBadu ramek ...............................................................................................205 Zagnie|d|anie element�w FRAME i FRAMESET.......................................................206 Ramki w programie Dreamweaver ......................................................................................206 Tworzenie ramek i ukBad�w ramek ...............................................................................207 Zaznaczanie ramek ........................................................................................................209 Zapisywanie ramek........................................................................................................209 Zmiana rozmiar�w ramek..............................................................................................210 Usuwanie ramek ............................................................................................................212 Zaawansowane wBa[ciwo[ci ramek i ukBad�w ramek .........................................................212 Atrybuty ukBadu ramek..................................................................................................212 Atrybuty ramek..............................................................................................................213 Nazwy zarezerwowane ..................................................................................................215 Nazwy ramek.................................................................................................................216 Element NOFRAMES ...................................................................................................216 Podsumowanie .....................................................................................................................216 n Par� sB�w o warstwach.........................................................................................................217 Warstwy a tabele ...........................................................................................................218 Czy warstwy powinny si� nakBada?.............................................................................218 Podstawowe informacje na temat warstw............................................................................219 Rysowanie warstw.........................................................................................................219 Umieszczanie zawarto[ci na warstwie ..........................................................................221 Definiowanie rozmiar�w warstw...................................................................................222 Pozycjonowanie warstw ................................................................................................224 Definiowanie wBa[ciwo[ci warstwy.....................................................................................228 Atrybuty znacznik�w <DIV> i <SPAN> ......................................................................228 Jeszcze o warstwach ............................................................................................................231 Warstwy zagnie|d|one ..................................................................................................231 WBa[ciwo[ci warstwy ....................................................................................................232 Konwersja warstw w tabele...........................................................................................232 Wprawianie warstw w ruch .................................................................................................234 Podsumowanie .....................................................................................................................237 u Formularze HTML...............................................................................................................239 Podstawy........................................................................................................................239 Elementy formularza............................................................................................................240 Obiekty formularza na palecie obiekt�w .............................................................................242 Pola tekstowe formularza.....................................................................................................245 HasBowe pola tekstowe ........................................................................................................246 Wielowierszowe pola tekstowe............................................................................................247 Pola wyboru .........................................................................................................................249 Przyciski opcji......................................................................................................................249 Menu rozwijane ...................................................................................................................252 Listy przewijane...................................................................................................................254 Pole danych typu Hidden...............................................................................................255 Pole danych typu File ....................................................................................................255 WysyBanie i czyszczenie formularza....................................................................................255 Podsumowanie .....................................................................................................................256 n h u Dlaczego stosowa arkusze styl�w? ....................................................................................257 Grupowanie styl�w........................................................................................................258 Dziedziczenie stylu........................................................................................................259 Nie bez powodu nazywa si� je kaskadowymi!..............................................................259 Stosowanie styl�w na stronach WWW .........................................................................260 HTML a CSS.................................................................................................................261 Tworzenie i stosowanie arkuszy styl�w ..............................................................................265 Paleta CSS Styles...........................................................................................................266 Tworzenie nowego stylu................................................................................................266 Edycja stylu ...................................................................................................................268 Definiowanie poBczeD do zewn�trznych arkuszy styl�w.............................................268 Usuwanie arkusza styl�w ..............................................................................................269 Style i atrybuty.....................................................................................................................272 Kategoria Type ..............................................................................................................273 Kategoria Background...................................................................................................274 Kategoria Block.............................................................................................................275 Kategoria Box................................................................................................................275 Kategoria Border ...........................................................................................................276 Kategoria List ................................................................................................................277 Kategoria Positioning ....................................................................................................278 Kategoria Extensions.....................................................................................................278 Podsumowanie .....................................................................................................................280 I n n 8 n n Planowanie witryny .............................................................................................................283 Czego chcesz dzisiaj? ....................................................................................................284 Kto to b�dzie ogldaB i w jaki spos�b? ..........................................................................284 Co oni chc zobaczy? ..................................................................................................285 Inne rozwa|ania.............................................................................................................286 Organizacja plik�w........................................................................................................287 Definiowanie witryny ..........................................................................................................289 Kategoria Local Info......................................................................................................289 Kategoria Remote Info ..................................................................................................291 Design Notes..................................................................................................................294 Kategoria Site Map Layout............................................................................................295 Kategoria File View Columns .......................................................................................296 Metody adresowania ............................................................................................................299 Adresowanie bezwzgl�dne ............................................................................................300 Adresowanie wzgl�dne..................................................................................................300 Tworzenie plik�w ................................................................................................................302 Tworzenie nowych plik�w ............................................................................................302 Otwieranie plik�w .........................................................................................................303 Wy[wietlanie witryny w przegldarce ..........................................................................303 Zapisywanie plik�w.......................................................................................................305 Zapisywanie kopii zapasowych .....................................................................................305 Zamykanie plik�w .........................................................................................................306 Umieszczanie plik�w na serwerze.................................................................................306 Podsumowanie .....................................................................................................................310 u n n u n Okno Site .............................................................................................................................311 Przycisk Connects to Remote Host ...............................................................................312 Przycisk Refresh............................................................................................................313 Przyciski Get i Put .........................................................................................................313 Przyciski Check Out i Check In ....................................................................................315 Przycisk Stop Current Task ...........................................................................................315 Przycisk zwijania/rozwijania okna ................................................................................316 Przycisk Site Files .........................................................................................................316 Przycisk Site Map..........................................................................................................316 Menu Site.......................................................................................................................316 Przycisk pomocy............................................................................................................317 Korzystanie z mapy witryny ................................................................................................317 Dostosowywanie mapy witryny ....................................................................................318 Dodawanie, usuwanie i modyfikowanie poBczeD ........................................................320 Zmiana tytuBu strony......................................................................................................323 Zmiana strony gB�wnej widoku mapy witryny..............................................................323 Opcje widoku mapy witryny .........................................................................................324 Zapisywanie mapy witryny jako obrazu........................................................................326 Kontrola poBczeD ................................................................................................................327 Naprawa poBczeD..........................................................................................................329 Zmiana poBczeD............................................................................................................330 Synchronizacja witryn lokalnej i odlegBej............................................................................330 Polecenia Select Newer Local/Remote..........................................................................330 Polecenie synchronizacji ...............................................................................................331 Narz�dzie znajdowania i zamiany .......................................................................................333 Znajdowanie kodu zr�dBowego i tekstu.........................................................................336 Zaawansowane procedury znajdowania tekstu..............................................................337 Znajdowanie znacznik�w ..............................................................................................338 Stosowanie wyra|eD regularnych ..................................................................................339 Zapisywanie wzorc�w dla procedur znajdowania oraz znajdowania i zamiany ...........343 Raporty witryny ...................................................................................................................344 Sprawdzanie poprawno[ci interpretacji stron WWW w r�|nych przegldarkach...............347 Kontrola czas�w Badowania .................................................................................................350 Podsumowanie .....................................................................................................................352 u Zasoby witryny ....................................................................................................................353 Wstawianie zasob�w .....................................................................................................356 Dostosowywanie palety Assets .....................................................................................359 Korzystanie z zasob�w w innych witrynach .................................................................359 Edycja zasob�w .............................................................................................................362 Twoje ulubione zasoby..................................................................................................363 Korzystanie z systemu Check In/Check Out .......................................................................367 Konfiguracja systemu Check In/Check Out ..................................................................368 Pobieranie i zwracanie plik�w.......................................................................................369 Opcje nadzoru nad wersj pliku i kodem zr�dBowym .........................................................371 Integracja z Visual SourceSafe......................................................................................372 Integracja z WebDAV ...................................................................................................373 Korzystanie z Design Notes.................................................................................................374 Zastosowania og�lne .....................................................................................................374 Dostosowywanie kolumn widoku Site Files okna Site .................................................377 Korzystanie z Design Notes w Fireworks .....................................................................379 Tworzenie raport�w na temat organizacji prac nad witryn................................................380 Raporty o plikach pobranych do edycji.........................................................................381 Raporty Design Notes....................................................................................................382 Podsumowanie .....................................................................................................................384 n O szablonach........................................................................................................................385 Co to jest biblioteka? .....................................................................................................386 Przygotowywanie szablonu .................................................................................................386 Definiowanie obszar�w edytowalnych..........................................................................388 Usuwanie obszar�w edytowalnych ...............................................................................390 Konfigurowanie wBa[ciwo[ci szablonu .........................................................................391 Design Notes..................................................................................................................391 Stosowanie szablon�w.........................................................................................................391 DoBczanie i odBczanie szablon�w .....................................................................................394 DoBczanie szablonu ......................................................................................................395 OdBczanie szablonu ......................................................................................................395 Aktualizacja stron opartych na szablonach ...................................................................396 Stosowanie szablon�w z dokumentami XML .....................................................................397 O bibliotekach......................................................................................................................398 Tworzenie i stosowanie element�w bibliotecznych ......................................................398 Edycja element�w bibliotecznych .................................................................................400 OdBczanie i usuwanie element�w bibliotecznych........................................................401 Elementy biblioteczne korzystajce ze skrypt�w JavaScript...............................................402 Podsumowanie .....................................................................................................................403 n u 0 An n Okno Timelines....................................................................................................................408 Jak korzysta z okna Timelines .....................................................................................409 Kontrolki........................................................................................................................410 Tworzenie animacji..............................................................................................................411 Inne sposoby wykorzystania linii czasowych......................................................................419 Definiowanie [cie|ek animacji......................................................................................421 Podpowiedzi i uwagi dotyczce animacji............................................................................422 Podsumowanie .....................................................................................................................423 An h Jak dziaBa Flash....................................................................................................................426 Grafika wektorowa a rastrowa.......................................................................................427 Czy znasz Shockwave a?...............................................................................................428 Wstawianie sekwencji wideo Flash do dokumentu programu Dreamweaver .....................430 Konfigurowanie wBa[ciwo[ci sekwencji wideo programu Flash ..................................431 Korzystanie z tekstu programu Flash...................................................................................439 Stosowanie przycisk�w programu Flash .............................................................................441 Podsumowanie .....................................................................................................................445 n Podstawy j�zyka JavaScript.................................................................................................447 Elementy........................................................................................................................448 Elementy: zmienne ........................................................................................................448 Elementy: obiekty i wBa[ciwo[ci ...................................................................................450 Elementy: metody..........................................................................................................450 Elementy: funkcje..........................................................................................................450 Elementy procedury obsBugi zdarzeD .......................................................................451 Dreamweaver i JavaScript ...................................................................................................451 Wstawianie behawior�w................................................................................................452 Modyfikacja behawior�w ..............................................................................................455 Podsumowanie .....................................................................................................................458 n u n h Rozbudowa mo|liwo[ci przegldarek za pomoc moduB�w dodatkowych i ActiveX........459 ModuBy dodatkowe (plug-iny), aplikacje pomocnicze i typy MIME............................460 Konfiguracja i dostosowywanie ....................................................................................461 Ewentualne problemy z konfiguracj ............................................................................462 ModuBy dodatkowe Netscape a obiekty ActiveX ..........................................................463 Technologie moduB�w dodatkowych...................................................................................467 Shockwave.....................................................................................................................467 QuickTime .....................................................................................................................476 Pliki multimedialne RealSystems..................................................................................491 Rozbudowywanie mo|liwo[ci przegldarki za pomoc Javy..............................................503 Co to jest Java? ..............................................................................................................503 Korzystanie z aplet�w ...................................................................................................505 yr�dBa aplet�w...............................................................................................................506 Praca z apletami w programie Dreamweaver ................................................................507 Wstawianie apletu..........................................................................................................507 Uwagi koDcowe na temat Javy: skomplikowane aplety................................................511 Dzwi�k na stronach WWW .................................................................................................511 Dzwi�k cyfrowy: terminy i poj�cia ...............................................................................512 Problem moduB�w dodatkowych ...................................................................................513 Wstawianie dzwi�ku......................................................................................................513 Kontrola nad dzwi�kiem................................................................................................517 Zestawianie wszystkiego w caBo[.......................................................................................519 Stw�rz pliki multimedialne ...........................................................................................519 Sprytnie korzystaj z ramek ............................................................................................520 Detekcja moduB�w dodatkowych.........................................................................................523 Decyzje strategiczne ......................................................................................................523 Detekcja za pomoc behawiora Check Plugin ..............................................................524 Detekcja nie wymagajca skrypt�w ..............................................................................526 Podsumowanie .....................................................................................................................529 I n n n n h n x n n n Czym s rozszerzenia?.........................................................................................................533 Umiejscowienie rozszerzeD na dysku ..................................................................................534 Folder Behaviors............................................................................................................535 Folder Objects................................................................................................................536 Stosowanie behawior�w ......................................................................................................537 Paleta Behaviors ............................................................................................................537 Cz�sto stosowane zdarzenia ..........................................................................................542 Cz�sto stosowane akcje .................................................................................................543 Extension Manager ..............................................................................................................545 Zciganie i instalacja rozszerzeD ...................................................................................546 Zarzdzanie rozszerzeniami ..........................................................................................550 Usuni�cie instalacji rozszerzeD......................................................................................553 Podsumowanie .....................................................................................................................553 n n n h h Zanim zaczniemy.................................................................................................................555 Praca z obiektami.................................................................................................................556 Czym s obiekty?...........................................................................................................556 Tworzenie wBasnych obiekt�w ......................................................................................560 Mdre posBugiwanie si� obiektami ................................................................................572 Praca z behawiorami............................................................................................................573 Czym s behawiory?......................................................................................................574 Tworzenie wBasnego behawiora ....................................................................................577 Tworzenie wBasnych behawior�w .................................................................................588 Wsp�Bdzielenie rozszerzeD...................................................................................................589 Czy chcesz si� dzieli z innymi? ...................................................................................589 Uodpornianie kodu ........................................................................................................589 Projekt: testowanie u|yteczno[ci...................................................................................593 Opracowanie dokumentacji ...........................................................................................594 Rozprowadzanie ............................................................................................................597 Podsumowanie .....................................................................................................................601 n n n h Wojownik kodu....................................................................................................................603 Widok kodu ...................................................................................................................604 Twarz w twarz z XML .......................................................................................................611 Tre[ o narzuconej strukturze kontra tre[ o narzuconym wygldzie...........................613 Dostosowywanie znacznik�w........................................................................................614 Przej[cie do j�zyka XHTML 1.0 .........................................................................................615 Wprowadzenie do j�zyka HTML zgodno[ci z XML-em ..............................................615 XHTML a HTML 4.......................................................................................................618 Problemy zgodno[ci z wersj przegldarki ...................................................................618 Podsumowanie .....................................................................................................................619 n n h Statyczne kontra dynamiczne ..............................................................................................621 Serwer WWW................................................................................................................622 Bazy danych ..................................................................................................................623 Korzystanie z UltraDev........................................................................................................625 Okno Site Definition......................................................................................................626 Palety Data Bindings i Server Behaviors ......................................................................628 Tworzenie dynamicznej witryny..........................................................................................629 Podsumowanie .....................................................................................................................634 A u n Webmonkey .........................................................................................................................646 westciv.com .........................................................................................................................646 NetMechanic........................................................................................................................646 The Web Standards Project..................................................................................................647 Netscape Standards Challenge.............................................................................................647 n Wymagania systemowe .......................................................................................................649 Korzystanie z plik�w z dysku CD-ROM.............................................................................649 Pliki wykorzystywane w wiczeniach .................................................................................649 RozdziaB 18. By mo|e zwr�ciBe[ uwag�, |e strony WWW zdobywajce nagrody, na przykBad w or- ganizowanym przez Macromedia konkursie Site of the Day, zazwyczaj zawieraj se- kwencje wideo programu Flash. Cho istnieje wiele sposob�w umieszczania animacji na stronach WWW choby animacje DHTML, animowane GIF-y, animacje Javy i JavaScriptu trudno znalez osob�, kt�ra nie byBaby pod wra|eniem tego typu ani- macji, kt�re mo|na uzyska w programie Flash. Niezale|nie od tego, czy jest to wirowanie, kr�cenie, zanikanie, skakanie, podskakiwa- nie czy nawet [piewanie, animacja Flash jest czym[ spektakularnym. Aby[ byB jeszcze bardziej zBakniony poznania tego narz�dzia, wspomn� choby o mo|liwo[ci Bczenia apli- kacji stworzonych w programie Flash z baz danych. Oznacza to, mi�dzy innymi, |e witry- ny e-commerce przestan by nudne, a zaczn by pi�kne. Z ka|d now wersj Flash coraz lepiej speBnia wymagania stawiane standardowemu narz�dziu do tworzenia witryn. Ci, kt�rzy buduj swoje witryny od pocztku do koDca w programie Flash, unikaj wielu puBapek projektowych, kt�re od lat s zmor projektant�w stron WWW. Na przy- kBad sekwencje wideo programu Flash dostosowuj si� rozmiarami do okna przegldar- ki, co eliminuje obawy zwizane z szeroko[ci jej okna. Poniewa| Flash jest progra- mem wektorowym, kwestia utraty jako[ci obrazu praktycznie nie istnieje. Chocia| starsze przegldarki (wersje poni|ej 3.0) nie maj wbudowanego moduBu dodatkowego (plug-inu) Flash Player, jest wysoce prawdopodobne, |e coraz wi�ksza rzesza ludzi, do- ceniajc zalety witryn Flash (i innych nowinek pojawiajcych si� na stronach WWW), my[li o uaktualnieniu oprogramowania, a nawet ju| to zrobiBa. PrzyszBo[ rysuje si� dla programu Flash w r�|owych barwach, a odbiciem tego jest ro- snca liczba student�w wybierajcych na uczelniach kierunki wi|ce si� z multime- diami. Ludzie ci wiedz, |e Flash to nie tylko kaprys. W tym rozdziale zbadamy powody tego szaBu na punkcie programu Flash. Oto lista te- mat�w: spos�b dziaBania programu Flash, wstawianie sekwencji wideo programu Flash, stosowanie tekstu programu Flash, wstawianie przycisk�w programu Flash. Aby zrozumie, jak dziaBa Flash, musisz zacz od tego, |e Flash nie jest cz�[ci skBa- dow programu Dreamweaver ani przegldarki. Zanim wstawisz sekwencj� wideo na stron� WWW tworzon w programie Dreamweaver, najpierw musisz przygotowa t� sekwencj� w programie Flash. Programy Dreamweaver i Flash oba wyprodukowane przez firm� Macromedia mo|na traktowa jak czBonk�w jednego zespoBu, d|cych do wsp�lnego celu: stworzenia wspaniaBej witryny, kt�ra nie tylko doskonale wyglda, lecz tak|e udost�pnia wiele interaktywnych opcji. Flash ewoluowaB od programu do tworzenia animacji typowych dla film�w rysunko- wych, przez animacje dla gier elektronicznych, po prezentacje multimedialne. To, co odr�|nia Flash od pozostaBych program�w do animacji, to mo|liwo[ wyeksportowania animacji jako plik�w Shockwave i stosowania ich na stronach WWW. Ka|da nowa wersja coraz lepiej zaspokaja potrzeby projektant�w i tw�rc�w stron WWW. Obecnie jest to ju| nie tylko program do animacji. Chocia| nadal u|ytkownik programu Flash musi zna podstawy tworzenia animacji, to zakres mo|liwo[ci, jakie daje program, jest znacznie szerszy. Mo|na na przykBad przesBa zmienne z bazy danych do interfejsu Flash i zaprezentowa rezultaty na stronie WWW za pomoc animacji. Mo|na tak|e stworzy aplikacje e-commerce, udost�pniajce u|ytkownikom animowany interfejs, kt�ry dodatkowo po- zwala [ledzi stan rachunku oraz przechowuje numery kart kredytowych. PoBczenie mo|liwo[ci artystycznych i potencjaBu technicznego sprawiBo, |e Flash staB si� znany jako program do tworzenia bardziej interesujcych witryn. Na przykBad pro- jektanci z oddcast.com stworzyli interaktywn aplikacj�, pokazan na rysunku 18.1 jest to ruszajcy si� i m�wicy bot, kt�ry mo|na dowolnie wykorzysta. un 8 Wirtualna gospodyni witryny oddcast.com przyprawi Ci o dr enie Jednym z termin�w, kt�ry pojawia si� cz�sto w poBczeniu z programem Flash jest ter- min grafika wektorowa . Je[li nale|ysz to tych biedak�w, kt�rzy nie rozumiej, co on oznacza, przeczytaj ten rozdziaB, a przestanie by czarn magi. Obrazy wektorowe s wy[wietlane na ekranie lub wysyBane do drukarki obsBugujcej PostScript w oparciu o dokBadnie okre[lone r�wnania matematyczne. Projektanci do- kument�w drukowanych i stron WWW s r�wnie wielkimi wielbicielami grafiki wek- torowej, bowiem cechuje j szeroki zakres mo|liwo[ci dostosowywania wielko[ci obiekt�w przy zachowaniu jako[ci obrazu. Dotyczy to zar�wno ekranu komputera, jak i wydruku na drukarkach obsBugujcych PostScript. Je[li na przykBad chcesz umie[ci logo firmy na tablicy ogBoszeD, projektant Twojego plakatu niewiele b�dzie w stanie zdziaBa z przesBanym mu obrazem rastrowym o roz- dzielczo[ci 72 dpi. {eby uzyska sensowny efekt, najpierw musi on odtworzy logo w postaci wektorowej korzystajc z takich program�w, jak Adobe Illustrator lub Photoshop, ewentualnie Macromedia Freehand lub Fireworks. Dopiero powstaBy w ten spos�b obraz wektorowy mo|na powi�kszy do rozmiaru wymaganego na plakacie, bez obaw o rozmycie kraw�dzi i utrat� koloru. Je[li b�dzie to konieczne, to samo logo wektorowe mo|na nast�pnego dnia pomniejszy tak, aby zmie[ciBo si� w rogu koperty i nada mu inny kolor. I nadal kraw�dzie b�d ostre, a kolor prawdziwy. W tym si� wBa- [nie zawiera pi�kno grafiki wektorowej. Dodatkowa korzy[ to niewielki rozmiar plik�w. Flash jest programem wektorowym, a wi�c wszelkie obiekty, kt�re powstaj przy u|y- ciu jego moduBu rysunkowego automatycznie przeskalowuj si�, dopasowujc do roz- miar�w okna. Nie musisz wi�c ich rozciga lub pomniejsza i nie trac one jako[ci. To samo dotyczy wszelkich ksztaBt�w wektorowych, kt�re wklejasz lub importujesz do bi- blioteki programu Flash. Inaczej jest jednak w przypadku fotografii i zeskanowanych grafik. Obrazy fotograficzne, takie jak obrazy JPG, to pliki zawierajce ilustracje ra- strowe i nie mo|na ich skalowa. Innymi przykBadami grafiki rastrowej (opr�cz obra- z�w BMP) s obrazy w formatach TIF, PICT i GIF. Komputery nie potrafi skalowa grafiki rastrowej bez utraty jako[ci, poniewa| obraz rastrowy stanowi zestaw pikseli, kt�rych uBo|enia nie mo|na zmieni. Dla grafiki ra- strowej ukBad pikseli jest czym[ tak trwaBym, jak dla Ciebie struktura DNA. Wymusze- nie zmiany rozmiar�w takiego obrazu zawsze powoduje utrat� jako[ci. Uwaga ta jest r�wnie prawdziwa dla obraz�w prezentowanych na ekranie, jak i drukowanych. Utrata jako[ci pojawia si� tak|e jako efekt kompresji lub usuni�cia kolor�w (tak jak w przy- padku eksportu do formatu GIF). Program Flash pozwala na importowanie grafiki rastrowej i stosowanie jej w anima- cjach. Warto jednak, aby[ ju| teraz wiedziaB, |e spowolni to odtwarzanie filmu tam, gdzie nie s dost�pne Bcza o wysokiej przepustowo[ci. Oczywi[cie wzro[nie tak|e rozmiar pliku .swf powstaBego po wyeksportowaniu do formatu Shockwave. Obrazy rastrowe nie s wcale rzadkie w sekwencjach wideo, lecz zaleca si� ogranicza- nie ich liczby. W przeciwnym razie efektem Twoich dziaBaD b�dzie bardzo wolny film. Flash daje nad tym pewn kontrol�, poprzez mo|liwo[ zmiany poziomu jako[ci obrazu przy eksporcie do formatu JPG. Im wy|sza jako[ obrazu JPG, tym wi�kszy rozmiar pliku i wy|sze obci|enie Bczy. Identyfikacja grafiki wektorowej Oto procedura, kt�ra pozwoli Ci natychmiast rozpozna obraz wektorowy: Otw�rz plik zawierajcy obraz w programie do edycji grafiki (takim jak Fireworks lub Flash). Zaznacz obraz. Je[li na obrazie pojawi si ruchome punkty tak zwane uchwyty (patrz rysunek 18.2), jest to obraz wektorowy. W takim przypadku mo|esz zwiksza lub zmniejsza jego rozmiar (ko- rzystajc z narzdzia przeskalowywania), bez obawy o utrat jako[ci. un 8 Obraz wektorowy zaznaczony w Fireworks mo na dostosowywa, przesuwaj c punkty przy u yciu narz dzia Open Path Je[li uchwyty si nie pojawi, obraz mo|e by obrazem rastrowym. Spr�buj rozgrupowa ob- raz, aby sprawdzi, czy uchwyty si pojawi (w programie Flash rozgrupowanie umo|liwia skr�t Ctrl+B). Je[li nadal nie s widoczne, masz do czynienia z obrazem rastrowym. Je[li wklejasz obiekty Fireworks do sekwencji wideo programu Flash, zostan one przeksztaBcone do postaci grafiki rastrowej. Aby zachowa posta wektorow, skorzystaj z dostpnej w Fireworks opcji Copy as Vectors, a nastpnie, ju| w programie Flash, rozgrupuj je, stosujc skr�t Ctrl+B, przygotowujc je w ten spos�b do edycji. n h PosBugiwanie si� sekwencjami wideo w programie Dreamweaver wymaga przynajmniej podstawowej znajomo[ci programu Flash i tworzonych przez niego plik�w. Jest z tym cz�sto problem. Poniewa| wielu tw�rc�w i projektant�w stron WWW nigdy nie korzy- staBo z programu Flash, o metodach eksportu plik�w Flash i wstawiania ich w doku- mentach HTML kr|y wiele mit�w i bB�dnych teorii. Aby wstawiana w dokumencie HTML programu Dreamweaver sekwencja wideo mogBa zosta skonfigurowana i odtworzona w przegldarce, musi ona by w formacie Shockwave Flash (.swf). Sekwencja wideo utworzona w programie Flash zostanie zapisana jako plik .fla, a wi�kszo[ przegldarek b�dzie miaBa problemy z jej odtworzeniem, dop�ki wer- sja pliku nie zostanie przekonwertowana do postaci .swf za pomoc polecenia Export. Znaczniki <OBJECT> i <EMBED> Poniewa| pliki .swf s w formacie wprowadzonym przez Macromedia, ich obsBuga w przegldarce jest mo|liwa dopiero po zainstalowaniu programu Macromedia Flash Player. Najnowsze wersje przegldarek Netscape Navigator i Internet Explorer maj ju| wbudowany moduB Flash Player, aczkolwiek w r�|nych wersjach. W przegldarce Microsoft Internet Explorer Macromedia Flash Player wystpuje jako kontrolka ActiveX, do kt�rej odwoBanie w kodzie HTML umieszcza si w znaczniku . W Navigatorze Netscape jest to moduB dodatkowy, do kt�rego odwoBanie definiowane jest w znaczniku . Aby umo|liwi obsBug plik�w .swf w obu typach przegldarek, w kodzie HTML nale|y umie[ci oba znaczniki i . Oto przykBad kodu HTML dla dokumentu programu Dream- weaver, do kt�rego wstawiono plik Shockwave: Na szcz[cie nie musisz wiedzie, jak zapisa zawarto[ obu znacznik�w. Dreamweaver tworzy kod automatycznie, gdy plik Shockwave jest wstawiany do dokumentu. Warto jednak mie cho og�ln wiedz na temat znacznik�w i na wypadek, gdyby[ kiedy[ potrzebowaB zmieni parametry lub wprowadzi w znacznikach inne zmiany. By mo|e z tego wzgl�du wyraz Shockwave staB si� podstawowym zr�dBem nieporo- zumienia. Wiele os�b my[li, |e Shockwave to program, a tak nie jest. W rzeczywisto[ci Shockwave to typ pliku. Tak jak .JPG czy .GIF to typy plik�w graficznych, tworzonych przy eksporcie obrazu w programie do obr�bki grafiki, tak rozszerzenie .swf (pochodz- ce od Shockwave Flash) przypisywane jest plikom eksportowanym z Macromedia Flash lub Director (oraz kilku innych program�w). Pliki wyeksportowane w programach Flash lub Director do formatu Shockwave mog by odtwarzane w przegldarkach i prezentuj si� w nich niezle. Tak wi�c, je[li nast�pnym razem kto[ zapyta Ciebie, czy znasz Shockwave a, b�dziesz m�gB sprostowa nie[cisBo[ w posBugiwaniu si� tym terminem. h n Inny typ pliku, kt�ry tak|e powiniene[ pozna ma rozszerzenie nazwy .swt (Flash Gene- rator Template). Pliki .swt pozwalaj modyfikowa sekwencje wideo programu Flash. W programie Dreamweaver pliki te reprezentuj przyciski Flasha. Przygotowane w progra- mie Flash przyciski mo|na wyeksportowa jako pliki .swt, a nast�pnie umie[ci w oknie dialogowym Insert Flash Button programu Dreamweaver. W Twojej kopii oprogramowania Dreamweaver pewien zestaw plik�w .swt jest ju| do- st�pny w oknie Insert Flash Button. Pliki te s zgromadzone w folderach Flash Buttons i Flash Text (oto peBna [cie|ka dost�pu: Dreamweaver\Configuration\Flash Objects\ Flash Buttons (lub Flash Text)). Wszelkie nowe przyciski, kt�re utworzysz w programie Flash i wyeksportujesz jako pliki .swt, tak|e powinny znalez si� w tym miejscu. Je[li na temat tworzenia szablon�w przycisk�w Flash chcesz si� dowiedzie nieco wi�- cej, przejrzyj elektroniczny podr�cznik dost�pny w witrynie macromedia.com. Znaj- dziesz go w sekcjach Dreamweaver Support lub Flash Support pod hasBem Using Button Templates with Dreamweaver . Nie tylko Flash i Director potrafi eksportowa pliki do formatu .swf. Takich program�w jest znacznie wicej. Je[li si porozgldasz dobrze, bdziesz zdziwiony, jak popularna jest to opcja. Jak to dobrze, |e zdecydowaBe[ si� pozna program Dreamweaver masz tu caBy ze- staw narz�dzi, dzi�ki kt�rym Twoje sekwencje wideo b�d dziaBa i wyglda lepiej. Wstawianie sekwencji wideo Flash do dokumentu programu Dreamweaver nie mogBoby by prostsze: Umie[ punkt wstawiania w tym miejscu dokumentu programu Dreamweaver, w kt�rym ma si� pojawi sekwencja filmowa. ByBoby dobrze umie[ci j w kom�rce tabeli lub na warstwie, aby uzyska kontrol� nad sposobem wyr�wnania. Wybierz pozycj� Flash w menu podrz�dnym Media menu Insert lub kliknij ikon� Insert Flash na palecie obiekt�w. Sp�jrz na rysunek 18.3. un 8 Wstawianie multimedialnego obiektu programu Flash do dokumentu programu Dreamweaver 4.0 Wska| plik .swf, kt�ry chcesz wstawi. Film zostanie umieszczony w Twoim dokumencie. Je[li skBada si� z wielu klatek, pojawi si� w postaci szarego prostokta, w centrum kt�rego umieszczona jest ikona Flash (patrz rysunek 18.4). un 8 Zaznacz obiekt programu Flash w swoim dokumencie i otw�rz inspektora Property, aby zmieni wBa ciwo ci sekwencji wideo Korzystajc z inspektora Property, zmieD wBa[ciwo[ci sekwencji wideo lub nadaj jej nazw� i zdefiniuj atrybut ID (patrz rysunek 18.4). Aby wy[wietli wszystkie ustawienia, kliknij przycisk ze strzaBk, umieszczony w dolnym prawym rogu okna inspektora. n u n n u h Inspektor Property umo|liwia zmian� najcz�[ciej stosowanych dla sekwencji wideo programu Flash ustawieD: Nazwa sekwencji wideo wpisz w tym polu nazw� sekwencji, do kt�rej b�dzie mo|na odwoBywa si� w skryptach. Pole nazwy nie ma w inspektorze Property swojej etykiety. Znajdziesz je obok ikony Flash, z lewej strony okna. Pami�taj, aby nie u|ywa w nazwach znak�w specjalnych oraz spacji. W i H te pola okre[laj w pikselach szeroko[ i wysoko[ pola sekwencji wideo. Mo|esz tak|e zdefiniowa wymiary w innych jednostkach: pc (pica), pt (punkty), in (cale), mm (milimetry), cm (centymetry) i % (procentowa warto[ mierzona wzgl�dem obiektu nadrz�dnego). Mi�dzy warto[ci a jednostk nie mo|na umieszcza spacji. Oto przykBad definicji: 30%. File to pole okre[la [cie|k� dost�pu do pliku programu Flash. Mo|esz klikn ikon� foldera, aby znalez plik. Align skorzystaj z tego pola, aby wskaza spos�b wyr�wnania sekwencji wideo na stronie i w oknie przegldarki. Bg tu definiowany jest kolor tBa dla sekwencji wideo. Skorzystaj z palety kolor�w Dreamweavera i wska| kolor bezpieczny, obsBugiwany w Internecie. ID w tym polu definiowany jest opcjonalny parametr ID kontrolki ActiveX. Jest on stosowany przede wszystkim do przekazywania informacji mi�dzy kontrolkami ActiveX. V Space i H Space okre[l w pikselach szeroko[ wolnego obszaru wok�B pola sekwencji wideo. Parameters ten przycisk otwiera okno dialogowe zawierajce dodatkowe ustawienia dla sekwencji wideo. Opis parametr�w programu Flash znajdziesz w punkcie Parametry sekwencji wideo programu Flash . Dodatkowe parametry pojawiaj si�, gdy sekwencja wideo pochodzi z programu Flash. Si�gnij do dokumentacji tego programu, aby znalez wi�cej informacji na temat stosowania parametr�w. Quality w tym polu umieszczana jest warto[ atrybutu QUALITY znacznik�w i , uruchamiajcych sekwencj� wideo. Warto[ ta okre[la stopieD wygBadzania stosowany w trakcie odtwarzania sekwencji. Kuszce jest przyj warto[ najwy|sz, lecz trzeba pami�ta, |e odtwarzanie film�w w wysokiej jako[ci wymaga szybszych procesor�w. W punkcie Parametry sekwencji wideo programu Flash znajdziesz wi�cej informacji na temat ustawieD jako[ci odtwarzania. Scale to pole wskazuje znacznikom i , kt�re uruchamiaj sekwencj� wideo, stopieD przeskalowania. Autoplay je[li zaznaczysz to pole wyboru, sekwencja zostanie odtworzona automatycznie, po zaBadowaniu strony. Loop zaznaczenie tego pola wyboru spowoduje powtarzanie sekwencji w nieskoDczonej p�tli. Reset Size ten przycisk pozwala przywr�ci domy[lne rozmiary zaznaczonej sekwencji. n 8 n n h n W tym wiczeniu b�dziesz korzystaB z plik�w z foldera storm, znajdujcego si� w fol- derze ch18 na dysku CD, doBczonym do ksi|ki. Do otwartego w programie Dream- weaver dokumentu storm.html wstawisz sekwencj� wideo Flash o nazwie lightning.swf i skonfigurujesz jej wBa[ciwo[ci, korzystajc z inspektora Property. Nast�pnie przypi- sujc poBczeniu behawior, dodasz do sekwencji mo|liwo[ jej kontroli. UkoDczona wersja tego wiczenia, o nazwie storm_done.html, tak|e znajduje si� w fol- derze ch18. Skorzystaj z niej, je[li wykonanie wiczenia sprawi Ci trudno[. Swoj wersj� finaln wiczenia zapisz pod nazw storm.html na dysku twardym. B�dzie nam potrzebna w wiczeniu 18.2. Otw�rz w programie Dreamweaver plik o nazwie storm.html z folderu ch18, znajdujcego si� na dysku CD, doBczonym do ksi|ki. Plik zawiera tabel� o dw�ch wierszach i jednej kolumnie. Ustawienia wyr�wnania kom�rki tabeli i wBa[ciwo[ci strony zostaBy ju| skonfigurowane. Aby wstawi sekwencj� wideo programu Flash, umie[ punkt wstawiania w g�rnym wierszu tabeli. Wybierz pozycj� Flash z menu podrz�dnego Media menu Insert (patrz rysunek 18.5). Skorzystaj z przycisku Browse i znajdz plik o nazwie lightning.swf (tak|e w folderze ch18, znajdujcym si� na dysku CD). Sekwencja pojawi si� w dokumencie jako szary prostokt z logo programu Flash w centrum. un 8 Wstawianie sekwencji wideo programu Flash Otw�rz inspektora Property (Ctrl+F3). Kliknij raz sekwencj� wideo, aby j zaznaczy. W inspektorze Property powinny pojawi si� jej wBa[ciwo[ci. Przetestuj sekwencj�, naciskajc przycisk Play (je[li sekwencja nie zacznie by odtwarzana, sprawdz stan pola Autoplay). Po przetestowaniu, kliknij przycisk Stop, kt�ry tak|e pojawia si� w inspektorze Property, gdy zaznaczonym obiektem jest sekwencja wideo programu Flash. Kolejny etap to wyBczenie opcji automatycznego odtwarzania (Autoplay) i powtarzania (Loop) sekwencji wideo (patrz rysunek 18.6). Je[li oba te pola wyboru b�d w oknie inspektora Property zaznaczone (a s zaznaczone domy[lnie), wyczy[ je. Je|eli tego nie zrobisz, sekwencja b�dzie odtwarzana w p�tli (a oznacza to nieskoDczon liczb� powt�rzeD). WyBczenie opcji Autoplay zapobiegnie automatycznemu odtworzeniu sekwencji wideo, po zaBadowaniu do okna przegldarki. Zaznacz pole sekwencji i kliknij ponownie przycisk Play. Tym razem wy[wietlona zostanie tylko jego pierwsza klatka. Jest to efekt wyBczenia opcji autoodtwarzania (Autoplay). Zanim przejdziesz do nast�pnego etapu, kliknij przycisk Stop. Zaznacz pole sekwencji i wpisz nazw� Lightning w polu nazwy inspektora Property, kt�re znajduje si� obok ikony Flash. Dzi�ki temu b�dziesz m�gB odwoBywa si� do sekwencji przy konfiguracji linii czasowej lub przypisywaniu behawiora (czym wkr�tce si� zajmiemy). Po wstawieniu sekwencji wideo, pora na zdefiniowanie poBczenia, kt�re pozwoli u|ytkownikowi wBcza odtwarzanie filmu. W tym celu umie[ punkt wstawiania w pustym wierszu tabeli, poni|ej kom�rki zawierajcej sekwencj� wideo. un 8 WyB czenie opcji automatycznego odtwarzania (Autoplay) i powtarzania (Loop) sekwencji wideo 8 Wpisz tekst poBczenia. Zaznacz tekst i umie[ w polu Link inspektora Property znak #. Tak zdefiniowane poBczenie jest poBczeniem pustym, kt�re umo|liwia przypisanie behawiora do tekstu. Naci[nij klawisz Enter, aby umie[ci definicj� poBczenia w kodzie. 0 Sprawdz, czy tekst jest nadal zaznaczony i wybierz z menu Window pozycj� Behaviors. Kliknij w oknie palety Behaviors przycisk ze znakiem plus (+), aby rozwin list� behawior�w. Wybierz pozycj� Control Shockwave or Flash, co spowoduje wy[wietlenie okna dialogowego, w kt�rym mo|esz wybra akcje (patrz rysunek 18.7). un 8 Okno dialogowe Control Shockwave or Flash W oknie dialogowym Control Shockwave or Flash rozwiD list� Movie i wybierz z niej sekwencj� wideo o nazwie Lightning. Kliknij nast�pnie przycisk opcji Play. W ten spos�b utworzony zostanie behawior odtwarzania filmu. PozostaBe opcje na razie Ci� nie b�d interesowa (lecz nie zapomnij o ich istnieniu, na wypadek, gdyby[ chciaB je wykorzysta we wBasnych projektach). Naci[nij OK, aby zamkn okno dialogowe. Zaznacz tekst ponownie i rzu okiem na palet� Behaviors. Pojawi si� w niej behawior zdefiniowany w punkcie 11. tego wiczenia. Zaznacz go i rozwiD list� procedur obsBugi zdarzenia, klikajc przycisk ze strzaBk, zlokalizowany po[rodku (rysunek 18.8). Wybierz procedur� onClick, aby film byB odtwarzany, gdy u|ytkownik kliknie tekst. Je[li Tw�j behawior jest ju| tak ustawiony, pomiD ten krok. un 8 8 Wybieranie procedury obsBugi zdarzenia w oknie palety Behaviors Zapisz plik i wy[wietl w oknie przegldarki, aby przetestowa sekwencj� wideo i behawior. W tym wiczeniu wykorzystana zostaBa funkcja jzyka JavaScript, kt�ra kontroluje sekwencje wideo programu Flash. Z tego wzgldu, przed pierwszym odtworzeniem filmu, przegldarka musi uruchomi skrypt. Mo|e to zaj kilka sekund, lecz jest konieczne, je[li chcesz przekaza u|ytkownikowi kontrol nad sekwencj, korzystajc z behawiora programu Dreamweaver. Parametry sekwencji wideo programu Flash Znaczniki , [ci[le powizane z elementem OBJECT, s w nim osadzone. Znaczniki te oraz ich atrybuty okre[laj pewne parametry pliku .swf i spos�b jego uruchamiania. Zazwyczaj w Dreamweaverze nie ma potrzeby definiowania parametr�w dla sekwencji wideo pro- gramu Flash z poziomu kodu zr�dBowego. Wszelkie ustawienia s konfigurowane przy wstawianiu sekwencji. Mo|e si jednak zdarzy, |e bdziesz musiaB zmieni ustawienia rcznie w kodzie HTML. Zmiana parametr�w mo|e by tak|e konieczna w fazie tworzenia plik�w .swt. Z tego wzgldu zdecydowali[my si umie[ci tu list parametr�w programu Flash: Parametr Opis ALIGN Warto[ci: L (do lewej), R (do prawej), T (do g�rnego marginesu), B (do dolnego marginesu). Nazwa zmiennej opisujcej szablon: $HA Parametr jest stosowany do pozycjonowania sekwencji wideo w oknie przegldarki. BASE Warto[: katalog podstawowy lub adres URL Ten parametr umo|liwia wskazanie katalogu podstawowego lub adresu URL w wyra|eniach definiujcych w sekwencji wideo wzgl�dne [cie|ki dost�pu. B�dzie on przydatny, je[li pliki Flash umieszczone s w innym katalogu ni| pozostaBe pliki. BGCOLOR Warto[: #RRGGBB (red, green, blue) Nazwa zmiennej opisujcej szablon: $BG Kolor tBa zdefiniowany w pliku .fla mo|na zmieni przy pomocy tego parametru. Wska| nowy kolor, podajc jego kod szesnastkowy. Parametr Opis CLASSID Warto[: Ten parametr musi mie dokBadnie tak posta. Jest to identyfikator dla kontrolki ActiveX przegldarki i nale|y go stosowa wyBcznie w znaczniku . CODEBASE Warto[: Warto[ tego parametru musi mie dokBadnie tak posta. Jest to ulokowanie kontrolki ActiveX moduBu Flash Player. Przegldarka automatycznie [cignie kontrolk�, je[li nie zostaBa ona jeszcze zainstalowana. Stosuj parametr tylko w znaczniku . HEIGHT Warto[: liczba w pikselach (np. 200) lub w procentach okna przegldarki (np. 40%). Nazwa zmiennej opisujcej szablon: $HE Ten parametr okre[la w pikselach lub procentach okna przegldarki wysoko[ pola sekwencji wideo. Poniewa| sekwencje wideo programu Flash s skalowalne (grafika wektorowa), zmiana wielko[ci pola nie wpBywa na jako[ obrazu, pod warunkiem zachowania proporcji wysoko[ci do szeroko[ci r�wnej 4:3. Oto kilka zalecanych rozmiar�w (w pikselach): 640 480, 320 240 i 240 180. LOOP Warto[: true lub false Nazwa zmiennej opisujcej szablon: $LO Parametr powoduje automatyczne powtarzanie sekwencji lub tylko jednorazowe jej odtworzenie. Je[li ominiemy ten parametr, przyjmowana jest domy[lna warto[ true. MENU Warto[: true lub false Nazwa zmiennej opisujcej szablon: $ME Parametr umo|liwia wyBczenie menu sterujcego programu Flash, kt�re pojawia si�, gdy klikniesz sekwencj� wideo w przegldarce prawym klawiszem myszki (lub lewym klawiszem, przy wci[ni�tym klawiszu Ctrl). Menu sterujce programu Flash zostanie zastpione opcj About Flash. Domy[lnie ma warto[ true. MOVIE Warto[: moviename.swf Nazwa zmiennej opisujcej szablon: $MO Parametr jest stosowany tylko ze znacznikiem . Okre[la nazw� i adres odtwarzanego pliku. PLAY Warto[: true lub false Nazwa zmiennej opisujcej szablon: $PL Przypisz parametrowi PLAY warto[ false, aby zapobiec automatycznemu odtwarzaniu sekwencji wideo, po zaBadowaniu jej do okna przegldarki. Przypisz warto[ true, je[li chcesz, aby sekwencja byBa odtwarzana automatycznie. Domy[ln warto[ci jest true. PLUGINSPAGE Warto[: Parametr jest stosowany tylko ze znacznikiem . Jest stosowany w celu okre[lenia ulokowania moduBu dodatkowego Flash Player, aby mo|na byBo go [cign, je[li nie jest jeszcze zainstalowany. Parametr Opis QUALITY Warto[ci: low, high, autolow, autohigh lub best. Nazwa zmiennej opisujcej szablon: $QU Parametr okre[la stopieD wygBadzania (ang. antialiasing) stosowany do sekwencji wideo w czasie jej odtwarzania w oknie przegldarki. Sekwencje, do kt�rych stosowane jest wygBadzanie, lepiej si� prezentuj na ekranie, poniewa| s bardziej eleganckie. Niestety znacznie bardziej obci|aj Bcza. Wyb�r warto[ci tego parametru to wyb�r mi�dzy szybko[ci dziaBania a jako[ci odtwarzania. low ta warto[ daje pierwszeDstwo szybko[ci przed jako[ci. Nie jest wtedy stosowane wygBadzanie. autolow powoduje zaBadowanie sekwencji do okna przegldarki bez wygBadzania. WygBadzanie zostanie wBczone tylko wtedy, je[li przepustowo[ Bcza jest na tyle wysoka, |e odtwarzanie odbywa si� z wyspecyfikowan szybko[ci, okre[lon przez warto[ wsp�Bczynnika Fps. high w tym przypadku wygBadzanie jest stosowane, lecz z wyBczeniem obraz�w animowanych. Jest to domy[lna warto[ parametru QUALITY. autohigh powoduje, |e odtwarzanie rozpoczyna si� z wBczon opcj wygBadzania. Je[li jednak przepustowo[ Bcza jest zbyt maBa, aby sekwencja byBa odtwarzana z szybko[ci wyspecyfikowan przez warto[ wsp�Bczynnika Fps, wygBadzanie jest wyBczane. best w tym przypadku jako[ odtwarzania bezwzgl�dnie bierze g�r� nad szybko[ci odtwarzania. WygBadzanie jest stosowane do wszystkich element�w, bez wzgl�du na przepustowo[ Bcza. SRC Warto[: nazwa_sekwencji.swf Nazwa zmiennej opisujcej szablon: $MO Parametr okre[la nazw� i adres odtwarzanego pliku. Stosowany jest tylko w znaczniku . SWLIVECONNECT Ten parametr informuje przegldark� o konieczno[ci zaBadowania Javy przy pierwszym uruchamianiu sekwencji wideo programu Flash. Domy[lnie ma on warto[ false. Uruchomienie Javy zabiera czas, wi�c stosuj warto[ true tylko je[li jest to naprawd� konieczne. Konieczno[ taka pojawia si� na przykBad w�wczas, gdy na jednej stronie u|yto JavaScript i Flash w�wczas Java jest niezb�dna, aby zadziaBaBa akcja FSCommand. Je[li jednak korzystasz z funkcji JavaScript, w kt�rych nie odwoBujesz si� do akcji FSCommand (na przykBad przeprowadzasz detekcj� typu przegldarki), przypisz mu warto[ false, zapobiegajc Badowaniu Javy i spowolnieniu czasu Badowania. SALIGN Warto[ci: L, R, T, B, TL, TR, BL, BR. Nazwa zmiennej opisujcej szablon: $SA Parametr okre[la ulokowanie w oknie przegldarki pola sekwencji wideo, do kt�rej zastosowano skalowanie. Je[li do sekwencji nie zastosowano skalowania (a wi�c nie u|yto parametru SCALE), ulokowanie pola sekwencji wideo mo|na zdefiniowa za pomoc parametru ALIGN. Parametr Opis SALIGN L, R, T i B wyr�wnuj pole do lewej, prawej, g�rnej bdz dolnej kraw�dzi okna przegldarki. Z pozostaBych trzech stron pole zostanie w razie konieczno[ci przyci�te. TL i TR wyr�wnuj pole do lewej g�rnej lub prawej g�rnej kraw�dzi okna przegldarki. W razie konieczno[ci pole zostanie przyci�te od lewej dolnej lub prawej dolnej kraw�dzi. BL i BR wyr�wnuj pole do lewej dolnej lub prawej dolnej kraw�dzi okna przegldarki. W razie konieczno[ci pole zostanie przyci�te od g�ry i z bok�w. Domy[lnie, przeskalowane filmy s wy[rodkowywane w oknie przegldarki. Je[li miejsca jest za maBo lub za du|o, pole zostanie przyci�te, ewentualnie pojawi si� obramowanie. SCALE Warto[: showall, noborder, exactfit Nazwa zmiennej opisujcej szablon: $SC Ten opcjonalny parametr definiuje ulokowanie pola sekwencji wideo w oknie przegldarki, gdy warto[ci parametr�w WIDTH i HEIGHT zostaBy zdefiniowane w procentach rozmiar�w okna przegldarki. showall to warto[ domy[lna. Sekwencja wideo jest w�wczas widoczna w wyspecyfikowanym obszarze bez znieksztaBceD. Zachowane zostaj oryginalne proporcje. Przy dw�ch kraw�dziach mog pojawi si� obramowania. noborder powoduje takie przeskalowanie sekwencji wideo, aby jej pole wypeBniaBo wyspecyfikowany obszar. ZnieksztaBcenia nie wyst�puj, lecz mo|liwe jest przyci�cie pola. Proporcje rozmiar�w zostaj zachowane. exactfit w tym przypadku film jest wy[wietlany bez zachowania relacji proporcji. Nale|y si� liczy z mo|liwo[ci znieksztaBceD. WIDTH Warto[: liczba w pikselach (np. 240px) lub procentach okna przegldarki (np. 300%) Nazwa zmiennej opisujcej szablon: $WI Ten parametr okre[la szeroko[ pola sekwencji wideo. Je[li jego warto[ b�dzie inna ni| zdefiniowana w pliku Flash, mog pojawi si� znieksztaBcenia. WMODE Warto[: Window, Opaque, Transparent Nazwa zmiennej opisujcej szablon: $WM Ten parametr pozwala skonfigurowa tBo sekwencji wideo jako przezroczyste. Pozwala tak|e skorzysta z pozycjonowania bezwzgl�dnego oraz mo|liwo[ci udost�pnianych przez warstwy i dost�pnych w przegldarkach Internet Explorer w wersjach 4.0 i wy|szych. Pami�taj, |e jest on obsBugiwany tylko w [rodowisku Windows z zainstalowan kontrolk Flash ActiveX. Window sekwencja wideo jest prezentowana na stronie WWW w samodzielnym prostoktnym oknie. Opaque powoduje ukrycie wszystkiego, co znajduje si� pod oknem prezentujcym sekwencj� filmow. Transparent umo|liwia odsBoni�cie tBa strony HTML. Opcja ta mo|e znacznie spowolni odtwarzanie. Warto[ci domy[ln jest Window. Je[li chcesz nada nagB�wkom wygld porywajcy i odbiegajcy od standard�w stoso- wanych powszechnie na stronach WWW, mo|esz skorzysta z nowej w programie Dre- amweaver 4 opcji, pozwalajcej wstawia tekst programu Flash. Aby wstawi taki tekst, wybierz pozycj� Flash Text z menu podrz�dnego Interactive Images menu Insert. Mo|esz tak|e skorzysta z ikony Insert Flash Text na palecie obiekt�w. Zanim zabierzesz si� do tego, nale|y Ci si� jedno wyja[nienie. Przy ka|dym wyj[ciu z okna Insert Flash Text, b�dzie tworzony plik .swf. Plik ten jest sekwencj filmow programu Flash o jednej klatce. W jednym pliku .swf mo|na umie[ci do 1 024 znak�w. Z tego wzgl�du tekst programu Flash bardziej nadaje si� do tworzenia nagB�wk�w, ni| do tekstu podstawowego. Niewtpliwie spodoba Ci si� to, |e b�dziesz miaB peBny dost�p do czcionek na dysku twardym komputera. Utworzony tekst zostanie przekonwertowany do postaci wektoro- wej, nie musisz si� wi�c obawia umieszczania informacji o czcionkach na serwerze. Dodatkowa zaleta tekstu programu Flash to jego skalowalno[ i mo|liwo[ edycji w programie Dreamweaver. n 8 n u u h W tym wiczeniu przygotujesz banner, na kt�rym umie[cisz tekst programu Flash. Nast�p- nie zdefiniujesz poBczenie, kt�re poBczy tekst z plikiem utworzonym w wiczeniu 18.1. Oprzyj si� na pliku o nazwie banner.html, kt�ry znajdziesz w folderze ch18, znajduj- cym si� na dysku CD, doBczonym do ksi|ki. Musisz zapisa ten plik na swoim dysku twardym (najlepiej zapisz caBy folder). Je[li tego nie zrobisz, w fazie tworzenia tekstu mog pojawi si� problemy. Efekt koDcowy pokazany jest w pliku banner_done.html. OdwoBaj si� do tego pliku, je[li wykonanie wiczenia sprawi Ci kBopot. Otw�rz plik banner.html. Zawiera on tabel� o dw�ch wierszach. W tym wiczeniu zajmiemy si� tylko g�rnym wierszem. Na razie wi�c zignoruj wiersz dolny wr�cimy do niego w wiczeniu 18.3. Umie[ punkt wstawiania w g�rnym wierszu tabeli. Wybierz pozycj� Flash Text z menu podrz�dnego Interactive Images menu Insert. Wy[wietlone zostanie okno dialogowe Insert Flash Text (patrz rysunek 18.9). Wpisz w polu tekstowym Text tre[ komunikatu. Z listy Font wybierz kr�j czcionki, a w polu Size wpisz jej rozmiar. Dobierz tak kombinacj�, aby tekst wypeBniB caB szeroko[ ekranu. W przykBadzie zastosowano czcionk� Arial o rozmiarze 40. Wy[wietl palet� kolor�w tekstu, klikajc przycisk obok pola Color. Wybierz z palety kolor biaBy (#FFFFFF). Wybierz teraz kolor, kt�ry zastosujesz do tekstu, gdy wskaznik myszki zostanie umieszczony nad tekstem rozwiD palet� Rollover Color i wybierz kolor |�Bty. un 8 W oknie lnsert Flash Text pobierz pr�bnikiem kolor tBa Zdefiniuj teraz kolor tBa, na jakim tekst zostanie wy[wietlony. Je[li pominiesz ten etap, pozostanie kolor domy[lny biaBy, co sprawi, |e tekst nie b�dzie widoczny. Kliknij przycisk obok pola Bg Color i pobierz pr�bnikiem kolor tBa dokumentu programu Dreamweaver (patrz rysunek 18.9). Gdy na pasku palety kolor�w pojawi si� szesnastkowy kod koloru #333333, kliknij myszk, aby przypisa kolor. Naci[nij przycisk Browse, obok pola tekstowego Link, i wybierz plik o nazwie storm.html, nad kt�rym pracowaBe[ w wiczeniu 18.1. Nast�pnie rozwiD menu Target i wybierz z niego pozycj� _self. Okre[la ona miejsce wy[wietlenia pliku. Zwr� uwag� na zawarto[ pola Save As. Przy zamkni�ciu okna dialogowego Insert Flash Text na dysku twardym komputera zostanie zapisany plik .swf (Shockwave Flash). Przycisk Browse umo|liwia wskazanie miejsca zapisania pliku. Mo|esz tak|e zastpi domy[ln nazw� wBasn. 8 Naci[nij przycisk Apply, aby zobaczy wygld tekstu w dokumencie, bez zamykania okna dialogowego. Wprowadz dodatkowe zmiany i zatwierdz je, naciskajc OK. Tw�j tekst programu Flash pojawi si� w dokumencie jako obiekt. Zwr� uwag�, |e po zaznaczeniu obiektu pojedynczym klikni�ciem, inspektor Property (Ctrl+F3) prezentuje wBa[ciwo[ci tekstu. Nie pr�buj zmienia szeroko[ci i wysoko[ci tekstu programu Flash z poziomu inspektora Property (mogBoby to spowodowa pogorszenie jako[ci obrazu). Je[li konieczna oka|e si� edycja tekstu, kliknij przycisk Edit, aby powr�ci do okna dialogowego Insert Flash Text (je[li jednak zmienisz rozmiary tekstu w inspektorze Property, skorzystaj z przycisku Reset Size, aby od[wie|y obraz). Rysunek 18.10 prezentuje ustawienia inspektora Property dla tekstu programu Flash. un 8 0 Testowanie tekstu programu Flash za pomoc opcji inspektora Property 0 Sprawdz, czy tekst programu Flash jest nadal zaznaczony i kliknij w inspektorze Property przycisk Play. Uaktywni to funkcj� zmiany koloru tekstu przy przesuwaniu nad nim wskaznika myszki. PrzesuD wskaznik myszki nad tekstem i zobacz, jak funkcja dziaBa (patrz rysunek 18.10). Naci[nij przycisk Stop. Nast�pnie zapisz plik i wy[wietl w oknie przegldarki. Tekst powinien stanowi poBczenie do pliku storm.html. Tak|e nowo[ci w programie Dreamweaver 4 s przyciski programu Flash. Mo|na je wstawia do dokumentu, wybierajc pozycj� Flash Button w menu podrz�dnym Inte- ractive Images menu Insert lub klikajc ikon� Insert Flash Button na palecie obiekt�w (patrz rysunek 18.11). Dreamweaver udost�pnia zestaw przycisk�w w oknie dialogowym Insert Flash Button. Pliki te s ulokowane w folderach Dreamweaver\Configuration\Flash Objects\Flash But- tons i Flash Text. Wszystkie nowe przyciski, a wi�c te, kt�re przygotujesz w programie Flash i wyeksportujesz jako pliki .swf tak|e powinny by umieszczane w tym samym miejscu. Edycja tekstu programu Flash Utworzony tekst programu Flash mo|na modyfikowa, zaznaczajc obiekt tekstowy w dokumen- cie i klikajc przycisk Edit w inspektorze Property. Mo|e si zdarzy, |e po wprowadzeniu zmian zauwa|ysz utrat jako[ci obrazu. Tekst mo|e si na przykBad wydawa nacignity lub za bardzo stBoczony. W takim przypadku otw�rz inspektora Property (Ctrl+F3) i kliknij przycisk Play, aby od[wie|y rozmiar tekstu. ZnieksztaBcenie zn�w si pojawi, gdy naci[niesz przycisk Stop, lecz je[li zapiszesz plik i ponownie go otworzysz, tekst b- dzie si ju| prezentowaB bez zarzutu. un 8 lkona lnsert Flash Button na palecie obiekt�w Je[li na temat tworzenia szablon�w przycisk�w Flash chcesz si� dowiedzie nieco wi�- cej, przejrzyj elektroniczny podr�cznik dost�pny w witrynie macromedia.com. Znaj- dziesz go w sekcjach Dreamweaver Support lub Flash Support pod hasBem Using Button Templates with Dreamweaver . Podobnie jak tekst programu Flash, przyciski s tak|e plikami .swf, kt�re zostaBy zapi- sane na dysku twardym komputera. Ka|demu przyciskowi odpowiada osobny plik. Przy publikacji witryny nie zapomnij o umieszczeniu plik�w .swf na serwerze wraz z doku- mentem HTML. Podstawowa przewaga przycisk�w programu Flash nad przyciskami .JPG i .GIF wi|e si� z mo|liwo[ci ich animowania i skalowania. Dodatkowy atut, to bardzo niewielkie rozmiary plik�w. n 8 n u h u n W tym wiczeniu, w dokumencie, nad kt�rym pracowaBe[ w wiczeniu 18.2, utworzysz kilka przycisk�w programu Flash. Przyciski b�d stanowiBy poBczenia prowadzce do nast�pujcych plik�w z foldera ch18: rain.swf, bolt.swf, thunder.swf i wind.swf. Wszystkie te pliki .swf zawieraj sekwencje dzwi�kowe, a poniewa| nie s osadzone w pliku HTML, wybranie odpowiadajcego im poBczenia spowoduje otwarcie pustego okna przegl- darki. Je[li chcesz, mo|esz rozbudowa to wiczenie o etap osadzenia dzwi�kowych plik�w .swf w dokumencie HTML. Otw�rz w oknie programu Dreamweaver dokument banner.html, kt�ry przygotowaBe[ w wiczeniu 18.2. Plik ten znajduje si� w folderze ch18. Przyciski programu Flash zostan wstawione do tabeli zagnie|d|onej w dolnym wierszu tabeli, a wi�c pod bannerem. Zacznij od umieszczenia punktu wstawiania przy lewej kraw�dzi kom�rki. Aby wy[wietli okno dialogowe Insert Flash Button, wybierz pozycj� Flash Button z menu podrz�dnego Interactive Images menu Insert (patrz rysunek 18.12). Wybierz z listy przewijanej Style styl przycisku (w przykBadzie wybrano Soft- Raspberry) i wpisz w polu Button Text tekst, kt�ry ma si� pojawi na przycisku. Wska| na li[cie Font stosowany kr�j czcionki, a w polu Size wpisz jej rozmiar (w przykBadzie jest to Verdana o rozmiarze 12). W polu Link podaj ulokowanie pliku (w tym przypadku pliku rain.swf z folderu ch18). un 8 Okno dialogowe lnsert Flash Button W polu Bg Color podaj kod koloru tBa tu chcemy, aby kolor tBa byB identyczny z kolorem tBa strony (#333333). Kliknij przycisk Bg Color i pobierz pr�bnikiem pr�bk� koloru tBa dokumentu. Dreamweaver automatycznie przypisze nazw� Twojemu przyciskowi. Pojawi si� ona w polu Save As i b�dzie miaBa rozszerzenie .swf. Je[li chcesz zmieni t� nazw�, mo|esz to zrobi, dop�ki rozszerzenie pisane jest maBymi literami. Pami�taj tak|e, |e plik zawierajcy przycisk musi by zapisany w tym samym katalogu, co plik .swf, do kt�rego prowadzi poBczenie. Naci[nij przycisk Apply, aby zobaczy, jak przycisk prezentuje si� w dokumencie. Je[li zadawala Ci� jego wygld, kliknij OK, aby opu[ci okno dialogowe Insert Flash Button. Powt�rz kroki 2 5 dla pozostaBych trzech przycisk�w: Lightning, Thunder i Wind, umieszczajc ka|dy z nich w osobnej kom�rce tabeli. Pierwszy przycisk poBcz z plikiem bolt.swf, drugi z plikiem thunder.swf, a trzeci z plikiem wind.swf. Rysunek 18.13 pokazuje efekt koDcowy. Przyciski pojawi si� w dokumencie jako odr�bne obiekty w przypisanych im kom�rkach tabeli. W inspektorze Property (otw�rz go, korzystajc ze skr�tu Ctrl+F3) mo|esz klikn przycisk Play, aby uaktywni ich funkcj�. Aby usBysze dzwi�ki, z kt�rymi przyciski s stowarzyszone, zapisz plik w folderze ch18, kt�ry przeniosBe[ na sw�j dysk twardy i otw�rz w przegldarce. 8 Plik buttons_done.html z foldera storm, znajdujcego si� na dysku CD, doBczonym do ksi|ki zawiera ukoDczon wersj� tego wiczenia. Skorzystaj z niego, je[li wykonanie wiczenia sprawi Ci trudno[. un 8 Cztery przyciski programu Flash umieszczone w dokumencie Flash czy Dr Frankenstein? To nie jest prawdziwe, to tylko wygenerowana komputerowo fantazja. ostrzega ostrzy|ony na Irokeza punk, kt�ry przedstawia rozwizanie Virtual Host go[ciom witryny oddcast.com (zo- bacz rysunek 18.14). un 8 Odwied witryn www.oddcast.com spotkasz tu wirtualnego gospodarza (program Virtual Host) lub b dziesz m�gB pobawi si narz dziem wizualizacji muzyki Beat Sensor Komputerowy terapeuta to chyba lepsze okre[lenie dla systemu Virtual Host, zaprojektowanego i wykonanego w oddcast.com, firmie z Nowego Jorku, zajmujcej si projektowaniem stron WWW. Interfejs programu skBada si z animowanego ludzkiego tuBowia umieszczonego w cen- trum bajecznie kolorowego panelu. PBe, kolor oczu, wBos�w, ubranie, bi|uteri, fryzur i okulary mo|na samemu wybra z zestawu propozycji, co daje niesko czon liczb kombinacji. W swoim poprzednim wcieleniu Wirtualny Gospodarz byB kobiet o imieniu K. Mn�stwo ludzi pi- saBo listy miBosne. Niekt�rzy fani wpadli w maB obsesj, co jak mniemam, oznacza, |e iluzja za- dziaBaBa, lecz na szcz[cie nie byBo to straszne. m�wi Chris Dixon, jeden z tw�rc�w programu. Dixon pracuje nad tym projektem od samego pocztku. ZaczBo si od eksperymentu, jaki przeprowadzili[my, aby sprawdzi, czy mo|emy na pocztek wzi prosty obraz twarzy i animo- wa go tak, by wygldaB jakby posta m�wiBa i ruszaBa si. m�wi Dixon. Potem cigle doda- wali[my r�|ne rzeczy. Na koniec wprowadzili[my porzdn synchronizacj ust i umo|liwili[my u|ytkownikom dostosowywanie ich. Lecz zaczBo si naprawd, gdy jeden z naszych wspaniaBych projektant�w, James Salanitri, zmieniB nieco wygld postaci i dodaB par dodatkowych elemen- t�w, dziki kt�rym staBa si ona zabawna. Dixon korzysta z programu Flash od wersji 2. i jest optymist, je[li chodzi o mo|liwo[ prze- ksztaBcenia Internetu w animowane, interaktywne [rodowisko. My[l, |e wszechobecno[ mo- duBu dodatkowego oraz wiksza stabilno[ i szersze mo|liwo[ci przyszBych wersji programu, s szans na przycignicie do Flasha powa|nych programist�w i uczynienie z niego standardu dla wszelkiego oprogramowania opartego o przegldarki sieciowe. m�wi Dixon. Na przykBad dziki wyposa|eniu programu Flash 5 w obsBug nowatorskiego, bezpo[redniego poBczenia XML, ludzie otrzymali mo|liwo[ tworzenia eksperymentalnych, dziaBajcych w czasie rzeczywi- stym gier sieciowych. Mo|na sobie nawet wyobrazi szerokie wykorzystanie programu do zada caBkiem powa|nych , takich jak graficzna prezentacja notowa gieBdowych na bie|co. . W oddcast.com Dixon i jego wsp�Bpracownicy korzystaj z Flasha, aby tworzy przycigajce uwag i nagradzane witryny, kt�re, jak twierdzi Dixon, prezentuj si wspaniale, maj rozbudo- wane mo|liwo[ci i nadal dobrze dziaBaj z modemami 56 K. Proponujemy u|ytkownikom pro- gram, kt�ry pozwala tworzy teledyski i inny program, kt�ry daje mo|liwo[ interakcji z moduBem wizualizujcym pliki dzwikowe w formacie MP3. . Obecnie w firmie trwaj prace nad sieciow gr Karaoke. Tym, kt�rzy chc si nauczy korzystania z programu Flash, Dixon daje tak oto rad: My[l, |e Flash to masa zabawy i wymaga odpowiednio lekkiego podej[cia. Je[li tylko przywykniesz do wektorowego stylu i jzyka programowania, przekonasz si, |e jest to wspaniaBe narzdzie eks- perymentowania i pracy. RadziBbym zdoby dobr ksi|k, lecz przede wszystkim studiowa efekty pracy innych ludzi a wic pliki zr�dBowe .fla, kt�rych mn�stwo znajdziesz w witrynach takich jak www.flashkit.com. . W tym rozdziale skupili[my si� na integracji program�w Flash i Dreamweaver w celu o|ywienia Twojej witryny i przyspieszenia jej dziaBania. Flash staje si� coraz bardziej popularny gB�wnie dlatego, |e umo|liwia przeskalowywanie grafiki wektorowej tak, by zajmowaBa caBe okno przegldarki, niezale|nie od jego rozmiar�w. Rozmiary plik�w grafiki wektorowej s przy tym bardzo niewielkie, dzi�ki czemu czasy Badowania s kr�tkie. Sekwencje wideo programu Flash mog tak|e zawiera obrazy rastrowe, co z kolei wydBu|a czas odtwarzania. W programie Dreamweaver mo|na wstawia sekwencje wideo programu Flash i konfi- gurowa ich wBa[ciwo[ci, korzystajc z inspektora Property. Mo|na tak|e przypisa se- kwencji behawior, kt�ry pozwoli u|ytkownikom kontrolowa odtwarzanie. W[r�d in- nych funkcji programu Flash, dost�pnych w programie Dreamweaver, nale|y wymieni mo|liwo[ tworzenia i edycji tekstu oraz przycisk�w programu Flash. Chocia| Dream- weaver udost�pnia szereg przycisk�w programu Flash, mo|esz tak|e tworzy wBasne, zapisywa je jako pliki .swt, a nast�pnie importowa do programu Dreamweaver.

Wyszukiwarka

Podobne podstrony:
C Vademecum profesjonalisty ksiazka Podziękowania, O autorach
Flash MX Vademecum profesjonalisty flmxvp
PHP Zaawansowane programowanie Vademecum profesjonalisty
Java Uslugi WWW Vademecum profesjonalisty jtswww
C Programowanie zorientowane obiektowo Vademecum profesjonalisty
C Vademecum profesjonalisty ksiazka Skrócony spis treści
Jezyk C Wskazniki Vademecum profesjonalisty cwskvp
Firewalle i bezpieczeństwo w sieci Vademecum profesjonalisty
ASPNET Vademecum profesjonalisty
PHP i MySQL Tworzenie stron WWW Vademecum profesjonalisty Wydanie czwarte phmsv4
C Vademecum profesjonalisty ksiazka Dodatek A Zawartość płytki CD ROM

więcej podobnych podstron