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ą

Edmundas
Tinklalapio šeimininkas

 
Atsakymas parašytas: 2010-09-01 17:04:05 [#1077] Atsakymo ID: 1077 Ilgalaikė nuoroda į atsakymą #1
Kai nurodai elementui CSS savybę display su reikšme block, jis tampa blokiniu elementu. Kadangi elemente a yra tekstas, jo poziciją koreguojame keisdami a elementams padding reikšmes.

Klausk kiek tik nori, visada pasistengsiu atsakyti. Tik nesumanyk piktnaudžiauti visokiais nereikšmingais klausimais, kuriuos gali pats išaiškinti šiek tiek panagrinėjęs.
GIANT1
Bendruomenės narys

 
Atsakymas parašytas: 2010-09-01 17:38:14 [#1078] Atsakymo ID: 1078 Ilgalaikė nuoroda į atsakymą #2
Na, šitą klausimą nagrinėjau tikrai ilgai, bet vis dar nesuprantu kuo jie skiriasi. Žiūrėdamas tavo pamoką pats mėginau mintyse pasakyti, kurį elementą dėsi, margin ar padding, bet tik 1 ar 2 spėjimai iš daug kitų buvo teisingi..

EDIT: ką tik baigiau žiūrėti pamoką ir pamoka man paliko tikrai didelį įspūdį. Aišku peržiūrėjau ne visą pamoką, o tik kodavimo vietas ir apibendrinimą, likusias dalis peržiūrėsiu vėliau. Visų pirma, LABAI NORIU padėkoti Edmundui už šią nuostabią pamoką, pamoka tikrai gera ir daug kam pravers. Aišku, liko nesuprastų kodų, bet tikiuosi, su laiku išsiaiskinsiu kas kaip.

Pabaigai dar vienas klausimas funny. Klausimas yra apie float. Tai kaip supratau, po kiekvieno float panaudojimo, reikia jį išvalyti (clear)? Pvz.:

HTML:

<div id="test"</div>

<div class=clear"</div>

Toliau koduojam..

Vėl reikia panaudoti float..

<div id="test2"</div>

<div class=clear"</div>

CSS:

#test { float: right; }

.clear { clear: both; }

Čia surašyti kodai kurie turėjo būt..

#test2 { float: right; }

.clear { clear: both; }

Gerai supratau, ar blogai?

P.S. štai kaip atrodo web, pagal Edmundo tutorial smile http://ikelk.lt/items/DACJGAbfAb Būtų malonu, jog jei kas atrastumėte laiko, peržiūtėtumėte failus ir pasakytumėte mano klaidas..


Pask. redagavo GIANT1 (2010-09-01 22:05:33), redaguota kartų: 2

Edmundas
Tinklalapio šeimininkas

 
Atsakymas parašytas: 2010-09-03 19:25:00 [#1087] Atsakymo ID: 1087 Ilgalaikė nuoroda į atsakymą #3
Kodą forumuose dėk tarp [*code][*/code] žymių (be žvaigždutės), dabar tik padarkai surašyta ir tiek. Atsiversk ankstesnįjį puslapį — juk sakiau, kad HTML žymės turi būti uždaromos tvarkingai, o tu vėl savo.

<div id="test2"</div>


Na argi neaišku, kad po kabučių reikia padėti > ženklą? 

<div id="test2"></div>


Išvalyti float reikšmes reikia tada, kai nebenori elementų lygiuoti horizontaliai. Pavyzdžiui, turi 3 blokus: #blokas-1, #blokas-2 ir #blokas-3. HTML kodas:

<div id="blokas-1"></div>

<div id="blokas-2"></div>

<div id="blokas-3"></div>


Tarkime, kad visiems trims blokams priskyrėme float: left; ir žinome, jog visi blokai turi tą patį plotį (width: 200px) ir aukštį (height: 100px). Dabar įsivaizduokime, kad tie 3 blokai patalpinti į „apjuosiantį“ bloką (lyg įdėti į dėžę), kurio plotis 600px. Taigi visi trys blokai telpa didesniąjame bloke ir lygiuojasi vienoje eilėje, kadangi priskyrėme float savybę.

Dabar jeigu išvalysi float reiškmes, tarkime, po pirmojo bloko, lyg nutrauksi sąryšį su kitais blokais, o tai reikš, kad pirmasis blokas bus prisišlięjęs kairėje pusėje, antrasis ir trečiasis blokai jau nebebus toje pačioje eilėje, o persikels po pirmuoju bloku (dėl to, jog išvalytos float reikšmės).

Kam naudojamas float reiškmių išvalymas, neaiškinsiu, nes tiek forumuose, tiek vaizdo pamokoje apie tai aiškinau. Tik dar pabaigai parodysiu anksčiau paminėtos situacijos brėžinį.





Na, galiu aiškinti, braižyti ir rodyti, tačiau pats turi įdėti pastangų ir viską išbandyti. Koduoti išmoksi tik koduodamas — ne kitaip.
GIANT1
Bendruomenės narys

 
Atsakymas parašytas: 2010-09-03 23:59:32 [#1088] Atsakymo ID: 1088 Ilgalaikė nuoroda į atsakymą #4
float tai manau supratau ką reiškia, tik pasitikslinau ar gerai supratau kada jį naudoti.. Būna, kad pvz. "sulimpa" 2 elementai, o reikia patraukti vieną, tada reikia naudoti clear.
doncatas
Naujokas

 
Atsakymas parašytas: 2010-09-21 17:04:37 [#1096] Atsakymo ID: 1096 Ilgalaikė nuoroda į atsakymą #5
Nu va štai ir mano OutCome. dizainą turėjau jau seniau pasipiešęs ir kadangi pats moku su juo tai šios pamokos nežiūrėjau. Žiūrėjau tik kodavimą, kur gilinau žinias wink
Mano web
1. Iškart kas nesigavo: nežinojau kaip gerai meniu juostos tekstą susidėliot pagal perskyrimus, tad gavos šiek tiek netiesiai.
2. Nežinojau kaip footer padaryt kad po apačia box'o būtų, tad nuleidau su keletu < br >, bet jeigu pridėčiau daugiau panelių būtų negerai.
3. nežinojau kaip gerai išcentruoti dizainą, kad būtų viduryje puslapio. bandžiau  ir su < center > ir kuriant naują bloką ir į jį patalpinant webą, bet nesigavo.
tikiuosi dar šias klaidas pakomentuosit kaip reikėjo taisyt, iškart dėkoju smile

html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta name="keywords" content="kuriama" />
	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
	<title>2A Klases zona</title>
	<link href="styles.css" rel="stylesheet" type="text/css" media="screen" />
</head>
<body>
	<br><br><br><br>
	<div id="virsus"></div>
	<br>
	<div id="meniu">
		<ul>
		<li><a href="tvarkarastis.html">Pamoku tvarkarastis</a>
		<li><a href="html://www.manodienynas.lt">Mano dienynas</a></li>
		<li><a href="/namudarbai.html">Namu darbai</a></li>
		<li><a href="/kontaktai.php">Kontaktai</a></li>
		</ul>
	</div>
	<br>
	<div id="blokas">
		<div id="centrine">
			<div class="tekstas_virsus">
			<div class="tekstas_virsus_pavadinimas">
			Teksto pavadinimas
			</div>
			</div>
			<div class="tekstas_vidus">
			Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
			</div>
			<div class="tekstas_pabaiga"></div>
		</div>
		
		<div id="panele">
		<div id="panele_pavadinimas">
		<center>
		Pamokų laikas
		</center>
		</div>
		<p>
		<div id="panele_tekstas">
			1 pamoka: 8.00 - 8:45<br>
			2 pamoka: 8.55 - 9:40<br>
			3 pamoka: 8.55 - 9:40<br>
			4 pamoka: 8.55 - 9:40<br>
			5 pamoka: 8.55 - 9:40<br>
			6 pamoka: 8.55 - 9:40<br>
			7 pamoka: 8.55 - 9:40<br>
		</div>
		</div>
	</div>
	<br><br><br><br><br><br><br><br>
	<div id="footeris">
	Sprendimas: <a href="skype:doncatas123">Doncatas</a> | Visos teisės saugomos © 2010
	</div>	
</body>
</html>


css:
body {
	background: url(images/fonas.jpg) repeat;
}

.a {
	text-decoration: none;
	font-weight:bold;
	font-size: 10px;
	font-family : tahoma;
	color: #fff
}

#virsus {	
	width: 100%;
	height: 44px;
	background: url(images/virsus.png) no-repeat; 
}
	
#meniu {
	width: 100%;
	height: 38px;
	background: url(images/meniu.png) no-repeat;
}

#meniu li {
	display: inline;
}

#meniu li a {
	display: block;
	float: left;
	padding: 12px 40px 0px 0px;
	text-decoration: none;
	font-weight:bold;
	font-size: 12px;
	font-family : Tahoma;
	color: #fff;
	text-shadow: #330000 -1px 0px 0px;
}

#meniu li a:hower {
	color: #999999;
}

.clear {
	clear: both;
}

#blokas {
	width: 546px;
	height: auto;
	padding: 0px 0px 0px 0px;
	background: #fff;
}

#centrine {
	width: 390px;
	background: url(images/centrine_vidurys.jpg) repeat-y;
	float: left;
}

#panele {
	width: 136px;
	float: left;
	font-size: 12px;
	font-family : Tahoma;
}

#panele_pavadinimas {
	margin: 10px 0px 0px 0px;
	font-weight: bold;
	font-size: 12px;
	font-family : Tahoma;
	color: #FF2200
}

#panele_tekstas {
	margin: 0px 0px 0px 10px;
	font-size: 12px;
	font-family : Tahoma;
	color: #000
}

.tekstas_virsus {
	background: url(images/centrine_virsus.jpg) no-repeat;
	width: 100%;
	height: 63px;
	font-weight: bold;
	font-size: 12px;
	font-family : Tahoma;
	color: #FF2200
}

.tekstas_virsus {
	padding: 10px 0px 0px 40px;
	font-weight: bold;
	font-size: 12px;
	font-family : Tahoma;
	color: #FF2200
}
	
.tekstas_vidus  {
	margin: -35px 10px 0px 15px;
	font-size: 10px;
	font-family : Tahoma;
	color: #000
}

.tekstas_pabaiga {
	background: url(images/centrine_apacia.jpg) no-repeat;
	width: 100%;
	height: 12px;
}

#footeris {
	background: url(images/apacia.png) no-repeat;
	width: 100%;
	height: 25px;
	font-size: 11px;
	font-family : Tahoma;	
}

#footeris {
	padding: 5px 0px 0px 0px;
	font-size: 11px;
	font-family : Tahoma;
	color: #660000
}

#footeris a{
	text-decoration: none;
	font-weight: bold;
	font-size: 11px;
	font-family : Tahoma;
	color: #660000
}


Ai ir dar vienas klausimas, jeigu gali paaiškink kada css kuriant naują pavidalą ( pavadinimas { ... } ) naudoti:
.pavadinimas / #pavadinimas / pavadinimas

Labai gera pamoka norintiems nuo nulio nežiūrint į kitus dizainus ir su paaiškinimais susikurti savo puslapį. Ačiū.
(man sukoduot truko ~4h)
Pask. redagavo doncatas (2010-09-21 17:07:28), redaguota kartų: 3

Imago
Bendruomenės narys

 
Atsakymas parašytas: 2010-09-21 19:38:33 [#1097] Atsakymo ID: 1097 Ilgalaikė nuoroda į atsakymą #6
Pradėkim nuo pirmos blogybės, visa tinklapi reikėjo apgaubti su <div> tag'u
<div id="body" style="width=500px; height=auto; margin:0 auto;>
--Header--
--Meniu--
--Content--
--Footer--
</div>

(margin:0 auto; išcentruos tinklapį. PAMOKA (margin/padding))

Dėl Meniu, pirma siūlyčiau nustatyti jo vieta ir apdirbti meniu dalis (ul ir li)
#meniu ul {float:left; width:100%;}
#meniu ul li {height:meniuAukstis - padding-top; display:block; float:left; ..kitosSavybes}
/* padding ir display:block ikeliu i #meniu li, nes dazniausia meniu daromas: <a><li></li></a>, o ne <li><a></a></li>. Taip daroma, kad meniu veiktu kaip buttons, o ne tik tekstine nuoroda. Beje, del <li><a></a></li>, pas tave po tekstu neduoda paspaust, o virs teksto spaudziasi jo dar nepasiekus ;) */
 
Į kodą nedėjau, bet pas tave trūksta prie daugelio elementu margin:0; padding:0; .Nenurodžius šių nurodymų, kai kurie elementau turi default margin, padding dėl ko jie stovi ne ten/taip kaip norisi. Kad to išvengt naudok css reset.(internete gausu)

O dėl footer ir kitų dalių atitraukimo nenaudojant </br>, naudok margin:;

Tikiuosi supratai ką parašiau smile

EDIT:iškart nepastebėjau, kad klausiai dėl #name / .name / name

#name - # nurodo, kad tai id="" (pvz.: <div id="..">wink. Jis paprastai naudojamas, kai tinklapyje turėsim tik vieną tokį elementą (id="header", id="footer" ar pan.).

.name - nurodo, kad tai class="" .Priešingai, nei id, jis naudojamas pasikartojantiems elementams.

name = tag (div, body, ul, p ir kt.). Naudojam norėdami, kad visi puslapyje esantys tag'ai turėtų kažkokį bendrą nustatymą (pvz.: p {line-height: 30px;} - visos tinklapyje esančios pastraipos (<p></p>wink paveldės šį nustatymą)
Pask. redagavo Imago (2010-09-21 19:58:13), redaguota kartų: 3

doncatas
Naujokas

 
Atsakymas parašytas: 2010-09-21 19:55:47 [#1098] Atsakymo ID: 1098 Ilgalaikė nuoroda į atsakymą #7
ačiū Imago už išsamų aprašymą, atsižvelgsiu į klaidas ir bandysiu taisytis.
Edmundas
Tinklalapio šeimininkas

 
Atsakymas parašytas: 2010-09-21 22:00:04 [#1099] Atsakymo ID: 1099 Ilgalaikė nuoroda į atsakymą #8
Jeigu naudoji „reset“ CSS failą, nereikia nustatyti margin: 0 ir padding: 0, nes būtent tam ir yra skirtas šis „reset“ failas. Visa kita Imago kaip ir paaiškino. wink
KarolisK
Bendruomenės narys

 
Atsakymas parašytas: 2011-03-06 17:31:07 [#1112] Atsakymo ID: 1112 Ilgalaikė nuoroda į atsakymą #9
Sveiki, kaip pastebėjau,kad puslapis tikrai naudingas,bet norėdamas pasižiūrėti šią pamoka, truputėli nusivyliau,nes video neveikė, jei būtų galima, atnaujinkit video, turbūt ne aš vienintelis noriu išmokt koduoti puslapis, ačiū
Gytis
Naujokas

 
Atsakymas parašytas: 2011-03-06 17:38:10 [#1113] Atsakymo ID: 1113 Ilgalaikė nuoroda į atsakymą #10
Labas, norejau pasiteirauti kur dingo video apie web dizaina po e-grafika reloudo? Radau forume bet neina parsisiusti, gal galetum ideti veikianti linka, nes pradejau ziureti ir kartu bandyti  kazka kurti, taciau po reloudo nebeliko is ko pasimokyti. Is anksto dekoju.

Puslapiai: