Parsifal
Aktivan član
- Poruka
- 1.008
Zdravo svima
Primetio sam da postoji hronični nedostatak tutoriala prevedenih na srpski jezik, pa ću ovde postirati jedan tutorial za apsolutne početnike na osnovu koga je moguće uraditi pristojan sajt. Pri izradi nisam koristio tutoriale jer su mi zbog slabog znanja engleskog bili uglavnom nerazumljivi, već sam koristio sistem tipa "hm, ako pritisnem ovo šareno dugmence, da vidimo šta će da se desi" i prednost dreamweavera što je dosta intuintivno uradjen.
Za sve greške u tutorialu slobodno ostavite komentar i predlog kako da se isprave.
pozz
U DW sam otisao na File> New> Blank Page> HTML i izabrao “2 column elastic,left sidebar, heder and footer” pa zatim klik na “create” i u prozoru sam dobio template stranice. Zatim sam otisao na dno strance, klik na dugme “page properties” sto otvara prozor “appearance” gde sam podesio odgovarajuce parametre za stranicu – font, size, text color, background color ili background image. Da bih dobio gradient pozadinu, u polju "background image" ubacio sam .gif dimenzija 1px puta duzina stranice (ova duzina je naravno za svaku stranicu razlicita) i u polju ispod podesio “repeat”. Ukoliko posavljate gradient, onda obavezno u polju "background color" ubacite sifru forground boje, jer ukoliko se nalazi sifra neke druge boje, pri sporim vezama ce - dok ne ucita .gif gradienta, prikazivati nju, sto deluje dosta ruzno.
Kada se ovo odradi, onda ide klik na “links”, pa podesavanje boja linkova (link color, visited link, rollover links). Ukoliko se za linkovanje stranica koristi kucani tekst (ja sam koristio linkovanje stranica preko "rollover image"-a*), onda “underline style” treba podesiti na “Show underline only on rollover”. Ostala podesavanja nisam dirao.
* - ukoliko radite linkovanje stranica preko "rollover image" onda u "propertis"-u na dnu stranice u poljima "V space" i "H space" ukucati vredost 1, kako se rollover button-slicice ne bi dodirivale jedna s drugom.
Podesavanje boje za tekstualno polje, baner polje, left meni polje i footer polje odradjuje se kada se na radnoj povrsini stranice klikne sa jednim klikom na bilo koju ivicu odredjenog polja, sto ce na desnoj stranici radne povrsine otvoriti meni "css styles">"curent" i ispod ce prikazati sve atribute polja. Jedan od njih ce biti i "background", pa kliknite duplim klikom na njegovu vrednost, npr "#FFFFFF" i ubacite umesto nje novu sifru. Ukoliko i ovde hocete umesto boje da ubacite recimo sliku neke pozadine (paper, canvas i sl.), onda se na dnu atributa nalazi "Add property" sa "background-image" atributom, izmedju ostalih.
Sada sledi ubacivanje slika i teksta.
U “Insert” meniju klik na karticu “common” gde sam koristio funkcije “image” za ubacivanje banera (716x148px) i drugih slika na stranicu (pritom u polju “border” u “properties”-u na dnu radnog polja, obavezno ukucati nulu), “rollover image” za ubacivanje slika za linkove stranica u levom meniju (uradjenih u PS 180x30 px, 3 slike po linku, sejvovane kao.gif) umesto tekstualno kucanih linkova za stranice i “plug in” za ubacivanje mp3 fajlova (ovo treba izbegavati jer mnogo usporava ucitavanje sajta).
Ubacivanje teksta je potpuno isto kao i u Wordu.
Kada su slike i tekst ubaceni, sada ide optimizacija stranice (svake posebno) za pretrazivace, jer ako se to ne odradi, google ih uopste nece ni videti.
Znaci sada ide prebacivanje iz “design” u “code” mode (gornji levi ugao stranice) i ubacivanje tagova kako bi google mogao da zna sta se na stranici nalazi. Ovda cu prikazati jedan primer neophodnih tagova gde se prvih cetiri ubacuju izmedju <head> i </head>, a peti img tag, izmedju <body> i </body> tagova na stranici.
<head>
1.<title>Mobilni telefoni, racunari, oprema - Svet komunikacija</title>
2.<meta name="Description" content="Sirok izbor kvalitetnih mobilnih telefona, racunara i racunarske opreme" />
3.<meta name="Keywords" content="mobilni telefoni, racunari, laptop, desktop, monitori, racunarska oprema, komunikacije, wireless," />
4.<meta name="language" content="Serbian, Srpski," />
</head>
<body>
5.<img src="svetkomunikacija.jpg" alt="wireless-planeta" width="173" height="215" />
</body>
Ove kodove mozete pogledati za svaku stranicu bilo kog sajta (pa i ovog foruma) sa klikom na "view" > "page source" u vasem browseru.
Kada se sejvuje prva uradjena stranica, onda to treba da bude pocetna stranica sajta i uvek se sejvuje pod imenom "index”, a DW ce zatim traziti da se upise root sajta, tj. naziv sajta i jos neke podatke, npr. ostavite cekirano da sajt radite u lokalu, pa kada ga zavrsite ubacicete ga na server putem ftp-a, ili preko control panela sa racuna hostinga.
Da biste uradili druge stranice, onda otvorite folder gde je "index" stranica sejvovana i kopirajte "index" fajl u tom istom folderu, pri cemu ce automatski dobiti ime "Copy of index", te ovaj "copy of index" fajl koristite kao template za pravljenje svih ostalih stranica na sajtu, uz naravno, unosenje potrebnih izmena na njoj.
Kada odradite podesavanja i ubacivanje na server, ne zaboravite da adresu sajta prijavite kod google-a na www.google.com/addurl/ a nije lose da je prijavite i na jos 10-ak portala-direktorijuma.
Pri izradi sajtova jedan od uobičajenih problema je taj, što svaki brower ima različit način čitanja i otvaranja stranica, pa ukoliko sajt nije odrađen od strane profesionalca, neki browseri će vam pri prikazivanju stranice poremetiti strukturu sajta.
Sajt koji je uradjen po ovom tutorialu, FF, Opera, (i kako su mi rekli) IE7 i IE8 će ga čitati normalno, jedino će vam IE6-ica gurati sadržaj stranice ispod najnižeg linka iz navi bara. Zato tokom optimizacije stranica kodu "mainContent" kao poslednji red treba dodati sledeci red "width:31em;" i onda će ga i IE6-ica prikazivati ispravno.
Ovde sam u najkracim mogucim crtama opisao najneophodnije postupke za izradu sajta, i tokom tog opisa sigurno sam nesto zaboravio da napomenem. Za one koji znaju sve sto se moze znati o kreiranju sajtova, verovato sam bio nepotrebno opsiran, ali onima koji se prvi put srecu sa DW, to ce samo biti od koristi.
Primetio sam da postoji hronični nedostatak tutoriala prevedenih na srpski jezik, pa ću ovde postirati jedan tutorial za apsolutne početnike na osnovu koga je moguće uraditi pristojan sajt. Pri izradi nisam koristio tutoriale jer su mi zbog slabog znanja engleskog bili uglavnom nerazumljivi, već sam koristio sistem tipa "hm, ako pritisnem ovo šareno dugmence, da vidimo šta će da se desi" i prednost dreamweavera što je dosta intuintivno uradjen.
Za sve greške u tutorialu slobodno ostavite komentar i predlog kako da se isprave.
pozz
U DW sam otisao na File> New> Blank Page> HTML i izabrao “2 column elastic,left sidebar, heder and footer” pa zatim klik na “create” i u prozoru sam dobio template stranice. Zatim sam otisao na dno strance, klik na dugme “page properties” sto otvara prozor “appearance” gde sam podesio odgovarajuce parametre za stranicu – font, size, text color, background color ili background image. Da bih dobio gradient pozadinu, u polju "background image" ubacio sam .gif dimenzija 1px puta duzina stranice (ova duzina je naravno za svaku stranicu razlicita) i u polju ispod podesio “repeat”. Ukoliko posavljate gradient, onda obavezno u polju "background color" ubacite sifru forground boje, jer ukoliko se nalazi sifra neke druge boje, pri sporim vezama ce - dok ne ucita .gif gradienta, prikazivati nju, sto deluje dosta ruzno.
Kada se ovo odradi, onda ide klik na “links”, pa podesavanje boja linkova (link color, visited link, rollover links). Ukoliko se za linkovanje stranica koristi kucani tekst (ja sam koristio linkovanje stranica preko "rollover image"-a*), onda “underline style” treba podesiti na “Show underline only on rollover”. Ostala podesavanja nisam dirao.
* - ukoliko radite linkovanje stranica preko "rollover image" onda u "propertis"-u na dnu stranice u poljima "V space" i "H space" ukucati vredost 1, kako se rollover button-slicice ne bi dodirivale jedna s drugom.
Podesavanje boje za tekstualno polje, baner polje, left meni polje i footer polje odradjuje se kada se na radnoj povrsini stranice klikne sa jednim klikom na bilo koju ivicu odredjenog polja, sto ce na desnoj stranici radne povrsine otvoriti meni "css styles">"curent" i ispod ce prikazati sve atribute polja. Jedan od njih ce biti i "background", pa kliknite duplim klikom na njegovu vrednost, npr "#FFFFFF" i ubacite umesto nje novu sifru. Ukoliko i ovde hocete umesto boje da ubacite recimo sliku neke pozadine (paper, canvas i sl.), onda se na dnu atributa nalazi "Add property" sa "background-image" atributom, izmedju ostalih.
Sada sledi ubacivanje slika i teksta.
U “Insert” meniju klik na karticu “common” gde sam koristio funkcije “image” za ubacivanje banera (716x148px) i drugih slika na stranicu (pritom u polju “border” u “properties”-u na dnu radnog polja, obavezno ukucati nulu), “rollover image” za ubacivanje slika za linkove stranica u levom meniju (uradjenih u PS 180x30 px, 3 slike po linku, sejvovane kao.gif) umesto tekstualno kucanih linkova za stranice i “plug in” za ubacivanje mp3 fajlova (ovo treba izbegavati jer mnogo usporava ucitavanje sajta).
Ubacivanje teksta je potpuno isto kao i u Wordu.
Kada su slike i tekst ubaceni, sada ide optimizacija stranice (svake posebno) za pretrazivace, jer ako se to ne odradi, google ih uopste nece ni videti.
Znaci sada ide prebacivanje iz “design” u “code” mode (gornji levi ugao stranice) i ubacivanje tagova kako bi google mogao da zna sta se na stranici nalazi. Ovda cu prikazati jedan primer neophodnih tagova gde se prvih cetiri ubacuju izmedju <head> i </head>, a peti img tag, izmedju <body> i </body> tagova na stranici.
<head>
1.<title>Mobilni telefoni, racunari, oprema - Svet komunikacija</title>
2.<meta name="Description" content="Sirok izbor kvalitetnih mobilnih telefona, racunara i racunarske opreme" />
3.<meta name="Keywords" content="mobilni telefoni, racunari, laptop, desktop, monitori, racunarska oprema, komunikacije, wireless," />
4.<meta name="language" content="Serbian, Srpski," />
</head>
<body>
5.<img src="svetkomunikacija.jpg" alt="wireless-planeta" width="173" height="215" />
</body>
Ove kodove mozete pogledati za svaku stranicu bilo kog sajta (pa i ovog foruma) sa klikom na "view" > "page source" u vasem browseru.
Kada se sejvuje prva uradjena stranica, onda to treba da bude pocetna stranica sajta i uvek se sejvuje pod imenom "index”, a DW ce zatim traziti da se upise root sajta, tj. naziv sajta i jos neke podatke, npr. ostavite cekirano da sajt radite u lokalu, pa kada ga zavrsite ubacicete ga na server putem ftp-a, ili preko control panela sa racuna hostinga.
Da biste uradili druge stranice, onda otvorite folder gde je "index" stranica sejvovana i kopirajte "index" fajl u tom istom folderu, pri cemu ce automatski dobiti ime "Copy of index", te ovaj "copy of index" fajl koristite kao template za pravljenje svih ostalih stranica na sajtu, uz naravno, unosenje potrebnih izmena na njoj.
Kada odradite podesavanja i ubacivanje na server, ne zaboravite da adresu sajta prijavite kod google-a na www.google.com/addurl/ a nije lose da je prijavite i na jos 10-ak portala-direktorijuma.
Pri izradi sajtova jedan od uobičajenih problema je taj, što svaki brower ima različit način čitanja i otvaranja stranica, pa ukoliko sajt nije odrađen od strane profesionalca, neki browseri će vam pri prikazivanju stranice poremetiti strukturu sajta.
Sajt koji je uradjen po ovom tutorialu, FF, Opera, (i kako su mi rekli) IE7 i IE8 će ga čitati normalno, jedino će vam IE6-ica gurati sadržaj stranice ispod najnižeg linka iz navi bara. Zato tokom optimizacije stranica kodu "mainContent" kao poslednji red treba dodati sledeci red "width:31em;" i onda će ga i IE6-ica prikazivati ispravno.
Ovde sam u najkracim mogucim crtama opisao najneophodnije postupke za izradu sajta, i tokom tog opisa sigurno sam nesto zaboravio da napomenem. Za one koji znaju sve sto se moze znati o kreiranju sajtova, verovato sam bio nepotrebno opsiran, ali onima koji se prvi put srecu sa DW, to ce samo biti od koristi.
