Transcript Slide 1
Dizajniranje web stranica i web mjesta Magdić Manuel Maričić Milan Markovac Nikola Internet - što je to zapravo? zbirka svih mreža koja povezuje nekoliko milijuna računala na svijetu najpoznatija usluga je razmjena elektroničke pošte ( e- mail) da bismo pristupili Internetu moramo imati instaliranu programsku podršku, a to je pretraživač (browser) najčešće korišteni pretraživači su Microsoft Internet Explorer i Netscape Navigator Statička komponenta: Dinamička komponenta: • dizajn vizualnog sučelja • logički i fizički dizajn • organizacija Web-a • priprema slika • priprema teksta • model podataka • model procesora • oblikovanje podataka HTML-Hypertext Markup Language Prednosti HTML-a: - stvaranje hiperveza između dokumenata - HTML jezik je tekstualan a sva računala raspoznaju tekst i lako njime barataju. HTML je jezik kojim se formira izrada web stranica. Jezik HTML je tekstualan. Kodovi HTML jezika su zapravo riječi koje je moguće kombinirati na različite načine. Izrada stranica • Početak rada • Doctype • Podjela • Umetanje naslova • Html dokumenata na tijelo i glavu • Umetanje hiperveza • Umetanje slika • Odabir pozadine • Naslov dokumenta • Odabir slova –fonta • Odabir boja • Postavljanje stranice na server Početak rada Potreban je određeni alat koji može biti HTML editor i neki grafički program za obradu slika. Editore za unos dijelimo na 2 kategorije: editori koji se temelje na unosu slika editori koji se temelje na vizualnom dizajnu stranice. Doctype Uloga ovoga elementa je najaviti Internet pretraživaču kakav dokument slijedi. Svaki dokument moguće je opisati pomoću definicije tipa dokumenta koja se poziva pomoću identifikatora, kao na primjer –/W3C/DTD HTML 4.0 Transitional/En. HTML HTML element sadrži kompletan dokument. To je element svih elemenata te je cijeli sadržaj www smješten unutar tog elementa. Podjela dokumenata na tijelo i glavu Glava je dio dokumenta u kojem se navode neke općenite informacije o dokumentu kao što su : naslov dokumenta jezik u kojem je pisan dokument Tijelo dokumenta je dio koji objedinjuje kompletan sadržaj dokumenta: Cjelokupni tekst grafiku Naslov dokumenta • Svaki HTML dokument ima određeni naslov. • Naslov se navodi unutar title elementa. • Važno je promijeniti naslov iz predloška, jer inače stranice s pomoćnim tekstom kao naslovom budu postavljene ne www poslužitelj što može biti sramota za onoga koji radi stranice. Odabir pozadine-backgraund • Svaka stranica mora imati pozadinu, za što se koristi samo boja ili neka slika. • Slika ne smije biti velika i ne smije se očitavati dugo. • Primjer koda za background: BODY BACKGROUND = slike / oldpaper. Gif- primjer koda kada koristimo sliku. Odabir boja • Postoje dva načina za prikaz boja: 1. Prema njenom imenu; Black,Silver, White 2. Zadavanje boja pomoću 3 komponente RGB vrijednosti odnosno udjela crvene, plave i zelene. Odabir slova - fonta • Najčešći fontovi su Times New Roman, Arial i Verdana, ali nikako egzotični fontovi jer ih stariji pretraživači neće moći očitati. Umetanje naslova • Važno je istaknuti pojedine naslove dokumenta kao naslove, to se radi pomoću elemenata za logičko formatiranje h1, h2, h3, h4, h5, h6. • Ti elementi uvijek imaju početnu i završnu oznaku. • Vrsta slova kojom se pojedini naslovi prikazuju nisu propisana standardom već ovise o svakom pojedinačnom pretraživaču. Umetanje slika • Važno je voditi računa o kvaliteti i veličini slike. • Postoje dva osnovna formata za umetanje slika, a oni su: - gif format koji se koristi za prikaz animacija i grafičkih detalja - jpg format koji se koristi za prikaz fotografija. Osnovni kod za umetanje slika: < img src = vašaslika.gif> Umetanje hiperveza • Hiperveza se postavlja URL adrese objekta na koji se hiperveza pokazuje. • Hiperveze se koriste za povezivanje stranica unutar jedne stranice, za povezivanje unutar grupe stranica i sa sasvim drugim stranicama na drugim računalima. • Svi www resursi moraju imati svoju adresu na Internetu kako bi ih se moglo identificirati i pozvati. Postavljanje stranice na server •Najjednostavniji ali i najsporiji način je pomoću file managera. •Yahoo!GeoCities omogućuje upravo to i za početnika je najjednostavniji način. •Od domaćih to je Plus.hr koji omogućuje upload pomoću file managera. •Napredniji način je pomoću FTP klijenta za što ima dosta besplatnih programa. •Najčešći i hvaljeni je CuteFTP a nalazi se na instalacijskim CD-ima HT net-a i Vip-a. Literatura: Internet stranice: http://www.ka-net.net/uputstvo/uputa.html http://student.foi.hr/nastava/informatika/program/materijali_vjez be/internet/Lec_4_oblikovaj.htm http://web-company.info/blog/optimizacija/naturalnost-tekstovaprilikom-izrade-stranica.php http://web-company.info/optimizacija/onpage-optimizacija-jepreduslov-za-offpage-optimizaciju.php http://web-company.info/blog/optimizacija/optimizacija-webstranica-je-investicija.php