Elementy graficzne na stronach WWW grafww, informatyka, fragmenty-ksiazek-heliona2
[ Pobierz całość w formacie PDF ]
IDZ DO
PRZYK£ADOW
Elementy graficzne
SPIS TRECI
na stronach WWW
KATALOG KSI¥¯EK
Autor: Pawe³ Frankowski
ISBN: 83-7361-848-1
Format: B5, stron: 192
KATALOG ONLINE
ZAMÓW DRUKOWANY KATALOG
TWÓJ KOSZYK
DODAJ DO KOSZYKA
Aby stworzyæ witrynê WWW, która wyró¿nia siê w rosn¹cej w lawinowym tempie iloci
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³anie 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. Jeli 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
CENNIK I INFORMACJE
ZAMÓW INFORMACJE
O NOWOCIACH
ZAMÓW CENNIK
CZYTELNIA
FRAGMENTY KSI¥¯EK ONLINE
Wydawnictwo Helion
ul. Chopina 6
44-100 Gliwice
tel. (32)230-98-63
e-mail: helion@helion.pl
Spis treci
Wstp..............................................................................................................9
Rozdział 1. Kolory i rozdzielczo a strony WWW...............................................11
Pojcie 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
Najczstsze zastosowanie formatu JPEG................................................................................24
Format GIF — krótka charakterystyka .........................................................................................24
Zalety i wady formatu GIF........................................................................................................25
Najczstsze zastosowanie formatu GIF ..................................................................................26
Format PNG — krótka charakterystyka .......................................................................................27
Zalety i wady formatu PNG
-
8..................................................................................................27
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 — wstp...................................................................................................................... 33
Zalety i wady formatu PNG
6
Elementy graficzne na stronach WWW
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 wstpne..........................................................................................................................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
Cicie grafiki .....................................................................................................................................50
Optymalizacja grafiki ......................................................................................................................54
Programy do kompresji obrazu ...............................................................................................56
Prze?roczysto,.................................................................................................................................59
Przeplot GIF
Rozdział 5. Galerie internetowe.........................................................................65
Argumenty za tworzeniem galerii internetowych .......................................................................65
Zalety tworzenia albumów internetowych ...................................................................................65
Podstawowe zasady tworzenia galerii ............................................................................................ 66
Rczne tworzenie cyfrowego fotoalbumu ....................................................................................67
Specjalistyczne programy darmowe ..............................................................................................68
Specjalistyczne programy komercyjne ..........................................................................................70
Tworzenie galerii online..................................................................................................................73
Rozdział 6. Elementy nawigacyjne......................................................................75
Elementy nawigacyjne — wstp .....................................................................................................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
Jak wstawi obraz jako tło w HTML
a .................................................................................................................................. 61
Wy,wietlanie progresywne w formacie JPEG...............................................................................62
Przydatne porady przy tworzeniu grafiki internetowej..............................................................62
-
Spis treci
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 wstpne........................................................................................................................ 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 wstpne........................................................................................................................ 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
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 zdjcie .......................................................................................................... 171
Podmiana wygl(du grafiki po klikniciu w ł(cze tekstowe ......................................................172
Podmiana wygl(du grafiki po klikniciu 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 postpu.................................................................................................................................. 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
Gadu ............................................................................................................................... 159
TLEN ......................................................................................................................................... 159
ICQ ............................................................................................................................................ 160
Komunikator WP kontakt...................................................................................................... 160
Ikona serwisu ...................................................................................................................................161
-
[ Pobierz całość w formacie PDF ]
zanotowane.pl doc.pisz.pl pdf.pisz.pl upanicza.keep.pl
IDZ DO
PRZYK£ADOW
Elementy graficzne
SPIS TRECI
na stronach WWW
KATALOG KSI¥¯EK
Autor: Pawe³ Frankowski
ISBN: 83-7361-848-1
Format: B5, stron: 192
KATALOG ONLINE
ZAMÓW DRUKOWANY KATALOG
TWÓJ KOSZYK
DODAJ DO KOSZYKA
Aby stworzyæ witrynê WWW, która wyró¿nia siê w rosn¹cej w lawinowym tempie iloci
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³anie 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. Jeli 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
CENNIK I INFORMACJE
ZAMÓW INFORMACJE
O NOWOCIACH
ZAMÓW CENNIK
CZYTELNIA
FRAGMENTY KSI¥¯EK ONLINE
Wydawnictwo Helion
ul. Chopina 6
44-100 Gliwice
tel. (32)230-98-63
e-mail: helion@helion.pl
Spis treci
Wstp..............................................................................................................9
Rozdział 1. Kolory i rozdzielczo a strony WWW...............................................11
Pojcie 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
Najczstsze zastosowanie formatu JPEG................................................................................24
Format GIF — krótka charakterystyka .........................................................................................24
Zalety i wady formatu GIF........................................................................................................25
Najczstsze zastosowanie formatu GIF ..................................................................................26
Format PNG — krótka charakterystyka .......................................................................................27
Zalety i wady formatu PNG
-
8..................................................................................................27
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 — wstp...................................................................................................................... 33
Zalety i wady formatu PNG
6
Elementy graficzne na stronach WWW
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 wstpne..........................................................................................................................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
Cicie grafiki .....................................................................................................................................50
Optymalizacja grafiki ......................................................................................................................54
Programy do kompresji obrazu ...............................................................................................56
Prze?roczysto,.................................................................................................................................59
Przeplot GIF
Rozdział 5. Galerie internetowe.........................................................................65
Argumenty za tworzeniem galerii internetowych .......................................................................65
Zalety tworzenia albumów internetowych ...................................................................................65
Podstawowe zasady tworzenia galerii ............................................................................................ 66
Rczne tworzenie cyfrowego fotoalbumu ....................................................................................67
Specjalistyczne programy darmowe ..............................................................................................68
Specjalistyczne programy komercyjne ..........................................................................................70
Tworzenie galerii online..................................................................................................................73
Rozdział 6. Elementy nawigacyjne......................................................................75
Elementy nawigacyjne — wstp .....................................................................................................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
Jak wstawi obraz jako tło w HTML
a .................................................................................................................................. 61
Wy,wietlanie progresywne w formacie JPEG...............................................................................62
Przydatne porady przy tworzeniu grafiki internetowej..............................................................62
-
Spis treci
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 wstpne........................................................................................................................ 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 wstpne........................................................................................................................ 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
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 zdjcie .......................................................................................................... 171
Podmiana wygl(du grafiki po klikniciu w ł(cze tekstowe ......................................................172
Podmiana wygl(du grafiki po klikniciu 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 postpu.................................................................................................................................. 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
Gadu ............................................................................................................................... 159
TLEN ......................................................................................................................................... 159
ICQ ............................................................................................................................................ 160
Komunikator WP kontakt...................................................................................................... 160
Ikona serwisu ...................................................................................................................................161
-
[ Pobierz całość w formacie PDF ]