Calificación:
  • 0 voto(s) - 0 Media
  • 1
  • 2
  • 3
  • 4
  • 5
Creación de un sistema de plantillas PHP
#1
* Si tiene un montón de páginas que usan el mismo diseño. Si desea hacer una cambios en la distribución en la cabecera, menú, pie de página o sección derecha,
no tiene para actualizar los archivos numerosos. tendrá que editar un único archivo php

* tendrá menos de desplazamiento vertical cuando el código PHP escribiendo como conjunto de sección se sustituye por una sola línea de PHP
(es decir, vamos a usar la función includes para incluir un archivo externo en el script principal y el número de líneas en el script principal será reducida).

* tendrá una apariencia consistente a través de la página web.
* Los diseñadores pueden modificar las diferentes secciones sin la intervención de programador.

Ahora vamos a empezar a crear nuestra propia plantilla. La idea es crear archivos separados para secciones que utilizan el mismo diseño. Luego incluyen estas secciones en nuestra página principal. En este tutorial he creado 4 secciones header, top-bar, left menu y el footer. He creado archivos separados para estos secciones y, a continuación incluyen estas secciones en las páginas principales.

Véase el código de ejemplo de la pagina de inicio de la plantilla
Código:
<?
   /* Este archivo declarar todas las varibles de configuración,
            *Sólo en 1 variable para almacenar título
            */
    
   include("includes/config.php");

      /*Todas las páginas tendrán esta varible en la parte superior
       *Para almacenar el título de cada página. Esta varible se
       *Usado en la etiqueta del título de HTML y también pueden tener otros usos
       */
   $page_title='Principal';
?>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="css/style.css" type="text/css" rel="stylesheet" />
<title><?=APP_TITLE?> - <?=$page_title?></title>
</head>

<body>
   <div id="container">
       <div id="header"><? include("includes/header.php"); ?></div>
       <div id="topBar"><? include("includes/top-bar.php"); ?></div>
          <div id="menu"><? include("includes/menu.php"); ?></div>
          <div id="content">
           <h1>El contenido principal se quedará aquí..</h1>
          </div>
          <br style="clear:both" />
          <div id="footer"><? include("includes/footer.php"); ?> </div>
   </div>
</body>
</html>
los archivo individual de la plantilla incluye

Config

Código:
<?
   define("APP_TITLE","Bienvenido a esta plantilla [Admin Panel]");
?>

Encabezado
Código:
<div>
   <h1 style="color:#F7F7F7"><?=APP_TITLE?> - <?=$page_title?> </h1>
</div>

Top Bar
Código:
<div style="background-color:#dadada;border-bottom:solid 1px #BBB; text-align:right; padding:5px">
   Identificados como Administrador <a href="#">Cerrar sesión</a>
</div>
Left Menu
Código:
<div>
   <ul>
       <li><a href="index.php">Inicio</a></li>
       <li><a href="Medico.php">Médicos</a></li>
       <li><a href="empleado.php">Empleados</a></li>
       <li><a href="departamento.php">Departamentos</a></li>
       <li><a href="nombramientos.php">Nombramientos</a></li>
       <li><a href="configuracion.php">Configuración</a></li>
      </ul>
  
</div>

Pie de pagina
Código:
<div style="border-top:dotted 1px #CCC; padding:20px">
Copyright Todos los derechos reservados
</div>

CSS
Código:
body{
   margin:0;
   font-family:Verdana, Geneva, sans-serif;
   font-size:12px;
}
#container{
   width:1004px;
   margin:0px auto;
   border:solid 1px #CCC;
   border-top:none;
}
h1{
   font-family:Georgia, "Times New Roman", Times, serif;
   margin:0px;
   padding:5px 0px 15px 15px;
   font-size:22px;
}
#header{
   background-color:#26469B;
   padding:20px 0px 0px 30px;
}
#topBar{
   background:#F8F8F8;
}
#menu{
   font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
   font-size:12px;
   width:180px;
   margin:0px;
   padding:20px;
   border-right:dotted 1px #CCC;
   float:left;
}
#content{
   float:left;
   width:742px;
   padding:20px;
   padding-bottom:0px;
}
#footer{
   font-size:11px;
}

los unico que hay que hacer cuando queramos crear otras pagina conservado el diseño basta hacer una copia de la pagina principal y añadir en el div contenido la pagina que quiere mostrar

aqui esta el ejemplo de la plantilla
en esta direcion podra descarga la plantilla de ejemplo
http://www.codigocero.ucoz.es
#2
Muy bueno jesuli Sonrisa

Sencillo y muy claro.

Tarde o temprano acabermos todos aprendiendo php.
[Imagen: firmabp.jpg][Imagen: mineenlineaentregadispo.jpg]
WWW
#3
Curioso... Me lo miaré con más detención...

Gracias jesuli Guiño
WWW
#4
Esto funcionaría como el sistema de plantillas del dreamwevaer (dwt)?
#5
Estupendo, jesulillo, como siempre un trabajo impecable Guiño
WWW
#6
funciona perfectamente bien solo hay que editar la plantilla a vuestra necesidades y el css
http://www.codigocero.ucoz.es
#7
muy interesante.... muchas gracias


Posibles temas similares...
Tema Autor Respuestas Vistas Último mensaje
  Plantillas HTML Responsive Free Profesionales gassip 16 396 13-06-2017, 03:45 AM
Último mensaje: gassip
  Interesados en modelar plantillas web jcsfotografo 12 655 29-04-2015, 07:56 AM
Último mensaje: allis
  Como hacer un Sistema de Noticias con PHP y MySQL torgar22 3 953 02-02-2015, 05:16 PM
Último mensaje: AngelKrak
  Sistema de paginacion PHP - MYSQL torgar22 1 516 02-02-2015, 04:51 PM
Último mensaje: AngelKrak
  Sistema de Captcha en PHP torgar22 0 221 29-01-2015, 03:11 AM
Último mensaje: torgar22
  Sistema Bibliotecario en PHP y MYSQL jlgarduza 0 1,968 23-11-2014, 07:02 AM
Último mensaje: jlgarduza
  sistema de subir con html y javascrip 2 luisfml 4 530 13-06-2014, 08:37 AM
Último mensaje: forsa
  Sistema de login publicado por "Alan" de phpost papanoel 0 619 22-01-2014, 04:45 AM
Último mensaje: papanoel
  5 Nuevas Plantillas HTML5 y CSS3 lukas 13 2,493 12-09-2013, 06:40 PM
Último mensaje: lyo21
  Sistema de rango alemagno 3 609 24-08-2013, 08:57 PM
Último mensaje: AbaddonOrmuz



Usuarios navegando en este tema: 1 invitado(s)