Osnove Web Dizajna 1

7/21/2019 Osnove Web Dizajna 1

1/85

WEB SAJT MAJSTOR

Osnove Web DizajnaHTML, CSS, JS, SEO, Photoshop

Autor: Nikola JanjiIzdava: Obuke i Kursevi, Beogradwww.obukeikursevi.com


2/85

Copyright (c) 2012. Obuke i Kursevi, Beograd. Sva prava Zadrana. Bez prethodne pismene dozvole od strane Obuke i Kursevizabranjena je reprodukcija, transfer, distribucija ili memorisanje nekog dela ili itavih sadraja ovog dokumenta kopiranjem, sniman-

jem, elektronskim pitem, skeniranjem ili na bilo koji drugi nain.

WEB SAJT MAJSTOR

Osnove Web DizajnaHTML, CSS, JS, SEO, Photoshop

Autor: Nikola Janji

Izdava: Obuke i Kursevi, Beogradwww.obukeikursevi.com


3/85


4/85



WEB SAJT MAJSTOR

Osnove veb dizajna

Osnowe veb dizajna

Istorija i razvoj web-a Web sajt je skup povezanih web strana koje sadre tekst, fotografije, video, audio i sl. Web sajt senalazi na bar jednom serveru i pristupa mu se preko internet adrese poznatije kao URL. Svi javni web sajtoviine World Wide Web.

WWW je kreiran 1990. godine a kreator je CERNOV fiziar Tim Berners-Lee. Arila 1993. CERN je objavioda e WWW biti besplatan svim korisnicima. Prvi web sajt napravljen je 6. avgusta 1991. godine, prva foto-grafija koja je objavljena na internetu je fotorgrafija grupe ena naunika CERNA.

HTML HTML su inicijali od HyperText Markap Language. Hyper je suprotnost od Linearnog, Tekst je ono toe te vi koristit. Mark up je ono to e te vi raditi. Pisaete obuan engleski i markirati ono to ste napisali.Language se odnosi na jezik engleski jezik.

Planiranje i procesi izrade web sajta

ta je Web dizajn?

Web dizajn je korisniki orijentisana multidisciplinama delatnost koja ukljuuje vizuelne vetine,izbor tehnologije i sadraja, kao i elemente uspenog poslovanja, pre svih poznavanje Internet marketing-a.Predstavlja proces dizajniranja i razvoja web sajtova, odnosno Internet prezentacija. Re multidisciplinamapotie od injenice da web dizajn u sebi sadri vie oblasti (grafiki dizajn, programiranje, biznis i dr.). Frazakorisniki orijentisana bie objanjena u sledeoj nastavnoj jednici. Kompletan web dizajner mora da budei dobar programer, i dobar grafiki dizajner i da poznaje elemente poslovanja. U najkraem, web dizajn pred-stavlja spoj programerskih vetina i estetike, odnosno smisla za dizajn.

Zato web dizajn?

Svedoci smo velike ekspanzije Interneta i web tehnologija u poslednjih 10-tak godina. Prvi koracipredstavljali su postavku podataka i informacija na Internet, radi razmene u uskom krugu korisnika. Danasnema ozbiljnije firme koja nema svoj web sajt i promociju svojih proizvoda i usluga preko Intemet-a.Globalizacija, irok krug potencijalnih korisnika i nepostojanje granica Internet trita, daje velikemogunosti svima za uspean nastup i promociju. Sam pristup izgradnji uspenog web sajta, izborutehnologije, nainu i obliku predstavljanja zahteva paljivo planiranje. Osnovni element svake web prezent-acije, i one prve i ovih danas je Informacija. Svaki sajt pre svega treba da bude informativan, a sami

tehnoloki aspekti i marketinki efekti doprinose boljoj promociji i prodaji. Klijent e naravno pre kupitiproizvod u lepoj ambalai.


5/85



WEB SAJT MAJSTOR

Osnove veb dizajna

Autor: Nikola Janji


Aspekti web dizajna

etiri osnovna aspekta web dizajna su: Sadraj

Tehnologija

Vizuelnost

Ekonominost.

Cilj sadraja je da informie posetioca sajta. Tehnologija se koristi radi implementacije funkcionalnos-ti sajta, vizuelnost predstavlja formu prikaza sajta, dok ekonominost predstavlja ekonomsku opravdanostpostojanja sajta. Veina svih sajtova danas ima komercijalnu namenu, u smislu promocije, reklame i prodaje

odredjenih proizvoda ili usluga.

Navedeni aspekti nisu uvek strogo definisani. Na primer, lina prezentacija nema ekonomskogaspekta. Takodje, stranice u Intranet-u nemaju potrebu za jasno definisanim vizuelnim aspektom, jer imajuza cilj prenos i pristup odredjenim informacijama. Uticaj pojedinih aspekata zavisi od prirode i namenesamog sajta.

Piramida web dizajna

Sutina web dizajna moe se prikazati tzv. piramidom web dizajna. Sadraj web sajta ine blokovipiramide, koja je izgraena na dobrim temeljima:

izabranoj tehnologiji i

vizuelnom prikazu.

Piramida e biti stabilna ako su uravnoteena dva prethodno navedena temelja. Tek kad se onipotpuno definiu i postave, prelazi se na popunu sadraja web sajta. Izabrana tehnologija je vezana za funk-cionalnost sajta i bitna je za dizajnera odnosno kreatora sajta, dok je korisnicima bitna forma, odnosno vizu-leni prikaz. Ekonominost i profit je tek na vrhu piramide kao rezultat dobrog rada.

Izgradnja web sajta Vano je jo jednom istai da oba temelja moraju istovremeno biti graena, odnosno da piramidamora biti podizana ravnomemo, i sa tehnoloke strane i sa vizuelne strane. Posveivanje posebne panjesamo jednom od njih moe da dovede do loeg konanog rezultata. Favorizovanje tehnologije dae mnogonepotrebnih kontrola, apleta, zahteva za plug-in dodacima i si. Nije cilj pokazati posetiocu da kreator sajtapoznaje mnoge tehnologije. Sa druge strane, favorizovanje vizuelne forme daje mnogo slika, clip-artova,background tema i si. Nije cilj opteretiti sajt sa puno grafikog sadraja, koji se kasnije teko uitava, i odbijaposetioca ve u startu. Takodje, potrebno je predvideti mesta za eventualnu nadogradnju i ubacivanje novihsegmenata. Na primer, izrada web sajta za firmu koja ima trenutno samo nekoliko proizvoda u svom proiz-vodnom programu, ali planira da u narednom periodu proiri svoju ponudu, to web dizajner mora da pred-

vidi u strukturi sajta u smislu lakog dodavanja novih sadraja. Kao i kod svakog drugog projekta definie sei rok zavretka web sajta.


6/85



WEB SAJT MAJSTOR

Osnove veb dizajna

Autor: Nikola Janji


Razvoj web sajta

Kod razvoja web sajta primenjuje se top-down pristup. Prvo se diskutuje onjegovoj nameni, uzimaju zahtevi i defmiu ciljevi, a tek onda prelazi na impleme-ntaciju. Jasno razumevanje namene sajta znatno e smanjiti rizik neuspeha kom-pletnog projekta. Sledei korak je izrada specifikacije, a potom i osmiljavanjedizajna. Slian postupak razvoja koristi se i u software engineering-u i naziva sewaterfall model (model vodopada).

Koraci izgradnje

U najkraem, koraci razvoja web sajta bili bi: spoznati namenu I napraviti specifkaciju,

kreirati prototip dizajna,

implementirati dizajn,

testirati sajt,

postaviti sajt.

Uvek treba potovati definisane korake razvoja sajta, ime se smanjuje broj skakanja i povratakanazad. Na primer, ako je prvobitna odluka bila izbor JavaScripta za implementaciju nekog web elementa, akasnije se ispostavi da je naruilac imao jo neke zahteve vezane za taj element, koji nisu na vreme

prepoznati i koji ne mogu da se urade pomou JavaScript-a, cela stvar mora da se vraa na poetak i da sebira neka druga tehnologija, PHP i si.

OSNOVNI ELEMENTI WEB STRANICE

5 osnovnih Web dizajn elemenata Internet prezentacije

Kada kreirate web sajt, postoji 5 osnovnih dizajn elemenata uz pomo kojih moete postii jednosta-van ali efektan web dizajn Internet prezentacije Vae firme. Bez obzira na to ta je svrha kreiranja Vae Webprezentacije i kako e ona na kraju izgledati, ovih 5 elemenata dizajna su deo Vaih web sajt stranica, i trebaih uzeti u ozbir:

Boje. Kada pravi web sajt veina kompanija najmanje razmilja o bojama, to je jedan od oiglednihelemenata dizajna. Na alost, to je jedan od najvie korienih elemenata dizajna. Ukoliko elite da bojeefikasno koristite, onda osmislite web sajt bez boje, pa zatim dodajte samo onoliko boje koja e Vam omo-guiti da dobijete atraktivan web dizajn.

Linije.Malo kompanija razmilja o linijama svoje Internet prezentacije, ali linije su vaan web dizajnelement. Linije ukljuuju pravila, ogranienje i linije stvaraju slike i tekst. Linije mogu da privuku oko posma-traa gore i dole ili horizontalno. Dodavanje nekoliko linija na Va web sajt moe da povea znatno njegovu

itljivost.


7/85



WEB SAJT MAJSTOR

Osnove veb dizajna

Autor: Nikola Janji


Oblici. Oblici su svi zatvoreni oblici Vae Internet prezentacije. Veina dizajnera web sajtova stvara

oble ili pravougaone oblike, ali Vi moete da stvorite i vie zaobljenih oblika takoe.

Teksture. Teksture web sajta daju oseaj povrine. Teksture kreiraju specifian oseaj koji dopunjujeporuku na web strani. Na primer, ukoliko Vaa kompanija prodaje ureaje za grejanje, moete da dodateteksturu cigle na pozadinu Vae Internet prezentacije kako biste ukazali na toplotu kunog ognjita. Ukolikoprodajete bazene, Vaa web sajt tekstura moe da sadri plavu glatku povrinu ili slike mehuria.

Pokreti. Takoe zvani pravci, pokreti ukazuju na injenicu da veina Internet prezentacija ima osecajpomeranja. Na dobro dizajniranim web stranicama, posmatraevo oko e se blago i jedva svesno pomeratipreko web stranice tako da je posetioevo oko privueno tano na ono emu je web dizajner dao znaaj.Ovo moe da bude jedan od sloenijih elemenata dizajna za savladavanje, ali je takoe jedan od najvanijih.Web sajtovi koji sadre ovaj element navode posetioca na prave ili ciljane informacije, to moe biti i market-inki isplativo.

Da bi web sajt bio uspean, mora da zadovolji vie kriterijuma. Tri najvanija su: dizajn

sadraj

navigacija

Dizajnje slika Vae firme na internetu. Posetioci sajta umnogome cene kredibilitet i poslovnost Vaekompanije kroz web dizajn. Loe dizajniran web sajt naruava imid Vae kompanije, te zato morate biti

oprezni kada je u pitanju web dizajn. Dizajn je proces koji zapoinje sagledavanjem koncepta budueg sajta,planiranjem sajta i na kraju dizajniranjem. Postoji dosta elemenata koje treba uskladiti prilikom dizajniranjasajta: izbor tehnike koja e se koristiti za izradu, sadraj u vidu teksta, fotografije, animacije itd.

Sadrajje razlog dolaska posetioca na Va web sajt. Nain na koji je napisan sadraj moe da utiena uspeh Vaeg sajta. U zavisnosti da li je sadaj kvalitetan ili lo zavisie i rangiranje Vaeg sajta na internetpretraivaima, a time i broj poseta sajtu. Dobar sadraj treba da animira kupce i podstakne ih na akciju.

Navigacija web sajta je vaan element koji ne smete zanemariti. Elementi web sajta kao sto suheader, navigacioni meni, sadraj, footer i ostali, treba da imaju logian raspored. Posetilac ne sme biti zbun-

jen i dezorijentisan, jer moe jednom akcijom, jednim klikom mia napustiti Va web sajt.10 osnovnih elemenata koje Websajt mora sadrati

1. Naslov web stranice. Prvi element koji posetioci Vaeg sajta vide jeste naslov. Naslov moraopisivati ta se nalazi na njoj. To je osnovni element Vaeg websajta. On pomae posetiocima da odrede taih interesuje na Vaem websajtu. Naslov web stranice mora biti jasan, koncizan i i da ima smisao. U okvirunjega morate da napiete kljune rei koje e privui Vae potencijalne kupce.


8/85



WEB SAJT MAJSTOR

Osnove veb dizajna

Autor: Nikola Janji


2. Jednostavna navigacija.Nita nee oterati posetioca Vaeg sajta kao konfuzna ili komplikovana

navigacija na sajtu. Kada Va websajt poseti potencijalni kupac, potrebno je da u svakom trenutku zna na kojojse stranici nalazi i da jednostavno pronae stranice koje je ve posetio. Navigacioni meni mora da bude pristu-paan i jednostavan za razumevanje. Trebalo bi da bude na svakoj stranici Vaeg websajta i lociran na istommestu Web stranice.

3. Efektivan sadraj. Rei kojima opisujete Va proizvod ili uslugu osnovni su preduslov uspeha Vaegbiznisa. Opis e pomoi ili odmoi potencijalnom kupcu da narui Va proizvod ili uslugu.

4. Jednostavan proces kupovine i naruivanja. Ukoliko posetioc eli da kupi Vae proizvod iliuslugu, pomozite mu da to uini. Ne ostavite ga u nedoumici. Potencijalnom kupcu morate objasniti ta jepotrebno da uradi, i to na najjednostavniji mogui nain. Ukoliko eli da kupi proizvod, pomozite mu tako to

ete nazvati link: KLIKNITE OVDE za naruivanje proizvoda "X". Dostavite mu jasne i precizne instrukcije kakoda narui proizvod i navedite mu ta moe oekivati prilikom klika na neki link koji ga vodi na stranicu zanaruivanje.

5. Korisne fotografije. Fotografije i slike mogu pomoi Vaim kupcima da doive Va proizvod ili uslu-gu,Obavezno treba da postavite fotografije proizvoda koji prodajete. Atraktivne fotografije mogu znaajnopomoi prodaji Vaeg proizvoda. Ukoliko prodajete vie proizvoda, koristite galerije fotografija i fotografije salinkovima koji pritiskom omoguavaju uveanu fotografiju Vaeg proizvoda.

6. Prijava na newsletter. Veina posetilaca koji se prvi put nau na Vaem sajtu nee izvriti kupovinu.

Oni obino dolaze kako bi se informisali o Vaoj ponudi. Da biste zadrali kontakt sa potencijalnim kupcima,pronaite nain da prikupite njihove e-mail adrese., Jedan od naina jeste da se prijave za besplatni elektron-ski magazine, tj. newsletter. Drugi nain je da im ponudite da besplatno downloaduju neki proizvod. Na ovajnain dobijate ansu da ih imate u Vaoj bazi i redovno obavetavate o novim proizvodima, uslugama, promo-cijama kao i da zadrite kontakt sa njima. Opcija prijavljivanja daje Vam odlinu priliku da posetioci sajta post-anu Vai kupci i da time maksimizujete Vau prodaju.

7. Svedoenja kupaca.Odlian nain da izgradite kredibilitet Vae firme, tj. da uverite Vae kupce daprodajete proizvode ili usluge koji zaista vrede je da ukljuite komentare zadovoljnih kupaca koji objanjavajukako mu je Va proizvod ili usluga pomogao da poboljaju kvalitet svog ivota. Ispod komentara upiite imenaVaih zadovoljnih kupaca, a ako je mogue i njihove fotografije. Ovim ete poveati kredibilitet Vaih proizvo-

da i usluga.

8. Stranica o nama. Posetioci su u veini sluajeva skeptini prilikom kupovine preko interneta, jer sena ovaj nain gubi lina interakcija ili poslovanje licem u lice. Najbolji nain da uverite posetioce ko ste i taradite jeste da ukljuite stranicu O NAMA koja sadri osnovne informacije o Vama, Vaim zaposlenima i Vaemposlovanju.

9. Stranica pitanja i odgovori - FAQ. Obavezno treba da postavite stranicu pitanja i odgovori kojasadri osnovna pitanja posetioca sajta u vezi Vaih proizvoda ili usluga.

10. Vai kontakt podaci. U cilju izvrenja prodaje i izgradnje Vaeg kredibiliteta, postavite potpuneinformacije o nainima kontaktiranja Vae firme. Ovo podrazumeva broj telefona, broj faxa, potansku adresu,i e-mail adresu. Neka kontakt informacije budu postavljene na svakoj stranici, ako je to mogue.


9/85



WEB SAJT MAJSTOR

Osnove veb dizajna

Autor: Nikola Janji


PISANJE TEKSTA NA VEB-u

Da bi se napisao dobar tekst koji e posetiocu vaeg sajta da ostavi dobar utisak i sigurnost prilikomkupovine proizvoda ili angaovanja radi realizacije nekog proekta treba pre svega poznavati marketing ipsihologiju posetioca (kupca). Tekstovi se na svim stranama piu u paragrafu (

).

Prvi paragraf bi trebao da ima izmeu 4 i pet reenica, u tim reenicama treba navesti, pre pisanjadefinisati, glave kljune rei. Takoe u daljem pisanju teksta te kljune rei treba pomenuti nekoliko putakako bi se poboljala globalna pretraga a i posetilac da ima kostantno definisano da se tekst koji je pred njimodnosi ba na to to je traio i da ima elju da nastavi sa daljim itanjem kako bi se detaljnije informisao.

Na strani je pozeljno da se nalazi oko 400 rei, ukoliko je broj rei vei dolazi do zamora i posetiociodustaju od daljeg itanja (ne odnosi se na info portale, citate, izvetaje, ...). Takoe treba obratiti panju daje sve pravilno napisano i da nije dolo do gramatikih greaka ili greaka prilikom kucanja teksta.

Izbegavati reenice koje poinju sa jednim slovom, voditi rauna da je na poetku svake reeniceveliko slovo. to se tie tagova h1-6 i oko toga treba obratiti panju ali o tome ce biti detaljno rei kada sepree na rad sa HTML sintaksom.


10/85



WEB SAJT MAJSTOR

Adobe Dreamweaver Okruenje

Autor: Nikola Janji


2.0 Adobe Dreamweaver Okruenje

2.1 Osnovni elementi programa Po startovanju aplikacije prvo to Vam se prikae jeste naslovna strana na kojoj je potrebno odabratieljeni format stranice koju emo praviti. U naem sluaju odabraemo html (Create New -> HTML) ili kasnijekada preemo na CSS odabraemo CSS dokument (Create New -> CSS). Sa leve strane pokayae nam sedokumenti (strane) koje su poslednje otvarane. Sa desne strane nalaze se linkovi ka video snimcima na sajtuADOBE kompanije koji e Vas provesti kroz razliita uputstva na engleskom jeziku.

Po odabiru HTML dokumenta otvorie Vam se radna povrina kao na sledeoj slici.


11/85



WEB SAJT MAJSTOR


Autor: Nikola Janji


Na samom vrhu nalazi se glavni meni. Sa desne strane imade side bar koji Vam moe olakati rad tako

to ete odabrati odreenu opciju. Alat tj. deo koji ete nejee koristiti je FILES. Kada selektujete FILESimate mogunost da napravite virtualni sajt i da na jednom mestu pristupite svim fajlovima koji se nalaze navaem serveru ili raunaru. Iznad u Opciji INSERT imate najee koriene elemente i jednim klikom miamoete dodati recimo tabelu, link, tekst, fotografiju,...

U redinjem delu ekrana nalazi se radna povrina. Sa desne strane je Grafiki deo a sa leve je samKOD. Na vama je da odaberete mod pod kojim ete raditi, Da li je to Kod ili Grafiki ili KombinacijaKod-Grafiki.

CODE Dobiete preko elog ekrana kod, SPLIT Ekran e se podeliti kao na prethodnoj slici ima saleve strane bie kod a sa desne graficki deo, DESIGN Grafiki mod gde moete da radite iskljuivo vizuelno.U ovom predavanje koristiemo najvie DESIGN view.

Pored odabira izgleda rdne povrine nalazi se dugme LIVE kada kliknete ovo dugme program e dasimulira prikaz vae strane u browseru (kako e se Vaa strana ponaati kada je postavite na server). Poredovog dugmeta imate ikonicu sa nacrtanim monitorima (Multiscreen) U ovoj opciji moete odabrati razliite

rezolucije ureaja i videti kako Vaa stranica izgleda na recimo tabletu, mobilnom telefonu, raunaru,... Poleove opcije sledi opcija Preview, klikom na globus otvorice Vam se meni u kome treba da odaberete eljenibrowser (internet explorer, firefox, google chrome) kako bi pogledali stranicu u Vaem omiljenompregledau (browseru).

Iznad ovog menia nalazi se naziv vae stranice (Unititled-2) Otidjite na File -> Save As kako bi snimiliVau stranicu. Prva stranica na sajtu naziva se index, pa zato vau stranicu nazovite tako. Kada snimite stran-icu umesto ovog natpisa na slici stajae Vam index.html

1.2 Osnovni elementi stranice koje emo uneti u nau stranu

Prvo to emo uraditi otii emo u mod CODE u u samom HEADU umesto Untitled Docu-ment uneti NASLOV NAE STRANE

Zatim emo se vratiti na DESIN Mode i krenuti sa kreiranjem stranice.

Elementi koje emo koristiti su: tabela, h1 tag, paragraf, image, link,

H1 tag je obino naslov strane, najlaki nain da unesete h1 tag je da odete na INNSERT HTML Text Object H1 ili au kodu u body unesete Naslov


12/85



WEB SAJT MAJSTOR


Autor: Nikola Janji


Kreiranje tabele


13/85



WEB SAJT MAJSTOR


Autor: Nikola Janji


Otiite na INSERT pa odaberite TABLE, otvorie Vam se pop up prozor u koji je potrebno uneti para-

metre. ROWS broj redova, Columns broj kolona, Table width je irina tabele u pikselima (ili merni sistemkoji odaberemo), Border thichness debljina linija tabele (ukoliko je vrednost 0, linije se nee videti), Cellpadding je broj piksela ko sadraja koji e se nalaziti u polju, Cell spaceing je prostor izmedju polja utabeli. Najee se stavi vrednost 0 (nula) u ova polja. Na kraju kliknemo na dugme OK I tabela je kreirana.

Unoenje fotografije na stranu

Otiite na INSERT pa na IMAGE, Otvorie Vam se pop up prozor u kome je potrebno odabrati foto-grafiju koju emo ubaciti u stranu, fotografija se mora nalaziti u istom folderu ili folderu images koji se nalazigde I strana index. Kada kliknete na dugme OK pojavice Vam se jos edan proyor u koji moete uneti Alt Tagfotografije a to je opis fotografije, u pojedinim sluajevima kada ureaj ne moe d aprikae fotografiju tajALT TAG e se pojaviti umesto slike a sa druge strane alt tag se koristi I zbog SEO optimizacije.

Kada se slika ubaci, moete je selektovati, levim tasterom mia, pojavice vam se sa donje, desne I nadesnom dodnjem oku kvadtarici, pomeranjem kvadrtatia moete menjati veliinu slike na strani, gleda-jte da fotografija ostane u izvornoj proporciji a to moete izvesti tako to e te drati SHIFT na tastaturi I

pomerati kvadratic na oku fotografije.


14/85



WEB SAJT MAJSTOR


Autor: Nikola Janji


Linkovanje (povezivanje) teksta sa nekom stranom ili adresom nekog sajta

Selektujte eljeni texi u properties panelu odaberite HTML ako je sluajno odabrano CSS zatim u polje Linkunesite eljenu adresu sajta ili strane I nakraju odaberite Target. Ukoliko elite da se nova strana uitaumesto postojee stavite _parent ili ukoliko elite da se pored nae strane uita jo jedna strana u novomprozoru ili tabu odaberite _blank.

2.3 Izrada naslovne strane pomou tabele.

Pre nego to krenemo sa izradom stranice napraviemo na papiru skicu kako e naa stranica da izgleda i naosnovu skice kreiramo tabelu tj. Layout strane.

Tabela irine 960px, centriranaHeadr visina 360Meni 4 dugmeta irine 240px, visina 30pxLeva strana (side bar) irina 240pxCentralni deo sajta irina 720px


15/85



WEB SAJT MAJSTOR


Autor: Nikola Janji


Poinjemo sa izradom stranice. Otiite na File pa na New I odaberite HTML I kliknite na

dugme Create. Zatim na dnu u properties panelu kliknite na Page Properties.

Page Font ovde moete da odaberete grupu fontova koji e d abudu na strani, Size- veliinu slova, Textcolor boja slova, Background color boja pozadine cele strane, background image moete d aodaberetefotografiju koja e se nalaziti u pozadini strane, Repeat ovde podeavate d ali e se ta fotografija ponavljatina strani po irini ili visini ili e biti centrirana. Ispod se nalaze margine.

Mi emo popuniti ovako:Page Font : Arial Bold

Size: 10ptText Color: CrnaBackground Color : Svetlo plava (#9CF)

Sve 4 margine emo staviti vrednost 0 (nula)

Sada sa leve strane odaberite LINKS (CSS) I Link color stavite belu, Visited links bela, Rollover links plava,Active links crvena I kliknite na dugme OK.

Sada treba da kreiramo Layout uz pomo tabele. Napraviemo tabelu 4x4 I centriraemo je na strani, vred-nosti za linije tabele, padding, spaceing e biti nula a irina tabele 960px.


16/85



WEB SAJT MAJSTOR


Autor: Nikola Janji


Sada treba da obriemo viak polja. Prvo cemo selektovati prvi red tabele I ici desni taster mia, odab-rati Table pa opciju Merge cells. Selektujemo red tako sto kliknemo u zadnje desno polje I prevuemo miemdo prvog polja.


17/85



WEB SAJT MAJSTOR

Osnove veb dizajna

Autor: Nikola Janji


Kada smo izvrili spajanje polja u prvom redu trba da odredimo visinu polja (tog polja koje smo

napravili spajanjem 4). Kliknucemo u polje (pojavice se inputer, linija uspravna) kliknuemo na CODE MODEI uneti vrednist od 350px (height:=350)

Sada se vratite na DESIGN Mode kako bi u to polje ubacili fotografiju. Opet kliknite unutar polja I iditena Insert Image I pronadjite fotgafiju koju ete ubaciti, veliina fotografij je 960x350px, ukoliko ubacite vecuili manju fotografiju morate je skalirati na eljenu veliinu.


18/85



WEB SAJT MAJSTOR

Osnove veb dizajna

Sada mo uneti 4 dugmeta I linkovati (Naslovna, O Nama, Galerija, Kontak) s time to e dugmeNaslovna otvarati index.html, o nama google, galerija youtube I kontakt w3.org

U svako polje prvo unosimo nazive dugmadi koje emo linkovati. Zatim otiite u CODE Modkako bi uneli visinu menia od 30px (height=30) I irinu 240 (width=240)

Unutar treba uneti height=30 width=240 kod treba da izgledanaziv dugmeta

Kada smo to yavr[ili linkovaemo svako dugme posebno. Selektujte text I properties panelu nadnu ekrana unesite adresu koju otvra ai odaberite target (pogledajte na poetku predavanja kako selinkuje tekst).

Zatim selektujte opet sva 4 polja I u properties panelu odaberite CSS I kliknite da Vam se

tekstovi centriraju u poljima.


19/85



WEB SAJT MAJSTOR


Autor: Nikola Janji


Sledee to treba uratidi je da kreiramo main sajta u koji emo uneti tekst strane. Treba da selektujetesvih 6 polja (po dva polja ispod O Nama, Galerija, Kontakt) kao na slici, zatim idete desni taster mia pa

odaberete table i Marge Cells.


20/85



WEB SAJT MAJSTOR


Autor: Nikola Janji


Zatim emo u to polje uneti H1 tekst koje e biti naslv strane i 5 paragrafa jedan ispod drugog nekogteksta (moete genrisati tekst na adresi http://www.lipsum.com/feed/html) i samo ga iskopirati.

Kada smo to zavrili treba u prvo polje ispod linka NASLOVNA da ubacimo novu tabelu koja e imati1 kolonu i 4 reda. irina te tabele je 240px

U svako polje unetpo jedan link (ukupno 4).


21/85



WEB SAJT MAJSTOR


Autor: Nikola Janji


Sledee to radimo je bojenje pozadine tabele, menia, pozadine linkova u levoj tabeli a to radimo

tako to emo u svako polje kliknuti i u properties panelu za BG odabrati odreenu boju


22/85

- Comment Tag slui za unoenje komentara u kod. Komentar se ne prikazuje na i rad.

- Ova deklaracija koja se nalazi u HTML dokumentu i nalazi se pre HTML taga.

-a stranapisana.

- Definise hiper link, koji se koriti za povezivanje strana, povezivanje strane sa nekomeksternom adresom. Najvaniji atribut ovog taga j i crvene boje.

Google SE

- O

WHO

- Ovaj tag definie kontaktne informacije autora ili vlasnika strane. Ako seaddress tag nalazi u body tagu predstavlja kontaktne informacije za ceo dokument, ako jeunutra article taga onda se odnosi samo na taj artikl.

Napisao Petar.
Terazije 14/III
064/123-45-67

- Slui za ubacivanje java apleta u dokument. Ovaj tag nije podran u HTML5Java applet koji ubacuje

meni u stranu.

- Definie prostor unutar fotografije tako da moete linkovati posebne delove najednoj fotografiji



WEB SAJT MAJSTOR

HTML


23/85

- Tag za boldiran tekstTekst

-

- Definie boju I v

Ovo je heading

Ovo je paragraf.

-

- Pravi vea slova od ostalih

-

For 50 years, WWF has been protecting the future of nature. Theworlds leading conservation

- Naslov strane

sadraj dokumenta......



WEB SAJT MAJSTOR

HTML


24/85

- Pravi novi red prilikom kucanja teksta u ustoj

Tekst sadri
novi red.

- Dugme unutar formeKlikni me!

- Tabela sa natpisom, boldirana slova u naslovu kolona.

MesecUteda

Septembar100 rsd

- Tekst centira unutar html dokumenta

-

The Scream by Edward Munch. Painted in 1893.

- Formatiranje teksta unutar dokumenta. Definie deo kompijuterskog kodadeo kompijuterskog koda

- Podeava pozadinu kolona u tabeli

ISBNNaslovCena

2346838HTML3400rsd

- Podeava pozadinu kolona u tabeli



WEB SAJT MAJSTOR

HTML


25/85

ISBNNaslovCena

2346838HTML3400rsd

- Se koristi za pise u listi definicija

CoffeeBlack hot drink

MilkWhite cold drink

- sa obrisanim delom (precrtan tekst)

My favorite color is blue red!

- Formatiranje teksta unutar dokumenta. Definie definiciju.Definicija - pojam

- Lista direktorijuma, nije podrano u HTML5

htmlxhtmlcss

- Definie delove jedne html strane. Koristi se za grupisanje blok-elemenata Ioblikovanje u CSS-u

This is a heading

This is a paragraph.

- Lista definicija


Milk



WEB SAJT MAJSTOR

HTML


26/85

White cold drink

- Stavke u listi definicija


MilkWhite cold drink

- Formatiranje teksta unutar dokumenta. Definie naglaeni tekstNaglaen tekst

- Grupa povezanih elemenata u formi

Personalia:Name:
Email:
Date of birth:

- Vrsta slova u dokumentu

This is some text!This is some text!

This is some text!

- Forma u html dokumentu

First name:
Last name:

-

- Skup nekoliko prozora unetih u jednu stranu



WEB SAJT MAJSTOR

HTML


27/85

- head dokumenta, nevidiljivi deo u browser u njemu se nalaze svi linkovi ka css,stilovima, JS skriptama, naslov strane, meta tagovi,

Naslov dokumenta

sadraj strane......

- - Heading tagovi

H1

- Horizontalna linija

-

Naslov strane

sadraj strane......

- iskoen tekst

tekst

- Frame/Prozor unutar dokumenta, embedovana strana unutar druge.

- Slika

- Polje unutar forme za unos podatka, teksta.

First name:
Last name:

-



WEB SAJT MAJSTOR

HTML


28/85

My favorite color is blue red!

- Formatiranje teksta unutar dokumenta. Definie unos preko tastature.

Unos preko tastature

- Natpis za input polja I radio dugmad

Male
Female

- Naslov grupe elemenata u formi

Personalia:Name:
Email:
Date of birth:

- Lita stavki unutar Listi

CoffeeTeaMilk

CoffeeTeaMilk

- veza sa eksternim CSS dokumentom

- Slika sa klikabilnim delovima



WEB SAJT MAJSTOR

HTML


29/85

- Lista stavki menia, ne podrava ni jedan pregledaNew...Open...Save

CutCopyPaste

- Opis podataka I strane unutar head-a dokumenta

- Ispisuje informaciju ako va

Sorry, your browser does not handle

frames!

- document.write("Hello World!")Your browser does not support JavaScript!

- Multimedijalni objekat unutar dokumenta



WEB SAJT MAJSTOR

HTML


30/85

- Liste sa redosledom

CoffeeTeaMilk

CoffeeTeaMilk

-

VolvoSaab

MercedesAudi

-

VolvoSaabOpelAudi

- Paragraf, novi red

Ovo je paragraf.

- Parametar za medije unutar objekata

- Tag podrava razmak I fiksira sirinu unosa tekstaText in a pre elementis displayed in a fixed-widthfont, and it preservesboth spaces andline breaks

-



WEB SAJT MAJSTOR

HTML


31/85

WWF's goal is to:Build a future where people live in harmony with nature.

We hope they succeed.

- Koristi se za prikaz pogrenih odgovora, precrtan tekst

Moj novi auto je plav.

Moj novi auto je zelen.

- Formatiranje teksta unutar dokumenta. Definie deo kompijuterskog koda,primer.

Primey komp. programa

- Java skripta se nalazi unutar head dela u dokumentu ili u samom body-udokumentadocument.write("Zdravi!")

- VolvoSaabMercedesAudi

- Definie smanjen tekst

The world's largest web development site.

Copyright 1999-2050.

-

My mother has blue eyes.

- Prekrien tekst, nije podran u HTML5

Version 2.0 is not yet available! now available!

- Formatiranje teksta unutar dokumenta. Definie vaan tekstStrong text

- CSS Stil unutar html dokumenta. Nalazi se u headu strane

h1 {color:red;}

p {color:blue;}



WEB SAJT MAJSTOR

HTML


32/85

heading

paragraf.

- Smanjuje slova I stavlja ih u donji deo tksta (H2O)

Tekst sadrisubscript.

- Smanjuje slova I stavlj ih u gornji deo teks a (n4)

Tekst sadrisuperscript.

- Tabela

Cell ACell B

- Grupa polja u glavnom, unutranjem, delu tabele

MonthSavings

Sum$180

January$100

February$80

- Kolone u tabeli

Cell ACell B



WEB SAJT MAJSTOR

HTML


33/85

- Polje za unoenje teksta unutar formulara

Tekst

- Grupo polja u dnu tabele

MonthSavings

Sum$180

January$100

February$80

- Zaglavlje kolona tabele

MesecUteda

Januar100

- Zaglavlje tabeleMonthSavings



WEB SAJT MAJSTOR

HTML


34/85

Sum

$180

January$100

February$80

- Naslov straniceNaslov strane

- Redovi u tabeli

MesecUteda

Januar100 rsd

- -u

Teletype text

-

Tekst

- Ne sortirana lista

CoffeeTeaMilk

- Formatiranje teksta unutar dokumenta. Definie varijabile.Varijabila



WEB SAJT MAJSTOR

HTML


35/85

CSS

Da bi stilizovali I poziecionirali na

Klasa: .center {text-align:center;}

ID:#tekst {text-align:center; color:red;}

background-color background-image background-repeat background-attachment background-position

body {background-color:#b0c4de;(Boje mogu -#ffffff, RGB

vrednost rgb(255,0,0) ili nazivom - red)background-image:url('paper.gif');background-repeat:repeat-x;(repeat-x, repeat-y, no-repeat)background-position:right top;} (left, right, bottom, top, center)

ili

body {background:#ffffff url('img_tree.png') no-repeat right top;}

STILIZOVANJE TEKSTA

Naziv OPIS

color Boja slova

direction Usmerenost teksta

letter-spacing

line-height Teina slova

text-align Poravnanje teksta

text-decoration Dekoracija teksta

text-indent

text-shadow Senka slova

text-transform Transformacija teksta

unicode-bidi

vertical-align Vertikalno poravnanje

word-spacing

h1 {text-align:center;}

FONTOVI



WEB SAJT MAJSTOR

CSS


36/85

Naziv Opis

font Podeavanje svih elemenata

font-family Vrsta I grupa fontova

font-size

font-style Stil teksta (normal., Italic, oblique)

font-variant Preciziranje dal ice tekst biti small-caps

font-weight Teina fonta

STILIZOVANJE LINKOVA

a:link {color:#FF0000;} a:visited {color:#00FF00;} a:hover {color:#FF00FF;} /* prezal miem preko linka */a:active {color:#0000FF;} /* aktivan link */

LISTE UL i OL

Naslov Opis

list-style Set svih podeavanja

list-style-image Podeavanje slike/marketa liste

list-style-position Poziciioniranje markera

list-style-type Vrsta markera

TABELE

.table, td, th{border:1px solid green;}.th{background-color:green;color:white;}

BOX (DIV)

250px (width)+ 20px (left i right padding)+ 10px (left i right border)+ 20px (left i right margin)= 300px

#div1 {width:220px;padding:10px;border:5px solid gray;

margin:0px;}



WEB SAJT MAJSTOR

CSSFONTOVI


37/85

IVICA BIRDER

none: Defines no border

dotted: Ta

dashed: Crtice

solid: Ravna linija

double: Dve linije

groove: 3d linija

ridge: 3d linija

inset: 3d linija

outset: 3d linija

border-top-style:dotted;border-right-style:solid;border-bottom-style:dotted;border-left-style:solid;

border:5px solid red;

Naziv Opis Vrednost CSS

height Visina elementa autoinherit

1

max-height Maksimalna visina elementa noneinherit

2

max-width Maksimalna irina elementa noneinherit

2

min-height Minimalna visina elementa inherit 2

min-width Minimalna irina elementa inherit 2

width irina elementa autoinherit

1

PRIKAZIVANJE ELEMENTA



WEB SAJT MAJSTOR

CSS


38/85

POZICIONIRANJE ELEMENTA

-

-relative

-

z--

img {position:absolute;left:30px;top:88px;z-index:-1;}

FOATING POZICIONIRANJE ELEMENATA LEVO-DESNO

float

img{float:right;}



WEB SAJT MAJSTOR

CSS


39/85



WEB SAJT MAJSTOR

Photoshop

Priprema grafike za veb sajt

Photoshop

Prvo emo podesiti svoju radnu povrinu u odgovarajuim dimenzijama: Veliina radne povrine je 1024x1000px, to je

rezolucija koju mogu da prikau skoro svi uredjaji, zatim rezoluciju stavljamo 72dpi (pixels/inch), standardna rezolucija za

sve elektronske medije, Color Mode je RGB, 8bit i background stavljamo Transparent. Kliknite OK kako bi potvrdili vaa

podeavanja.

Otvorila vam se radna povrina i sada prelazimo na ucrtavanje i stilizovanje elemenata po skici koju smo prethodno

napravili. Izgled radne povrine je sledei:


40/85

OPIS ALATA KOJE EMO KORISTITI

Move ToolSlui za pomeranje i skaliranje elemenata. Ukoliko drite SHIFT i skalirate neki element,

skaliranje e biti proporcionalno. (V)

Rectangular Marque ToolSlui za selektovanje neke povrine, koristie nam rilikom seenja grafike (M)

Lasso ToolSlui za rucno selektovanje nekog dela grafike (L)

Crop Tool

Seenje dela grafike (C)

Eyedropper Tool Pipeta za odabir boje (I)

Brush Tool Crtanje (B)

Eraser Tool - Gumica za brisanje (E)

Paint Bucket ToolKantica za bojenje cele povrine u jenu boju (G)

Horizontal Tzpe ToolPisanje teksta (T)

Rectangle Tool

Crtanje poligona, zadravanjem mia na alatu ili ponavljanjem komande na tastaturimoete odabrati nekoliko oblika crtanja poligona (U)

Primarna boja

Sekundarna Boja



WEB SAJT MAJSTOR

Photoshop


41/85

Preice na tastaturi

CopyCTRL + C

PasteCTRL + V

CutCTRL +X

Noenje cele radne povrine SPACE + Levi taster Mia (noenje)

Zumiranje i odzumALT + Toki (scroll) Mia

Pomeranje elementastrelice na tastaturi

Pre pomeranje elementaSHIFT + strlice na tastaturi

Menjanje prikaza grafikeF

Bojenje cele radne povrine Paint Bucket Tool

Odaberite Paint Bucket Tool (G), zatim odaberite primarnu boju po izboru. I kliknite na radnu povrinu levim

tasterom.

CRTANJE POLIGONA

Odaberite Rectangle Tool (U) i kliknite na radnu povrinu. Pojavice vam se prozor u koji treba da unesete

dimenzije poligona. Unesite dimenzije i klikite na OK kako bi se element nacrtao. Zatim uzmite Move Tool i

pozicionirajte svoj poligon na pravo mesto.



WEB SAJT MAJSTOR

Photoshop


42/85

Pre nego to nastavimo sa daljim radom moramo se pozabaviti samim poligonima I layerima. Uvek kada crtate

poligone potrebno ih je rasterizovati a to radite tako to na odreeni lazer kliknete desnim taterom mia I

odaberete Rasterize layer. Kada rasterizujete nestae vam divi kvadratic na layeru. (pogledajte na slici plavi

layer).

Stilizovanje Layera.

Kada smo napravili svoju pozadinu ili neki element potrebno ih je stilizovati.

Lazey Style PanelKliknite brzo 2x levim tasterom na eljeni layer, otvorie vam se prozor za stilizovanje.

Klikom na sam natpis sa leve strane otvorie vam se podesavanje tog elementa (nemojkte kliktati na polja za

ekiranje jer Vam ss u tom slucaju nee otvoriti podesavanja).

Drop ShadowDaje senku elementu :



WEB SAJT MAJSTOR

Photoshop


43/85

Blend Mode stavite na NORMAL, Distance stavite na 0 ili pomerite kliza skroz u levo ako elite senku sa sve 4

ivice elementa , ovaj parametar slui da udalji senku od elementa na stranu uzavisnosti kako je Angle iznad

podeen. Spread je rasprostranjenos senke ako poveavate spread senka ce biti tamnija. Size je veliina senke.

Takodje pored Blend Moda imate i pravougaonik u nekoj boji, u mom sluaju je to crna, klikom na boju moete

promeniti boju.

Out Line GlowStavlja odsjaj sa spoljne strane elementa.

Pattern OverlayStavlja neku tekstruru na element

StrokeIscrtava ivicu elementa. Takoe moete promeniti boju linije, veliin ui poziciju da li ce biti sa

unutranje strane elementa ili sa spoljanje ili centrirano.

Color Overlay slui za bojeje cele povrine elementa

Gradient overlayslui za bojenje elementa u nekoliko boja (pretapanje boja.)

Kliknite 2x na Gradient (boje) otvorie Vam se prozor da iyaberete neki model boja ili da napravite sami svoje

boje. Ukoliko pravite svoju kombinaciju boja kliknite na donji levi kvadratiI promenite boju , isto tako I na

donji desni kvadrati, ukoliko dodajete treu boju kliknite na sredinu zmeu kvadratiasa donje strane I



WEB SAJT MAJSTOR

Photoshop


44/85

dodajte eljenu boju. Sa gornje strane imate kvadratie koji se odnose na Opacity tj prozirnost boja. Moete

stavljati vrednosti od 0 do 100 gde je 0 totaln prozirna boja (boje teksta se odnose na boje strelica na slici). Da bi

potvrdili boje skliknite na OK. Ukoliko koristite Gradient Overlay mora vam biti iskljuen Color Overlay.

Na ovaj nain stilizujete sve lemente.

Da bi ubacili neku fotografiju u Va dizajn idete na File I odaberete opciju PLACE, Postavite fotografiu na pravo

mesto, skalirajte I kada zavrite idite na taj lazer desni taster I odaberite opciju Rasterize Layer.

Primer dizajna

Naoravio sam radnu povrinu I obojio sa pait buketom celu pozadinu u narandastu boju. Lazer sam nazvao

pozadina (ime layera menjate tako to kliknete 2x na sam naziv layera)

Sada crtam poligon koji e mi biti sama pozadina sadraja strane i dodajem mu senku sa strane kako bih istakao

od pozadine sajta.



WEB SAJT MAJSTOR

Photoshop


45/85

Sada crtam svaki element poebno i stilizujem ga u Layer Style panelu

Stavio sam nazive menia i jos nekoliko tekstualnih elemenata kako bi imali uvig gde e se ta nalaziti, kada raditegrafiku ispisujete sav tekst ukoliko pokazujete klijentu idejno reenje , kada Vam klijent odobri dizajn morate sav

tekst ukloniti da Vam ostane samo grrafika koju em kasnije da seemo.

Seenje grafike za sajt



WEB SAJT MAJSTOR

Photoshop


46/85

Da bi preli na HTML i CSS potrebno je naugrafuku da sredimo. Prvo emo pogledati u dizajnu koji element

imaju samo jednu boju. U mom primerujednobojna povrina mi je pozadina i pozadina logotipa. Otvoriu panel

za odabir primarne boje i klikom na tu povrinu proitau vrednost te boje. Na papir u staviti da mi je Pozadina:

fbd4a2 a pozadina logotipa: df6631

Sada je potrebno isei sve ostale elemente. Elementi moraju biti iseeni precizno u piksel pa cu zumirati svoj

dizajn dok se ne pokau pikseli (do maksimuma). Uzeu alat za selektovanjei selektovati 2px irine i visinu koliki

je element koji smo nacrtalu (u sluaju da se radi o gradientu) ili selektovati ceo element ukoliko je grafika ili se

nalaze neki efekti i grafika (fotografija, vektori, teksture,...)



WEB SAJT MAJSTOR

Photoshop


47/85

Idem na Edit i odaberem opciju COPY MARGED. Zatim idem na FILE pa na NEW, Kliknem OK i idem CTRL+V da

unesem kopirani element. Da bih sacubao idem na File pa na Save As imenujem dokument (primer: pozadina) i

odaberem format JPEG i sacuvam u folder images. Na ovaj nain seem sve elemente na sajtu. Isekli smo sve

eleemnte ali ostao je jos deo sa senkom, kada imate elemente koji imaju senke ili su delimino prozirni onda ne

snimate kao JPEG ve ga snimate kao PNG. Da bi isekli takve elemente potrebno je da iskljuite sve layere i da

ostavite samo taj koji ima senku ili je proyiran, selektujte deo koji secete, ja cu selektovati celu sirinu dokumenta

i 2px visine i sacuvati kao PNG.



WEB SAJT MAJSTOR

Photoshop


48/85

Isekli smo svu neophodnu grafiku i sada prelazimo na HTML i CSS.



WEB SAJT MAJSTOR

Photoshop


49/85



WEB SAJT MAJSTOR

Izrada sajta



WEB SAJT MAJSTOR

Izrada sajta

Izrada veb sajta

Napravili smo svoju grafiku, isekli I smestili u folder images. Sada je potrebno napraviti jedan folder sa nazivom sajta

(kurs).

U taj folder treba ubaciti folder images.

Otvorite DrwamWeaver I kreirajte novi html I css file koje emo snimiti u na folder koji se zove kurs*

HTML dokument nazivamo INDEX a CSS dokument STIL, sve e pie malim slovima.

Sada moramo povezati ova dva fajla tako to emo u HTML dokumentu u head uneti sledei kod:

Sauvajte dokument. Moete i u tag title () umesto Unititled dokument staviti nayiv svog sajta.

Primer: Obukek i Kursevi, Beograd | Naslovna

Sada poinjemo sa kreiranjem divova unutar BODY-a.Uzeemo skinu i napraviti emu divova.


50/85

Pogledajmo moj dizajn.

Raspored divova



WEB SAJT MAJSTOR

Izrada sajta



WEB SAJT MAJSTOR

Izrada sajta


51/85

Kreemo u kucanje divova i dodavanje ID-a svakom

1. Kreemo sa samom stranom gde imamo div i ID=sadrzaj

2. Pravimo head (call centar i pretragu). Kreiramo div i ID=head



WEB SAJT MAJSTOR

Izrada sajta



WEB SAJT MAJSTOR

Izrada sajta


52/85

3. Unutar head-a imamo 2 diva. Jedan je id=call_centar a drugi id=social

4. Sada radimo logotip i meni napravice div id=head_logo

5. Sada unutar njega stavljamo 2 diva jedan je id=logo a drugi ej id=meni

6. Pravimo DIV za slogan koji dolazi ispod HEAD-a I divu dodeljujemo id=slogan

7. Sada pravimo div za Slideshow pa emo mu staviti id=slider

8.

Ispod nam dolazi najbitnije deo u koji emo stavlajti sadraj starna I desni sidebar. Pravimo div koji emo nazvati

id=content, stavljam content jer mi je naziv sadrzaj ve zauzet.



WEB SAJT MAJSTOR

Izrada sajta



WEB SAJT MAJSTOR

Izrada sajta


53/85

9. Unutar ovog diva imamo 2 diva jedan je glavni sadraj a drugi je side bar. Nazvaemo ih id=main I id=sidebar

10.Prelazim na izradu samog dna sajta. Tom divu dodelicu id=foother

11.Unutar dna sajta treba da stavim 3 diva koji e biti postavljenja jedan pored drugog ali da bih to mogao uraditi

moram prvo da napravim 2 diva. jednom u staviti id=foother1 a drugom neu uopte dodeljivati id.

12.Sada u unutar diva kome nisam dodelio ID da napravi preostala 2 diva I dodeliti im id=foother2 I

id=foother3

13.Ukoliko dodje do problema pa se neki div pomeri kada im s eodrade stilovi potrebno je ispred tog diva dodati

DIV kojo se zove clearfix. Meni e trebati iznaf diva FOOTHER I dodeljujem mu class=clearfix



WEB SAJT MAJSTOR

Izrada sajta



WEB SAJT MAJSTOR

Izrada sajta


54/85

Zavrili smo sa izradom DIV-ova sada prelazimo na stilizovanje svakg diva. Vratite se na skicu rasporeda divova i

krenite redom da ih stilizujete. Ja kreem od samog BODY-a.

1. Body : Treba da stavimo slku u pozadinu, da stavimo boju i da podesimo margine na 0px

body {margin:0 0 0 0;

background:url(images/manibg.png) repeat-y center #fbd4a2;

}

Stavio sam margine 0 0 0 0 to zani da su sve 4 margine po 0px, zatim pozadina mi je slika manibg.png koja se

ponavlja po Y osi i ima boju pozadine # fbd4a2

2. Sadraj : irina diva 960px i margine auto, da bi bio div pozicioniran na sredini ekrana

#sadrzaj {

width:960px;margin:auto;

}

3. Head : irina 960px, visina 50px, u pozadini je slika head.jpg i ima gornju ivicu 5px boje #df6631re SOLID

je obavezna

#head {

width:960px;

height:50px;

background:url(images/head.jpg);

border-top: solid #df6631 5px;

}

4. Call centar div: irina 480px, float levo da bi pored bio div za pretragu, visina 40px, pozicija je relativna t sam

program proracunava na osnovu unetih vrednosti. Pomeren je od vrha i od leve ivice 10px, odabrana vrsta

slova i velicina. Moete dodati boju slova.

#call_centar {

width:480px;

float:left;

height:40px;

position:relative;

top:10px;

left:10px;

font-family:"Palatino Linotype", "Book Antiqua", Palatino, serif;

font-size:18px;

}

5.

Social div u kome se nalazi pretraga i nalazi se pored diva Call centar: irina 480px, visina 40px, float desno

poravnanje teksta desno, od vrha odmaknut 10px.

#Social {

width:480px;

float:right;

height:40px;top:10px;

text-align:right;

}



WEB SAJT MAJSTOR

Izrada sajta



WEB SAJT MAJSTOR

Izrada sajta


55/85

6. Head logo: irina 960px, visina 84px, pozadina boje #df6631

#head_logo {

width:960px;

height:84px;

background: #df6631;}

7. Logo: irina 380px, visina 84px, float levi i dodali smo u pozadinu sliku logobg.jpg

#logo {

width:380px;

height:84px;

float:left;

background:url(images/logobg.jpg);

}

8. Meni irina 580px, visina 84px, float desni, u pozadini slika mani.jpg

#meni {

width:580px;height:84px;

float:right;

background:url(images/meni.jpg);

}

9.

Slogan: pozicija relativna,irina 960px, sadraj diva od gornje ivice odmaknut 20px, visina 50px, u pozadini

slika slogan_bg.jpg koja je po dnu pozicionirana, tekst je centralno poravnat, i dodali smo da je z-index u -2

tj. Poslat u pozadinu da bis e video logotip koji rpelazi preko diva slogan

#slogan {

position:relative;

width:960px;

padding-top:20px;height:50px;

background:url(images/slogan_bg.jpg) bottom;

text-align:center;

z-index:-2;

}

10.Slider : uvuen je -19px u gornju ivicu, irina 960px i vidina 250px

#slider {

top:-19px;

width:960px;

height:250px;

}11.

Cotent: irina 960px

#content {

width:960px;

}

12.

Main: pirina 960px, pozadina slika main_bg.jpg koja s eponavlja po X osi pozicionirana po dnu i pozadina

voje #ffffff, float levi jer pored dolazi side bar, sadrajdiva od ivice pomeren za 10px i minimalna visina

definisana na 300px

#main {

width:690px;

background:url(images/main_bg.jpg) repeat-x bottom #FFFFFF ;

float:left;padding-left:10px;

padding-top:10px;

padding-right:10px;



WEB SAJT MAJSTOR

Izrada sajta



WEB SAJT MAJSTOR

Izrada sajta


56/85

min-height:300px;

}

13.

Side Bar: irina 240px, pozadina slika side_bar.jpg ponavlja s epo X osi i po dnu pozicionirana boja #df6631,

float desni, sadraj diva uvuen levo 5px, desno 5px, i od vrha 10px

#sidebar {

width:240px;background:url(images/side_bar.jpg) repeat-x bottom #df6631;

float:right;

padding-left:5px;

padding-top:10px;

padding-right:5px;

}

14.

Foother: irina 960px, prikazivanje kao blok, minimalna visina 250px, pozadina boje #2d2c2c i u pozadini

slika foother.jpg koja se ponavlja po X osi po dnu pozicionirana.

#foother {

width:960px;

display:block;min-height:250px;

background:url(images/foother.jpg) repeat-x bottom #2d2c2c;

}

15.Foother 1: irina 300px, visina 230px, uvuen sadraj 10px, float levi

#foother1 {

width:300px;

height:230px;

padding:10px;

float:left;}

16.

Foother2: irina 300px, visina 230px, uvuen sadraj 10px, float levi

#foother2 {

width:300px;

height:230px;

padding:10px;

float:left;}

17.Foother3 : irina 300px, visina 230px, uvuen sadraj 10px, float desni

#foother3 {

width:300px;

height:230px;

padding:10px;

float:right;}

18.

Clear Fix: odnosi se na vid ispred

.clearfix:after { content:"."; display:block; height:0; clear:both; visibility:hidden; width:960px;}

.clearfix { display:inline-block; position:relative;}

Kada smo zavrili osnovne stilove kreemo sa unoenjem materijala i ostalih neophodnih elemenata: meni, polje

ptertage, slogan,...

1. U div Call centar uneemo broj telefona

2.

U div Social uneemo polje za pretragu. Insert/Form/TextField



WEB SAJT MAJSTOR

Izrada sajta



WEB SAJT MAJSTOR

Izrada sajta


57/85

3.

U div Logo ubacicemo sliku logotipa i linkovati ka index.html. Insert/Image

4. U div Meni trba uneti listu sa stavkama menia, ja cu prvo napraviti div koj cu nazvati meni stil pa u njega uneti UL

listu

5. U div slogan u ubaciti tekst ili sliku sa nekim sloganom Insert/image

6. U slider treb ubaciti neku java Scriptu koja e da smenjuje fotografije


58/85

whichimage++

else

whichimage=0

setTimeout("slideit()",slideshowspeed)

}

slideit()

//-->

7.

Main unosimo tekst za naslovnu stranu

8.

U sidebar unosimo tekst ili slike po izboru

9.

U foother1 unosimo sadraj

10.U foother2 unosimo sadraj

11.U foother3 unosimo sadraj

Uneli smos adraj osatje nam jo da sredimo CSS za meni . Vratite se u CSS dokument.

/*MENI STIL */

#menistil{

border:none;

border:0px;

margin:0px;

padding:0px;font: 100% 'Lucida Sans Unicode', 'Bitstream Vera Sans', 'Trebuchet Unicode MS', 'Lucida

Grande', Verdana, Helvetica, sans-serif;

font-size:14px;

height:84px;

font-weight:bold;

}

#menistil ul{

list-style:none;

vertical-align:middle;

margin:0;

height:84px;

padding:0;

}



WEB SAJT MAJSTOR

Izrada sajta



WEB SAJT MAJSTOR

Izrada sajta


59/85

#menistil li{

float:left;

padding:0px;

height:84px;

width:116px;}

#menistil li a{

color:#cccccc;

display:table-cell;

font-weight:normal;


line-height:84px;

margin:0px;

padding:0px 25px;

text-align:center;

text-decoration:none;

width:116px;

}

#menistil li a:hover{

background:url(images/meni_rollover.jpg);

color:#000;

height:84px;


}

.active {


color:#000;

height:84px;


}

Sa ovim zavrili smo izradu cele straen sada moete krenuti sa punjenjem strana, kreiranjem ostalih strana i sl. Najlaki

nain je da kopirate index.html i samo promenite ime u naziv trsane koja vam je potrebna.

Gotov KOD SAJTA:

Index.html

Obuke i Kursevi, Beograd



WEB SAJT MAJSTOR

Izrada sajta



WEB SAJT MAJSTOR

Izrada sajta


60/85

011/328-11-11



WEB SAJT MAJSTOR

Izrada sajta



WEB SAJT MAJSTOR

Izrada sajta


61/85

HOMEO NAMA

USLUGE

KURSEVI

KONTAKT


62/85

slideit()

//-->

Alique aliquatus et fugitio te cus aped excearum vid ex et fuga. Cae officiendi doluptatum harumque et estrumq uaspeli

busdandiam, si issim qui doloreium aut et qui blatum rest voloreiciet dolori te vercit, voluptus earundel magnis as ducias

dolupta nimolupta nem est occaecus qui dis eatem fuga. Apidelis ratistin porunt aut pa quibus idebit eossimperci

commodit faccum quas dolor rectiorae pra cullis dolorem labo. Et qui dolorestium alique nonsequ iature, quo eost,

quiam num quatempos mod ut occullibus in res aut iumque nite veles alique delia nullab incil magnistecte plicit latectur

sum, ulluptur resequia am reperes idi quissecercid que con res et latem evenis consequi dus dus excest ma es alit

hillaborro berferum fugiaer ovidereped quunti ant hari cus dolorest raecta sum intem eum verum ea am et quis et as

sitatas des corem sinvent pratio modis a sit re ommolorum volum dolupid unt omnis ped qui doluptisin nihil

intiamenimus sit que et que none moluptur?

Alique aliquatus et fugitio te cus aped excearum vid ex et fuga. Cae officiendi doluptatum harumque et estrumq

uaspeli busdandiam, si issim qui doloreium aut et qui blatum rest voloreiciet dolori te vercit, voluptus earundel magnis

as ducias dolupta nimolupta nem est occaecus qui dis eatem fuga. Apidelis ratistin porunt aut pa quibus idebit

eossimperci commodit faccum quas dolor rectiorae pra cullis dolorem labo. Et qui dolorestium alique nonsequ iature,

quo eost, quiam num quatempos mod ut occullibus in res aut iumque nite veles alique delia nullab incil magnistecte br

/>

1

2

3

Stil.css

@charset "utf-8";

/* Strana */

body {

margin:0 0 0 0;



WEB SAJT MAJSTOR

Izrada sajta



WEB SAJT MAJSTOR

Izrada sajta


63/85

background:url(images/manibg.png) repeat-y center #fbd4a2;

}

/* Sadrzaj */

#sadrzaj {

width:960px;margin:auto;

}

/* Head */

#head_all {

position:fixed;

z-index:999;}

#head {

width:960px;

height:50px;

background:url(images/head.jpg);border-top: solid #df6631 5px;

}

#call_centar {

width:480px;

float:left;

height:40px;

position:relative;

top:10px;

left:10px;

font-family:"Palatino Linotype", "Book Antiqua", Palatino, serif;

font-size:18px;}

#Social {

width:480px;

float:right;

height:40px;

top:10px;

text-align:right;

}

#head_logo {

width:960px;

height:84px;background: #df6631;

}

#logo {

width:380px;

height:84px;

float:left;

background:url(images/logobg.jpg);

}

#meni {

width:580px;

height:84px;float:right;

background:url(images/meni.jpg);

}



WEB SAJT MAJSTOR

Izrada sajta



WEB SAJT MAJSTOR

Izrada sajta


64/85

/*MENI STIL */

#menistil{

border:none;

border:0px;

margin:0px;padding:0px;

font: 100% 'Lucida Sans Unicode', 'Bitstream Vera Sans', 'Trebuchet Unicode MS', 'Lucida Grande', Verdana,

Helvetica, sans-serif;

font-size:14px;

height:84px;

font-weight:bold;

}

#menistil ul{

list-style:none;


margin:0;

height:84px;

padding:0;

}

#menistil li{

float:left;

padding:0px;

height:84px;

width:116px;

}

#menistil li a{

color:#cccccc;

display:table-cell;

font-weight:normal;


line-height:84px;

margin:0px;

padding:0px 25px;

text-align:center;


width:116px;

}

#menistil li a:hover{


color:#000;

height:84px;


}

.active {


color:#000;

height:84px;


}

/* Glavni sadrzaj strane */



WEB SAJT MAJSTOR

Izrada sajta



WEB SAJT MAJSTOR

Izrada sajta


65/85

#sadrzaj_bottom {

position:relative;

top:120px}

#slogan {

position:relative;

width:960px;padding-top:20px;

height:50px;

background:url(images/slogan_bg.jpg) bottom;

text-align:center;

z-index:-2;

}

#slider {

top:-19px;

width:960px;

height:250px;

}#content {

width:960px;

}

/* Unosenje sadrzaja */

#main {

width:690px;

background:url(images/main_bg.jpg) repeat-x bottom #FFFFFF ;

float:left;

padding-left:10px;

padding-top:10px;

padding-right:10px;min-height:300px;

}

#sidebar {

width:240px;

background:url(images/side_bar.jpg) repeat-x bottom #df6631;

float:right;

padding-left:5px;

padding-top:10px;

padding-right:5px;

}

/* Podnozje sajta */

#foother {

width:960px;

display:block;

min-height:250px;

background:url(images/foother.jpg) repeat-x bottom #2d2c2c;

}

#foother1 {

width:300px;

height:230px;

padding:10px;

float:left;}

#foother2 {

width:300px;



WEB SAJT MAJSTOR

Izrada sajta



WEB SAJT MAJSTOR

Izrada sajta


66/85

height:230px;

padding:10px;

float:left;}

#foother3 {

width:300px;

height:230px;

padding:10px;

float:right;}

.pretraga {

border-width: 1px;

border-style: solid;

border-color: #999999;

font-family: Arial, Helvetica, sans-serif;

font-size: 12px;

top:15px;

right: 20px;

position:relative;

color: #333333;

width: 200px;

height: 20px;

Documents

Osnove Web Dizajna 1