Wydawnictwo Helionul. Ko�ciuszki 1c44-100 Gliwicetel. 032 230 98 63e-mail: helion@helion.pl

Adobe Dreamweaver CS3/CS3 PL. Oficjalny podrêcznikAutor: Adobe Creative TeamT³umaczenie: Piotr Cie�lakISBN: 978-83-246-1271-0Tytu³ orygina³u: Adobe Dreamweaver CS3 Classroom in a BookFormat: B5, stron: oko³o 330Zawiera CD-ROM

Dreamweaver CS3/CS PL � twórcze i funkcjonalne rozwi¹zanie do tworzenia stron oraz aplikacji internetowych

� Praca z tekstem i grafik¹ � Projektowanie stron WWW � Tworzenie formularzy � Dodawanie elementów multimedialnych

�Adobe Dreamweaver CS3/CS3 PL. Oficjalny podrêcznik� to ksi¹¿ka zarówno dla webmasterów, jak i tych, którzy chc¹ komfortowo, ale te¿ sprawnie zarz¹dzaæ stron¹ internetow¹ w³asnej firmy. Ksi¹¿ka zawiera wiele cennych informacji, które pozwalaj¹ w kreatywny sposób wykorzystywaæ ca³y potencja³ tego programu.

Poszczególne æwiczenia zosta³y przedstawione w sposób przejrzysty i ³atwy do realizacji. Dlatego �Adobe Dreamweaver CS3/CS3 PL� stanowi znakomity podrêcznik, zawieraj¹cy nie tylko podstawowe informacje o programie, ale równie¿ opisy jego zaawansowanych funkcji oraz szereg wskazówek, rozwi¹zañ i porad, które pozwalaj¹ pracowaæ szybciej i wydajniej. Korzystaj¹c z �Oficjalnego podrêcznika�, dowiesz siê, jak tworzyæ strony WWW, zarz¹dzaæ nimi, a tak¿e projektowaæ multimedialne serwisy internetowe, których funkcjonalno�æ i efektywno�æ jest dzi� tak istotna w dzia³alno�ci ka¿dego przedsiêbiorstwa.

� Kaskadowe arkusze stylów � Technologia AJAX � Projektowanie makiet i formularzy � Tworzenie ³¹czy � Konfiguracja ustawieñ dostêpu � Dodawanie elementów multimedialnych � Elementy graficzne, filmy wideo i animacje � Konfigurowanie zdalnego serwisu

Kreatywny program dla kreatywnych u¿ytkowników!

5

1

2

Spis treściWstęp

O książce .............................................................................................. 11

Wymagania ........................................................................................... 11

Instalowanie programu ......................................................................... 12

Kopiowanie materiałów znajdujących się na płycie CD dołączonej do książki ............................................................................ 12

Konfiguracja ustawień........................................................................... 13

Dodatkowe materiały ........................................................................... 13

Certyfikaty Adobe ................................................................................ 14

Wstęp do programu Dreamweaver CS3Wybór początkowego szablonu CSS ................................................... 18

Zapisywanie strony ............................................................................... 19

Zmiana tytułu strony ............................................................................ 20

Zmiana nagłówków .............................................................................. 20

Wstawianie tekstu ................................................................................ 21

Wstawianie elementów graficznych ..................................................... 22

Tworzenie łączy do innych stron ......................................................... 24

Wybieranie i edytowanie stylów CSS .................................................. 25

Wyświetlanie podglądu strony w przeglądarce ................................... 32

Podsumowanie ..................................................................................... 36

Konfigurowanie przestrzeni roboczejWycieczka po przestrzeni roboczej ..................................................... 39

Projektowanie niestandardowych przestrzeni roboczych ................... 55

Obsługa panelu Properties (Właściwości) ........................................... 56

Konfigurowanie pasków narzędzi ........................................................ 59

Konfiguracja preferencji ....................................................................... 64

Podsumowanie ..................................................................................... 66

6 SPIS TrEŚCI

4

3

5

Kaskadowe arkusze stylów (CSS)Konfigurowanie serwisu w programie Dreamweaver ......................... 69

Podgląd ukończonego projektu ............................................................ 71

Dołączanie zewnętrznego arkusza stylów ........................................... 72

Tworzenie nowej reguły CSS ............................................................... 75

Używanie stylów ................................................................................... 80

Zmiana właściwości w ramach reguł .................................................... 82

Tworzenie arkusza stylów na potrzeby druku ..................................... 83

Podsumowanie ..................................................................................... 90

Praca z tekstemPrzegląd ukończonego projektu ........................................................... 93

Tworzenie nagłówków i tekstu akapitowego ...................................... 94

Importowanie materiału tekstowego z innych źródeł ......................... 97

Tworzenie list numerowanych i punktowanych ................................ 100

Sprawdzanie pisowni w dokumencie .................................................. 102

Wyszukiwanie i zastępowanie tekstu ................................................. 104

Tworzenie tabel .................................................................................. 106

Importowanie danych tabelarycznych ................................................ 110

Podsumowanie ................................................................................... 113

Elementy graficznePrzegląd ukończonego projektu ......................................................... 115

Wstawianie zdjęć ................................................................................ 116

Elementy graficzne w tle ..................................................................... 120

Optymalizacja elementów graficznych ............................................... 122

Dołączanie elementów typu „rollover” z programu Fireworks ........ 127

Umieszczanie w projekcie plików programu Photoshop ................... 131

Kopiowanie i wklejanie elementów graficznych z programu Photoshop ....................................................................... 134

Program Bridge ................................................................................... 136

Podsumowanie ................................................................................... 139

7

9

8

7

6 ŁączaPrzegląd ukończonego projektu ......................................................... 143

Łącza do stron należących do tego samego serwisu .......................... 144

Tworzenie łączy do stron zewnętrznych ........................................... 147

Tworzenie łączy e-mail ....................................................................... 148

Łącza w obrębie strony ...................................................................... 149

Podsumowanie ................................................................................... 153

Projektowanie makietPrzegląd ukończonego projektu ......................................................... 155

Projektowanie elementów strony przy użyciu znaczników <div> ...... 156

Eksportowanie stylów CSS ................................................................. 178

Miarki i linie pomocnicze .................................................................... 180

Podsumowanie ................................................................................... 184

Projektowanie interaktywnych stron WWWKilka informacji o zachowaniach programu Dreamweaver ............... 187

Przegląd ukończonego projektu ......................................................... 190

Konfigurowanie zachowań ................................................................. 192

Otwieranie dodatkowego okna przeglądarki ..................................... 197

Modyfikacja zachowań ........................................................................ 199

Wyświetlanie i ukrywanie fragmentów strony .................................. 202

Podsumowanie ................................................................................... 208

Technologia AJAX i platforma SpryKilka słów o technologii Ajax i platformie Spry ................................. 211

Przegląd ukończonego projektu ......................................................... 213

Dołączanie danych XML ..................................................................... 215

Tworzenie zestawów danych Spry ..................................................... 220

Tworzenie „szczegółowych” obszarów Spry ..................................... 223

Tworzenie kontrolek Spry ................................................................. 226

Stosowanie efektów Spry ................................................................... 232

Podsumowanie ................................................................................... 235

8 SPIS TrEŚCI

11

10

12

Projektowanie formularzyPrzegląd ukończonego projektu ......................................................... 237

Ogólne informacje o formularzach .................................................... 240

Umieszczenie formularza na stronie .................................................. 241

Wstawianie pól tekstowych ............................................................... 243

Przyciski opcji ..................................................................................... 255

Tworzenie pól wyboru ....................................................................... 258

Tworzenie list ..................................................................................... 261

Tworzenie przycisku wysyłania danych .............................................. 264

Projektowanie stylów dla formularzy ................................................. 265

Podsumowanie ................................................................................... 270

Dodawanie elementów multimedialnychPrzegląd ukończonego projektu ......................................................... 273

Umieszczanie animacji Flash na stronie WWW ................................ 275

Wyświetlanie filmów wideo przy użyciu technologii Flash ................ 279

Pokazy slajdów Flash ........................................................................... 282

Podsumowanie ................................................................................... 290

Publikowanie strony w InternecieKonfigurowanie zdalnego serwisu ...................................................... 293

Walidacja strony internetowej ........................................................... 305

Publikowanie strony w Internecie ...................................................... 307

Podsumowanie ................................................................................... 310

Skorowidz ........................................................................................... 311

Elementy graficzne5

W trakcie tej lekcji dowiesz się, jak wzbogacić projektowaną stronę internetową o elementy graficzne. Nauczysz się między innymi, w jaki sposób:

Umieszczać zdjęcia 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.Posługiwać się programem Adobe Bridge.

Ukończenie ćwiczeń opisanych w tej lekcji powinno zająć około 90 minut. Przed przystą­pieniem do ich realizacji upewnij się, że skopiowałeś na dysk twardy pliki znajdujące się w folderze Lekcje/Lekcja05 płyty dołączonej do książki Adobe Dreamweaver CS3/CS3 PL. Oficjalny podręcznik. Podczas pracy pliki te będą stopniowo zastępowane ich zmodyfiko­wanymi wersjami, a jeśli będziesz w którymś momencie potrzebował oryginałów, po prostu ponownie skopiuj je z płyty CD.

Przegląd ukończonego projektuPrzed przystąpieniem do realizacji ćwiczeń zaplanowanych na pierwszą część tej lekcji warto zapoznać się z wyglądem ukończonego projektu w przeglądarce internetowej.

Uruchom program Adobe Dreamweaver CS3.Jeśli to konieczne, naciśnij klawisz F8, aby otworzyć panel Files (Pliki), i wybierz serwis

DW CIB z listy serwisów.Wyświetl zawartość foldera Lekcja05 w panelu Files (Pliki).

•••••••

1.

2.

3.

116 LEKCJA 5

Elementy graficzne

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

Obejrzyj stronę w domyślnej przeglądarce internetowej. Zwróć uwagę mnogość elementów graficznych, zarówno w treści, jak i w tle strony, a także na aktywne elementy typu „rollover” na pasku nawigacji.

Zamknij przeglądarkę, aby móc wygodnie kontynuować pracę w programie Dreamweaver.

Wstawianie zdjęćZdjęcia i obrazy są jednymi z najważniejszych elementów dowolnej strony internetowej. Program Dreamweaver umożliwia umieszczanie elementów graficznych w treści strony na kilka różnych sposobów, z którymi zapoznasz się w tym ćwiczeniu.

Wyświetl zawartość foldera Lekcja05 w panelu Files (Pliki) i dwukrotnie kliknij plik images_start.htm, aby go otworzyć.Miejsca, w których w trakcie tej lekcji wstawione zostaną zdjęcia, wypełnione są szarymi zastęp­czymi elementami graficznymi.

5.

6.

1.

Zaznacz szary prostokątny obrazek z napisem Banner i naciśnij klawisz Delete (Backspace w Mac OS).2.

117ADOBE DrEAmwEAvEr CS3/CS3 PL

Oficjalny podręcznik

Kliknij ikonę Image (Obraz) w kategorii Common (Wspólne) paska Insert (Wstaw).Jeśli ikona Image (Obraz) jest niewidoczna, kliknij niewielki przycisk ze strzałką znajdujący się obok ikony Images (Obrazów) i z menu, które się wówczas pojawi, wybierz opcję Image (Obraz). Podobnie jak to ma miejsce w przypadku innych menu na pasku Insert (Wstaw), tak i tutaj ikona reprezentująca całe menu odzwierciedla ostatnio wybrany z tego menu element.

Gdy na ekranie wyświetlone zostanie okno dialogowe Select Image Source (Wybierz źródło obrazu), odszukaj folder Lekcja05/images i zaznacz plik o nazwie boat. Kliknij przycisk OK.

3.

4.

Projektując stronę internetową, warto zadbać o to, by była ona atrakcyjna i przystępna również dla tych użytkowników, którzy posługują się asystentami ułatwiającymi dostęp do treści publikowa­nych w Internecie, na przykład czytnikami ekranowymi. Jeśli chcemy, aby treść wstawionych zdjęć mogła być przekazana ustnie, musimy dołączyć do nich krótki opis.

Jeśli to konieczne, wydaj polecenie Window/Properties (Okno/Właściwości), aby otworzyć panel Properties (Właściwości).

Upewnij się, że zdjęcie łódki nadal jest zaznaczone, i w polu Alt w panelu Properties (Właściwo-ści) wpisz następujący tekst: Red rowboat by the side of a river. Na koniec naciśnij klawisz Tab.

5.

6.

Dwukrotne kliknięcie dowolnego „zastępczego” obrazka w podglądzie projektu również spowoduje wyświetlenie okna dialogowego Select Image Source (Wybierz źródło obrazu) i umożliwi zastąpienie tego obrazka docelowym zdjęciem.

Kolejny sposób na umieszczenie zdjęcia na stronie wymaga zastosowania panelu Assets (Zasoby).

118 LEKCJA 5

Elementy graficzne

Wydaj polecenie Window/Assets (Okno/Zasoby). Gdy na ekranie wyświetlony zostanie panel Assets (Zasoby), kliknij ikonę kategorii Images (Obrazy) znajdującą się w lewej górnej części tego panelu. Przewiń listę obrazów, aby odszukać zdjęcie o nazwie streetlights.jpg. Zaznacz je.

7.

Przeciągnij podgląd zaznaczonego zdjęcia z panelu Assets (Zasoby) do okna dokumentu, zwalniając przycisk myszy poniżej nagłówka Bringing light to the dark przed pierwszym akapitem w kolumnie po lewej stronie.Inny sposób na wykonanie tego zadania polega na umieszczeniu kursora na początku wspomnia­nego akapitu, zaznaczeniu zdjęcia streetlights.jpg w panelu Assets (Zasoby) i kliknięciu przycisku Insert (Wstaw) znajdującego się na samym dole tego panelu.

W polu Alt w panelu Properties (Właściwości) wpisz Streetlights along a road at night.Wydaj polecenie File/Save (Plik/Zapisz).

8.

9.

10.

119ADOBE DrEAmwEAvEr CS3/CS3 PL

Oficjalny podręcznik

Obrazy zastępczeObrazy zastępcze ułatwiają zaprojektowanie strony w sytuacji, gdy docelowe fotografie przeznaczone do umieszczenia w projekcie nie są jeszcze dostępne. Obraz zastępczy, o czym miałeś okazję prze­konać się w zakończonym przed chwilą ćwiczeniu (występują one także w kilku innych ćwiczeniach w tej książce), to szary prostokąt opatrzony tytułem i informacjami o jego wymiarach. Obrazy zastęp­cze pomyślane są jedynie jako ułatwienie dla projektantów; nie są one wyświetlane na przykład na podglądzie strony w przeglądarce (a niektóre przeglądarki, w tym Internet Explorer, wyświetlają w ich miejscu błąd oznaczający brak elementu strony). W celu utworzenia obrazu zastępczego wykonaj następujące czynności:

Umieść kursor w miejscu, w którym chciałbyś wstawić obraz zastępczy.

Rozwiń menu Images (Obrazów) w kategorii Common (Wspólne) paska Insert (Wstaw) i kliknij ikonę Image Placeholder (Obraz zastępczy) .

Wpisz nazwę obiektu w polu Name (Nazwa) w oknie dialogowym Image Placeholder (Obraz zastępczy). Nazwa ta wyświetlona zostanie pośrodku obrazu zastępczego wraz z jego aktualnymi rozmiarami.

Uwaga: Nazwa nie powinna zawierać spacji i znaków specjalnych. Dozwolone są nazwy wykorzystujące małe i wielkie litery, na przykład „naszDom”, a także podkreślniki (np. „nasz_dom”).

1.

2.

3.

Podaj szerokość obrazu zastępczego w polu Width (Szerokość) i jego wysokość w polu Height (Wysokość).

Po wstawieniu obraz zastępczy można dowolnie skalować w trybie Design (Projekt).

Jeśli chciałbyś wstawić obraz zastępczy w innym kolorze niż domyślny neutralny szary, kliknij próbnik Color (Kolor), aby otworzyć próbnik kolorów.

W polu Alternative text field (Tekst zastępczy) wpisz tekst zastępczy dla docelowego zdjęcia i kliknij przycisk OK.

W celu zastąpienia obrazu zastępczego docelowym elementem graficznym lub fotografią dwukrotnie kliknij ten obraz i wybierz odpowiedni plik w oknie dialogowym Select Image Source (Wybierz źródło obrazu). Zarówno nazwa, jak i opis podane podczas tworzenia obrazu zastępczego zostaną zachowane po jego zmianie na docelowe zdjęcie.

4.

5.

6.

120 LEKCJA 5

Elementy graficzne

Elementy graficzne w tleElementy graficzne na stronach internetowych można z grubsza podzielić na dwa rodzaje: takie, które umieszczone są w treści strony, oraz takie, które pełnią funkcję tła. Obrazy w treści strony to najczęściej zwykłe pliki graficzne (w formacie JPG, GIF lub PNG), które umieszczane są w ko­dzie projektu przy użyciu znacznika <img> — w poprzednim ćwiczeniu mieliśmy do czynienia z dwoma takimi obrazami. W odróżnieniu od obrazów w treści strony, elementy graficzne w tle obsługiwane są z poziomu stylów CSS.

Jeśli to konieczne, otwórz ponownie plik images_start.htm, którym posługiwaliśmy się w poprzednim ćwiczeniu. Użyj w tym celu panelu Files (Pliki), dwukrotnie klikając nazwę wspo­mnianego pliku.

Zaznacz obraz zastępczy o nazwie Logo i naciśnij klawisz Delete (Backspace w Mac OS), aby go usunąć.

Wydaj polecenie Window/CSS Styles (Okno/Style CSS), aby wyświetlić panel CSS Styles (Style CSS), jeśli został on wcześniej ukryty. Kliknij przycisk All (Wszystkie), aby wyświetlić listę wszyst­kich reguł CSS.

Zaznacz regułę #logo na liście reguł zdefiniowanych w arkuszu main.css i kliknij ikonę Edit Style (Edytuj styl) .

1.

2.

3.

4.

Wybierz kategorię Background (Tło) z listy kategorii po lewej stronie okna dialogowego CSS Rule Definition for #logo in main.css (Definicja stylu CSS dla #logo w main.css).

Kliknij przycisk Browse (Przeglądaj) i odszukaj folder Lekcja05/images w oknie dialogowym Select Image Source (Wybierz źródło obrazu). Zaznacz plik o nazwie logo.gif.

5.

6.

121ADOBE DrEAmwEAvEr CS3/CS3 PL

Oficjalny podręcznik

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

Domyślnie elementy graficzne w tle są powielane w poziomie i w pionie w taki sposób, by wy­pełniły całą dostępną przestrzeń. W celu wyświetlenia wybranego obrazu w tle tylko raz należy wybrać opcję no-repeat (nie powtarzaj), dokładnie tak jak zostało to opisane przed chwilą.

Wydaj polecenie File/Save All (Plik/Zapisz wszystko).8.

Ze względu na to, że reguła #logo zdefiniowana została w zewnętrznym arkuszu stylów, program Dreamweaver automatycznie otworzy plik wymagający wprowadzenia opisanej zmiany. W celu zachowania pożądanego wyglądu strony należy w takim przypadku zapisać zarówno edytowany dokument, jak i zmodyfikowany arkusz stylów.

122 LEKCJA 5

Elementy graficzne

Optymalizacja elementów graficznychOptymalizacja elementów graficznych na potrzeby Internetu polega na znalezieniu kompromisu pomiędzy jakością obrazu a wielkością pliku, w którym obraz ten jest zapisany. Niejednokrotnie zdarza się, że projektant musi ponownie zoptymalizować elementy graficzne, które zostały wcześ­niej umieszczone na stronie. Na szczęście, narzędzia i algorytmy przetwarzania obrazu zaimple­mentowane w programie Dreamweaver pozwalają zminimalizować objętość pliku przy zachowa­niu akceptowalnej jakości zdjęcia. Kolejne ćwiczenie ilustruje sposób wykorzystania tych narzędzi w praktyce i — prócz optymalizacji obrazu — obejmuje również jego przeskalowanie — to kolejne spośród zadań, przed jakimi bardzo często stają projektanci stron WWW.

Jeśli to konieczne, otwórz ponownie plik images_start.htm, którym posługiwaliśmy się w poprzednim ćwiczeniu. Użyj w tym celu panelu Files (Pliki), dwukrotnie klikając nazwę wspo­mnianego pliku.

Umieść kursor na początku drugiego akapitu w kolumnie po prawej stronie projektu, tuż przed tekstem zastępczym rozpoczynającym się od słów Lorem ipsum dolor sit amet.

1.

2.

Kliknij ikonę Image (Obraz) w kategorii Common (Wspólne) paska Insert (Wstaw).Gdy na ekranie wyświetlone zostanie okno dialogowe Select Image Source (Wybierz źródło

obrazu), odszukaj folder Lekcja05/images i wskaż plik o nazwie gears.jpg. Kliknij przycisk OK.

3.

4.

123ADOBE DrEAmwEAvEr CS3/CS3 PL

Oficjalny podręcznik

Wybrane zdjęcie jest nie tylko zdecydowanie zbyt duże, biorąc pod uwagę ilość miejsca dostępne­go w kolumnie po prawej stronie, lecz ma też znaczną objętość, wynoszącą 103 kB. Zanim jednak przeskalujemy to zdjęcie do rozmiaru pasującego do projektu strony i poważnie je „odchudzimy”, zdefiniujmy regułę umożliwiającą przesunięcie go na prawo względem tekstu.

Jeśli to konieczne, wydaj polecenie Window/Properties (Okno/Właściwości), aby otworzyć panel Properties (Właściwości). Wstawione przed chwilą zdjęcie nadal powinno być zaznaczone; jeśli tak jest w istocie, wybierz klasę o nazwie imageRight z listy Class (Klasa).Wielkość elementów graficznych w programie Dreamweaver można zmieniać przy użyciu trzech uchwytów wyświetlanych na krawędziach zaznaczonego obrazu. Takie rozwiązanie nie powoduje jednak przeskalowania obrazu, lecz zmianę wielkości, w jakiej jest on wyświetlany na stronie. Nic nie stoi jednak na przeszkodzie, by posłużyć się tą funkcją w celu nadania zdjęciu pożądanych wymiarów „na oko” — skorygowane w ten sposób wymiary zdjęcia można będzie później zatwier­dzić przy użyciu polecenia Optimize (Optymalizuj).

5.

Rozpocznij od przeciągnięcia uchwytu znajdującego się w prawym dolnym rogu zdjęcia do góry i w lewo; podczas przeciągania przytrzymaj klawisz Shift, aby zachować oryginalne propor­cje fotografii. Gdy zmniejszysz zdjęcie do około 2/3 jego pierwotnych rozmiarów, zwolnij przy­cisk myszy, a chwilę później także klawisz Shift. Jeśli otworzyłeś panel Properties (Właściwości) w poprzednim kroku ćwiczenia, to sprawdź bieżące wymiary przeskalowanego zdjęcia. Szerokość fotografii powinna wynosić około 125 pikseli, a wysokość — 188.

6.

W celu dokładniejszego przeskalowania zdjęcia koniecznie otwórz panel Properties (Właściwości) przed przystąpieniem do tej operacji. Wymiary skalowanego elementu graficznego podawane są bowiem na bieżąco podczas skalowania.

Gdy rozmiary zdjęcia zostaną optycznie dopasowane do wolnej przestrzeni na stronie, należy je przeskalować i niejako przy okazji zainteresować się możliwością zoptymalizowania objętości pliku z tym zdjęciem.

Na krawędzi zaznaczonego zdjęcia wyświetlane są trzy uchwyty skalujące

124 LEKCJA 5

Elementy graficzne

Jeśli zdjęcie jest nadal zaznaczone, kliknij przycisk Optimize (Optymalizuj) w panelu Properties (Właściwości). Gdy na ekranie wyświetlone zostanie okno dialogowe Image Preview (Podgląd obrazu), sprawdź, czy z listy Format wybrana została opcja JPEG — jeśli nie, wybierz ją. Kliknij i przeciągnij suwak Quality (Jakość) w górę, do wartości 80.

7.

W oknie dialogowym Image Preview (Podgląd obrazu) znajduje się wiele narzędzi umożliwiają­cych optymalizację obrazu, w tym ustawienia pozwalające na zmianę bieżącego formatu pliku — na przykład z GIF na JPEG. W przypadku formatu JPEG do dyspozycji użytkownika oddano też pełną kontrolę nad jakością otrzymanego obrazu: im wyższa jakość, tym bardziej szczegóło­wo odwzorowany zostanie obraz, lecz jednocześnie tym większy będzie jego rozmiar. Spróbujmy wybrać optymalne ustawienia dla edytowanego zdjęcia, posługując się funkcją porównywania różnych zestawów ustawień, dostępną w oknie dialogowym Image Preview (Podgląd obrazu).

Kliknij ikonę 2 preview windows (2 okna podglądu) znajdującą się w dolnej części okna dialogowego Image Preview (Podgląd obrazu). Gdy podgląd podzielony zostanie na dwie części, kliknij jego dolną część i przesuń suwak Quality (Jakość) na 50.Jak widać, otrzymane w ten sposób dwa warianty zdjęcia wyraźnie różnią się jakością. Odmienne są też wielkości plików z tymi fotografiami — wprawdzie różnica pomiędzy nimi (10,56 kB przy jakości wynoszącej 80 i 5,40 kB przy jakości 50) nie jest wielka, lecz na pewno istotna. Trzeba jednak zwrócić uwagę na fakt, iż zmniejszenie wielkości pliku zaowocowało znacznym spadkiem jakości obrazu. Spróbujmy nieco poprawić tę jakość kosztem rozmiarów pliku.

Uwaga: Być może zwróciłeś uwagę na fakt, iż pierwotny rozmiar pliku (103 kB) uległ bardzo znacznemu zmniejszeniu. Ów spadek zawdzięczamy automatycznemu przeskalowaniu ory-ginalnej fotografii po otwarciu okna dialogowego Image Preview (Podgląd obrazu) — więcej szczegółów na ten temat znajdziesz w następnym punkcie ćwiczenia.

8.

125ADOBE DrEAmwEAvEr CS3/CS3 PL

Oficjalny podręcznik

Upewnij się, że na podglądzie nadal zaznaczony jest dolny wariant fotografii, i przeciągnij suwak Quality (Jakość) na 65. Jeśli jakość obrazu wyda Ci się zadowalająca, kliknij zakładkę File (Plik). Zauważ, że wartości w sekcji Scale (Skaluj) — zarówno bezwzględne, w pikselach, jak i procentowe — zostały już określone: po otwarciu okna dialogowego Image Preview (Podgląd obrazu) oryginalne zdjęcie zostało automatycznie przeskalowane do rozmiarów określonych w ok­nie dokumentu. Kliknij przycisk OK, aby zatwierdzić wszystkie wprowadzone zmiany.

9.

126 LEKCJA 5

Elementy graficzne

Odszukaj folder Lekcja05/images w oknie dialogowym Save Web Image (Zapisz obraz interne-towy) i kliknij przycisk OK. Gdy program Dreamweaver zapyta, czy nadpisać istniejący plik o tej samej nazwie, kliknij przycisk Yes (Tak).

10.

Przeskalowany i zoptymalizowany obraz zostanie umieszczony na stronie, a dzięki wybranym ustawieniom nie będzie on przyczyniał się do tak znacznego wzrostu objętości projektu jak orygi­nalna fotografia. Jednocześnie jakość zdjęcia nie odbiega wiele od oryginału.

Wydaj polecenie File/Save (Plik/Zapisz), aby zapisać zmodyfikowany projekt.11.

Dodatkowe wbudowane narzędzia do edycji grafikiOprócz narzędzi umożliwiających optymalizowanie obrazów, omówionych w poprzednim ćwiczeniu, program Dreamweaver oferuje szereg innych funkcji służących do przetwarzania grafiki rastrowej. Wszystkie te funkcje dostępne są w panelu Properties (Właściwości) po zaznaczeniu dowolnego ele­mentu graficznego w oknie projektu. Jest ich sześć:

A. Edit (Edytuj) B. Optimize (Optymalizuj) C. Crop (Kadruj) D. Resample (Próbkuj ponownie) E. Brightness and Contrast (Jasność i kontrast) F. Sharpen (Wyostrz)

A B C D E F

Narzędzie Edit (Edytuj) — powoduje przekazanie wybranego obrazu do zewnętrznego progra­mu do edycji grafiki. Do poszczególnych typów plików można przypisać różne programy; stosowne opcje znajdziesz w kategorii File Types / Editors (Typy plików / edytory) okna dialogowego Preferences (Preferencje). Ikona symbolizująca opisywane narzędzie w panelu Properties (Właściwości) odzwier­ciedla domyślny program, wybrany do edycji obrazu: jeśli jest to na przykład program Fireworks, to ikona narzędzia Edit (Edytuj) będzie identyczna jak programu Fireworks; jeśli jest to Photoshop, to w panelu Properties (Właściwości) pojawi się ikona Photoshopa.

Narzędzie Optimize (Optymalizuj) — powoduje otwarcie zaznaczonego obrazu w oknie dialo­gowym Image Preview (Podgląd obrazu). Oprócz funkcji służących do optymalizacji obrazu, opisa­nych w zakończonym przed chwilą ćwiczeniu, w oknie tym znajdziesz też narzędzia do kadrowania zdjęć i modyfikowania ustawień związanych z animowanymi obrazami w formacie GIF.

•

•

127ADOBE DrEAmwEAvEr CS3/CS3 PL

Oficjalny podręcznik

Dołączanie elementów typu „rollover” z programu FireworksPaski nawigacji stanowią nieodłączny element większości stron internetowych. Typowy pasek nawigacji składa się z sekwencji sąsiadujących obrazków stanowiących łącza do innych stron serwisu. Obrazki składające się na pasek stanowią spójną, jednolitą konstrukcję, która najczęściej tworzona jest na podstawie tabeli HTML. Posługując się programem Fireworks, można zaprojek­tować cały pasek nawigacji w środowisku graficznym (wraz z odpowiednimi łączami) i wygodnie zaimportować go do projektu programu Dreamweaver.

Uwaga: To ćwiczenie wymaga programu Fireworks CS3.

Narzędzie Crop (Kadruj) — umożliwia przycięcie niepożądanych fragmentów fotografii. Po włączeniu narzędzia Crop (Kadruj) na zaznaczone zdjęcie nakładana jest ramka kadrowania, zaopatrzona w kilka uchwytów umożliwiających zmianę jej rozmiarów i proporcji. Po zdefiniowaniu obszaru przeznaczonego do wykadrowania przy użyciu ramki należy dwukrotnie kliknąć w obrębie zdjęcia, aby zatwierdzić całą operację.

•

Narzędzie Resample (Próbkuj ponownie) — powoduje trwałe przeskalowanie obrazu, którego rozmiar został zmieniony na podglądzie projektu. Narzędzie to jest aktywne jedynie wówczas, gdy zaznaczona fotografia została uprzednio zmniejszona lub powiększona.

Narzędzie Brightness and Contrast (Jasność i kontrast) — umożliwia skorygowanie jasności zbyt ciemnego lub zbyt jasnego zdjęcia. W oknie dialogowym tego narzędzia znajdują się dwa suwaki — jeden umożliwia regulację jasności, drugi zaś kontrastu. Obydwa te parametry mogą być korygo­wane niezależnie od siebie. Podgląd wprowadzonych zmian jest na bieżąco aktualizowany w oknie dokumentu, co ułatwia ich oszacowanie.

Narzędzie Sharpen (Wyostrz) — pozwala na zaakcentowanie krawędzi obiektów na zdjęciu poprzez odpowiednią regulację kontrastu pomiędzy sąsiadującymi pikselami. Zmiany tej można dokonać przy uży­ciu suwaka wyskalowanego od 0 do 10. Podobnie jak to ma miejsce w przypadku narzędzia Brightness and Contrast (Jasność i kontrast), podgląd zmiany ostrości jest na bieżąco aktualizowany w oknie dokumentu.

Wszystkie operacje związane z przetwarzaniem obrazu, z wyjątkiem zmian wprowadzonych przy użyciu narzędzi Edit (Edytuj) i Optimize (Optymalizuj), można anulować przy użyciu polecenia Edit/Undo (Edycja/Cofnij) aż do chwili zamknięcia dokumentu lub programu Dreamweaver.

•

•

•

128 LEKCJA 5

Elementy graficzne

Uruchom program Adobe Fireworks CS3.Wydaj polecenie File/Open (Plik/Otwórz). Gdy na ekranie wyświetlone zostanie okno dialo­

gowe Open (Otwórz), odszukaj folder Lekcja05/source i zaznacz plik navbar.png. Kliknij przycisk Open (Otwórz).

1.

2.

Jest to gotowy pasek nawigacji, przygotowany do wyeksportowania.

Choć projektowanie pasków nawigacji i innych elementów graficznych w programie Fireworks wykracza poza ramy niniejszej książki, zachęcam do samodzielnych eksperymentów i zapoznania się ze strukturą pliku navbar.png. Analizując informacje wyświetlone w panelu Layers (Warstwy), przekonasz się, że składa się on z prostokąta oraz pięciu przycisków, po jednym dla każdego łącza.

Wydaj polecenie File/Export (Plik/Eksportuj). Gdy na ekranie wyświetlone zostanie okno dialogowe Export (Eksportuj), odszukaj folder Lekcja05/images.Najważniejszą rzeczą, o której należy pamiętać, eksportując „pocięty” projekt graficzny programu Fireworks w celu wykorzystania go w projekcie Dreamweaver, jest to, by wyeksportować zarów­no kod HTML, jak i elementy graficzne. To proste — wystarczy jedynie wybrać odpowiednie ustawienia.

Pozostaw domyślną nazwę navbar w polu File name (Nazwa pliku) i upewnij się, że z listy Export (Eksportuj) wybrana została 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 (Dołącz obszary bez pla-sterków), Current page only (Tylko bieżąca strona) oraz Put images in subfolder (Wyślij obrazy do podfolderu).Ponieważ pocięcie elementu graficznego na drobniejsze części powoduje wygenerowanie wielu oddzielnych obrazków o bardzo podobnych nazwach, warto zgromadzić je wszystkie w osobnym folderze. Na przykład po wyeksportowaniu projektu navbar.png otrzymujemy aż 25 oddzielnych obrazków. Domyślnie program Fireworks umieszcza je w folderze o nazwie images, lecz w celu uniknięcia ewentualnych pomyłek warto nadać mu nieco inną nazwę, która dokładniej będzie odzwierciedlała jego zawartość.

3.

4.

129ADOBE DrEAmwEAvEr CS3/CS3 PL

Oficjalny podręcznik

Kliknij przycisk Browse (Przeglądaj) lub New Folder (Nowy folder) w systemie Mac OS, aby wybrać nowy folder dla wygenerowanych obrazków. Gdy na ekranie wyświetlone 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).

5.

Po zakończeniu całej operacji wydaj polecenie File/Save (Plik/Zapisz) i zamknij program Fireworks.Operacja eksportowania projektu przebiega zdumiewająco szybko. Niemniej jednak, w jej trakcie program Fireworks tworzy plik z kodem HTML, w którym wszystkie pocięte elementy obrazka umieszczone są w tabeli. Kod jest generowany w taki sposób (między innymi z uwzględnieniem „pustych” obrazków), by zapewnić maksymalną zgodność między przeglądarkami. Oprócz tego każdy pojedynczy obrazek zapisywany jest we wskazanym przed chwilą folderze w dwóch warian­tach odzwierciedlających stan „zwykły” i „aktywny”.

Jeśli to konieczne, uruchom program Adobe Dreamweaver CS3.

6.

7.

130 LEKCJA 5

Elementy graficzne

Rozwiń folder Lekcja05 w panelu Files (Pliki) i ponownie otwórz dokument images_start.htm, który znasz już z poprzednich ćwiczeń omawianych w trakcie tej lekcji.8.

Zaznacz tymczasowy obraz o nazwie Navigation i naciśnij klawisz Delete (Mac OS: Backspace).

Kliknij ikonę Fireworks HTML (HTML programu Fireworks) znajdującą się w kategorii Common (Wspólne) na pasku Insert (Wstaw).

Kliknij przycisk Browse (Przeglądaj) w oknie dialogowym Insert Fireworks HTML (HTML programu Fireworks) i odszukaj plik navbar.htm. Zaznacz go i kliknij przycisk Open (Otwórz). Opcja Delete file after insertion (Usuń plik po wstawieniu) w oknie dialogowym Insert Fireworks HTML (HTML programu Fireworks) powinna być wyłączona; jeśli tak jest w istocie, kliknij przy­cisk OK.

9.

10.

11.

Program Dreamweaver „przefiltruje” kod HTML wygenerowany przez program Fireworks i umie­ści w pliku z projektem jego najbardziej istotny fragment, zawierający strukturę tabeli. Ponadto zweryfikowane i wczytane zostaną wszystkie elementy graficzne składające się na importowany fragment, co pozwala uniknąć sytuacji, w której na stronie brakowało będzie jakichś fragmentów paska nawigacji.

131ADOBE DrEAmwEAvEr CS3/CS3 PL

Oficjalny podręcznik

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

Jeśli podczas wstawiania paska nawigacji panel Properties (Właściwości) jest otwarty, to zapewne zwróciłeś uwagę, że cała struktura paska traktowana jest jako tabela programu Fireworks. Oprócz normalnych opcji i ustawień skojarzonych ze zwykłymi tabelami, w tym przypadku wyświetlane jest pole Src (Src), w którym znajduje się nazwa źródłowego obrazu w formacie PNG. Jeśli chcesz wprowadzić jakieś zmiany w wyglądzie tego obrazu, kliknij przycisk Edit (Edytuj), aby uruchomić program Fireworks — zostanie on w nim otwarty automatycznie. Posługując się programem Fi­reworks, można zmodyfikować go w dowolny sposób, na przykład zmienić napisy na przyciskach lub ich liczbę.

Umieszczanie w projekcie plików programu PhotoshopProgram Dreamweaver stanowi jeden z elementów pakietu Adobe Creative Suite 3, a jego inte­gracja z pozostałymi programami z tego pakietu sprawia, że wykorzystanie w projekcie WWW obiektów przygotowanych na przykład w Photoshopie staje się bardzo proste. Istnieje cały szereg sposobów na przenoszenie elementów graficznych pomiędzy różnymi programami pakietu CS3, lecz jedna z najprostszych metod polega po prostu na otwarciu źródłowego pliku w formacie PSD w programie Dreamweaver. Pliki PSD zapisywane przez Photoshopa nie nadają się do bezpośred­niego wykorzystania w projekcie stron internetowych, lecz można je z łatwością skonwertować na jeden z powszechnie stosowanych formatów przy użyciu znanego Ci już okna dialogowego Image Preview (Podgląd obrazu).

Uwaga: Do realizacji opisywanego ćwiczenia wymagany jest program Adobe Photoshop CS3.

Wyświetl zawartość foldera Lekcja05 w panelu Files (Pliki) i dwukrotnie kliknij plik pl_brid-ge_start.htm, aby go otworzyć.1.

132 LEKCJA 5

Elementy graficzne

Umieść kursor przed pierwszym akapitem w kolumnie po lewej stronie, który rozpoczyna się od słów We strive to move beyond the ordinary.

Kliknij ikonę Image (Obraz) w kategorii Common (Wspólne) paska Insert (Wstaw).Gdy na ekranie wyświetlone zostanie okno dialogowe Select Image Source (Wybierz źródło obra-

zu), odszukaj folder Lekcja05/source i zaznacz plik o nazwie our_world.psd. Kliknij przycisk OK.Gdy na ekranie wyświetlone zostanie okno dialogowe Image Preview (Podgląd obrazu),

przeciągnij suwak Quality (Jakość) w taki sposób, by wskazywał wartość 60, i kliknij zakładkę File (Plik). Upewnij się, że opcja Constrain (Ogranicz) w sekcji Scale (Skaluj) została włączona, i wpisz 360 w polu Width (Szeokość). Gdy skończysz, kliknij przycisk OK.

2.

3.

4.

5.

133ADOBE DrEAmwEAvEr CS3/CS3 PL

Oficjalny podręcznik

Program Dreamweaver przeskaluje zdjęcie i skonwertuje je z formatu PSD na JPEG, nadając mu jakość odpowiadającą wybranej wcześniej wartości. Otrzymany w ten sposób obrazek można już wstawić do projektowanej strony.

Odszukaj folder Lekcja05/images w oknie dialogowym Save Web Image (Zapisz obraz interne-towy). Upewnij się, że w polu File name (Nazwa pliku) widnieje napis our_world, i kliknij przycisk Save (Zapisz).

6.

Zapisany w ten sposób obrazek zostanie automatycznie wstawiony do projektu w bieżącym poło­żeniu kursora.

Wydaj polecenie File/Save (Plik/Zapisz).Podobnie jak w poprzednim ćwiczeniu, po zaznaczeniu obrazka na stronie w panelu Properties (Właściwości) wyświetlone zostaną informacje dotyczące nietypowego pochodzenia tego elemen­tu projektu oraz narzędzia ułatwiające przystąpienie do edycji obrazu źródłowego w Photoshopie.

7.

W celu zmodyfikowania obrazu Photoshopa umieszczonego w projekcie strony kliknij ikonę Edit (Edytuj) z symbolem programu Photoshop. Po otwarciu obrazka w Photoshopie i wprowadzeniu niezbędnych zmian w jego wyglądzie należy zaznaczyć cały ten obrazek, skopiować go do schowka przy użyciu polecenia Edit/Copy Merged (Edycja/Kopiuj scalone), a na koniec wydać polecenie Edit/Paste (Edycja/Wklej) w programie Dreamweaver. Spowoduje to zastąpienie dotychczasowego elementu graficznego jego zmodyfikowaną wersją.

134 LEKCJA 5

Elementy graficzne

Kopiowanie i wklejanie elementów graficznych z programu PhotoshopWielu grafików używa Photoshopa do opracowania wstępnej makiety strony. Do ostatecznego projektu wystarczy użyć jedynie pewnych fragmentów takiej makiety; pozostałe części strony wypełnione będą przecież tekstem lub zbudowane w oparciu o style CSS. Posługując się Photo­shopem CS3 i Dreamweaverem CS3, można z łatwością skopiować wybrany fragment obrazka i umieścić go w projekcie programu Dreamweaver. Podobnie jak to miało miejsce w poprzednim ćwiczeniu, okno dialogowe Image Preview (Podgląd obrazu) służyć będzie jako „pośrednik” umoż­liwiający konwersję kopiowanego elementu graficznego na pożądaną postać.

Uwaga: Do realizacji opisywanego ćwiczenia wymagany jest program Adobe Photoshop CS3.

Jeśli to konieczne, otwórz ponownie plik ps_bridge_start.htm, którym posługiwaliśmy się w poprzednim ćwiczeniu. Użyj w tym celu panelu Files (Pliki), dwukrotnie klikając nazwę wspo­mnianego pliku.

Umieść kursor na początku akapitu w kolumnie po prawej stronie; akapit ten rozpoczyna się od słów We want you involved in your re-design.

1.

2.

Uruchom program Adobe Photoshop CS3 i wydaj polecenie File/Open (Plik/Otwórz). Odszu­kaj folder Lekcja05/source w oknie dialogowym Open (Otwórz), zaznacz plik company_history.psd i kliknij przycisk Open (Otwórz).Otwarty plik stanowi makietę zupełnie innej strony internetowej, lecz w makiecie znajduje się zdjęcie, którego fragment można umieścić w bieżącym projekcie.

3.

135ADOBE DrEAmwEAvEr CS3/CS3 PL

Oficjalny podręcznik

Włącz narzędzie Zoom (Lupka), którego ikona znajduje się na pasku narzędzi Photoshopa, i powiększ fragment ze zdjęciem, obrysowując go kursorem myszy. Włącz narzędzie Rectangular Marquee (Zaznaczanie prostokątne) i narysuj zaznaczenie obejmujące dwie pary nóg po lewej stronie zdjęcia, z pominięciem purpurowej ramki otaczającej fotografię.

4.

Wydaj polecenie Edit/Copy (Edycja/Kopiuj). Zamknij program Photoshop, nie zapisując zmian w dokumencie, i powróć do edytowania projektu strony w programie Dreamweaver.5.

Jeśli element graficzny przeznaczony do skopiowania znajduje się na kilku różnych warstwach, to zamiast zwykłego polecenia Copy (Kopiuj) wydaj polecenie Edit/Copy Merged (Edycja/Kopiuj scalone).

Wydaj polecenie Edit/Paste (Edycja/Wklej) w programie Dreamweaver. Gdy na ekranie wy­świetlone zostanie okno dialogowe Image Preview (Podgląd obrazu), wybierz opcję JPEG — Better Quality (JPEG — lepsza jakość) z listy Saved Settings (Zapisane ustawienia) i kliknij przycisk OK.

Odszukaj folder Lekcja05/images w oknie dialogowym Save Web Image (Zapisz obraz interne-towy), w polu File name (Nazwa pliku) wpisz jump.jpg i kliknij przycisk OK.Zdjęcie skopiowane z Photoshopa zostanie wstawione do projektu strony. Spróbujmy teraz wyrównać je do prawej krawędzi kolumny tekstu, posługując się gotową, zdefiniowaną wcześniej klasą CSS.

6.

7.

136 LEKCJA 5

Elementy graficzne

Zaznacz wstawiony element graficzny i — jeśli to konieczne — wydaj polecenie Window/Pro-perties (Okno/Właściwości). Wybierz nazwę klasy imageRight z listy Class (Klasa) w panelu Proper-ties (Właściwości).

8.

Wydaj polecenie File/Save (Plik/Zapisz).Edycja fragmentów zdjęć pochodzących z większych projektów Photoshopa jest bardzo podobna do edycji całych (skonwertowanych) obrazów utworzonych w tym programie. Polega ona na zaznaczeniu wstawionego fragmentu i kliknięciu ikony Edit (Edytuj) z logo Photoshopa, znajdującej się w panelu Properties (Właściwości). Po otwarciu źródłowego obrazu w Photoshopie należy wprowadzić w nim odpowiednie zmiany, ponownie skopiować potrzebny fragment i wkleić go w oknie projektu Dream­weaver. Program Dreamweaver automatycznie zastosuje te same ustawienia związane z optymalizacją obrazu, które były poprzednio wybrane w oknie dialogowym Image Preview (Podgląd obrazu).

Program BridgeNazwa programu Adobe Bridge CS3 (ang. słowo bridge oznacza „most”) jest adekwatna do funkcji, jaką aplikacja ta pełni w pakiecie Creative Suite: stanowi ona bowiem pewnego rodzaju pomost i wspólną bazę zasobów dla wszystkich programów z tego pakietu, w tym Dreamweavera. Posługując się programem Bridge, możesz szybko i wygodnie przeglądać foldery z materiałami graficznymi i innymi składnikami projektów, oznaczać pliki słowami kluczowymi i korzystać z profesjonalnych bibliotek zdjęć, na przykład serwisu Adobe Stock Photos. Program Bridge jest w pełni zintegrowany z Dreamweaverem: można nie tylko uruchomić go z poziomu tej aplikacji, lecz także przeciągać zdjęcia z okna programu Bridge do okna projektu Dreamweavera.

Jeśli to konieczne, otwórz ponownie plik ps_bridge_start.htm, którym posługiwaliśmy się w poprzednim ćwiczeniu. Użyj w tym celu panelu Files (Pliki), dwukrotnie klikając nazwę wspo­mnianego pliku.

9.

1.

137ADOBE DrEAmwEAvEr CS3/CS3 PL

Oficjalny podręcznik

Umieść kursor na końcu akapitu w kolumnie po lewej stronie; akapit ten kończy się słowami ends far-reaching experience. Naciśnij klawisz Enter (Return w Mac OS), aby przenieść kursor do nowego wiersza.W dalszej części ćwiczenia w tym miejscu umieszczony zostanie obrazek przeniesiony z programu Bridge.

Wydaj polecenie File/Browse in Bridge (Plik/Przeglądaj w Bridge).Po uruchomieniu programu Bridge kliknij zakładkę Folders (Foldery), odszukaj folder Lek-

cja05/images i zaznacz plik o nazwie cans.jpg.

2.

3.

4.

Wydaj polecenie File/Place/In Dreamweaver (Plik/Umieść/W programie Dreamweaver).Wybrane zdjęcie zostanie umieszczone w projekcie programu Dreamweaver; jednocześnie uak­tywnione zostanie okno tego programu. Wybrane zdjęcia można też przenosić pomiędzy pro­gramem Bridge a Dreamweaverem przy użyciu myszy; spróbujmy zatem zastąpić wybraną przed chwilą fotografię inną, która będzie lepiej pasowała do charakteru strony.

Uwaga: Jeśli plik z elementem graficznym przeniesionym z programu Bridge do projektu Dreamweavera znajduje się poza strukturą serwisu, do którego ten projekt należy, to na ekranie wyświetlony zostanie komunikat umożliwiający skopiowanie tego pliku do głównego foldera serwisu.

5.

138 LEKCJA 5

Elementy graficzne

Zaznacz wstawione przed chwilą zdjęcie i naciśnij klawisz Delete (Backspace w Mac OS). Klik­nij ikonę Switch to Compact Mode (Przełącz na tryb kompaktowy) w programie Bridge — jest to ostatnia ikona w prawym górnym 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 około ¼ wielkości ekranu, a prócz tego sprawia, że okno to jest zawsze „na wierzchu” innych okien, co ułatwia przeglądanie i przenoszenie zasobów do bieżącego projektu.

Przeciągnij zdjęcie track.jpg z programu Bridge do okna projektu, umieszczając je w tym samym miejscu co poprzednią fotografię — w dolnej części kolumny z tekstem, po lewej stronie.

6.

7.

Wydaj polecenie File/Save (Plik/Zapisz) w programie Dreamweaver. Naciśnij klawisz F12 (Option+F12 w Mac OS), aby wyświetlić podgląd strony w domyślnej przeglądarce internetowej; koniecznie sprawdź działanie przycisków wchodzących w skład menu zaimportowanego z progra­mu Fireworks. Gdy skończysz, zamknij program Bridge.Gratulacje, właśnie ukończyłeś kolejną lekcję!

8.