KompoZer-Kratak tutorial kako napraviti sajt

[Devilish Soldier]

Odlucio sam da napravim kratak vodic kako napraviti svoj sajt brzo i lako.

KompoZer je program za izradu Web site-ova pomocu koga mozemo brzo i lako odraditi sajt u odnosu na vodece programe Front Page i Dreamviewer.Tezak je svega oko 7 mb i potpuno je besplatan.

Kako napraviti sajt?
Ja cu praviti izmisljeni sajt Sveta Kompjutera
Napravite folder u kojem cete sejvirati svoj radove i slike

Korak 1
Prvu stranu moramo nazvati index.Ici cemo format->Page and title properties,popunite ova polja i idite OK



Sejvirajte ovu stranicu u kreiran folder ctrl-s

Korak 2
Sada nam treba pozadina,koju cete napraviti u Photoshopu ili je mozete jednostavno staviti u KompoZeru u neku boju
Ja sam napravio pozadinu u Photoshopu(necu zalaziti u Photoshop).Da bi izbegli pri ubacivanju pozadine da nam se slika prelama,mi cemo izabrati opciju CSS.
Idite tool->CSS EDITOR,i izabracemo body opciju i ici na dugme ispod create




Posle ovoga dobili smo kreiran body.Sada cemo otici na karticu Background i ici cemo choose file,pronaci nas background i kliknuti Ok.Kada izaberemo background treba da odstikliramo opciju image scrolls with the page,koja se nalazi odma ispod choose file-a,kliknuti OK.


To izgleda ovako

Korak 3
Posto smo ubacili background,treba nam tabela,"okvir"
Ici cemo table->Insert->table i izabrati "jednu kockicu",dobili smo mali pravougaonik,ici cemo desni klik Table cell properties i popuniti tabelu kao sto je na sledecoj slici

Kada ste to zavrsili idite OK.
Dobili smo okvir

Korak 4
Treba nam sada tabela za logotip i ime firme ili cega radimo,u ovom slucaju Svet Kompjutera.Zato cemo ici Table->Insert->table i izabrati "2 kockice" tj celije.

CTRL i levi klik misa i oznacimo obe celije pa ponovo idemo desni klik cell properties i popuniti tabelu kao na sledecoj slici

Kliknu cemo u prvu celiju gde ide logo.Insert->Image->choose file i naci cemo logo i stiklirati opciju don't use alternatic text koji se nalazi ispod choose file-a.Potvrdite to na OK.
Sada misem kliknite na drugu celiju i drzite SPACE dok se tabela ne poklopi sa prvom celijom tj dok se linije ne uklope kako treba.
Sada u prvoj i drugoj celiji moramo postaviti logo i ime na sredinu tabelice,a to cemo uciniti na sledeci nacin.Izaberite koju celiju zelite ujednaciti ja cu prvo uzeti drugu celiju desni klik cell properties i podesiti middle i center ,pogledajte na sledecoj slici

OK
Da bi druga celija i slika bili jedne pored druge tj da slika ne bi bila odaljena od celije,kliknucemo na sliku desni klik,image properties->dimension i staviti->custom size %of cell 100

To uradite i sa prvom celijom ako je potrebno.

Nastavak u sledecem postu...

[Devilish Soldier]

Ovo sto smo do sada uradili izgleda ovako:


Korak 6
Sada nam je potreban neki slogan.Koji cemo staviti ispod ove tabele sa logom.Lupite 2,3 x ENTER da vam odvoji koliko se kome svidja.
Moj slogan ce biti Svi bitovi vode na jedno mesto!Napisite tekst povecajte ga na crno slovo A koje se nalazi u gornjem meniju gde su boldovi,centriranje slova.Taj tekst formatirajte tj boldujte,zakosite slova i centriraj te tekst na sredinu ekrana.Lupite 2x enter

Korak 7
Sada nam treba tabela za navigacione dugmice.Sada zavisi od vas kako ce vam stajati horizontalno ili vertikalno.Ja cu horizontalno postaviti.
Ici cemo Table->Insert->Table i izabrati 6 kockica tj celija jer ce imati 6 dugmica.
Dugmice napravite u photoshopu ili jednostavno napisite tekstualno.
U prvu celiju ubacicemo Home,Image->choose file naci home dugme i stiklirati don't use alternative tekst ok.I tako za svih 6 celija cemo odraditi.Stikliracemo sve celije ctrl levi klik i table cell properties i postaviti width na 75 of cell


Sledece je da kliknemo na home dugme i desni klik image properties ->dimension->custom i staviti %of cell 100,da bi se slika "prilepila za celiju i tako za sve dugmice.
To bi trebalo da izgleda ovako



Korak 8
U ovom koraku ce nam trebati tekst na glavnoj strani odvojite malo od tabele i otkucajte neki tekst,formatirajte ga,ulepsavajte ali vodite racuna da to izgleda pregledno.Taj tekst ce vam stajati na pocetnoj startnoj stranici.
Kada zavrsite idite na save da sacuvate dosadasnji rad.

Korak 9
Sada pravimo stranice za ostale dugmice
Ici cemo format->Page and title properties
i umesto index napisacemo recimo O nama
Necu postavljati sliku imate u koraku 1
Ici cemo SAVE AS i nazvati je o nama.Obrisacemo tekst koji je na stranici posto je to u stvari index strana ali pod nazivom o nama,a index imamo samo brisemo tekst i ubacujemo novi tekst,koji cemo takodje da formatiramo.
Tako za svaku stranu otvaramo index stranu nazivamo je po "dugmicu"(title and page properties)SAVE AS,brisemo tekst,formatiramo i stavaljmo novi

Korak 10
Ostalo nam je posto smo sve odradili stranice da ih medjusobno linkujemo

Otvoricemo prvu index stranu.Desni klik na O nama dugme Create Link,choose file i pronadjimo html stranicu O nama.html i OK


Linkovali smo dugme O nama na index stranici,tako sva dugmica na index stranici,vazi isto pravilo

Korak 11
Otvoricemo sada stranicu O nama gde je potrebno linkovati sve na O nama stranici.To se radi na isti nacin kao u koraku br 10.Pa zato necu da se ponavaljam.Tako cemo otvarati i ostale stranice kontakt,arhiva, u mom slucaju i linkovati na njihovoj stranici sve kao u Koraku 10 i 11.
Sacuvajte ceo rad u jedan folder,bez otvaranja dodatnih foldera.Html stranice slike trebaju da budu u istom folderu.

I na kraju rad izgleda ovako:

Spoiler za Konacni izgled:

Nadam se da sam vam priblizio svet izrade web site-ova.

By: Devilish Soldier

[Eni]

Zaista je fino što si se potrudio i mrzim da budem onaj koji kaže ALI... ali, tabele? Zaista? Danas?

[Maladikt]

Bolje da si pomenuo koliko je Compozer šitina od programa nego što si pomenuo tabele. Šalu na stranu, tutorijal je za početnike. Kome treba naprednija kontrola sadržaja on neće koristiti tabele (a pošto je rešenje "brzo i lako" znači da je namenjen nekome kome treba da sklepa nešto na brzaka). Ma kakve tabele, neče uopšte koristiti Kompozer. Bio sam u situaciji da sam "morao" da pravim neki sajt za fakultet u njemu. Veoma traumatično iskustvo, posebno text field-ovi koji imaju neobjašnjiv poriv da se deformišu i ignorišu unos teksta po nahođenju. Nakon toga sam otvorio Dreamweaver i završio posao za 20 minuta.

[Devilish Soldier]

Ja sam lepo napisao brzo i lako i neke osnovne stvari.Kompozer nije za neku egzibiciju od sajta vec ono.Znam da radim front page ali za to da napravim tutorial nemam vremena.Ovaj kompozer se bukvalno svodi na tabele.Mogao sam ja da pravim i bez tabela ali uracunao sam da su to neke osnovne stvari.

[Eni]

Maladikt kaže:

Bio sam u situaciji da sam "morao" da pravim neki sajt za fakultet u njemu. Veoma traumatično iskustvo, posebno text field-ovi koji imaju neobjašnjiv poriv da se deformišu i ignorišu unos teksta po nahođenju.

Devilish Soldier kaže:

Kompozer nije za neku egzibiciju od sajta vec ono.

Hm, nisam koristio program ali ne deluje loše na prvi pogled. Opet, ja sam navikao da sve radim u naprednijem txt editoru. Tražiti "program za pravljenje sajta" je isto kao tražiti "program za pravljenje igre". Internet ih je prepun, svi rade manje-više dobro, ali čak i da napraviš novi ko-zna-šta, nećeš znati šta si zapravo uradio i kako.

Jedina moja zamerka je bila na preporuku početnicima da rade sa tabelama koje niko više ne koristi. Zašto? Ako se već uzme da se ljudima nešto pokaže, a tutorial inače za to služi, onda to treba uraditi tako da nauče nešto korisno, a ne da ofrlje uhvate znanje zastarelo pre više godina...

Al' evo ti i druga: Mogao si grafiku da prilagodiš projektu, makar to bile "ovo je slika 1" sličice, nego da deformišeš baner i logo sa SK prezentacije. Treća: Zašto index.htm strana nosi Title tag "index" umesto nekog naslova? Ovim ćeš početnike zbuniti i neće znati da se tu definiše naslov strane. I tako dalje... Malo je samo truda nedostajalo da ovo sve bude nekom zaista korisno. Odmori malo, pa ga sredi da baš valja.

[Devilish Soldier]

Ja smatram ako su naucili ovo da rade,znace da odrade i bez tabele,sve je volja maste.

[Uros12]

Dobar tutorialnije los taj Kompozer.

[miša topola]

Dobro odrađen tutorijal
Za HTML stranice može da se koristi i Nvu program.

[Devilish Soldier]

@Eniaroyah

Prva strana se zove index,kako i treba da se zove.Sve ostale strane mozemo definisati po imenu stranice,a i svi znaju sta znaci Title.Tako da tesko ce doci do zbunjivanja.
Ja sam poskidao materijale sa neta logo i sta je sve trebalo jer me generalno mrzelo da pravim i odradio na brzaka tutorial,cisto da se vidi princip rada.Ko nije zadovoljan sta da mu radim.

[sunce86]

Mozda cu ispasti malo priglup, ali ne razumem kako to mislite da pravite website bez tabela?

Pa one dodju skoro najbitniji deo, ja kad krenem praviti sajt prvo sto uradim je da napravim tabelu.

Ili vi pricate o necemu drugom?

Inace, mislim da nije potrebno praviti tu neke tutorijale za pocetnike, kad se html moze bukvalno preci za jedan dan, doduse ne mogu se sve opcije odmah popamtiti, ali za ovo gore prikazano nije potrebno bas mnogo rada.

[Devilish Soldier]

Za ovaj program i ne treba,dosta je lagan i moze da se nauci za 2 dana,lagano.Dok frontpage i dreamviewer treba vremena.

Kako nije potreban tutorial za one koji pocinju?

[holodoc]

sunce86 kaže:

Mozda cu ispasti malo priglup, ali ne razumem kako to mislite da pravite website bez tabela?

Tableless design

[sunce86]

holodoc kaže:

Tableless design

Pa dobro, rad sa css-om, ali opet taj css mora da uredjuje neke elemente. Sta sad, picimo po layerima ili sta?

Treba se navici

[Devilish Soldier]

Sada ne vidim zasto je bitno da li ce neko praviti sa tabelom i kako ce raditi,ja sam imao dobru nameru da pomognem pocetnicima,ako vam se ne svidja sta da vam radim,a ko oce neka uzme ovaj tutorial kao nauk.

[izuzetan]

Tabele su ok i ne vidim zasto neko misli da tabele ne trteba koristiti prilikom dizajna web stranica??? E sad druga je stvar sto mnogi neznaju da prave slozenije tabele vec koriste tabele u tabeli pa tako html kod za tabele ispadne veci od samog sadrzaja sajta. Medjutim ako covek zna da pravi asimetricne tabele svaka ali bukvalno svaka tabela stane u par redova koda. Evo vam primer za asimetricne tabele elegantno izradjene.

Naravno za dizajn tabela iskoristite style=" " HTML atribut

Medjutim mnogi neznaju da JavaScript funkcije manipulišu apsolutno svim CSS objektima kako u smislu menjanja tako i u smislu isčitavanja. Ovo drugim rečima znači da preko JavaScript funkcija koje manipulišu CSS objektima mi možemo apsolutno dinamički menjati celokupni izgled stranica sajta, pa samim tim i izgled tabela!! A plus ako ubacimo i AJAX i CANVAS dobijamo takve mogucnosti dizajna da je flash mala beba. Medjutim naravno jos uvek to niko ne koristi jer 99% web programera u svetu ne zanima to jer ne zele da uce nove stvari, a skolski sistem je totalno posustao u tom domenu.

Evo primera sajta koji koristi sve gore navedeno: http://igrapher.com

[Wizard]

Šta god ko pričao tabele se i dan-danas često koriste za dizajn sajtova, a na specijalizovanim dizajnerskim forumima se još uvek polemiše pro et contra. Teorija je jedno, a praksa je drugo. I da se razumemo, ja ne koristim tabele, ali početnik pomoću tabela može relativno solidnu stranu da napravi za pola sata, bez tabela je neće napraviti nikad. Koji nivo poznavanja CSS-a je potreban za iole složen tebleless design i koliko početniku treba vremena da to savlada? Uvek, ali uvek, ja pravim razliku između profesionalca i nekoga ko pravi npr. svoj home page. Pričati amateru koji hoće da sastavi svoj sajt da to ne valja jerbo profesionalci ne koriste tabele je, izvinite, mlaćenje prazne slame. Praksa se često razlikuje od teorije, mnogo velikih i važnih sajtova je i dalje bazirano na tabelama, a bezmalo ni jednog nema koji prolazi sintaksnu verifikaciju (probajte da verifikujete neki od Google sajtova, a Google važi za hi-tech firmu na tom polju).

I podržavam trud koji je Devilish Soldier uložio u ovaj tutorial, koji će sigurno mnogima biti od koristi.