Rozdział 6. Praca z obrazami

Jeśli Twoja praca wymaga korzystania z sieci, jest to praca z obrazami. Nie ma tu znaczenia czy zarządzasz bazą danych, jesteś Webmasterem, czy projektantem zajmującym się konwersją dokumentów drukowanych do postaci HTML.

W ciągu ostatnich kilku lat Internet stał się wirtualną galerią. Niemal na każdej nowej stronie WWW pojawiają się wytrzaśnięte skądś fotografie i ilustracje, zeskanowane, skompresowane do formatu GIF lub JPG. Trafiają na serwery sieciowe WWW i stają się dostępne całej reszcie świata.

W tym rozdziale omówimy następujące tematy:

q       Formaty plików graficznych

q       Wstawianie i wyrównywanie obrazów

q       Edycja obrazów

q       Zasoby plików graficznych

q       Miniatury obrazów i albumy fotograficzne WWW

q       Rady dla umieszczających swoje pliki graficzne na serwerze

Jeśli chcesz, aby Twoje strony WWW były atrakcyjne wizualnie, musisz nauczyć się korzystać z jakiegokolwiek programu do edycji grafiki. Z utworzonych w nim obrazów można następnie korzystać w programie Dreamweaver – wstawiać je w dokumencie, stosować wyrównanie i tworzyć obrazy-połączenia. Oto wybrane programy graficzne, z których ewentualnie mógłbyś korzystać:

q       Macromedia Fireworks

q       Macromedia Freehand

q       Adobe Photoshop

q       Adobe Illustrator

q       Corel Draw

q       Microsoft Powerpoint

q       Paintshop Pro

Pracując nad układem strony masz do czynienia nie tylko z obrazami. Strona to tekst, obrazy, skrypty JavaScript, animacje oraz dane innego typu (na przykład pliki dźwiękowe).

Obrazy stanowią integralną część każdej strony WWW, ale nie będą użyte poprawnie, dopóki nie zdobędziesz podstawowej wiedzy z zakresu ich wyrównywania za pomocą tabel. Umieszczenie obrazu bezpośrednio w dokumencie nie jest dobrym pomysłem – lepsze rozwiązanie to wstawić obraz do komórki tabeli.

W ćwiczeniach z tego rozdziału tak właśnie postąpimy. Ułatwi to kwestię wyrównania obrazów. Jeśli wolałbyś uzyskać wcześniej informacje na temat definiowania układu strony za pomocą tabel, sięgnij do rozdziału 8., „Definiowanie układu strony za pomocą tabel”. 

Formaty plików graficznych

Przypuszczalnie już słyszałeś o dwóch typach plików graficznych, które są powszechnie stosowane na stronach WWW – GIF i JPEG. Jeśli nie, tutaj znajdziesz niezbędne informacje.

Format Gif

Najpopularniejszym formatem plików graficznych do zastosowań w Internecie jest format GIF (Grafical Interchange Format). Obrazy GIF są interpretowane niemal przez wszystkie typy przeglądarek (oczywiście zawsze są wyjątki, ale pominiemy ten obszar szaleństwa). Najnowsze wersje programów do obróbki grafiki, takich jak Adobe Photoshop i Illustrator, CorelDraw, Microsoft Paint i inne, mają możliwość eksportowania obrazów do formatu GIF. Firma Macromedia przygotowała z kolei program do edycji obrazów (Fireworks), który ręka w rękę współpracuje z programem Dreamweaver (jeśli nigdy nie używałeś Fireworks, spróbuj, polecam). Fireworks nie tylko umożliwia zoptymalizowanie obrazów pod kątem ich zastosować sieciowych, lecz pozwala także na edycję obrazów poprzez interfejs programu Dreamweaver.

Nie ma znaczenia, jaki program wybierzesz, jeśli tylko wiesz, że obrazy GIF najbardziej się nadają do szkiców i prostych ilustracji (do fotografii stosuj format JPEG, o którym później). Jednobarwne płaszczyzny konwertują się do postaci GIF w bardzo prosty sposób. Format GIF pozwala również wybrać liczbę kolorów. Pamiętaj, że im więcej kolorów, tym większy plik. Jest także możliwość takiej kompresji obrazu GIF, że będzie on mniejszy, niż odpowiadający mu plik JPEG.

Inna zaleta formatu GIF to możliwość zdefiniowania obrazu jako przeźroczystego. Na przykład, jeśli skanujesz logo, które będzie drukowane na białych kopertach, zeskanowany obraz ma białe tło. Obraz zapisany w formacie GIF zachowa to tło. Możesz je jednak usunąć definiując obraz jako przeźroczysty. Taki obraz można bezpiecznie umieścić na tle dowolnego koloru.

Technika wykorzystująca przeźroczystość jest warta uwagi. Twoje obrazy na stronach WWW będą wyglądały znacznie bardziej profesjonalnie, gdy białe tła zostaną usunięte. Pozwoli to na przykład utworzyć okrągły znak logo, który rzeczywiście zostanie wyświetlony jako kółko, a nie kółko w białym kwadracie. Na stronach www.webmonkey.com i www.lynda.com znajdziesz parę dobrych artykułów na temat przeźroczystości. Sprawdź także w plikach pomocy swojego oprogramowania do obróbki grafiki, jakie instrukcje uczynią obraz przeźroczystym. W programie Dreamweaver obraz przeźroczysty jest traktowany w taki sam sposób jak nieprzeźroczysty. Jednak z palety kolorów programu Dreamweaver można wybrać kolor odpowiadający użytemu jako tło obrazu przeźroczystego w programie graficznym.

Rozpraszanie kolorów i powstawanie pasm

Format GIF ma swoje wady. Jeśli jesteś projektantem, przypuszczalnie uwielbiasz stosować przejścia tonalne i odcienie. Niestety format GIF nie bardzo się do tego nadaje. O ile nie zapiszesz obrazu GIF używając dużej liczby kolorów, Twoje przejścia tonalne będą wyświetlane w przeglądarce jako paski (patrz rysunek 6.1). Niektóre programy do tworzenia grafiki z przeznaczeniem dla stron WWW, jak na przykład Fireworks, umożliwiają zasymulowanie większej liczby kolorów z pomocą mniejszej palety. Jeśli obraz zawiera przejścia tonalne, powinieneś skorzystać z tej opcji, aby uzyskać ciągłe przejścia kolorów, a nie pasma.

Jeśli nie używasz przejść tonalnych, rozpraszania kolorów należy unikać. Chociaż czasami efekt może być interesujący, to jednak Twoje obrazy mogą sprawiać wrażenie amatorskiej produkcji. Zagrożenie dla przejść tonalnych stanowią karty grafiki starego typu, wyświetlające tylko 256 kolorów (kolor 8-bitowy). Jeśli na obrazie są ciągłe przejścia kolorów, takie karty graficzne muszą zinterpretować kolory leżące między rozpoznawanymi (czyli kolorami z palety systemowej). W efekcie tego przybliżenia na obrazie pojawią się plamy. Jest to efekt zbyt niskiej głębi kolorów. Efekt rozpraszania kolorów prezentuje rysunek 6.2

Rysunek w książce nie ma nic wspólnego z rozpraszaniem kolorów, półtonami, itp. Chyba należałoby tu umieścić inny rysunek.

.

Format JPEG

Drugi na liście formatów plików graficznych stosowanych w Internecie jest format JPEG (Joint Photographics Experts Group). Format JPEG to najlepszy wybór dla fotografii. Stosowany do szkiców i prostych ilustracji spowoduje pojawienie się na obrazach rozmyć (naszą one nazwę artefaktów), z których na pewno nie byłbyś zadowolony, oraz zupełnie zbędny przyrost wielkości pliku. Podobnie jak w przypadku formatu GIF, w większości programów graficznych (ich lista pojawia się na początku tego rozdziału) możliwy eksport obrazu do formatu JPEG.

Fotografie zapisane w formacie JPEG wyglądają wspaniale. Wiele programów do edycji obrazów, takich jak Fireworks, pozwala określić stopień kompresji fotografii. Niski stopień, to mniejszy rozmiar pliku. Tak więc kompresja na poziomie 60 da w efekcie mniejszy plik niż kompresja na poziomie 90. Z drugiej strony wyższy stopień kompresji to wyższa jakość fotografii (ponieważ pliki JPEG nie są wielkie, więc zazwyczaj wybieram stopień kompresji na poziomie 80-90, aby jakość była wysoka). Jeśli jednak korzystasz z wolnych łączy sieciowych, możesz rozważyć zredukowanie stopnia kompresji lub zmniejszenie rozmiarów obrazu.

W przypadku obrazów łączących szkic z fotografią, zalecanym formatem jest GIF, bowiem pozwala uniknąć artefaktów.

Format PNG

Inny popularny w Internecie format plików graficznych to PNG (Portable Network Graphics). Wielu projektantów stron WWW ucieszyłaby wiadomość, że jest on obsługiwany przez wszystkie przeglądarki sieciowe. W przeciwieństwie do obu wcześniej omówionych formatów, pliki w formacie PNG można zapisywać przy różnych głębiach kolorów. Standard GIF jest ograniczony do koloru 8-bitowego. JPEG daje dwie możliwości – kolor 8- i 24-bitowy. Natomiast format PNG daje możliwość zapisu grafiki truecolor oraz grafiki grayscale, a górnym ograniczeniem jego możliwości jest kolor 32-bitowy. Oznacza to, że możesz tworzyć wspaniałe obrazy, o pięknych odcieniach kolorów i obfitości przejść tonalnych, nie martwiąc się wcale rozpraszaniem kolorów oraz tworzeniem pasm. Jego jedyną wadą jest brak pełnego wsparcia przez dostępne oprogramowanie i brak ukończonego procesu standaryzacji. Internet Explorer 4.x i Netscape Navigator 4.x już go obsługują, lecz czasami konieczne jest zastosowanie modułu dodatkowego. Radzę powstrzymać się ze stosowaniem go i czekać cierpliwie.

Początek ramki

Uwaga

Domyślnym formatem plików graficznych w programie Macromedia Fireworks jest PNG. Musisz więc zastosować polecenie export, aby zapisać plik jako GIF lub JPEG.

Koniec ramki 

Początek ramki

Mark Klein – wyznaczający nowe granice

Internet to żyzna gleba dla artystów nowego typu, a Mark Klein do nich należy. Jest założycielem Pixel Industries (www3.pixel-industries.com), agencji projektującej grafikę sieciową, z siedzibą w Monachium, Niemcy (patrz rysunki 6.3 i 6.4). Założył także i prowadzi listę dyskusyjną Creative Republic dla setek projektantów stron WWW.

Gładki i subtelny styl jego obrazów jest podkreślony niewielkimi animacjami, które pojawiają się, wirują i znikają w rytm muzyki trance, która towarzyszy Twojej podróży on-line. Klein posługuje się frapującymi frazami, aby przyciągnąć wzrok użytkownika: „Promenada Zapomnianych Snów” (ang. Promenade of Forgotten Dreams), „Wieża Do Skoków Samobójczych” (ang. The Suicide Jumping Tower) i „Słoneczniki Indiańskiego Lata” (ang. The Sunflowers of Indian Summer) to tytuły jego sieciowych plakatów. Skusiły one wielu do kliknięcia myszką. „Treść jest królem”, stwierdza Klein, „a połączenie słowa pisanego i ekspresyjnego materiału graficznego może wywrzeć bardzo głębokie wrażenie”.

Klein pojawił się kilka lat temu jako projektant internetowych tablic ogłoszeniowych (ang. BBSs; bulletin board systems) i ikon, ale wiedział już, że przyszłość przyniesie nowe możliwości w dziedzinie stosowania nowego rodzaju mediów. „W tych latach przeglądarka Netscape Navigator 1.0 narzucała na możliwości projektowe szereg ograniczeń. Dla mnie był to początek, pewnego rodzaju nadzieja i marzenie, że pewnego dnia media zaoferują mi całkowitą swobodę w kwestii projektowania układu strony i jej zawartości”.

Klein tworzy żywe ilustracje, na których obiekty przemysłowe mają ludzką formę. „Pliki graficzne w formacie GIF są nadal ulubione, ponieważ format ten umożliwia tworzenie animacji bez konieczności stosowania modułów dodatkowych. Ponadto, obrazy GIF, niewielkie pod względem rozmiaru plików, są niezwykle użyteczne przy tworzeniu dużych ilustracji stosowanych jako tła i wykorzystujących 8 kolorów albo nawet mniej”.

Ilustracje Kleina powstają najpierw w jego umyśle, a dopiero potem przenoszone są do programów projektowania stron WWW. „Można stworzyć wzruszające i interesujące strony WWW stosując bardzo proste techniki HTML”, mówi. „Nie pozwól, aby programy do projektowania i tworzenia interaktywnych stron WWW ograniczały Cię w Twoich pomysłach, aby ograniczały Twą wyobraźnię”.

Projektowanie z wykorzystaniem obrazów

Obrazy to więcej niż ozdoba Twojej strony WWW. Powinny one przekazywać użytkownikom ważne informacje pomocne w znajdowaniu zawartości i w nawigacji. W idealnej sytuacji powinny wywoływać także reakcję emocjonalną i nadawać Twoim stronom piętno indywidualizmu. Proces tworzenia obrazów i nadawania im profesjonalnego wyglądu powinien odbywać się zanim obraz zostanie wykorzystany w programie Dreamweaver. Nie znaczy to oczywiście, że poza programem do edycji obrazów nie ma już miejsca na kreatywność.

Dreamweaver oferuje wiele narzędzi do obsługi obrazów. Nie tylko masz możliwość precyzyjnego wyrównania obrazów, lecz możesz także skorzystać z palety kolorów programu Dreamweaver, aby dobrać kolor tła identyczny ze stosowanym w programie do obróbki grafiki. Obrazy staną się jeszcze bardziej użyteczne, jeśli wykorzystasz udostępniane przez Dreamweavera możliwości tworzenia połączeń, takie jak obszary aktywne i pasek nawigacji z obrazami interaktywnymi. A jeśli stwierdzisz, że konieczne jest zastąpienie obrazu innym, możesz wykorzystać program Dreamweaver do automatycznego uruchomienia programu do edycji grafiki.

Na rysunku 6.5 przedstawiono dokument programu Dreamweaver w widoku projektu, zawierający obraz. Poniżej obrazu znajduje się inspektor Property, z którego można się dowiedzieć jaka jest ścieżka dostępu do pliku obrazu, jaka jest wielkość pliku, nazwa i tekst alternatywny. Gdybyś wyświetlił ten dokument w widoku kodu, zobaczyłbyś, że użyto tu znacznika <IMG SRC>. Znacznik ten stanowi w języku HTML odwołanie do obrazu.

Początek ramki

Co to jest znacznik <ALT>?

Aby przypisać obrazowi za pomocą znacznika <ALT> tekst alternatywny, wpisz go w polu ALT inspektora Property (patrz rysunek 6.5).

W systemie Windows, tekst zawarty w elemencie ALT będzie wyświetlany w niektórych przeglądarkach, gdy użytkownik umieści wskaźnik myszki nad obrazem. Pojawi się on także w trakcie ładowania strony w obszarze rezerwującym miejsce na obraz.

Warto definiować tekst alternatywny także z tego względu, że będzie on pomocny dla ludzi z dysfunkcją narządu wzroku.

Możesz także ściągnąć z Macromedia Exchange rozszerzenie, które sprawdzi Twoje dokumenty HTML pod kątem ewentualnych utrudnień w korzystaniu z dokumentów przez niepełnosprawnych. Rozszerzenie znajdziesz pod adresem www.macromedia.com/exchange, pod hasłem accessibility.

Koniec ramki

Ćwiczenie 6.1. Wstawianie obrazów, stosowanie wyrównania i definiowanie wolnego obszaru wokół obrazu

To ćwiczenie podzielone jest na trzy części, a jego celem jest zapoznanie Cię z podstawami obsługi obrazów w programie Dreamweaver. W całym ćwiczeniu stosował będziesz widok projektu. Potrzebny nam będzie także inspektor Property (Ctrl+F3).

Część I poprowadzi Cię przez kolejne etapy wstawiania dwóch obrazów i wyrównywania ich w komórkach tabeli. Część II omawia proces definiowania obłamywania tekstu wokół obrazu (wewnątrz tabeli). W części III zajmiemy się definiowaniem wolnego obszaru wokół obrazu.

Część I. Wstawianie dwóch obrazów w komórkach tabeli

1. Otwórz plik IMAGE101.HTML z foldera Moire znajdującego się na dysku CD dołączonego do książki. Kliknij w widoku projektu obszar roboczy dokumentu i wybierz z menu Insert pozycję Table.
2. W oknie dialogowym Insert Table zdefiniuj tabelę o szerokości 300 pikseli zbudowaną z jednaj kolumny i dwóch wierszy. Wpisz w polu Border wartość 0. W polach Cell Padding i Cell Spacing także umieść wartość 0. Po zdefiniowaniu tabeli, naciśnij przycisk OK.
3. Zaznacz tabelę (klikając jej obramowanie), otwórz inspektora Property (Ctrl+F3) i wybierz z listy Align pozycję Center. Spowoduje to przesunięcie tabeli na środek strony.
4. Tabela przygotowana jest do wstawienia obrazów – kliknij górny wiersz. Wybierz w menu Insert pozycję Image i znajdź na dysku CD plik MOIRE.GIF.
5. Po wstawieniu obrazu do górnej komórki tabeli, kliknij w dolnym wierszu i powtórz krok 4, aby wstawić obraz TITLE.GIF. Znajduje się on w tym samym folderze Moire.
6. Do obu wstawionych do tabeli obrazów należy teraz zastosować wyrównanie. Nie zaznaczając obrazu kliknij górną komórkę tabeli i wybierz z listy Horz inspektora Property element Center, a z listy Vert pozycję Top. W identyczny sposób zajmij się obrazem w dolnej komórce tabeli. Gdy w obu przypadkach ustawienia zostaną zdefiniowane, obrazy zostaną wyrównane do środka zajmowanych przez nie komórek.
7. Zapisz dokument i wyświetl w przeglądarce.

Część II. Obłamywanie tekstu wokół obrazu

1. Otwórz dokument WRAPTEXT.HTML z foldera Moire znajdującego się na dysku CD dołączonego do książki.
2. Kliknij w widoku projektu górny lewy róg dokumentu, przed pierwszym wyrazem.
3. Wybierz z menu Insert pozycję Table i zdefiniuj w oknie dialogowym Insert Table tabelę o szerokości 100 pikseli zbudowaną z jednaj kolumny i jednego wiersza. Wpisz w polach Border, Cell Padding i Cell Spacing wartość 0. Po zdefiniowaniu tabeli, naciśnij przycisk OK.
4. Zaznacz tabelę (klikając jej obramowanie), otwórz inspektora Property (Ctrl+F3) i wybierz z listy Align pozycję Left. Spowoduje to przesunięcie tabeli do lewego marginesu strony, a tekst obłamie się wokół niej (w przypadku rozdzielenia tekstu na osobne fragmenty, kliknij w miejscu odstępu i usuń go korzystając z klawiszy Delete lub Backspace).
5. Kliknij w komórce tabeli. Wybierz w menu Insert pozycję Image i znajdź na dysku CD plik MOIRELOGO.GIF. Obraz pojawi się wewnątrz komórki tabeli.

Część III. Definiowanie wolnej przestrzeni wokół obrazu

Po zdefiniowaniu obłamywania tekstu wokół obrazu, konieczne jest wprowadzenie wolnej przestrzeni wokół obrazu, aby tekst nie stykał się z jego krawędziami. Skorzystaj z pól V Space i H Space inspektora Property, aby określić w pikselach rozmiary wolnego obszaru.

Ustawienie V Space definiuje szerokość wolnego obszaru nad i pod obrazem, ustawienie H Space wprowadza wolny obszar z prawej i lewej strony. Choć możesz jednocześnie podać obie wartości, V i H, nie da się niestety wprowadzić wolnego obszaru tylko z jednej strony obrazu.

Aby zdefiniować wolny obszar wokół obrazu MOIRELOGO.GIF (patrz części I i II tego ćwiczenia):

1. Zaznacz obraz (lecz nie tabelę) i kliknij w polu V Space i wpisz wartość 0 – nie ma bowiem potrzeby dodawania wolnej przestrzeni w pionie.
2. Kliknij w polu H Space i wpisz wartość 8. Spowoduje to dodanie z prawej i lewej strony obrazu wolnych obszarów o szerokości 8 pikseli i zapobiegnie stykaniu się tekstu z obrazem.
3. Zapisz dokument i wyświetl w przeglądarce. Rysunek 6.6 prezentuje efekt końcowy.

Ustawienia V Space i H Space umożliwiają nie tylko dodanie wolnego obszaru wokół obrazu, lecz także wokół tabel.

Aby usunąć wolny obszar, kliknij w polu  V Space lub H Space i naciśnij klawisz Delete lub Backspace. Rozdział 8. dokładniej opisuje kwestie korzystania z tabel przy projektowaniu stron. Wolny obszar wokół obrazów także można zdefiniować korzystając z atrybutów Cell Padding i Cell Spacing lub z kaskadowych arkuszy stylów.

Obraz jako połączenie

Po wstawieniu obrazu do dokumentu, można zdefiniować obraz jako połączenie prowadzące do innego miejsca w sieci, pliku dźwiękowego lub sekwencji wideo, zakotwiczenia lub do innego obrazu. Korzystając z połączeń pustych można także określić behawior (patrz ćwiczenie 6.3).

W programie Dreamweaver przekształcenie obrazów w połączenia jest bardzo proste, ale warto poświęcić parę chwil, aby przypomnieć sobie podstawy konstrukcji połączeń. Rozdział 5., „Połączenia i nawigacja” dostarczy Ci niezbędnych informacji na temat struktury ścieżek dostępu oraz kodu HTML tworzącego połączenie.

Ćwiczenie 6.2. Definiowanie obrazu jako połączenia

Pamiętasz dwa pliki, którymi zajmowałeś się w ćwiczeniu 6.1? Teraz połączysz je ze sobą wykorzystując do tego celu obrazy, które wstawiłeś do pierwszego z nich (patrz część I ćwiczenia 6.1; plik ...