Kompletan priručnik za web dizajn

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