Diskusijų forumai
Diskusijų forumai     Kompiuterinė grafika, dizainas     Tinklalapių dizainas     Pradejau Karpit/Koduot ir reik labai pagalbos :)


Pradejau Karpit/Koduot ir reik labai pagalbos :)

Rycka
Bendruomenės narys

 
Tema paskelbta: 2011-04-29 13:13:56
tai va nusipirkau dizaina ir suplanavau pats ji sukoduot ir sukarpiti, dizainas susidaro is dvienu image: vrsus ir vidus, virsus: Picture1 ir vidus:Picture2 , gal galit pasiulyti ka ka man labiau reik karpit ? ir kaip man pradet html koda rasyt nes as parasiau tesiok sitaip: 
<body>



<div id="header"></div>

<div id="reklama"></div>

<div id="navigacija"></div>

<div id="kalba/statistic"></div>

<div id="linijia"></div>

<div class="hoveriai server"></div>

<div class="main window"></div>

<div id="footer"></div>

<div id="Backgraund"></div>


</div>

</body>
</html>

ziuredamas per photoshopa rasiau si koda: Picture
jai nesunku kas paaiskinkit man kaip cia reik ta koda rasyt ir kaip atsikirpt kas svarbu kas ne busiu labai labai dekingas smile
 


Atsakymai į temą

Rycka
Bendruomenės narys

 
Atsakymas parašytas: 2011-04-29 14:12:15 [#1198] Atsakymo ID: 1198 Ilgalaikė nuoroda į atsakymą #1
va db padariau kazka, parasiau html koda: 
<body>



<div id="header"><div id="reklama"></div></div>

<div id="navigacija"></div>

<div id="kalba/statistic"></div>

<div id="linijia"></div>

<div class="hoveriai server"></div>

<div class="main window"></div>

<div id="footer"></div>



</div>

</body>
</html>


ir css koda: 
Body
{
	font-family: "Lucida sans", Arial, Tahoma, sans-serif;
	font-size: 80%;


}



/* DIV'ai */

#header { width: 492px; height: 219px; background: url('../images/topai_Header.png') no-repeat; }

ir gavos man stai sitaip: Photo db meginu deti sone reklama bet niekaip neiseina nes dreamwever pasidar vietos ne tiesei headerio o virs jo , ir kaip man ikist ta reklama juk jos nekarpisi man atrodo su ja kazkaip kitaip jau reik , laukiu paaiskinimo kazkieno   highfive
Imago
Bendruomenės narys

 
Atsakymas parašytas: 2011-04-29 20:10:31 [#1200] Atsakymo ID: 1200 Ilgalaikė nuoroda į atsakymą #2
jei neklystu, tai greiciausiai visiskai nieko nereiks kirpti, na nebent turinio detales (top'o vietu icon'ai ir pan.).

Visus suapvalinimus lengvai galima padaryti naudojantis css3 (paieskok "css3 rounded corners" ir tikrai rasi.

Del pacio kodavimo, tai pirmiausia turesi pasirinkti, nori 'liquid' ar 'solid' isdestymo, t.y. ar nori, kad visas turinys plestusi atitinkamai nuo ekrano plocio, ar visad butu fiksuoto plocio.

O del pacio html programavimo, tai tavo duotame kode mano manymu yra nereikalingu <div> ir nlb tvarkinga struktura.

Man lengviausia viska programuoti, kai tinklapio elementus suskirstau i 'sekcijas' (header/meniu/content/footer ar pan.) ir nebijau naudoti wrappers (keliu elementu apjuosimas)

pvz.:
<div id="header">
  <a><img src="logo" style="float:left;..."/></a>
  <div id="reklama" style="float:right;..."></div>
</div>

<div id="meniu">
  <div></div> <!-- navigacija -->
  <div></div> <!-- statistika/kalba -->
</div>

<div id="content">...</div>

<div id="footer">....</div>

Jei nori, kad svetaine butu iscentruota, viska tiesiog apimk su <div style="margin:0 auto;">..</div>

beje, div'o su linija ne neturiu, nes ta linija galima padaryt tiesiog su border-bottom:;

Na daugiau kodo cia nerasysiu. Nebent reiktu pagalbos prie kazkuriu specifiniu detaliu.

p.s. Del reklamos, tai pirmiausia siulyciau logo padaryti paspaudziama su nukreipimu i pagrindini puslapi, o antra, jei paziuresi i virsuje esanti mano pavyzdi, ten rasi kaip ideti reklama i desine puse. Ir tai reklamai nereikia ne vieno paveiksliuko, viska galima su html+css lengvai padaryti (hint: position:relative; ir position:absolute; wink )
Rycka
Bendruomenės narys

 
Atsakymas parašytas: 2011-05-01 19:04:01 [#1204] Atsakymo ID: 1204 Ilgalaikė nuoroda į atsakymą #3
Sweiki dar karta, db cia beveik viska padariau teliko inputint registracija cia mano html kodas:

http://pastie.org/private/5xgtvpoouj3wseudeytrrq

ir css:

http://pastie.org/private/ecsqnz4p8n10fhtau4yyiq
Pask. redagavo Edmundas (2011-05-04 20:08:42), redaguota kartų: 1

Imago
Bendruomenės narys

 
Atsakymas parašytas: 2011-05-02 22:34:19 [#1209] Atsakymo ID: 1209 Ilgalaikė nuoroda į atsakymą #4
#1 Kodėl serveriu informacijai atvaizduoti naudoji div'us, o ne paprasčiausią 'table'? Gi table ir yra skirtas tokio tipo duomenu atvaizdavimu wink

#2 visas .navigation man atrodo nei siaip nei taip. Na taip, galima viska sudelioti i vieta su position:absolute, teciau nemanau, kad tai buvo geriausias pasirinkimas siuo atveju. O ir background'a kaip paveiksliuka nebuvo butina daryti. Visus suapvalejimus su css3 ir viskas.

#3 Reklamai niekam nereikejo daryti paveiksliuko kaip bg. Kazkas tokio turetu uztekti:
<div class="reklama">
  <span class="reklama-title">Reklama</span>
  Tavo reklamos kodas
</div>


.reklama {width:..; height:..; float:right; margin:..; padding:5px; border:1px solid #000; position:relative; ...}:
.reklama-title {background-color:#000; width:...; height:30px; position:absolute; top:-30px; left:0; ...}


P.s. kai dedi koda cia, naudok ["code=css][/"code], ["code=html]["/code] - be "
Pask. redagavo Imago (2011-05-02 22:36:25), redaguota kartų: 2

Rycka
Bendruomenės narys

 
Atsakymas parašytas: 2011-05-03 20:46:28 [#1210] Atsakymo ID: 1210 Ilgalaikė nuoroda į atsakymą #5
as klausiau kaip input surasyt registracijos , sita gali man paaiskint as galvoju taip teisingai mastau ?

<div class="content">
  Vardas: <input name="name" type="text"/><br/>
  Slaptazodis: <input name="password" type="password"/><br/>
</div>
Imago
Bendruomenės narys

 
Atsakymas parašytas: 2011-05-04 14:24:07 [#1211] Atsakymo ID: 1211 Ilgalaikė nuoroda į atsakymą #6
http://www.w3schools.com/html/html_forms.asp
Edmundas
Tinklalapio šeimininkas

 
Atsakymas parašytas: 2011-05-04 20:05:43 [#1216] Atsakymo ID: 1216 Ilgalaikė nuoroda į atsakymą #7
Taip pat nepamiršk ir straipsnio: http://www.e-grafika.lt/straipsniai/skaityti/HTML-pradziamokslis#formos