Tinklalapio (web) dizaino kūrimas

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. 

Imago	2009-05-22 00:17:35
	Pamokos dar nepabaigiau ziuret, bet atrodos tikrai verta demesio. Dekui

dvneo	2009-05-22 11:28:47
	Failus su Opera siunčiuosi nes Firefox neduoda siūstis :/

adijux	2009-05-22 11:41:05
	Video pamokoje naudotų failų archyvą galima parsisiųsti su bet kokia naršykle — reikia spausti Save Target As arba Save Link As, arba Download Linked File As.   Atsiprašau už nesklandumus.

dvneo	2009-05-22 12:04:19
	Žinau kad taip galima, taip ir dariau Tačiau gali atsirasti tokių kurie paspaus, pamatys kad nesuveikę ir tuo pasibaigs P.s. čia jau sena klaida

mikronaz	2009-05-23 18:31:41
	Labai gera pamoka! Tik pastebėjau keletą mažų klaidelių: nebuvo naudojamas saugus šriftas (persisiuntęs failus pas save į kompiuterį pamačiau kraupią tipografiją), viršus ir apačia nebuvo centruojami. Tai tik mažos klaidelės, bet vis tiek daug ką lemenčios.. Lauksiu kitų pamokų, kur tikiuosi bus sudėtingesnis dizainas ir bus daugiau darbo koduojant. Sėkmės!

adijux	2009-05-23 19:49:09
	Tik pastebėjau keletą mažų klaidelių: nebuvo naudojamas saugus šriftas (persisiuntęs failus pas save į kompiuterį pamačiau kraupią tipografiją) Čia, spėju, PSD failą turi omenyje, taip? CSS faile nurodžiau saugų šriftą — Arial, o jeigu jo nėra kompiuteryje, tada naudojamas numatytasis sans-serif šriftas. viršus ir apačia nebuvo centruojami Nelabai supratau, kur ir kodėl nebuvo centruojamas viršus ir apačia.

mikronaz	2009-05-23 20:38:46
	Šriftas man baisus buvo jau html faile, gal dėl to kad Lucida Sans... O apie viršų ir apačia turiu omenyje headerį ir footerį, backgroudas yra padarytas 0 0, o turėtų būti top center kiek žinau Bet čia smulkmenos. Keep good work going!

adijux	2009-05-23 21:00:29
	O apie viršų ir apačia turiu omenyje headerį ir footerį, backgroudas yra padarytas 0 0, o turėtų būti top center kiek žinau Hm, na šiaip idėja ir buvo paveiksliuką atvaizduoti ne per vidurį, o paprastai nuo krašto. Žinoma, norintys paeksperimentuoti gali pažaisti su reikšmėmis ir pasidaryti viską taip, kaip jiems patinka.

Imago	2009-05-24 13:53:16
	Vaizdavimas nuo sono yra geras dalykas, bet tada turejo ir centras buti nuo sono, nes jei ziuresi pro wide-screen, tada tinklapis tikrai nekaip atrodys

Imago	2009-05-24 13:58:04
	atsiprasau, kad dual-postinu, bet uzmirsau pries tai pasakyt, jog reikejo nedaryti width:100% (ar pan, geriau naudoti nustatyta px'eliais, nes cia vel beda su wide-screen, visas contentas labai issiplecia ir tinklapis atrodo ganetinai negraziai, nes pvz. naujienos tampa 2-3 eiluciu ir labai ilgos. Pastaba ateiciai

adijux	2009-05-24 14:30:10
	Šitą problemėlę galima lengvai ištaisyti nustačius papildomą CSS savybę — max-width. Pavyzdžiui, nori kad visas dizainas neišsiplėstų daugiau nei 1200px, tad pagrindiniam blokui, į kurį sudėti kiti blokai, nustatai šią CSS savybę. #pagrindinis_blokas { max-width: 1200px; } Taigi jeigu width 100% atitinka daugiau kaip 1200px, max-width nurodys, kad dizainas daugiau į ilgį plėstis negali ir nustatys width 1200px.

Imago	2009-05-24 14:36:57
	jei sitai priskaito visos narsykles, nes kiek skaiciau, berods, IE7 pradzioj nepriskaite

Imago	2009-05-24 14:49:17
	atsiprasau, iki IE7 nepriskaite Naujausi W3 duomenys del browseriu paplitimo: 2009  IE7  IE6  IE8  Fx  Chrome  S  O April 23.2% 15.4% 3.5% 47.1% 4.9% 3.0% 2.2% Atrodos, naudoti max-with galima, nes IE6 jau eina lauk is rinkos. kas menesi bent po 1% nukrenta jos populiarumas.

adijux	2009-05-24 14:51:56
	Taip ir turėtų būti, nes IE6 yra tikrai sena naršyklė, tad kuo greičiau ji dings iš rinkos, tuo geriau.

adijux	2009-05-24 14:49:59
	IE6 max-width savybės nepalaiko, tačiau, mano žiniomis, nuo Internet Explorer 7 ši savybė yra palaikoma.

Imago	2009-05-24 15:31:07
	na, IE6 tiesiogiai sios galimybes nepalaike, taciau su JS galejai ja apeit. Ir taip, IE7 jau pilnai palaiko sia galimybe. Na, bet tu to nepaminejei pamokoje, tad gyveni ir mokais

Neonas	2009-06-13 17:22:06
	Nebloga pamoka tikrai verta pagirimo. Reiktu kuo daugiau tokiu! Saunuoliai

HighVoltage	2009-06-17 21:57:42
	Norėtųsi, kad būtų galima šią pamoką parsisiųsti.

adijux	2009-06-17 23:50:04
	Jau esu pradėjęs talpinti failus, tik bėda, kas pas mane apgailėtinas upload greitis ~80-90 kB/s. Žodžiu, per savaitgalį turėčiau įkelti.

bataslt	2009-07-02 21:54:01
	Jeigu autoriu vimeo tinklalapyje nebutu padares kaip private video, dabar visi galetume visus video atsisiusti. Kadangi man dabar taip susikloste kad prie interneto buti negaliu ir reiketu atsisiusti video, kad namuose galeciau normaliai pasimokinti. Taigi, arba ymeskit visus failus y koky 4shared.com arba padarykit kad nebutu private, tada visi gales siusti per kad ir: http://www.tubeminator.com/

pauliukas	2009-08-21 17:48:18
	sorry kad cia rasau bet kur atsisiusti ta adobe dreamweaver Cs4

mikronaz	2009-08-21 22:21:43
	Čia spaudi "Get the trial"

Menas	2009-11-03 12:24:54
	Autoriau, norėčiau sužinoti, su kokia programa jūs kuriate tokius puikius video?

adijux	2009-11-03 17:29:20
	Vaizdo apdorojimui buvo naudota Adobe After Effects programa.

Crackerbit	2009-11-10 00:13:37
	Kelinta photoshop naudojai?

adijux	2009-11-10 09:17:40
	Reikėjo peržiūrėti apibendrinamąjį vaizdo įrašą, ten pabaigoje viskas buvo surašyta. Naudojau Adobe Photoshop CS4.

seras	2009-12-11 21:07:33
	as nesuprantu kdl man video nerodo ? rodo tuscia langa

adijux	2009-12-12 12:02:38
	Naudok Mozilla Firefox, Opera ar Google Chrome naršyklę. Turėtų viską puikiai rodyti.

seras	2009-12-11 21:07:33
	as nesuprantu kdl man video nerodo ? rodo tuscia langa

ievosius	2009-12-14 15:14:58
	Ačiū labai autoriui už pamoką: prasisklaidė visa mistika web kūrime Konkretus išsamus pradžiamokslis, kuri lengva sekti (na jei mano PS nepakibtų ties hand tool ) Kažko žiūrėti video ir dirbti Ps šiandien neleidžia, bet juk pataisoma

adijux	2009-12-14 16:14:34
	O aš dėkoju tau už komentarą! Jeigu gerai supratau, programoje visada lieka pasirinktas Hand Tool įrankis (net tada, kai pasirenki kitą įrankį). Šią problemą jau aptarėme diskusijų forumuose.

aiwa	2010-02-21 18:13:01
	kodel kai viena kart pasiziurejau video man antra kart nerodo rodo palata ten kur turi but video kame problema?

GIANT1	2010-07-18 19:19:26
	Sveiki, viską mėginau, bet niekaip nesigauna gerai padaryt, žiūrėjau ir tavo css failą, ir nukopijavau kodą, bet vis tiek kažko blogai atvaizduoja. Va kur problema: http://www.part.lt/img/ca317d7775f399f00e123838ab2bc0d2958.JPG        Kodėl viršuje ta mėlyna juostelė neprisiglaudus prie viršaus, neper visą plotą ir "Pagrindinis" neprisiglaudęs prie jos? Visiem, kam siunčiau atvaizduoja taip pat, o paleidus Jūsų failus, rodo normaliai. Kaip ištaisyti šią klaidą?

GIANT1	2010-07-19 23:00:55
	Jau ištaisiau įkėlęs reset.css failą

adijux	2010-07-20 16:43:42
	Ateityje rekomenduoju didesnėms problemoms išspręsti pasitelkti diskusijų forumus, kadangi ten su lauksi daugiau pagalbos.

Keris17	2010-08-14 03:37:09
	Sveiki. Man iškilo problema žiūrint pamokas. Noriu pradėti koduoti bet kai tik ijųngiu photoshop ir pasižiųrėjąs noriu pradėti. Photoshop'e nieko neleidžia daryti. Ir taip visą laiką. Keistai kažkaip. spaudžiu photoshope betkokį tool ir man rodo tą ranką ir nieko negaliu nei piešti ir aplamai nei vienas tool neveikia po video žiūrėjimo.

adijux	2010-08-17 17:01:39
	Ši problema buvo keletą kartų aptarta diskusijų forumuose: http://www.e-grafika.lt/index.php/forumai/tema/24/

• Pamokos introdukcija
• 1. Dizaino maketavimas
•         1.1. Dizaino viršus
•         1.2. Turinio sritis ir apačia (footer)
• 2. Dizaino karpymas
•         2.1. Kaip tinkamai karpyti dizainą
•         2.2. Dizaino karpymas ir paveiksliukų eksportavimas
• 3. Dizaino kodavimas (HTML/CSS)
•         3.1. Pasiruošimas kodavimui
•         3.2. Viršutinė dizaino dalis
•         3.3. CSS savybės: margin ir padding
•         3.4. Turinio ir apačios sritis
• 4. Apibendrinimas

Kodėl neįkraunamas video grotuvas?

Kiekviena video pamokos įžanga (pristatymas/introdukcija) yra prieinama visiems lankytojams, tačiau tolimesnes pamokos dalis gali peržiūrėti tik užsiregistravę lankytojai (gali būti išimčių). Užsiregistruoti e-grafika.lt svetainėje gali užpildęs registracijos formą. Prižadame, kad registracija neskausminga!

Jeigu esi užsiregistravęs mūsų svetainėje ir prisijungęs, tačiau vis tiek negali matyti video, patikrink, ar turi naujausią Flash versiją. Taip pat rekomenduojama naudoti Mozilla Firefox arba Apple Safari naršyklę.

---

Ar galiu padidinti vaizdą?

Taip, vaizdą gali padidint paspaudęs ikoną video grotuvo dešiniajame kampe. Iš tikrųjų rekomenduojame žiūrėti video failus per visą ekraną (fullscreen), nes tik taip galėsi viską aiškiai matyti.

adijux

Ši problema buvo keletą kartų aptarta diskusijų forumuose: http://www.e-grafika.lt/index.php/forumai/tema/24/

Keris17

Sveiki. Man iškilo problema žiūrint pamokas. Noriu pradėti koduoti bet kai tik ijųngiu photoshop ir pasižiųrėjąs noriu pradėti. Photoshop'e nieko neleidžia daryti. Ir taip visą laiką. Keistai kažkaip. spaudžiu photoshope betkokį tool ir man rodo tą ranką ir nieko negaliu nei piešti ir aplamai nei vienas tool neveikia po video žiūrėjimo.

adijux

Ateityje rekomenduoju didesnėms problemoms išspręsti pasitelkti diskusijų forumus, kadangi ten su lauksi daugiau pagalbos.

GIANT1

Jau ištaisiau įkėlęs reset.css failą

GIANT1

Sveiki, viską mėginau, bet niekaip nesigauna gerai padaryt, žiūrėjau ir tavo css failą, ir nukopijavau kodą, bet vis tiek kažko blogai atvaizduoja. Va kur problema: http://www.part.lt/img/ca317d7775f399f00e123838ab2bc0d2958.JPG        Kodėl viršuje ta mėlyna juostelė neprisiglaudus prie viršaus, neper visą plotą ir "Pagrindinis" neprisiglaudęs prie jos? Visiem, kam siunčiau atvaizduoja taip pat, o paleidus Jūsų failus, rodo normaliai. Kaip ištaisyti šią klaidą?