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-07-20 16:36:23 [#1025] Atsakymo ID: 1025 Ilgalaikė nuoroda į atsakymą #1
Paskaitykite jūs abu ankstesnius atsakymus šioje temoje (tiksliau šį atsakymą). Paaiškinau, kaip galima atsisiųsti vaizdo įrašus.
GIANT1
Bendruomenės narys

 
Atsakymas parašytas: 2010-08-30 21:32:17 [#1066] Atsakymo ID: 1066 Ilgalaikė nuoroda į atsakymą #2
Sveiki, vėl susidūriau su problema, kurios niekaip negaliu išspręsti..

Koduojant dizainą, be šio kodo: 
#irasai { width: 70%; min-height: 500px; background: #FFF; float: left; }


viskas atrodo taip:

http://www.ipix.lt/images/48872032.jpg

O su šiuo kodu, kurį paminėjau anksčiau, viskas atrodo taip:

http://www.ipix.lt/images/83763540.jpg

Kodėl dingsta ta pilka juostelė, bei visas baltas fonas yra prisiglaudęs prie pat kairės pusės?

Taip pat norėčiau paklausti, kodėl IE naršyklė, mano dizainą atvaizduoja taip:

http://www.ipix.lt/images/44775430.jpg

P.S. reset.css failas įkeltas. Jei ką, štai mano html ir css kodai:

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="css/reset.css" rel="stylesheet" type="text/css" />
<link href="css/main.css" rel="stylesheet" type="text/css" />
<title>Mano Dizainas</title>
</head>

<body>

  <div id="virsutine_linija"</div>
  
  <div id="meniu"
  
  <ul>
  
      	    <li class="aktyvus"><a href="#">Pagrindinis</a></li>
            <li><a href="#">Apie mane</a></li>
            <li><a href="#">Mano darbai</a></li>
            <li><a href="#">Kontaktai</a></li>
            
  </ul>
  
  </div>
  
  <div class="clear"</div>
  
  <div id="virsus"</div>
  
  <div id="groteles"</div>
  
  <div id="pagrindinis"</div>
  
    <div id="irasai"</div>
    
    <div class="irasas">
    
    
    
    <div class="data_ir_laikas">
    
    
    
    </div>
    </div>
    
    <div id="sonine_juosta"</div>
    
  <div id="apacia"</div>

</body>
</html>


CSS:

@charset "utf-8";
/* CSS Document */

body { background: black; }

a { text-decoration: none; }

#virsutine_linija { width: 100%; height: 15px; background: #10335a; }

#meniu { margin: 0 0 0 150px; }
#meniu li { display: inline; }
#meniu li a { display: block; float: left; height: 33px; padding: 15px 20px 0px 20px; color: #666666; }

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

#meniu li a:hover { color: #FFF; }

#meniu li.aktyvus a:hover { color: #069; }

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

#groteles { width: 100%; height: 46px; background: url(../images/groteles.png) repeat-x; }

#pagrindinis { width: 90%; margin: 0 auto; }

#irasai { width: 70%; min-height: 500px; background: #FFF; float: left; }

.irasas { }

.data_ir_laikas {width: 171px; height: 31px; background: url(../images/datos_ir_laiko_bloko_fonas.png) no-repeat; }

#sonine_juosta { width: 30%; float: left; }

.clear { clear: both; }


Būtų malonu, jog atsakytumėte į mano pateiktus klausimus..
Pask. redagavo GIANT1 (2010-08-30 21:33:16), redaguota kartų: 1

Edmundas
Tinklalapio šeimininkas

 
Atsakymas parašytas: 2010-08-31 18:54:35 [#1067] Atsakymo ID: 1067 Ilgalaikė nuoroda į atsakymą #3
O tai kodėl div elementai neteisingai rašomi? Pavyzdžiui:

<div class="clear"</div>


Juk turi būti taip:

<div class="clear"></div>


Žodžiu, daug kur trūksta > simbolio.
GIANT1
Bendruomenės narys

 
Atsakymas parašytas: 2010-08-31 19:21:52 [#1068] Atsakymo ID: 1068 Ilgalaikė nuoroda į atsakymą #4
Pataisiau, vis tiek nieks nepasikeitė.. Tik exploreris atvaizduoja dabar taip:

http://www.ipix.lt/images/23743669.jpg
Pask. redagavo GIANT1 (2010-08-31 19:23:27), redaguota kartų: 2

Edmundas
Tinklalapio šeimininkas

 
Atsakymas parašytas: 2010-08-31 19:42:46 [#1069] Atsakymo ID: 1069 Ilgalaikė nuoroda į atsakymą #5
Geriau įkelk kur nors visus failus ir parašyk atsisiuntimo nuorodą. Kol pats nematau tiesiogiai per naršyklę, nelabai kuo galiu padėti šiuo atveju.

Beje, susilaikyk nuo tokių didelių paveiksliukų dėjimo forumuose. Jeigu matai, jog paveikslėlis didelis, tai tada jo nedėk tarp bbcode žymių, o tiesiog pateik nuorodą.
GIANT1
Bendruomenės narys

 
Atsakymas parašytas: 2010-08-31 19:44:41 [#1070] Atsakymo ID: 1070 Ilgalaikė nuoroda į atsakymą #6
OK, sorry, štai parsisiuntimo nuoroda: http://ikelk.lt/items/9bOtxAVppg
Edmundas
Tinklalapio šeimininkas

 
Atsakymas parašytas: 2010-08-31 20:08:07 [#1071] Atsakymo ID: 1071 Ilgalaikė nuoroda į atsakymą #7
Eh, na čia žioplos klaidos, nelabai ką galiu patarti, tiesiog reikia būti atidžiam.

Taigi problema tame, kad tu per anksti uždarai kai kuriuos elementus. Pavyzdžiui:

<div id="pagrindinis"></div>


o iš tikrųjų šiame div elemente turėtų būti kiti elementai. Tad štai kaip turėtų atrodyti kodas:

  <div id="pagrindinis">
  
    <div id="irasai">
    
        <div class="irasas">

            <div class="data_ir_laikas">test</div>
        
        </div>
    
        <div id="sonine_juosta"></div>
        
    </div>
    
  </div>


Ateityje prieš klausdamas pažiūrėk, ar nėra kode „mistaipų“, per anksti uždarytų elementų  ir pan. Taip sakau ne todėl, jog nenorėčiau padėti, tačiau pamatysi, kad sutaupysi laiko, kai pats atrasi tokias paprastas klaidas, o ne lauksi, kol kažkas atsakys.
GIANT1
Bendruomenės narys

 
Atsakymas parašytas: 2010-08-31 20:50:03 [#1074] Atsakymo ID: 1074 Ilgalaikė nuoroda į atsakymą #8
Dėkui, padėjo, tik nelabai suprantu, koks skirtumas, kada uždarau div'us..
Edmundas
Tinklalapio šeimininkas

 
Atsakymas parašytas: 2010-08-31 21:27:00 [#1075] Atsakymo ID: 1075 Ilgalaikė nuoroda į atsakymą #9
Paskaityk šį straipsnį: http://www.e-grafika.lt/straipsniai/skaityti/Hierarchija-ir-paveldimumas-CSS-kalboje ten net schemą pabraižiau, kaip susieti html elementai tarpusavyje.
GIANT1
Bendruomenės narys

 
Atsakymas parašytas: 2010-09-01 14:50:27 [#1076] Atsakymo ID: 1076 Ilgalaikė nuoroda į atsakymą #10
Nepyk, bet iškilo dar vienas klausimėlis ir tikriausiai nepaskutinis. Skaičiau ir straipsnį ir žiūrėjau pamoką, bet man vis tiek nedaeina, kuo skiriasi margin nuo padding ir kaip jie naudojami? Cituoju iš Jūsų straipsnio:
Taigi, trumpai tariant, margin savybė nurodo, kiek elementas turi būti atitraukiamas nuo kitų elementų (arba puslapio kraštų), o padding savybė — kiek turi būti atitrauktas turinys, esantis tame elemente.


Rašėte, jog padding atitraukia turinį esantį tame elemente, bet kodėl tada šitoje pamokoje, beveik pradžioje, mes vartojoma padding štai kaip: #meniu li a { display: block; float: left; height: 33px; padding: 15px 20px 0px 20px; color: #666666; }

Juk šis tekstas, kurį apibūdinome nėra kažkokiame elemente..

Puslapiai: