Straipsniai > Pamokos > HTML template pritaikymas Mightmedia TVS

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



Taigi, pirmiausia susirandam norimą HTML dizainą. Aš pasirinkau šį: https://templated.co/iridium


Parsisiuntę dizainą, išarchyvuojame jį stiliai/iridium direktorijoje, tada pervadiname dizaino direktorijoje esantį index.html (gali būti ir kitoks pagrindinio dizaino failo pavadinimas) į index.php.


Į naujojo dizaino aplanką iš apelsinas direktorijos nukopijuojame šiuos failus:

  • sfunkcijos.php

  • naujienlaiskiui.php


Taip pat nepamirškite aplankalo "forum".


Jei neturite kuo pakeisti, perkopijuokite ir šiuos failus:

  • no_avatar.png

  • favicon.ico


Jei neredaguosite balsavimo, pranešimų stiliaus, apelsinas/paveiksleliai papkėje rasite šiuos failus, kuriuos taip pat reikia perkopijuoti į naujo dizaino “paveiksleliai” direkotriją:

  • ratings.png

  • tick.png

  • warrning.png


Susikurkite savo stiliaus papkėje default.css failą ir į jį perkopijuokite visą kodą iš apelsinas/default.css failo esantį po komentaru:

/* Mightmedia pagrindinės stiliaus funkcijos */

Jį galite koreguotis pagal savo poreikius.


Baigę su stiliaus failu, atsidarykite stiliai/iridium/index.php failą.

Tarp <head> tag’ų privalome įterpti šį kodą:

<?php header_info(); ?>


Trindami kodą visada įvertinkite situaciją, kokių jums template’o stilių, script’ų prireiks. Šiuo atveju mums nėra reikalingi visi JavaScript script’ai, mums reikia tik stilių, o jei nuspręsime nepalaikyti ir senesnių, mažai naudojamų IE(Internet Explorer) versijų, mūsų kodo eilučių ženkliai sumažės.


Tad aš iš tokio kodo:

<head>

       <title>Iridium by TEMPLATED</title>

       <meta http-equiv="content-type" content="text/html; charset=utf-8" />

       <meta name="description" content="" />

       <meta name="keywords" content="" />

       <link href='http://fonts.googleapis.com/css?family=Arimo:400,700' rel='stylesheet' type='text/css'>

       <!--[if lte IE 8]><script src="js/html5shiv.js"></script><![endif]-->

       <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

       <script src="js/skel.min.js"></script>

       <script src="js/skel-panels.min.js"></script>

       <script src="js/init.js"></script>

       <noscript>

           <link rel="stylesheet" href="css/skel-noscript.css" />

           <link rel="stylesheet" href="css/style.css" />

           <link rel="stylesheet" href="css/style-desktop.css" />

       </noscript>

       <!--[if lte IE 8]><link rel="stylesheet" href="css/ie/v8.css" /><![endif]-->

       <!--[if lte IE 9]><link rel="stylesheet" href="css/ie/v9.css" /><![endif]-->

   </head>


Paredagavau tik į tai ko man reikia:

<head>

       <?php header_info(); ?>

       <link href='http://fonts.googleapis.com/css?family=Arimo:400,700' rel='stylesheet' type='text/css'>

       <link rel="stylesheet" href="stiliai/<?php echo input(strip_tags($conf['Stilius'])); ?>/css/skel-noscript.css" />

       <link rel="stylesheet" href="stiliai/<?php echo input(strip_tags($conf['Stilius'])); ?>/css/style.css" />

       <link rel="stylesheet" href="stiliai/<?php echo input(strip_tags($conf['Stilius'])); ?>/css/style-desktop.css" />

   </head>


NOTE: <?php echo input(strip_tags($conf['Stilius'])); ?> grąžina esamo stiliaus direktorijos pavadinimą.


Žengiame prie turinio.


Jei jūsų template turi logotipą su nuorodą į pagrindinį puslapį, kaip pvz šiame:

<!-- Logo -->

               <div id="logo">

                   <h1><a href="#">Iridium</a></h1>

                   <span>Design by TEMPLATED</span>

               </div>


Mes vietoje nuorodos <a href="#"> įterpiame funkciją, kuri grąžins mums realią tinklapio nuorodą: <a href="<?php echo adresas(); ?>">.



Po to suraskite kodo atkarpą, kurioje suformuojami centriniai blokai arba pagrindinis puslapio turinys. Mano atveju kodas buvo toks:

<!-- Content -->

                   <div id="content" class="8u skel-cell-important">

                       <section>

                           <header>

                               <h2>Welcome to Iridium!</h2>

                               <span class="byline">Integer sit amet pede vel arcu aliquet pretium</span>

                           </header>

                           <a href="#" class="image full"><img src="images/pic07.jpg" alt="" /></a>

                           <p>This is <strong>Iridium</strong>, a responsive HTML5 site template freebie by <a href="http://templated.co">TEMPLATED</a>. Released for free under the <a href="http://templated.co/license">Creative Commons Attribution</a> license, so use it for whatever (personal or commercial) &ndash; just give us credit! Check out more of our stuff at <a href="http://templated.co">our site</a> or follow us on <a href="http://twitter.com/templatedco">Twitter</a>.</p>

                           <p>Sed etiam vestibulum velit, euismod lacinia quam nisl id lorem. Quisque erat. Vestibulum pellentesque, justo mollis pretium suscipit, justo nulla blandit libero, in blandit augue justo quis nisl. Fusce mattis viverra elit. Fusce quis tortor. Consectetuer adipiscing elit. Nam pede erat, porta eu, lobortis eget lorem ipsum dolor.</p>

                       </section>

                   </div>

Šiuo atveju, mano pagrindinis turinys yra tarp <div id="content" class="8u skel-cell-important"></div> bloko. Tad aš visą kodą tarp <section></section> iškerpu (cut) iš index.php failo ir keliauju į sfunkcijos.php


Susirandu funkcijas lentele bei lentele_c ir ten paste’inu savo iškirptą kodą, kur buvo pavyzdinis pavadinimas ir tekstas įterpu atitinkamus kintamuosius ir rezultate gaunu:


//Naujienų, straipsnių lentelė

function lentele_c( $pavadinimas, $tekstas, $n_nuoroda, $kom_kiekis = FALSE, $datai = FALSE, $autorius = FALSE, $reitingai = FALSE ) {


//Jei naudosim kalbystę ištraukiam $lang, jei ne ištrinam.

   global $lang, $page;

   ?>

   <section>

       <header>

           <h2>

               <a href="<?php echo $n_nuoroda; ?>"><?php echo $pavadinimas; ?></a>

           </h2>

       </header>

       <?php echo $reitingai . $tekstas; ?>

   </section>

<?php

}


//Centrinės pozicijos blokai

function lentele( $pavadinimas, $tekstas, $reitingai = FALSE ) {

?>

   <section>

       <header>

           <h2>

               <?php echo $pavadinimas; ?>

           </h2>

       </header>

       <?php echo $reitingai . $tekstas; ?>

   </section>

<?php

}


Tą atlikus grįžtu į index.php ir iškirpto kodo vietoje įterpiu:

<?php

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

                               klaida( "Klaida", $strError );

                           }

                           

                           include ( "priedai/centro_blokai.php" );

                           include ( $page . ".php" );

                       ?>


Tokiu būdu man jau turi atvaizduoti vidinius puslapius bei Naujienas ar jų blokus. Tačiau nesnaudžiant - tęsiam darbus.


Kadangi mūsų išsirinktas template turi ir sidebar’ą (dešinės arba kairės blokų juostą) mes jį susirandame kode.

<!-- Sidebar -->

                   <div id="sidebar" class="4u">

Pasiliekame tik reikalingą kodą. Tą galime lengviau padaryti naudodami Chrome naršyklės WebmasterTools.

Šiuo atveju mums nereikalingas nuorodų sąrašo elementas, nes mūsų blokų turinys gali būti gan įvairus (nuo teksto, sąrašų, nuorodų, paveiksliukų iki lentelių), tad triname visą <ul class="style">


Ir tokiu pačiu principu kaip darėme su centru, viską tarp <section></section> perkeliam į sfunkcijos.php, tik šį kartą į lentele_l funkciją, nes mūsų stilius nesikeis net ir nuo sidebar’o pozicijos (kairė/dešinė), jie bus - vienodi.


Kodas:

//Kairės pozicijos blokai

function lentele_l( $pavadinimas, $tekstas, $label = FALSE ) {

   ?>

       <section>

           <header>

               <h2>

                   <?php echo $pavadinimas; ?>

               </h2>

           </header>

           <?php echo $tekstas; ?>

       </section>

   <?php

}


grįžtam į index.php failą ir vietoj buvusio kodo įterpkime:

<?php include ( "priedai/desines_blokai.php" ); ?>


Na, ko gero vaizdas jau panašėja? Liko meniu juosta!


Susiraskime index.php:


<!-- Nav -->

               <nav id="nav">


Matome <ul> sąrašą, kuris nupiešia mums menu, tad ilgai nelaukę, pagal apelsinas stilių prisitaikome ir šį meniu.

Mano kodas:

<!-- Nav -->

               <nav id="nav">

                   <ul>

                       <?php

                           $limit = 6; //Kiek nuorodų rodome

                           $menuSql  = mysql_query1( "SELECT * FROM `" . LENTELES_PRIESAGA . "page` WHERE `parent` = 0 AND `show` = 'Y' AND `lang` = " . escape(lang()) . " ORDER BY `place` ASC LIMIT " . $limit );

                       ?>

                       <?php foreach ($menuSql as $menuRow) { ?>

                           <?php if (teises( $menuRow['teises'], $_SESSION[SLAPTAS]['level'])){ ?>

                               <li>

                                   <a href="<?php echo url('?id,' . (int)$menuRow['id']); ?>">

                                       <?php echo input($menuRow['pavadinimas']); ?>

                                   </a>

                               </li>

                           <?php } ?>

                       <?php } ?>

                   </ul>

               </nav>



Štai ir viskas, dabar belieka pašalinti nebereikalingus failus ir kodo dalis, kurių neprireiks ;)



Data: 2018-10-11 15:19:47, Autorius: zlotas

Rašyti komentarą

Prašome prisijungti!
arrow_upward