moj prva web stranica_ css + html u 10 lekcija - baguje - ( 8 str. ).pdf

9.6.13. Moj prva web stranica: CSS + HTML u 10 lekcija - Baguje.COM

www.baguje.com/2012/08/moja-prva-web-stranica-css-html-u-10-lekcija-42196.html 1/8

5. Aug, 2012. u 17:12 3Share

Moja prva web stranica: CSS + HTML u 10 lekcija

radoslavak

Hoete da

napravite svoj prvi

web sajt, a ne

znate odakle da

krenete? Na

internetu ima

milioni tutorijala (najvie na engleskom), a mnogi od

njih su nerazumljivi poetniku, ali ba poetniku.

Spremila sam desetak lekcija za vas i znam da ete

biti ponosni na svoj prvi web sajt.

Za poetak treba vam program Adobe

Dreamweaver, a kada web sajt zavrite bie potreban

neki FTP (File Transfer Protokol), preporuujem

program Filezila. Za obradu fotografija za vae web

stranice moete koristiti Adobe Photoshop ili

besplatni Gimp.

Web sajt se pravi (izrauje, kodira) u Dw (skraenica za Dreamweaver).

File u Dw je *html ekstenzija (na primer: www.nekisajt.index.html).

Pamtite:

U dokumentu/fajlu html kodira se sadraj sajta, a izgled stranica se radi u CSS (Cascading Style

Sheet ).

Kada kaemo izgled stranice mislimo na raspored polja na stranici, boju teksta, boju slova i

uopte na stilove i formu izgleda stranice. Drugim reima, CSS-om odreujemo pravila i atribute

za izgled stranica.

Dobro. Instalirali ste Dw otvorili novi file ( File-New) i dobili novi prozor koji vam nudi razne varijante.

Izaberite kao na slici: HTML--HTML 5.



Slika 1.

Novodobijeni dokument moe da izgleda kao jedna od dve sledee slike, to zavisi od verzije Dw koju ste

instalirali na svom raunaru. Obratite panju na izgled-Split, gde vidite i deo za kodiranje i deo za dizajn:



Slika broj 2

Svaki poetnik u radu u oblasti web dizjna treba da zna da se kodiranje na html strani radi sa uglastim

zagradama, koje imaju svoj poetni i zavrni kod. Na primer: neki tekst .

Poetak koda u html fajlu su dve uglaste zagrade, a zavretak je sa kosom crticom

Pre nego to pristupimo kodiranju, jo da vidimo razliku izmeu html i css strukture:

Ovo je primer razlika u kodiranju kod html i css strukture stranice:



Primer strukture stranice koju emo mi napraviti:

Naa web stranica mora imati odreen root, tj. putanju kako bi je Dw uitavao. To znai da treba da

napravite folder, koji se moe zvati moj_web, a u njemu treba da napravite podfolder koji

imenujte slike. Vano: svim folderima i fajlovima dajte imena malim slovima, a ukoliko je ime od dve ili vie

rei, izmedju rei ne sme biti razmak ili interpunkcijskih znakova, moe samo donja crtica. Da vas ne davim

zato, tako mora.



Sada u Dw kliknite u meniju na re Site New Site - upiite ime sajta, a zatim izaberite svoj glavni folder

(Local root folder), kao na slici i select:

U Dw u panelu na kartici File (broj 1 na sledeoj slici) bie prikazan root:



Slika broj 3

Konano moete da napiete i svoj prvi probni tekst: postavite kursor mia u polje Design view ( slika

broj 2) i napiite neto, na primer:

Ovo piem u polju za dizaj. Pritisnite dugme enter na tastaturi, upiite drugu reenicu. Primetite da Dw sam

ispisuje kodove u polju Code view, kod za paragraf je i upisan je odmah i zavrni kod . Ba lepo.

Dw e vam uglavnom mnogo pomagati u pisanju tih uglastih zagrada i kodova, pametan, sve zna ta

elite.

Ukoliko tekst piete u polju Code view, prilikom otvaranja leve uglaste zagrade, Dw e sam ponuditi listu

moguih kodova, kao na sledeoj slici:

Primetite da tekst piemo u okviru koda , dakle izmeu poetnog i zavrnog .



Ako ste se raspisali i napisali vie teksta, pogledajte kako bi to izgledalo stvarno u web browser-u, internet

pregledau, pritisnite funkcijsko dugme F12. Najpre e vas Dw pitati da sauvate promene na ovom

novom dokumentu, dajte ime fajlu index i sauvajte u svoj folder moj_web.

I konano da kreiramo i svoj prvi CSS dokument, da bismo naem sajtu dali stil, boje i ivot.

Idite u meniju na File-New- i birajte CSS, pogledajte Sliku 1. Taj file odmah sauvajte u svom

folderumoj_web, dajte mu ime style (nastavak .css e sam Dw dati, bez brige, nemojte da upisujete taj

nastavak).

Sada pogledajte na slici 3. onaj crveni krug sa brojem 2, kojim sam uokvirila panel CSS Styles. Na dnu tog

panela postoji oznaka za link, karika. Kliknite na nju i dobiete sledei prikaz:

Sada klik na Browse i nadjite i izaberite svoj file style.css, zatim klik na ok.

Primetite da Dw sada imate dve kartice, jedna je index.html, a druga je style.css. Stalno ete etati od

jedne na s+drugu. Od sledeeg asa radimo stil vae web stranice.



Da osetite magiju CSS fajla, otvorite ga i napiite svoj prvi stil kojim ete odrediti boju stranice:

body {background:#B6DCD8; }

Kada ste upisali otvorenu veliku zagradu, primetite da Dw nudi spisak opcija. Izaberite Background i

pritisnite dugme Enter, zatim Color i zaberite neku boju za svoju stranicu. Vano: posle upisanog koda za

boju, obavezno upiite taka zarez ( ; ) i zatvorite veliku zagradu. Sada sauvajte promenu u fajlu css

(Save) , vratite se na karticu index.html , vaa stranica ima boju. Sada na F12 i da vidite kako bi to bilo kad

bi bilo na internetu :)

Ovo je bio samo poetak. ini mi se da svakom poetniku ovo sve moe izgledati mnogo teko, pa da vas

obradujem, sve dalje je mnogo, mnogo lake!

Najvanije: naoruajte se strpljenjem. Ako ga nemate, dignite ruke od izrade web sajta.

Ako ste uporni i strpljivi, saekajte koji dan za drugu lekciju.

moj prva web stranica_ css + html u 10 lekcija - baguje - ( 8 str. ).pdf

Documents