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

Wydawnictwo Helion
ul. Kociuszki 1c
44-100 Gliwice
tel. 032 230 98 63
e-mail: helion@helion.pl

Macromedia Studio 8.
Oficjalny podrcznik
Autorzy: Shaowen Bardzell, Jeffrey Bardzell
Tumaczenie: Pawe Kita, Tomasz Kozowski, Marcin Rog
ISBN: 83-246-0308-5
Tytu oryginau: Macromedia Studio 8:
Training from the Source
Format: B5, stron: 480
Polecane przez firm Macromedia rdo informacji o pakiecie Macromedia Studio 8
Zaprojektuj witryn WWW za pomoc Fireworks
Napisz, korzystajc z Dreamweavera, kod HTML zgodny ze standardami
Dodaj elementy interaktywne we Flashu
Uyj ColdFusion do utworzenia logiki biznesowej oraz poczenia strony
z baz danych
Macromedia Studio 8 to wszechstronny pakiet przeznaczony dla twrcw witryn
i aplikacji WWW. Za pomoc wchodzcych w jego skad aplikacji mona kompleksowo
zrealizowa projekt nawet najbardziej skomplikowanego serwisu internetowego.
Dziki perfekcyjnej integracji elementw pakietu przygotowanie projektu graficznego
w Fireworks, kodu HTML w Dreamweaverze, elementw interaktywnych we Flashu
i elementw generowanych dynamicznie w ColdFusion to jeden, pynnie
przebiegajcy proces.
Dziki ksice Macromedia Studio 8. Oficjalny podrcznik poznasz narzdzia zawarte
w tym pakiecie i nauczysz si wykorzystywa je, projektujc witryny i aplikacje
internetowe. Przygotowany wsplnie z dziaem pomocy technicznej firmy Macromedia
poradnik bdzie dla Ciebie doskonaym rdem wiedzy o Fireworks, Dreamweaverze,
Flashu, Contribute i ColdFusion. Realizujc kolejne wiczenia, zaprojektujesz statyczn
witryn WWW i dodasz do niej elementy dynamiczne oraz interaktywne. Zapoznasz si
z moliwociami poszczeglnych skadnikw Macromedia Studio 8 i dowiesz si, na
ktrym etapie procesu produkcji witryny WWW s one przydatne.
Przygotowanie projektu graficznego witryny
Optymalizacja i eksport grafiki
Import kodu wygenerowanego przez Fireworks do Dreamweavera
Tworzenie szablonu strony
Definiowanie stylw CSS
Budowanie animacji i elementw interaktywnych we Flashu
Korzystanie z cyfrowego wideo w filmach Flasha
Integracja witryny WWW z baz danych
czenie prezentacji we Flashu ze skryptami ColdFusion
Aktualizacja treci witryny za pomoc Contribute
Skorzystaj z najlepszego rda wiedzy i przekonaj si,
jak Macromedia Studio moe usprawni Twoj prac

Spis treci
Wstp ................................................................................................................................................................................................... 11

Projekt 1. Strona internetowa Jade Valley

Cz I Fireworks ....................................................................................................................................17
Lekcja 1. Przygotowanie grafiki .............................................................................................................................................. 19
Rysowanie ksztatw logo ........................................................................................................................................20
Dodawanie kolorw i tekstur ...................................................................................................................................28
Dodawanie tekstu ......................................................................................................................................................32
Monta z uyciem fotografii cyfrowych ................................................................................................................ 35
Dodawanie tekstu ......................................................................................................................................................39
Dodawanie efektw tekstowych ..............................................................................................................................42
Czego si nauczye? ..................................................................................................................................................44

Lekcja 2. Projektowanie interfejsu strony ......................................................................................................................... 45

Tworzenie przyciskw ...............................................................................................................................................47
Tworzenie stanu Over dla przycisku .......................................................................................................................54
Wykorzystanie biblioteki .........................................................................................................................................58
Tworzenie banera dla strony ....................................................................................................................................62
Dopracowanie projektu strony ................................................................................................................................ 63
Tworzenie schematu cicia strony internetowej ....................................................................................................67
Zwikszanie poziomu dostpnoci strony .............................................................................................................70
Czego si nauczye? ..................................................................................................................................................72

Lekcja 3. Eksportowanie projektu strony .......................................................................................................................... 73

Optymalizacja logo ...................................................................................................................................................75
Optymalizacja paska nawigacji ................................................................................................................................82
Eksport ci Fireworks jako warstw CSS ................................................................................................................86
Eksport ci programu Fireworks jako tabel .........................................................................................................89
Czego si nauczye? ..................................................................................................................................................94

SPIS TRECI

Cz II Dreamweaver ..........................................................................................................................95
Lekcja 4. Przygotowanie nowej strony ................................................................................................................................ 97
Definiowanie strony statycznej w Dreamweaver ...................................................................................................99
Tworzenie nowej strony HTML ............................................................................................................................ 104
Importowanie kodu HTML Fireworks do Dreamweaver .................................................................................. 109
Tworzenie warstw CSS w Dreamweaver ............................................................................................................... 112
Dodawanie tekstu zastpczego ...............................................................................................................................115
Dodawanie stopki oraz podstawowej nawigacji .................................................................................................. 119
Wstawianie obrazw ............................................................................................................................................... 122
Czego si nauczye? ................................................................................................................................................ 125

Lekcja 5. Tworzenie szablonu strony ................................................................................................................................ 127

Wprowadzenie do kaskadowych arkuszy stylw (CSS) ...................................................................................... 129
Przedefiniowanie znacznikw HTML ...................................................................................................................131
Dodawanie wasnych klas ....................................................................................................................................... 135
Stosowanie stylw CSS ............................................................................................................................................ 136
Finalizowanie rozmieszczenia ............................................................................................................................... 140
Rozszerzanie dostpnoci witryny ........................................................................................................................ 147
Konwertowanie strony do szablonu Dreamweaver ............................................................................................ 150
Wyznaczanie obszarw edytowalnych ..................................................................................................................151
Czego si nauczye? ................................................................................................................................................ 155

Lekcja 6. Tworzenie zawartoci strony ............................................................................................................................. 157

Tworzenie strony za pomoc szablonu ................................................................................................................ 159
Dodawanie odnonikw ......................................................................................................................................... 164
Praca z tabelami ....................................................................................................................................................... 166
Wstawianie i wyrwnywanie grafiki ...................................................................................................................... 170
Tworzenie elementw list ....................................................................................................................................... 175
Koczenie prac nad stron recipes.htm ............................................................................................................... 176
Modyfikacja szablonw .......................................................................................................................................... 179
Czego si nauczye? ................................................................................................................................................ 181

Cz III Flash .......................................................................................................................................183

Lekcja 7. Tworzenie filmu Flasha ........................................................................................................................................ 185
Obszar roboczy programu Flash ........................................................................................................................... 186
Wprowadzenie do architektury Flasha ................................................................................................................. 188
Przygotowywanie sceny .......................................................................................................................................... 189
Praca z listw czasu .................................................................................................................................................. 190
Ustalanie dugoci filmu za pomoc klatek statycznych ................................................................................... 194
Tworzenie struktury czasowej za pomoc klatek kluczowych i etykiet ............................................................ 195
6

Macromedia Studio 8.
Oficjalny podrcznik

Dodawanie treci w poprzek warstw ..................................................................................................................... 197

Importowanie grafiki w formacie mapy bitowej .................................................................................................200
Przygotowywanie drugiego i trzeciego ekranu .................................................................................................... 201
Praca z bibliotek .....................................................................................................................................................204
Koczenie podstawowego ukadu elementw .....................................................................................................205
Dodawanie treci drugiego ekranu ........................................................................................................................206
Projektowanie grafiki przycisku ............................................................................................................................208
Dodawanie zawartoci trzeciego ekranu .............................................................................................................. 211
Konwertowanie istniejcej grafiki na symbole .................................................................................................... 214
Czego si nauczye? ................................................................................................................................................ 217

Lekcja 8. Tworzenie animacji i dodawanie interaktywnoci ................................................................................. 219

Testowanie filmw Flasha ...................................................................................................................................... 221
Animowanie elementw .........................................................................................................................................223
Tworzenie efektu zanikania i pojawiania si grafiki ...........................................................................................226
Dodawanie interaktywnoci do filmu Flasha ......................................................................................................229
Dodawanie efektu po najechaniu kursorem na przycisk ...................................................................................236
Publikowanie filmu Flasha ....................................................................................................................................240
Czego si nauczye? ................................................................................................................................................243

Lekcja 9. Wideo w filmach Flasha ....................................................................................................................................... 245

Przygotowywanie filmu ..........................................................................................................................................246
Konwersja wideo do formatu FLV ........................................................................................................................248
Publikowanie wideo we Flashu ..............................................................................................................................256
Czego si nauczye? ................................................................................................................................................259

Projekt 2. Wykad o Dantem

Cz IV Dreamweaver i Flash .......................................................................................................261
Lekcja 10. Przygotowywanie witryny Dante ................................................................................................................. 263
Definiowanie witryny Dante .................................................................................................................................265
Tworzenie stron zastpczych .................................................................................................................................267
Formatowanie strony gwnej ...............................................................................................................................270
Czego si nauczye? ................................................................................................................................................277

Lekcja 11. Nieliniowa interakcja z wykorzystaniem technologii Flash ............................................................ 279

Interaktywna mapa Pieka Dantego ......................................................................................................................280
Poznaj obiekty Flasha .............................................................................................................................................282
Programowanie przycisku Down ..........................................................................................................................285
Przygotowania do interakcji typu quicktip .........................................................................................................287
Przygotowywanie aktywnego pola niewidocznego przycisku ...........................................................................289
SPIS TRECI

Przygotowywanie klipu filmowego quicktip oraz dynamicznego pola tekstowego ......................................292

Tworzenie skryptu dla interakcji typu quicktip ..................................................................................................295
Wykorzystanie komponentu do utworzenia przewijalnego obszaru tekstu ...................................................304
Dynamiczne umieszczanie tekstu w obszarze tekstowym .................................................................................306
Czego si nauczye? ................................................................................................................................................ 310

Lekcja 12. Interakcje z wykorzystaniem techniki przecignij i upu ............................................................... 311

Przecignij i upu ................................................................................................................................................... 312
Tworzenie podstawowej interaktywnoci typu przecignij i upu .................................................................. 314
Tworzenie celw dla upuszczania obiektw ........................................................................................................ 317
Dynamiczne dostarczanie informacji zwrotnych ............................................................................................... 321
Dodawanie pocztkowego celu .............................................................................................................................325
Umoliwianie przecigania pozostaych potworw ...........................................................................................327
Publikowanie interaktywnej mapy w witrynie Dante ......................................................................................... 331
Czego si nauczye? ................................................................................................................................................ 333

Cz V Dreamweaver i ColdFusion ...........................................................................................337

Lekcja 13. Witryny z danymi dynamicznymi ................................................................................................................ 339
Planowanie aplikacji internetowej ........................................................................................................................ 341
Zrozumie wymagania definiowania witryny .....................................................................................................348
Instalacja ColdFusion .............................................................................................................................................350
Problemy i sposoby ich obejcia dla uytkownikw bez serwerw lokalnych ................................................352
Definiowanie witryny ............................................................................................................................................. 353
Przesyanie danych midzy stronami ...................................................................................................................358
Czego si nauczye? ................................................................................................................................................367

Lekcja 14. Tworzenie pocze ze rdami danych ................................................................................................. 369

Zrozumie bazy danych ..........................................................................................................................................370
Zrozumie DSN .......................................................................................................................................................372
Definiowanie rda danych w ColdFusion Administrator ............................................................................. 373
Poznaj polecenia SQL ............................................................................................................................................. 381
Dynamiczne umieszczanie danych w tabeli ........................................................................................................387
Czego si nauczye? ................................................................................................................................................ 393

Cz VI Flash i ColdFusion ...........................................................................................................395

Lekcja 15. Quiz oparty na komponentach Flasha ..................................................................................................... 397
Przygotowywanie filmu ..........................................................................................................................................399
Dynamiczne wywietlanie nazwy uytkownika .................................................................................................. 401
Przygotowywanie stron ColdFusion .....................................................................................................................402
Tworzenie interfejsu quizu z komponentw .......................................................................................................409
8

Macromedia Studio 8.
Oficjalny podrcznik

Tworzenie skryptu dla pierwszego pytania .......................................................................................................... 413

Walidacja danych komponentu ............................................................................................................................ 415
Obliczanie wyniku quizu ....................................................................................................................................... 417
Dodawanie komponentu ComboBox i tworzenie dla niego skryptu .............................................................. 421
Dodawanie komponentu List i tworzenie dla niego skryptu ............................................................................425
Czego si nauczye? ................................................................................................................................................429

Lekcja 16. Flash, ColdFusion i baza danych ................................................................................................................. 431

Przesyanie danych z Flasha do ColdFusion ....................................................................................................... 433
Wywietlanie danych na stronach HTML ...........................................................................................................435
Wstawianie danych do bazy danych .....................................................................................................................437
Zwikszanie bezpieczestwa aplikacji ..................................................................................................................440
Czego si nauczye? ................................................................................................................................................447

Lekcja 17. Decentralizacja z Contribute ......................................................................................................................... 449

Konfigurowanie witryny w Dreamweaver dla administratora witryny Contribute ......................................450
Przesyanie kluczy poczenia do uytkownikw Contribute ..........................................................................455
Tworzenie poczenia w Contribute .....................................................................................................................458
Wykonywanie prostych zada edycyjnych w Contribute ..................................................................................460
Publikowanie szkicu i przegldanie dokonanych zmian ...................................................................................463
Czego si nauczye? ................................................................................................................................................463

Skorowidz ....................................................................................................................................................................................... 465

SPIS TRECI

10

Przygotowywanie
witryny Dante

Niniejsza lekcja stanowi punkt zwrotny w ksice. Dotychczas pracowae nad witryn Jade Valley,
uczc si integracji Macromedia Fireworks, Macromedia Dreamweaver i Macromedia Flash podczas tworzenia atrakcyjnie wygldajcej witryny. Z drugiej czci tej pozycji dowiesz si, jak tworzy
witryny, ktre co robi. Bdziesz tworzy filmy Flasha ze zoonymi interaktywnymi interfejsami.
Okieznasz moc Macromedia ColdFusion, aby umoliwi interakcj stron WWW z bazami danych
i wywietla dane na ywo, pobiera dane od uytkownikw za pomoc formularzy i zapisywa je
do bazy danych. W lekcjach 15., Quiz oparty na komponentach Flasha, i 16., Flash, ColdFusion
i baza danych, poczysz te wiadomoci i w technologii Flash utworzysz quiz, ktrego dane bd
przesyane do bazy danych.

W tej lekcji skonfigurujesz witryn Dante i utworzysz stron gwn

LEKCJA 10.
Przygotowywanie witryny Dante

263

Projekt, ktry ukoczysz, jest pomylany jako materia pomocniczy do zaj na temat redniowiecznego poety Dantego. Utworzysz interaktywn map jego Pieka, opis ludzi i miejsc. Uytkownicy bd mogli klika rne elementy mapy, aby uzyska na ich temat wicej informacji,
a nawet bd mogli zagra w gr z wykorzystaniem mechanizmu przecignij i upu. Utworzysz
take stron z podstawowymi informacjami o wszystkich uczestnikach zaj.
Podczas tej lekcji przygotujesz projekt, czyli zdefiniujesz now witryn w programie Dreamweaver,
oraz za pomoc dostarczonego szablonu utworzysz wszystkie strony, ktre wejd w skad witryny.
W dalszej czci ksiki umiecisz na tych stronach waciw tre. Na razie przygotowujesz si jedynie
na to, co ma nadej.

Czego si nauczysz?
W tej lekcji:
zdefiniujesz witryn Dante;
utworzysz kilka stron zastpczych na podstawie szablonu programu Dreamweaver;
sformatujesz tekst i wstawisz obraz, aby utworzy gwn stron witryny;
zapoznasz si z planem witryny.

Przybliony czas trwania lekcji

Ukoczenie tej lekcji zajmie Ci w przyblieniu p godziny.

Potrzebne pliki:
Pliki pocztkowe:
Lekcja10/Start/dante/Templates/dante_template.dwt
Gotowe pliki:
Lekcja10/Complete/dante/dante_admin.html
Lekcja10/Complete/dante/dante_map.html
Lekcja10/Complete/dante/dante_quiz_login.html
Lekcja10/Complete/dante/dante_quiz_questions.html
Lekcja10/Complete/dante/dante_quiz_results.html
Lekcja10/Complete/dante/index.html

264

Projekt 2.
Wykad o Dantem

Definiowanie witryny Dante

W tym zadaniu skopiujesz pliki z doczonego do ksiki dysku CD-ROM na dysk twardy oraz
zdefiniujesz witryn w programie Dreamweaver.
1. Skopiuj na twardy dysk cay katalog dante z katalogu Lekcja10/Start.

Moesz umieci ten katalog na pulpicie w katalogu Documents bd Sites (Mac OS), Moje
Dokumenty (Windows) lub gdziekolwiek indziej, pod warunkiem e bdziesz pamita gdzie.
2. Uruchom program Dreamweaver. Wybierz Site/Manage Sites. Kliknij przycisk New i wybierz Site.

Zostanie otwarte okno dialogowe Site Definition.

W oknie powinna by aktywna zakadka Advanced, lecz jeeli tak nie jest, kliknij j,
aby wprowadzi ustawienia w trybie zaawansowanym.

LEKCJA 10.
Przygotowywanie witryny Dante

265

3. W kategorii Local Info wpisz dante jako nazw witryny. W polu Local root folder wska katalog

dante, ktry wanie skopiowae na twardy dysk.

Moesz zostawi domylne wartoci pozostaych opcji.

4. Kliknij OK, aby zakoczy definiowanie witryny. W oknie dialogowym Manage Sites kliknij Done.

Na razie definiujesz t witryn jako statyczn, poniewa nie konfigurujesz jej jeszcze
do pracy z ColdFusion czy baz danych. W lekcji 13. powrcisz do tego okna dialogowego,
aby skonfigurowa witryn tak, aby wykorzystywaa serwer ColdFusion.
W panelu Files znajduje si lista wszystkich plikw i katalogw witryny. Nie ma jeszcze plikw
HTML, ale w katalogu Templates znajduje si szablon, na podstawie ktrego utworzysz wszystkie
strony witryny. Ponadto w katalogu css znajduje si kaskadowy arkusz stylw, ktry zosta ju
powizany z szablonem.
266

Projekt 2.
Wykad o Dantem

Dwa katalogi nie bd bezporednio wykorzystywane przez witryn Fireworks Source i Text
Source. Katalog Fireworks Source zawiera plik PNG programu Fireworks, ktry stanowi makiet
witryny Dante. Zosta on doczony na wypadek, gdyby chcia si z nim zapozna. Katalog
Text Source zawiera tekst, ktry bdzie uywany w witrynie; zosta on doczony, aby nie musia
wpisywa wszystkiego samodzielnie.

Tworzenie stron zastpczych

Rni projektanci maj rne podejcie do tworzenia witryn. Niektrzy tworz i rozwijaj po kolei
kad stron, inni natomiast wol najpierw utworzy strony zastpcze, a nastpnie wrci i wypeni je treci. W tej lekcji skorzystamy z drugiego podejcia. Tworzenie stron zastpczych ma jedn
wan zalet umoliwia wykorzystanie narzdzi do zarzdzania witryn i odnonikami programu
Dreamweaver.
Ten proces jest nieco monotonny, poniewa bdziesz musia kilka razy wykonywa te same trzy
czynnoci: tworzy now stron na podstawie szablonu, zmienia tytu oraz nagwek strony i zapisywa plik.
1. Wybierz File/New. Kliknij zakadk Templates (patrz pierwszy rysunek na nastpnej stronie).

W kolumnie Templates for wybierz Site "dante", jeeli nie jest jeszcze wybrana. Upewnij si,
e wybrana jest pozycja dante_template, i zaznacz opcj Update page when template changes. Kliknij
przycisk Create.
Gdy skoczysz, pojawi si strona z dwoma edytowalnymi obszarami. Jeden obszar jest
przeznaczony na nagwek strony, ktry domylnie jest ustawiony na Home, za drugi
na gwn zawarto strony.
W rzeczywistoci na stronie znajduje si jeszcze trzeci obszar edytowalny, chocia nie mona go od razu
zobaczy. Element <title> w znaczniku <head> take jest edytowalny.

Zalety stosowania szablonw zostay wymienione w lekcji 5., Tworzenie szablonu strony.

LEKCJA 10.
Przygotowywanie witryny Dante

267

Elementy szablonu w oknie podgldu mog wydawa si nieprawidowo rozmieszczone. Moesz to

pomin.
2. W polu Title paska narzdzi Document zmie tytu strony na Dantes Inferno Home.

268

Projekt 2.
Wykad o Dantem

Pamitaj, e tytu nie jest wywietlany w treci dokumentu. Jest on pokazywany w pasku
tytuowym przegldarki i jest wykorzystywany przez wyszukiwarki. Stronom naley nadawa
opisowe tytuy.
Standardowo kolejnym krokiem byaby zmiana nagwka, ale jest on ju nazwany Home,
czyli tak jak chcemy.
3. Zapisz plik jako index.html i zamknij go.

W nastpnym zadaniu bdziesz jeszcze pracowa z t stron, ale na razie wystarczy, e ona
istnieje.
4. Powtrz kroki od 1. do 3., aby utworzy kolejnych pi stron. Posu si informacjami

z poniszej tabeli.
Nazwa pliku

Tytu i nagwek strony

dante_admin.html

Dantes Inferno: Admin

dante_map.html

Dantes Inferno: Interactive Map

dante_quiz_login.html

Dantes Inferno: Quiz Login

dante_quiz_questions.html

Dantes Inferno: Quiz Questions

dante_quiz_results.html

Dantes Inferno: Quiz Results

Na kadej z powyszych stron moesz pozostawi tekst zastpczy Body text goes here.
Poprawisz to pniej.

LEKCJA 10.
Przygotowywanie witryny Dante

269

Gdy zakoczysz ten etap, w panelu Files w gwnym katalogu witryny powinno by wywietlonych
sze plikw HTML.

Jak wspominaem wczeniej, ostateczna wersja tej witryny bdzie skadaa si z trzech czci:
interaktywnej mapy Pieka, czci administracyjnej, w ktrej uytkownicy bd mogli zobaczy
informacje o wszystkich uczestnikach zaj, oraz quizu. Widzisz teraz, jak te sze stron
odpowiada wymienionym czciom.

Formatowanie strony gwnej

Jeeli chodzi o panel Files i zarzdzanie witryn w programie Dreamweaver, to zakoczye juz prac
z witryn. W rzeczywistoci przed Tob jest jeszcze wiele pracy, a Dreamweaver sprawdza teraz wszystkie pliki, ktre bd wykorzystywane w dalszej czci projektu. Dziki temu bdziesz mg dodawa odnoniki za pomoc narzdzi programu Dreamweaver, jak np. Point to File (wska do pliku),
majc przy tym pewno, e wszystkie odnoniki bd poprawne.
W tym zadaniu utworzysz stron gwn, na ktrej bd znajdoway si odnoniki do trzech gwnych czci witryny.
1. Otwrz plik index.html, ktry przed chwil zapisae.

Na tym etapie index.html posiada jedynie tytu strony oraz tekst zastpczy Body text goes here.
2. W panelu Files kliknij dwukrotnie ikon folderu Text Source i otwrz plik index.txt.

W programie Dreamweaver zostanie otwarty zwyky dokument tekstowy (patrz rysunek

na nastpnej stronie).
3. Kliknij gdziekolwiek w tekcie i wybierz Edit/Select All, a nastpnie Edit/Copy. Zamknij plik

tekstowy i powr do pliku index.html. W czci widoku podzielonego, ktra zawiera projekt,
zaznacz Body text goes here i wybierz Edit/Paste Special. Wybierz Text with structure i kliknij OK.

270

Projekt 2.
Wykad o Dantem

Tekst zosta wklejony do dokumentu. Dreamweaver utworzy znacznik <p> (akapit) dla
kadego akapitu wklejanego tekstu (patrz pierwszy rysunek na nastpnej stronie). Jeeli
akapity nie zostay utworzone, kliknij na kocu kadego wiersza w widoku projektu
i nacinij Enter/ Return. Niektre akapity powinny waciwie by nagwkami, ale to s
dopiero pocztki.
4. W czci widoku podzielonego, ktra zawiera projekt, kliknij raz w kadym z poniszych

akapitw (patrz drugi rysunek na nastpnej stronie):

Admin,
Assignments,
Quiz.
Uyj listy rozwijanej Format panelu Properties, aby nada im format Heading 2.
Zastpie znacznik <p> otaczajcy kady z tych akapitw znacznikiem <h2>.
Kady z tych nagwkw jest szary, poniewa znacznik <h2> zosta w ten sposb
przedefiniowany za pomoc CSS. W dalszej czci przekonasz si, e wszystkie odnoniki
maj kolor czerwony, co rwnie zostao osignite dziki CSS.
5. Pozostajc wci w widoku projektu, zaznacz w gwnym tekcie strony pod nagwkiem

Admin sowo Admin i za pomoc panelu Properties utwrz odnonik do strony

dante_admin.html.

LEKCJA 10.
Przygotowywanie witryny Dante

271

272

Projekt 2.
Wykad o Dantem

Aby utworzy odnonik ze sowa Admin, moesz uy narzdzia Point to File panelu Properties,
moesz te przejrze swj dysk w jego poszukiwaniu, klikajc ikon folderu znajdujc si
obok pola Link, albo moesz samodzielnie wpisa t nazw.

6. Powtrz krok 5., aby utworzy odnoniki ze sw interactive tour (w czci Assignments)

do dante_map.html oraz ze sw take the Dante Quiz (z czci Quiz) do strony

dante_quiz_login.html (patrz pierwszy rysunek na nastpnej stronie).
Teraz strona gwna dziaa jako interfejs nawigacyjny.
Wci jednak naley wprowadzi kilka poprawek.
7. Zaznacz trzy ksiki znajdujce si w czci Readings i za pomoc panelu Properties utwrz

nieuporzdkowan list (ang. unordered list) (patrz drugi rysunek na nastpnej stronie).
Uywaj listy nieuporzdkowanej do tworzenia list bez adnego porzdku sortowania.
Kady element listy zostanie otoczony znacznikiem <li> (element listy), a wszystkie jej
elementy zostan umieszczone w znaczniku <ul> (lista nieuporzdkowana).
8. Za pomoc panelu Properties zastosuj czcionk pochy dla wymienionych tytuw ksiek:

LEKCJA 10.
Przygotowywanie witryny Dante

273

274

Projekt 2.
Wykad o Dantem

Inferno,
Inferno 2: Commentary,
Dante: The Divine Comedy.
Uyj znacznika <em> (wyrnienie), aby doda kursyw (patrz pierwszy rysunek na nastpnej
stronie).
W tej chwili brakuje nam tylko przycisku w wierszu zaczynajcym si od sw: To complete
the assignment w czci Assignments.
9. Ustaw kursor na kocu wiersza zaczynajcego si od sw: To complete the assignment

i nacinij klawisz Enter/Return.

Nad nagwkiem Quiz zostanie utworzony pusty akapit.
10. Z gwnego menu wybierz Insert/Image, przejd do katalogu z obrazami witryny i wstaw

get_flashplayer.gif.
11. Zostanie wywietlone okno dialogowe Image Tag Accessibility Attributes. W polu Alternate text
wpisz Download the Flash Player (patrz drugi rysunek na na nastpnej stronie).

Obraz pojawi si w dokumencie, jednak nie jest jeszcze od niego utworzony odnonik
do witryny firmy Macromedia, z ktrej uytkownik moe pobra Flash Playera (patrz trzeci
rysunek na nastpnej stronie).
12. Majc zaznaczony obraz, wpisz poniszy adres w polu Link panelu Properties:

http://www.macromedia.com/go/getflashplayer.
Poniewa ten odnonik wskazuje poza witryn Dante, musisz uy bezwzgldnego URL.
Jak wspominaem w lekcji 6., Tworzenie zawartoci strony, bezwzgldne adresy URL musz
by kompletne, tzn. musz zaczyna si od http:// i zawiera ca ciek do danego pliku
lub innego zasobu (patrz rysunek na stronie 277).
13. Zapisz i zamknij plik index.html.

Zakoczye przygotowywanie witryny. W kolejnych lekcjach dodasz kilka interesujcych

funkcji, korzystajc z technologii Flash i ColdFusion.
Gdy bdziesz projektowa strony w programie Dreamweaver, bdziesz powtarza zadania
z tej lekcji tak czsto, e stanie si to niemal automatyczne. Istot jest tu wykorzystywanie
elementw strony wielokrotnego uytku, a w szczeglnoci szablonw programu Dreamweaver
i stylw CSS. Umiejtnie wykorzystujc szablony i arkusze CSS, mona bardzo szybko
utworzy makiet nawet duej witryny.

LEKCJA 10.
Przygotowywanie witryny Dante

275

276

Projekt 2.
Wykad o Dantem

Czego si nauczye?
W tej lekcji:
zdefiniowae witryn Dante (strony 265 267);
uye szablonw programu Dreamweaver do utworzenia stron zastpczych dla wszystkich

stron wykorzystywanych w ostatecznej wersji witryny (strony 267 270);

utworzye i sformatowae elementy listy (strony 270 277);
sformatowae stron gwn (strony 270 276);
wstawie obraz z odnonikiem (strony 306 308).

LEKCJA 10.
Przygotowywanie witryny Dante

277