Temos pavadinimas: WordPress, Shopify ir PHPFusion programuotojų bendruomenė :: Html temos

Parašė Memento Mori· 2011 Rugp. 21 16:08:14
#1

Čia dėsiu savo html temas. Pradžioje dėsiu savo išrinktas ir sukoduotas ,o veliau for free pakoduosiu ir jūsų. Labai norėčiau ,kad nusimanantys html peržiurėtų mano klaidas ir blogus tagu panaudojimus tai tiek.

1.Minecraft (jei kas rasit jame klaidu būtinai čia parašykit ačiū)

Išvaizda:

www.csplanet.lt/Pattio/mc/index....

Siųstis

http://ikelk.lt/items/UVJJ3kvr8b


2.Samp (jei kas rasit jame klaidu būtinai čia parašykit ačiū)

Išvaizda:

http://csplanet.lt/Pattio/samp/i...

Siųstis

http://ikelk.lt/items/Phmn144ry8


3.Scameris.eu

Išvaizda:

http://csplanet.lt/Pattio/scamer...

Siųstis

http://ikelk.lt/items/4Co4x2ataO

4.Dizainas sukoduotas Edjuxui

Išvaizda:

http://csplanet.lt/Pattio/edjuxu...

Siųstis

http://ikelk.lt/items/rE0Z7xoU_x

5.Skilas.lt

Išvaizda:

http://csplanet.lt/Pattio/skilas...

Siųstis

http://ikelk.lt/items/5OY080A6Uu

Redagavo Memento Mori· 2012 Vas. 6 13:02:51

Parašė Faitas.· 2011 Rugp. 21 18:08:59
#2

Na kaip ir rodo gerai, keičiant rezoliucija dizainas nepasikeičia, už tai tikrai pliusas. Nes kai kurie daro taip, kad jei padidini arba pamažini rezoliucija, tai visas dizainas „išsilaksto“.

Apie HTML kodą: Priprask kodą rašyti tvarkingai, nes darbai biški išsklaidytas. Pavyzdžiui: Darydamas footer div'ą, galėjai taip nedaryti:


<div class='footer'>
 
 
</div>


Galėjai daryti taip:


<div class='footer'></div>


Žodžiu, kai nerašai nieko į div'ą, galima rašyti viską į vieną eilutę. Taip pat turiu kritikos ir apie sukarpymą. Sukarpytas blogai, headeryje galėjai uždėti tą tekstą su div'u, taip pat ir procentus footeryje. :)

Apie CSS kodą: Viskas kaip ir tvarkinga, tik priprask atskirti aprašyto elemento turinį, dabar tavo elementas aprašome taip:


.virsus { 
height:52px; 
width: 608px;
background-image:url(../images/header.png); 
margin-right:auto; 
margin-left:auto;
margin-top:40px;
}


Būtų suprantamiau, jei parašytum taip:


.virsus { 
	height:52px; 
	width: 608px;
	background-image:url(../images/header.png); 
	margin-right:auto; 
	margin-left:auto;
	margin-top:40px;
}


Dar turėtum priprasti viską rašyt iš eilės, nes background-image aprašome vidurį elemento turinio, o turėtų būti taip:


.virsus {
        background-image:url(../images/header.png);  
	height:52px; 
	width: 608px;
	margin-right:auto; 
	margin-left:auto;
	margin-top:40px;
}


Daugiau kaip ir nieko, tik body nustatei #FFF, o turėjo būti pilkas fonas. :) Bėje, yra CSS kode ir tokios spalvos: white, black, green, red, yellow etc.

Sekmės koduojant, laukiu daugiau dizainų. ;)

Parašė Memento Mori· 2011 Rugp. 21 18:08:34
#3

Faitas žiauriai ačiū :o :o ryt pristatysiu nauja dizainą bandysiu pagal tavo reikalavimus ;) ;)

Redagavo Memento Mori· 2011 Rugp. 21 18:08:57

Parašė Faitas.· 2011 Rugp. 21 18:08:04
#4

Visada prašom. :) (min privalomas ilgis)

Parašė Memento Mori· 2011 Rugp. 22 18:08:51
#5

Taigi nauja diena naujas dizainas nors grįžau pavargęs iš trefkės ,bet radau laiko dar vienam dizainui :)
Taigi laukiu jūsų nuomonės kas blogai stengiausi atsižvelgti į faito pastabas. ;)
Pagal mane gali tik išsitampyti meniu ir footeris jei taip atsitiko laukiu pagalbos dėl ko tai atsitiko. :)

2.Samp (jei kas rasit jame klaidu būtinai čia parašykit ačiū)

Išvaizda http://ikelk.lt/images/64990

Siųstis http://ikelk.lt/items/v7o-qxdLiH

Parašė Faitas.· 2011 Rugp. 22 19:08:44
#6

Sveikas,

Pradėsiu nuo bugų, vėliau eisiu prie kodo. :) Kalbant apie klaidas, tai būtų tokios esminės, didinant/mažinant rezoliuciją keičiasi navigacija ir jos išdėstymas, naujienos pavadinimas ir autorius nutolsta nuo kraštų bei footerio tekstas tolėja taip pat nuo kraštų. :) Tai yra todėl, kad naudoji margin/padding savybes, taip tu teisingai darai, bet... Reikėtų naudoti ir float funkcijas, jei nori, kad tekstas būtų kairėje, naudoji float: left;, jei nori, kad būtų dešinėje, naudoji float: right;. Paprastas pavyzdys:

HTML kodas:

	<div id='footer'>
 
		<div class='design'><i>DESIGN: DEIVIDAS</i></div>
 
		<div class='code'><i>CODE: FAITAS</i></div>
 
	</div>


CSS kodas:

/* Footer */
#footer {
	background-image:url('../images/footer.png');
	background-repeat: no-repeat;
	width: 666px;
	height: 51px;
	margin: 132px 0 0 0;
}
.design {
	color: white;
	font-family: Segoe UI;
	font-size: 14px;
	float: left;
	padding: 15px 0 0 15px;
}
.code {
	color: white;
	font-family: Segoe UI;
	font-size: 14px;
	float: right;
	padding: 15px 45px 0 0;
}


P.S - Čia ištraukiau iš savo koduoto varianto (kažkada mokinausi validžiai koduoti, tai dar užsiliko iš senesnių laikų). c|

Niekados nenaudok &nbsp;, tiktais kodą gadina, geriau naudok margin (jei esi apsibrėžęs div'us, o taip ir turėtų būti). :) Su headeriu taip pat gerai pasielgei, uždėdamas tekstą su html, o ne iškirpdamas (matosi, kad atsižvelgi į patarimus). Kodas dar galėtų būti tvarkingesnis.

Pastebėjau, kad ir pats validžiai koduoji. Šaunuolis. ;) Laukiam kitų darbų, bėje, pasakyk kokį editorių naudoji, patarsiu, kaip tvarkingiau kodą rašyti. ?|

Parašė Memento Mori· 2011 Rugp. 22 19:08:17
#7

Šiaip naudoju "Adobe Dreamweaver" ,bet mėgstu peržvelgti kodą su "Notepad ++" ,bet pagrinde kol mokinuosi tai su "Adobe Dreamweaver" kaip įvaldysiu kodą pereisiu prie "Notepad ++" :)

Parašė Faitas.· 2011 Rugp. 22 19:08:02
#8

Aišku. :) Anyway, sekmės. ;)

Parašė CyTaS· 2011 Rugp. 22 23:08:56
#9

O siaip kokia tos programos paskirtis nes su paprastu notepadu koduoju visa laika ir jokios kitos programos nenaudojau

Parašė Memento Mori· 2011 Rugp. 22 23:08:51
#10

Su ja lengviau koduoti kadangi joje yra visi html tagai. Ji turi daug funkcijų padedančių lengviau koduoti. :) Beje ryt įkelsiu ištaisyta samp dizainą (faito dėka) taip pat ryt sukoduosiu counter-strike dizainą. Jei viskas gerai išeis poryt pradėsiu koduoti jūsu dizainus kokius ~3 aišku for free :) Tai tokie mano planai jei kam įdomu. :D

Parašė Creatium· 2011 Rugp. 23 09:08:12
#11

CyTaS parašė:
O siaip kokia tos programos paskirtis nes su paprastu notepadu koduoju visa laika ir jokios kitos programos nenaudojau


Pagrindinis Dreamweaver ir Notepad++ programų pliusas yra tas, kad jos nuspalvina kodą. Taip koduodamas gali laisvai ir greitai pastebėti padarytas klaidas.

Parašė Memento Mori· 2011 Rugs. 6 18:09:27
#12

POO Labai ilgo laiko radau laiko naujam dizainui :) Taigi manau gal jis ir yra kur nors sukoduotas ,tačiau aš sukodavau pagal save.


Scameris.eu

Išvaizda http://ikelk.lt/images/66773

Siųstis http://ikelk.lt/items/xwl0uNJVBZ

Dizainas simple tad galima jį panaudot daug kur na ne mano reikalas aš tiesiog sukodavau :D
Jeigu rasite kokių klaidelių praneškite ;)


Taipogi ištaisiau klaidas antrame dizaine ;)

Parašė WantedBoy· 2011 Rugs. 6 18:09:24
#13

gal turi kokiu panasiu dizainu .psd?

Parašė Memento Mori· 2011 Rugs. 6 18:09:01
#14

Ne visas temas iš interneto ieškau tam kartui susikoduoti. Beje jei reik psd galiu įdėti pasiredaguosi :)

Parašė Nenman· 2011 Rugs. 6 18:09:24
#15

Labai jau paprasti dizainai,nesakau kad kazkas blogai bet manau reiketu tau jau pasiimti rimtesni issuki :)

Parašė Memento Mori· 2011 Rugs. 6 18:09:36
#16

matas1996 parašė:
Labai jau paprasti dizainai,nesakau kad kazkas blogai bet manau reiketu tau jau pasiimti rimtesni issuki :)



Laiko laiko ir dar karta laiko va ko aš neturiu...

Kiekvieną dieną trefke 2h. Mokslus reik neapleist šiais metais ir dar truputi laisvalaikio.
Bet kokį savaitgali gal apsiimsiu rimtesniu tokiu darbeliu :)

Parašė Nenman· 2011 Rugs. 6 18:09:34
#17

As irgi einu i sule ir lankau irklavima 2valandos treniruote,vasara 4valandos...Bet stengiuos kaip imanoma laika taupyti kad sutilptu viskas.Sunku bet imanoma,beje ka lankai i pm parasyk :)

Parašė Memento Mori· 2011 Rugs. 6 19:09:26
#18

Aj pagalvojau gal kokiam žmogui taip reik html dizainą sukoduoti kadangi nerandu intenete dizainų :) Koduosiu nuo dienos iki kokių 3 kadangi nežinau ar bus laiko. Mano darbus matot viršuje. Nenorit nepasitikėkit tiesiog gal kam prireiks. Galite čia dėti dizaino fotke ir paklausti ar sukoduosiu arba į pm :)

Parašė Faitas.· 2011 Rugs. 6 19:09:38
#19

Tobulėji labai greitai! Dizainas dar biški turi trūkumų, bet jau jau, po biški mokaisi. Mažinant/didinant rezoliuciją dizainas nesitampo, nejuda, labai didelę reikšmę tai turi. :)

HTML:

Jau kodas gražesnis, bet dar nelabai žinai kaip kur naudoti. Table žymės yra skirtos lentelėms, div yra skirtas dizaino kodavimui (nežinau kodėl su table dar yra koduojami dizainai kartais, bet dizainai sukoduoti su div'ais greičiau užsikrauna ir juos lengviau yra išdėlioti). Pamačiau, kad table žymes uždėjai ant footer'io išdėliojimo (copyright'ų), bet jei norėjai išdėlioti, tai galėjai ir su div'ais, pavyzdžiui:


<div id='footer'>
 
<div class="copyright">
         UAB “Rinoras” &copy; Visos teisės saugomos <?php echo date("Y") ?>
</div>
 
<div class="creator">
         Programavimas: <a href="skype:faitass?chat">AINERA</a>
</div>
 
</div>



/* Footer */
#footer {
	border-top: 1px solid #ad6561; 
	margin: 40px 0 0 0; 
	font-size: 11px;
}
.copyright {
	margin: 20px 0 0 0;
	float: left;
}
.creator {
	margin: 20px 0 0 0;
	float: right;
}


Tai tiek apie HTML, visa kitą lygtais tvarkinga.

CSS:

Stenkis sakinį rašyti vienoje eilutėje, nes dabar biški nesamonę padarei:


#meniu li a { 
	background:url(../images/meniu_punktas.png) 
	no-repeat; 
	margin:0 15px; 
	width:139px; 
	height:36px; 
	color:#b7b5b3; 
	float:left; 
	padding-top:10px; 
	text-decoration:none; 
}


Turėtų būti taip:


#meniu li a { 
	background:url(../images/meniu_punktas.png) no-repeat; 
	margin:0 15px; 
	width:139px; 
	height:36px; 
	color:#b7b5b3; 
	float:left; 
	padding-top:10px; 
	text-decoration:none; 
}


:p

Na kaip ir viskas. Sekmės toliau kodavime.

P.S - Kiekvienas mokslo metais manau neatranda daug laiko (ypač tokiems dalykams kaip programavimas). Bet jei labai nori išmokti, tada kiekvieną sekundę išnaudosi naudingai. :)

Redagavo Faitas.· 2011 Rugs. 6 19:09:17

Parašė Memento Mori· 2011 Rugs. 6 20:09:14
#20

Vėlgi labai dėkui faitas :) Dariau su div tačiau float:left gerai viskas float:right gerai ir tada visos teisės saugomos padariau text-allign center tačiau paskui tas (float:right) į apačia nukrisdavo ir panašiai. Pasirodė racionaliau lentele. Iš viso dabar pasidomėjau tai daug kas mėgstą dizainą visą daryti su lentele. Taigi ačiū už pataisymus. ;)

Parašė Faitas.· 2011 Rugs. 6 20:09:08
#21

Taip, galima ir su table koduoti, bet jei nori geresnių klientų, kurie nori, kad sukoduotum gražiai ir tvarkingai (be lentelių), tai turėsi mokėti koduoti su div'ais. Kitaip ir būti negali. :)

Parašė Memento Mori· 2011 Rugs. 6 20:09:28
#22

Na aišku. :) Taigi jei kam reikia sukoduoti kokį dizainą html rašot į pm :)

Parašė naujokaaas· 2012 Vas. 27 10:02:32
#23

Fainai gerai, gražūs dizainai duodu pliusiuką :)