IDZ DO

PRZYKADOWY ROZDZIA
SPIS TRECI

KATALOG KSIEK
KATALOG ONLINE
ZAMW DRUKOWANY KATALOG

TWJ KOSZYK
DODAJ DO KOSZYKA

CENNIK I INFORMACJE
ZAMW INFORMACJE
O NOWOCIACH
ZAMW CENNIK

CZYTELNIA
FRAGMENTY KSIEK ONLINE

Dreamweaver 4.

Vademecum profesjonalisty
Autorzy: Anne-Marie Yerks, John Pickett
Tumaczenie: Maria Sok
ISBN: 83-7197-542-2
Tytu oryginau: Inside Dremweaver 4
Format: B6, stron: 662
oprawa twarda
Zawiera CD-ROM

Sigajc po t ksik, zyskasz nie tylko dwadziecia cztery rozdziay jej zawartoci.
Skorzystasz take z okazji, aby ulepszy swoj stron WWW i podwyszy poziom
wasnych umiejtnoci jako projektanta stron WWW, poprzez prac z programem
Dreamweaver 4. Jeli zastanawiasz si, dlaczego akurat ta wiedza jest Ci potrzebna,
spjrz na inne strony WWW, ktre teraz pojawiaj si w Internecie. Zauwaysz bez
trudu, e dominuje tendencja do interaktywnego wspdziaania z uytkownikiem,
czsto za porednictwem animacji Flash, DHTML-a i JavaScriptu. Stwierdzisz take,
e mnstwo naprawd uytecznych informacji dostpnych w Internecie pochodzi
z baz danych, a prezentuje si je dziki skryptom Cold Fusion i technologii Active
Server Pages.
aden z tych trendw nie jest nowy. Internet od samego pocztku ewoluuje w kierunku
rodowiska konfigurowanego przez uytkownika. Jeli nawet pojawiaj si nowe
pomysy, to i tak wyrastaj one ze starych korzeni. Teraz, bardziej ni kiedykolwiek,
narzdzia programowania niezbdne do stworzenia kompletnej strony WWW,
s dostpne dla wszystkich, a nie tylko dla programistw. Co wicej, narzdzia
projektowe, dziki ktrym moliwe jest przygotowanie naprawd wspaniaej strony
WWW, take staj si powszechnie osigalne.
Chocia nic nie zastpi wiedzy i talentu, umiejtno pracy z programem pozwala
usun niektre przeszkody i uatwia ycie projektantom i programistom.
Dziki programowi Dreamweaver 4 i tej ksice mona atwiej sprosta wyzwaniom,
stawianym przez programowanie i projektowanie. Godziny prb, bdw i frustracji
zamieniaj si w czas przyjemnie spdzony nad przeksztacaniem wasnej strony WWW
w pokazowy przykad formy i funkcjonalnoci.

Wydawnictwo Helion
ul. Chopina 6
44-100 Gliwice
tel. (32)230-98-63
e-mail: helion@helion.pl

Instruktorzy znajd w naszej ksice wszystko, co niezbdne, aby nauczy studentw

tworzenia i rozbudowywania stron WWW. wiczenia, pytania testowe i podsumowania
skadaj si na solidny program nauczania. Ksika jest take idealna dla tych
uytkownikw programu Dreamweaver, ktrzy samodzielnie chcieliby nauczy si
obsugi programu w domu lub w pracy. Potraktuj t ksik jako rdo inspiracji
i narzdzie pomocne w nauce programu Dreamweaver 4 oraz jako poradnik korzystania
z jego moliwoci. Kady z rozdziaw dostarczy Ci wiedzy, niezbdnej do wykonania
okrelonych zada. wiczenia lub ich zestawy, doczone do poszczeglnych rozdziaw,
zilustruj zastosowania funkcji programu Dreamweaver, a podstawowe informacje,
pytania testowe i podpowiedzi przyspiesz realizacj tyche wicze.



 
 




 


  
  



  !"
Pywajce palety ....................................................................................................................23
Kod rdowy ........................................................................................................................24
Zintegrowany edytor tekstu .............................................................................................24
Widok kodu i projektu.....................................................................................................24
JavaScript Debugger........................................................................................................24
Dodatkowe informacje na temat kodu.............................................................................25
Skrty klawiszowe z moliwoci dostosowania............................................................25
Nawigacja w kodzie.........................................................................................................25
Zmiana kolorystyki skadni na bieco ...........................................................................26
Edycja dokumentw w formacie innym ni HTML........................................................26
Pasek narzdzi programu Dreamweaver .........................................................................26
Projekt ....................................................................................................................................27
Widok ukadu strony .......................................................................................................27
Tekst i przyciski programu Macromedia Flash ...............................................................27
Edycja grafiki za pomoc aplikacji Roundtrip ................................................................27
Interfejs uytkownika 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 obsuga poczty e-mail.................................................................................30
Extension Manager ..........................................................................................................31
Macromedia Exchange ....................................................................................................31
Zarzdzanie oknami ...............................................................................................................32
Podsumowanie .......................................................................................................................32

!

##
$  ""
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 jzyka 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 edytorw zewntrznych ..................................................................................76
Co to jest Roundtrip HTML?...........................................................................................76
Homesite, BBEdit, TextPad i Notepad............................................................................76
Podsumowanie .......................................................................................................................77



  !"#  $%

 

) * +
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 wyrwnanie tekstu..................................................................90
Kolor tekstu .....................................................................................................................95
Prostszy sposb formatowania tekstu ....................................................................................96
Style HTML.....................................................................................................................96
Korzystanie z palety HTML Styles .................................................................................97
Znaki specjalne ....................................................................................................................100
Podsumowanie .....................................................................................................................102

 

),  - .
Rodzaje cieek dostpu ......................................................................................................105
Co to jest cieka dostpu?............................................................................................106
Zrozumienie cieek dostpu.........................................................................................106
cieki dostpu definiowane wzgldem dokumentu.....................................................107
cieki wzgldne definiowane wzgldem foldera nadrzdnego ...................................107
Definiowanie pocze.........................................................................................................108
Usuwanie pocze ........................................................................................................111
Definiowanie pocze prowadzcych na zewntrz witryny ........................................112
Kolory pocze i podkrelenia ...........................................................................................112
Wybr schematw kolorystycznych..............................................................................113
Wyczanie opcji podkrelania pocze.......................................................................113

 

Poczenia e-mail .................................................................................................................114

Definiowanie pocze e-mail z poziomu inspektora Property.....................................115
Zakotwiczenia o zdefiniowanych nazwach .........................................................................116
Definiowanie zakotwicze przy pomocy Point-to-File .................................................117
Definiowanie mapy odnonikw .........................................................................................118
Usuwanie obszarw aktywnych ....................................................................................120
Paski nawigacji ....................................................................................................................120
Interaktywne paski nawigacji cig dalszy ................................................................122
Menu rozwijane ...................................................................................................................122
Edycja menu rozwijanego .............................................................................................124
Podsumowanie .....................................................................................................................124

/

) $  !
Formaty plikw graficznych ................................................................................................126
Format GIF ....................................................................................................................126
Format JPEG..................................................................................................................128
Format PNG...................................................................................................................128
Projektowanie z wykorzystaniem obrazw .........................................................................130
Obraz jako poczenie ...................................................................................................133
Obramowanie obrazu.....................................................................................................135
Przypisywanie obrazowi behawioru..............................................................................135
Edycja obrazw....................................................................................................................138
Opcja Roundtrip Graphics Editing i Fireworks.............................................................138
Zmiana rozmiarw obrazu.............................................................................................138
Paleta Assets i obrazy ..........................................................................................................140
Miniatury obrazw...............................................................................................................143
Internetowy album fotograficzny ..................................................................................144
Podpowiedzi dotyczce umieszczania obrazw na serwerze ..............................................146
Podsumowanie .....................................................................................................................147



0,-*   1
Posugiwanie si kolorami ...................................................................................................150
Definiowanie kolorw ...................................................................................................150
Wasne kolory................................................................................................................156
Paleta Assets i kolory ....................................................................................................157
Lista Favorite palety Assets...........................................................................................158
Projekt i ukad strony ...........................................................................................................159
Wzory ta .......................................................................................................................160
Linie siatki .....................................................................................................................160
Kalki ..............................................................................................................................162
Marginesy strony i ich szeroko ..................................................................................164
Linijki ............................................................................................................................164
Projektowanie internetowe: duy obraz...............................................................................165
Rozdzielczo ekranu ....................................................................................................165
Strategia projektowa ......................................................................................................166
Przepustowo czy a rozmiar plikw .........................................................................168
Podsumowanie .....................................................................................................................172

 &   '

    $(
+

2*# ,$3 
Wstawianie tabel..................................................................................................................178
Piksele czy procenty? ....................................................................................................179
Wprowadzanie danych do tabeli..........................................................................................180


   

Wyrwnywanie tabel i definiowanie obramowa ...............................................................181

Obramowanie tabeli.......................................................................................................182
Formatowanie tabel..............................................................................................................184
Rozpinanie komrek tabeli............................................................................................184
Podzia i scalanie komrek ............................................................................................186
Tabele zagniedone......................................................................................................187
Modyfikacja tabel ..........................................................................................................189
Kolory w tabelach i w komrkach oraz kolory obramowa................................................191
Stosowanie kolorw i obrazw jako ta tabeli...............................................................193
Podzia obrazu na wycinki a tabele......................................................................................195
Podzia obrazw na wycinki za pomoc Fireworks ......................................................195
Widok ukadu.......................................................................................................................197
Rysowanie komrek tabeli ............................................................................................199
Edycja tabel w widoku projektu ....................................................................................201
Podsumowanie .....................................................................................................................201

1

2*# ,*  !."

Ramki i ukady ramek..........................................................................................................204
Dokument ukadu ramek ...............................................................................................205
Zagniedanie elementw FRAME i FRAMESET.......................................................206
Ramki w programie Dreamweaver ......................................................................................206
Tworzenie ramek i ukadw ramek ...............................................................................207
Zaznaczanie ramek ........................................................................................................209
Zapisywanie ramek........................................................................................................209
Zmiana rozmiarw ramek..............................................................................................210
Usuwanie ramek ............................................................................................................212
Zaawansowane waciwoci ramek i ukadw ramek .........................................................212
Atrybuty ukadu ramek..................................................................................................212
Atrybuty ramek..............................................................................................................213
Nazwy zarezerwowane ..................................................................................................215
Nazwy ramek.................................................................................................................216
Element NOFRAMES ...................................................................................................216
Podsumowanie .....................................................................................................................216

. 4#  !
Par sw o warstwach.........................................................................................................217
Warstwy a tabele ...........................................................................................................218
Czy warstwy powinny si nakada?.............................................................................218
Podstawowe informacje na temat warstw............................................................................219
Rysowanie warstw.........................................................................................................219
Umieszczanie zawartoci na warstwie ..........................................................................221
Definiowanie rozmiarw warstw...................................................................................222
Pozycjonowanie warstw ................................................................................................224
Definiowanie waciwoci warstwy.....................................................................................228
Atrybuty znacznikw <DIV> i <SPAN> ......................................................................228
Jeszcze o warstwach ............................................................................................................231
Warstwy zagniedone ..................................................................................................231
Waciwoci warstwy ....................................................................................................232
Konwersja warstw w tabele...........................................................................................232
Wprawianie warstw w ruch .................................................................................................234
Podsumowanie .....................................................................................................................237

 

 53  !"1

Formularze HTML...............................................................................................................239
Podstawy........................................................................................................................239
Elementy formularza............................................................................................................240
Obiekty formularza na palecie obiektw .............................................................................242
Pola tekstowe formularza.....................................................................................................245
Hasowe 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
Wysyanie i czyszczenie formularza....................................................................................255
Podsumowanie .....................................................................................................................256

! 4#**#
*##36 ! 
Dlaczego stosowa arkusze stylw? ....................................................................................257
Grupowanie stylw........................................................................................................258
Dziedziczenie stylu........................................................................................................259
Nie bez powodu nazywa si je kaskadowymi!..............................................................259
Stosowanie stylw na stronach WWW .........................................................................260
HTML a CSS .................................................................................................................261
Tworzenie i stosowanie arkuszy stylw ..............................................................................265
Paleta CSS Styles...........................................................................................................266
Tworzenie nowego stylu................................................................................................266
Edycja stylu ...................................................................................................................268
Definiowanie pocze do zewntrznych arkuszy stylw .............................................268
Usuwanie arkusza stylw ..............................................................................................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

) &
* 
* +
"
*7 -3*6 !+"
Planowanie witryny .............................................................................................................283
Czego chcesz dzisiaj? ....................................................................................................284
Kto to bdzie oglda i w jaki sposb? ..........................................................................284
Co oni chc zobaczy? ..................................................................................................285
Inne rozwaania.............................................................................................................286
Organizacja plikw........................................................................................................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 bezwzgldne ............................................................................................300
Adresowanie wzgldne..................................................................................................300
Tworzenie plikw ................................................................................................................302
Tworzenie nowych plikw ............................................................................................302
Otwieranie plikw .........................................................................................................303
Wywietlanie witryny w przegldarce ..........................................................................303
Zapisywanie plikw.......................................................................................................305
Zapisywanie kopii zapasowych .....................................................................................305
Zamykanie plikw .........................................................................................................306
Umieszczanie plikw na serwerze.................................................................................306
Podsumowanie .....................................................................................................................310

  )$3*##8$3*6 "

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 pocze ........................................................320
Zmiana tytuu strony......................................................................................................323
Zmiana strony gwnej widoku mapy witryny..............................................................323
Opcje widoku mapy witryny .........................................................................................324
Zapisywanie mapy witryny jako obrazu........................................................................326
Kontrola pocze ................................................................................................................327
Naprawa pocze..........................................................................................................329
Zmiana pocze............................................................................................................330
Synchronizacja witryn lokalnej i odlegej............................................................................330
Polecenia Select Newer Local/Remote..........................................................................330
Polecenie synchronizacji ...............................................................................................331
Narzdzie znajdowania i zamiany .......................................................................................333
Znajdowanie kodu rdowego i tekstu.........................................................................336
Zaawansowane procedury znajdowania tekstu..............................................................337
Znajdowanie znacznikw ..............................................................................................338
Stosowanie wyrae regularnych ..................................................................................339
Zapisywanie wzorcw dla procedur znajdowania oraz znajdowania i zamiany ...........343
Raporty witryny ...................................................................................................................344
Sprawdzanie poprawnoci interpretacji stron WWW w rnych przegldarkach...............347
Kontrola czasw adowania .................................................................................................350
Podsumowanie .....................................................................................................................352

 



 
 - #- " "

Zasoby witryny ....................................................................................................................353
Wstawianie zasobw .....................................................................................................356
Dostosowywanie palety Assets .....................................................................................359
Korzystanie z zasobw w innych witrynach .................................................................359
Edycja zasobw .............................................................................................................362
Twoje ulubione zasoby..................................................................................................363
Korzystanie z systemu Check In/Check Out .......................................................................367
Konfiguracja systemu Check In/Check Out ..................................................................368
Pobieranie i zwracanie plikw.......................................................................................369
Opcje nadzoru nad wersj pliku i kodem rdowym .........................................................371
Integracja z Visual SourceSafe......................................................................................372
Integracja z WebDAV ...................................................................................................373
Korzystanie z Design Notes.................................................................................................374
Zastosowania oglne .....................................................................................................374
Dostosowywanie kolumn widoku Site Files okna Site .................................................377
Korzystanie z Design Notes w Fireworks .....................................................................379
Tworzenie raportw na temat organizacji prac nad witryn................................................380
Raporty o plikach pobranych do edycji.........................................................................381
Raporty Design Notes....................................................................................................382
Podsumowanie .....................................................................................................................384

/ 9$3*$3# "+

O szablonach........................................................................................................................385
Co to jest biblioteka? .....................................................................................................386
Przygotowywanie szablonu .................................................................................................386
Definiowanie obszarw edytowalnych..........................................................................388
Usuwanie obszarw edytowalnych ...............................................................................390
Konfigurowanie waciwoci szablonu .........................................................................391
Design Notes..................................................................................................................391
Stosowanie szablonw .........................................................................................................391
Doczanie i odczanie szablonw .....................................................................................394
Doczanie szablonu ......................................................................................................395
Odczanie szablonu ......................................................................................................395
Aktualizacja stron opartych na szablonach ...................................................................396
Stosowanie szablonw z dokumentami XML .....................................................................397
O bibliotekach......................................................................................................................398
Tworzenie i stosowanie elementw bibliotecznych ......................................................398
Edycja elementw bibliotecznych .................................................................................400
Odczanie i usuwanie elementw bibliotecznych........................................................401
Elementy biblioteczne korzystajce ze skryptw JavaScript...............................................402
Podsumowanie .....................................................................................................................403

)

&  ,- .(

  -3 #  .

Okno Timelines....................................................................................................................408
Jak korzysta z okna Timelines .....................................................................................409
Kontrolki........................................................................................................................410
Tworzenie animacji..............................................................................................................411
Inne sposoby wykorzystania linii czasowych ......................................................................419
Definiowanie cieek animacji......................................................................................421
Podpowiedzi i uwagi dotyczce animacji ............................................................................422
Podsumowanie .....................................................................................................................423

!


   

+  -53

 !
Jak dziaa Flash ....................................................................................................................426
Grafika wektorowa a rastrowa.......................................................................................427
Czy znasz Shockwavea?...............................................................................................428
Wstawianie sekwencji wideo Flash do dokumentu programu Dreamweaver .....................430
Konfigurowanie waciwoci sekwencji wideo programu Flash ..................................431
Korzystanie z tekstu programu Flash...................................................................................439
Stosowanie przyciskw programu Flash .............................................................................441
Podsumowanie .....................................................................................................................445

1 &*#6:7  

Podstawy jzyka JavaScript.................................................................................................447

Elementy........................................................................................................................448
Elementy: zmienne ........................................................................................................448
Elementy: obiekty i waciwoci ...................................................................................450
Elementy: metody..........................................................................................................450
Elementy: funkcje..........................................................................................................450
Elementy procedury obsugi zdarze .......................................................................451
Dreamweaver i JavaScript ...................................................................................................451
Wstawianie behawiorw................................................................................................452
Modyfikacja behawiorw ..............................................................................................455
Podsumowanie .....................................................................................................................458

!. $*633#
 1
Rozbudowa moliwoci przegldarek za pomoc moduw dodatkowych i ActiveX........459
Moduy dodatkowe (plug-iny), aplikacje pomocnicze i typy MIME............................460
Konfiguracja i dostosowywanie ....................................................................................461
Ewentualne problemy z konfiguracj ............................................................................462
Moduy dodatkowe Netscape a obiekty ActiveX ..........................................................463
Technologie moduw dodatkowych...................................................................................467
Shockwave.....................................................................................................................467
QuickTime .....................................................................................................................476
Pliki multimedialne RealSystems..................................................................................491
Rozbudowywanie moliwoci przegldarki za pomoc Javy..............................................503
Co to jest Java? ..............................................................................................................503
Korzystanie z apletw ...................................................................................................505
rda apletw...............................................................................................................506
Praca z apletami w programie Dreamweaver ................................................................507
Wstawianie apletu..........................................................................................................507
Uwagi kocowe na temat Javy: skomplikowane aplety................................................511
Dwik na stronach WWW .................................................................................................511
Dwik cyfrowy: terminy i pojcia ...............................................................................512
Problem moduw dodatkowych ...................................................................................513
Wstawianie dwiku......................................................................................................513
Kontrola nad dwikiem................................................................................................517
Zestawianie wszystkiego w cao.......................................................................................519
Stwrz pliki multimedialne ...........................................................................................519
Sprytnie korzystaj z ramek ............................................................................................520
Detekcja moduw dodatkowych.........................................................................................523
Decyzje strategiczne ......................................................................................................523
Detekcja za pomoc behawiora Check Plugin ..............................................................524
Detekcja nie wymagajca skryptw ..............................................................................526
Podsumowanie .....................................................................................................................529

 

"

) !

,    /0  (1
! ;<'  ""
Czym s rozszerzenia?.........................................................................................................533
Umiejscowienie rozszerze na dysku ..................................................................................534
Folder Behaviors............................................................................................................535
Folder Objects................................................................................................................536
Stosowanie behawiorw ......................................................................................................537
Paleta Behaviors ............................................................................................................537
Czsto stosowane zdarzenia ..........................................................................................542
Czsto stosowane akcje .................................................................................................543
Extension Manager ..............................................................................................................545
ciganie i instalacja rozszerze ...................................................................................546
Zarzdzanie rozszerzeniami ..........................................................................................550
Usunicie instalacji rozszerze......................................................................................553
Podsumowanie .....................................................................................................................553

!! 2#
$*6$
6 
Zanim zaczniemy .................................................................................................................555
Praca z obiektami.................................................................................................................556
Czym s obiekty?...........................................................................................................556
Tworzenie wasnych obiektw ......................................................................................560
Mdre posugiwanie si obiektami ................................................................................572
Praca z behawiorami ............................................................................................................573
Czym s behawiory?......................................................................................................574
Tworzenie wasnego behawiora ....................................................................................577
Tworzenie wasnych behawiorw .................................................................................588
Wspdzielenie rozszerze...................................................................................................589
Czy chcesz si dzieli z innymi? ...................................................................................589
Uodpornianie kodu ........................................................................................................589
Projekt: testowanie uytecznoci...................................................................................593
Opracowanie dokumentacji ...........................................................................................594
Rozprowadzanie ............................................................................................................597
Podsumowanie .....................................................................................................................601

!" 7*##-#* *

 /."
Wojownik kodu....................................................................................................................603
Widok kodu ...................................................................................................................604
Twarz w twarz z XML .......................................................................................................611
Tre o narzuconej strukturze kontra tre o narzuconym wygldzie...........................613
Dostosowywanie znacznikw........................................................................................614
Przejcie do jzyka XHTML 1.0 .........................................................................................615
Wprowadzenie do jzyka HTML zgodnoci z XML-em ..............................................615
XHTML a HTML 4.......................................................................................................618
Problemy zgodnoci z wersj przegldarki ...................................................................618
Podsumowanie .....................................................................................................................619

!  ##*#-, $#

 /!
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


   

  21(
* 7*6#*3 /"
*9

0=>3,*  /
Webmonkey .........................................................................................................................646
westciv.com .........................................................................................................................646
NetMechanic ........................................................................................................................646
The Web Standards Project..................................................................................................647
Netscape Standards Challenge.............................................................................................647

* -#   / 1

Wymagania systemowe .......................................................................................................649
Korzystanie z plikw z dysku CD-ROM .............................................................................649
Pliki wykorzystywane w wiczeniach .................................................................................649

7*  / 

Rozdzia 18.

By moe zwrcie uwag, e strony WWW zdobywajce nagrody, na przykad w organizowanym przez Macromedia konkursie Site of the Day, zazwyczaj zawieraj sekwencje wideo programu Flash. Cho istnieje wiele sposobw umieszczania animacji
na stronach WWW choby animacje DHTML, animowane GIF-y, animacje Javy
i JavaScriptu trudno znale osob, ktra nie byaby pod wraeniem tego typu animacji, ktre mona uzyska w programie Flash.
Niezalenie od tego, czy jest to wirowanie, krcenie, zanikanie, skakanie, podskakiwanie czy nawet piewanie, animacja Flash jest czym spektakularnym. Aby by jeszcze
bardziej zakniony poznania tego narzdzia, wspomn choby o moliwoci czenia aplikacji stworzonych w programie Flash z baz danych. Oznacza to, midzy innymi, e witryny e-commerce przestan by nudne, a zaczn by pikne. Z kad now wersj Flash coraz
lepiej spenia wymagania stawiane standardowemu narzdziu do tworzenia witryn.
Ci, ktrzy buduj swoje witryny od pocztku do koca w programie Flash, unikaj
wielu puapek projektowych, ktre od lat s zmor projektantw stron WWW. Na przykad sekwencje wideo programu Flash dostosowuj si rozmiarami do okna przegldarki, co eliminuje obawy zwizane z szerokoci jej okna. Poniewa Flash jest programem wektorowym, kwestia utraty jakoci obrazu praktycznie nie istnieje. Chocia
starsze przegldarki (wersje poniej 3.0) nie maj wbudowanego moduu dodatkowego
(plug-inu) Flash Player, jest wysoce prawdopodobne, e coraz wiksza rzesza ludzi, doceniajc zalety witryn Flash (i innych nowinek pojawiajcych si na stronach WWW),
myli o uaktualnieniu oprogramowania, a nawet ju to zrobia.
Przyszo rysuje si dla programu Flash w rowych barwach, a odbiciem tego jest rosnca liczba studentw wybierajcych na uczelniach kierunki wice si z multimediami. Ludzie ci wiedz, e Flash to nie tylko kaprys.
W tym rozdziale zbadamy powody tego szau na punkcie programu Flash. Oto lista tematw:
n sposb dziaania programu Flash,
n wstawianie sekwencji wideo programu Flash,
n stosowanie tekstu programu Flash,
n wstawianie przyciskw programu Flash.





K    

Aby zrozumie, jak dziaa Flash, musisz zacz od tego, e Flash nie jest czci skadow 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 mona traktowa jak czonkw jednego zespou, dcych
do wsplnego celu: stworzenia wspaniaej witryny, ktra nie tylko doskonale wyglda,
lecz take udostpnia wiele interaktywnych opcji.
Flash ewoluowa od programu do tworzenia animacji typowych dla filmw rysunkowych, przez animacje dla gier elektronicznych, po prezentacje multimedialne. To, co
odrnia Flash od pozostaych programw do animacji, to moliwo wyeksportowania
animacji jako plikw Shockwave i stosowania ich na stronach WWW.
Kada nowa wersja coraz lepiej zaspokaja potrzeby projektantw i twrcw stron
WWW. Obecnie jest to ju nie tylko program do animacji. Chocia nadal uytkownik
programu Flash musi zna podstawy tworzenia animacji, to zakres moliwoci, jakie
daje program, jest znacznie szerszy.
Mona na przykad przesa zmienne z bazy danych do interfejsu Flash i zaprezentowa
rezultaty na stronie WWW za pomoc animacji. Mona take stworzy aplikacje
e-commerce, udostpniajce uytkownikom animowany interfejs, ktry dodatkowo pozwala ledzi stan rachunku oraz przechowuje numery kart kredytowych.
Poczenie moliwoci artystycznych i potencjau technicznego sprawio, e Flash sta
si znany jako program do tworzenia bardziej interesujcych witryn. Na przykad projektanci z oddcast.com stworzyli interaktywn aplikacj, pokazan na rysunku 18.1
jest to ruszajcy si i mwicy bot, ktry mona dowolnie wykorzysta.


 
Wirtualna
gospodyni witryny
oddcast.com
przyprawi Ci
o drenie

  K   ! "

#

 


Jednym z terminw, ktry pojawia si czsto w poczeniu z programem Flash jest termin grafika wektorowa. Jeli naleysz to tych biedakw, ktrzy nie rozumiej, co on
oznacza, przeczytaj ten rozdzia, a przestanie by czarn magi.
Obrazy wektorowe s wywietlane na ekranie lub wysyane do drukarki obsugujcej
PostScript w oparciu o dokadnie okrelone rwnania matematyczne. Projektanci dokumentw drukowanych i stron WWW s rwnie wielkimi wielbicielami grafiki wektorowej, bowiem cechuje j szeroki zakres moliwoci dostosowywania wielkoci obiektw
przy zachowaniu jakoci obrazu. Dotyczy to zarwno ekranu komputera, jak i wydruku
na drukarkach obsugujcych PostScript.
Jeli na przykad chcesz umieci logo firmy na tablicy ogosze, projektant Twojego
plakatu niewiele bdzie w stanie zdziaa z przesanym mu obrazem rastrowym o rozdzielczoci 72 dpi. eby uzyska sensowny efekt, najpierw musi on odtworzy logo
w postaci wektorowej korzystajc z takich programw, jak Adobe Illustrator lub
Photoshop, ewentualnie Macromedia Freehand lub Fireworks. Dopiero powstay w ten
sposb obraz wektorowy mona powikszy do rozmiaru wymaganego na plakacie, bez
obaw o rozmycie krawdzi i utrat koloru. Jeli bdzie to konieczne, to samo logo
wektorowe mona nastpnego dnia pomniejszy tak, aby zmiecio si w rogu koperty
i nada mu inny kolor. I nadal krawdzie bd ostre, a kolor prawdziwy. W tym si wanie zawiera pikno grafiki wektorowej. Dodatkowa korzy to niewielki rozmiar plikw.
Flash jest programem wektorowym, a wic wszelkie obiekty, ktre powstaj przy uyciu jego moduu rysunkowego automatycznie przeskalowuj si, dopasowujc do rozmiarw okna. Nie musisz wic ich rozciga lub pomniejsza i nie trac one jakoci. To
samo dotyczy wszelkich ksztatw wektorowych, ktre wklejasz lub importujesz do biblioteki programu Flash. Inaczej jest jednak w przypadku fotografii i zeskanowanych
grafik. Obrazy fotograficzne, takie jak obrazy JPG, to pliki zawierajce ilustracje rastrowe i nie mona ich skalowa. Innymi przykadami grafiki rastrowej (oprcz obrazw BMP) s obrazy w formatach TIF, PICT i GIF.
Komputery nie potrafi skalowa grafiki rastrowej bez utraty jakoci, poniewa obraz
rastrowy stanowi zestaw pikseli, ktrych uoenia nie mona zmieni. Dla grafiki rastrowej ukad pikseli jest czym tak trwaym, jak dla Ciebie struktura DNA. Wymuszenie zmiany rozmiarw takiego obrazu zawsze powoduje utrat jakoci. Uwaga ta jest
rwnie prawdziwa dla obrazw prezentowanych na ekranie, jak i drukowanych. Utrata
jakoci pojawia si take jako efekt kompresji lub usunicia kolorw (tak jak w przypadku eksportu do formatu GIF).
Program Flash pozwala na importowanie grafiki rastrowej i stosowanie jej w animacjach. Warto jednak, aby ju teraz wiedzia, e spowolni to odtwarzanie filmu tam,
gdzie nie s dostpne cza o wysokiej przepustowoci. Oczywicie wzronie take
rozmiar pliku .swf powstaego po wyeksportowaniu do formatu Shockwave.
Obrazy rastrowe nie s wcale rzadkie w sekwencjach wideo, lecz zaleca si ograniczanie ich liczby. W przeciwnym razie efektem Twoich dziaa bdzie bardzo wolny film.
Flash daje nad tym pewn kontrol, poprzez moliwo zmiany poziomu jakoci obrazu
przy eksporcie do formatu JPG. Im wysza jako obrazu JPG, tym wikszy rozmiar
pliku i wysze obcienie czy.





K    

Identyfikacja grafiki wektorowej

Oto procedura, ktra pozwoli Ci natychmiast rozpozna obraz wektorowy:

 Otwrz plik zawierajcy obraz w programie do edycji grafiki (takim jak Fireworks lub Flash).
 Zaznacz obraz.
 Jeli na obrazie pojawi si ruchome punkty tak zwane uchwyty (patrz rysunek 18.2), jest

to obraz wektorowy. W takim przypadku moesz zwiksza lub zmniejsza jego rozmiar (korzystajc z narzdzia przeskalowywania), bez obawy o utrat jakoci.



Obraz wektorowy
zaznaczony
w Fireworks mona
dostosowywa,
przesuwaj c
punkty przy
uyciu narzdzia
Open Path

 Jeli uchwyty si nie pojawi, obraz moe by obrazem rastrowym. Sprbuj rozgrupowa ob-

raz, aby sprawdzi, czy uchwyty si pojawi (w programie Flash rozgrupowanie umoliwia
skrt Ctrl+B). Jeli nadal nie s widoczne, masz do czynienia z obrazem rastrowym.
Jeli wklejasz obiekty Fireworks do sekwencji wideo programu Flash, zostan one
przeksztacone 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 skrt Ctrl+B, przygotowujc je w ten sposb do edycji.

 

Posugiwanie si sekwencjami wideo w programie Dreamweaver wymaga przynajmniej
podstawowej znajomoci programu Flash i tworzonych przez niego plikw. Jest z tym
czsto problem. Poniewa wielu twrcw i projektantw stron WWW nigdy nie korzystao z programu Flash, o metodach eksportu plikw Flash i wstawiania ich w dokumentach HTML kry wiele mitw i bdnych teorii.
Aby wstawiana w dokumencie HTML programu Dreamweaver sekwencja wideo moga
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 wikszo przegldarek bdzie miaa problemy z jej odtworzeniem, dopki wersja pliku nie zostanie przekonwertowana do postaci .swf za pomoc polecenia Export.

  K   ! "

$

Znaczniki <OBJECT> i <EMBED>

Poniewa pliki .swf s w formacie wprowadzonym przez Macromedia, ich obsuga w przegldarce
jest moliwa dopiero po zainstalowaniu programu Macromedia Flash Player. Najnowsze wersje
przegldarek Netscape Navigator i Internet Explorer maj ju wbudowany modu Flash Player,
aczkolwiek w rnych wersjach.
W przegldarce Microsoft Internet Explorer Macromedia Flash Player wystpuje jako kontrolka
ActiveX, do ktrej odwoanie w kodzie HTML umieszcza si w znaczniku
. W Navigatorze
Netscape jest to modu dodatkowy, do ktrego odwoanie definiowane jest w znaczniku
 
.
Aby umoliwi obsug plikw .swf w obu typach przegldarek, w kodzie HTML naley umieci
oba znaczniki
 i
 
. Oto przykad kodu HTML dla dokumentu programu Dreamweaver, do ktrego wstawiono plik Shockwave:


   
  !!!!" #!!#$#!!
 
%&&'(()&*+,-)./-+),/-()%()0(1)%,)02*+./34!4!4!5

6
7
89
88::
;3)<1)-=,15

6
7
89
86
>:
;&.=+5

6
7
89
8 6:
;&.=+5

6
7
89
8?;
>:
;%@%5

8 73)<1)-=,1" #!!#$#!!6
>&.=+
6&.=+?;
>%@%6 ;$96
$%&&'(()&*+,-)./-+),/-(%/A1)*+(/13/)(
3+B,@C6D6./D:+./3%/A1)*+E)%5

(8 5

(5

Na szczcie nie musisz wiedzie, jak zapisa zawarto obu znacznikw. Dreamweaver tworzy
kod automatycznie, gdy plik Shockwave jest wstawiany do dokumentu. Warto jednak mie cho
ogln wiedz na temat znacznikw
 i
 
 na wypadek, gdyby kiedy potrzebowa
zmieni parametry lub wprowadzi w znacznikach inne zmiany.

By moe z tego wzgldu wyraz Shockwave sta si podstawowym rdem nieporozumienia. Wiele osb myli, e Shockwave to program, a tak nie jest. W rzeczywistoci
Shockwave to typ pliku. Tak jak .JPG czy .GIF to typy plikw graficznych, tworzonych
przy eksporcie obrazu w programie do obrbki grafiki, tak rozszerzenie .swf (pochodzce od Shockwave Flash) przypisywane jest plikom eksportowanym z Macromedia Flash
lub Director (oraz kilku innych programw). Pliki wyeksportowane w programach
Flash lub Director do formatu Shockwave mog by odtwarzane w przegldarkach
i prezentuj si w nich niele.
Tak wic, jeli nastpnym razem kto zapyta Ciebie, czy znasz Shockwavea, bdziesz
mg sprostowa nieciso w posugiwaniu si tym terminem.

 

 
Inny typ pliku, ktry take powiniene pozna ma rozszerzenie nazwy .swt (Flash Generator Template). Pliki .swt pozwalaj modyfikowa sekwencje wideo programu Flash.
W programie Dreamweaver pliki te reprezentuj przyciski Flasha. Przygotowane w programie Flash przyciski mona wyeksportowa jako pliki .swt, a nastpnie umieci w oknie
dialogowym Insert Flash Button programu Dreamweaver.


%&


K    

W Twojej kopii oprogramowania Dreamweaver pewien zestaw plikw .swt jest ju dostpny w oknie Insert Flash Button. Pliki te s zgromadzone w folderach Flash Buttons
i Flash Text (oto pena cieka dostpu: Dreamweaver\Configuration\Flash Objects\
Flash Buttons (lub Flash Text)). Wszelkie nowe przyciski, ktre utworzysz w programie
Flash i wyeksportujesz jako pliki .swt, take powinny znale si w tym miejscu.
Jeli na temat tworzenia szablonw przyciskw Flash chcesz si dowiedzie nieco wicej, przejrzyj elektroniczny podrcznik dostpny w witrynie macromedia.com. Znajdziesz go w sekcjach Dreamweaver Support lub Flash Support pod hasem Using
Button Templates with Dreamweaver.
Nie tylko Flash i Director potrafi eksportowa pliki do formatu .swf. Takich programw
jest znacznie wicej. Jeli si porozgldasz dobrze, bdziesz zdziwiony, jak popularna
jest to opcja.

Jak to dobrze, e zdecydowae si pozna program Dreamweaver masz tu cay zestaw narzdzi, dziki ktrym Twoje sekwencje wideo bd dziaa i wyglda lepiej.
Wstawianie sekwencji wideo Flash do dokumentu programu Dreamweaver nie mogoby
by prostsze:



Umie punkt wstawiania w tym miejscu dokumentu programu Dreamweaver,

w ktrym ma si pojawi sekwencja filmowa. Byoby dobrze umieci j
w komrce tabeli lub na warstwie, aby uzyska kontrol nad sposobem wyrwnania.



Wybierz pozycj Flash w menu podrzdnym Media menu Insert lub kliknij ikon
Insert Flash na palecie obiektw. Spjrz na rysunek 18.3.


 
Wstawianie
multimedialnego
obiektu
programu Flash
do dokumentu
programu
Dreamweaver 4.0

  K   ! "



%

Wska plik .swf, ktry chcesz wstawi. Film zostanie umieszczony w Twoim
dokumencie. Jeli skada si z wielu klatek, pojawi si w postaci szarego
prostokta, w centrum ktrego umieszczona jest ikona Flash (patrz rysunek 18.4).



Zaznacz obiekt
programu Flash
w swoim
dokumencie
i otwrz
inspektora
Property,
aby zmieni
wa.ciwo.ci
sekwencji wideo



Korzystajc z inspektora Property, zmie waciwoci sekwencji wideo lub nadaj

jej nazw i zdefiniuj atrybut ID (patrz rysunek 18.4). Aby wywietli wszystkie
ustawienia, kliknij przycisk ze strzak, umieszczony w dolnym prawym rogu
okna inspektora.

     !

Inspektor Property umoliwia zmian najczciej stosowanych dla sekwencji wideo
programu Flash ustawie:
n Nazwa sekwencji wideo wpisz w tym polu nazw sekwencji, do ktrej bdzie

mona odwoywa si w skryptach. Pole nazwy nie ma w inspektorze Property

swojej etykiety. Znajdziesz je obok ikony Flash, z lewej strony okna. Pamitaj,
aby nie uywa w nazwach znakw specjalnych oraz spacji.
n W i H te pola okrelaj w pikselach szeroko i wysoko pola sekwencji

wideo. Moesz take zdefiniowa wymiary w innych jednostkach: pc (pica), pt

(punkty), in (cale), mm (milimetry), cm (centymetry) i % (procentowa warto
mierzona wzgldem obiektu nadrzdnego). Midzy wartoci a jednostk nie
mona umieszcza spacji. Oto przykad definicji: 30%.
n File to pole okrela ciek dostpu do pliku programu Flash. Moesz klikn

ikon foldera, aby znale plik.

n Align skorzystaj z tego pola, aby wskaza sposb wyrwnania sekwencji

wideo na stronie i w oknie przegldarki.


%


K    
n Bg tu definiowany jest kolor ta dla sekwencji wideo. Skorzystaj z palety

kolorw Dreamweavera i wska kolor bezpieczny, obsugiwany w Internecie.

n ID w tym polu definiowany jest opcjonalny parametr ID kontrolki ActiveX.

Jest on stosowany przede wszystkim do przekazywania informacji midzy

kontrolkami ActiveX.
n V Space i H Space okrel w pikselach szeroko wolnego obszaru wok pola

sekwencji wideo.
n Parameters ten przycisk otwiera okno dialogowe zawierajce dodatkowe

ustawienia dla sekwencji wideo. Opis parametrw programu Flash znajdziesz

w punkcie Parametry sekwencji wideo programu Flash. Dodatkowe parametry
pojawiaj si, gdy sekwencja wideo pochodzi z programu Flash. Signij do
dokumentacji tego programu, aby znale wicej informacji na temat stosowania
parametrw.
n Quality w tym polu umieszczana jest warto atrybutu QUALITY znacznikw

 i
 
, uruchamiajcych sekwencj wideo. Warto ta okrela

stopie wygadzania stosowany w trakcie odtwarzania sekwencji. Kuszce

jest przyj warto najwysz, lecz trzeba pamita, e odtwarzanie filmw
w wysokiej jakoci wymaga szybszych procesorw. W punkcie Parametry
sekwencji wideo programu Flash znajdziesz wicej informacji na temat ustawie
jakoci odtwarzania.
n Scale to pole wskazuje znacznikom
 i
 
, ktre uruchamiaj

sekwencj wideo, stopie przeskalowania.

n Autoplay jeli zaznaczysz to pole wyboru, sekwencja zostanie odtworzona

automatycznie, po zaadowaniu strony.

n Loop zaznaczenie tego pola wyboru spowoduje powtarzanie sekwencji

w nieskoczonej ptli.
n Reset Size ten przycisk pozwala przywrci domylne rozmiary zaznaczonej

sekwencji.


    
W tym wiczeniu bdziesz korzysta z plikw z foldera storm, znajdujcego si w folderze ch18 na dysku CD, doczonym do ksiki. Do otwartego w programie Dreamweaver dokumentu storm.html wstawisz sekwencj wideo Flash o nazwie lightning.swf
i skonfigurujesz jej waciwoci, korzystajc z inspektora Property. Nastpnie przypisujc poczeniu behawior, dodasz do sekwencji moliwo jej kontroli.
Ukoczona wersja tego wiczenia, o nazwie storm_done.html, take znajduje si w folderze ch18. Skorzystaj z niej, jeli wykonanie wiczenia sprawi Ci trudno. Swoj
wersj finaln wiczenia zapisz pod nazw storm.html na dysku twardym. Bdzie nam
potrzebna w wiczeniu 18.2.



Otwrz w programie Dreamweaver plik o nazwie storm.html z folderu ch18,

znajdujcego si na dysku CD, doczonym do ksiki. Plik zawiera tabel
o dwch wierszach i jednej kolumnie. Ustawienia wyrwnania komrki tabeli
i waciwoci strony zostay ju skonfigurowane.

  K   ! "



%%

Aby wstawi sekwencj wideo programu Flash, umie punkt wstawiania w grnym
wierszu tabeli. Wybierz pozycj Flash z menu podrzdnego Media menu Insert
(patrz rysunek 18.5). Skorzystaj z przycisku Browse i znajd plik o nazwie
lightning.swf (take w folderze ch18, znajdujcym si na dysku CD). Sekwencja
pojawi si w dokumencie jako szary prostokt z logo programu Flash w centrum.



Wstawianie
sekwencji wideo
programu Flash



Otwrz inspektora Property (Ctrl+F3). Kliknij raz sekwencj wideo, aby j

zaznaczy. W inspektorze Property powinny pojawi si jej waciwoci.
Przetestuj sekwencj, naciskajc przycisk Play (jeli sekwencja nie zacznie by
odtwarzana, sprawd stan pola Autoplay). Po przetestowaniu, kliknij przycisk
Stop, ktry take pojawia si w inspektorze Property, gdy zaznaczonym obiektem
jest sekwencja wideo programu Flash.



Kolejny etap to wyczenie opcji automatycznego odtwarzania (Autoplay)

i powtarzania (Loop) sekwencji wideo (patrz rysunek 18.6). Jeli oba te pola
wyboru bd w oknie inspektora Property zaznaczone (a s zaznaczone domylnie),
wyczy je. Jeeli tego nie zrobisz, sekwencja bdzie odtwarzana w ptli
(a oznacza to nieskoczon liczb powtrze). Wyczenie opcji Autoplay
zapobiegnie automatycznemu odtworzeniu sekwencji wideo, po zaadowaniu
do okna przegldarki.



Zaznacz pole sekwencji i kliknij ponownie przycisk Play. Tym razem

wywietlona zostanie tylko jego pierwsza klatka. Jest to efekt wyczenia opcji
autoodtwarzania (Autoplay). Zanim przejdziesz do nastpnego etapu, kliknij
przycisk Stop.



Zaznacz pole sekwencji i wpisz nazw Lightning w polu nazwy inspektora

Property, ktre znajduje si obok ikony Flash. Dziki temu bdziesz mg
odwoywa si do sekwencji przy konfiguracji linii czasowej lub przypisywaniu
behawiora (czym wkrtce si zajmiemy).



Po wstawieniu sekwencji wideo, pora na zdefiniowanie poczenia, ktre pozwoli

uytkownikowi wcza odtwarzanie filmu. W tym celu umie punkt wstawiania
w pustym wierszu tabeli, poniej komrki zawierajcej sekwencj wideo.


%


K    



Wy czenie opcji
automatycznego
odtwarzania
(Autoplay)
i powtarzania
(Loop)
sekwencji wideo

Wpisz tekst poczenia.

Zaznacz tekst i umie w polu Link inspektora Property znak #. Tak zdefiniowane
poczenie jest poczeniem pustym, ktre umoliwia przypisanie behawiora
do tekstu. Nacinij klawisz Enter, aby umieci definicj poczenia w kodzie.



Sprawd, czy tekst jest nadal zaznaczony i wybierz z menu Window pozycj
Behaviors. Kliknij w oknie palety Behaviors przycisk ze znakiem plus (+),
aby rozwin list behawiorw. Wybierz pozycj Control Shockwave or Flash,
co spowoduje wywietlenie okna dialogowego, w ktrym moesz wybra akcje
(patrz rysunek 18.7).



Okno dialogowe
Control Shockwave
or Flash



W oknie dialogowym Control Shockwave or Flash rozwi list Movie i wybierz

z niej sekwencj wideo o nazwie Lightning. Kliknij nastpnie przycisk opcji Play.
W ten sposb utworzony zostanie behawior odtwarzania filmu. Pozostae opcje
na razie Ci nie bd interesowa (lecz nie zapomnij o ich istnieniu, na wypadek,
gdyby chcia je wykorzysta we wasnych projektach). Nacinij 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 rozwi list
procedur obsugi zdarzenia, klikajc przycisk ze strzak, zlokalizowany porodku
(rysunek 18.8). Wybierz procedur onClick, aby film by odtwarzany, gdy
uytkownik kliknie tekst. Jeli Twj behawior jest ju tak ustawiony, pomi ten krok.

  K   ! "

%'




Wybieranie procedury
obsugi zdarzenia
w oknie palety
Behaviors



Zapisz plik i wywietl w oknie przegldarki, aby przetestowa sekwencj wideo

i behawior.
W tym wiczeniu wykorzystana zostaa funkcja jzyka JavaScript, ktra kontroluje
sekwencje wideo programu Flash. Z tego wzgldu, przed pierwszym odtworzeniem
filmu, przegldarka musi uruchomi skrypt. Moe to zaj kilka sekund, lecz jest
konieczne, jeli chcesz przekaza uytkownikowi kontrol nad sekwencj, korzystajc
z behawiora programu Dreamweaver.

Parametry sekwencji wideo programu Flash

Znaczniki
  , cile powizane z elementem OBJECT, s w nim osadzone. Znaczniki te
oraz ich atrybuty okrelaj pewne parametry pliku .swf i sposb jego uruchamiania.
Zazwyczaj w Dreamweaverze nie ma potrzeby definiowania parametrw dla sekwencji wideo programu Flash z poziomu kodu rdowego. Wszelkie ustawienia s konfigurowane przy wstawianiu
sekwencji. Moe si jednak zdarzy, e bdziesz musia zmieni ustawienia rcznie w kodzie HTML.
Zmiana parametrw moe by take konieczna w fazie tworzenia plikw .swt. Z tego wzgldu
zdecydowalimy si umieci tu list parametrw programu Flash:
Parametr

Opis

ALIGN

Wartoci: L (do lewej), R (do prawej), T (do grnego 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 umoliwia wskazanie katalogu podstawowego lub adresu URL
w wyraeniach definiujcych w sekwencji wideo wzgldne cieki dostpu. Bdzie
on przydatny, jeli pliki Flash umieszczone s w innym katalogu ni pozostae pliki.

BGCOLOR

Warto: #RRGGBB (red, green, blue)

Nazwa zmiennej opisujcej szablon: $BG
Kolor ta zdefiniowany w pliku .fla mona zmieni przy pomocy tego parametru.
Wska nowy kolor, podajc jego kod szesnastkowy.


%


K    

Parametr

Opis

CLASSID

Warto:   

  !!!!
Ten parametr musi mie dokadnie tak posta. Jest to identyfikator dla kontrolki
ActiveX przegldarki i naley go stosowa wycznie w znaczniku
5.

CODEBASE

Warto: %&&'((111,)&*+,-)./-+),/-()%()0(1)%,)02*+./3
4!4!4!

Warto tego parametru musi mie dokadnie tak posta. Jest to ulokowanie
kontrolki ActiveX moduu Flash Player. Przegldarka automatycznie cignie
kontrolk, jeli nie zostaa ona jeszcze zainstalowana. Stosuj parametr tylko
w znaczniku
5.
HEIGHT

Warto: liczba w pikselach (np. 200) lub w procentach okna przegldarki (np. 40%).
Nazwa zmiennej opisujcej szablon: $HE
Ten parametr okrela w pikselach lub procentach okna przegldarki wysoko pola
sekwencji wideo. Poniewa sekwencje wideo programu Flash s skalowalne (grafika
wektorowa), zmiana wielkoci pola nie wpywa na jako obrazu, pod warunkiem
zachowania proporcji wysokoci do szerokoci rwnej 4:3. Oto kilka zalecanych
rozmiarw (w pikselach): 640480, 320240 i 240180.

LOOP

Warto: true lub false

Nazwa zmiennej opisujcej szablon: $LO
Parametr powoduje automatyczne powtarzanie sekwencji lub tylko jednorazowe jej
odtworzenie. Jeli ominiemy ten parametr, przyjmowana jest domylna warto true.

MENU

Warto: true lub false

Nazwa zmiennej opisujcej szablon: $ME
Parametr umoliwia wyczenie menu sterujcego programu Flash, ktre pojawia
si, gdy klikniesz sekwencj wideo w przegldarce prawym klawiszem myszki (lub
lewym klawiszem, przy wcinitym klawiszu Ctrl). Menu sterujce programu Flash
zostanie zastpione opcj About Flash. Domylnie ma warto true.

MOVIE

Warto: moviename.swf
Nazwa zmiennej opisujcej szablon: $MO
Parametr jest stosowany tylko ze znacznikiem
5. Okrela 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 zaadowaniu jej do okna przegldarki. Przypisz warto true, jeli
chcesz, aby sekwencja bya odtwarzana automatycznie. Domyln wartoci jest true.

PLUGINSPAGE Warto: %&&'((111,-)./-+),/-(%/A1)*+(/13/)(3+B,@C6D6./D

:+./3%/A1)*+E)%

Parametr jest stosowany tylko ze znacznikiem
8 5. Jest stosowany w celu

okrelenia ulokowania moduu dodatkowego Flash Player, aby mona byo go
cign, jeli nie jest jeszcze zainstalowany.

  K   ! "

Parametr

Opis

QUALITY

Wartoci: low, high, autolow, autohigh lub best.

%#

Nazwa zmiennej opisujcej szablon: $QU

Parametr okrela stopie wygadzania (ang. antialiasing) stosowany do sekwencji
wideo w czasie jej odtwarzania w oknie przegldarki. Sekwencje, do ktrych
stosowane jest wygadzanie, lepiej si prezentuj na ekranie, poniewa s
bardziej eleganckie. Niestety znacznie bardziej obciaj cza. Wybr wartoci
tego parametru to wybr midzy szybkoci dziaania a jakoci odtwarzania.
low ta warto daje pierwszestwo szybkoci przed jakoci. Nie jest wtedy
stosowane wygadzanie.
autolow powoduje zaadowanie sekwencji do okna przegldarki bez
wygadzania. Wygadzanie zostanie wczone tylko wtedy, jeli przepustowo
cza jest na tyle wysoka, e odtwarzanie odbywa si z wyspecyfikowan
szybkoci, okrelon przez warto wspczynnika Fps.
high w tym przypadku wygadzanie jest stosowane, lecz z wyczeniem
obrazw animowanych. Jest to domylna warto parametru QUALITY.
autohigh powoduje, e odtwarzanie rozpoczyna si z wczon opcj
wygadzania. Jeli jednak przepustowo cza jest zbyt maa, aby sekwencja
bya odtwarzana z szybkoci wyspecyfikowan przez warto wspczynnika
Fps, wygadzanie jest wyczane.
best w tym przypadku jako odtwarzania bezwzgldnie bierze gr nad
szybkoci odtwarzania. Wygadzanie jest stosowane do wszystkich elementw,
bez wzgldu na przepustowo cza.
SRC

Warto: nazwa_sekwencji.swf
Nazwa zmiennej opisujcej szablon: $MO
Parametr okrela nazw i adres odtwarzanego pliku. Stosowany jest tylko
w znaczniku
8 5.

SWLIVECONNECT Ten parametr informuje przegldark o koniecznoci zaadowania Javy przy

pierwszym uruchamianiu sekwencji wideo programu Flash. Domylnie ma on
warto false. Uruchomienie Javy zabiera czas, wic stosuj warto true tylko
jeli jest to naprawd konieczne. Konieczno taka pojawia si na przykad
wwczas, gdy na jednej stronie uyto JavaScript i Flash wwczas Java jest
niezbdna, aby zadziaaa akcja FSCommand. Jeli jednak korzystasz z funkcji
JavaScript, w ktrych nie odwoujesz si do akcji FSCommand (na przykad
przeprowadzasz detekcj typu przegldarki), przypisz mu warto false,
zapobiegajc adowaniu Javy i spowolnieniu czasu adowania.
SALIGN

Wartoci: L, R, T, B, TL, TR, BL, BR.

Nazwa zmiennej opisujcej szablon: $SA
Parametr okrela ulokowanie w oknie przegldarki pola sekwencji wideo,
do ktrej zastosowano skalowanie. Jeli do sekwencji nie zastosowano
skalowania (a wic nie uyto parametru SCALE), ulokowanie pola sekwencji
wideo mona zdefiniowa za pomoc parametru ALIGN.


%


K    

Parametr

Opis

SALIGN

L, R, T i B wyrwnuj pole do lewej, prawej, grnej bd dolnej krawdzi okna

przegldarki. Z pozostaych trzech stron pole zostanie w razie koniecznoci przycite.
TL i TR wyrwnuj pole do lewej grnej lub prawej grnej krawdzi okna przegldarki.
W razie koniecznoci pole zostanie przycite od lewej dolnej lub prawej dolnej krawdzi.
BL i BR wyrwnuj pole do lewej dolnej lub prawej dolnej krawdzi okna przegldarki.
W razie koniecznoci pole zostanie przycite od gry i z bokw.
Domylnie, przeskalowane filmy s wyrodkowywane w oknie przegldarki. Jeli miejsca
jest za mao lub za duo, pole zostanie przycite, 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 wartoci parametrw WIDTH i HEIGHT zostay zdefiniowane w procentach rozmiarw
okna przegldarki.
showall to warto domylna. Sekwencja wideo jest wwczas widoczna
w wyspecyfikowanym obszarze bez znieksztace. Zachowane zostaj oryginalne
proporcje. Przy dwch krawdziach mog pojawi si obramowania.
noborder powoduje takie przeskalowanie sekwencji wideo, aby jej pole wypeniao
wyspecyfikowany obszar. Znieksztacenia nie wystpuj, lecz moliwe jest przycicie
pola. Proporcje rozmiarw zostaj zachowane.
exactfit w tym przypadku film jest wywietlany bez zachowania relacji proporcji.
Naley si liczy z moliwoci znieksztace.

WIDTH

Warto: liczba w pikselach (np. 240px) lub procentach okna przegldarki (np. 300%)
Nazwa zmiennej opisujcej szablon: $WI
Ten parametr okrela szeroko pola sekwencji wideo. Jeli jego warto bdzie inna ni
zdefiniowana w pliku Flash, mog pojawi si znieksztacenia.

WMODE

Warto: Window, Opaque, Transparent

Nazwa zmiennej opisujcej szablon: $WM
Ten parametr pozwala skonfigurowa to sekwencji wideo jako przeroczyste. Pozwala
take skorzysta z pozycjonowania bezwzgldnego oraz moliwoci udostpnianych
przez warstwy i dostpnych w przegldarkach Internet Explorer w wersjach 4.0
i wyszych. Pamitaj, e jest on obsugiwany 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 umoliwia odsonicie ta strony HTML. Opcja ta moe znacznie
spowolni odtwarzanie.
Wartoci domyln jest Window.

  K   ! "

%$

Jeli chcesz nada nagwkom wygld porywajcy i odbiegajcy od standardw stosowanych powszechnie na stronach WWW, moesz skorzysta z nowej w programie Dreamweaver 4 opcji, pozwalajcej wstawia tekst programu Flash.
Aby wstawi taki tekst, wybierz pozycj Flash Text z menu podrzdnego Interactive
Images menu Insert. Moesz take skorzysta z ikony Insert Flash Text na palecie
obiektw.
Zanim zabierzesz si do tego, naley Ci si jedno wyjanienie. Przy kadym wyjciu
z okna Insert Flash Text, bdzie tworzony plik .swf. Plik ten jest sekwencj filmow
programu Flash o jednej klatce.
W jednym pliku .swf mona umieci do 1 024 znakw. Z tego wzgldu tekst programu
Flash bardziej nadaje si do tworzenia nagwkw, ni do tekstu podstawowego.
Niewtpliwie spodoba Ci si to, e bdziesz mia peny dostp do czcionek na dysku
twardym komputera. Utworzony tekst zostanie przekonwertowany do postaci wektorowej, nie musisz si wic obawia umieszczania informacji o czcionkach na serwerze.
Dodatkowa zaleta tekstu programu Flash to jego skalowalno i moliwo edycji
w programie Dreamweaver.


   
W tym wiczeniu przygotujesz banner, na ktrym umiecisz tekst programu Flash. Nastpnie zdefiniujesz poczenie, ktre poczy tekst z plikiem utworzonym w wiczeniu 18.1.
Oprzyj si na pliku o nazwie banner.html, ktry znajdziesz w folderze ch18, znajdujcym si na dysku CD, doczonym do ksiki. Musisz zapisa ten plik na swoim dysku
twardym (najlepiej zapisz cay folder). Jeli tego nie zrobisz, w fazie tworzenia tekstu
mog pojawi si problemy. Efekt kocowy pokazany jest w pliku banner_done.html.
Odwoaj si do tego pliku, jeli wykonanie wiczenia sprawi Ci kopot.



Otwrz plik banner.html. Zawiera on tabel o dwch wierszach. W tym

wiczeniu zajmiemy si tylko grnym wierszem. Na razie wic zignoruj wiersz
dolny wrcimy do niego w wiczeniu 18.3.



Umie punkt wstawiania w grnym wierszu tabeli. Wybierz pozycj Flash Text
z menu podrzdnego Interactive Images menu Insert. Wywietlone zostanie okno
dialogowe Insert Flash Text (patrz rysunek 18.9).



Wpisz w polu tekstowym Text tre komunikatu. Z listy Font wybierz krj
czcionki, a w polu Size wpisz jej rozmiar. Dobierz tak kombinacj, aby tekst
wypeni ca szeroko ekranu. W przykadzie zastosowano czcionk Arial
o rozmiarze 40.



Wywietl palet kolorw tekstu, klikajc przycisk obok pola Color. Wybierz
z palety kolor biay (#FFFFFF). Wybierz teraz kolor, ktry zastosujesz do tekstu,
gdy wskanik myszki zostanie umieszczony nad tekstem rozwi palet
Rollover Color i wybierz kolor ty.



&


K    



W oknie
Insert Flash Text
pobierz prbnikiem
kolor ta



Zdefiniuj teraz kolor ta, na jakim tekst zostanie wywietlony. Jeli pominiesz
ten etap, pozostanie kolor domylny biay, co sprawi, e tekst nie bdzie
widoczny. Kliknij przycisk obok pola Bg Color i pobierz prbnikiem kolor ta
dokumentu programu Dreamweaver (patrz rysunek 18.9). Gdy na pasku palety
kolorw pojawi si szesnastkowy kod koloru #333333, kliknij myszk, aby
przypisa kolor.



Nacinij przycisk Browse, obok pola tekstowego Link, i wybierz plik o nazwie
storm.html, nad ktrym pracowae w wiczeniu 18.1. Nastpnie rozwi menu
Target i wybierz z niego pozycj _self. Okrela ona miejsce wywietlenia pliku.



Zwr uwag na zawarto pola Save As. Przy zamkniciu okna dialogowego
Insert Flash Text na dysku twardym komputera zostanie zapisany plik .swf
(Shockwave Flash). Przycisk Browse umoliwia wskazanie miejsca zapisania
pliku. Moesz take zastpi domyln nazw wasn.

Nacinij przycisk Apply, aby zobaczy wygld tekstu w dokumencie, bez zamykania
okna dialogowego. Wprowad dodatkowe zmiany i zatwierd je, naciskajc OK.

Twj tekst programu Flash pojawi si w dokumencie jako obiekt. Zwr uwag,
e po zaznaczeniu obiektu pojedynczym klikniciem, inspektor Property
(Ctrl+F3) prezentuje waciwoci tekstu. Nie prbuj zmienia szerokoci
i wysokoci tekstu programu Flash z poziomu inspektora Property (mogoby
to spowodowa pogorszenie jakoci obrazu). Jeli konieczna okae si edycja
tekstu, kliknij przycisk Edit, aby powrci do okna dialogowego Insert Flash
Text (jeli jednak zmienisz rozmiary tekstu w inspektorze Property, skorzystaj
z przycisku Reset Size, aby odwiey obraz). Rysunek 18.10 prezentuje
ustawienia inspektora Property dla tekstu programu Flash.

  K   ! "




 
Testowanie
tekstu programu
Flash za pomoc
opcji inspektora
Property



Sprawd, czy tekst programu Flash jest nadal zaznaczony i kliknij w inspektorze
Property przycisk Play. Uaktywni to funkcj zmiany koloru tekstu przy przesuwaniu
nad nim wskanika myszki. Przesu wskanik myszki nad tekstem i zobacz, jak
funkcja dziaa (patrz rysunek 18.10).



Nacinij przycisk Stop. Nastpnie zapisz plik i wywietl w oknie przegldarki.

Tekst powinien stanowi poczenie do pliku storm.html.

Take nowoci w programie Dreamweaver 4 s przyciski programu Flash. Mona je

wstawia do dokumentu, wybierajc pozycj Flash Button w menu podrzdnym Interactive Images menu Insert lub klikajc ikon Insert Flash Button na palecie obiektw
(patrz rysunek 18.11).
Dreamweaver udostpnia zestaw przyciskw w oknie dialogowym Insert Flash Button.
Pliki te s ulokowane w folderach Dreamweaver\Configuration\Flash Objects\Flash Buttons i Flash Text. Wszystkie nowe przyciski, a wic te, ktre przygotujesz w programie
Flash i wyeksportujesz jako pliki .swf take powinny by umieszczane w tym samym
miejscu.
Edycja tekstu programu Flash
Utworzony tekst programu Flash mona modyfikowa, zaznaczajc obiekt tekstowy w dokumencie i klikajc przycisk Edit w inspektorze Property.
Moe si zdarzy, e po wprowadzeniu zmian zauwaysz utrat jakoci obrazu. Tekst moe si
na przykad wydawa nacignity lub za bardzo stoczony. W takim przypadku otwrz inspektora
Property (Ctrl+F3) i kliknij przycisk Play, aby odwiey rozmiar tekstu. Znieksztacenie znw si
pojawi, gdy naciniesz przycisk Stop, lecz jeli zapiszesz plik i ponownie go otworzysz, tekst bdzie si ju prezentowa bez zarzutu.






K    


 
Ikona
Insert Flash Button
na palecie obiektw

Jeli na temat tworzenia szablonw przyciskw Flash chcesz si dowiedzie nieco wicej, przejrzyj elektroniczny podrcznik dostpny w witrynie macromedia.com. Znajdziesz go w sekcjach Dreamweaver Support lub Flash Support pod hasem Using
Button Templates with Dreamweaver.
Podobnie jak tekst programu Flash, przyciski s take plikami .swf, ktre zostay zapisane na dysku twardym komputera. Kademu przyciskowi odpowiada osobny plik. Przy
publikacji witryny nie zapomnij o umieszczeniu plikw .swf na serwerze wraz z dokumentem HTML.
Podstawowa przewaga przyciskw programu Flash nad przyciskami .JPG i .GIF wie
si z moliwoci ich animowania i skalowania. Dodatkowy atut, to bardzo niewielkie
rozmiary plikw.


   
W tym wiczeniu, w dokumencie, nad ktrym pracowae w wiczeniu 18.2, utworzysz
kilka przyciskw programu Flash. Przyciski bd stanowiy poczenia prowadzce do
nastpujcych plikw z foldera ch18: rain.swf, bolt.swf, thunder.swf i wind.swf. Wszystkie
te pliki .swf zawieraj sekwencje dwikowe, a poniewa nie s osadzone w pliku HTML,
wybranie odpowiadajcego im poczenia spowoduje otwarcie pustego okna przegldarki. Jeli chcesz, moesz rozbudowa to wiczenie o etap osadzenia dwikowych
plikw .swf w dokumencie HTML.



Otwrz w oknie programu Dreamweaver dokument banner.html, ktry

przygotowae w wiczeniu 18.2. Plik ten znajduje si w folderze ch18. Przyciski
programu Flash zostan wstawione do tabeli zagniedonej w dolnym wierszu
tabeli, a wic pod bannerem. Zacznij od umieszczenia punktu wstawiania przy
lewej krawdzi komrki.



Aby wywietli okno dialogowe Insert Flash Button, wybierz pozycj Flash
Button z menu podrzdnego Interactive Images menu Insert (patrz rysunek 18.12).
Wybierz z listy przewijanej Style styl przycisku (w przykadzie wybrano Soft-

  K   ! "

%

Raspberry) i wpisz w polu Button Text tekst, ktry ma si pojawi na przycisku.

Wska na licie Font stosowany krj czcionki, a w polu Size wpisz jej rozmiar
(w przykadzie jest to Verdana o rozmiarze 12). W polu Link podaj ulokowanie
pliku (w tym przypadku pliku rain.swf z folderu ch18).


 
Okno dialogowe
Insert Flash Button



W polu Bg Color podaj kod koloru ta tu chcemy, aby kolor ta by identyczny

z kolorem ta strony (#333333). Kliknij przycisk Bg Color i pobierz prbnikiem
prbk koloru ta dokumentu.



Dreamweaver automatycznie przypisze nazw Twojemu przyciskowi. Pojawi si

ona w polu Save As i bdzie miaa rozszerzenie .swf. Jeli chcesz zmieni t
nazw, moesz to zrobi, dopki rozszerzenie pisane jest maymi literami.
Pamitaj take, e plik zawierajcy przycisk musi by zapisany w tym samym
katalogu, co plik .swf, do ktrego prowadzi poczenie.



Nacinij przycisk Apply, aby zobaczy, jak przycisk prezentuje si w dokumencie.

Jeli zadawala Ci jego wygld, kliknij OK, aby opuci okno dialogowe Insert
Flash Button.



Powtrz kroki 2 5 dla pozostaych trzech przyciskw: Lightning, Thunder

i Wind, umieszczajc kady z nich w osobnej komrce tabeli. Pierwszy przycisk
pocz z plikiem bolt.swf, drugi z plikiem thunder.swf, a trzeci z plikiem
wind.swf. Rysunek 18.13 pokazuje efekt kocowy.



Przyciski pojawi si w dokumencie jako odrbne obiekty w przypisanych im

komrkach tabeli. W inspektorze Property (otwrz go, korzystajc ze skrtu
Ctrl+F3) moesz klikn przycisk Play, aby uaktywni ich funkcj. Aby usysze
dwiki, z ktrymi przyciski s stowarzyszone, zapisz plik w folderze ch18, ktry
przeniose na swj dysk twardy i otwrz w przegldarce.

Plik buttons_done.html z foldera storm, znajdujcego si na dysku CD, doczonym

do ksiki zawiera ukoczon wersj tego wiczenia. Skorzystaj z niego, jeli
wykonanie wiczenia sprawi Ci trudno.




K    


 
Cztery przyciski
programu Flash
umieszczone
w dokumencie

Flash czy Dr Frankenstein?

To nie jest prawdziwe, to tylko wygenerowana komputerowo fantazja. ostrzega ostrzyony
na Irokeza punk, ktry przedstawia rozwizanie Virtual Host gociom witryny oddcast.com (zobacz rysunek 18.14).


 
Odwied; witryn
www.oddcast.com
spotkasz tu
wirtualnego
gospodarza
(program
Virtual Host)
lub bdziesz mg
pobawi si
narzdziem
wizualizacji
muzyki Beat
Sensor

Komputerowy terapeuta to chyba lepsze okrelenie dla systemu Virtual Host, zaprojektowanego
i wykonanego w oddcast.com, firmie z Nowego Jorku, zajmujcej si projektowaniem stron
WWW. Interfejs programu skada si z animowanego ludzkiego tuowia umieszczonego w centrum bajecznie kolorowego panelu. Pe, kolor oczu, wosw, ubranie, biuteri, fryzur i okulary
mona samemu wybra z zestawu propozycji, co daje nieskoDczon liczb kombinacji.

  K   ! "

'

W swoim poprzednim wcieleniu Wirtualny Gospodarz by kobiet o imieniu K. Mnstwo ludzi pisao listy miosne. Niektrzy fani wpadli w ma obsesj, co jak mniemam, oznacza, e iluzja zadziaaa, lecz na szczcie nie byo to straszne. mwi Chris Dixon, jeden z twrcw programu.
Dixon pracuje nad tym projektem od samego pocztku. Zaczo si od eksperymentu, jaki
przeprowadzilimy, aby sprawdzi, czy moemy na pocztek wzi prosty obraz twarzy i animowa go tak, by wyglda jakby posta mwia i ruszaa si. mwi Dixon. Potem cigle dodawalimy rne rzeczy. Na koniec wprowadzilimy porzdn synchronizacj ust i umoliwilimy
uytkownikom dostosowywanie ich. Lecz zaczo si naprawd, gdy jeden z naszych wspaniaych
projektantw, James Salanitri, zmieni nieco wygld postaci i doda par dodatkowych elementw, dziki ktrym staa si ona zabawna.
Dixon korzysta z programu Flash od wersji 2. i jest optymist, jeli chodzi o moliwo przeksztacenia Internetu w animowane, interaktywne rodowisko. Myl, e wszechobecno moduu dodatkowego oraz wiksza stabilno i szersze moliwoci przyszych wersji programu, s
szans na przycignicie do Flasha powanych programistw i uczynienie z niego standardu dla
wszelkiego oprogramowania opartego o przegldarki sieciowe. mwi Dixon. Na przykad
dziki wyposaeniu programu Flash 5 w obsug nowatorskiego, bezporedniego poczenia
XML, ludzie otrzymali moliwo tworzenia eksperymentalnych, dziaajcych w czasie rzeczywistym gier sieciowych. Mona sobie nawet wyobrazi szerokie wykorzystanie programu do zadaD
cakiem powanych, takich jak graficzna prezentacja notowaD giedowych na bieco..
W oddcast.com Dixon i jego wsppracownicy korzystaj z Flasha, aby tworzy przycigajce
uwag i nagradzane witryny, ktre, jak twierdzi Dixon, prezentuj si wspaniale, maj rozbudowane moliwoci i nadal dobrze dziaaj z modemami 56 K. Proponujemy uytkownikom program, ktry pozwala tworzy teledyski i inny program, ktry daje moliwo interakcji z moduem
wizualizujcym pliki dwikowe w formacie MP3.. Obecnie w firmie trwaj prace nad sieciow
gr Karaoke.
Tym, ktrzy chc si nauczy korzystania z programu Flash, Dixon daje tak oto rad: Myl, e
Flash to masa zabawy i wymaga odpowiednio lekkiego podejcia. Jeli tylko przywykniesz do
wektorowego stylu i jzyka programowania, przekonasz si, e jest to wspaniae narzdzie eksperymentowania i pracy. Radzibym zdoby dobr ksik, lecz przede wszystkim studiowa
efekty pracy innych ludzi a wic pliki rdowe .fla, ktrych mnstwo znajdziesz w witrynach
takich jak www.flashkit.com..

W tym rozdziale skupilimy si na integracji programw Flash i Dreamweaver w celu

oywienia Twojej witryny i przyspieszenia jej dziaania. Flash staje si coraz bardziej
popularny gwnie dlatego, e umoliwia przeskalowywanie grafiki wektorowej tak, by
zajmowaa cae okno przegldarki, niezalenie od jego rozmiarw. Rozmiary plikw
grafiki wektorowej s przy tym bardzo niewielkie, dziki czemu czasy adowania s
krtkie. Sekwencje wideo programu Flash mog take zawiera obrazy rastrowe, co
z kolei wydua czas odtwarzania.
W programie Dreamweaver mona wstawia sekwencje wideo programu Flash i konfigurowa ich waciwoci, korzystajc z inspektora Property. Mona take przypisa sekwencji behawior, ktry pozwoli uytkownikom kontrolowa odtwarzanie. Wrd innych funkcji programu Flash, dostpnych w programie Dreamweaver, naley wymieni
moliwo tworzenia i edycji tekstu oraz przyciskw programu Flash. Chocia Dreamweaver udostpnia szereg przyciskw programu Flash, moesz take tworzy wasne,
zapisywa je jako pliki .swt, a nastpnie importowa do programu Dreamweaver.