Hoćete da napravite svoj prvi web sajt, a ne znate odakle da krenete? Na internetu ima milioni tutorijala (najviše na engleskom), a mnogi od njih su nerazumljivi početniku, ali baš početniku.
Spremila sam desetak lekcija za vas i znam da ćete biti ponosni na svoj prvi web sajt.
Za početak treba vam program Adobe Dreamweaver, a kada web sajt završite biće potreban neki FTP (File Transfer Protokol), preporučujem program Filezila. Za obradu fotografija za vaše web stranice možete koristiti Adobe Photoshop ili besplatni Gimp.
Web sajt se pravi (izrađuje, kodira) u Dw (skraćenica za Dreamweaver).
File u Dw je *html ekstenzija (na primer: www.nekisajt.index.html).
Pamtite:
U dokumentu/fajlu html kodira se sadržaj sajta, a izgled stranica se radi u CSS (Cascading Style Sheet ).
Kada kažemo izgled stranice mislimo na raspored polja na stranici, boju teksta, boju slova i uopšte na stilove i formu izgleda stranice. Drugim rečima, CSS-om određujemo 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-<none>-HTML 5.
Slika 1.
Novodobijeni dokument može da izgleda kao jedna od dve sledeće slike, što zavisi od verzije Dw koju ste instalirali na svom računaru. Obratite pažnju na izgled-Split, gde vidite i deo za kodiranje i deo za dizajn:
Slika broj 2
Svaki početnik u radu u oblasti web dizjna treba da zna da se kodiranje na html strani radi sa uglastim zagradama, koje imaju svoj početni i završni kod. Na primer: <body> neki tekst </body>.
Početak koda u html fajlu su dve uglaste zagrade, a završetak je sa kosom crticom </>
Pre nego što pristupimo kodiranju, još da vidimo razliku između html i css strukture:
Ovo je primer razlika u kodiranju kod html i css strukture stranice:
Primer strukture stranice koju ćemo mi napraviti:
Naša web stranica mora imati određen root, tj. putanju kako bi je Dw učitavao. To znači da treba da napravite folder, koji se može zvati moj_web, a u njemu treba da napravite podfolder koji imenujte slike. Važno: svim folderima i fajlovima dajte imena malim slovima, a ukoliko je ime od dve ili više reči, izmedju reči ne sme biti razmak ili interpunkcijskih znakova, može samo donja crtica. Da vas ne davim zašto, tako mora.
Sada u Dw kliknite u meniju na reč Site – New Site – upišite 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 sledećoj slici) biće prikazan root:
Slika broj 3
Konačno možete da napišete i svoj prvi probni tekst: postavite kursor miša u polje Design view ( slika broj 2) i napišite nešto, na primer:
Ovo pišem u polju za dizaj. Pritisnite dugme enter na tastaturi, upišite drugu rečenicu. Primetite da Dw sam ispisuje kodove u polju Code view, kod za paragraf je <p> i upisan je odmah i završni kod </p>. Baš lepo. Dw će vam uglavnom mnogo pomagati u pisanju tih uglastih zagrada i kodova, pametan, sve zna šta želite.
Ukoliko tekst pišete u polju Code view, prilikom otvaranja leve uglaste zagrade, Dw će sam ponuditi listu mogućih kodova, kao na sledećoj slici:
Primetite da tekst pišemo u okviru koda <body>, dakle između početnog <body> i završnog </body>.
Ako ste se raspisali i napisali više teksta, pogledajte kako bi to izgledalo stvarno u web browser-u, internet pregledaču, pritisnite funkcijsko dugme F12. Najpre će vas Dw pitati da sačuvate promene na ovom novom dokumentu, dajte ime fajlu index i sačuvajte u svoj folder moj_web.
I konačno da kreiramo i svoj prvi CSS dokument, da bismo našem sajtu dali stil, boje i život.
Idite u meniju na File-New- i birajte CSS, pogledajte Sliku 1. Taj file odmah sačuvajte u svom folderu moj_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 dobićete sledeći 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 sledećeg časa radimo stil vaše web stranice.
Da osetite magiju CSS fajla, otvorite ga i napišite 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. Važno: posle upisanog koda za boju, obavezno upišite tačka – zarez ( ; ) i zatvorite veliku zagradu. Sada sačuvajte promenu u fajlu css (Save) , vratite se na karticu index.html , vaša stranica ima boju. Sada na F12 i da vidite kako bi to bilo kad bi bilo na internetu 🙂
Ovo je bio samo početak. Čini mi se da svakom početniku ovo sve može izgledati mnogo teško, pa da vas obradujem, sve dalje je mnogo, mnogo lakše!
Najvažnije: naoružajte se strpljenjem. Ako ga nemate, dignite ruke od izrade web sajta.
Ako ste uporni i strpljivi, sačekajte koji dan za drugu lekciju.
U međuvremenu pogledajte čime se ja bavim 🙂