Internet ja veebilahendused ANU KURMI ARVUTIKLASS Täiskasvanute koolitusasutus www.arvutiklass.ee www.arvutiklass.ee
Veebilehtede loomise põhimõtted www.arvutiklass.ee
Veebilehe komponendid <ul><li>Valmis veebileht võib koosneda mitmetest erinevatest komponentidest: </li></ul><ul><ul><li>H...
Veebilehtede loomise põhimõtted  <ul><li>Enne veebilehe tegemist tuleb leida vastused järgnevatele küsimustele: </li></ul>...
Veebilehe planeerimine www.arvutiklass.ee Graafiline kujundamine Informatsiooni  arhitektuur Tüpograafia Tarbijauuring Ana...
Veebilehe struktuur <ul><li>Info organiseerimiseks veebilehel </li></ul><ul><li>tuleb esmalt koostada veebilehe struktuur,...
Veebilehe struktuur <ul><li>HIERARHILINE PAIGUTUS </li></ul><ul><li>http://www.sapdesignguild.org/community/design/hierarc...
Veebilehe failistruktuur <ul><li>Kohe alguses on oluline teha plaan ka failistruktuurist: </li></ul><ul><li>Pealehe fail p...
Veebilehe tiitelleht <ul><li>Tiitellehe soovitatav suurus on kuni 65 KB (100 KB), kuna sellisel juhul laetakse avaleht kii...
Lingid <ul><li>Kasutajal peab alati võimalus olema linkide kaudu tagasi pöörduda pealehele ja liikuda erinevate teemalehte...
Info paigutus veebilehel <ul><li>Veebilehel on nähtav tavaliselt ainult väike osa kogus informatsioonist. Järelikult on va...
Veebilehe avalikustamine <ul><li>K ui veebileht on valmis ja kontrollitud,   võib selle avalikustada.  Selleks: </li></ul>...
Veebilehe tegemise vahendid www.arvutiklass.ee
Klient-server lahenduse mudel   <ul><li>V eebi info süsteemid on üles ehitatud kindla </li></ul><ul><li>arhitektuuri järgi...
Klient-server lahenduse mudel <ul><li>Veeb oli algselt lihtne staatiliste linkide süsteem </li></ul><ul><li>Esimesteks inf...
Veebiserverid <ul><li>Veebiserver on selline programm, mis võimaldab arvutis leiduvaid teatud faile näidata  kasutaja  bra...
Veebi programmeerimiskeeled <ul><ul><li>HTML  (Hyper Markup Language) </li></ul></ul><ul><ul><li>DHTML  (Dynamic Hypertext...
HTML  ( Hyper Text Markup Language ) <ul><li>HTML e hüpperteksti märkimiskeel, on </li></ul><ul><li>p eamine   WWW lehekül...
HTML <ul><li>HTML on kasutuses World Wide Web (WWW) võrgus alates 1990. aastast </li></ul><ul><li>Esialgne HTML võimaldas ...
HTML <ul><li>Versioon 2.0  aastast 1994 oli esimene laialdaselt heakskiidetud standard, mis võimaldas lisaks eelnevale kas...
HTML <ul><li>Versioon 4.0/4.01  aastast 1998 - viimane klassikalise HTMLi versioonidest </li></ul><ul><li>Olulise muudatus...
XHTML (Extensible Hypertext Markup Language)  <ul><li>HTMLi ja XMLi &quot;kokkusulatamisel&quot; 2001. aastal saadi XHTML,...
CSS  ( Cascade Style Sheet  ) <ul><li>CSS on üks tähtsaid   komponente  veebilehe kujundamisel . </li></ul><ul><li>Samuti ...
CSS <ul><li>CSS laseb teksti ja pilte paigutada suurema </li></ul><ul><li>täpsusega kui lihtsalt HTML. Samuti laseb ta </l...
J ava S cript <ul><li>JAVASCRIPT on lihtne </li></ul><ul><li>programmerimiskeel, mille on välja </li></ul><ul><li>arendanu...
PHP <ul><li>PHP sai alguse juba 1994 aastal. </li></ul><ul><li>Rasmus Ledorf kasutas varaseid  </li></ul><ul><li>avaldamat...
W3C (World Wide Web Consortium)  <ul><li>Rahvusvaheline Interneti ja veebiga tegelevate firmade konsortsium </li></ul><ul>...
HTML validaator <ul><li>HTML validaator võimaldab kontrollida HTML-keelse dokumendi korrektsust, lähtudes hetkel kehtivast...
Ülevaade veebilehtede loomiseks mõeldud programmidest www.arvutiklass.ee
Tekstiredaktorid ja HTML toimetajad <ul><li>HTML kirjutamiseks on loodud mitmeid erinevaid programme. Kõige elementaarsem ...
Macromedia Dreamweaver <ul><li>Peetakse heaks laiatarbeprogrammiks, </li></ul><ul><li>millega kodulehekülgi koostada. Häid...
Macromedia Flasch <ul><li>Interaktiivne vektorgraafika ja veebianimatsioonide tegemise programm. Veebidisainerid kasutavad...
Frontpage <ul><li>Programm on veebilehekülgede </li></ul><ul><li>tegemisel küllalt laialt kasutusel. </li></ul><ul><li>Pro...
Veebilehe loomise tarkvarad <ul><li>Veel võiks nimetada selliseid tuntumaid programme nagu MS Office paketis MS Publischer...
Veebilehe sisuhaldustarkvarad <ul><li>Näiteks sisuhaldustarkvarad:  </li></ul><ul><li>Mambo </li></ul><ul><li>Typo3 </li><...
Kasutatud allikad <ul><li>http://et.wikibooks.org/wiki/HTML:Ajalugu   </li></ul><ul><li>http://www.w3.org/   </li></ul><ul...
Upcoming SlideShare
Loading in …5
×

Veebidisain

1,347 views

Published on

Arvutiõpetus. Veebilehed. HTML, kujundamine.
Autor: Anu Kurm
ANU KURMI ARVUTIKLASS
www. arvutiklass.ee

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,347
On SlideShare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
9
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Veebidisain

  1. 1. Internet ja veebilahendused ANU KURMI ARVUTIKLASS Täiskasvanute koolitusasutus www.arvutiklass.ee www.arvutiklass.ee
  2. 2. Veebilehtede loomise põhimõtted www.arvutiklass.ee
  3. 3. Veebilehe komponendid <ul><li>Valmis veebileht võib koosneda mitmetest erinevatest komponentidest: </li></ul><ul><ul><li>HTML </li></ul></ul><ul><ul><li>CSS </li></ul></ul><ul><ul><li>programmeerimiskeeles kirjutatud scriptid </li></ul></ul><ul><ul><li>andmebaas </li></ul></ul><ul><ul><li>graafika- ja helifailid </li></ul></ul>www.arvutiklass.ee
  4. 4. Veebilehtede loomise põhimõtted <ul><li>Enne veebilehe tegemist tuleb leida vastused järgnevatele küsimustele: </li></ul><ul><li>Mis on selle veebilehe eesmärk? </li></ul><ul><li>Kes on sihtgrupp? </li></ul><ul><li>Millist informatsiooni tahate edastada? </li></ul><ul><li>Kuidas kavatsete informatsiooni lehel organiseerida? </li></ul><ul><li>Millega te esilehel äratate kasutaja tähelepanu? </li></ul>www.arvutiklass.ee
  5. 5. Veebilehe planeerimine www.arvutiklass.ee Graafiline kujundamine Informatsiooni arhitektuur Tüpograafia Tarbijauuring Analüüs Toote kasutamine Informatsiooni kujundamine Kasutajaliidese kujundamine Strateegia ja planeerimine Kognitiivne psühholoogia Animatsioon Interaktiivne kujundamine
  6. 6. Veebilehe struktuur <ul><li>Info organiseerimiseks veebilehel </li></ul><ul><li>tuleb esmalt koostada veebilehe struktuur, kus on üldjoontes ära näidatud: </li></ul><ul><li>Lehtede paigutus </li></ul><ul><li>Linkide paiknemine </li></ul><ul><li>Tekstide kasutus </li></ul><ul><li>Piltide kasutus </li></ul>www.arvutiklass.ee
  7. 7. Veebilehe struktuur <ul><li>HIERARHILINE PAIGUTUS </li></ul><ul><li>http://www.sapdesignguild.org/community/design/hierarchies_categories_vectors.asp </li></ul>www.arvutiklass.ee
  8. 8. Veebilehe failistruktuur <ul><li>Kohe alguses on oluline teha plaan ka failistruktuurist: </li></ul><ul><li>Pealehe fail peab üldjuhul olema nimega index </li></ul><ul><li>Ülejäänud failidele võib valida vabalt nimetused, kuid mitte kasutada täpitähti ja tühikuid. Failide laiendeid võib olla erinevaid: htm, html, php jne. </li></ul><ul><li>Pildifailid organiseerida soovitavalt eraldi kausta </li></ul><ul><li>Failinimed peaksid olema võimalikult lühikesed ja viitama nende sisule </li></ul>www.arvutiklass.ee
  9. 9. Veebilehe tiitelleht <ul><li>Tiitellehe soovitatav suurus on kuni 65 KB (100 KB), kuna sellisel juhul laetakse avaleht kiiresti kasutaja arvutisse. Kasutaja ei ole tavaliselt nõus ootama üle 10 sekundi ja siirdub mõnele teisele lehele </li></ul><ul><li>Mitte üle koormata suuremahuliste piltidega. </li></ul>www.arvutiklass.ee
  10. 10. Lingid <ul><li>Kasutajal peab alati võimalus olema linkide kaudu tagasi pöörduda pealehele ja liikuda erinevate teemalehtede vahel </li></ul><ul><li>Vajalik on, et lingid igal lehel oleksid ühesuguse välimusega , et k asutajal ole ks kerge orienteeruda </li></ul><ul><li>Lingid võite teha tekstiga või kasutada graafikat </li></ul>www.arvutiklass.ee
  11. 11. Info paigutus veebilehel <ul><li>Veebilehel on nähtav tavaliselt ainult väike osa kogus informatsioonist. Järelikult on vajalik, et oluline info on nähtav kohe lehe avanemisel, mitte kerimisel </li></ul><ul><li>Mida vähem kasutaja peab kerimisribasid kasutama seda parem </li></ul>www.arvutiklass.ee
  12. 12. Veebilehe avalikustamine <ul><li>K ui veebileht on valmis ja kontrollitud, võib selle avalikustada. Selleks: </li></ul><ul><li>tuleb veebileht üles saata - v eebilehe failid kopeeritakse eelnevalt välja valitud veebiserverisse </li></ul><ul><li>tuleb v eebileht registreeri da kataloogides ja otsingusüsteemides </li></ul><ul><li>m uude reklaamikanalite kõrval saab kasutada veebireklaami. Võib osta bannereid portaalides jm suure külastatavusega veebilehtedes. Bannerile klikates jõuab vaataja siis otse teie veebilehele </li></ul>www.arvutiklass.ee
  13. 13. Veebilehe tegemise vahendid www.arvutiklass.ee
  14. 14. Klient-server lahenduse mudel <ul><li>V eebi info süsteemid on üles ehitatud kindla </li></ul><ul><li>arhitektuuri järgi . </li></ul><ul><li>K uskil asub mingi andmebaas, milles olevaid </li></ul><ul><li>andmeid saab veebis näha ja vajadusel ka </li></ul><ul><li>veebi kaudu muuta. </li></ul><ul><li>Mis on selle kõige taga? </li></ul><ul><li>Milliseid vahendeid selleks kõigeks on vaja? </li></ul><ul><li>Milliseid tarkvaralisi vahendeid selleks kasutada ? </li></ul>www.arvutiklass.ee
  15. 15. Klient-server lahenduse mudel <ul><li>Veeb oli algselt lihtne staatiliste linkide süsteem </li></ul><ul><li>Esimesteks infosüsteemideks veebis võib pidada otsingumo o toreid, mis hakkasid koguma andmeid kogu selle linkide süsteemi kohta </li></ul><ul><li>Seejärel ilmusid juba erinevate andmebaaside veebiliidesed, kus veeb oli üheks paljudest väljunditest </li></ul><ul><li>Tänapäeval on aga praktiliselt iga infosüsteemi võimalik luua veebipõhisena </li></ul>www.arvutiklass.ee
  16. 16. Veebiserverid <ul><li>Veebiserver on selline programm, mis võimaldab arvutis leiduvaid teatud faile näidata kasutaja brauserisse, kui brauser neid küsib </li></ul><ul><li>Nagu nimi ütleb on veebiserver server, brauseri kohta võib öelda klient </li></ul>www.arvutiklass.ee
  17. 17. Veebi programmeerimiskeeled <ul><ul><li>HTML (Hyper Markup Language) </li></ul></ul><ul><ul><li>DHTML (Dynamic Hypertext Markup Language) </li></ul></ul><ul><ul><li>SGML (Standard Generalized Markup Language) </li></ul></ul><ul><ul><li>XFRML (Extensible Financial Reporting Markup Language) </li></ul></ul><ul><ul><li>J avaScript </li></ul></ul><ul><ul><li>VB S cript </li></ul></ul><ul><ul><li>CGI (The Common Gateway Interface) </li></ul></ul><ul><ul><li>ASP (Active Server Pages) </li></ul></ul><ul><ul><li>PHP ( Hypertext PreProcessor) </li></ul></ul><ul><ul><li>PERL (Practical Extracting and Report Language) </li></ul></ul><ul><ul><li>ActiveX </li></ul></ul><ul><ul><li>jne </li></ul></ul>www.arvutiklass.ee
  18. 18. HTML ( Hyper Text Markup Language ) <ul><li>HTML e hüpperteksti märkimiskeel, on </li></ul><ul><li>p eamine WWW lehekülgede tegemiseks </li></ul><ul><li>k asutatav sümbolite süsteem. </li></ul><ul><li>H TML ei ole sisuliselt </li></ul><ul><li>programmeerimiskeel ning WWW </li></ul><ul><li>l ehekülje tegemine ei eelda mingit </li></ul><ul><li>p rogrammeerimisoskust . </li></ul>www.arvutiklass.ee
  19. 19. HTML <ul><li>HTML on kasutuses World Wide Web (WWW) võrgus alates 1990. aastast </li></ul><ul><li>Esialgne HTML võimaldas kasutada lihtsaid tekstivorminguid (lõik, reavahetus, nimistud), linke ja lihtsat graafikat. HTML versiooni 1.0 ametlikult ei eksisteeri, kuna alguses kasutasid erinevad grupid erinevaid tõlgendusi. </li></ul>www.arvutiklass.ee
  20. 20. HTML <ul><li>Versioon 2.0 aastast 1994 oli esimene laialdaselt heakskiidetud standard, mis võimaldas lisaks eelnevale kasutada ka sisestusvorme </li></ul><ul><li>Versioon 3.2 aastast 1996 - järgmine suurem standard (aasta varem ilmunud 3.0 jagas HTML+ saatust - palju uuendusi põhjustas lahkarvamusi ja standard ei leidnudki lõplikku heakskiitu), mis tõi laia kasutusse raamidega ( frame ) lehed, samuti tabelid ning HTMLi-väliste vahenditega loodud valmisprogrammid ( applet ) </li></ul>www.arvutiklass.ee
  21. 21. HTML <ul><li>Versioon 4.0/4.01 aastast 1998 - viimane klassikalise HTMLi versioonidest </li></ul><ul><li>Olulise muudatusena viidi kogu esituskuju määramisega tegelev osa (kirjastiilid, värvid jne) märgenditest välja (neid saab kasutada, kuid see on ebasoovitav) - stiililehed leidsid oma koha põhistandardis </li></ul><ul><li>Ka laiendati väliste objektide (eri programmeerimiskeeltes loodud skriptid jms) lisamise mehhanismi </li></ul>www.arvutiklass.ee
  22. 22. XHTML (Extensible Hypertext Markup Language) <ul><li>HTMLi ja XMLi &quot;kokkusulatamisel&quot; 2001. aastal saadi XHTML, mis hetkel on W3C ametlikuks soovituseks. </li></ul><ul><li>XHTMLi eripäraks varasemate versioonidega võrreldes on suurem rangus - kõik märgendid on paaris, nõutav on väiketähtede kasutamine märgendites (XML on tõstutundlik) jne. Põhimõtteks on saavutada ühilduvus XMLiga, samal ajal täites ka HTML 4.01 nõudeid </li></ul>www.arvutiklass.ee
  23. 23. CSS ( Cascade Style Sheet ) <ul><li>CSS on üks tähtsaid komponente veebilehe kujundamisel . </li></ul><ul><li>Samuti on CSS hea lahendus lihtsalt </li></ul><ul><li>l ehekülgede korraldamiseks, kokku </li></ul><ul><li>panemiseks. </li></ul><ul><li>Tegemist on lihtsa asjaga, mida on lihtne </li></ul><ul><li>kirjutada ja ka aru saada. </li></ul>www.arvutiklass.ee
  24. 24. CSS <ul><li>CSS laseb teksti ja pilte paigutada suurema </li></ul><ul><li>täpsusega kui lihtsalt HTML. Samuti laseb ta </li></ul><ul><li>kergemini muuta teksti atribuute nagu </li></ul><ul><li>suurus, värv jms </li></ul>www.arvutiklass.ee
  25. 25. J ava S cript <ul><li>JAVASCRIPT on lihtne </li></ul><ul><li>programmerimiskeel, mille on välja </li></ul><ul><li>arendanud Netscape 1995 aastal. Java </li></ul><ul><li>Script on mugav vahend tõstmaks WWW </li></ul><ul><li>lehekülgede interaktiivsust. Kasutatakse </li></ul><ul><li>palju. </li></ul>www.arvutiklass.ee
  26. 26. PHP <ul><li>PHP sai alguse juba 1994 aastal. </li></ul><ul><li>Rasmus Ledorf kasutas varaseid </li></ul><ul><li>avaldamata versioone oma kodulehel </li></ul><ul><li>selleks, et teada, kes vaatas tema CV-d, </li></ul><ul><li>mis veebis kättesaadav oli. Esimene </li></ul><ul><li>avalikustatud versioon oli saadaval </li></ul><ul><li>1995 aastal. </li></ul>www.arvutiklass.ee
  27. 27. W3C (World Wide Web Consortium) <ul><li>Rahvusvaheline Interneti ja veebiga tegelevate firmade konsortsium </li></ul><ul><li>Asutati 1994. a Tim Berners-Lee poolt, kes oli WWW esimene arhitekt </li></ul><ul><li>Eesmärgiks on välja töötada avatud standardeid, nii et veeb areneks kindlas suunas ja ei laguneks omavahel konkureerivateks osadeks </li></ul><ul><li>http://www.w3.org/ </li></ul>www.arvutiklass.ee
  28. 28. HTML validaator <ul><li>HTML validaator võimaldab kontrollida HTML-keelse dokumendi korrektsust, lähtudes hetkel kehtivast soovitatavast standardist. </li></ul><ul><li>http://validator.w3.org/ </li></ul>www.arvutiklass.ee
  29. 29. Ülevaade veebilehtede loomiseks mõeldud programmidest www.arvutiklass.ee
  30. 30. Tekstiredaktorid ja HTML toimetajad <ul><li>HTML kirjutamiseks on loodud mitmeid erinevaid programme. Kõige elementaarsem neist on Notepade - tavaline tekstitöötlusprogramm, mis on kohe kaasas Windows-iga. </li></ul><ul><li>Erinevaid HTML toimetajaid on võimalik alla laadida aadressil http://www.tucows.com/ </li></ul>www.arvutiklass.ee
  31. 31. Macromedia Dreamweaver <ul><li>Peetakse heaks laiatarbeprogrammiks, </li></ul><ul><li>millega kodulehekülgi koostada. Häid </li></ul><ul><li>teadmisi HTML-ist ei ole vaja. </li></ul><ul><li>Programmile on lisatud ka teatud </li></ul><ul><li>lisafunktsioon, mis kontrollib lehekülje </li></ul><ul><li>kokkusobivust eri Interneti brauseritega. </li></ul>www.arvutiklass.ee
  32. 32. Macromedia Flasch <ul><li>Interaktiivne vektorgraafika ja veebianimatsioonide tegemise programm. Veebidisainerid kasutavad seda, et luua ilusaid ja uudseid navigatsioonisüsteeme, tehnilisi illustratsioone, pikki animatsioone ja teisi efekte oma leheküljele. </li></ul>www.arvutiklass.ee
  33. 33. Frontpage <ul><li>Programm on veebilehekülgede </li></ul><ul><li>tegemisel küllalt laialt kasutusel. </li></ul><ul><li>Programmi uuemad versioonid on </li></ul><ul><li>tasulised. </li></ul><ul><li>Frontpage programmi kohta saab </li></ul><ul><li>informatsiooni URL aadressilt </li></ul><ul><li>http://www.microsoft.com/eesti/businessportal/products/howto/buildwebsitefrontpage.mspx </li></ul>www.arvutiklass.ee
  34. 34. Veebilehe loomise tarkvarad <ul><li>Veel võiks nimetada selliseid tuntumaid programme nagu MS Office paketis MS Publischer, StarOffice, HTML-Kit jne </li></ul>www.arvutiklass.ee
  35. 35. Veebilehe sisuhaldustarkvarad <ul><li>Näiteks sisuhaldustarkvarad: </li></ul><ul><li>Mambo </li></ul><ul><li>Typo3 </li></ul><ul><li>Joomla </li></ul>www.arvutiklass.ee
  36. 36. Kasutatud allikad <ul><li>http://et.wikibooks.org/wiki/HTML:Ajalugu </li></ul><ul><li>http://www.w3.org/ </li></ul><ul><li>http://www.vallaste.ee/ </li></ul>www.arvutiklass.ee

×