Adobe Dreamweaver

CS3/CS3 PL.
Oficjalny podrcznik
Autor: Adobe Creative Team
Tumaczenie: Piotr Cielak
ISBN: 978-83-246-1271-0
Tytu oryginau: Adobe Dreamweaver
CS3 Classroom in a Book
Format: B5, stron: okoo 330
Zawiera CD-ROM

Dreamweaver CS3/CS PL twrcze i funkcjonalne rozwizanie

do tworzenia stron oraz aplikacji internetowych
Praca z tekstem i grafik
Projektowanie stron WWW
Tworzenie formularzy
Dodawanie elementw multimedialnych
Adobe Dreamweaver CS3/CS3 PL. Oficjalny podrcznik to ksika zarwno dla
webmasterw, jak i tych, ktrzy chc komfortowo, ale te sprawnie zarzdza stron
internetow wasnej firmy. Ksika zawiera wiele cennych informacji, ktre pozwalaj
w kreatywny sposb wykorzystywa cay potencja tego programu.

Poszczeglne wiczenia zostay przedstawione w sposb przejrzysty i atwy do

realizacji. Dlatego Adobe Dreamweaver CS3/CS3 PL stanowi znakomity podrcznik,
zawierajcy nie tylko podstawowe informacje o programie, ale rwnie opisy jego
zaawansowanych funkcji oraz szereg wskazwek, rozwiza i porad, ktre pozwalaj
pracowa szybciej i wydajniej. Korzystajc z Oficjalnego podrcznika, dowiesz si, jak
tworzy strony WWW, zarzdza nimi, a take projektowa multimedialne serwisy
internetowe, ktrych funkcjonalno i efektywno jest dzi tak istotna w dziaalnoci
kadego przedsibiorstwa.

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

Kaskadowe arkusze stylw

Technologia AJAX
Projektowanie makiet i formularzy
Tworzenie czy
Konfiguracja ustawie dostpu
Dodawanie elementw multimedialnych
Elementy graficzne, filmy wideo i animacje
Konfigurowanie zdalnego serwisu

Kreatywny program dla kreatywnych uytkownikw!

Spis treci
Wstp
O ksice .............................................................................................. 11
Wymagania ........................................................................................... 11
Instalowanie programu ......................................................................... 12
Kopiowanie materiaw znajdujcych si na pycie CD
doczonej do ksiki ............................................................................ 12
Konfiguracja ustawie........................................................................... 13
Dodatkowe materiay ........................................................................... 13
Certyfikaty Adobe ................................................................................ 14

Wstp do programu Dreamweaver CS3

Wybr pocztkowego szablonu CSS ................................................... 18
Zapisywanie strony............................................................................... 19
Zmiana tytuu strony ............................................................................ 20
Zmiana nagwkw .............................................................................. 20
Wstawianie tekstu ................................................................................ 21
Wstawianie elementw graficznych ..................................................... 22
Tworzenie czy do innych stron ......................................................... 24
Wybieranie i edytowanie stylw CSS .................................................. 25
Wywietlanie podgldu strony w przegldarce ................................... 32
Podsumowanie ..................................................................................... 36

Konfigurowanie przestrzeni roboczej

Wycieczka po przestrzeni roboczej ..................................................... 39
Projektowanie niestandardowych przestrzeni roboczych................... 55
Obsuga panelu Properties (Waciwoci) ........................................... 56
Konfigurowanie paskw narzdzi ........................................................ 59
Konfiguracja preferencji ....................................................................... 64
Podsumowanie ..................................................................................... 66

6 SPIS TrECI

Kaskadowe arkusze stylw (CSS)

Konfigurowanie serwisu w programie Dreamweaver ......................... 69
Podgld ukoczonego projektu ............................................................ 71
Doczanie zewntrznego arkusza stylw ........................................... 72
Tworzenie nowej reguy CSS ............................................................... 75
Uywanie stylw................................................................................... 80
Zmiana waciwoci w ramach regu .................................................... 82
Tworzenie arkusza stylw na potrzeby druku ..................................... 83
Podsumowanie ..................................................................................... 90

Praca z tekstem
Przegld ukoczonego projektu ........................................................... 93
Tworzenie nagwkw i tekstu akapitowego ...................................... 94
Importowanie materiau tekstowego z innych rde ......................... 97
Tworzenie list numerowanych i punktowanych ................................ 100
Sprawdzanie pisowni w dokumencie.................................................. 102
Wyszukiwanie i zastpowanie tekstu ................................................. 104
Tworzenie tabel .................................................................................. 106
Importowanie danych tabelarycznych ................................................ 110
Podsumowanie ................................................................................... 113

Elementy graficzne
Przegld ukoczonego projektu ......................................................... 115
Wstawianie zdj................................................................................ 116
Elementy graficzne w tle ..................................................................... 120
Optymalizacja elementw graficznych ............................................... 122
Doczanie elementw typu rollover z programu Fireworks ........ 127
Umieszczanie w projekcie plikw programu Photoshop ................... 131
Kopiowanie i wklejanie elementw graficznych
z programu Photoshop ....................................................................... 134
Program Bridge................................................................................... 136
Podsumowanie ................................................................................... 139

cza
Przegld ukoczonego projektu ......................................................... 143
cza do stron nalecych do tego samego serwisu .......................... 144
Tworzenie czy do stron zewntrznych ........................................... 147
Tworzenie czy e-mail ....................................................................... 148
cza w obrbie strony ...................................................................... 149
Podsumowanie ................................................................................... 153

Projektowanie makiet
Przegld ukoczonego projektu ......................................................... 155
Projektowanie elementw strony przy uyciu znacznikw <div> ...... 156
Eksportowanie stylw CSS................................................................. 178
Miarki i linie pomocnicze .................................................................... 180
Podsumowanie ................................................................................... 184

Projektowanie interaktywnych stron WWW

Kilka informacji o zachowaniach programu Dreamweaver ............... 187
Przegld ukoczonego projektu ......................................................... 190
Konfigurowanie zachowa ................................................................. 192
Otwieranie dodatkowego okna przegldarki ..................................... 197
Modyfikacja zachowa ........................................................................ 199
Wywietlanie i ukrywanie fragmentw strony .................................. 202
Podsumowanie ................................................................................... 208

Technologia AJAX i platforma Spry

Kilka sw o technologii Ajax i platformie Spry ................................. 211
Przegld ukoczonego projektu ......................................................... 213
Doczanie danych XML ..................................................................... 215
Tworzenie zestaww danych Spry ..................................................... 220
Tworzenie szczegowych obszarw Spry ..................................... 223
Tworzenie kontrolek Spry ................................................................. 226
Stosowanie efektw Spry ................................................................... 232
Podsumowanie ................................................................................... 235

8 SPIS TrECI

10

Projektowanie formularzy
Przegld ukoczonego projektu ......................................................... 237
Oglne informacje o formularzach .................................................... 240
Umieszczenie formularza na stronie .................................................. 241
Wstawianie pl tekstowych ............................................................... 243
Przyciski opcji ..................................................................................... 255
Tworzenie pl wyboru ....................................................................... 258
Tworzenie list ..................................................................................... 261
Tworzenie przycisku wysyania danych .............................................. 264
Projektowanie stylw dla formularzy................................................. 265
Podsumowanie ................................................................................... 270

11

Dodawanie elementw multimedialnych

Przegld ukoczonego projektu ......................................................... 273
Umieszczanie animacji Flash na stronie WWW ................................ 275
Wywietlanie filmw wideo przy uyciu technologii Flash ................ 279
Pokazy slajdw Flash........................................................................... 282
Podsumowanie ................................................................................... 290

12

Publikowanie strony w Internecie

Konfigurowanie zdalnego serwisu ...................................................... 293
Walidacja strony internetowej ........................................................... 305
Publikowanie strony w Internecie ...................................................... 307
Podsumowanie ................................................................................... 310
Skorowidz ........................................................................................... 311

5 Elementy graficzne
W trakcie tej lekcji dowiesz si, jak wzbogaci projektowan stron internetow o elementy
graficzne. Nauczysz si midzy innymi, w jaki sposb:

Umieszcza zdjcia w projekcie.

Wstawi element graficzny w tle strony.

Zoptymalizowa obraz umieszczony w projekcie.

Doda aktywne elementy strony typu rollover z programu Adobe Fireworks.

Importowa dokumenty programu Photoshop.

Kopiowa i wkleja elementy graficzne z Photoshopa.

Posugiwa si programem Adobe Bridge.

Ukoczenie wicze opisanych w tej lekcji powinno zaj okoo 90 minut. Przed przyst
pieniem do ich realizacji upewnij si, e skopiowae na dysk twardy pliki znajdujce si
w folderze Lekcje/Lekcja05 pyty doczonej do ksiki Adobe Dreamweaver CS3/CS3 PL.
Oficjalny podrcznik. Podczas pracy pliki te bd stopniowo zastpowane ich zmodyfiko
wanymi wersjami, a jeli bdziesz w ktrym momencie potrzebowa oryginaw, po prostu
ponownie skopiuj je z pyty CD.

Przegld ukoczonego projektu

Przed przystpieniem do realizacji wicze zaplanowanych na pierwsz cz tej lekcji warto
zapozna si z wygldem ukoczonego projektu w przegldarce internetowej.
1. Uruchom program Adobe Dreamweaver CS3.
2. Jeli to konieczne, nacinij klawisz F8, aby otworzy panel Files (Pliki), i wybierz serwis
DW CIB z listy serwisw.
3. Wywietl zawarto foldera Lekcja05 w panelu Files (Pliki).

116 LEKCJA 5
Elementy graficzne

4. Zaznacz plik images_final.html i nacinij klawisz F12 (Option+F12 w Mac OS).

5. Obejrzyj stron w domylnej przegldarce internetowej.

Zwr uwag mnogo elementw graficznych, zarwno w treci, jak i w tle strony, a take na
aktywne elementy typu rollover na pasku nawigacji.
6. Zamknij przegldark, aby mc wygodnie kontynuowa prac w programie Dreamweaver.

Wstawianie zdj
Zdjcia i obrazy s jednymi z najwaniejszych elementw dowolnej strony internetowej. Program
Dreamweaver umoliwia umieszczanie elementw graficznych w treci strony na kilka rnych
sposobw, z ktrymi zapoznasz si w tym wiczeniu.
1. Wywietl zawarto foldera Lekcja05 w panelu Files (Pliki) i dwukrotnie kliknij plik images_
start.htm, aby go otworzy.
Miejsca, w ktrych w trakcie tej lekcji wstawione zostan zdjcia, wypenione s szarymi zastp
czymi elementami graficznymi.

2. Zaznacz szary prostoktny obrazek z napisem Banner i nacinij klawisz Delete (Backspace
wMac OS).

ADOBE Dreamweaver CS3/CS3 PL 117

Oficjalny podrcznik

3. Kliknij ikon Image (Obraz)

w kategorii Common (Wsplne) paska Insert (Wstaw).

Jeli ikona Image (Obraz) jest niewidoczna, kliknij niewielki przycisk ze strzak znajdujcy si
obok ikony Images (Obrazw) i z menu, ktre si wwczas pojawi, wybierz opcj Image (Obraz).
Podobnie jak to ma miejsce w przypadku innych menu na pasku Insert (Wstaw), tak i tutaj ikona
reprezentujca cae menu odzwierciedla ostatnio wybrany z tego menu element.
4. Gdy na ekranie wywietlone zostanie okno dialogowe Select Image Source (Wybierz rdo
obrazu), odszukaj folder Lekcja05/images i zaznacz plik o nazwie boat. Kliknij przycisk OK.

Dwukrotne kliknicie dowolnego zastpczego obrazka w podgldzie projektu rwnie

spowoduje wywietlenie okna dialogowego Select Image Source (Wybierz rdo obrazu)
iumoliwi zastpienie tego obrazka docelowym zdjciem.
Projektujc stron internetow, warto zadba o to, by bya ona atrakcyjna i przystpna rwnie dla
tych uytkownikw, ktrzy posuguj si asystentami uatwiajcymi dostp do treci publikowa
nych w Internecie, na przykad czytnikami ekranowymi. Jeli chcemy, aby tre wstawionych zdj
moga by przekazana ustnie, musimy doczy do nich krtki opis.
5. Jeli to konieczne, wydaj polecenie Window/Properties (Okno/Waciwoci), aby otworzy
panel Properties (Waciwoci).
6. Upewnij si, e zdjcie dki nadal jest zaznaczone, i w polu Alt w panelu Properties (Waciwoci) wpisz nastpujcy tekst: Red rowboat by the side of a river. Na koniec nacinij klawisz Tab.

Kolejny sposb na umieszczenie zdjcia na stronie wymaga zastosowania panelu Assets (Zasoby).

118 LEKCJA 5
Elementy graficzne

7. Wydaj polecenie Window/Assets (Okno/Zasoby). Gdy na ekranie wywietlony zostanie panel

Assets (Zasoby), kliknij ikon kategorii Images (Obrazy) znajdujc si w lewej grnej czci tego
panelu. Przewi list obrazw, aby odszuka zdjcie o nazwie streetlights.jpg. Zaznacz je.

8. Przecignij podgld zaznaczonego zdjcia z panelu Assets (Zasoby) do okna dokumentu,

zwalniajc przycisk myszy poniej nagwka Bringing light to the dark przed pierwszym akapitem
w kolumnie po lewej stronie.
Inny sposb na wykonanie tego zadania polega na umieszczeniu kursora na pocztku wspomnia
nego akapitu, zaznaczeniu zdjcia streetlights.jpg w panelu Assets (Zasoby) i klikniciu przycisku
Insert (Wstaw) znajdujcego si na samym dole tego panelu.
9. W polu Alt w panelu Properties (Waciwoci) wpisz Streetlights along a road at night.
10. Wydaj polecenie File/Save (Plik/Zapisz).

ADOBE Dreamweaver CS3/CS3 PL 119

Oficjalny podrcznik

Obrazy zastpcze
Obrazy zastpcze uatwiaj zaprojektowanie strony w sytuacji, gdy docelowe fotografie przeznaczone
do umieszczenia w projekcie nie s jeszcze dostpne. Obraz zastpczy, o czym miae okazj prze
kona si w zakoczonym przed chwil wiczeniu (wystpuj one take w kilku innych wiczeniach
wtej ksice), to szary prostokt opatrzony tytuem i informacjami o jego wymiarach. Obrazy zastp
cze pomylane s jedynie jako uatwienie dla projektantw; nie s one wywietlane na przykad na
podgldzie strony w przegldarce (a niektre przegldarki, w tym Internet Explorer, wywietlaj wich
miejscu bd oznaczajcy brak elementu strony). W celu utworzenia obrazu zastpczego wykonaj
nastpujce czynnoci:
1. Umie kursor w miejscu, w ktrym chciaby wstawi obraz zastpczy.
2. Rozwi menu Images (Obrazw) w kategorii Common (Wsplne) paska Insert (Wstaw) i kliknij
ikon Image Placeholder (Obraz zastpczy) .
3. Wpisz nazw obiektu w polu Name (Nazwa) w oknie dialogowym Image Placeholder (Obraz
zastpczy). Nazwa ta wywietlona zostanie porodku obrazu zastpczego wraz z jego aktualnymi
rozmiarami.
Uwaga: Nazwa nie powinna zawiera spacji i znakw specjalnych. Dozwolone s nazwy wykorzystujce
mae i wielkie litery, na przykad naszDom, a take podkrelniki (np. nasz_dom).

4. Podaj szeroko obrazu zastpczego w polu Width (Szeroko) i jego wysoko w polu Height
(Wysoko).
Po wstawieniu obraz zastpczy mona dowolnie skalowa w trybie Design (Projekt).
5. Jeli chciaby wstawi obraz zastpczy w innym kolorze ni domylny neutralny szary, kliknij
prbnik Color (Kolor), aby otworzy prbnik kolorw.
6. W polu Alternative text field (Tekst zastpczy) wpisz tekst zastpczy dla docelowego zdjcia i kliknij
przycisk OK.
W celu zastpienia obrazu zastpczego docelowym elementem graficznym lub fotografi dwukrotnie
kliknij ten obraz i wybierz odpowiedni plik w oknie dialogowym Select Image Source (Wybierz rdo
obrazu). Zarwno nazwa, jak i opis podane podczas tworzenia obrazu zastpczego zostan zachowane
po jego zmianie na docelowe zdjcie.

120 LEKCJA 5
Elementy graficzne

Elementy graficzne w tle

Elementy graficzne na stronach internetowych mona z grubsza podzieli na dwa rodzaje: takie,
ktre umieszczone s w treci strony, oraz takie, ktre peni funkcj ta. Obrazy w treci strony to
najczciej zwyke pliki graficzne (w formacie JPG, GIF lub PNG), ktre umieszczane s wko
dzie projektu przy uyciu znacznika <img> w poprzednim wiczeniu mielimy do czynienia
zdwoma takimi obrazami. W odrnieniu od obrazw w treci strony, elementy graficzne w tle
obsugiwane s z poziomu stylw CSS.
1. Jeli to konieczne, otwrz ponownie plik images_start.htm, ktrym posugiwalimy si
wpoprzednim wiczeniu. Uyj w tym celu panelu Files (Pliki), dwukrotnie klikajc nazw wspo
mnianego pliku.
2. Zaznacz obraz zastpczy o nazwie Logo i nacinij klawisz Delete (Backspace w Mac OS), aby
go usun.
3. Wydaj polecenie Window/CSS Styles (Okno/Style CSS), aby wywietli panel CSS Styles (Style
CSS), jeli zosta on wczeniej ukryty. Kliknij przycisk All (Wszystkie), aby wywietli list wszyst
kich regu CSS.
4. Zaznacz regu #logo na licie regu zdefiniowanych w arkuszu main.css i kliknij ikon Edit
Style (Edytuj styl) .

5. Wybierz kategori Background (To) z listy kategorii po lewej stronie okna dialogowego CSS
Rule Definition for #logo in main.css (Definicja stylu CSS dla #logo w main.css).
6. Kliknij przycisk Browse (Przegldaj) i odszukaj folder Lekcja05/images w oknie dialogowym
Select Image Source (Wybierz rdo obrazu). Zaznacz plik o nazwie logo.gif.

ADOBE Dreamweaver CS3/CS3 PL 121

Oficjalny podrcznik

7. Z listy Repeat (Powtarzanie) wybierz opcj no-repeat (nie powtarzaj) i kliknij przycisk OK.

Domylnie elementy graficzne w tle s powielane w poziomie i w pionie w taki sposb, by wy

peniy ca dostpn przestrze. W celu wywietlenia wybranego obrazu w tle tylko raz naley
wybra opcj no-repeat (nie powtarzaj), dokadnie tak jak zostao to opisane przed chwil.
8. Wydaj polecenie File/Save All (Plik/Zapisz wszystko).

Ze wzgldu na to, e regua #logo zdefiniowana zostaa w zewntrznym arkuszu stylw, program
Dreamweaver automatycznie otworzy plik wymagajcy wprowadzenia opisanej zmiany. W celu
zachowania podanego wygldu strony naley w takim przypadku zapisa zarwno edytowany
dokument, jak i zmodyfikowany arkusz stylw.

122 LEKCJA 5
Elementy graficzne

Optymalizacja elementw graficznych

Optymalizacja elementw graficznych na potrzeby Internetu polega na znalezieniu kompromisu
pomidzy jakoci obrazu a wielkoci pliku, w ktrym obraz ten jest zapisany. Niejednokrotnie
zdarza si, e projektant musi ponownie zoptymalizowa elementy graficzne, ktre zostay wcze
niej umieszczone na stronie. Na szczcie, narzdzia i algorytmy przetwarzania obrazu zaimple
mentowane w programie Dreamweaver pozwalaj zminimalizowa objto pliku przy zachowa
niu akceptowalnej jakoci zdjcia. Kolejne wiczenie ilustruje sposb wykorzystania tych narzdzi
w praktyce i prcz optymalizacji obrazu obejmuje rwnie jego przeskalowanie to kolejne
spord zada, przed jakimi bardzo czsto staj projektanci stron WWW.
1. Jeli to konieczne, otwrz ponownie plik images_start.htm, ktrym posugiwalimy si
wpoprzednim wiczeniu. Uyj w tym celu panelu Files (Pliki), dwukrotnie klikajc nazw wspo
mnianego pliku.
2. Umie kursor na pocztku drugiego akapitu w kolumnie po prawej stronie projektu, tu
przed tekstem zastpczym rozpoczynajcym si od sw Lorem ipsum dolor sit amet.

3. Kliknij ikon Image (Obraz) w kategorii Common (Wsplne) paska Insert (Wstaw).
4. Gdy na ekranie wywietlone zostanie okno dialogowe Select Image Source (Wybierz rdo
obrazu), odszukaj folder Lekcja05/images i wska plik o nazwie gears.jpg. Kliknij przycisk OK.

ADOBE Dreamweaver CS3/CS3 PL 123

Oficjalny podrcznik

Wybrane zdjcie jest nie tylko zdecydowanie zbyt due, biorc pod uwag ilo miejsca dostpne
go w kolumnie po prawej stronie, lecz ma te znaczn objto, wynoszc 103 kB. Zanim jednak
przeskalujemy to zdjcie do rozmiaru pasujcego do projektu strony i powanie je odchudzimy,
zdefiniujmy regu umoliwiajc przesunicie go na prawo wzgldem tekstu.
5. Jeli to konieczne, wydaj polecenie Window/Properties (Okno/Waciwoci), aby otworzy
panel Properties (Waciwoci). Wstawione przed chwil zdjcie nadal powinno by zaznaczone;
jeli tak jest w istocie, wybierz klas o nazwie imageRight z listy Class (Klasa).
Wielko elementw graficznych w programie Dreamweaver mona zmienia przy uyciu trzech
uchwytw wywietlanych na krawdziach zaznaczonego obrazu. Takie rozwizanie nie powoduje
jednak przeskalowania obrazu, lecz zmian wielkoci, w jakiej jest on wywietlany na stronie. Nic
nie stoi jednak na przeszkodzie, by posuy si t funkcj w celu nadania zdjciu podanych
wymiarw na oko skorygowane w ten sposb wymiary zdjcia mona bdzie pniej zatwier
dzi przy uyciu polecenia Optimize (Optymalizuj).

Na krawdzi zaznaczonego zdjcia

wywietlane s trzy uchwyty skalujce

6. Rozpocznij od przecignicia uchwytu znajdujcego si w prawym dolnym rogu zdjcia do

gry i w lewo; podczas przecigania przytrzymaj klawisz Shift, aby zachowa oryginalne propor
cje fotografii. Gdy zmniejszysz zdjcie do okoo 2/3 jego pierwotnych rozmiarw, zwolnij przy
cisk myszy, a chwil pniej take klawisz Shift. Jeli otworzye panel Properties (Waciwoci)
wpoprzednim kroku wiczenia, to sprawd biece wymiary przeskalowanego zdjcia. Szeroko
fotografii powinna wynosi okoo 125 pikseli, a wysoko 188.

W celu dokadniejszego przeskalowania zdjcia koniecznie otwrz panel Properties

(Waciwoci) przed przystpieniem do tej operacji. Wymiary skalowanego elementu graficznego
podawane s bowiem na bieco podczas skalowania.
Gdy rozmiary zdjcia zostan optycznie dopasowane do wolnej przestrzeni na stronie, naley je
przeskalowa i niejako przy okazji zainteresowa si moliwoci zoptymalizowania objtoci
pliku z tym zdjciem.

124 LEKCJA 5
Elementy graficzne

7. Jeli zdjcie jest nadal zaznaczone, kliknij przycisk Optimize (Optymalizuj) w panelu
Properties (Waciwoci). Gdy na ekranie wywietlone zostanie okno dialogowe Image Preview
(Podgld obrazu), sprawd, czy z listy Format wybrana zostaa opcja JPEG jeli nie, wybierz j.
Kliknij i przecignij suwak Quality (Jako) w gr, do wartoci 80.

W oknie dialogowym Image Preview (Podgld obrazu) znajduje si wiele narzdzi umoliwiaj
cych optymalizacj obrazu, w tym ustawienia pozwalajce na zmian biecego formatu pliku
na przykad z GIF na JPEG. W przypadku formatu JPEG do dyspozycji uytkownika oddano
te pen kontrol nad jakoci otrzymanego obrazu: im wysza jako, tym bardziej szczego
wo odwzorowany zostanie obraz, lecz jednoczenie tym wikszy bdzie jego rozmiar. Sprbujmy
wybra optymalne ustawienia dla edytowanego zdjcia, posugujc si funkcj porwnywania
rnych zestaww ustawie, dostpn w oknie dialogowym Image Preview (Podgld obrazu).
8. Kliknij ikon 2 preview windows (2 okna podgldu)
znajdujc si w dolnej czci okna
dialogowego Image Preview (Podgld obrazu). Gdy podgld podzielony zostanie na dwie czci,
kliknij jego doln cz i przesu suwak Quality (Jako) na 50.
Jak wida, otrzymane w ten sposb dwa warianty zdjcia wyranie rni si jakoci. Odmienne
s te wielkoci plikw z tymi fotografiami wprawdzie rnica pomidzy nimi (10,56 kB przy
jakoci wynoszcej 80 i 5,40 kB przy jakoci 50) nie jest wielka, lecz na pewno istotna. Trzeba
jednak zwrci uwag na fakt, i zmniejszenie wielkoci pliku zaowocowao znacznym spadkiem
jakoci obrazu. Sprbujmy nieco poprawi t jako kosztem rozmiarw pliku.

Uwaga: By moe zwrcie uwag na fakt, i pierwotny rozmiar pliku (103 kB) uleg bardzo
znacznemu zmniejszeniu. w spadek zawdziczamy automatycznemu przeskalowaniu oryginalnej fotografii po otwarciu okna dialogowego Image Preview (Podgld obrazu) wicej
szczegw na ten temat znajdziesz w nastpnym punkcie wiczenia.

ADOBE Dreamweaver CS3/CS3 PL 125

Oficjalny podrcznik

9. Upewnij si, e na podgldzie nadal zaznaczony jest dolny wariant fotografii, i przecignij
suwak Quality (Jako) na 65. Jeli jako obrazu wyda Ci si zadowalajca, kliknij zakadk File
(Plik). Zauwa, e wartoci w sekcji Scale (Skaluj) zarwno bezwzgldne, w pikselach, jak
iprocentowe zostay ju okrelone: po otwarciu okna dialogowego Image Preview (Podgld
obrazu) oryginalne zdjcie zostao automatycznie przeskalowane do rozmiarw okrelonych w ok
nie dokumentu. Kliknij przycisk OK, aby zatwierdzi wszystkie wprowadzone zmiany.

126 LEKCJA 5
Elementy graficzne

10. Odszukaj folder Lekcja05/images w oknie dialogowym Save Web Image (Zapisz obraz internetowy) i kliknij przycisk OK. Gdy program Dreamweaver zapyta, czy nadpisa istniejcy plik o tej
samej nazwie, kliknij przycisk Yes (Tak).

Przeskalowany i zoptymalizowany obraz zostanie umieszczony na stronie, a dziki wybranym

ustawieniom nie bdzie on przyczynia si do tak znacznego wzrostu objtoci projektu jak orygi
nalna fotografia. Jednoczenie jako zdjcia nie odbiega wiele od oryginau.
11. Wydaj polecenie File/Save (Plik/Zapisz), aby zapisa zmodyfikowany projekt.

Dodatkowe wbudowane narzdzia do edycji grafiki

Oprcz narzdzi umoliwiajcych optymalizowanie obrazw, omwionych w poprzednim wiczeniu,
program Dreamweaver oferuje szereg innych funkcji sucych do przetwarzania grafiki rastrowej.
Wszystkie te funkcje dostpne s w panelu Properties (Waciwoci) po zaznaczeniu dowolnego ele
mentu graficznego w oknie projektu. Jest ich sze:
A

A. Edit (Edytuj) B. Optimize (Optymalizuj) C. Crop (Kadruj)

D. Resample (Prbkuj ponownie) E. Brightness and Contrast
(Jasno i kontrast) F. Sharpen (Wyostrz)

Narzdzie Edit (Edytuj)

powoduje przekazanie wybranego obrazu do zewntrznego progra
mu do edycji grafiki. Do poszczeglnych typw plikw mona przypisa rne programy; stosowne
opcje znajdziesz w kategorii File Types / Editors (Typy plikw / edytory) okna dialogowego Preferences
(Preferencje). Ikona symbolizujca opisywane narzdzie w panelu Properties (Waciwoci) odzwier
ciedla domylny program, wybrany do edycji obrazu: jeli jest to na przykad program Fireworks,
toikona narzdzia Edit (Edytuj) bdzie identyczna jak programu Fireworks; jeli jest to Photoshop,
towpanelu Properties (Waciwoci) pojawi si ikona Photoshopa.
Narzdzie Optimize (Optymalizuj)
powoduje otwarcie zaznaczonego obrazu w oknie dialo
gowym Image Preview (Podgld obrazu). Oprcz funkcji sucych do optymalizacji obrazu, opisa
nych w zakoczonym przed chwil wiczeniu, w oknie tym znajdziesz te narzdzia do kadrowania
zdj i modyfikowania ustawie zwizanych z animowanymi obrazami w formacie GIF.

ADOBE Dreamweaver CS3/CS3 PL 127

Oficjalny podrcznik

Narzdzie Crop (Kadruj)

umoliwia przycicie niepodanych fragmentw fotografii.
Po wczeniu narzdzia Crop (Kadruj) na zaznaczone zdjcie nakadana jest ramka kadrowania,
zaopatrzona w kilka uchwytw umoliwiajcych zmian jej rozmiarw i proporcji. Po zdefiniowaniu
obszaru przeznaczonego do wykadrowania przy uyciu ramki naley dwukrotnie klikn w obrbie
zdjcia, aby zatwierdzi ca operacj.

Narzdzie Resample (Prbkuj ponownie)

powoduje trwae przeskalowanie obrazu, ktrego
rozmiar zosta zmieniony na podgldzie projektu. Narzdzie to jest aktywne jedynie wwczas, gdy
zaznaczona fotografia zostaa uprzednio zmniejszona lub powikszona.
Narzdzie Brightness and Contrast (Jasno i kontrast)
umoliwia skorygowanie jasnoci
zbyt ciemnego lub zbyt jasnego zdjcia. W oknie dialogowym tego narzdzia znajduj si dwa suwaki
jeden umoliwia regulacj jasnoci, drugi za kontrastu. Obydwa te parametry mog by korygo
wane niezalenie od siebie. Podgld wprowadzonych zmian jest na bieco aktualizowany w oknie
dokumentu, co uatwia ich oszacowanie.
Narzdzie Sharpen (Wyostrz) pozwala na zaakcentowanie krawdzi obiektw na zdjciu poprzez
odpowiedni regulacj kontrastu pomidzy ssiadujcymi pikselami. Zmiany tej mona dokona przy uy
ciu suwaka wyskalowanego od 0 do 10. Podobnie jak to ma miejsce w przypadku narzdzia Brightness and
Contrast (Jasno i kontrast), podgld zmiany ostroci jest na bieco aktualizowany w oknie dokumentu.
Wszystkie operacje zwizane z przetwarzaniem obrazu, z wyjtkiem zmian wprowadzonych przy
uyciu narzdzi Edit (Edytuj) i Optimize (Optymalizuj), mona anulowa przy uyciu polecenia Edit/
Undo (Edycja/Cofnij) a do chwili zamknicia dokumentu lub programu Dreamweaver.

Doczanie elementw typu rollover

z programu Fireworks
Paski nawigacji stanowi nieodczny element wikszoci stron internetowych. Typowy pasek
nawigacji skada si z sekwencji ssiadujcych obrazkw stanowicych cza do innych stron
serwisu. Obrazki skadajce si na pasek stanowi spjn, jednolit konstrukcj, ktra najczciej
tworzona jest na podstawie tabeli HTML. Posugujc si programem Fireworks, mona zaprojek
towa cay pasek nawigacji w rodowisku graficznym (wraz z odpowiednimi czami) i wygodnie
zaimportowa go do projektu programu Dreamweaver.

Uwaga: To wiczenie wymaga programu Fireworks CS3.

128 LEKCJA 5
Elementy graficzne

1. Uruchom program Adobe Fireworks CS3.

2. Wydaj polecenie File/Open (Plik/Otwrz). Gdy na ekranie wywietlone zostanie okno dialo
gowe Open (Otwrz), odszukaj folder Lekcja05/source i zaznacz plik navbar.png. Kliknij przycisk
Open (Otwrz).

Jest to gotowy pasek nawigacji, przygotowany do wyeksportowania.

Cho projektowanie paskw nawigacji i innych elementw graficznych w programie Fireworks

wykracza poza ramy niniejszej ksiki, zachcam do samodzielnych eksperymentw i zapoznania
si ze struktur pliku navbar.png. Analizujc informacje wywietlone w panelu Layers (Warstwy),
przekonasz si, e skada si on z prostokta oraz piciu przyciskw, po jednym dla kadego cza.
3. Wydaj polecenie File/Export (Plik/Eksportuj). Gdy na ekranie wywietlone zostanie okno
dialogowe Export (Eksportuj), odszukaj folder Lekcja05/images.
Najwaniejsz rzecz, o ktrej naley pamita, eksportujc pocity projekt graficzny programu
Fireworks w celu wykorzystania go w projekcie Dreamweaver, jest to, by wyeksportowa zarw
no kod HTML, jak i elementy graficzne. To proste wystarczy jedynie wybra odpowiednie
ustawienia.
4. Pozostaw domyln nazw navbar w polu File name (Nazwa pliku) i upewnij si, e z listy
Export (Eksportuj) wybrana zostaa opcja HTML and Images (HTML i obrazy). Z listy HTML
wybierz opcj Export HTML File (Eksportuj plik HTML), a z listy Slices (Plasterki) opcj Export
Slices (Eksportuj plasterki). Zaznacz opcje Include areas without slices (Docz obszary bez plasterkw), Current page only (Tylko bieca strona) oraz Put images in subfolder (Wylij obrazy do
podfolderu).
Poniewa pocicie elementu graficznego na drobniejsze czci powoduje wygenerowanie wielu
oddzielnych obrazkw o bardzo podobnych nazwach, warto zgromadzi je wszystkie w osobnym
folderze. Na przykad po wyeksportowaniu projektu navbar.png otrzymujemy a 25 oddzielnych
obrazkw. Domylnie program Fireworks umieszcza je w folderze o nazwie images, lecz w celu
uniknicia ewentualnych pomyek warto nada mu nieco inn nazw, ktra dokadniej bdzie
odzwierciedlaa jego zawarto.

ADOBE Dreamweaver CS3/CS3 PL 129

Oficjalny podrcznik

5. Kliknij przycisk Browse (Przegldaj) lub New Folder (Nowy folder) w systemie Mac OS, aby
wybra nowy folder dla wygenerowanych obrazkw. Gdy na ekranie wywietlone zostanie okno
dialogowe Select Folder (Wybierz folder), odszukaj folder Lekcja05/images/navbar i kliknij przycisk
Save (Zapisz) lub Choose (Wybierz) w Mac OS. Na koniec kliknij przycisk Save (Zapisz) lub Export
(Eksportuj) w oknie dialogowym Export (Eksportuj).

6. Po zakoczeniu caej operacji wydaj polecenie File/Save (Plik/Zapisz) i zamknij program

Fireworks.
Operacja eksportowania projektu przebiega zdumiewajco szybko. Niemniej jednak, w jej trakcie
program Fireworks tworzy plik z kodem HTML, w ktrym wszystkie pocite elementy obrazka
umieszczone s w tabeli. Kod jest generowany w taki sposb (midzy innymi z uwzgldnieniem
pustych obrazkw), by zapewni maksymaln zgodno midzy przegldarkami. Oprcz tego
kady pojedynczy obrazek zapisywany jest we wskazanym przed chwil folderze w dwch warian
tach odzwierciedlajcych stan zwyky i aktywny.
7. Jeli to konieczne, uruchom program Adobe Dreamweaver CS3.

130 LEKCJA 5
Elementy graficzne

8. Rozwi folder Lekcja05 w panelu Files (Pliki) i ponownie otwrz dokument images_start.htm,
ktry znasz ju z poprzednich wicze omawianych w trakcie tej lekcji.

9. Zaznacz tymczasowy obraz o nazwie Navigation i nacinij klawisz Delete (Mac OS:
Backspace).
10. Kliknij ikon Fireworks HTML (HTML programu Fireworks)
Common (Wsplne) na pasku Insert (Wstaw).

znajdujc si w kategorii

11. Kliknij przycisk Browse (Przegldaj) w oknie dialogowym Insert Fireworks HTML (HTML
programu Fireworks) i odszukaj plik navbar.htm. Zaznacz go i kliknij przycisk Open (Otwrz).
Opcja Delete file after insertion (Usu plik po wstawieniu) w oknie dialogowym Insert Fireworks
HTML (HTML programu Fireworks) powinna by wyczona; jeli tak jest w istocie, kliknij przy
cisk OK.

Program Dreamweaver przefiltruje kod HTML wygenerowany przez program Fireworks i umie
ci w pliku z projektem jego najbardziej istotny fragment, zawierajcy struktur tabeli. Ponadto
zweryfikowane i wczytane zostan wszystkie elementy graficzne skadajce si na importowany
fragment, co pozwala unikn sytuacji, w ktrej na stronie brakowao bdzie jakich fragmentw
paska nawigacji.

ADOBE Dreamweaver CS3/CS3 PL 131

Oficjalny podrcznik

12. Wydaj kolejno polecenia File/Save (Plik/Zapisz) i File/Close (Plik/Zamknij).

Jeli podczas wstawiania paska nawigacji panel Properties (Waciwoci) jest otwarty, to zapewne
zwrcie uwag, e caa struktura paska traktowana jest jako tabela programu Fireworks. Oprcz
normalnych opcji i ustawie skojarzonych ze zwykymi tabelami, w tym przypadku wywietlane
jest pole Src (Src), w ktrym znajduje si nazwa rdowego obrazu w formacie PNG. Jeli chcesz
wprowadzi jakie zmiany w wygldzie tego obrazu, kliknij przycisk Edit (Edytuj), aby uruchomi
program Fireworks zostanie on w nim otwarty automatycznie. Posugujc si programem Fi
reworks, mona zmodyfikowa go w dowolny sposb, na przykad zmieni napisy na przyciskach
lub ich liczb.

Umieszczanie w projekcie plikw programu Photoshop

Program Dreamweaver stanowi jeden z elementw pakietu Adobe Creative Suite 3, a jego inte
gracja z pozostaymi programami z tego pakietu sprawia, e wykorzystanie w projekcie WWW
obiektw przygotowanych na przykad w Photoshopie staje si bardzo proste. Istnieje cay szereg
sposobw na przenoszenie elementw graficznych pomidzy rnymi programami pakietu CS3,
lecz jedna z najprostszych metod polega po prostu na otwarciu rdowego pliku w formacie PSD
w programie Dreamweaver. Pliki PSD zapisywane przez Photoshopa nie nadaj si do bezpored
niego wykorzystania w projekcie stron internetowych, lecz mona je z atwoci skonwertowa na
jeden z powszechnie stosowanych formatw przy uyciu znanego Ci ju okna dialogowego Image
Preview (Podgld obrazu).

Uwaga: Do realizacji opisywanego wiczenia wymagany jest program Adobe Photoshop CS3.
1. Wywietl zawarto foldera Lekcja05 w panelu Files (Pliki) i dwukrotnie kliknij plik pl_bridge_start.htm, aby go otworzy.

132 LEKCJA 5
Elementy graficzne

2. Umie kursor przed pierwszym akapitem w kolumnie po lewej stronie, ktry rozpoczyna si
od sw We strive to move beyond the ordinary.
3. Kliknij ikon Image (Obraz) w kategorii Common (Wsplne) paska Insert (Wstaw).
4. Gdy na ekranie wywietlone zostanie okno dialogowe Select Image Source (Wybierz rdo obrazu), odszukaj folder Lekcja05/source i zaznacz plik o nazwie our_world.psd. Kliknij przycisk OK.
5. Gdy na ekranie wywietlone zostanie okno dialogowe Image Preview (Podgld obrazu),
przecignij suwak Quality (Jako) w taki sposb, by wskazywa warto 60, i kliknij zakadk File
(Plik). Upewnij si, e opcja Constrain (Ogranicz) w sekcji Scale (Skaluj) zostaa wczona, i wpisz
360 w polu Width (Szeoko). Gdy skoczysz, kliknij przycisk OK.

ADOBE Dreamweaver CS3/CS3 PL 133

Oficjalny podrcznik

Program Dreamweaver przeskaluje zdjcie i skonwertuje je z formatu PSD na JPEG, nadajc mu

jako odpowiadajc wybranej wczeniej wartoci. Otrzymany w ten sposb obrazek mona ju
wstawi do projektowanej strony.
6. Odszukaj folder Lekcja05/images w oknie dialogowym Save Web Image (Zapisz obraz internetowy). Upewnij si, e w polu File name (Nazwa pliku) widnieje napis our_world, i kliknij przycisk
Save (Zapisz).

Zapisany w ten sposb obrazek zostanie automatycznie wstawiony do projektu w biecym poo
eniu kursora.
7. Wydaj polecenie File/Save (Plik/Zapisz).
Podobnie jak w poprzednim wiczeniu, po zaznaczeniu obrazka na stronie w panelu Properties
(Waciwoci) wywietlone zostan informacje dotyczce nietypowego pochodzenia tego elemen
tu projektu oraz narzdzia uatwiajce przystpienie do edycji obrazu rdowego w Photoshopie.

W celu zmodyfikowania obrazu Photoshopa umieszczonego w projekcie strony kliknij

ikon Edit (Edytuj) z symbolem programu Photoshop. Po otwarciu obrazka w Photoshopie
i wprowadzeniu niezbdnych zmian w jego wygldzie naley zaznaczy cay ten obrazek,
skopiowa go do schowka przy uyciu polecenia Edit/Copy Merged (Edycja/Kopiuj scalone), ana
koniec wyda polecenie Edit/Paste (Edycja/Wklej) w programie Dreamweaver. Spowoduje to
zastpienie dotychczasowego elementu graficznego jego zmodyfikowan wersj.

134 LEKCJA 5
Elementy graficzne

Kopiowanie i wklejanie elementw graficznych

z programu Photoshop
Wielu grafikw uywa Photoshopa do opracowania wstpnej makiety strony. Do ostatecznego
projektu wystarczy uy jedynie pewnych fragmentw takiej makiety; pozostae czci strony
wypenione bd przecie tekstem lub zbudowane w oparciu o style CSS. Posugujc si Photo
shopem CS3 i Dreamweaverem CS3, mona z atwoci skopiowa wybrany fragment obrazka
iumieci go w projekcie programu Dreamweaver. Podobnie jak to miao miejsce w poprzednim
wiczeniu, okno dialogowe Image Preview (Podgld obrazu) suy bdzie jako porednik umo
liwiajcy konwersj kopiowanego elementu graficznego na podan posta.

Uwaga: Do realizacji opisywanego wiczenia wymagany jest program Adobe Photoshop CS3.
1. Jeli to konieczne, otwrz ponownie plik ps_bridge_start.htm, ktrym posugiwalimy si
wpoprzednim wiczeniu. Uyj w tym celu panelu Files (Pliki), dwukrotnie klikajc nazw wspo
mnianego pliku.
2. Umie kursor na pocztku akapitu w kolumnie po prawej stronie; akapit ten rozpoczyna si
od sw We want you involved in your re-design.

3. Uruchom program Adobe Photoshop CS3 i wydaj polecenie File/Open (Plik/Otwrz). Odszu
kaj folder Lekcja05/source w oknie dialogowym Open (Otwrz), zaznacz plik company_history.psd
ikliknij przycisk Open (Otwrz).
Otwarty plik stanowi makiet zupenie innej strony internetowej, lecz w makiecie znajduje si
zdjcie, ktrego fragment mona umieci w biecym projekcie.

ADOBE Dreamweaver CS3/CS3 PL 135

Oficjalny podrcznik

4. Wcz narzdzie Zoom (Lupka), ktrego ikona znajduje si na pasku narzdzi Photoshopa,
ipowiksz fragment ze zdjciem, obrysowujc go kursorem myszy. Wcz narzdzie Rectangular
Marquee (Zaznaczanie prostoktne) i narysuj zaznaczenie obejmujce dwie pary ng po lewej
stronie zdjcia, z pominiciem purpurowej ramki otaczajcej fotografi.

5. Wydaj polecenie Edit/Copy (Edycja/Kopiuj). Zamknij program Photoshop, nie zapisujc

zmian w dokumencie, i powr do edytowania projektu strony w programie Dreamweaver.

Jeli element graficzny przeznaczony do skopiowania znajduje si na kilku rnych

warstwach, to zamiast zwykego polecenia Copy (Kopiuj) wydaj polecenie Edit/Copy Merged
(Edycja/Kopiuj scalone).
6. Wydaj polecenie Edit/Paste (Edycja/Wklej) w programie Dreamweaver. Gdy na ekranie wy
wietlone zostanie okno dialogowe Image Preview (Podgld obrazu), wybierz opcj JPEG Better
Quality (JPEG lepsza jako) z listy Saved Settings (Zapisane ustawienia) i kliknij przycisk OK.
7. Odszukaj folder Lekcja05/images w oknie dialogowym Save Web Image (Zapisz obraz internetowy), w polu File name (Nazwa pliku) wpisz jump.jpg i kliknij przycisk OK.
Zdjcie skopiowane z Photoshopa zostanie wstawione do projektu strony. Sprbujmy teraz
wyrwna je do prawej krawdzi kolumny tekstu, posugujc si gotow, zdefiniowan wczeniej
klas CSS.

136 LEKCJA 5
Elementy graficzne

8. Zaznacz wstawiony element graficzny i jeli to konieczne wydaj polecenie Window/Properties (Okno/Waciwoci). Wybierz nazw klasy imageRight z listy Class (Klasa) w panelu Properties (Waciwoci).

9. Wydaj polecenie File/Save (Plik/Zapisz).

Edycja fragmentw zdj pochodzcych z wikszych projektw Photoshopa jest bardzo podobna do
edycji caych (skonwertowanych) obrazw utworzonych w tym programie. Polega ona na zaznaczeniu
wstawionego fragmentu i klikniciu ikony Edit (Edytuj) z logo Photoshopa, znajdujcej si w panelu
Properties (Waciwoci). Po otwarciu rdowego obrazu w Photoshopie naley wprowadzi w nim
odpowiednie zmiany, ponownie skopiowa potrzebny fragment i wklei go w oknie projektu Dream
weaver. Program Dreamweaver automatycznie zastosuje te same ustawienia zwizane z optymalizacj
obrazu, ktre byy poprzednio wybrane w oknie dialogowym Image Preview (Podgld obrazu).

Program Bridge
Nazwa programu Adobe Bridge CS3 (ang. sowo bridge oznacza most) jest adekwatna do
funkcji, jak aplikacja ta peni w pakiecie Creative Suite: stanowi ona bowiem pewnego rodzaju
pomost i wspln baz zasobw dla wszystkich programw z tego pakietu, w tym Dreamweavera.
Posugujc si programem Bridge, moesz szybko i wygodnie przeglda foldery z materiaami
graficznymi i innymi skadnikami projektw, oznacza pliki sowami kluczowymi i korzysta
zprofesjonalnych bibliotek zdj, na przykad serwisu Adobe Stock Photos. Program Bridge jest
w peni zintegrowany z Dreamweaverem: mona nie tylko uruchomi go z poziomu tej aplikacji,
lecz take przeciga zdjcia z okna programu Bridge do okna projektu Dreamweavera.
1. Jeli to konieczne, otwrz ponownie plik ps_bridge_start.htm, ktrym posugiwalimy si
wpoprzednim wiczeniu. Uyj w tym celu panelu Files (Pliki), dwukrotnie klikajc nazw wspo
mnianego pliku.

ADOBE Dreamweaver CS3/CS3 PL 137

Oficjalny podrcznik

2. Umie kursor na kocu akapitu w kolumnie po lewej stronie; akapit ten koczy si sowami
ends far-reaching experience. Nacinij klawisz Enter (Return w Mac OS), aby przenie kursor do
nowego wiersza.
W dalszej czci wiczenia w tym miejscu umieszczony zostanie obrazek przeniesiony z programu
Bridge.
3. Wydaj polecenie File/Browse in Bridge (Plik/Przegldaj w Bridge).
4. Po uruchomieniu programu Bridge kliknij zakadk Folders (Foldery), odszukaj folder Lekcja05/images i zaznacz plik o nazwie cans.jpg.

5. Wydaj polecenie File/Place/In Dreamweaver (Plik/Umie/W programie Dreamweaver).

Wybrane zdjcie zostanie umieszczone w projekcie programu Dreamweaver; jednoczenie uak
tywnione zostanie okno tego programu. Wybrane zdjcia mona te przenosi pomidzy pro
gramem Bridge a Dreamweaverem przy uyciu myszy; sprbujmy zatem zastpi wybran przed
chwil fotografi inn, ktra bdzie lepiej pasowaa do charakteru strony.

Uwaga: Jeli plik z elementem graficznym przeniesionym z programu Bridge do projektu

Dreamweavera znajduje si poza struktur serwisu, do ktrego ten projekt naley, to na ekranie
wywietlony zostanie komunikat umoliwiajcy skopiowanie tego pliku do gwnego foldera
serwisu.

138 LEKCJA 5
Elementy graficzne

6. Zaznacz wstawione przed chwil zdjcie i nacinij klawisz Delete (Backspace w Mac OS). Klik
nij ikon Switch to Compact Mode (Przecz na tryb kompaktowy) w programie Bridge jest
to ostatnia ikona w prawym grnym rogu okna tego programu. Ewentualnie wydaj polecenie
View/Compact Mode (Widok/Tryb kompaktowy).
Tryb kompaktowy pozwala ograniczy ilo miejsca zajmowanego przez okno programu Bridge
do okoo wielkoci ekranu, a prcz tego sprawia, e okno to jest zawsze na wierzchu innych
okien, co uatwia przegldanie i przenoszenie zasobw do biecego projektu.
7. Przecignij zdjcie track.jpg z programu Bridge do okna projektu, umieszczajc je w tym
samym miejscu co poprzedni fotografi w dolnej czci kolumny z tekstem, po lewej stronie.

8. Wydaj polecenie File/Save (Plik/Zapisz) w programie Dreamweaver. Nacinij klawisz F12

(Option+F12 w Mac OS), aby wywietli podgld strony w domylnej przegldarce internetowej;
koniecznie sprawd dziaanie przyciskw wchodzcych w skad menu zaimportowanego z progra
mu Fireworks. Gdy skoczysz, zamknij program Bridge.
Gratulacje, wanie ukoczye kolejn lekcj!