Kompletan priruÄ?nik za web dizajn
Sadržaj: Predgovor ................................................................................................................. 9 TEORIJSKE OSNOVE WEB DIZAJNA ........................................................... 12 UVOD ........................................................................................................................................ 14 1. PROCES ................................................................................................................................ 15
1.1 Pre početka ................................................................................................................................... 15 1.2. Razvoj prezentacije ..................................................................................................................... 16
2. DIZAJN INTERFEJSA ......................................................................................................... 22
2.1 Dizajn web prezentacije nasuprot dizajnu konvencionalnog dokumenta ..................................... 22 2.2 Napravite Vaše web strane samostalnim ...................................................................................... 22 2.3 Osnove dizajna interfejsa.............................................................................................................. 23 2.4 Navigacija ..................................................................................................................................... 26
3 DIZAJN PREZENTACIJE ..................................................................................................... 28
3.1 Organizovanje informacija ........................................................................................................... 28 3.2 Struktura prezentacije ................................................................................................................... 30 3.3 Tipične teme prezentacije ............................................................................................................. 32 3.4 Elementi prezentacije ................................................................................................................... 33
4 DIZAJN STRANE .................................................................................................................. 43
4.1 Vizuelna hijerarhija ...................................................................................................................... 43 4.2 Doslednost .................................................................................................................................... 44 4.3 Dimenzije strane ........................................................................................................................... 45 4.4 Dužina strane ................................................................................................................................ 46 4.5 Dizajnerska šema za web strane ................................................................................................... 48 4.6 Zaglavlje (header) i futer (footer) strane ...................................................................................... 49 4.7 Izgled strane.................................................................................................................................. 50 4.8 Frejmovi ....................................................................................................................................... 55 4.9 Opšta razmatranja o dizajnu ......................................................................................................... 55 4.10 Problemi među različitim platformama ...................................................................................... 56 4.11 Dostupnost .................................................................................................................................. 56
5 TIPOGRAFIJA ....................................................................................................................... 57
5.1 Karakteristike web tipografije ...................................................................................................... 57 5.2 Struktura sadržaja i vizuelna logika.............................................................................................. 57 5.3 Čitljivost ....................................................................................................................................... 58 5.4 Dostupnost .................................................................................................................................... 60
6 STIL UREĐIVANJA ............................................................................................................. 61
6.1 Stil pisanja .................................................................................................................................... 61 6.2 Naslov strane ................................................................................................................................ 61 6.3 Linkovi ......................................................................................................................................... 61
7 GRAFIKA .............................................................................................................................. 63
7.1 Karakteristike Web grafike ........................................................................................................... 63 7.2 Formati grafičkih datoteka............................................................................................................ 64 7.3 HTML i grafika ............................................................................................................................ 66 7.4 Dostupnost .................................................................................................................................... 68
8 MULTIMEDIJA ..................................................................................................................... 69
8.1 Multimedijalne aplikacije ............................................................................................................. 69 8.2 Priprema multimedije ................................................................................................................... 69 8.3 Dizajn i multimedija ..................................................................................................................... 70
2
8.4 Dostupnost ................................................................................................................................... 71
UVOD U HTML .................................................................................................... 73 UVOD U INTERNET, WEB I HTML ..................................................................................... 75
Nastanak i razvoj Interneta ................................................................................................................ 75 Web .................................................................................................................................................... 75 HTML ................................................................................................................................................ 77
2. HTML NAREDBE: OZNAKE (TAGOVI) I ATRIBUTI.................................................... 78
Pisanje HTML dokumenta pomoću Notepad-a ................................................................................. 78 Sintaksa HTML dokumenta ............................................................................................................... 78 Otvaranje i izmena HTML dokumenta .............................................................................................. 78
3. RAD SA TEKSTOM I FORMATIRANJE TEKSTA .......................................................... 80
Oznake za rad sa fontovima ............................................................................................................... 80 Oznake za poravnanje teksta .............................................................................................................. 81
4. TABELE ............................................................................................................................... 83
Formatiranje tabela ............................................................................................................................ 83
5. UMETANJE SLIKA ............................................................................................................ 85 6. UMETANJE HIPERVEZA .................................................................................................. 86 7. DODATAK........................................................................................................................... 89
Tabela 1: Slaganja kodova i boja ....................................................................................................... 89 Tabela 2: Najčešće korišćeni karakteri .............................................................................................. 90
MACROMEDIA DREAMWEAVER: UVODNI KURS................................... 91 1. INTERNET ........................................................................................................................... 93 Kako napraviti sopstvenu web stanicu? ............................................................................................. 93
2. DREAMWEAVER OKRUŽENJE ....................................................................................... 94 KREIRANJE NOVE WEB STRANE ...................................................................................... 96
Davanje naslova Web strani............................................................................................................... 97 Postavljanje boje pozadine................................................................................................................. 97 Slika na pozadini strane ..................................................................................................................... 97 Određivanje boje fonta....................................................................................................................... 98
RAD SA WEB SAJTOM ......................................................................................................... 99
Kreiranje Web sajta............................................................................................................................ 99 Održavanje sajta u Files panelu ....................................................................................................... 100 Postavljanje sajta na server .............................................................................................................. 102 Mapa sajta ........................................................................................................................................ 104
UPISIVANJE I FORMATIRANJE TEKSTA........................................................................ 107
Dodavanje teksta iz drugih dokumenata .......................................................................................... 108 Rad sa fontom .................................................................................................................................. 108
PRAVLJENJE TEKSTUALNIH I GRAFIČKIH HIPERLINKOVA .................................... 110
Umetanje sidara i povezivanje sa njima ........................................................................................... 112
8. RAD SA SLIKAMA........................................................................................................... 114
8. 1 Postavljanje slike na stranu ....................................................................................................... 114 8. 2 Menjanje veličine slike i njeno pozicioniranje ......................................................................... 115 8.3 Davanje imena i HTML oznaka <alt> slikama .......................................................................... 116 8.4 Mapirane slike............................................................................................................................ 116
9. KREIRANJE TABELA U LAYOUT I STANDARD PRIKAZU ..................................... 118
91 Layout Mode ............................................................................................................................... 118 92 Standard Mode ............................................................................................................................ 119
3
93 Promena svojstava i elemenata tabele ......................................................................................... 120 94 Ugnježdavanje tabela i pravljenje okvira tabelama ..................................................................... 121
10 IZRADA OKVIRA (FREJMOVA) .................................................................................... 122
101 Skup okvira (Frameset) ............................................................................................................. 122 102 Karakteristike okvira i skupa okvira .......................................................................................... 123 103 Sadržina okvira .......................................................................................................................... 123
PRAVLJENJE OBRAZACA (FORM) ................................................................................... 125 PRAVLJENJE ŠABLONA (TEMPLATE) ............................................................................. 127
Ažuriranje sajta pomoću Template-a ................................................................................................ 129
REČNIK POJMOVA .............................................................................................................. 131
MACROMEDIA DREAMWEAVER: NAPREDNI KURS ........................... 132 SLOJEVI (LAYERS) U DREAMWEAVER-U...................................................................... 133
Razumevanje slojeva ........................................................................................................................ 133 HTML kôd za slojeve ....................................................................................................................... 133 Pravljenje slojeva.............................................................................................................................. 133 Ugnježdeni slojevi ............................................................................................................................ 134 Obeležavanje slojeva ........................................................................................................................ 135 Pregledanje ili podešavanje svojstava slojeva .................................................................................. 135 Promena veličine sloja ...................................................................................................................... 136 Pomeranje slojeva............................................................................................................................. 136 Poravnanje slojeva ............................................................................................................................ 137 Promena redosleda prikazivanja slojeva........................................................................................... 137 Podešavanje vidljivosti sloja ............................................................................................................ 137 Konvertovanje slojeva u tabele......................................................................................................... 138 Sprečavanje preklapanja slojeva....................................................................................................... 139
DIZAJNIRANJE POMOĆU CSS-a ........................................................................................ 140
Pravljenje CSS-a ............................................................................................................................... 140 Upotreba CSS Styles panela ............................................................................................................. 140 Postavljanje CSS pravila korišćenjem alata Dreamweaver .............................................................. 141 Upotreba spoljnih stranica sa stilovima ............................................................................................ 143 Sintaksa CSS-a ................................................................................................................................. 144 ID Selektor........................................................................................................................................ 146 Class selektor .................................................................................................................................... 147 Pattern Matching i Descendant (potomak) Selektor ......................................................................... 148 Semantičke oznake ........................................................................................................................... 148
PRETRAGA DOKUMENATA I ZAMENA TEKSTA .......................................................... 150 JAVASCRIPT BEHAVIOR .................................................................................................... 151
Upotreba Behaviors panela............................................................................................................... 151 Kako upotrebiti Behavior ................................................................................................................. 151 Dodavanje Behavior-a na tekst ......................................................................................................... 152 Promena Behaviora .......................................................................................................................... 153 Pravljenje novih akcija ..................................................................................................................... 153 Upotreba akcija koje stižu uz Dreamweaver .................................................................................... 153 Akcija Swap Image (Rollover slika) ................................................................................................ 154 Postavljanje teksta na statusnoj liniji ................................................................................................ 154 Iskačući meni (Jump Menu) ............................................................................................................. 155 Jump Menu Go ................................................................................................................................. 155 Provera ispravnog unosa u formu ..................................................................................................... 155
TESTIRANJE SAJTA ............................................................................................................. 157
Uputstva za testiranje sajta ............................................................................................................... 157 Upotreba izveštaja za održavanje sajta ............................................................................................. 157
4
Izveštaji u Dreamweaver-u .............................................................................................................. 159
EXTENSION MANAGER ..................................................................................................... 160
O ekstenzijama ................................................................................................................................. 160 Instaliranje ekstenzija....................................................................................................................... 160 Upravljanje ekstenzijama ................................................................................................................. 160
ANIMACIJA SLOJEVA ........................................................................................................ 162
Upotreba Timelines panela .............................................................................................................. 162 Opcije za reprodukovanje ................................................................................................................ 163 Premeštanje slojeva preko animacije u vremenskoj traci ................................................................ 163 Pravljenje vremenskih linija crtanjem putanja ................................................................................. 164 Menjanje vremenskih traka .............................................................................................................. 164 Menjanje svojstava slikama i slojevima pomoću vremenskih traka ................................................ 165 Rad sa više vremenskih traka ........................................................................................................... 165 Kopiranje animacija ......................................................................................................................... 165 Primena jedne animacije na druge objekte ...................................................................................... 166 Saveti za animaciju .......................................................................................................................... 166
AUTOMATIZACIJA DREAMWEAVER-A ........................................................................ 167
Biblioteke (library items) ................................................................................................................. 167 Dodavanje novih elemenata u biblioteku ......................................................................................... 167 Umetanje elementa iz biblioteke u dokument .................................................................................. 167 Promena elemenata biblioteke ......................................................................................................... 168 Prikazivanje elemenata biblioteke na dokumentima ........................................................................ 169 Promena svojstava elemenata biblioteke ......................................................................................... 170 Kako da se elementi biblioteke menjaju u dokumentu .................................................................... 170 Promena Behavior-a u elementima biblioteke ................................................................................. 170
MACROMEDIA FIREWORKS ........................................................................ 171 1. UVOD U FIREWORKS ..................................................................................................... 173
O Fireworks-u .................................................................................................................................. 173 Fireworks radno okruženje .............................................................................................................. 173
2. PODEŠAVANJE DOKUMENTA ..................................................................................... 177
Otvaranje postojećeg dokumenta ..................................................................................................... 177 Promena veličine slike i platna ........................................................................................................ 177
3. VEKTORSKE ALATKE.................................................................................................... 179
Potezi ............................................................................................................................................... 179 Crtanje linije .................................................................................................................................... 180 Crtanje slobodnih linija .................................................................................................................... 180 Crtanje osnovnih oblika ................................................................................................................... 181 Rad sa tekstom ................................................................................................................................. 181 Promena oblika objekata .................................................................................................................. 183
4. RAD SA OBJEKTIMA ...................................................................................................... 184
Pravljenje duplikata objekta ............................................................................................................. 184 Rotiranje, iskošavanje i menjanje veličine....................................................................................... 184 Kombinovanje vektorskih objekata ................................................................................................. 184 Rad sa slojevima .............................................................................................................................. 185
5. EFEKTI............................................................................................................................... 187
Providnost ........................................................................................................................................ 187 Primena i prilagođavanje efekata ..................................................................................................... 187
6. RAD SA RASTERSKIM SLIKAMA ................................................................................ 189
Uvoženje rasterskih slika ................................................................................................................. 189 Selektovanje ..................................................................................................................................... 189 Alatke za uređivanje slika ................................................................................................................ 190 5
7. MASKE ............................................................................................................................... 192
Vektorske maske .............................................................................................................................. 192 Rasterske maske ............................................................................................................................... 193
8. ANIMIRANJE ..................................................................................................................... 194
Pravljenje animacije ......................................................................................................................... 194
9. REFERENTNE TAČKE I VEZE ........................................................................................ 196 10. ISEČCI I DUGMAD ......................................................................................................... 197
Kreiranje isečaka .............................................................................................................................. 197 Dugmad ............................................................................................................................................ 197
11. OPTIMIZOVANJE I IZVOŽENJE ................................................................................... 199
Optimizovanje .................................................................................................................................. 199 Izvoženje........................................................................................................................................... 199
MACROMEDIA FLASH ................................................................................... 201 1. UVOD U FLASH ................................................................................................................ 203
Koncepcija Flasha ............................................................................................................................ 203 Flashovo radno okruženje................................................................................................................. 203 Flashova pozornica ........................................................................................................................... 205
2. CRTANJE U FLASHU ....................................................................................................... 206
Crtanje na pozornici ......................................................................................................................... 206 Flashove alatke za crtanje ................................................................................................................. 206 Crtanje linija ..................................................................................................................................... 207 Crtanje pravougaonika...................................................................................................................... 207 Crtanje elipsi..................................................................................................................................... 207 Crtanje olovkom ............................................................................................................................... 208 Farbanje četkicom ............................................................................................................................ 208 Brisanje grešaka................................................................................................................................ 208
3. RAD SA NACRTANIM OBJEKTIMA .............................................................................. 210
Rotiranje, iskošavanje i menjanje veličine ....................................................................................... 211
4.VREMENSKA OSA ............................................................................................................ 212
Funkcionisanje vremenske ose ......................................................................................................... 212 Rad sa slojevima ............................................................................................................................... 212
5.ANIMIRANJE ...................................................................................................................... 214
Princip rada animacije ...................................................................................................................... 214 Izrada jednostavne animacije............................................................................................................ 214 Vođenje putanje ................................................................................................................................ 214 Maske ............................................................................................................................................... 215
6.SIMBOLI .............................................................................................................................. 217
Tipovi simbola .................................................................................................................................. 217 Kreiranje komandnog dugmeta ........................................................................................................ 217
7.BIBLIOTEKE ....................................................................................................................... 219
Korišćenje biblioteka ........................................................................................................................ 219
8.RAD SA BIT MAPAMA ..................................................................................................... 221
Grafički formati ................................................................................................................................ 221 Uvoženje bit mapa ............................................................................................................................ 221 Pretvaranje bit mapa u vektore ......................................................................................................... 221
9.RAD SA ZVUKOM ............................................................................................................. 223 10.OPTIMIZOVANJE FILMOVA ......................................................................................... 225
Tipovi datoteka ................................................................................................................................. 225 Podešavanje Flashovih opcija........................................................................................................... 226
6
UVOD U ACTIONSCRIPT................................................................................ 227 1. OSNOVE ACTIONSCRIPT-a ........................................................................................... 229
Nastanak i razvoj programskih jezika - skript jezici ........................................................................ 229 Elementi ActionScripta jezika ......................................................................................................... 229 Zadatak............................................................................................................................................. 232
2. SKRIPTE ZA KONTROLU TOKA FILMA ..................................................................... 233
Pano Actions .................................................................................................................................... 233 Kontrola toka filma .......................................................................................................................... 233
3. DODAVANJE SKRIPTE SIMBOLU DUGME ................................................................ 236
OSNOVE PHP-a .................................................................................................. 238 1. UVOD U PHP..................................................................................................................... 240
Osnovne karakteristike PHP-a ......................................................................................................... 240 Sintaksa PHP-a ................................................................................................................................ 241
2. PROMENLJIVE (VARIJABLE)........................................................................................ 243
Dodeljivanje vrednosti promenljivim i ispis promenljivih .............................................................. 243 Konstante ......................................................................................................................................... 245
3. UPRAVLJAČKE STRUKTURE ....................................................................................... 246
Uslovne strukture ............................................................................................................................. 246 Petlje: ponavljanje radnji ................................................................................................................. 249
4. NIZOVI............................................................................................................................... 252
Kreiranje nizova ............................................................................................................................... 252 Asocijativni nizovi ........................................................................................................................... 253 Pristup svakom elementu niza ......................................................................................................... 253 Modifikovanje niza .......................................................................................................................... 254
OBRADA HTML FORMI ..................................................................................................... 256
Oznake za rad sa HTML formama ................................................................................................... 256
PHP MYSQL ....................................................................................................... 264 UVOD U MYSQL .................................................................................................................. 266
Šta je to MySQL? ............................................................................................................................ 266 Zašto koristiti MySQL? ................................................................................................................... 266 Povezivanje na server i prekid veze ................................................................................................. 266 Kucanje upita ................................................................................................................................... 267 Pristupanje bazi podataka ................................................................................................................ 267
RAD U MYSQL-u .................................................................................................................. 269
Pravljenje i korišćenje baze ............................................................................................................. 269 Pravljenje tabela ............................................................................................................................... 269 Izmena svojstava tabele ................................................................................................................... 270 Ubacivanje podataka u tabelu .......................................................................................................... 270 Pretraživanje informacija u tabelama............................................................................................... 271
RAD SA DATUMIMA .......................................................................................................... 276 NULL VREDNOST ............................................................................................................... 278 PRETRAGA I PREBROJAVANJA ....................................................................................... 279
Pretraga teksta .................................................................................................................................. 279 Prebrojavanje ................................................................................................................................... 279 Brisanje podataka iz tabele .............................................................................................................. 281 Rad sa više tabela ............................................................................................................................. 281
PRIMERI ČESTO KORIŠĆENIH UPITA ............................................................................ 282 7
Maksimalne vrednosti u koloni ........................................................................................................ 282 Redovi koji imaju maksimalne vrednosti ......................................................................................... 282 Maksimalne vrednosti u grupama..................................................................................................... 283
POVEZIVANJE PHP PROGRAMA SA MYSQL BAZOM .................................................. 284
Izvršavanje upita............................................................................................................................... 284
OBRADA REZULTATA UPITA ........................................................................................... 286
Prikazivanje podataka pomoću funkcije Mysql_fetch_assoc() ........................................................ 286
UNOS PODATAKA U BAZU................................................................................................ 287 PRIMER: KNJIGA UTISAKA (GUESTBOOK) ................................................................... 288
Pravljenje MYSQL tabele koja čuva podatke .................................................................................. 288 Pravljenje forme za upisivanje ......................................................................................................... 288 Pravljenje PHP stranice koja obrađuje unos ..................................................................................... 289 Prikazivanje zapisa iz knjige utisaka ................................................................................................ 289
DELJENJE REZULTATA PRETRAGE NA VIŠE STRANICA ........................................... 291
Literatura ............................................................................................................. 294
8