KURSWEBDIZAJNA
mrBesaraNikola,dipl.inž.
Priruniksakursa
Beograd2013
KURSWEBDIZAJNA
Sadržaj
1.UVOD ........................................................................................................ 4
1.1.Osnoviwebpojmovi–domen,hosting.................................................. 5
1.1.1.Domen(domain) ................................................................................. 5
1.1.2.Hosting(Hosting) ................................................................................ 6
1.2.
Statikiidinamikiwebsajtovi............................................................. 8
1.3.Strukturaiorganizacijastatikogsajta.................................................... 9
POETAKKREIRANJAPRVEWEBSTRANE .................................................... 11
2.1.HTMLUvod,strukturajednewebstranice ......................................... 11
2.2.Opisekrana ............................................................................................. 13
2.3.Definisanjenovogsajtakreiranjewebstraneod“nule”................... 15
2.4.Title,keywords,description,favicon..................................................... 17
2.5.DivTag...................................................................................................... 19
2.6.CSSstilovi .............................................................................................. 23
2.7.FormatiranjeuzpomoCSSa ................................................................ 24
2.7.1.Definisanjefontova,linkovaipozadinskaslika ................................ 27
2.8.StilovizaostaleDIVTagove .................................................................. 30
3.HEADERINAVIGACIJA ............................................................................. 32
3.1.KreiranjeHeadera ................................................................................. 32
3.2.Kreiranjehorizontalnenavigacije .......................................................... 33
3.2.1.Definisanjelinkovaunavigaciji......................................................... 36
4.CONTENT–glavnisadržajwebstrane ..................................................... 40
4.2.Ubacivanjelinkautekst ......................................................................... 43
4.3.Ubacivanjeslikeutekst.......................................................................... 44
4.3.1.Klase(Class)...................................................................................... 45
4.2.Radsaubaenimslikama ....................................................................... 47
4.2.1.Fadeefekti......................................................................................... 47
4.2.2.Swapimageilinkovanjeslike ........................................................... 48
4.2.3.Linkudeluslike–HOTSPOT ............................................................ 51
4.3.Tabele–radsatabelama….................................................................... 52
2
KURSWEBDIZAJNA
4.4.Jošnekistilovi........................................................................................ 54
5.GALERIJASLIKA ....................................................................................... 56
5.1.KreiranjeGalerijeslika ........................................................................... 56
6.VIDEO...................................................................................................... 59
6.1.Ubacivanjevideanasajt......................................................................... 59
6.1.1.UbacivanjevideasaYOUTUBEa....................................................... 59
6.1.2.UbacivanjeFLVvidea ........................................................................ 60
7.DODATNIELEMENTINASAJTU ................................................................ 63
7.1.Googlemapa–implemetacijauHTMLkod .......................................... 63
7.2.Elektronskiformular............................................................................... 64
7.2.1.Kreiranjeformulara........................................................................... 65
7.2.3.PHPemailskripta .............................................................................. 66
7.3.Findandreplace–brzazamenauHTMLkodu...................................... 67
7.4.KomentariuHTMLkodu ........................................................................ 68
8.SLIDESHOW ............................................................................................ 69
9.PUŠTANJESAJTAIOPTIMIZACIJA ............................................................ 70
9.1.PregledsajtauFirefox,Chrome,IE........................................................ 70
9.2.FTPFileZillaClient–prebacivanjeprezentacijenaserver.................... 71
9.3.Podešavanjeparametarazaoptimizaciju–kljunerei....................... 72
3
KURSWEBDIZAJNA
1.UVOD
Web dizajn predstavlja spoj vizuelne kreativnosti i poznavanje odreenih informatikih
tehnologija koje omoguavaju da se Vaše dizajnerske ideje pretoe u nešto što se zove
internetprezentacija.
Danas u savremenom poslovanju ne može se ni zamisliti da postoji firma koja nastupa
ozbiljno na tržistu a da ne nema svoju internet prezentaciju ... naravno, pod tim ne
podrazumevam vizuelno rešenje kao takvo, to je stvar ukusa ali postojanje prezentacije
firmenaglobalnojmrežidanasjestandardimožemnogodagovoriosmojfirmi.
Kaoprvoefektanwebdizajnodajeutisakdafirmadostaulažeusvojmarketingitimedaje
ozbiljnostinatržištuadrugo,kvalitetnaprezentacijaomoguavadaveomalakodoetedo
potebnihinformacijavezanozasamufirmu,njeneproizvodeitd.
Kažupsiholozi„dajepotebnosamo3sekunde
da se stvori utisak (pozitivan ili negativan) o
neemu posle vizuelne percepcije“ što znai
da web dizajner mora da kreira web
prezentacijukojaeposetiocasvojimizgledom
zadržati, privui mu pažnju ali sa druge
omoguiti mu da brzo i jasno dobije traženu
informaciju.
Posao web dizajnera nije lak mada mnogi
misle da se „lepljenje neki sliica“ i sklapanje
boja ali nisu svesni da Vi kreirate nešto što
trebadasesvidivelikojveiniakaoprvoosobi
ili firmi kojoj dizajnirate prezentaciju. Wed dizajn nije posao koji ima definisan proizvod
negokreiranjenekeidejekojatrebadabudeskladna,efektnaipraktina.
Zatojeovajkursinamenjenpolaznicimakojiželeprvenstvenodapraveoriginalnesajtove,
bez preteranog korišenja šablona, da svoje kreativne ideje pretoe u jezik koji serveri
„razumeju“.
Kurs omoguava da se kreira jedan statian sajt od 5 strana koji e sadržati veliku veinu
elemenata koji su danas prisutni u web prezentacijama. Polaznik na poetku predavanja
moževidetiuglednisajtnanašemserveruapotomkrozpredavanjapratisvefazekreiranja
ovostatikogsajta–odidejedoslanjanaserver.
Uenjem kroz faze kreiranja ovo statikog sajta polazik dobija znanja koja se tiu same
tehnolgije izrade odreenih elemenata sajta (konstrukcija, navigacija itd) ... ono što ne
možedadobijenakursujestepotrebnadizajnerskakreativnostzasvojebudueideje,ato
najvišezavisiodpolaznikoveželjedakreiraneštounikatno.
Ali u svakom sluaju, uz potrebna znanja, alatke i tehnologije kreiranja web prezentacija
polaznikdobijadovoljnoznanjadamožesamostalnokreiratijednostavewebprezentacije
saciljemdatasvojaznanjastalno nadograujeuenjemipraenjemtrenutnihpravacau
web dizajnu. Nadam se da e Vam kurs kao i predavanja biti veoma korisna i omoguiti
vremenomizgraditenekisvojsopstvenistilradakojiebitisvakakopozitivnoprimeemna
tržištu.
Srdaanpozdrav,
mrNikolaBesara,dipl.ing.
UBeogradu,08.06.2012.
4
KURSWEBDIZAJNA
1.1.Osnoviwebpojmovi–domen,hosting...
Prekretanjausvetwebdizajnpotebnojepojasnitinekepojmovenakojeenailazitiutoku
samostalnog kreiranja Vaše internet prezenacije. Vaša prezentacija odnosno web sajt se
kreira na vašem raunaru i sva testiranja se vrše tu. Posle svih testiranja prezentacija se
šaljenatakozvaniudaljenserver(Remoteserver)gdejeprethodnokreiranakonekcija.
Da bi se krerala konekcija potebno je prethodno da dizajner ima potrebne parametre za
povezivanjenaRemoteServer.
U kratkim crtama objasniemo opisno i grafiki odreene pojmove koji se javljaju u kod
kreiranja internet prezenacija i uopšte nain kako se Vaša prezentacija dolazi na globalnu
mrežuipostajevidljvasvima.
Onoštojeveomavažnijestedapoznajetenaineitehnologijekakosajtpostajevidljiv,jelje
to naješe ono što Vaš klijent kome radite sajt ne zna … odnosno njega ni ne zanima
tehnološkikakotosvefunkcioniše,klijentželidasevidinaglobalnojmrežiiodvasoekuje
damutoomoguiteuskladusanjegovimželjama.Vašzadatakjedamutoomoguitebez
previšefilosofiranjaipravljenjanaukeodtogaimepokazujetedastepraviprofesionalac.
Kao prvo, da bi se sajt video na globalnoj mreži potrebno je imati dva elementa koja se
zakupljujukodovlašenihprovajdera:
domen,
hosting.
1.1.1.Domen(domain)
Domen–predstavljawebadresukojaimasvojuformu:
www.imedomena.rsilinakonkretnomprimeru:
www.tekoms.co.rsiliwww.tekoms.rs
Ukolikoklijentželidomenuvišereipotrebnojedasadržisrednjuilidonjucrteusamom
domenu,naprimer…www.tekomskursevi.comiliwww.tekoms_kursevi_web_dizajna.rs
Preporuka je da naziv domena bude relativno kratka re, jasna,
PREPORUKA
laka za pamenje, bez preteranih opisa i po mogustvu da sadrži
neku kljunu re koja opsuje osnovnu delatnost firme. Domen
www.tekomskursevi.com je praktian za pamenje, sadrži ime
firme,
kljunu
re
dok
je
domen
naziva
www.tekoms_kursevi_web_dizajna.rs veoma komplikovan za
posetiocakadamusenaprimerdiktiraadresakojutrebadaposeti
ili ukuca u svoj Browser. Oznaka “.rs” predstavlja kategoriju
domena i naravno to može da varira u zavisnosti kakav domen
klijentželidaima.Preporukajedaseuzimajudomeniuskladusadelastnošufirme,takoda
sunaješidomenikodnas“.co.rs”,”.rs”i“.com”…
Takoe cene kategorije domena varijaraju. Vidljivost sajta kao i pozicija sajta na samom
Google ne zavisi od vrste domena, drugim reima koji god da zakupite od domena, uz
dobruoptimizaciju,Vašaprezentacijaebitidobropozicionirananamrežibezobziradalije
“.com“ili„.rs“.Poredtogamožetezakupitiidomene:
5
KURSWEBDIZAJNA
.org–ukolikosteorganizacija,
.gov.–zavladineorganizacije,
.edu.rs–zaobrazovneinstitucijeisl…
PREPORUKA
Dabistepristupilipanelugdesuparametrizadomenpotebnoje
dadefinišetekodprovajderakorisnikoimeipassword.
Te parametre sauvajte kod sebe jer kao web dizajner morate
imatesvepristupnepodatkeukolikokasnijeklijentzahtevaneke
korekcijenasajtu.
1.1.2.Hosting(Hosting)
Hostingpredstavljaplatformuodnosno“mesto”gdesmeštateVašuinternetprezentaciju.
PristuphostinguseradiprekoLoginpanelagdeupisujeteUsernameipassword.
Dabistepristupilihostingpanelugdesuparametrijedadefinišete
PREPORUKA
kodprovajderakorisnikoimeipassword.
Te parametre sauvajte kod sebe jer kao web dizajner morate
imatesvepristupnepodatkeukolikokasnijeklijentzahtevaneke
korekcijenasajtu.
Danaspostojikodnasnekolikoprovajderakojinudeopcijuhostovanjavašegsajtaisvaka
opcijanudiodreeneparametre–veliinumemorije,brojemailnaloga,brojdomenaisl…
Onoštojevažnonaovomkursudapolaznikshvatikakosvetofuncionišeupraksivezanoza
domenihosting.
U prehodnom poglavlju objasnili smo šta je domen koji klijnet zakupljuje ali pored toga
potebnojeidaposedujehostinggdeebitismeštenaprezentacija.Hostingpodrazumeva
da uz pomo odreene aplikacije na samom serveru Vi manipulišete podacima vezano za
samuprezentaciju.
Kao dobra opcija kod naruivajna hostinga jeste uzimanje C PANELa, koji predstavlja
platformugdeselogovanjemnanju,pojavljujepanelsaikoncamasaodreeneoperacije.
Grafikupriloguopisuješemukakofunkcionišurelacijedomen>hosting>Vašraunar.
6
KURSWEBDIZAJNA
7
KURSWEBDIZAJNA
1.2. Statikiidinamikiwebsajtovi
SajtjeuskladištennaserveruiprekoHTTP–apokazujesadržaj.Funkconisanjevezeizmeu
klijentaiserveradainternetu:
PristupstatikimstranicamanaWeb–uteeposledeemredosledu:
AutorWebsajtakreirastatikuvebstrancuiuvajeuodreenomfolderuna
serveru,
Klijent Web browser – daje HTTP zahtev za datom stranicom. Zahtev se
zadajekadakorisnikraunarauneseodgovarajuiURLuwebbrowser,
WebServerprihvatazahtevklijentailociratraženuHTMLstranicu
Traženastranicasevraavebitaukojijeprikazujekorisniku.
DynamicWebSite–omoguavakomunikacijupretraživaa(klijenta)saraznimdinamikim
materijalom,bazompodatakaisl.
8
KURSWEBDIZAJNA
1.3.Strukturaiorganizacijastatikogsajta
Kadasesaklijentomdogovoriteokonamenesajta,njegovihželjaokovizuelnogrešenjasa
timinformacijamamožetedefinisatiorganizacionoVašsajt.
Taorganizacijasajta,odnosno“arthitekturasajta”netrebamnogodazanimaonomekome
raditesajt,aliVamakaodizajneruomoguavalakosnalaženjegdesestanalaziodfajlovai
naravnokasnijekodažuriranjaodnosnomenjanjasadržajapozahtevuklijenta.
Pošto se ovde na kursu radi statiki sajt (prethodnp poglavlja opisuje šta je statiki sajt)
onda je najbolje kreirati strukturu koja e se bazirati na fajlovima i fodlerima u koje e
smeštatitematskefajlove.
StatikisajtjesastavljenodnekolikoHTLMfajlova1kojepredstavljautematskestranicesa
svojimsadržajempopitanjuteksta,slike,videaisl.
Kompletcelakonstrukcijasajtanalazieseufolderu“TEKOMS–Kurswebdizajna”
Našbuduisajtkojieobraivatinamkursuimae5statinihHTMLstrananaziva:
–
index – to je poetna strana dobro došlice na sajt, sa uvodnim napomenama o
samojfirmi,uslugama,proizvodimaitd.Veomajevažnonapomenutidaovastrana
mota da ima naziv Index bez obzira što je poetna pa je polazniku loginije da je
nazoveHomeiliPocetna.Razlogtomejedabiserverivideliovustranukaopoetnu
(Indexpage)idaseodnjedaljerazvijajulinkovikadrugimstranama.
–
Onama
–
Usluge
–
Galerija
–
Kontakt
Poredtogapostojaeifolderikojieimatinazivepremavrstisadržaja:
Images–tusesmeštajusveslikekojeidunasajt,
Galerija–tusesmeštajusveslikekojeiduugalerijuslika,
Css–tusesmeštajufajlovikojidefinišustilovekojiesepojavljivatinasajtu2
Ostalo–tusesmeštajuizvornifajloviukojimasteobraivalislike,naprimeruPhotoshopu
ilinekomdrugomprogramu.
Parametri – tu se smeštaju podaci vezano za domen i hosting (user name, passwordi,
parametrijekonekcije3).TosemožeupisatiuobianNotepadfajlsamokaoinformacija.
1
UsledeempoglavljubieopisanoštajeHTML
Unarednimpogalvljimabieopisanoštasustilovi
3
Unarednimpogalvljimabieopisanoštasuparametrikonekcijekaoikreiranjesamekonekcije
2
9
KURSWEBDIZAJNA
Suštinakonstrukcijewebsajtajestedaposetilacsajta“vidi”naekranusamostatikestrane
nakojimasesadržajsajta.
Preko linkova koji mogu biti tekstualni i grafiki kree se po stranicama. Sadržaj sajta
predstavlja tekst u samoj strani, slike koje se “vuku” iz foldera “images” ili “galerija”,
stilovikojise“vuku”izfoldera“css”...
Kakotofunkcionišemožeseprikazatiuovomgrafikom3Dprikazuštavidiposetilacsajtai
štasenalazisa“drugestrane”gdesevidiVašaorganizacijasajta.
LINKOVI – predstavljaju veze izmeu stranica i mogu se javljati izmeu strana ili ak
unutar samih strana. Dobro organizacijom Vašeg sajta omoguavate lako kontrolisanje i
snalaženje gde ide koja slika, brzo ažuriranje sajta po pitanju promene slika, stilova …
kontroladalisvilinkovirade(danematzv.“slepihlinkova”).
Cilj dobre organizacije i strukture sajta se najbolje vidi kada biste imali sajt koji ima veliki
brojstranicagdebiimalivelikibrojlinkovaizmeunjih,ubaenihslikaitd.
10
KURSWEBDIZAJNA
POETAKKREIRANJAPRVEWEBSTRANE
2.1.HTMLUvod,strukturajednewebstranice
Prekretanjaudizajniranjewebprezentacijepotrebnojepolaznikupojasnitištajeustvari
HTMLkod.
HTML nije programski jezik u onom smislu u kom su to C++ ili Visual Basic, jer ne sadrži
komande,tipovepodataka,operatore,promenljiveislinestvari.HTMLjevišejezikzaopis
Internetdokumenata.Pomounjegamožetemenjatibojuiveliinuteksta,bojupozadine,
umetnutislikuizvuknaInternetstranicu,alinemožeteizraunatikolikoje2+2.
U svojoj suštini HTML dokumenat je obian tekstualni dokumenat sa ekstenzijom .html,
takodasemožekreiratiiubilokomodteksteditora,kaoštosuNotepad,WordPad,MS
Word. Iako je izrada HTML stranica vrlo jednostavna, postoje pravila koja morate znati i
poštovatiihpriizradi
HTML (HyperText Markup Language) je jezik kojim vi “pišete” kod koji se izvršava na
serverima. Drugim reima, upisivanjem odreenih kodova, i slanjem na server, Vaša
prezentacija usled prisutnosti HTML koda daje stranici odreen dizajn. Pod tim se
podrazumeva da je tekst u odreenom formatu, da postoji odreena tabela, da se u
odreenomstraniceprezentacijepojavljujeslika,video…
HTMLkodkojitkonapisaniposlatnaserver,omoguavada“server”umedaprevedetaj
kodikaorezultatViimatenaekranukreiarnuwebstranu.Drugimreima,HTMLjejezikkoji
serveru“razumeju”.
OsnovnastrukturajedneHTMLstraneizgledaovako:
<html>
Poetakkoda
<head>
Ovojezaglavlje
sanaslovom
<title>TEKOMSd.o.o.</title>
(tusesmeštajulinkka
stilovima,kljunerei,
izvršneskripteisl).
</head>
Ovojebody.To
<body>
jecentralnideosajta
gdesesmeštasveodsadržaja
(text,slike,video,galerija…)
</body>
</html>
Krajkoda
Suštinawebdizajnajestepredstavljanjeodreenihelemenatanasajtujezikomkojiserveri
“razumeju” odnosno kroz pisanjem HTML koda u odreenoj formi kako kod zahteva vaše
idejepostajuvidljive.
11
Download

KURS WEB DIZAJNA