Na pocetku da kazem par reci pre nego sto predemo na pravu stvar... Nasao sam malo vremena da napisem ovajt tutorijal za izradu prevashodno licnih web prezentacija ali se uz male izmene moze koristiti i za sve drugo. Program koji ce biti koriscen u ovom tutorijalu je Macromedia Dreamweaver.Ovaj program je namenjen kako profesionalcima tako i potpunim amaterima.Jedino predznanje koje se zahteva pre pocetka pracenja ovog tutorijala je editovanje teksta u Wordu! Odlucio sam se da napisem ovaj tutorijal i zbog ljudi koji zovu i zele da im napravim prezentaciju za 50 E sto je smesno pa ce sada svako moci da ustedi te pare i da napravi svoju web prezentaciju
Ovaj tekst je PRVI PUT objavljen na burek forumu.I prenosenje teksta u bilo kom obliku bilo gde je sasvim dozvoljeno bez saglasnosti autora.




Nova datoteka

Za pocetak kreiracemo novu datoteku u Dreamweaveru .Odaberemo File -  New otvara se meni sa opcijama kao na slici:

Za sada nas zanimaju samo obicne HTML stranice dakle oznacavamo html.Klikom na Create otvara se nova cista stranica na kojoj mozemo da pocnemo sa nasim radom

Snimite stranicu

Pre nego sto krenemo dalje treba snimiti stranicu.odaberite direktorijum na koji cete je smestiti i nazovite je obavezno index.html. Tim imenom obavezno mora biti nazvana pocetna stranica vase web prezentacije koja ce se otvoriti kada korisnik u svom web browseru ukuca vas URL.Takode vam preporucujem da sve slike koje cete koristiti snimite u isti diektorijum kao i strannice.

Svojstva stranice

Sad moramo postaviti osnovna svostva stranice. Izaberite Modify- page properties
Upišite naslov.Odaberite po želji pozadinsku sliku ,definišite boju slova i linkova.Postavite istu boju za obične,posećene i aktivne linkove jer će tako oni biti iste boje na svim stranicama.Kako morate koristiti srpska slova č.ć.š.đ.ž izaberite u opciji Document encoding -Windows 1250. Ako želite ćirilicu UTF-8



Glavna tabela


Kao temelj dizajna ćemo kristiti tabelu.U našem teksu biće vrlo jednostavna i sastojaće se od dva reda.prvi gornji sadržaće linkove na ostale delove vaših stranica dok će u drugom delu biti prikazan sadržaj svake stranice ponaosob.Odaberemo Insert- Table i popunite kao na slici


Cell Padding (unutrašnji rub ćelija)
Cell Spacing (prostor izmedju samih ćelija tabele) oba vrednosti 0
Širina tabele na 750 pixela i to je to.

Svojstva glavne tabele

Posao oko glavne tablice još nije završen. Selektujte je i pogledajte Properties panel.Postavite aligin na center.Što će pozicionirati celu tabelu na sredinu stranice.
Podesite Brdr Color na crnu. Time ćete dobiti lepu crnu boju izmedju ćelija i ostatka stranice

Nova CSS definicija

Kilknite desnim dugmetom miša negde na stranici i izaberite CSS styles i New CSS Style dobijate izbor za kreiranje novih Css definicija


U ovom primeru ćemo redefinisati već postojeći tag - TD to je ustvari ćelija tablice.Ako definišemo taj jedan stil za TD tag možemo na jednom mestu promeniti prikaz svih TD tagova na vašem webu.Zapravo tome CSS i služi.
Popunite polja kao na slici

Uređivanje CSS svojstava

Klikom na OK u prošlom prozoru dolazite na ovaj


Ovo je prozor u kome editujete Css stil i TD tag.Broj opcija koje imate dosta je velik.Pa ipak u ovom primeru kristićemo samo opcije font ,veličina fonta, i boja.To je za sada sasvim dosta jer želimo da tekst izgleda isto u svim ćelijama tablice.

Ćelija za tekst

Odaberimo sada donji red naše glavne tablice.On će nam u stvari služiti za unost teksta.
U Properties prozoru


pojavila su se njegova svostva koja možemo menjati.Postavićemo belu pozadinsku boju( br- na belo) i horizontalno ga cenrirati ( Horz-center).Ovako će ga biti mnogo lakše i ugodnije čitati

Unos teksta

Napokon došlo je vreme za unos teksta.pritisnite enter da bi prešli u novi odlomak a Shift+enter za novi red.kao i uvek u Properties panelu imate dodatne opcije za formatiranje teksta, tekst možete povećati,smanjiti podebljati ga italic i slično.

Ubacivanje slike

Iako u ovom primeru neće biti puno slikaone su sastavni deo i važan svake stranice.Pozicionirajte se u tekstu gde želite da ubacite skiku i idite na Insert-Image


pronađite sliku koju želite i pripazite da opcija Realativ to bude uključena na Document.Takođje pre ubacivanja slike iskopirajte je u direktorijum u kome je sačuvan vaš ceo sajt zajedno sa index.html fajlom (u našem primeru Web)


Svostva slike

Ako kliknete na sliku možete joj promeniti svojstva


Dobro je upisati ALT svostvo slike tj. kratki opisni tekst koji će se prikazivati dok se slika ne učita.Opet ćemo iskoristiti Properties panel i namestiti Border na 1 , pozicionirati sliku na levu stranu i postaviti horizontalni razmak slike H Space na 5 pixela ( što znači da će ostati pet pixela praznog prostora s leve i desne strane). Sad smo do kraja sredili donji red tabele

Tablica za linkove

U gornjem redu ćemo smestiti linkove.U tom redu napravićemo još jednu tabelu koja će sadržati linkove na ostale delove vaše web stranice.Nemojte da vas zbuni ovo tablica unutar tablice to je normalno u izradi weba. .Stvorićemo novu tablicu sa jedim redom i pet kolona (jer imamo pet linkova). Ovaj put ćemo definisati u procentima - odabraćemo 100% što znači da će tablica zauzeti maximalnu moguću veličinu a u našem slučaju širinu gornjeg reda glavne tablice.Rub tablice ćemo postaviti na 0 a unutrašni rub ćelije na 3 pixela



popunite kao na slici

Ćelija za linkove

Nakon što ste kreirali tablicu za linkove odaberite prvu treću i petu ćeliju držeći CTRL dirku.Njihovu boju ćemo korišćenjem Properties panela postaviti na #FFF7EF i horizontalno ih centrirati. Isto ćemo ponoviti i za drugu i četvrtu ćeliju samo što ovde pozadinsku boju postavljamo na #E7DFC6



Linkovi

Sada ćemo u svaku ćeliju stranice umetnuti jedan hiperlink koji vodi na druge pod stranice vašeg weba.Odaberite Insert-Hiperlink i pojaviće se prozor sa slike



Upisite text linka i adresu na koju vodi, a ostala polja možete ostaviti praznima.isti postupak primenite za sve ćelije predviđene za linkove.

Gotova stranica

Vaša stranica je napokon gotova.Ukoliko ste dosledno sledili sve lekcije stranice bi trebala da izgleda kao na slici



Naravno, nadam se da ste dosta toga izmenili i napravili na drugi - bolji način

Html kod

Vrlo je važno pratiti i upoznavati Html kod do njega možete doći preko View menija ( View- Code,Design) , preporučujem vam i uključivanje opcije Code and design kako bi istovremeno videli i površinu za grafički dizajn stranice i Html kod.Takav način rada može vam pomoći u učenju elemenata Html koda i boljem razumevanju njihovih pojedinih svojstava.

Proveravanje stranice

Pre nego što proglasite web-stranice gotovim, proverite je i u drugim instalitranim browserima ( FireFox , Opera...)Izaberite File- preview in browser i to je obavezan korak pre završnog uploadovanja stranica na server.Nakon što ste se uverili da je sve u redu- vaš posao je završen.Upravo ste kreirali vaše prve web strane i dovoljno ste naučili za samostalan rad i razvoj novih web stranica.