Diskusijų forumai
Diskusijų forumai     Kompiuterinė grafika, dizainas     Video pamokos     Tinklalapio (web) dizaino kūrimas


Tinklalapio (web) dizaino kūrimas

Edmundas
Tinklalapio šeimininkas

 
Tema paskelbta: 2009-05-19 22:24:41
E-grafika.lt svetainės atsinaujinimo proga paruošėme dviejų valandų trukmės video pamoką (ah, meluojame — tiksli pamokos trukmė 2 val 34 min!) apie tai, kaip sukurti tinklalapio (web) dizainą. Jeigu kas nors iš jūsų žiūrėjote pirmąją video pamoką, atsimenate, kad ji buvo suskaidyta į tris dalis. Kadangi ši video pamoka yra labai panaši (vos ne „remake“) į ankstesnę, nutarėme palikti tas pačias dalis.


Pagrindinės video pamokos dalys:
1) dizaino maketavimas Adobe Photoshop programoje;
2) dizaino karpymas ir reikiamų paveiksliukų eksportavimas
2) kodavimas su HTML ir CSS.
 
Pamokoje taip pat plačiai paaiškinta, kaip tinkamai sukarpyti dizainą su Slice Tool, kuo skiriasi CSS savybės: margin ir padding, kaip taikyti pakopinių stilių savybę float, ir daugelis kitų dalykų.

Pamokoje kurtas dizainas nėra ypatingai sudėtingas, tačiau užtikriname, kad rezultatu liksite nenusivylę. Žinoma, pabaigę kurti dizainą pagal video pamoką galėsite jį toliau tobulinti, gražinti, žodžiu — eksperimentuoti ir ieškoti savų idėjų.

Lauksime jūsų darbo rezultatų, patarimų bei įvairių pašnekesių, susijusių su šia video pamoka, mūsų svetainės diskusijų forumuose. Jeigu jums patiks video pamoka, tikimės, kad siūlysite temas naujoms pamokoms. Ir kas ten žino... gal vieną dieną išvysite norimą pamoką E-grafika.lt svetainėje? wink

Visi video pamokoje sukurti/naudoti failai patalpinti serveryje, todėl, jei norite, galite juos parsisiųsti: http://www.e-grafika.lt/failai/dizainas.rar.


Laukiame jūsų atsiliepimų, komentarų, diskusijų apie šią video pamoką. wink


Atnaujinta 2011-03-06

Visas senąsias vaizdo pamokas rasite vimeo.com. Pagrindiniame mūsų tinklalapio puslapyje rasite nuorodą į tikslų vimeo puslapį.
Paskutinį kartą temą redagavo Edmundas (2011-03-06 19:28:23), redaguota kartų: 2
 
Puslapiai:



Atsakymai į temą

Imago
Bendruomenės narys

 
Atsakymas parašytas: 2009-05-22 00:28:07 [#27] Atsakymo ID: 27 Ilgalaikė nuoroda į atsakymą #1
Kolkas paziurejau tik pirma dali "Dizaino virsus", bet jau turiu pastebejimu. Pirmiausia, tai buvo efektu kuriuos galima lengviau padaryt taip sutrumpinant darbo laika ir geriau pristatant programos galimybes. Labiausiai demesi atitrauke active meniu mygtukas, jo padarymas. Ejei per blending mode ir pan, o veliau dar baisiau, kai buvo galima tiesiog gradient tool pasiemus lengvai ir paprastai padaryt. Antra, tai new layer  irgi sunkiu budu eini, kai uaztenka paspaust icona layers lange. Galiausia, kadangi jau taip aiskiai apie visus zingsnius kalbejei, tai galejei neuzmirst pasakyt apie "Groups" daryma ir to privaluma. pamokoje tiesiog sudarei group ir nieko nesakei, o tai, mano manymu, gan svarbus dalykas dirbant su photoshopu ir trumpas bei aiskus sios galimybes pristatymas butu neprosal.

Bendrai vertinant, pamokos issamumas ir paprastumas man patiko. Pabaigus ziuret parasysiu benra nuomone ir, jei rasiu, ko pasigedau ar kas galetu but kitaip. Saunuolis
dvneo
Bendruomenės narys

 
Atsakymas parašytas: 2009-05-22 09:42:50 [#28] Atsakymo ID: 28 Ilgalaikė nuoroda į atsakymą #2
Pamokų negalima atsisiusti?  :O Ar tiesiog nematau, nes man labai ilgai krauna, net ilgiau negu rodomas pats video  duh
Edmundas
Tinklalapio šeimininkas

 
Atsakymas parašytas: 2009-05-22 11:36:24 [#29] Atsakymo ID: 29 Ilgalaikė nuoroda į atsakymą #3
Imago rašė:
Pirmiausia, tai buvo efektu kuriuos galima lengviau padaryt taip sutrumpinant darbo laika ir geriau pristatant programos galimybes. Labiausiai demesi atitrauke active meniu mygtukas, jo padarymas. Ejei per blending mode ir pan, o veliau dar baisiau, kai buvo galima tiesiog gradient tool pasiemus lengvai ir paprastai padaryt.


Žinau, kad buvo galima kitaip padaryti aktyvų meniu punktą. Iš tiesų kažkurioje video dalyje parodžiau ir kitą būdą su gradient tool (visai be blending options). wink

Imago rašė:
Antra, tai new layer  irgi sunkiu budu eini, kai uaztenka paspaust icona layers lange.


Man visados patogiau paspausti klavišų kombinaciją CTRL+Shift+N negu ieškoti ikonos, tiesiog esu taip įpratęs. Tačiau pamokoje taip pat parodžiau, kad galima sukurti naują sluoksnį nuėjus Layer -> New -> Layer.

Imago rašė:
Galiausia, kadangi jau taip aiskiai apie visus zingsnius kalbejei, tai galejei neuzmirst pasakyt apie "Groups" daryma ir to privaluma. pamokoje tiesiog sudarei group ir nieko nesakei, o tai, mano manymu, gan svarbus dalykas dirbant su photoshopu ir trumpas bei aiskus sios galimybes pristatymas butu neprosal.


Apie grupavimą, manau, nėra labai daug ką aiškinti, kadangi viskas elementaru. Parodžiau kaip sukurti grupę, kaip sugrupuoti keletą sluoksnių. Manau, kad tie, kurie peržiūrės visą video pamoką (arba bent dizaino maketavimo dalį), supras, kaip veikia grupavimas, nes jį naudojau ne vieną kartą.

Ačiū už pastebėjimus ir nuomonę, Imago. wink

dvneo rašė:
Pamokų negalima atsisiusti?  :O Ar tiesiog nematau, nes man labai ilgai krauna, net ilgiau negu rodomas pats video  duh


Deja, po kol kas video pamokos atsisiųsti negalima. Prižadu, kad vėliau tikrai įdėsiu ir parsisiuntimo nuorodas. wink
dvneo
Bendruomenės narys

 
Atsakymas parašytas: 2009-05-22 12:46:27 [#30] Atsakymo ID: 30 Ilgalaikė nuoroda į atsakymą #4
Na tiesa pasakius, didelės bėdos nėra, bet tokiems kaip aš su lėtu internetu geriau palikai kompiuteryje siųstis, kad ir puse dienos ir rami galva, o bandant užkrauti visus ir kompiuteris įdarbinamas ir laiko gaišimas, taigi aš video nežiūrėjau, užteko kodus apžiūrėti kaip išradingai viskas surašyta ir kokie images naudojami  smile man to pilnai užteko, bet tik man.

O dėl kaip viskas buvo daroma, kokios kombinacijos naudojamos ir kaip efektai taikomi tai manau nieko nekeičia, nes aš kaip moku dirbti taip ir dirbu ir ten gali kad ir ką rodyti vis viena aš savo darysiu nes man taip greičiau ar patogiau, bet galiu prisipažinti galima atrasti gan įdomių įrankių ir efektu pritaikymo būdu.

Edmundui galėčiau riebu + uždėti tik nerandu kur  funny Nes tikrai šaunus žmogus, kad stengiasi dėk kitų, aš pats galėčiau pamėginti dėti temas ar pamokas tik nežinau ar Edmundas nesupyktu ir ar jam tai neapsunkintu prižiūrėti visa tai.

+

P.s. neveikia preview mygtukas  neutral
Pask. redagavo dvneo (2009-05-22 12:47:15), redaguota kartų: 2

Irmantas
Tinklalapio šeimininkas

 
Atsakymas parašytas: 2009-05-22 14:23:47 [#36] Atsakymo ID: 36 Ilgalaikė nuoroda į atsakymą #5
dvneo rašė:
Edmundui galėčiau riebu + uždėti tik nerandu kur   Nes tikrai šaunus žmogus, kad stengiasi dėk kitų, aš pats galėčiau pamėginti dėti temas ar pamokas tik nežinau ar Edmundas nesupyktu ir ar jam tai neapsunkintu prižiūrėti visa tai.


Mielai laukiame žmonių, kurie galėtų kaip nors prisidėti prie mūsų projekto. Nauji veidai visada įneša naujų idėjų. wink

dvneo rašė:
P.s. neveikia preview mygtukas   


Tas tiesa, iš tikrųjų peržiūrėjimo funkcija ir neturi veikti, nes mes norime padaryti atsakymo peržiūrėjimą kiek kitaip. Kaip jau buvo minėta naujienoje, dar ne viskas iki galo sutvarkyta. smile
dvneo
Bendruomenės narys

 
Atsakymas parašytas: 2009-05-22 16:19:47 [#41] Atsakymo ID: 41 Ilgalaikė nuoroda į atsakymą #6
infactor rašė:


Mielai laukiame žmonių, kurie galėtų kaip nors prisidėti prie mūsų projekto. Nauji veidai visada įneša naujų idėjų. wink



Malonu, reikės pamėginti pasižiūrėti kiek galiu pasireikšti, tada parodysiu Edmundui ir tada žiūrėsiu ar galėsiu čia pasireikšti ar ne  shy
Imago
Bendruomenės narys

 
Atsakymas parašytas: 2009-05-23 12:20:43 [#42] Atsakymo ID: 42 Ilgalaikė nuoroda į atsakymą #7
Na va, pabaigiau žiūrėti  pamoką. Pamoka atrodo tikrai gerai, pakankamai išsamiai (nors ir buvo mazu bei nesvarbiu trukumu) bet bendras vaizdas tikrai geras. Sėkmės tolimesnėse video pamokose.
dvneo
Bendruomenės narys

 
Atsakymas parašytas: 2009-05-23 13:40:01 [#43] Atsakymo ID: 43 Ilgalaikė nuoroda į atsakymą #8
Imago rašė:
Na va, pabaigiau žiūrėti  pamoką. Pamoka atrodo tikrai gerai, pakankamai išsamiai (nors ir buvo mazu bei nesvarbiu trukumu) bet bendras vaizdas tikrai geras. Sėkmės tolimesnėse video pamokose.


Gaila kad aš negaliu peržiūrėti sad  Bet jei jau parašyti gerai sugeba tai manau ir video tikrai geras  funny
hello
Naujokas

 
Atsakymas parašytas: 2009-05-23 15:07:41 [#44] Atsakymo ID: 44 Ilgalaikė nuoroda į atsakymą #9
Man asmeniskai labai patiko tiek sita pamoka tiek praeita smile. Tik sitos daug graziastis dizainas ir labai gerai, kad rasiai dreamweaver programoje lietuviskai smile. Nu tai tiek laukiame  dar naujesniu pamoku.Aciu  wink
Dekar
Naujokas

 
Atsakymas parašytas: 2009-06-22 01:58:10 [#82] Atsakymo ID: 82 Ilgalaikė nuoroda į atsakymą #10
Sveiki, vat perziurejau pamoka, jau prie kodinimo esu. ir dabar jau idejau ta juosta virsutine ir idejau paveiksliuka prie "Pagrindinis", ir man nuo to paveiksliuko iki virsutines linijos nemazas tarpas yra, kaip ji panaikinti?
Va paveiksliukas: http://img14.imageshack.us/img14/7006/36388115.jpg
Va CSS kodas:
body { background: black }
#virs_linija { width: 100%; height: 15px; background: #00be12 }
#meniu li { display: inline; }
#meniu li a { display: block; float: left; height: 13px; padding: 15px 10px 0px 10px; }

#meniu li.aktyvus a { background: url(../images/virsutine_juosta.png) repeat-x; }

Ir HTML kodas:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Magnumed Zombie Plague server's site</title>
</head>
<body>
<link rel="stylesheet" type="text/css" href="main.css">
<div id="virs_linija"> </div>
    <div id="meniu">
     <ul>
        <li class="aktyvus"><a href="#">Pagrindinis</a></li>
        <li><a href="#">Serveriai</a></li>
        <li><a href="#">Kontaktai</a></li>
        <li><a href="#">Uzo usakymas</a></li></ul></div>
</body>
</html>


Gal kur klaida?  Ar kas cia netaip? Naudoju Dreamweaver CS4. Dekui uz pagalba.
Pask. redagavo Dekar (2009-06-22 01:59:15), redaguota kartų: 1


Puslapiai: