You are on page 1of 40

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. Chopina 6
44-100 Gliwice
tel. (32)230-98-63
e-mail: helion@helion.pl

Macromedia
Dreamweaver MX 2004.
Oficjalny podrcznik
Autor: Khristine Annwn Page
Tumaczenie: Mikoaj Szczepaniak
ISBN: 83-7361-536-9
Tytu oryginau: Macromedia Dreamweaver
MX 2004: Training from the Source
Format: B5, stron: 600
Macromedia Dreamweaver MX 2004 to kolejne wcielenie jednego z najpopularniejszych
edytorw stron WWW. Zarwno pocztkujcy, jak i najbardziej zaawansowani
projektanci witryn WWW doceniaj jego moliwoci. Dreamweavera mona uywa
w trakcie caego procesu tworzenia i utrzymania witryny WWW od zdefiniowania jej
struktury, poprzez tworzenie stron w trybie wizualnym i w trybie edycji kodu, a do
publikowania i aktualizacji witryny. Moliwo stosowania gotowych skryptw JavaScript
i komponentw umoliwiajcych tworzenie dynamicznych stron WWW, wsppraca
z innymi produktami firmy Macromedia oraz rozbudowane narzdzia edycyjne
Dreamweavera usprawniaj i przyspieszaj proces tworzenia witryny.
Macromedia Dreamweaver MX 2004. Oficjalny podrcznik to polecany przez firm
Macromedia zbir wicze, dziki ktrym poznasz moliwoci tej aplikacji. wiczenia
przygotowano przy wsppracy z pracownikami dziau obsugi technicznej firmy
Macromedia, co gwarantuje ich poprawno merytoryczn. Czytajc kolejne rozdziay
podrcznika, nauczysz si korzystania z narzdzi Dreamweavera, tworzenia
pojedynczych stron WWW i caych witryn, dodawania do stron elementw
interaktywnych i multimedialnych oraz umieszczania witryny na serwerze za pomoc
wbudowanego w Dreamweaver klienta FTP.
Definiowanie witryny lokalnej i zdalnej
Wprowadzanie i formatowanie tekstu
Umieszczanie na stronie elementw graficznych
Tworzenie mechanizmw nawigacyjnych
Wstawianie tabel do dokumentw
Korzystanie ze stylw, bibliotek i szablonw
Budowa stron opartych na ramkach
Tworzenie formularzy i elementw interaktywnych
Publikowanie i aktualizowanie witryny
Testowanie witryny
Gotowe skrypty behawiory
Edycja kodu rdowego stron WWW
Tworzenie animacji opartych na DHTML-u
Ksiki z serii Oficjalny podrcznik s wykorzystywane na kursach i szkoleniach
prowadzonych w autoryzowanych centrach szkoleniowych firmy Macromedia. Skorzystaj
z autoryzowanego rda wiedzy i poznaj moliwoci programu docenianego przez wielu
webmasterw.

Spis treci
Wprowadzenie .................................................................................................................................................................................. 13
Lekcja 1. Podstawy programu Dreamweaver MX 2004............................................................................................... 19
Poznawanie rodowiska pracy ..................................................................................................................................20
Strona pocztkowa..................................................................................................................................................... 21
Przygotowania do rozpoczcia pracy nad wasn witryn....................................................................................22
Definiowanie witryny lokalnej.................................................................................................................................24
Tworzenie i zapisywanie nowej strony .................................................................................................................... 31
Przegld dostpnych narzdzi .................................................................................................................................. 35
Praca z panelami......................................................................................................................................................... 38
Nadawanie tytuu stronie..........................................................................................................................................40
Okrelanie koloru ta................................................................................................................................................. 41
Okrelanie przegldarek internetowych dla podgldu ......................................................................................... 43

Lekcja 2. Dodawanie waciwej treci do strony WWW................................................................................................ 47


Podstawowe metody formatowania tekstu .............................................................................................................48
Tworzenie podziau wiersza...................................................................................................................................... 50
Ustawianie opcji tekstu.............................................................................................................................................. 51
Importowanie tekstu.................................................................................................................................................. 53
Wstawianie twardej spacji ......................................................................................................................................... 54
Wyrwnywanie i tworzenie wci w tekcie ............................................................................................................ 54
Tworzenie list.............................................................................................................................................................. 56
Tworzenie list definicji .............................................................................................................................................. 59
Zagniedanie list....................................................................................................................................................... 60
Formatowanie znakw .............................................................................................................................................. 61
Zmiana czcionki......................................................................................................................................................... 63
Zmiana rozmiaru czcionki ....................................................................................................................................... 66
Okrelanie koloru czcionki ...................................................................................................................................... 68
Dodawanie znakw specjalnych .............................................................................................................................. 71
Dodawanie poziomych linii .....................................................................................................................................72

Automatyczne dodawanie daty ................................................................................................................................74


Dodawanie tekstu Flasha........................................................................................................................................... 75
Modyfikowanie tekstu Flasha...................................................................................................................................78

Lekcja 3. Praca z obrazami ......................................................................................................................................................... 79


Stosowanie obrazw graficznych w roli ta............................................................................................................. 81
Umieszczanie grafiki na stronie............................................................................................................................... 83
Modyfikowanie rozmiarw i odwieanie grafiki .................................................................................................87
Rozmieszczanie grafiki na stronie ...........................................................................................................................88
Dodawanie obramowania do obrazw ...................................................................................................................90
Przypisywanie obrazom nazw i atrybutw alt ........................................................................................................90
Wstawianie obrazu z panelu Assets ......................................................................................................................... 91
Zarzdzanie obrazami za pomoc listy ulubionych zasobw ............................................................................. 95
Otaczanie obrazw tekstem ......................................................................................................................................98
Dostosowywanie wolnej przestrzeni wok obrazw ................................................................................................99
Wstawianie miejsc na obrazy .................................................................................................................................. 100
Zastpowanie miejsc na obrazy .............................................................................................................................. 102
Ustawianie preferencji edycji obrazw.................................................................................................................. 102
Podstawowe narzdzia do edycji obrazw ............................................................................................................ 103
Wyrwnywanie obrazu wzgldem pojedynczego wiersza tekstu ....................................................................... 106
Dodawanie przyciskw Flasha ............................................................................................................................... 108
Modyfikowanie przyciskw Flasha ........................................................................................................................110
Dodawanie animacji Flasha..................................................................................................................................... 111
Wstawianie obrazu z uatwionym dostpem.........................................................................................................113
Uywanie narzdzia Image Viewer..........................................................................................................................115
Stosowanie mechanizmu Web Photo Album ...................................................................................................... 122
Wstawianie na stron filmw QuickTime ............................................................................................................ 124

Lekcja 4. Tworzenie czy......................................................................................................................................................... 127


Definiowanie koloru i formatu czy .................................................................................................................... 129
Tworzenie czy hipertekstu ....................................................................................................................................131
cza i struktura plikw .......................................................................................................................................... 134
Tworzenie czy graficznych................................................................................................................................... 135
Definiowanie miejsc docelowych czy................................................................................................................. 136
Wstawianie nazwanych kotwic i definiowanie wskazujcych na nie czy....................................................... 138
Tworzenie map obrazkowych................................................................................................................................. 142
Wstawianie czy do poczty elektronicznej .......................................................................................................... 146

MACROMEDIA DREAMWEAVER MX 2004


Oficjalny podrcznik

Lekcja 5. Projektowanie tabel ................................................................................................................................................ 149


Tworzenie tabel..........................................................................................................................................................151
Importowanie danych z arkuszy kalkulacyjnych................................................................................................. 157
Kopiowanie i wklejanie komrek tabeli................................................................................................................ 158
Zaznaczanie tabeli.................................................................................................................................................... 160
Zaznaczanie i formatowanie komrek tabeli........................................................................................................161
Sortowanie tabel ....................................................................................................................................................... 167
Modyfikowanie tabeli.............................................................................................................................................. 168
Eksportowanie tabeli ................................................................................................................................................171
Stosowanie obrazw w tabelach ............................................................................................................................. 172
Zagniedanie tabel ................................................................................................................................................. 177
Obramowanie tabeli .................................................................................................................................................181
Projektowanie stron uwzgldniajcych rozdzielczo ekranu ........................................................................... 184
Wykorzystywanie rozmiaru okna przegldarki do testowania ukadu strony ................................................ 185
Tworzenie tabeli w trybie Layout ........................................................................................................................... 186
Modyfikowanie ukadu tabeli ................................................................................................................................ 189
Stosowanie formatowania komrek...................................................................................................................... 194
Okrelanie szerokoci tabeli ukadu ...................................................................................................................... 194
Stosowanie obrazw kalkowych............................................................................................................................. 197

Lekcja 6. Tworzenie arkuszy stylw..................................................................................................................................... 201


Czym s style? ...........................................................................................................................................................203
Tworzenie stylw wewntrznych............................................................................................................................205
Konwertowanie stylw wewntrznych na style zewntrzne ............................................................................... 212
czenie z istniejcym zewntrznym arkuszem stylw............................................................................................ 213
Tworzenie stylw zewntrznych............................................................................................................................. 215
Tworzenie stylw dla kombinacji znacznikw ....................................................................................................222
Edycja istniejcego stylu..........................................................................................................................................223
Zarzdzanie priorytetami stylw ...........................................................................................................................225
Ustawianie ta za pomoc stylw CSS ...................................................................................................................232
Tworzenie podstawowego ukadu CSS.................................................................................................................. 235

Lekcja 7. Stosowanie bibliotek.............................................................................................................................................. 243


Tworzenie elementu biblioteki...............................................................................................................................245
Umieszczanie elementu biblioteki na stronie ......................................................................................................248
Odtwarzanie elementu biblioteki .......................................................................................................................... 251
Modyfikowanie elementu biblioteki.....................................................................................................................252
Aktualizowanie odwoa do biblioteki.................................................................................................................254
SPIS TRECI

Lekcja 8. Stosowanie szablonw .......................................................................................................................................... 257


Tworzenie szablonw ..............................................................................................................................................259
Dodawanie do szablonu obszarw do edycji .......................................................................................................262
Usuwanie obszarw do edycji................................................................................................................................. 266
Tworzenie zawartoci opcjonalnej .........................................................................................................................267
Wstawianie obszarw powtarzalnych....................................................................................................................269
Budowa stron na bazie szablonu............................................................................................................................273
Kontrola zawartoci opcjonalnej ...........................................................................................................................275
Dodawanie wpisw powtarzalnych .......................................................................................................................276
Modyfikowanie szablonu .......................................................................................................................................279
Tworzenie edytowalnych atrybutw znacznikw................................................................................................ 281
Modyfikowanie edytowalnego atrybutu znacznika ............................................................................................282
Tworzenie szablonw zagniedonych .................................................................................................................284

Lekcja 9. Tworzenie ramek ...................................................................................................................................................... 289


Tworzenie zbioru ramek ......................................................................................................................................... 291
Zapisywanie zbiorw ramek ...................................................................................................................................293
Modyfikowanie rozmiarw ramek w zbiorze ramek ..........................................................................................295
Okrelanie waciwoci ramki.................................................................................................................................298
Tworzenie i edytowanie zawartoci ramek............................................................................................................ 301
Tworzenie pozostaych dokumentw treci ......................................................................................................... 305
Otwieranie w ramce istniejcej strony ................................................................................................................... 306
Sprawdzanie zawartoci ramki ...............................................................................................................................307
Kontrolowanie zawartoci ramki za pomoc czy .............................................................................................308
Tworzenie treci wywietlanej poza ramkami ...................................................................................................... 310

Lekcja 10. Tworzenie formularzy ......................................................................................................................................... 313


Budowa wasnego formularza ................................................................................................................................ 315
Grupowanie zawartoci formularza ...................................................................................................................... 317
Dodawanie jednowierszowych pl tekstowych.................................................................................................... 319
Dodawanie wielowierszowych pl tekstowych .................................................................................................... 326
Dodawanie pl wyboru ...........................................................................................................................................329
Dodawanie przyciskw opcji...................................................................................................................................331
Dodawanie elementw list i list rozwijanych ....................................................................................................... 334
Dodawanie przyciskw............................................................................................................................................ 336
Tworzenie pl ukrytych .......................................................................................................................................... 338
Formatowanie formularzy ......................................................................................................................................340

MACROMEDIA DREAMWEAVER MX 2004


Oficjalny podrcznik

Przetwarzanie formularzy ....................................................................................................................................... 341


Testowanie formularzy............................................................................................................................................342
Tworzenie menu skokw.........................................................................................................................................344

Lekcja 11. Dodawanie interaktywnoci ................................................................................................................................. 349


Wstawianie efektu rollover do obrazu................................................................................................................... 351
Dodawanie behawiorw .......................................................................................................................................... 354
Wymiana wielu obrazw w reakcji na jedno zdarzenie....................................................................................... 359
Dodawanie behawiorw do map obrazkowych ................................................................................................... 361
Edycja akcji i zdarze............................................................................................................................................... 363
Tworzenie komunikatw wywietlanych na pasku stanu................................................................................... 366
Sprawdzanie przegldarki ....................................................................................................................................... 367
Otwieranie nowego okna przegldarki .................................................................................................................370
Tworzenie menu podrcznego ...............................................................................................................................372
Weryfikacja formularzy...........................................................................................................................................378

Lekcja 12. Zarzdzanie witryn............................................................................................................................................. 383


Stosowanie panelu Files........................................................................................................................................... 385
Modyfikowanie plikw lokalnych poza zdefiniowanymi witrynami programu Dreamweaver...................389
Dodawanie do witryny nowych folderw i plikw..............................................................................................390
Tworzenie mapy witryny......................................................................................................................................... 393
Przegldanie podzbioru caej witryny ................................................................................................................... 395
Praca z czami w trybie mapy witryny .................................................................................................................397
Modyfikowanie stron z poziomu panelu Files ....................................................................................................399
Nawizywanie poczenia ze zdaln witryn........................................................................................................403
Wysyanie gotowych plikw ...................................................................................................................................406
Ukrywanie plikw i folderw ................................................................................................................................. 410
Wypoyczanie i zwracanie plikw ......................................................................................................................... 414
Korzystanie z dokumentw Design Notes ........................................................................................................... 418
Eksportowanie definicji witryn..............................................................................................................................420
Wczanie zgodnoci z programem Contribute .................................................................................................. 421
Tworzenie pocze z serwerami zdalnymi ..........................................................................................................423

Lekcja 13. Testowanie i problem dostpnoci .............................................................................................................. 427


Generowanie kodu zgodnego z paragrafem 508. amerykaskiej ustawy o rehabilitacji ................................429
Testowanie dostpnoci...........................................................................................................................................430
Sprawdzanie zgodnoci przegldarki .................................................................................................................... 433
Sprawdzanie czy wykorzystywanych na stronach witryny ..............................................................................439

SPIS TRECI

Wyszukiwanie osieroconych plikw .....................................................................................................................440


Generowanie raportw dla witryny .......................................................................................................................442
Sprawdzanie pisowni ...............................................................................................................................................444

Lekcja 14. Edycja kodu ............................................................................................................................................................. 447


Przeczanie widokw dokumentu........................................................................................................................449
Edycja kodu HTML w widoku kodu..................................................................................................................... 451
Dostosowanie lokalizacji nowego okna ................................................................................................................454
Metaznaczniki i komentarze .................................................................................................................................. 456
Korzystanie z paska Tag Selector ........................................................................................................................... 461
Edycja kodu za pomoc elementw Quick Tags .................................................................................................462
Wykorzystywanie podpowiedzi dla tworzonego kodu ....................................................................................... 465
Wykorzystywanie gotowych fragmentw .............................................................................................................468
Porzdkowanie kodu HTML.................................................................................................................................. 471
Praca ze stronami HTML wygenerowanymi przez Worda.................................................................................474
Drukowanie kodu wywietlanego w widoku Code..............................................................................................475

Lekcja 15. Stosowanie techniki Find and Replace....................................................................................................... 477


Przeszukiwanie dokumentu....................................................................................................................................478
Usuwanie znacznikw HTML................................................................................................................................ 481
Wykorzystywanie funkcji Find and Replace do doczania zewntrznych arkuszy stylw...........................484
Wykorzystanie funkcji Find and Replace do stosowania wasnych stylw CSS..............................................490
Zapisywanie i ponowne wykorzystywanie kryteriw wyszukiwania .................................................................492
Wyszukiwanie i zastpowanie z wykorzystywaniem wyrae regularnych......................................................495
Znajdowanie rnych wariantw okrelonej nazwy ...........................................................................................498

Lekcja 16. Tworzenie warstw.................................................................................................................................................. 501


Tworzenie warstw ..................................................................................................................................................... 503
Nazywanie warstw ....................................................................................................................................................508
Modyfikowanie warstw ........................................................................................................................................... 510
Zmiana kolejnoci wywietlania warstw................................................................................................................ 515
Zagniedanie i usuwanie zagniedania warstw ................................................................................................ 518
Modyfikowanie ustawie widocznoci warstw ....................................................................................................520
Ustawianie opcji linii siatki i linijki ......................................................................................................................522
Wykorzystywanie behawioru Drag Layer ............................................................................................................. 525
Wykorzystywanie behawioru Show-Hide Layers .................................................................................................528
Przeksztacanie warstw w tabele.............................................................................................................................. 530
Wykorzystywanie poprawki dla przegldarek Netscapea.................................................................................. 533

10

MACROMEDIA DREAMWEAVER MX 2004


Oficjalny podrcznik

Lekcja 17. Rozszerzanie funkcjonalnoci Dreamweavera......................................................................................... 537


Instalowanie rozszerze .......................................................................................................................................... 539
Wykorzystywanie rozszerzenia Calendar ............................................................................................................. 543
Wykorzystywanie rozszerzenia Superscript.......................................................................................................... 545
Wykorzystywanie rozszerzenia Toggle Checkboxes............................................................................................ 546
Wykorzystywanie rozszerzenia Lorem and More................................................................................................547
Tworzenie prostych obiektw ................................................................................................................................549
Zaawansowane dostosowywanie Dreamweavera ................................................................................................. 553

Dodatek A Wyraenia regularne........................................................................................................................................... 555


Dodatek B Skrty klawiaturowe w systemach Windows........................................................................................... 557
Dodatek C Skrty klawiaturowe w systemach Macintosh ....................................................................................... 565
Skorowidz ........................................................................................................................................................................................ 575

SPIS TRECI

11

Dodawanie waciwej
treci do strony WWW

Podczas tej lekcji nauczysz si importowa tekst z plikw w rnych formatach oraz wykorzystywa
materiay pochodzce z rnych systemw operacyjnych. Dowiesz si take, jak naley ustawia
domylne opcje dokumentu, jak formatowa tekst w wielu rnych typach list, oraz jak mona
wykorzystywa dostpne kroje i rozmiary czcionek celem dostosowania tekstu do edytowanej
strony. Waciwe formatowanie tekstu jest wanym elementem tworzenia stron WWW, ktre bd
czytelne i estetyczne. W wielu przypadkach tekst jest najwaniejsz czci strony; powiniene wic
powici troch czasu na odpowiednie zorganizowanie i sformatowanie prezentowanego materiau,
dziki czemu uytkownicy bd mogli szybko i wygodnie zapozna si z zawart w nim treci.
Podczas niniejszej lekcji
dowiesz si, jak dodawa
tre do swoich stron, oraz
jak naley formatowa tekst
podczas tworzenia strony
wprowadzajcej dla witryny
internetowej Lights of the
Coast. Nauczysz si take
testowa swoje strony
i stosowa tekst Flasha

Efekty dziaa przeprowadzonych w czasie lekcji znajdziesz w folderze Completed w podfolderze


Lekcja_02_Tre na doczonej pycie CD-ROM.

Czego si nauczysz?
Po przerobieniu materiau tej lekcji bdziesz potrafi:
 umieszcza tekst na stronie,
 tworzy listy,
 rozmieszcza i formatowa tekst,
 ustawia domylne opcje dokumentu dla czcionki i koloru,
 dostosowywa opcje dotyczce kroju, rozmiaru i koloru czcionki,
 wstawia znaki specjalne i inne elementy,
 tworzy i modyfikowa tekst Flasha.

Czas trwania
Lekcja powinna w przyblieniu zaj jedn godzin.

Materiay do lekcji
Pliki startowe:
Lekcja_02_Tre/introduction.htm
Lekcja_02_Tre/Text/introduction.txt
Lekcja_02_Tre/Text/introduction_mac.txt
Gotowy projekt:
Lekcja_02_Tre/Completed/introduction.htm

Podstawowe metody formatowania tekstu


Tekst do dokumentu introduction.htm moesz doda, wpisujc go bezporednio na tej stronie. Masz
do dyspozycji wiele prostych opcji formatowania tekstu w edytowanym pliku HTML. Wikszo
ustawie formatowania tekstu w dokumentach HTML jest bardzo ograniczona nie mamy penej kontroli nad rozmiarem, odstpami i wyrwnywaniem.
Wiksz kontrol nad wygldem tekstu mog Ci zapewni arkusze stylw CSS (od ang. Cascading
Style Sheets) za ich pomoc mona definiowa wygld i rozmieszczenie elementw na stronach
WWW. Podstawowe metody formatowania tekstu za pomoc arkuszy stylw omwimy w tej lekcji,
natomiast dodatkowe informacje na temat tej techniki znajdziesz w lekcji 6.

48

MACROMEDIA DREAMWEAVER MX 2004


Oficjalny podrcznik

1. Otwrz plik introduction.htm znajdujcy si w folderze Lekcja_02_Tre. W oknie dokumentu

wpisz tekst: Introduction to Lights of the Coast: Exploring Lighthouses.


Ta pocztkowa wersja dokumentu introduction.htm przypomina wersj stworzon w lekcji 1.
Wprowadzany tekst bdzie widoczny w oknie dokumentu ju w czasie jego wpisywania.
Bdzie to nagwek Twojej strony.
2. Z listy rozwijanej Format panelu Property inspector wybierz Heading 4.

Zdefiniowalimy wanie dla naszego tekstu format nagwka czwartego poziomu.


Tekst zosta sformatowany na poziomie caego bloku. Wszystkie opcje dostpne na licie
rozwijanej Format dotycz caego bloku tekstu. Nie moemy stosowa formatowania nagwkw
ani adnego innego formatowania blokowego dla pojedynczych sw lub innych czci
bloku tekstu. Oznacza to, e nie musimy zaznacza caego tekstu, dla ktrego chcemy
zastosowa formatowanie nagwka wybrane z listy Format formatowanie zostanie
zastosowane automatycznie dla caego tekstu nalecego do danego bloku.

Do innych ustawie formatowania stosowanych wycznie na poziomie caych blokw tekstu nale
opcje akapitw, list, linii poziomych oraz wyrwnywania. Wicej informacji na temat stosowania
tych elementw znajdziesz w dalszej czci lekcji.

Nagwki s formatowane za pomoc wikszych lub grubszych czcionek ni te stosowane


w tekcie podstawowym. Jzyk HTML obsuguje sze poziomw nagwkw oznaczonych
numerami od 1 do 6. Nagwek pierwszego poziomu (opcja Heading 1) wykorzystuje najwikszy
rozmiar czcionki, nagwek poziomu szstego (opcja Heading 6) ma natomiast najmniejszy
rozmiar czcionki pord nagwkw. Oznaczenie akapitu jako nagwka automatycznie
powoduje wydzielenie otaczajcej go przestrzeni, ktrej rozmiar rni si w zalenoci
od wybranego poziomu nagwka. Jedynym sposobem kontrolowania tych przestrzeni
jest arkuszy stylw do sterowania formatowaniem.
Nagwki mog by pomocne przy dzieleniu treci strony na podrozdziay i zwracaniu
uwagi czytelnika na pewne fragmenty. Uytkownicy zwykle jedynie przegldaj strony WWW,
zamiast dokadnie je czyta. Uwzgldnienie tego ju w fazie projektowania witryny moe
nam pomc w tworzeniu stron, ktre bd bardziej czytelne dla przyszych odwiedzajcych.
Formatowanie tekstu za pomoc nagwkw i innych technik wykorzystywanych w tej lekcji
umoliwia nam wyrnienie odpowiednich fragmentw tekstu i tworzenie jasnej hierarchii
wizualnego ukadu stron.

LEKCJA 2.
Dodawanie waciwej treci do strony WWW

49

W wielu dokumentach pierwszy nagwek strony jest identyczny jak jej tytu. W przypadku wieloczciowych dokumentw tekst pierwszego nagwka powinien zawiera szersze informacje, np. tytu
rozdziau. Tytu nadawany caej stronie powinien identyfikowa dany dokument w szerszym kontekcie (powinien zawiera np. jednoczenie tytu caej ksiki i tytu biecego rozdziau).
3. Nacinij klawisz Enter (w systemach Windows) lub Return (w systemach Macintosh).

Stworzylimy wanie pod nagwkiem Introduction to Lights of the Coast: Exploring Lighthouses
kolejny wiersz bdcy czci nowego bloku tekstu. Domylnie nowy blok tekstu jest
formatowany jako akapit. Kady nowy akapit jest autonomicznym blokiem tekstu.
Format akapitu jest w oglnoci wykorzystywany dla podstawowego tekstu oddzielonego
od pozostaych blokw tekstu za pomoc pewnej liczby odstpw takim odstpem
oddzielajcym nowy blok tekstu od poprzedniego moe by np. pojedynczy pusty wiersz.
Jedynym sposobem modyfikowania odstpw jest zastosowanie arkuszy stylw CSS
do kontrolowania formatowania.

Aby zastosowa formatowanie akapitu dla bloku tekstu, naley z listy rozwijanej Format dostpnej
w panelu Property inspector wybra opcj Paragraph (akapit) lub uy skrtu Ctrl+Shift+P (w systemach Windows) albo Command+Shift+P (w systemach Macintosh).
4. Zapisz plik.

Zauwa, e za kadym razem, gdy zmodyfikujesz swj dokument, program Dreamweaver


umieszcza znak gwiazdki (*) obok nazwy pliku na samej grze okna dokumentu. Znak ten
oznacza, e w danym pliku wprowadzono zmiany, ktre nie zostay jeszcze zapisane. Znak
gwiazdki znika, kiedy zapisujemy dokument. Staraj si zapisywa edytowane dokumenty
moliwie czsto, aby unikn bolesnej utraty efektw swojej pracy.

Tworzenie podziau wiersza


Jeli chcesz stworzy nowy wiersz bez dodatkowego odstpu dzielcego go od poprzedniego wiersza tekstu (czyli stworzy pojedynczy podzia wiersza), moesz uy tzw. podziau wiersza (ang. line
break). Technika ta jest przydatna w przypadku wierszy adresu; przykadowo, kiedy chcemy umieci kad lini adresu w osobnym wierszu bez dodatkowych odstpw typowych dla nowych
akapitw.
1. W dokumencie introduction.htm umie punkt wstawiania w nagwku, bezporednio

przed sowem Exploring. Nacinij kombinacj klawiszy Shift+Enter (w systemach Windows)


lub Shift+Return (w systemach Macintosh).
Tekst znajdujcy si za punktem wstawiania zostanie przeniesiony do kolejnego wiersza.
Stworzylimy tym samym podzia wiersza, nie nowy akapit, co oznacza, e nie zostanie
wstawiona dodatkowa przestrze pomidzy tymi dwoma wierszami.

50

MACROMEDIA DREAMWEAVER MX 2004


Oficjalny podrcznik

Jeli zastosujesz dwa podziay wiersza, moesz upozorowa nowy akapit; poniewa jednak faktycznie nie stworzono nowego akapitu, moesz mie trudnoci w zastosowaniu rnych stylw formatowania dla fragmentw tekstu, ktre oddzielono co prawda dwoma podziaami wiersza, ale
wci nale do tego samego akapitu.

Moesz take wstawi we wskazanym miejscu podzia wiersza, klikajc opcje Insert/HTML/
Special Characters/Line Break (wstaw/HTML/znaki specjalne/podzia wiersza) lub wybierajc
kategori Text w pasku Insert, klikajc menu Characters (znaki) i wybierajc pozycj Line Break.
Ikona znaku podziau wiersza jest oznaczona literami BR, poniewa znacznikiem jzyka HTML
dla podziau wiersza jest <br>.

Ustawianie opcji tekstu


Tekst na stronie moemy doda, kopiujc i wklejajc fragment istniejcego dokumentu. Moemy bez
przeszkd otworzy Dreamweavera i aplikacj, z ktrej chcemy skopiowa interesujce nas materiay
(np. jeden z programw wchodzcych w skad pakietu Microsoft Office), po czym skopiowa i wklei
lub zaznaczy i przecign do Dreamweavera fragment tekstu lub inny potrzebny element.
Dreamweaver moe take otwiera pliki stworzone w edytorach tekstu i aplikacjach do skadania
tekstu pod jednym tylko warunkiem otwierane pliki musz by zapisane w formacie ASCII.
Pliki tekstowe (z rozszerzeniem .txt) zawsze s otwierane przez program Dreamweaver w nowym
oknie trybu Code view. Po otwarciu pliku tekstowego moemy skopiowa i wklei zawarty w nim
tekst do innego dokumentu.
Podczas kopiowania tekstu z pliku tekstowego moemy zachowa proste formatowanie (np. nowe
znaki nowego wiersza), aby jednak byo to moliwe, musimy zrozumie rnice pomidzy formatem
ASCII pojawiajce si na rozmaitych platformach. W plikach stworzonych w systemach Windows
do oznaczania nowego wiersza w tekcie wykorzystywane s zarwno niewidoczne znaki sterujce,
tzw. znaki przesunicia o wiersz (ang. Line Feed LF), jak i tzw. znaki powrotu karetki (ang. Carriage
Return CR). W systemach Macintosh w ogle nie stosuje si znakw przesunicia o wiersz, a jedynie
znaki powrotu karetki (CR), natomiast w systemach Unix do oznaczania nowego wiersza wykorzystywane s wycznie znaki przesunicia o wiersz (LF).
Aby prawidowo importowa tekst z plikw ASCII i zachowa formatowanie podziau wierszy,
musimy zmieni ustawienia Line Break Type (typ podziau wiersza) w programie Dreamweaver na takie,
ktre bd zgodne z waciwociami systemu operacyjnego, w ktrym importowane pliki zostay
stworzone. Proces modyfikowania ustawie przedstawiamy w poniszym wiczeniu.
LEKCJA 2.
Dodawanie waciwej treci do strony WWW

51

1. Wybierz opcje Edit/Preferences (w systemach Windows) lub Dreamweaver/Preferences (w systemach

Macintosh), aby wywietli okno dialogowe Preferences, i na licie Category kliknij pozycj Code
Format (format kodu). Z listy rozwijanej Line Break Type wybierz opcj CR LF (Windows).

Z listy rozwijanej Line Break Type moemy wybra opcj CR LF (Windows), CR (Macintosh)
lub LF (Unix).
W przypadku uytkownikw systemw Windows domylnie ustawiona jest opcja CR LF
(Windows).
W przypadku uytkownikw systemw Macintosh domylnie ustawiona jest opcja CR
(Macintosh).
Jeli korzystasz z wersji Dreamweavera dla systemw Macintosh, zmie to ustawienie na CR LF
(Windows). Jeli pracujesz w systemie Windows, upewnij si tylko, e wybrana jest domylna
opcja CR LF (Windows).
2. Kliknij przycisk OK.

Okno dialogowe Preferences zostanie zamknite.


Do programu Dreamweaver moesz take importowa tekst z dokumentw aplikacji Microsoft
Word zapisanych jako pliki tekstowe (z rozszerzeniem .txt) lub pliki HTML. Aby zapisa dokument Worda jako plik HTML, otwrz ten dokument w programie Microsoft Word i wybierz opcje
Plik/Zapisz jako stron sieci Web. Importowanie plikw HTML wygenerowanych przez program
Microsoft Word rodzi wiele trudnoci zwizane z tym problemy i sposoby ich rozwizania
przedstawimy w lekcji 14.

52

MACROMEDIA DREAMWEAVER MX 2004


Oficjalny podrcznik

Importowanie tekstu
Jeli mamy ju prawidowo ustawion opcj podziau wiersza, moemy przystpi do importowania
tekstu.
W tym wiczeniu wykorzystamy dokument stworzony na komputerze z systemem Windows. W poprzednim wiczeniu ustawilimy opcj Line Break Type w sposb umoliwiajcy prawidowe importowanie plikw stworzonych w tym systemie. W folderze Pliki pocztkowe znajduje si take
dodatkowy dokument, intro_mac.txt (stworzony na komputerze Macintosh), dziki czemu moesz
eksperymentowa z importowaniem plikw tekstowych pochodzcych z innych platform. Jeli zdecydujesz
si na eksperymenty z tym plikiem, pamitaj, e musisz odpowiednio zmieni ustawienie Line Break
Type przed otwarciem lub zaimportowaniem tego pliku musisz zmieni wybran wczeniej opcj
CR LF (Windows) na CR (Macintosh).
1. Otwrz w programie Dreamweaver plik Lekcja_02_Tre/Text/introduction.txt, po czym zaznacz

i skopiuj cay tekst zawarty w tym pliku. W pliku introduction.htm umie punkt wstawiania
stworzonym wczeniej wierszu nowego akapitu (pod nagwkiem Introduction to Lights of the Coast:
Exploring Lighthouses) i wklej tekst skopiowany przed chwil z pliku Lekcja_02_Tre/Text/introduction.txt.
Do kopiowania i wklejania tekstu moesz uywa menu Edit, opcji Edit/Copy (edycja/kopiuj)
i (lub) Edit/Paste (edycja/wklej), albo zastosowa powszechnie znane skrty klawiaturowe:
Ctrl+C i Ctrl+V (w systemach Windows) lub Command+C i Command+V (w systemach Macintosh)
odpowiednio do kopiowania i wklejania.
Uytkownicy systemw Windows: Domylnie okno dokumentu zajmuje ca dostpn
przestrze okno zawiera po jednej zakadce dla kadego z otwartych dokumentw.
Moesz przecza si pomidzy dokumentami, klikajc odpowiednie zakadki. Kliknicie
zakadki prawym przyciskiem myszy powoduje wywietlenie menu kontekstowego, w ktrym
mamy do dyspozycji midzy innymi opcj zamknicia danego pliku. Aby wyczy interfejs
oparty na zakadkach i wywietli interfejs wykorzystujcy tzw. pywajce okna, kliknij przycisk
maksymalizacji w prawym grnym rogu okna dokumentu (nie przycisk maksymalizacji
caego programu). Aby powrci do interfejsu z zakadkami, ponownie kliknij przycisk
maksymalizacji okna dokumentu. Zakadki nie s wykorzystywane w wersji programu
Dreamweaver dziaajcej w systemach Macintosh.

2. Zapisz plik introduction.htm i zamknij plik introduction.txt.

Moesz pozostawi otwarty dokument introduction.htm bdzie nam potrzebny w kolejnym


wiczeniu.

LEKCJA 2.
Dodawanie waciwej treci do strony WWW

53

Wstawianie twardej spacji


Jzyk HTML rozpoznaje tylko jedn standardow spacj. Znak specjalny nazywany tward spacj
jest stosowany zamiast wielu spacji znajdujcych si obok siebie. Twarde spacje mog by wykorzystywane za kadym razem, gdy musimy wstawi pomidzy znakami, sowami lub innymi elementami wicej ni jedn spacj. Twarde spacje mona wstawia na pocztku wiersza tekstu, gdzie w jzyku
HTML zabronione jest stosowanie zwykych spacji.
1. W dokumencie introduction.htm umie punkt wstawiania w nagwku, pomidzy sowami

Exploring i Lighthouses.
Jeli naciniesz spacj wicej ni raz, odstp pomidzy sowami nie zmieni si nadal
bd oddzielone przez pojedynczy znak spacji. Spacje wielokrotne nie s rozpoznawane
w jzyku HTML.
2. Nacinij dwukrotnie kombinacj klawiszy Ctrl+Shift+Spacja (w systemach Windows)

lub Option+Spacja (w systemach Macintosh).


Tward spacj moesz take wstawi za pomoc opcji Insert/HTML/Special Characters/NonBreaking Space lub wybierajc kategori Text na pasku Insert, klikajc menu Characters i wybierajc pozycj Non-Breaking Space.
Odstp pomidzy sowami bdzie si zwiksza za kadym razem, gdy wstawimy tam tward
spacj.
Moesz zezwoli na wpisywanie wielu standardowych spacji, zmieniajc odpowiednie ustawienia
w programie Dreamweaver. Wybierz opcje Edit/Preferences (w systemach Windows) lub Dreamweaver/Preferences (w systemach Macintosh) i kliknij kategori General (oglne). Zaznacz pole
wyboru oznaczone etykiet Allow multiple consecutive spaces (zezwalaj na wiele kolejnych spacji).
Po wczeniu tej opcji program Dreamweaver bdzie automatycznie wykorzystywa twarde spacje
zawsze, gdy naciniemy zwyk spacj wicej ni raz.

Wyrwnywanie i tworzenie wci w tekcie


Program Dreamweaver oferuje nastpujce opcje wyrwnywania tekstu: domylny brak wyrwnania,
akapit z lewej (Align Left), akapit wyrodkowany (Align Center), akapit z prawej (Align Right) oraz akapit
wyjustowany (Justify). Domylny brak wyrwnania jest rwnowany z akapitem z lewej.
1. W dokumencie introduction.htm umie punkt wstawiania w nagwku Introduction to Lights of the

Coast. W panelu Property inspector kliknij przycisk Align Center (patrz rysunek na nastpnej stronie).
Nagwek jest teraz wyrodkowany. Poniewa pomidzy czci nagwka Introduction to Lights
of the Coast a Exploring Lighthouses wstawilimy podzia wiersza (nie znak nowego akapitu),
wyrodkowane zostay oba wiersze.

54

MACROMEDIA DREAMWEAVER MX 2004


Oficjalny podrcznik

Poniewa tekst zosta rozdzielony za pomoc znaku podziau wiersza, oba wiersze pozostaj
w tym samym bloku akapitu. Kade formatowanie akapitu (w tym nagwek i wyrwnywanie)
zastosowane dla ktregokolwiek z tych wierszy ma wpyw na wszystkie elementy bdce czci
tego akapitu.
2. Zaznacz pierwszy akapit dokumentu introduction.htm i w panelu Property inspector kliknij przycisk

Text Indent.
Do wstawiania wci w zaznaczonym tekcie moesz take uywa opcji Text/Indent (tekst/wcicie).

Akapit zosta teraz wcity. Wcicia s stosowane dla caych akapitw bez arkuszy stylw
CSS (patrz lekcja 6.) nie bdziemy mogli stosowa wci np. tylko dla pierwszego wiersza
akapitu. Wcicia mog by wykorzystywane do wyodrbnienia wybranych fragmentw
tekstu spord tekstu podstawowego. Kiedy naciskamy przycisk Tekst Indent (zwiksz wcicie),
tekst jest wcinany zarwno od strony lewego, jak i prawego marginesu strony. Nie moemy
ustawia gbokoci wcicia, poniewa obsuga tego elementu zaley od przegldarki
internetowej i moe si rni w poszczeglnych aplikacjach tego typu.
Wcicie dla pojedynczego akapitu mona stosowa wicej ni raz. Marginesy po lewej i prawej
stronie akapitu s poszerzane po kadorazowym zwikszeniu wcicia dla wybranego bloku
tekstu. Wiksza liczba wci dla akapitu moe mie na celu jego odrnienie od wczeniejszego
akapitu, dla ktrego zastosowano np. pojedyncze wcicie.
W panelu Property inspector kliknij przycisk Tekst Outdent (zmniejsz wcicie) lub wybierz opcje
Text/Outdent, aby usun wcicie.
Jeli sprbujesz wprowadzi wcicie dla jednego akapitu i okae si, e zostao ono zastosowane take
dla ssiadujcych akapitw, sprawd, czy pomidzy akapitami faktycznie znajduje si znak nowego
akapitu czy tylko podwjny podzia wiersza. Aby upewni si, e akapity s oddzielone znakiem nowego
akapitu, umie wskanik na pocztku akapitu, dla ktrego chcesz zastosowa wcicie, i naciskaj klawisz Backspace (w systemach Windows) lub Delete (w systemach Macintosh) tak dugo, a osigniesz
koniec poprzedniego akapitu, po czym nacinij klawisz Enter (w systemach Windows) lub Return (w systemach Macintosh), aby stworzy nowy akapit.
LEKCJA 2.
Dodawanie waciwej treci do strony WWW

55

Tworzenie list
W programie Dreamweaver moemy tworzy trzy podstawowe rodzaje list: uporzdkowan, nieuporzdkowan i list definicji. Lista uporzdkowana skada si z elementw uporzdkowanych
numerycznie lub alfabetycznie. Mamy do dyspozycji opcj stosowania numeracji arabskiej lub
rzymskiej oraz maych i wielkich liter. Listy uporzdkowane s doskonaym rozwizaniem w przypadku, gdy musimy jasno zorganizowa i oznaczy odpowiednimi etykietami kolejne elementy
np. kiedy przedstawiamy list kolejnych krokw do wykonania. Lista nieuporzdkowana jest czsto
nazywana list punktowan, poniewa przed kadym elementem listy znajduj si tzw. punktory.
Domylne punktory uywane w programie Dreamweaver mona zmieni na kka, okrgi lub wypenione kwadraty. Listy nieuporzdkowane nadaj si idealnie do prezentowania informacji, w ktrych
kady z wymienianych elementw musi by odpowiednio wyrniony, ale jednoczenie numerowanie
lub oznaczanie literami jest zbdne (np. w przypadku listy produktw dla przepisu kulinarnego). Lista
definicji skada si z poj i ich definicji; listami tego typu zajmiemy si w nastpnym wiczeniu.
W przypadku wszystkich wymienionych typw list, aby moliwe byo poprawne formatowanie,
kady element musi tworzy osobny akapit.
W poniszym wiczeniu stworzymy dwie listy: jedn uporzdkowan i jedn nieuporzdkowan.
Nastpnie wykorzystamy okno dialogowe List Properties (waciwoci listy) do zmodyfikowania zastosowanych stylw (listom definicji powicimy osobne wiczenie w dalszej czci tej lekcji).
1. W dokumencie introduction.htm zaznacz test rozpoczynajcy si od sw Guiding ships into port

i koczcy si zdaniem Serving as identifying markers of particular region. Kliknij teraz przycisk
Ordered List (lista uporzdkowana) dostpny w panelu Property inspector.
Zaznaczony tekst zosta sformatowany jako lista uporzdkowana (dodatkowo zastosowano
dla akapitu automatyczne wcicie).

Moesz zmieni schemat numerowania list, modyfikujc odpowiednie ustawienia.


Zrobimy to w nastpnym kroku.
2. Umie kursor w dowolnym wierszu nalecym do nowo utworzonej listy i w panelu

Property inspector kliknij przycisk List Item (element listy).


Wybierz tylko jeden wiersz listy. Jeli zaznaczysz ca list, przycisk List Item zostanie
przyciemniony i bdzie niedostpny. Jeli wspomniany przycisk jest niewidoczny,
kliknij strzak rozwijania w prawym dolnym rogu panelu Property inspector.
Jeli kursor jest umieszczony w jednym z wierszy listy, moesz klikn opcje Text/List/Properties,
aby otworzy to samo okno dialogowe List Properties.
56

MACROMEDIA DREAMWEAVER MX 2004


Oficjalny podrcznik

Na ekranie zostanie wywietlone okno dialogowe List Properties.

Lista uporzdkowana znajduje si na licie rozwijanej List type (typ listy) dostpnej w oknie
dialogowym List Properties oznaczona etykiet Numbered List.
3. Z listy rozwijanej Style (styl) wybierz pozycj Alphabet Small (a,b,c) (mae litery alfabetu).

Kliknij przycisk OK.


Opcja Alphabet Small (a,b,c) bdzie dostpna na licie rozwijanej Style tylko w przypadku, gdy
klikne wczeniej ikon listy uporzdkowanej (Ordered List). Jeli klikne ikon listy nieuporzdkowanej (Unordered List), przed wybraniem stylu listy bdziesz musia zmieni ustawienie
List type na Numbered List.
Wszystkie elementy listy zostay oznaczone maymi literami.
Sekcja List item na dole okna dialogowego List Properties zawiera list rozwijan New style, za
pomoc ktrej moemy zmieni wygld pojedynczego elementu lub wielu elementw listy, zamiast
zmienia wygld i organizacj caej listy. Ta sama sekcja zawiera take pole tekstowe Reset count
(przestaw licznik), w ktrym moemy dowolnie zmieni numeracj listy od miejsca, w ktrym w danej chwili znajduje si punkt wstawiania.
Tworzenie i modyfikowanie lity nieuporzdkowanej jest bardzo proste. Zrealizujemy to zadanie
w poniszych krokach.
4. Zaznacz nastpujce dwa wiersze tekstu: The importance of lighthouses throughout history and the roles

that theyve played oraz The technological advances that brought the lighthouses into its golden age. W panelu
Property inspector kliknij przycisk Unordered List.
Do sformatowania zaznaczonego fragmentu tekstu jako listy uporzdkowanej moesz uy opcji
Text/List/Unordered List.
Dla zaznaczonego tekstu zastosowano wcicie i przeksztacono go w list wypunktowan.
Moesz zmieni domylny symbol punktora listy nieuporzdkowanej, modyfikujc
waciwoci tej listy (podobnie jak w przypadku listy uporzdkowanej). Wygld poszczeglnych
symboli punktorw moe by inny w rnych przegldarkach, rnice w wywietlaniu list
LEKCJA 2.
Dodawanie waciwej treci do strony WWW

57

dowolnych typw mog dotyczy take stosowanych odstpw. Liczba dostpnych w jzyku
HTML opcji dotyczcych wygldu liczb i liter, punktorw oraz odstpw jest bardzo
ograniczona wiksz kontrol nad wygldem listy moemy uzyska, stosujc arkusze
stylw CSS (patrz lekcja 6.).
W menu List type okna dialogowego List Properties (wykorzystywanego w poprzednim kroku)
lista nieuporzdkowana jest oznaczona etykiet Bulleted List (lista wypunktowana).
Aby usun formatowanie listy lub zmieni jej typ, zaznacz ca list i kliknij odpowiedni przycisk
w panelu Property inspector. Jeli chcesz usun formatowanie listy uporzdkowanej, kliknij przycisk Ordered List; jeli chcesz usun formatowanie listy wypunktowanej, kliknij przycisk Numbered
List. Jeli natomiast chcesz zmieni typ listy, od razu kliknij przycisk odpowiadajcy docelowemu
formatowaniu.
5. Umie punkt wstawiania na kocu ostatniego wiersza listy wypunktowanej i nacinij

klawisz Enter (w systemach Windows) lub Return (w systemach Macintosh). Wpisz tekst:
The influence lighthouses have had on human culture.

Kiedy chcemy doda tekst do listy, musimy uy standardowego znaku nowego akapitu
celem stworzenia nowego bloku tekstu dla dodawanego elementu. Kady element listy
musi by osobnym akapitem.
Dwukrotne nacinicie klawisza Enter (w systemach Windows) lub Return (w systemach Macintosh) powoduje opuszczenie trybu listy i powrt do domylnego formatowania akapitu. Jeli musimy
stworzy jeden lub wicej nowych wierszy nalecych do tego samego elementu listy, powinnimy
wykorzysta znak (lub znaki) podziau wiersza.
6. Umie punkt wstawiania w dowolnym wierszu listy wypunktowanej i wybierz opcje

Text/List/Properties.
Lista rozwijana List type w oknie dialogowym List Properties zawiera dwa dodatkowe typy list:
Menu i Directory. S to starsze odmiany list punktowanych (typu Bulleted list) obie maj podobne przeznaczenie jak listy nieuporzdkowane i s zwykle wywietlane w przegldarkach internetowych dokadnie w ten sam sposb. W oglnoci zaleca si stosowanie dla wszystkich list nieuporzdkowanych opcji Bulleted list.

7. Z listy rozwijanej Style wybierz opcj Square. Kliknij przycisk OK.


58

MACROMEDIA DREAMWEAVER MX 2004


Oficjalny podrcznik

Upewnij si, e korzystasz z listy rozwijanej Style, nie z listy New style. Gdyby uy listy rozwijanej
New style w obszarze List item, wprowadzona zmiana dotyczyaby wycznie wiersza listy, w ktrym znajdowa si punkt wstawiania w momencie wywietlenia okna dialogowego List Properties.
Wszystkie elementy listy s teraz wyrnione symbolem wypenionego kwadratu.
Kolor liczb i punktorw wykorzystywanych odpowiednio w listach uporzdkowanych i nieuporzdkowanych jest taki sam jak domylny kolor tekstu w dokumencie. Domylne ustawienia dokumentu
bdziemy modyfikowa w dalszej czci tej lekcji.

Tworzenie list definicji


Lista definicji skada si z serii poj i ich definicji. Definiowane sowo lub pojcie jest wyrwnywane do lewej strony; definicja jest poprzedzona wciciem i znajduje si w nastpnym wierszu. Inaczej ni w przypadku list uporzdkowanych i nieuporzdkowanych, elementy list definicji nie s
poprzedzane adnymi znakami (kolejne elementy s wyrniane za pomoc wci definicji).
1. W dokumencie introduction.htm zaznacz tekst zaczynajcy si od sw Light Source i koczcy si

sowami associated with the operation and maintenance of lighthouses. Wybierz opcje Text/List/Definition List.
Terminy znajduj si teraz przy lewym marginesie, a odpowiadajce im definicje
z odpowiednimi wciciami znajduj si w wierszach nastpujcych po tych terminach.
Nasza lista definicji powinna teraz wyglda podobnie do tej z poniszego przykadu.

2. Zapisz plik i wcz jego podgld w przegldarce internetowej.

Teraz, kiedy woye troch pracy w tworzenie i formatowanie wszystkich opisywanych list,
warto zapisa zmodyfikowany dokument.
LEKCJA 2.
Dodawanie waciwej treci do strony WWW

59

Zagniedanie list
W programie Dreamweaver moemy take tworzy tzw. listy zagniedone (ang. nested list), czyli listy
znajdujce si wewntrz innych list. Listy zagniedone mog by formatowane w ten sam sposb
co listy nadrzdne, ale mog take by listami zupenie innego typu. Przykadowo, moemy wewntrz listy definicji stworzy list uporzdkowan. Domylnie punktorami zagniedonych list
nieuporzdkowanych s koa, okrgi lub wypenione kwadraty (w wymienionej kolejnoci). W programie Dreamweaver punktory te s nazywane odpowiednio bullet, circle i square. Te same elementy
w terminologii jzyka HTML nosz odpowiednio nazwy disc, circle i square.
Niektre przegldarki wywietlaj puste punktory kwadratowe. Dotyczy to np. przegldarki
Netscape 4.7 dziaajcej w systemach Macintosh, ale np. przegldarka Internet Explorer 5.0 wywietla wypenione kwadraty. W wikszoci aplikacji dziaajcych w systemach Windows kwadratowe punktory s wypenione.
1. W dokumencie introduction.htm dodaj nowy element do wypunktowanej listy, umieszczajc punkt

wstawiania na kocu wiersza The technological advances that brought the lighthouses into its golden age
i naciskajc klawisz Enter (w systemach Windows) lub Return (w systemach Macintosh).
W ten sposb dodajemy kolejny element za tym wierszem, ale na tym samym poziomie listy.
2. Aby zagniedzi tworzony wanie element listy, w panelu Property inspector kliknij przycisk
Text Indent, a nastpnie wpisz tekst: Incandescent oil vapor lamp.

Nowy element jest przenoszony na kolejny poziom (z odpowiednim wciciem). Kiedy


zagniedamy list, punktory w licie zagniedonej s automatycznie zmieniane od tej
chwili rni si od punktorw gwnej listy. W tym przypadku dla listy zagniedonej
wykorzystano punktory w ksztacie pustych okrgw. Styl punktorw moemy zmieni
w oknie dialogowym List Preferences (podobnie jak wczeniej modyfikowalimy ustawienia
listy gwnej).
Nasza lista zagniedona powinna teraz wyglda podobnie do tej z poniszego przykadu.

60

MACROMEDIA DREAMWEAVER MX 2004


Oficjalny podrcznik

Aby zmieni typ akapitu z elementu nalecego do listy zagniedonej na element listy standardowej, umie punkt wstawiania wewntrz zagniedonego elementu (nie zaznaczajc go). Kliknij
przycisk Text Outdent dostpny w panelu Property inspector.
3. Dodaj do zagniedonej listy nastpujce elementy: Argand lamp, Fresnel lens, Screwpile
construction oraz Electricity.

Podobnie jak w przypadku przedstawianych wczeniej w tej lekcji wci stosowanych w tekcie,
nie moemy kontrolowa ani modyfikowa odstpw dla wci, list czy samych list
zagniedonych.
Jeli pomidzy ostatnim elementem zagniedonej listy a nastpujcym po nim elementem listy gwnej
pojawi si dodatkowy wiersz przerwy, moesz umieci w nim punkt wstawiania i nacisn klawisz
Backspace (w systemach Windows) lub Delete (w systemach Macintosh). Moe to spowodowa
usunicie ostatniego znaku w ostatnim wierszu listy zagniedonej jeli tak si stanie, po prostu
wpisz ten znak ponownie.

Formatowanie znakw
Dla tekstu tworzonego w programie Dreamweaver moemy stosowa rozmaite opcje formatowania,
a dziki ktrym ka nacisk na pewne elementy, sowa lub zdania. Do dostpnych opcji formatowania nale pogrubienie, kursywa i podkrelenie.
1. W dokumencie introduction.htm zaznacz sowa Light Source na licie definicji.

Dla zaznaczonego fragmentu zastosujemy efekt pogrubienia.


2. W panelu Property inspector kliknij przycisk Bold (pogrubienie).

Aby zastosowa dla zaznaczonego tekstu pogrubienie, moemy take wybra opcje
Text/Style/Bold (tekst/styl/pogrubienie) lub klikn przycisk Bold dostpny w kategorii
Text paska Insert. W programie Dreamweaver dostpny jest take klawisz skrtu dla operacji
pogrubienia zaznaczonego tekstu: Ctrl+B (w systemach Windows) lub Command+B
(w systemach Macintosh).
Kiedy do wprowadzania efektu pogrubienia wykorzystujemy odpowiedni przycisk panelu Property
inspector, program Dreamweaver umieszcza zaznaczony fragment tekstu pomidzy znacznikami
<strong> i </strong>. Podobnie, kiedy stosujemy formatowanie kursywy, Dreamweaver zamyka formatowany fragment w znacznikach <em> i </em> (em jest skrtem od ang. emphasis,
czyli wyrnienia). Dreamweaver wykorzystuje znaczniki wzmocnienia i wyrnienia (nazywane
czsto znacznikami logicznymi), poniewa za ich pomoc mona modyfikowa zawarto strony
zarwno na poziomie konceptualnym, jak i wizualnym czyli inaczej ni w przypadku znacznikw pogrubienia i kursywy (odpowiednio <b> oraz <i>), ktre nazywa si znacznikami fizycznymi z uwagi na ich wpyw wycznie na warstw wizualn strony. Znaczniki logiczne s bardziej
elastyczne i dostpne dla szerszej grupy odbiorcw.
LEKCJA 2.
Dodawanie waciwej treci do strony WWW

61

W ten sam sposb moemy zastosowa dla zaznaczonego tekstu efekt kursywy.

Ostronie uywaj efektu podkrelenia na swoich stronach internetowych. Jednym ze sposobw oznaczania czy na stronach WWW jest wanie podkrelenie. Stosowanie stylu podkrelenia dla fragmentw tekstu niebdcych czami moe wprowadza w bd odwiedzajcych.
3. Zastosuj efekt pogrubienia dla pozostaych poj na licie definicji.

W wielu przypadkach bdziesz musia w programie Dreamweaver powtarza ostatnio wykonan


operacj, np. wprowadzania takiego samego formatowania dla innych akapitw lub wybranych
fragmentw tekstu. Polecenie Redo (wykonaj ponownie) moe sprowadzi to zadanie do
nacinicia pojedynczej kombinacji klawiszy. Dwoma pierwszymi elementami menu Edit s
polecenia Undo i Redo. Warto zapamita kombinacje klawiszy odpowiadajce tym poleceniom:
Undo: Ctrl+Z (w systemach Windows) oraz Command+Z (w systemach Macintosh)
Redo: Ctrl+Y (w systemach Windows) oraz Command+Y (w systemach Macintosh)
Do przyspieszenia czsto powtarzanych dziaa moemy wykorzysta panel historii (History)
wystarczy zaznaczy w panelu History szereg dziaa i zapisa wybrane kroki, klikajc przycisk
Save the selected steps as command (zapisz wybrane kroki jako polecenie) w prawym dolnym rogu
tego panelu lub wybierajc z menu kontekstowego pooonego w prawym grnym rogu
panelu opcj Save As Command (zapisz jako polecenie). Jeli chcemy szybko wstawia czsto
wykorzystywany fragment kodu, powinnimy uy funkcji Snippets (patrz lekcja 14.).
Z powodu bdu w programie Dreamweaver (wystpujcego zarwno w wersji dla systemw Windows, jak i w wersji dla systemw Macintosh), polecenie Redo nie dziaa w przypadku ponownego stosowania stylu pogrubionego i kursywy. Aby zastosowa pogrubienie dla pozostaych poj na licie
definicji, powiniene nadal uywa odpowiedniego przycisku panelu Property inspector lub skrtw
klawiaturowych Ctrl+B (w systemach Windows) lub Command+B (w systemach Macintosh).
Bd uniemoliwia take powtarzanie tych operacji formatowania za pomoc panelu History. Jeli bdziesz chcia usun kod wygenerowany przez wielokrotne powtrzenie formatowania efektem pogrubienia lub kursywy, bdziesz musia tyle samo razy uy polecenia Undo. Kod tworzony po zastosowaniu polecenia Redo dla formatowania stylem pogrubionym ma posta: <span body="bold">
oraz </span>. Natomiast kod tworzony po zastosowaniu polecenia Redo dla formatowania stylem
pogrubionym ma posta: <span mm:togglevisibility="italic"> oraz </span>. Przedstawione znaczniki s nieprawidowe i powinny zosta usunite z dokumentu. Moesz do tego celu
uy polecenia Undo lub rcznie usun te znaczniki z kodu. Wicej informacji na temat bezporedniej pracy z kodem znajdziesz w lekcji 14.

62

MACROMEDIA DREAMWEAVER MX 2004


Oficjalny podrcznik

Zmiana czcionki
Aby uczyni swoj stron bardziej interesujc i czyteln dla odwiedzajcych, moesz zmieni
czcionki wykorzystywane do wywietlania znajdujcego si na stronie tekstu. Chocia istnieje wiele
materiaw dotyczcych krojw czcionek wykorzystywanych w dokumentach drukowanych, nie
wszystkie zawarte w nich zalecenia maj zastosowanie w przypadku stron internetowych.
W oglnoci czcionki bezszeryfowe (ang. sans-serif) s bardziej czytelne na ekranie komputera ni
czcionki szeryfowe (ang. serif). Czcionki szeryfowe s zazwyczaj wykorzystywane w mediach drukowanych, poniewa ich waciwoci uatwiaj czytajcemu szybkie rozpoznawanie uytych znakw. Na ekranie komputera te same kroje czcionek mog jednak utrudnia rozrnianie znakw,
w szczeglnoci jest to trudne w duych blokach tekstu, w ktrych zastosowano stosunkowo niewielki rozmiar czcionki. Warto te pamita, e sposb wywietlania tekstu na ekranie bardzo czsto zaley od ustawie wprowadzonych przez konkretnego uytkownika.
Do definiowania opcji czcionek program Dreamweaver wykorzystuje zintegrowane arkusze stylw
CSS zamiast przestarzaej metody opartej na atrybutach znacznika font. Wicej informacji na temat arkuszy stylw znajdziesz w lekcji 6.
Moemy zmienia czcionk dla caej strony lub tylko dla zaznaczonego fragmentu tekstu, o czym
przekonasz si, wykonujc ponisze wiczenie.
1. W dokumencie introduction.htm wybierz opcje Modify/Page Properties (modyfikuj/waciwoci

strony) i na licie Category kliknij pozycj Appearance (wygld). Z listy rozwijanej Page font
(czcionka strony) wybierz opcj Arial, Helvetica, sans-serif. Aby zamkn okno dialogowe
Page Properties, kliknij przycisk OK.

Czcionka caego tekstu na naszej stronie zostanie teraz zmieniona na wybran przez nas
Arial, Helvetica, sans-serif. Ta sama czcionka zostanie zastosowana dla kadego kolejnego
fragmentu tekstu, ktry dodamy na stronie w przyszoci.

LEKCJA 2.
Dodawanie waciwej treci do strony WWW

63

Okno dialogowe Page Properties generuje wewntrzny arkusz stylu CSS wykorzystywany do ponownego zdefiniowania zbioru znacznikw (body, td i th) z wybranymi przez nas atrybutami.
Wewntrzne arkusze stylw CSS omwimy w lekcji 6.
Kombinacje czcionek dostpne na licie rozwijanej Page font kategorii Appearance w oknie
dialogowym Page Properties instruuj przegldark, by zmienia stosowan czcionk na jedn
z czcionek nalecych do tych kombinacji wybr konkretnej czcionki zaley od dostpnego
zestawu czcionek zainstalowanych w komputerze odwiedzajcego. Jeli pierwsza czcionka
z wybranej grupy (w tym przypadku Arial) jest niedostpna, przegldarka prbuje wykorzysta
drug czcionk (w tym przypadku Helvetica). Jeli druga czcionka jest niedostpna,
wykorzystywana jest trzecia czcionka (w tym przypadku sans-serif). Jeli adna z czcionek
wybranej kombinacji nie jest dostpna w komputerze uytkownika, tekst jest wywietlany
w domylnej czcionce przegldarki.
2. Zaznacz tekst Introduction to Lights of the Coast: Exploring Lighthouses na samym pocztku strony.

Z listy rozwijanej Font menu w panelu Property inspector wybierz pozycj New Roman, Times, serif.
Wybrana przez nas czcionka dla nagwka zastpuje domylny zbir czcionek dla naszej
strony. Na licie rozwijanej Font panelu Property inspector dostpne s dokadnie takie same
kombinacje czcionek jak te znajdujce si na licie Page font kategorii Appearance w oknie
dialogowym Page Properties.

Wiele opcji formatowania mona zastosowa dla zaznaczonego tekstu bezporednio w oknie dokumentu
wystarczy klikn prawym przyciskiem myszy (w systemach Windows) lub klikn z przytrzymywanym klawiszem Control (w systemach Macintosh z jednoprzyciskowymi myszami), aby uzyska dostp do menu kontekstowego.
Aby odwiedzajcy Twoj witryn uytkownicy mogli zobaczy tekst wywietlany
z wykorzystaniem wybranych przez Ciebie czcionek, czcionki te musz by zainstalowane
na ich komputerach. Nie moesz zakada, e wszystkie czcionki znajdujce si w Twoim
komputerze bd dostpne take w komputerach uytkownikw. W przypadku kadej czcionki,
ktra nie naley do podstawowego zbioru instalowanego z systemem operacyjnym, naley
przyj, e nie jest zainstalowana w komputerze odwiedzajcego. W oglnoci czcionki
uwzgldnione w domylnych zestawach programu Dreamweaver s dostpne w zdecydowanej
wikszoci komputerw, zarwno tych z systemami Windows, jak i Macintosh.

64

MACROMEDIA DREAMWEAVER MX 2004


Oficjalny podrcznik

Jeli chcesz stosowa na swojej stronie czcionki specjalne, ktre prawdopodobnie nie s dostpne w komputerach odwiedzajcych, zaleca si stworzenie grafiki wykorzystywanej w miejscu odpowiedniego
fragmentu tekstu. Ta technika jest czsto wykorzystywana dla nagwkw, tytuw itp. Stosowanie
grafiki nie jest zalecane w przypadku duych blokw tekstu.
Kombinacje czcionek (np. Arial, Helvetica, sans-serif) s przydatne, nie zawsze jednak zawieraj
konkretne czcionki, ktrych chcielibymy uy na naszej stronie. Moemy dowolnie
modyfikowa dostpne kombinacje, jeli wybierzemy opcj Edit Font List (edytuj list czcionek)
z dostpnego w panelu Property inspector menu rozwijanego Font lub klikajc opcje Text/Font/
Edit Font List w obu przypadkach na ekranie zostanie wywietlone okno dialogowe Edit
Font List.

W oknie dialogowym Edit Font List moemy wprowadza wiele istotnych zmian w dostpnych
zbiorach czcionek.
 Aby doda czcionki do istniejcych kombinacji, naley na licie Font list (lista czcionek)

zaznaczy kombinacj czcionek, ktr chcemy zmodyfikowa, i z listy Available fonts


(dostpne czcionki) wybra czcionk, ktr chcemy doda; nastpnie trzeba klikn
umieszczony pomidzy listami Chosen fonts (wybrane czcionki) i Available fonts przycisk
ze strzak skierowan w lew stron, aby doda wybran czcionk do listy Chosen fonts.
 Aby usun czcionk z istniejcej kombinacji, naley zaznaczy kombinacj czcionek,

ktr chcemy zmodyfikowa, i z listy Chosen fonts wybra czcionk, ktr chcemy usun;
nastpnie trzeba klikn umieszczony pomidzy listami Chosen fonts i Available fonts
przycisk ze strzak skierowan w praw stron, aby usun wybran czcionk z listy
Chosen fonts.
 Aby doda kombinacj czcionek, naley wybra pozycj Add fonts in list below

(dodaj czcionki z poniszej listy) z listy Font list. W przypadku kolejnych kombinacji
czcionek naley klikn przycisk oznaczony znakiem plusa w lewym grnym rogu
okna dialogowego i klikn now pozycj Add fonts in list below na licie Font list.
 Aby usun kombinacj czcionek, naley zaznaczy na licie Font list kombinacj czcionek,

ktr chcemy usun, i klikn przycisk oznaczony znakiem minusa w lewym grnym
rogu okna dialogowego Edit Font List.
 Aby doda czcionk, ktra nie jest zainstalowana w naszym systemie, naley wpisa

nazw czcionki w polu tekstowym znajdujcym si bezporednio pod list Available fonts
i klikn przycisk ze strzak, co spowoduje dodanie nowej czcionki do aktualnie
LEKCJA 2.
Dodawanie waciwej treci do strony WWW

65

zaznaczonej kombinacji. Dodawanie czcionek, ktre nie s zainstalowane w lokalnym


komputerze jest przydatne, poniewa tworzc witryny internetowe np. w systemie
Macintosh, moemy wskazywa czcionki typowe dla systemw Windows. Musimy si
jednak upewni, e podane nazwy s w peni zgodne z nazwami rzeczywistymi.
 Aby zmieni kolejno kombinacji czcionek, naley wybra kombinacj czcionek

i klika przyciski ze strzakami znajdujce si w prawym grnym rogu okna dialogowego.


Lista Available fonts w oknie dialogowym Edit Font List zawiera wycznie czcionki zainstalowane
w naszym komputerze.
3. Zapisz plik i wcz jego podgld w przegldarce internetowej.

Tekst jest teraz wywietlany w przegldarce za pomoc wybranych przez nas czcionek
wygld strony zaley od tego, ktre ze wskazanych przez nas czcionek s zainstalowane
w naszym komputerze.
Moemy w prosty sposb usun ustawienia czcionek i przywrci ustawienia domylne wystarczy
zaznaczy interesujcy nas tekst i w panelu Property inspector z menu rozwijanego Font wybra pozycj
Default Font (czcionka domylna) lub wybra kolejno opcje Text/Font/Default Font (tekst/czcionka/
czcionka domylna).

Zmiana rozmiaru czcionki


Jzyk HTML oferuje bardzo ograniczony zestaw opcji dotyczcy dostosowywania rozmiarw
czcionek. Rozmiar tekstu jest definiowany w formie atrybutu znacznika <font> (bdcego czci
kodu HTML definiujc waciwoci tekstu) i opiera si na systemie wzgldnych i bezwzgldnych
rozmiarw. Jeli jeste przyzwyczajony do opracowywania materiaw do druku, np. czasopism
lub broszur, moesz by zawiedziony brakiem kontroli typograficznej. Dostpne w jzyku HTML
atrybuty czcionek zapewniaj zaledwie minimaln kontrol nad wygldem tekstu znacznie lepsze efekty daje zastosowanie arkuszy stylw CSS, w ktrych twrcy stron WWW mog bardzo precyzyjnie definiowa wygld stron z tekstem.
Przestarzae atrybuty znacznika HTML <font>, w tym odpowiedzialny za rozmiar atrybut size,
nie s ju w programie Dreamweaver obsugiwane. Zamiast tego udostpniany jest szereg wstpnie
zdefiniowanych ustawie, wcznie z wartociami numerycznymi z przedziau od 9 do 36, wartociami wzgldnymi z przedziau od xx-small do xx-large oraz opcje dla mniejszych i wikszych rozmiarw czcionek. Wszystkie opcje definiujce rozmiar tekstu s umieszczane w arkuszach stylw
CSS. Za pomoc Dreamweavera moemy w najmniejszych szczegach kontrolowa wygld tekstu
na naszych stronach dziki zintegrowanym funkcjom arkuszy CSS. Wicej informacji na temat
funkcjonalnoci arkuszy stylw znajdziesz w lekcji 6.
1. Zaznacz pierwszy wcity akapit na pocztku dokumentu. Z listy Size (rozmiar)

dostpnej w panelu Property inspector wybierz liczb 12. Pozostaw niezmienion warto
pola Measurement (jednostka), czyli pixels (piksele) (patrz rysunek na nastpnej stronie).

66

MACROMEDIA DREAMWEAVER MX 2004


Oficjalny podrcznik

Rozmiary czcionek w systemach Macintosh i Windows bardzo si od siebie rni. Na komputerach Macintosh tekst jest o okoo 25% mniejszy od tego samego tekstu wywietlanego w systemach
Windows rozmiar tekstu wywietlanego na komputerach Macintosh jest mniej wicej rwny
trzem czwartym rozmiaru tego samego tekstu w systemach Windows. Take uytkownicy przegldarek mog zmienia rozmiar czcionki, co moe wpywa na ukad Twoich stron. Musisz wic pamita o projektowaniu i testowaniu swoich stron pod tym ktem tylko w ten sposb bdziesz mg
zapewni estetyczny i czytelny wygld swoich witryn dla moliwie najszerszej grupy odwiedzajcych.
Rozmiar tekstu w zaznaczonym akapicie nieco si zmniejszy tekst akapitu bdzie teraz
drobniejszy od tekstu pozostaych akapitw, dla ktrego nie zastosowalimy formatowania
z nowym rozmiarem. Za kadym razem, gdy wybierzemy rozmiar stosowany po raz pierwszy
na edytowanej stronie, Dreamweaver stworzy nowy styl, ktry zostanie umieszczony na licie
Style w panelu Property inspector. Wszystkie kolejne fragmenty tekstu, dla ktrych zostanie
zastosowany ten sam rozmiar czcionki, bd wykorzystyway ten sam styl. Tworzonym
w ten sposb stylom nadawane s automatycznie generowane nazwy: style1, style2 itd.
Nowe style s tworzone dla kadej unikalnej kombinacji kroju, rozmiaru i koloru czcionki.
Moesz take ustawi domylny rozmiar tekstu dla danego dokumentu w sekcji Appearance okna
dialogowego Page Properties.
Jeli dla zaznaczonego tekstu nie wybrano adnego rozmiaru, zarwno na licie rozwijanej Size,
jak i na licie Style widnieje opcja None. Przegldarki wywietlaj tekst z niezdefiniowanym
rozmiarem w oparciu o swoje domylne ustawienia rozmiarw, ktre w wikszoci przypadkw
s rwnowane wartoci 14 na licie Size (chocia mog si rni w zalenoci od przegldarki
i ustawie wprowadzonych przez uytkownika).
Moesz usun ustawienia dotyczce rozmiaru czcionki i przywrci rozmiar domylny. Aby to zrobi,
w pierwszej kolejnoci musisz zaznaczy interesujcy Ci fragment tekstu. Kliknij nastpnie pozycj
None na licie rozwijanej Style w panelu Property inspector lub wybierz opcje Text/CSS Styles/None
(tekst/style CSS/brak).
Nie moemy wpisywa dowolnych wartoci w polu Size musimy jedynie wybiera spord
dostpnych opcji. Jeli chcemy zastosowa inne rozmiary ni wypisane na licie, musimy
stworzy dodatkowe style tekstu, co nie jest takie trudne, jeli wykorzystamy list Style. Tworzenie
dodatkowych stylw i prac z arkuszami stylw omwimy bardziej szczegowo w lekcji 6.
Dostpne na licie rozwijanej Size numeryczne opcje rozmiaru czcionki mog by Ci znane,
poniewa s bardzo podobne do standardowych rozmiarw wykorzystywanych w edytorach tekstu.
LEKCJA 2.
Dodawanie waciwej treci do strony WWW

67

W poniszej tabeli porwnano wartoci dostpne na licie rozwijanej Size ze standardowymi


wartociami atrybutu size stosowanego w jzyku HTML znacznika <font>.
Porwnanie rozmiarw czcionek: HTML i CSS
Wzgldne rozmiary
tekstu HTML

Bezwzgldne rozmiary
tekstu HTML

Wartoci numeryczne*
na licie Size (CSS)

Wartoci wzgldne
na licie Size (CSS)

9
10

xx-small

12

x-small/smaller

None (domylny)

14

small

+1

18

medium/larger

+2

24

large

+3

+4

x-large
36**
xx-large

* Dla ustawie domylnych, czyli wybranej pozycji pixels na licie rozwijanej Measurement.
** Ta warto numeryczna jest troch wiksza od x-large (6) i troch mniejsza od xx-large (7).

Znacznik HTML <font> definiuje rozmiary tekstu w formie bezwzgldnych wartoci (od 1 do 7)
lub wartoci wzgldnych (od +1 do +7 oraz od 1 do 7). Wybr bezwzgldnego rozmiaru (gdzie 1
reprezentuje rozmiar najmniejszy, a 7 najwikszy) jest najprostszym sposobem definiowania wielkoci stosowanej czcionki. Domylnym bazowym rozmiarem tekstu w przegldarce jest 3. Wybr dodatniej lub ujemnej wartoci wzgldnej powoduje zmian rozmiaru tekstu wzgldem rozmiaru bazowego.
Przykadowo, zastosowanie dodatniej wartoci +1 spowoduje, e rozmiar czcionki bdzie o jeden
punkt wikszy od rozmiaru bazowego. Jeli wybierzemy warto +3 dla rozmiaru czcionki, w rzeczywistoci zmienimy stosowany rozmiar na 6 (3 + 3). Najwikszym rozmiarem czcionki w tym
systemie jest 7, najmniejszym 1. Kady rozmiar czcionki HTML wikszy ni 7 i tak powoduje
wywietlanie tekstu o rozmiarze 7; przykadowo, jeli ustawimy wzgldny rozmiar czcionki na +6,
rozmiar bezwzgldny 3 + 6 bdzie wikszy ni 7, ale w przegldarce nadal wywietlany bdzie
tekst w rozmiarze 7. Wymienione ograniczenia dostpnego w jzyku HTML znacznika <font> nie
dotycz arkuszy stylw CSS, ktre zapewniaj znacznie bardziej elastyczne i uniwersalne metody
definiowania specyfikacji tekstu.

Okrelanie koloru czcionki


Kiedy zmieniamy kolor ta naszej strony (robilimy to w poprzedniej lekcji), moemy take wpa
na pomys zmiany koloru wywietlanego tekstu, aby unikn problemu z pokrywajcymi si barwami tych dwch elementw. Przykadowo, czarny tekst nie bdzie widoczny na czarnym tle. Wybierajc schemat kolorw dla swojego dokumentu, staraj si dobiera pasujce do siebie barwy,
ktre zapewni odpowiedni kontrast. Zbytnio zblione kolory mog by trudne do rozrnienia,
szczeglnie na ekranie komputera. W poniszych krokach zmienimy domylny kolor czcionki w dokumencie introduction.htm.
68

MACROMEDIA DREAMWEAVER MX 2004


Oficjalny podrcznik

1. Wybierz opcje Modify/Page Properties i na licie Category zaznacz pozycj Appearance.

Na ekranie pojawi si okno dialogowe Page Properties z kilkoma polami umoliwiajcymi


dostosowanie do naszych potrzeb wielu rnych ustawie dokumentu.
2. Kliknij pole koloru dla opcji Text color (kolor tekstu).

Zostanie rozwinita paleta kolorw podobna do tej, ktr wykorzystywalimy do definiowania


koloru ta dokumentu w poprzedniej lekcji.
3. Wybierz ciemny, czerwonawy kolor z kodem szesnastkowym rwnym #330000 i kliknij

przycisk OK.

Aby wybra kolor, moesz albo wpisa kod szesnastkowy koloru w polu tekstowym,
albo klikn prbk odpowiadajcego Ci koloru na palecie. Po klikniciu przycisku OK
okno dialogowe Page Properties zostanie zamknite i powrcimy do naszego dokumentu.
Program Dreamweaver oferuje szereg wstpnie wyznaczonych bezpiecznych schematw kolorw.
Aby otworzy odpowiednie okno dialogowe i wybra jeden z nich, kliknij opcje Commands/Set Color
Scheme (polecenia/ustaw schemat kolorw). W otwartym w ten sposb oknie dialogowym w kolumnie po lewej stronie moesz wybra kolor ta, w rodkowej kolumnie znajduj si dostpne opcje
dla kolorw tekstu i czy. W prawej kolumnie prezentowany jest podgld wybranej kombinacji.
Kliknij przycisk Apply (zastosuj), aby zobaczy wpyw nowych ustawie w swoim dokumencie bez
koniecznoci zamykania okna dialogowego. Kliknij przycisk OK, aby zaakceptowa wprowadzone
zmiany, zamkn okno dialogowe i wrci do dokumentu.
4. Zaznacz w dokumencie tekst Introduction to Lights of the Coast: Exploring Lighthouses.

W panelu Property inspector kliknij przycisk Text Color Picker.


Na ekranie zostanie wywietlona paleta bezpiecznych kolorw.
5. Wybierz kolor ciemnoniebieski (#003366).

LEKCJA 2.
Dodawanie waciwej treci do strony WWW

69

W niektrych sytuacjach, kiedy stosujesz formatowanie tekstu polegajce na zmianie czcionki, rozmiaru lub koloru, odpowiednie pola w panelu Property inspector mog wyglda na puste. W takich
przypadkach moesz odwiey panel Property inspector, klikajc obszar okna dokumentu poza tekstem, dla ktrego chcesz zastosowa formatowanie. Nastpnie ponownie kliknij tekst, dla ktrego
zastosowae formatowanie, a w odpowiednich polach tekstowych panelu zostan wywietlone uyte
przez Ciebie wartoci.
Paleta kolorw zamyka si automatycznie w momencie kliknicia ktrej z prbek barw
program Dreamweaver stosuje wybrany przez Ciebie kolor natychmiast. Podobnie jak
w przypadku opcji kroju i rozmiaru czcionki, kolor czcionki jest definiowany za pomoc
zintegrowanych arkuszy stylw CSS. Stosujc nowy kolor, zmodyfikowalimy styl stworzony
w momencie wybrania kroju czcionki dla zaznaczonego tekstu. Nazwa tego stylu jest widoczna
na licie rozwijanej Style w panelu Property inspector. Jeli eksperymentowae z krojami, rozmiarami
i atrybutami kolorw czcionek, numer Twojego nowego stylu moe si rni od tego, ktry
jest widoczny na poniszym zrzucie ekranu.

Okno dialogowe Colors mona otworzy, wybierajc opcje Text/Color. Uytkownicy systemw
Windows mog wykorzystywa to okno do wybierania kolorw z penego spektrum barw,
mog uy specjalnego suwaka, mog wybra spord czterdziestu omiu prbek podstawowych
kolorw lub stworzy wasne kolory w najwikszym stopniu odpowiadajce ich potrzebom.
Uytkownicy komputerw Macintosh mog w oknie dialogowym Colors wybra jedn z wielu
metod dobierania i definiowania kolorw: Color Wheel (koo kolorw), Color Sliders (suwaki
kolorw), Color Palettes (palety kolorw), Image Palettes (inaczej Spectrum) oraz Crayons (pastele).
Mona take wpisywa szesnastkowe kody kolorw bezporednio w polu tekstowym obok
ikony wyboru koloru w panelu Property inspector.
Moesz ledzi szesnastkowe kody kolorw wykorzystywane na Twoich witrynach za pomoc panelu
Assets. Panel ten naley do grupy paneli Files (w systemach Macintosh z powodu wspomnianego
ju bdu w programie Dreamweaver grupa paneli Files moe mie zmienion nazw na Assets).
Panel Assets moesz take otworzy za pomoc opcji Window/Assets. Aby uzyska dostp do zasobw kolorw, kliknij ikon Colors w lewej kolumnie panelu Assets. Za pomoc przyciskw opcji na
grze panelu Assets moesz wybra jeden z dwch trybw wywietlania kolorw: Site (uyte w witrynie) i Favorities (ulubione). Klikajc przycisk opcji Site list, spowodujesz wywietlenie kolorw,
ktre zostay ju uyte w projekcie Lights of the Coast lub innej aktualnie edytowanej witrynie. Lista
nie bdzie zawieraa adnych kolorw, jeli w danej witrynie nie zastosowae jeszcze formatowania
kolorami. Jeli zdefiniowae jakie kolory, ktrych nie ma na licie, kliknij przycisk Refresh Site
List w prawym dolnym rogu panelu.

70

MACROMEDIA DREAMWEAVER MX 2004


Oficjalny podrcznik

Na licie znajd si kolory, ktrych jeszcze nie stosowae, poniewa istniej kolory wykorzystywane
w dokumentach umieszczonych w pozostaych (stworzonych na potrzeby innych lekcji) folderach
projektu Lights of the Coast. Aby zapewni spjno schematw kolorw stosowanych w caej witrynie, moesz zapisa najczciej wykorzystywane kolory w grupie ulubione panelu Assets. Musisz jedynie zaznaczy ulubiony kolor na licie Site i klikn przycisk Add to Favorities znajdujcy si
w prawym dolnym rogu panelu Assets. Dreamweaver wywietli okno dialogowe informujce Ci,
e wybrana barwa zostaa dodany do listy Twoich ulubionych kolorw. Aby zapozna si z pen
list ulubionych kolorw, musisz teraz klikn przycisk opcji Favorities na grze panelu Assets.

Dodawanie znakw specjalnych


Pracujc w programie Dreamweaver, musimy niekiedy uy znaku, do ktrego nie mamy bezporedniego dostpu z klawiatury. Takie znaki maj specyficzne kody HTML lub trudne do zapamitania skrty klawiszowe.
1. Umie punkt wstawiania w nowym wierszu na samym dole dokumentu introduction.htm.

Strony WWW czsto zawieraj stopki z informacjami o prawach autorskich. W stopkach


umieszcza si przewanie take tekstowe cza do gwnych sekcji witryny, a niekiedy take
dane kontaktowe autora lub administratora witryny.
2. W pasku Insert wybierz opcj Text. Kliknij przycisk Characters i wybierz znak (prawa autorskie

ang. copyright), aby wstawi go w nowym wierszu na samym dole dokumentu. Na prawo
od znaku praw autorskich wpisz tekst: 2003, Lights of the Coast.
Podobnie jak w przypadku pozostaych menu paska Insert ikona reprezentujca menu Characters
zmieni si w zalenoci od tego, jaki element wybralimy w tym menu po raz ostatni.
Uytkownicy systemw Macintosh: Jeli po wybraniu kategorii Text na pasku Insert nie
widzisz ikony reprezentujcej menu Characters, by moe bdziesz musia powikszy pasek
Insert. Aby to zrobi, kliknij i przecignij prawy dolny naronik paska w prawo w ten
sposb zwikszysz jego szeroko (patrz rysunek na nastpnej stronie).
Znak jest wstawiany w nowym wierszu w momencie kliknicia odpowiedniej ikony
w menu znakw.

LEKCJA 2.
Dodawanie waciwej treci do strony WWW

71

Chocia rozwijane menu Characters w kategorii Text paska Insert daje Ci moliwo uzyskania
szybkiego dostpu do najczciej stosowanych znakw, nie znajdziemy w nim wszystkich potrzebnych
znakw specjalnych. Jeli znak, ktrego chcemy uy, nie jest dostpny w menu Characters, moemy go
znale, klikajc pozycj Other Characters na samym dole tego menu lub wybierajc opcje Insert/
HTML/Special Characters/Other. Kiedy wybierzemy potrzebny nam znak w oknie dialogowym
Insert Other Character, w polu tekstowym na w lewym grnym rogu tego okna pojawi si odpowiedni
kod HTML. Po wskazaniu znaku, ktrego chcesz uy na swojej stronie, kliknij przycisk OK.

Dodawanie poziomych linii


Pozioma linia (ang. horizontal rule) peni rol wizualnego separatora sekcji w dokumencie. W tym
wiczeniu dodamy poziom lini nad informacj o prawach autorskich.
1. Umie punkt wstawiania na samym pocztku stworzonego w poprzednim wiczeniu wiersza

powiconego prawom autorskim. Na pasku Insert wska kategori HTML i kliknij przycisk
Horizontal Rule.

72

MACROMEDIA DREAMWEAVER MX 2004


Oficjalny podrcznik

Moesz take umieci punkt wstawiania w odpowiednim miejscu w dokumencie i wybra opcje
Insert/HTML/Horizontal Rule (wstaw/HTML/pozioma linia).
Po wstawieniu poziomej linii nowy element w oknie dokumentu jest zaznaczony.
Linia znajduje si bezporednio nad informacjami o prawach autorskich, ktre zostay
tym samym sprowadzone o jeden wiersz w d (pod wstawiony przed momentem element).
Jeli pasek Insert jest niewidoczny, wybierz opcje Window/Insert (okno/wstaw).
2. Majc cay czas zaznaczon poziom lini, w dostpnym w panelu Property inspector polu

tekstowym W (reprezentujcym szeroko) wpisz warto 70. Z listy rozwijanej znajdujcej si


bezporednio obok tego pola tekstowego wybierz pozycj %.

Dugo poziomej linii bdzie teraz rwna 70% szerokoci okna przegldarki,
niezalenie od jego rozmiarw. Linia jest wywietlana w przegldarkach w postaci
cienkiej poprzeczki.

Aby zdefiniowa bezwzgldn szeroko, wybierz z tej samej listy rozwijanej opcj pixels. Jeli zdecydujesz si na takie rozwizanie, dugo linii nie bdzie modyfikowana wraz ze zmianami rozmiarw okna przegldarki.
3. Majc cay czas zaznaczon poziom lini, w panelu Property inspector usu zaznaczenie pola

wyboru Shading. W polu tekstowym H (reprezentujcym wysoko, czyli grubo) wpisz teraz
warto 1.
Usuwajc zaznaczenie pola wyboru Shading (cieniowanie), spowodujesz, e linia bdzie
wywietlana jako jednolity odcinek. Wysoko (grubo) linii bdzie teraz rwna 1.
Wybierajc odpowiednie opcje z menu Align (wyrwnanie), moesz take wyrwna
lini do lewej, do rodka lub do prawej. Domylnym sposobem wyrwnania linii
poziomych jest wyrodkowanie. W tym wiczeniu pozostawiamy wanie domylne
wyrwnanie do rodka.
4. Majc cay czas zaznaczon poziom lini, w panelu Property inspector kliknij menu Class.

Z listy Class wybierz styl stworzony podczas stosowania wczeniej w tej lekcji ciemnoniebieskiego
koloru dla tekstu nagwka. Zapisz dokument i wcz jego podgld w oknie przegldarki
internetowej.

LEKCJA 2.
Dodawanie waciwej treci do strony WWW

73

Nazwy stylw wykorzystywanych w dokumencie s wywietlane wrd zdefiniowanych dla


nich krojw i kolorw czcionek. Styl wybierany w tym wiczeniu powinien mie nazw style1
(oznaczenie to moe jednak by inne, jeli w wczeniej tworzye inne style, eksperymentujc
z krojami, rozmiarami i atrybutami kolorw czcionek). Chocia kolor poziomej linii moe
si w programie Dreamweaver nie zmieni (moe nadal by wywietlany domylny kolor
szary), podgld w przegldarce internetowej powinien ju przedstawia ciemnoniebiesk
poziom lini na naszej stronie.
Zwr uwag na sposb, w jaki pozioma linia jest wywietlana w oknie przegldarki.
Moesz go zmodyfikowa, zaznaczajc t lini i zmieniajc wartoci odpowiednich atrybutw
w panelu Property inspector. Nad i pod poziom lini wprowadzono spore odstpy iloci tej
wolnej przestrzeni nie moemy w aden sposb kontrolowa.

Automatyczne dodawanie daty


Niekiedy konieczne jest ledzenie dat ostatnich modyfikacji strony nalecej do naszej witryny lub
informowanie odwiedzajcych o czasie ostatniej aktualizacji ogldanej przez nich strony. Z tego
powodu program Dreamweaver oferuje moliwo umieszczania daty i czasu na naszych stronach.
Co wicej, Dreamweaver moe automatycznie aktualizowa dat i czas za kadym razem, gdy zapisujemy nasz dokument, dziki czemu nie bdziemy musieli wprowadza odpowiednich danych
rcznie.

Tak wstawiana data oczywicie nie jest elementem dynamicznym zmieniajcym si pod wpywem
czasu odwiedzania strony przez uytkownika. Data ma na celu jedynie informowanie odwiedzajcych, kiedy Twoje strony byy po raz ostatni aktualizowane. Daty dynamiczne s zwykle generowane za pomoc jzyka JavaScript (wicej informacji na jego temat znajdziesz w lekcji 11.).
1. Umie punkt wstawiania na kocu wiersza z informacj o prawach autorskich, wstaw podzia

wiersza i wpisz sowo Updated.


Informacje o dacie aktualizacji s czsto umieszczane w prawym grnym rogu witryn
z wiadomociami lub na samym dole stron nalecych do pozostaych witryn informacyjnych.
2. Aby umieci na stronie aktualn dat, na pasku Insert wska kategori Common i kliknij

przycisk Date.

Do otwierania okna dialogowego Insert Date (wstaw dat) moesz take wykorzystywa opcje
Insert/Date (wstaw/data).

74

MACROMEDIA DREAMWEAVER MX 2004


Oficjalny podrcznik

Na ekranie pojawi si okno dialogowe Insert Date.

3. Z listy rozwijanej Day format (format dnia) wybierz opcj Thursday (czwartek). Na licie Date

format (format daty) zaznacz pozycj March 7, 1974 (7 marca 1974). Z listy rozwijanej Time
format (format czasu) uytkownicy systemw Windows powinni wybra pozycj 10:18 PM,
natomiast uytkownicy systemw Macintosh powinni wybra 9:18 PM. Zaznacz pole wyboru
Update automatically on save (automatycznie aktualizuj podczas zapisywania), aby Dreamweaver
automatycznie aktualizowa dat na stronie za kadym razem, gdy bdziesz zapisywa swj
dokument. Kliknij przycisk OK.
W dokumencie zosta wywietlony aktualny dzie tygodnia, data i czas wszystkie
te informacje bd si zmieniay za kadym razem, gdy bdziesz zapisywa dokument. Thursday
(czwartek) w oknie dialogowym Insert Date peni jedynie rol przykadu dnia wywietlanego
w Twoim dokumencie. Wybierana data i czas take s tylko przykadami formatowania tych
informacji.
Jeli wczymy opcj automatycznego aktualizowania daty, bdziemy mogli zmieni jej format
w dowolnym momencie po wstawieniu tego elementu. Aby zmieni stosowany format, umie w tej
dacie punkt wstawiania w swoim dokumencie i kliknij Edit date format (edytuj format daty)
w panelu Property inspector. Program Dreamweaver raz jeszcze wywietli okno dialogowe Insert
Date. Wprowad odpowiednie zmiany i kliknij przycisk OK. Nowe ustawienia zostan zastosowane w dokumencie. Edycja formatu daty w oknie dialogowym Insert Date nie jest moliwa, jeli
wyczye opcj jej automatycznego aktualizowania aby zaktualizowa tak dat, bdziesz
musia j usun i ponownie wstawi lub samodzielnie zmieni wstawiony wczeniej tekst w oknie
dokumentu.

Dodawanie tekstu Flasha


Kiedy dodajesz do swojej strony nagwek, moesz albo wykorzysta tekst i sformatowa go jako
nagwek, albo stworzy i wstawi na stronie specjalny plik graficzny (wicej informacji na temat
stosowania grafiki na stronach znajdziesz w lekcji 3.). Tekst sformatowany jako nagwek jest
wczytywany szybko, poniewa z punktu widzenia komunikacji internetowej niczym nie rni si
od zwykego tekstu (jest tylko inaczej wywietlany w oknie przegldarki). Stosowanie grafiki dla
nagwkw rozwizuje problem ograniczonego wyboru czcionki, ale wymaga zastosowania programu graficznego i powicenia czasu (ktrego czsto brakuje podczas opracowywania witryn internetowych) na stworzenie potrzebnego obrazu.
LEKCJA 2.
Dodawanie waciwej treci do strony WWW

75

Tekst Flasha oferuje najlepsze cechy obu przedstawionych powyej rozwiza. Moemy wykorzysta dowoln wybran przez siebie czcionk i stworzy tekst bezporednio w programie Dreamweaver. Stworzony przez nas tekst zostanie zapisany jako may plik Flasha czyli plik z popularnym
rozszerzeniem .swf.
Tworzenie i praca z tekstem Flasha co prawda jest szybka i atwa, jednak przed zastosowaniem
tego typu obiektw zawsze powiniene mie na uwadze ewentualny brak odpowiednich rozszerze
(ang. plug-in) w przegldarkach goci Twoich witryn.
1. Umie punkt wstawiania w nowym pustym wierszu akapitu ponad list rozpoczynajc si

od sw The Lighthouse of Alexandria (Egypt). Kliknij ikon Media w kategorii Common paska Insert
i z rozwinitego menu wybierz opcj Flash Text.

Upewnij si, e nie wybrae opcji Flash lub Flash Button. W tym wiczeniu mamy zamiar
stworzy jedynie tekst Flasha. Opcja Flash umoliwia nam wstawianie na stronie animacji
Flasha, natomiast opcja Flash Button daje nam moliwo tworzenia interesujcych przyciskw.
Program Dreamweaver wywietli okno dialogowe Insert Flash Text (wstaw tekst Flasha).
2. Wprowad nastpujce zmiany:
 Z listy rozwijanej Font wybierz czcionk Comic Sans MS. Jeli czcionka Comic Sans MS

jest niedostpna, wybierz jak inn.


 W polu tekstowym Size wpisz warto 22.
 Wykorzystaj ikon Color do wybrania koloru ciemnoczerwonego.
 W polu Text wpisz: Some of the worlds most notable lighthouses include:.
 W polu tekstowym Bg color (kolor ta) wpisz kod szesnastkowy #CCCC99 lub uyj pipety

i kliknij obszar ta w oknie dokumentu (patrz rysunek na nastpnej stronie).


3. W polu tekstowym Save as wpisz notable.swf i kliknij przycisk OK.

Okno dialogowe Insert Flash Text zostanie zamknite.

76

MACROMEDIA DREAMWEAVER MX 2004


Oficjalny podrcznik

Zaraz po wczeniu okna dialogowego Insert Flash Text w polu tekstowym Save as znajduje si automatycznie wygenerowana nazwa pliku. Domylne nazwy s generowane z kolejnymi identyfikatorami
numerycznymi: np. text1.swf, text2.swf itd. Zaleca si zastpowanie ich nieco bardziej opisowymi nazwami tworzonych plikw tekstu Flasha. Domyln lokalizacj, w ktrej zapisywane s pliki tekstu
Flasha, jest ten sam folder, w ktrym znajduje si plik HTML, do ktrego wstawiamy obiekty jeli
chcesz, moesz oczywicie zapisywa tworzone pliki w innym folderze, np. w folderze obrazw lub mediw).
Tekst Flasha zostanie wywietlony w dokumencie. W panelu Property inspector bd teraz dostpne
atrybuty stworzonego przed chwil pliku tekstu Flasha notable.swf.
4. W oknie dokumentu zaznacz tekst Flasha i zmie jego rozmiar, przecigajc jeden z jego

uchwytw.
Moesz dowolnie zdefiniowa rozmiar swojego tekstu Flasha. Poniewa tekst ten ma
charakter grafiki wektorowej, inaczej ni typowy tekst podstawowy lub grafika rastrowa,
moesz zmienia jego rozmiar bezporednio w oknie dokumentu. Moesz zwiksza
i zmniejsza rozmiar tego obiektu, nie obawiajc si utraty jakoci.
Modyfikowanie rozmiarw obrazw graficznych (patrz lekcja 3.) w programie Dreamweaver
nie jest zalecane. Poniewa jednak stworzony przez Ciebie tekst Flasha jest grafik wektorow,
moesz zmienia jego rozmiary w dowolny odpowiadajcy Ci sposb. W przeciwiestwie
do grafiki rastrowej (np. obrazw GIF lub JPEG), skalowanie grafiki wektorowej nie powoduje
utraty jej jakoci.
Aby zachowa proporcje, podczas modyfikowania rozmiaru tekstu Flasha przytrzymaj klawisz Shift.
5. Zapisz dokument i wcz jego podgld w oknie przegldarki internetowej.

Tekst w przegldarce wyglda dokadnie tak samo jak w oknie dokumentu programu
Dreamweaver.
LEKCJA 2.
Dodawanie waciwej treci do strony WWW

77

W tekcie Flasha moesz take ustawi kolor cza i efektu rollover. Przycisk Play w panelu Property inspector umoliwia podgld wpywu tych ustawie na wygld tekstu Flasha bezporednio w programie
Dreamweaver. cza omwimy w lekcji 4., natomiast efektami rollover i innymi elementami interaktywnymi zajmiemy si w lekcji 11.

Modyfikowanie tekstu Flasha


Modyfikowanie obiektw testu Flasha w programie Dreamweaver jest bardzo proste. Zmiany mog
dotyczy zarwno samej treci, jak i waciwoci tekstu (takich jak czcionka czy kolor).
1. W oknie dokumentu kliknij dwukrotnie obiekt tekstu Flasha.

Jeli nie moesz zaznaczy tekstu, kliknij najpierw przycisk Stop w panelu Property inspector.
Program Dreamweaver wywietli okno dialogowe Insert Flash Text.
2. Zmie odpowiednie opcje i kliknij przycisk Apply, aby zapozna si z efektami wprowadzonych

modyfikacji. Kiedy skoczysz, kliknij przycisk OK, aby zamkn okno dialogowe Insert Flash Text.
Zmieniony obiekt tekstu Flasha zostanie odwieony na stronie, a jednoczenie
zaktualizowany zostanie odpowiedni plik .swf.

Podsumowanie
Podczas niniejszej lekcji wykonalimy nastpujce zadania:
 Nauczylimy si, jak naley ustawia waciwoci tekstu i zapoznalimy si z rnymi

sposobami importowania tekstu (strony 48 53).


 Rozmiecilimy tekst, stosujc akapity, znaki podziau oraz opcje wyrwnywania (strony 54 55).
 Stworzylimy trzy typy list i zmodyfikowalimy ich ustawienia (strony 56 61).
 Wykorzystalimy okno dialogowe Page Properties i panel Property inspector do formatowania

stylu, rozmiaru i koloru tekstu (strony 61 71).


 Dostosowalimy do naszych potrzeb kombinacje i ustawienia czcionek (strony 61 71).
 Wstawilimy na stronie znaki specjalne (strony 71 72).
 Wstawilimy na stron dat i wczylimy opcj jej automatycznej aktualizacji przy kadym

zapisaniu dokumentu (strony 74 75).


 Stworzylimy i edytowalimy tekst Flasha (strony 75 78).

78

MACROMEDIA DREAMWEAVER MX 2004


Oficjalny podrcznik

You might also like