Straipsniai > Pamokos > Kaip pritaikyti dizainą?

Pamoka, kaip MightMedia sistemai pritaikyti paprastą HTML dizainą.



Taigi, pirmiausia susirandam norimą HTML dizainą. Aš pasirinkau šį: http://templates.arcsin.se/demo/colorvoid-website-template/ 
Parsisiuntę dizainą, išarchyvuojame jį stiliai/dizaino pavadinimas direktorijoje, tada pervadiname dizaino direktorijoje esantį index.html (gali būti ir kitoks pagrindinio dizaino failo pavadinimas) į index.php. Į naujojo dizaino bylą nukopijuojame sfunkcijos.php failą, esantį default dizaino byloje. 
Dizainai dažniausiai naudoja CSS technologiją, taigi jei ir jūsiškis dizainas ją naudoja, suraskite failą su .css galūne (mano atveju failas vadinosi style.css ir pervadinkite jį į default.css . 
Baigę su failų pavadinimais, atsidarykite stiliai/dizaino pavadinimas/index.php failą ir suradę  po juo trinkite viską iki . Viską tarp jų ištrynę 
vietoj buvusio kodo parašykite 
 
Taip pat jei dizainas reikalauja, arba jums reikia dar ką nors esantį dizainodirektorijoje įterpti tarp  pvz. mano atveju reikėjo įterpti ie_fixes.css failą, nes internet explorer ne visada atvaizduoja puslapį teisingai, terpkime jį taip: 

nurodo direktoriją, kurioje yra dizaino failai. 

po to suraskite kodo atkarpą, kurioje suformuojami blokai (meniu, reklama, šaukykla ir pan.). Mano atveju kodas buvo toks: 

Textbox


A box with some text.



Nukopijuokite tą bloko formavimo kodą ir visus suformuotus html blokus ištrinkite. Tada atsidarykite failą sfunkcijos.php , suraskitę funkciją lentele_l ir išvalykite ją, palikdami tik 
function lentele_l($pavadinimas,$tekstas,$label=false) {		
echo '';
}
Tada tarp kabučių, esančių po echo įklijuokite nukopijuotąjį kodą. 
Mano atveju dabar funkcija atrodo taip: 
function lentele_l($pavadinimas,$tekstas,$label=false) {	
echo '

Textbox


A box with some text.




';
}

Bloko pavadinimo vietoje (pas mane Textbox) įrašome 
'.$pavadinimas.'
o turinio vietoje (pas mane A box with some text.) įrašome 
'.$tekstas.'
Taip pat galite keisti funkcijas klaida(); ir msg();
Galutinė funkcija (mano atveju) atrodys taip: 
function lentele_l($pavadinimas,$tekstas,$label=false) {	
echo '

'.$pavadinimas.'

'.$tekstas.'


';
}

Baigę šį etapą grįžtame į index.php failą ir toje vietoje įrašome: 
Jei dešinės pusės blokai - 
Jei kairės - 

Dabar surandame vietą, kurioje formuojamas puslapio turinys. 
Mano atveju ji atrodo taip: 

Adipiscing



 





Aliquam risus justo, mollis in, laoreet a, consectetuer nec,risus. Nunc blandit sodales lacus. Nam luctus semper mi.






  • Tristique


  • Aenean


  • Pretium




In hac habitasse platea dictumst. Duis porttitor.

Sedvulputate elementum nisl. Vivamus et mi at arcu mattis iaculis. Nullamposuere tristique tortor. In bibendum.

Aenean ornare, nunc eget pretiumporttitor, sem est pretium leo, non euismod nulla dui non diam.

Pellentesque dictum faucibus leo. Vestibulum ac ante. Sed inest.





Ištrinam nereikalingus dalykus (datas ir pan.) ir vėl einame į sfunkcijos.php failą. Ten surandam funkciją lentele() ir pasielgiam su ja taip pat kaip su blokų funkcija lentele_l()
Mano atveju funkcija palieka tokia: 
function lentele($pavadinimas,$tekstas,$label=false) {	
echo '


'.$pavadinimas.'


 



'.$tekstas.'


';
}





Patobulinę funkciją vėl grįžtam į index.php failą ir toje vietoje, kur formuojamas turinys parašote kodą: 

	
if (isset($strError) && !empty($strError)) {

klaida("Klaida", $strError);

}

include ($page . ".php");

?>

Tada pakeičiam navigaciją (ne visuose dizainuose ji būna) 
index.php faile ji būna dažniausiai tarp
    ir
surandam ta vietą ir viską tarp jų ištrynę įrašome 


	
$sql1 = mysql_query1("SELECT SQL_CACHE * FROM `" . LENTELES_PRIESAGA . "page` WHERE `show`='Y' ORDER BY `place` ASC");

$text = '';

foreach($sql1 as $row1) {

if ($row1['show'] == "Y" ) {

$text .= '
  • ' . input($row1['pavadinimas']) . '
  • ';

    }

    }

    echo $text;

    ?>

    Tada jei kur nors yra vieta, kurioje turi būti nurodytas puslapio pavadinimas pvz." Muzikos portalas" ar dar kasnors (pavadinimas nustatomas administravime), toje vietoje įdedame kodą: 
    Jei kur nors norite įterpti puslapio aprašymą tada įdedate šį kodą: 
    Vietoje, kurioje turi būti autoriaus vardas naudojame 
    belieka sukurti lentelių (forumo, vartotojo profilio ir kt. ) ir balionų, kurie atsiranda užvedus ant nuorodų stilius. Tai darome default.css faile 
    balionų stiliui failo apačioje įrašome: 
    .tooltip{

    padding: 3px;

    border: 1px solid #666;

    display: none;

    background: #DDEBF4; /*fono spalvos kodas*/

    color: #666;

    font: bold 9px Verdana, Arial, Helvetica, sans-serif;

    text-align: left;

    position: absolute;

    z-index: 1000;

    -moz-border-radius:5px;

    }

    background ir border spalvas galite keisti. 
    Lentelių stiliui galite pasiimti stilių iš default dizaino (pasikeiskite spalvų kodus):
    /* Lentelems */

    .table {

    border-bottom: 1px solid black;

    border-right: 1px solid black;

    }


    .th {

    text-align:center;

    color: white;

    border-left: 1px solid gray;

    background-color: #E4C9BB;

    height: 20px;

    font-weight: normal;

    }


    .th a {

    color: white;

    }


    .tr:hover, .tr2:hover {

    background-color: #FAECAB;

    cursor:pointer;

    }

    .tr2 {

    background-color: #FBF8F4;

    }

    .td {

    padding-left:5px;

    border-left:1px solid gray

    }

    .td2 {

    padding-left: 5px;

    border-left: 1px solid gray;

    }
    Spalvas ir rėmelius galite pasikeisti pagal save. 
    Aš susiderinau taip: 
    /* Lentelems */

    .table {

    border-bottom: 1px solid black;

    border-right: 1px solid black;

    }

    .th {

    text-align:center;

    color: #D3E5F1;

    border-left: 1px solid gray;

    border-top: 1px solid gray;

    background-color: #A3B5C1;

    height: 20px;

    font-weight: normal;

    }

    .th a {

    color: #D3E5F1;

    }

    .td {

    background-color: #F5F5F5;

    padding-left:5px;

    border-left:1px solid gray

    }

    .td2 {

    background-color: #EEEEEE;

    padding-left: 5px;

    border-left: 1px solid gray;

    }


    Štai ir turime dizainą :) Mano rezultatas: http://www.part.lt/img/e36295a5cde3bfa514a6c23de2356e0a458.jpg 
    Sėkmės.

    Šaltinis: http://mightmedia.lt/Straipsniai/m,6/kaip-pritaikyti-dizaina-_6.html#ixzz26fbqj8rk
     

    Data: 2009-05-07 19:01:43, Autorius: Paulius

    Rašyti komentarą

    Prašome prisijungti!

    Komentarai

    # FDisk (2011-11-22 23:21:36)
    avataras
    Priedai/conf.php ten rasi display errors padaryk on ir matysi klaidas
    # zilwinelis (2011-11-20 18:06:23)
    avataras
    baltas vaizdas. kažką netaip turbūt padariau :/
    # T1tas (2011-04-09 13:20:21)
    avataras
    Būtent :D
    # FDisk (2011-04-07 22:43:00)
    avataras
    Isiterpsiu i pokalbi. Table - jau atgyvena, neuzilgo html'e table neliks. Meginkit ir pratinkites suktis be ju.
    # zlotas (2011-04-02 23:27:17)
    avataras
    man divai lengviau. Bet tą turėjau omeny.
    # T1tas (2011-04-01 23:35:45)
    avataras
    Su table zlotai yra žymej lengviau , bet su div'ais yra žymej tvarkingiau :) mažiau užima failas vietos ir suprantama visiems.
    # zlotas (2011-03-29 15:53:31)
    avataras
    su table sunkiau , apskritai table yra balaganas , ir css dizainas yra žymiai kokibiškesnis
    # DedeGytis (2011-03-27 16:47:03)
    avataras
    Na ką.. Išbandžiau tutorial... Bėda ta kad niekas neveikia.... html dizainas pas mane sukoduotas ne divais o table'ais.... ir vet nežinia ką daryt, nes niekas tikrai neveikia...
    # heerax (2010-04-30 11:16:53)
    avataras
    su pritaikymu tai tas pats kas tiuninguot jau išrastą dviratį :D
    # T1tas (2010-01-30 14:57:29)
    avataras
    aj pasiemi defoult temą ir dedi f-cijas kokias nori redaguoji ir viskas kam čia dar kurt tuos failus :) jaigu yra deoulft ir ši jo daryt galima pvz aš tai fusione taip darau ir dizainai yra visai nepanašūs :)
    # SaneX (2009-11-02 19:12:04)
    avataras
    dekui. :P
    # Pur3 (2009-10-18 21:49:12)
    avataras
    O dėkui :) pravers
    # heerax (2009-09-14 20:29:07)
    avataras
    jau perpratau sistema pasirodo ner taip sunku kaip atrodo beja dėkuj administracijai už supporta :)
    # FDisk (2009-09-14 20:00:10)
    avataras
    Geriausias pavyzdys - atsidaryk stiliai/default/index.php
    o bloku iterpimo pavyzdys stiliai/default/sfunkcijos.php
    # heerax (2009-09-14 18:30:22)
    avataras
    patikslinsiu klausima: Pagal ka maždaug žiuret kur i terpt?
    # heerax (2009-09-14 18:25:06)
    avataras
    Kuriuose vietose čia užsikiša tie kodai? ten tarp div dize kišt reik
    kad rodytu blokus , turiny ir visa kita? kaip ten atitaikyt kur konkrečiai terpt tuos kodus?
    # Paulius (2009-07-09 12:23:24)
    avataras
    tai klausk. Ko nesupratai?
    # defacto (2009-07-09 08:37:13)
    avataras
    Supratau tikrai ne viska :-|
    # FDisk (2009-06-04 09:57:00)
    avataras
    Kaip sakoma: Bijai vilko neik į mišką.
    # lazy (2009-05-24 13:33:17)
    avataras
    Gal ir gerai būtų. Na tarkim aš, tu dar vienas kitas suprato viską, o ką daryt naujokui? Manau su tokiom savo pamokom dar ilgai skinsitės kelią į pripažinimą. Vienu žodžiu baisu, tarpais visiškai nugrybauta, dalis veiksmų išviso nepaaiškinta...
    # FDisk (2009-05-20 10:31:53)
    avataras
    To neplanuojame daryti šioje versijoje. v2 versijoje bus templey'tų sistema panaši į smarty, kur galėsi kiekvieną puslapį ar elementą apipavidalinti skirtingai.
    # Arius (2009-05-20 08:38:05)
    avataras
    Bekurdamas stilių pasigedau atskirų blokų ar puslapių stiliaus aprašymų pačiame stiliaus faile. Naujesniai versijai siūlyčiau stiliaus failą formuoti tokiu principu kaip kad e107 TVS'e, labai patogu kurti, gali padaryti kiekvienam blokui atskirą apipavidalinimą

    # OrangeV... (2009-05-19 15:40:26)
    avataras
    Visada padeda pasiziureti i orginala jei neiseina kazkas, tada supranti kur kokia nors maza klaidele padarei ir viskas nefunkcijonuoja.
    # vovka (2009-05-19 09:13:03)
    avataras
    geras tutorial :) dekui
    # FDisk (2009-05-14 13:45:20)
    avataras
    Viską daryk taip kaip parašyta. Skaitant ir nieko nedarant žinoma kad neaišku.
    # Algiz (2009-05-12 19:24:07)
    avataras
    visiškai nieko neaišku...
    # OrangeV... (2009-05-12 18:47:09)
    avataras
    reikes pabandyti :)
    # Arius (2009-05-12 17:15:38)
    avataras
    Mano kambariokas mokinasi PHP, žinios minimalios - tai bando lipinti skaitydamas. Nekaip sekasi... :-D
    # FDisk (2009-05-12 15:50:27)
    avataras
    Kam nors pasitarnavo straipsnis?
    # FDisk (2009-05-11 18:30:14)
    avataras
    Viskas priklauso nuo autoriaus. Gali būt, kad apmokestins :)
    # Paulius (2009-05-11 18:26:47)
    avataras
    vėliau :)
    # RaiShteliS (2009-05-10 00:02:36)
    avataras
    Jai jau padariai galejai ir i tinklapi ideti, kad kiti galetu parsisiusti ;-)
    # FDisk (2009-05-07 21:45:16)
    avataras
    Super Dar kuria dieną pagražinsiu. Labai išsami. Ačiū
    arrow_upward