Convierte una plantilla de HTML estático en PHP includes
(05.04.2006) - Contribuido por Administrator - Última modificación (05.04.2006)
Por Joseph De Araujo (traducción: Andrés Reina)  Este artículo me ha ayudado a construir varios sitios, entre ellos el
de Aliento Kidz, lo comparto contigo…
 Introducción
Tal vez seas uno de los miles de webmasters que tiene más
de 5 páginas en su sitio web. Cuando necesitas hacer un cambio, te encuentras con la no tan agradable tarea de hacer
el mismo cambio en todas las páginas. Déjame mostrarte una técnica que utilizo llamada PHP includes.
En este
tutorial usaré la plantilla gratis jd_b030 disponible en el sitio de Interspire. Voy a romper el layout en tres partes:
encabezado común (common header), pie de página (footer) y el contenido principal del sitio (main content section).
La única parte que será diferente en todas las páginas será la del contenido principal del sitio, ya que las otras se
mantendrán iguales, siendo gobernadas por los archivos header.htm y footer.htm  Lo que necesitas para este
tutorial:
- Un
entendimiento general de HTML
- Una
cuenta de hosting que provea servicio de PHP
- Dreamweaver
MX u otro editor de HTML
Breve descripción de PHP includes.
 La idea al usar PHP
includes en tu encabezado y pie de página es reducir el tiempo que pasas haciendo modificaciones.
Al usar
elementos comunes en todo tu sitio estás utilizando algo así como una hoja de estilos: cuando haces un cambio al
elemento común, el contenido cambiará donde sea que este elemento se muestre en tu sitio. Â Â Â
Â
           Construyendo la estructura de nuestro Sitio
Primero crearé una pagina con un header and footer inc
razones de tiempo ésta será en blanco y estará lista para cuando le insertemos el contenido.
La mejor manera de
hacerlo es hacer una copia de la pagina principal (index.htm) y renombrarla index.php
La estructura de mi carpeta
está mostrada debajo Â
    Asegúrate de abrir index.php en tu editor de HTML. Crea el PHP includes para el
archivo yéndote a la parte superior de tu código e insertando el siguiente código:  <?php include(‘header.htm'); ?> Â
        Este código buscará el archivo header.htm en el mismo fólder donde se encentra index.php e insertará el
contenido, que recién verás cuando veas index.php en un navegador.  Para el pie de página (footer), vete a la
parte inferior del código HTML e inserta la siguiente línea de código:  <?php include(‘footer.htm'); ?> Â
ÂÂÂÂÂÂ
código buscará el archivo footer.htm en el mismo fólder donde se encuentra index.php e insertará el contenido. Ahora
crea dos documentos, un footer.htm y header.htm. Simplemente abre tu editor de HTML, crea un nuevo documento y
guárdalo como header.htm. haz lo mismo con el documento footer.htm  La estructura de la carpeta ahora es así: Â
     Insertando nuestro código de plantilla en los includes
 Si recuerdas, en la última sección mencioné renom
el index.htm y llamarlo index.php. la razón de esto es que ahora simplemente debemos cortar la porción del código que
necesitas e insertarla en los documentos header.htm y footer.htm, de esta forma no hay margen de error.
Mira debajo
para que veas cómo separaremos el layout de la página.
         Con el documento index.php abierto, elig
parte de arriba del documento que deseas convertir en un encabezado común. Asegúrate de incluir la barra de
navegación, ya que esta es una parte del diseño q cambia con frecuencia. Corta el código de esa página e insértalo en el
documento index.htm. Por favor recuerda no cortar el código que hace referencia al documento de encabezado, tiene q
permanecer en index.php, no en el encabezado.
 Ahora volvamos a index,.php y saquemos de allí el pie de página.
Ubícate al final del documento y corta el código que quieras tener como pie de página. Insértalo en footer.htm y guarda el
documento. Tu pagina con PHP includes está lista. Todo lo que necesitas hacer ahora es subir estos archivos a tu
cuenta y ver index.php en tu navegador. Te debería mostrar la pagina entera, como así también el encabezado y pie de
página. Â
Construyendo el sitio entero y creando links a todas las páginas
Ahora que has construido una
página de contenido (index.php), puedes usar este sistema para construir más páginas.
Abre el documento
index.php en tu editor de HTML y simplemente presiona Guardar como…
Busca la carpeta donde quieres salvar esta
nueva pagina y dale otro nombre, como por ejemplo, contacto.php y presiona en Guardar. Repite el proceso para crear
más páginas.
Para vincular todas estas páginas necesitaras crear links en el documento header.htm. Abre ese
documento en tu editor de HTML y empieza a crear links a todas las páginas que has creado antes. Debajo te muestro
como hacerlo en DreamWeaver.
     Conclusión
Bueno, ahora ves qué fácil es construir un sitio usando
plantillas gratis y al mismo tiempo hacer los cambios necesarios para que te tome menos tiempo actualizarlo.
http://www.imagenparaweb.com - Imagen Para Web - Mantenimiento y Actualización
Powered
de Sitios
byWeb
Mambo
Generated: 19 November, 2016, 11:26
0
