VEEBIDISAIN (0)

VEEBIDISAIN
Mis on üldse veebidisain?
on pisidetailideni läbimõeldud Teie kodulehe välisvaade. 
See pole ainult ilus vormistus, vaid ka funktsionaalsus.
 
VEEBIDISAINI ESIMENE PÕLVKOND 
(1991-1994)
Veebilehed olid staatilised, kujunduselt lihtsad, sisaldasid pealkirju ja 
tekstilõike
Blogid
Turvalisus ja  privaatsus  olid suureks probleemiks
Veebilehtede  loomine käis sõna  otseses  mõttes 
käsitsi arvutitele arusaadavat HTML koodi kirjutades, 
veebilehitsejaid oli aga mitmeid erinevaid ning 
puudusid koodistandardid, mis tagaksid veebilehtede 
ühtse väljanägemise kõikjal.
Microsofti  esimene  koduleht
Click to edit Master text styles
Second level
●
Third level
●
Fourth  level
●
Fifth level
VEEBIDISAINI TEINE PÕLVKOND 
Veebilehed hakkasid enam keskenduma sisule ja 
külastajatele 
Mitmekülgsemaks muutus ka  disain . 
Veebilehtede loomine oli samuti lihtsam
Teise põlvkonna Microsofti veebilehe näide
Click to edit Master text styles
Second level
●
Third level
●
Fourth level
●
Fifth level
VEEBIDISAINI KOLMAS 
PÕLVKOND
Veebilehtede kujundus ja struktuur sõltus lehe 
eesmärgist.
Aina olulisemaks muutus  navigatsioon .
Kolmanda põlvkonna Microsofti leht
Click to edit Master text styles
Second level
●
Third level
●
Fourth level
●
Fifth level
VEEBIDISAINI NELJAS 
PÕLVKOND
Sel e põlvkonna kujundus on tõepoolest interakti vne 
– olulise sisuna on veebi li kunud videod.
Oluliseks on saanud ka juurdepääsetavus – kui hästi 
on veebilehe sisu edasiantav vaegnägijatele 
kasutades ekraanilugeja tehnoloogiaid.
Neljanda  põlvkonna Microsofti leht
Click to edit Master text styles
Second level
●
Third level
●
Fourth level
●
Fifth level
TEHNOLOOGIAD
Hulk tehnoloogiaid.
Peamised nendest  on ASP.NET ja Silverlight.
Kui tahta luua töölauarakenduste omaduste ja 
funktsionaalsusega võrreldavaid lahendusi veebis, 
siis sel e jaoks on Microsoft välja töötanud platvormist 
ja veebilehitsejast sõltumatu  tehnoloogia  Silverlight. 
Allolev  joonis annab hea ülevaate, kuidas paiknevad 
erinevad tehnoloogiad Microsofti veebiplatvormi 
maastikul.
Click to edit Master text styles
Second level
●
Third level
●
Fourth level
●
Fifth level
TÖÖRIISTAD
Mõned vahendid veebiga  toimetamiseks  on 
käepärasemad tavakasutajatele, osad jäl egi 
disaineritele ja  kolmandad  on orienteeritud arendajatele.
Microsoft Office abil saab veebilehti teha 
tavakasutaja, kes oskab hästi  Wordi  ja Excelit, kuid ei 
tea midagi veebilehtedest ega nendega seonduvatest 
tehnoloogiatest. 
VISUAL  STUDIO
Microsofti peamiseks arendustööriistaks on Visual 
Studio. 
Visual studio intellisense
Click to edit Master text styles
Second level
●
Third level
●
Fourth level
●
Fifth level
EXPRESSION BLEND
Silverlight rakenduste loomiseks on spetsiaalselt välja 
töötatud uus tööriist Expression Blend. Blend on 
mõeldud disaineritele ja sel e ülesehitus sarnaneb 
Adobe Photoshopile või -Il ustratorile. 
Expression blend 3
Click to edit Master text styles
Second level
●
Third level
●
Fourth level
●
Fifth level
EXPRESSION WEB
Expression Web on veebidisaineritele mõeldud 
tööriist.
Sel ega on väga mugav kirjutada standarditele 
vastavat HTML ja CSS-i ning sel es on samamoodi 
olemas Intel iSense.
Expression web 3
Click to edit Master text styles
Second level
●
Third level
●
Fourth level
●
Fifth level
HEAD TAVAD VEEBIDISAINIS
Veebilehe kujundamisel tuleks arvestada heade 
tavadega, mis on veebiajaloo vältel välja kujunenud. 
Juba neid reegleid järgides muutub leht tublisti 
kasutajasõbralikumaks.
VEEBI KUJUNDUSE ELUTSÜKKEL
Lihtsama  veebilehe loomise ja hooldamisega saab 
hakkama pea iga inimene, kel el on tehnilist taipu ja 
silma kujunduseks, eeldab korraliku  veebirakenduse  
loomine lisaks kujundamisele ja arendusele (sisu 
loomine, koodi kirjutamine jms) si ski ka korralikku 
planeerimist, analüüsi, testimist ning hilisemat 
ülalpidamist.
ROLLID 
VEEBIARENDUSMEESKONNAS
Projektijuht  (project  manager )
Veebidisainer (web designer)
Veebiprogrammeerija (web programmer) ehk 
arendaja  ( developer )
Dokumenteerija (documenter)
Testija
Tel ija ehk  klient
SUPERPREVIEW
Expression Webiga kaasa tulev SuperPreview on 
suurepärane tööriist.
SuperPreview võrdlemas IE’d ja  FireFox ’i
Click to edit Master text styles
Second level
●
Third level
●
Fourth level
●
Fifth level
PILT VEEBILEHEL
Veebilehel saab kasutada peamiselt rastergraafikat, 
toetatakse jpg, png ja gif failivorminguid, sest need on 
pi savalt  universaalsed  (toetatud erinevate 
arvutiplatvormide poolt) ning kasutavad 
kompressiooni (failimahud on väikesed).
TABELI, RIDADE JA LAHTRITE 
VORMINDAMINE
width  
border 
cellspacing 
cellpadding 
Tabel piltidega, ääris 4, lahtrite vahekaugus 10 ja lahtrite 
polsterdus 10 pikslit.
CSS
CSS (Cascading Style Sheets) – astmelised sti lilehed 
ehk kaskaadlaadistik ehk sti lilehed on keel, mil es 
märgitakse üles veebilehtede kujundus. Vastavate 
reeglite järgi pannakse kirja, kuidas erinevaid HTML 
elemente peab näitama (värvid, teksti  font , suurus 
jne).
Veebilehe üldine kujundus
Veebilehe üldise kujunduse alla kuuluvad taust ning teksti vaikimisi 
kasutatav välimus. Kõik järgnevalt kirjeldatavad omadused kirjutatakse 
selektor body  jaoks:<
Teksti kujundamine
Teksti kujundamisvõtted on tekstitöötlusest tuttavad. Veebilehel tuleb 
nendega ettevaatlikult ümber käia, sest ekraanilt lugemine on raskem 
kui paberilt.
Teksti kujundamisvahendeid saab määrata kõigile teksti sisaldavatele 
veebilehe osadele ( pealkirjad , lõigud, loendid, lingid jne).
Kuidas panna veebidisain 
müüma?
Siin on 7 nõuannet mis veebidisaini juures rakendades sinu 
müügitulemusi oluliselt tõstavad:
1. Vastused 3 sekundi jooksul
2. Kasuta pilte, mis võimendavad sõnumit
3. Elimineeri valiku  paradoks
4. Näita toodet
5. Tasuta!
6. Rõhuta soovitud tegevust
7. Kasuta Guternbergi diagrammi
Kasutatud kirjandus:
http://www.eneta.ee/oppimine/veebistuudium/Lehed/veebidisain.aspx
http://internetmarketing.ee/kuidas-panna-veebidisain-muuma/
http://www.ultimadesign.net/
TÄNAN TÄHELEPANU EEST!

Document Outline

• Slide 1
• Mis on üldse veebidisain?
• VEEBIDISAINI ESIMENE PÕLVKOND (1991-1994)
• Slide 4
• Microsofti esimene koduleht
• VEEBIDISAINI TEINE PÕLVKOND 
• Teise põlvkonna Microsofti veebilehe näide
• VEEBIDISAINI KOLMAS PÕLVKOND
• Kolmanda põlvkonna Microsofti leht
• VEEBIDISAINI NELJAS PÕLVKOND
• Neljanda põlvkonna Microsofti leht
• TEHNOLOOGIAD
• Slide 13
• Slide 14
• TÖÖRIISTAD
• VISUAL STUDIO
• Visual studio intellisense
• EXPRESSION BLEND
• Expression blend 3
• EXPRESSION WEB
• Expression web 3
• HEAD TAVAD VEEBIDISAINIS
• VEEBI KUJUNDUSE ELUTSÜKKEL
• ROLLID VEEBIARENDUSMEESKONNAS
• SUPERPREVIEW
• SuperPreview võrdlemas IE’d ja FireFox’i
• PILT VEEBILEHEL
• TABELI, RIDADE JA LAHTRITE VORMINDAMINE
• Slide 29
• CSS
• Veebilehe üldine kujundus
• Teksti kujundamine
• Kuidas panna veebidisain müüma?
• Slide 34
• Slide 35
• Slide 36