Elementy_graficzne_na_stronach_WWW_grafww.pdf

(709 KB) Pobierz
IDZ DO
PRZYK£ADOWY ROZDZIA£
SPIS TRE CI
KATALOG KSI¥¯EK
KATALOG ONLINE
ZAMÓW DRUKOWANY KATALOG
Elementy graficzne
na stronach WWW
Autor: Pawe³ Frankowski
ISBN: 83-7361-848-1
Format: B5, stron: 192
TWÓJ KOSZYK
DODAJ DO KOSZYKA
Aby stworzyæ witrynê WWW, która wyró¿nia siê w rosn¹cej w lawinowym tempie ilo ci
witryn, nale¿y zaprojektowaæ j¹ w sposób, który przyci¹gnie uwagê ogl¹daj¹cych. Tre æ
to nie wszystko — niezwykle istotne jest to, co osoba odwiedzaj¹ca widzi jako pierwsze
— szata graficzna. Czêsto jednak ten w³a nie element witryny WWW jest zaniedbywany
— jako elementy graficzne wykorzystywane s¹ ci¹gniête z sieci przyciski i motywy,
które rzadko kiedy oddaj¹ „klimat” serwisu. Je li chcemy, aby odwiedzaj¹cy zapamiêtali
nasz¹ witrynê WWW, musimy wykorzystaæ na niej prawid³owo przygotowan¹ grafikê.
„Elementy graficzne na stronach WWW” to kompendium wiedzy dla tych, którzy znaj¹
ju¿ podstawy tworzenia stron WWW w jêzyku HTML i chcieliby poszerzyæ swoj¹ wiedzê.
Ksi¹¿ka opisuje wszystkie zagadnienia zwi¹zane z tworzeniem grafiki pod k¹tem
publikacji w internecie. Przedstawia metody doboru kolorów, optymalizacji plików
graficznych, sposoby osadzania grafiki na stronie oraz technologie multimedialne, jakie
mo¿na zastosowaæ do wzbogacenia wygl¹du strony.
• Modele barw i dobór kolorystyki strony
• Formaty zapisu plików graficznych stosowane w sieci
• T³o strony WWW
• Wstawianie obrazków na strony WWW
• Przygotowanie galerii internetowych oraz graficznych elementów nawigacyjnych
• Animacje na stronach WWW
• Zmiana kolorystyki formularzy, pasków przewijania i innych elementów stron WWW
• Osadzanie plików multimedialnych
Przekonaj siê, czy obraz faktycznie jest wart wiêcej ni¿ tysi¹c s³ów
Wydawnictwo Helion
ul. Chopina 6
44-100 Gliwice
tel. (32)230-98-63
e-mail: helion@helion.pl
CENNIK I INFORMACJE
ZAMÓW INFORMACJE
O NOWO CIACH
ZAMÓW CENNIK
CZYTELNIA
FRAGMENTY KSI¥¯EK ONLINE
Spis treści
Wstęp .............................................................................................................. 9
Rozdział 1. Kolory i rozdzielczość a strony WWW...............................................11
Pojęcie koloru ....................................................................................................................................11
Kalibracja koloru.............................................................................................................................. 13
Jak uzyskać harmonię kolorów?..................................................................................................... 14
Kolor w Internecie, czyli bezpieczna paleta ................................................................................. 14
Zasady dobierania kolorów ............................................................................................................ 15
Wiek internauty a kolor .................................................................................................................. 16
Panujące trendy ................................................................................................................................ 16
Programy do pobierania kolorów.................................................................................................. 17
Rozdzielczość ekranu a wygląd strony.......................................................................................... 18
Informacja o zalecanej rozdzielczości ekranu ............................................................................. 19
Rozdział 2. Formaty grafiki internetowej............................................................ 21
Jaki format wybrać?.......................................................................................................................... 21
Jak zmienić format pliku? ...............................................................................................................22
Format JPG, JPEG — krótka charakterystyka .............................................................................22
Jakie są zalety i wady formatu JPEG? ......................................................................................24
Najczęstsze zastosowanie formatu JPEG................................................................................24
Format GIF — krótka charakterystyka .........................................................................................24
Zalety i wady formatu GIF........................................................................................................25
Najczęstsze zastosowanie formatu GIF ..................................................................................26
Format PNG — krótka charakterystyka .......................................................................................27
Zalety i wady formatu PNG-8..................................................................................................27
Zalety i wady formatu PNG-24................................................................................................28
Inne stosowane formaty ..................................................................................................................28
Porównanie formatów graficznych ...............................................................................................29
Rozdział 3. Kolorowe i graficzne tło .................................................................. 31
Kolor tła strony ................................................................................................................................ 31
Zmiana koloru tekstu ......................................................................................................................32
Grafika w tle — wstęp ...................................................................................................................... 33
6
Elementy graficzne na stronach WWW
Jak wstawić obraz jako tło w HTML-u? ........................................................................................34
Jak wstawić obraz jako tło w CSS?............................................................................................34
Powielanie tła .................................................................................................................................... 35
Jak umieszczać obraz stanowiący tło na stronie?......................................................................... 36
Tło graficzne w tabeli.......................................................................................................................38
Ciekawy efekt spadającego tła.........................................................................................................38
Efektowny rozbłysk tła ....................................................................................................................39
Tworzenie tekstur .............................................................................................................................39
Rozdział 4. Obrazy: wstawianie, obróbka, optymalizacja .....................................43
Informacje wstępne ..........................................................................................................................43
Wstawianie pliku graficznego ........................................................................................................43
Tekst alternatywny ...........................................................................................................................44
Wstawianie obrazów w nagłówkach ..............................................................................................45
Wstawianie obrazu w akapicie........................................................................................................45
Rozmiary obrazu..............................................................................................................................47
Jak skalować rozmiary obrazu? ................................................................................................47
Ramka wokół obrazu.......................................................................................................................48
Przetwarzanie wsadowe....................................................................................................................48
Cięcie grafiki .....................................................................................................................................50
Optymalizacja grafiki ......................................................................................................................54
Programy do kompresji obrazu ............................................................................................... 56
Przeźroczystość.................................................................................................................................59
Przeplot GIF-a .................................................................................................................................. 61
Wyświetlanie progresywne w formacie JPEG...............................................................................62
Przydatne porady przy tworzeniu grafiki internetowej..............................................................62
Rozdział 5. Galerie internetowe......................................................................... 65
Argumenty za tworzeniem galerii internetowych ....................................................................... 65
Zalety tworzenia albumów internetowych ................................................................................... 65
Podstawowe zasady tworzenia galerii ............................................................................................ 66
Ręczne tworzenie cyfrowego fotoalbumu ....................................................................................67
Specjalistyczne programy darmowe ..............................................................................................68
Specjalistyczne programy komercyjne ..........................................................................................70
Tworzenie galerii online..................................................................................................................73
Rozdział 6. Elementy nawigacyjne...................................................................... 75
Elementy nawigacyjne — wstęp .....................................................................................................75
Metody nawigacji .............................................................................................................................76
Wybór metody oraz reguły dotyczące nawigacji ...................................................................79
Struktura informacji........................................................................................................................80
Programy wspomagające tworzenie przycisków .......................................................................... 81
Edytory HTML jako edytory przycisków .....................................................................................85
Tworzenie przycisków w Xara Webstyle .................................................................................88
Rozwijane menu nawigacyjne ........................................................................................................90
Pasek nawigacyjny wykonany we Flashu.......................................................................................93
Spis treści
7
Proste, ale niezawodne metody nawigacji.....................................................................................95
Mapy odsyłaczy, czyli mapowanie obrazków ..............................................................................96
Programy wspomagające tworzenie map łączy......................................................................97
Tworzenie map łączy w edytorze FrontPage ........................................................................ 100
Rozdział 7. Animowane elementy na stronie WWW........................................... 103
Informacje wstępne ........................................................................................................................ 103
Strona powitalna, czyli intro ........................................................................................................ 103
Zastosowanie animacji .................................................................................................................. 106
Przekaz reklamowy......................................................................................................................... 107
Proces projektowania reklamy ............................................................................................... 108
Baner reklamowy............................................................................................................................ 109
Podział banerów ....................................................................................................................... 110
Rozmiar......................................................................................................................................111
Kolor.......................................................................................................................................... 112
Czcionka ................................................................................................................................... 112
Rozmiar pliku .......................................................................................................................... 112
Rozmieszczenie elementów w reklamie................................................................................ 112
Lokalizacja banera na stronie WWW.................................................................................... 112
Magia słów i muzyki.................................................................................................................113
ABC tworzenia animacji ............................................................................................................... 114
Programy do tworzenia i obróbki animacji ................................................................................115
Tworzenie banera w Xara Webstyle ........................................................................................115
Tworzenie animacji w Xara 3D .............................................................................................. 117
Tworzenie animacji w GIF MovieGear................................................................................. 118
Animacja w Ulead GIF Animator ......................................................................................... 120
Tworzenie animacji Flash ....................................................................................................... 120
Optymalizacja animacji ................................................................................................................ 125
Rozdział 8. Osadzanie plików multimedialnych ................................................... 129
Bezpieczne osadzanie plików multimedialnych ....................................................................... 129
Wstawianie filmów za pomocą znaczników .............................................................................. 130
Internet Explorer.............................................................................................................................131
Netscape........................................................................................................................................... 132
Uniwersalny odtwarzacz filmów.................................................................................................. 132
Wstawianie animacji Flash............................................................................................................ 134
Osadzanie filmów w formacie RealVideo................................................................................... 136
Osadzanie filmów w formacie QuickTime ................................................................................ 138
Zamiana AVI na SWF .................................................................................................................... 138
Rozdział 9. Odmienione formularze ...................................................................141
Informacje wstępne ........................................................................................................................ 141
Zmiana koloru i innych parametrów formularza..................................................................... 141
Zmiana przycisku wyślij i wyczyść na graficzny ........................................................................ 142
Ukrywanie paska przewijania w polu tekstowym formularza ................................................. 145
8
Elementy graficzne na stronach WWW
Rozdział 10. Pozostałe dodatki graficzne.......................................................... 147
Nagłówek ......................................................................................................................................... 147
Logo.................................................................................................................................................. 149
Wypunktowania graficzne............................................................................................................ 152
Separator poziomy......................................................................................................................... 154
Separator pionowy ......................................................................................................................... 156
Strzałki ............................................................................................................................................. 157
Pasek statusu: GG, Tlen, ICQ, WP kontakt................................................................................ 158
Gadu-Gadu ............................................................................................................................... 159
TLEN ......................................................................................................................................... 159
ICQ ............................................................................................................................................ 160
Komunikator WP kontakt...................................................................................................... 160
Ikona serwisu ...................................................................................................................................161
Rozdział 11. Dodatkowe efekty ....................................................................... 163
Zmiana koloru paska przewijania ............................................................................................... 163
Jak przenieść pasek przewijania na lewą stronę? ........................................................................ 164
Jak usunąć pasek przewijania? ...................................................................................................... 165
Zmiana wyglądu kursora............................................................................................................... 165
Kursor graficzny............................................................................................................................. 166
Legenda na stronie internetowej .................................................................................................. 167
Animacja MARQUEE .................................................................................................................. 168
Uniwersalna animacja MARQUEE ............................................................................................ 170
Losowo wyświetlane zdjęcie .......................................................................................................... 171
Podmiana wyglądu grafiki po kliknięciu w łącze tekstowe ...................................................... 172
Podmiana wyglądu grafiki po kliknięciu w łącze graficzne ..................................................... 173
Efektowna zmiana strony ............................................................................................................. 173
Efekt przejścia w edytorze MS FrontPage 2003 ................................................................... 174
Efekt poświaty lub kolorowej otoczki ......................................................................................... 175
Migające elementy na stronie WWW .......................................................................................... 175
Pasek postępu.................................................................................................................................. 176
Dodatek A Przydatne adresy internetowe......................................................... 179
Darmowa grafika internetowa...................................................................................................... 179
Darmowe elementy graficzne ....................................................................................................... 179
Banery .............................................................................................................................................. 179
Darmowe czcionki ......................................................................................................................... 180
Programy do tworzenia animacji Flash ...................................................................................... 180
Programy graficzne ........................................................................................................................ 180
Przeglądarki graficzne ................................................................................................................... 180
Porady .............................................................................................................................................. 181
Skorowidz .................................................................................................... 183
Zgłoś jeśli naruszono regulamin