Muchos de nosotros hemos utilizado los Templates de Dreamweaver con la esperanza de facilitarnos, a futuro, la tarea de hacer cambios en partes de nuestras webs. Así, por ejemplo, si necesitamos agregar un botón al menú de un sitio de 40 páginas, hacemos dicha modificación en el template, para no tener que cambiarlo en todas las páginas, lo que nos demandaría un rato muy largo.
Sin embargo, las templates de Dreamweaver pueden no ser siempre la mejor solución ni la más fácil de administrar. Es por eso que resulta mejor maquetar nuestras plantillas en un solo archivo y luego dividirlo en partes: encabezado, menu, sidebar, footer, etc., como hace Wordpress. Esto nos permite un mayor control sobre los elementos que componen nuestras páginas.
Vamos a ello:
Supongamos que creamos un archivo index.html, que contiene lo siguiente:
Código :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title>Titulo de la pagina</title> </head> <body> <!--Menú--> <ul> <li>Inicio</li> <li>Quiénes somos</li> <li>Contacto</li> </ul> <!--Div con el encabezado--> <div id="encabezado"> <!--Aquí va una imagen o un logo o un swf o todo a la vez--> </div> <!--Div con el contenido--> <div id="wrapper"> <h1>Aquí va el título de la página</h1> <p>Aquí va algún texto y más abajo irían imágenes</p> </div> <!--Sidebar--> <div id="sidebar"> <p>Aquí van algunos links o publicidad</p> </div> <!--Footer--> <div id="footer"> <p>Aquí pueden ir los datos de contacto</p> </div> </body> </html>
Bien, esto es lo básico, si quisiéramos crear una segunda página, digamos quienes_somos.html, simplemente grabaríamos como y, conservando la misma estructura, cambiaríamos los contenidos, principalmente el del div principal (wrapper).
Pero, si el día de mañana tuviéramos que cambiar los datos del sidebar, el pie, el menú, etc., deberíamos cambiarlos en cada página. Para facilitar las cosas -y de paso no usar plantillas Dreamweaver- vamos a dividir las partes de la página en varios archivos y luego llamarlos con la sentencia include() de PHP.
Lo primero será renombrar nuestro index.html a index.php. Luego, podríamos copiar, por ejemplo, el menú del sitio a un archivo llamado menu.php, que contendría sólo lo siguiente:
Código :
<!--Menú--> <ul> <li>Inicio</li> <li>Quiénes somos</li> <li>Contacto</li> </ul>
Luego, volviendo a nuestro index.php, borraríamos el código que acabamos de copiar y, en su lugar, pondríamos:
Código :
<?php include("menu.php"); ?>Con esto tan simple, aparece el menú como si lo tuviéramos en la misma página.
Luego, haríamos lo mismo con todas las otras partes, creando los archivos respectivos a cada sección del diseño que se repite en cada página:
- encabezado.php
- sidebar.php
- footer.php
Y reemplazaríamos el código en index.php, quienes_somos.php, contacto.php, etc., por su respectiva llamada
Código :
<?php include("encabezado.php"); ?>
<?php include("menu.php"); ?>
<?php include("footer.php"); ?>Así, cuando necesitáramos agregar un botón en el menú, una publicidad en el sidebar o cambiar los datos de contacto en el footer, simplemente acudiríamos a los archivos específicos, con lo cual estos cambios se mostrarían en todas las páginas.
Si alguien no desea utilizar la extensión php en los archivos de sus sitio web, puede simplemente renombrarlos mediante un archivo .htaccess.
¿Sabes SQL? ¿No-SQL? Aprende MySQL, PostgreSQL, MongoDB, Redis y más con el Curso Profesional de Bases de Datos que empieza el martes, en vivo.
Por elmaluf el 24 de Abril de 2012
elmaluf :
Veo, pero como es un tuto básico para diseñador, es mejor evitar malas prácticas
Te recomiendo que uses zen codding y evitas errores de tipeo en la maquetación. No sé si viene el plugin para dreamweaver, pero siempre podes usar notepad++ o aptana o similar.
saludos y gracias por el tuto.
Por elmaluf el 24 de Abril de 2012
Por torrealbaruben el 24 de Abril de 2012
pd.:Debería ver más contraste entre el fondo y las letras, no se ve nada.
elmaluf :
Es que ya lo arreglé
torrealbaruben :
yo lo veo bien, quizás es la calibración del monitor? en todo caso postealo en el buzon de quejas y sugerencias en charla.
Por elmaluf el 24 de Abril de 2012
Por DooBie el 24 de Abril de 2012
Hace tiempo que no se lleva eso de incluir en cada uno de los ficheros que contenido estático, sino que se hace al revés, tener un fichero fijo, e incluir el contenido dinámico.
Es decir, en lugar de tener 5 archivos php (home.php, productos.php, info.php....) e ir incluyendo en cada uno de ellos el menu, footer, etc... Se hace al revés, tendríamos un fichero index.php en el que ponemos el menú, footer.... y dependiendo del enlace que pulsemos, incluimos el fichero a mostrar (home.php, productos.php....)
El modo que comentas, si cambiamos el nombre de un fichero que estamos incluyendo (footer.php a pie.php por ejemplo) deberíamos cambiar el include en cada uno de los ficheros, en cambio, haciendo el otro sistema, al tener el footer incluido en un único fichero, solo lo cambiaríamos en ese fichero.
Espero que se entienda.
Saludos!
Por Inyaka el 24 de Abril de 2012
Mariux el uso de zencodding no evita hacer mal las etiquetas
Código :
cuerpo#body>html>head>h1{si expande las etiquetas}yo lo uso con Komodo Edit (disponible para linux ,windows y mac)
Por jask05 el 24 de Abril de 2012
Por Nucleus el 24 de Abril de 2012
http://unpocodephp.blogspot.com.es/
Salu2
Por elmaluf el 24 de Abril de 2012
DooBie-blog :
Sería bueno ver un tutorial de esto. ¿Podrías hacerlo DooBie? Gracias por el aporte. Todo lo que nos podamos enseñar mutuamente es bievenido.
Inyaka :
Claro, pero para un diseñador que recién comienza a maquetar eso es chino básico.
A veces hay que darse cuenta que el nivel de los tutoriales va de básico a experto, y nunca debemos olvidar que siempre hay sangre nueva empezando a aprender en la web.
El tuto de elmaluf es muy práctico para que luego un diseñador pueda entender por ejemplo como funciona un template de wordpress u otros cms's.
Es un tuto muy para el diseñador. Por eso @DooBie-blog, deja un tutorial o un link a eso que comentas porque el diseñador que no tiene idea no sabe de lo que estás hablando.
saludos
Por elmaluf el 24 de Abril de 2012
¿Qué pasa si el diseñador no sabe, no quiere, no puede usar PHP? Pues, que no va a servirle de mucho aprender a usar include o plantillas MVC o cualquier otra cosa (lo de las plantillas y el MVC sí está bastante más extendido entre los lenguajes más populares: PHP, Python, Ruby, JSP, incluso Javascript) pero agrega a la mezcla la necesidad de entender de programación lo suficiente como para saber qué es lo que se está haciendo. Me parece que son dos cosas diferentes, aunque eso no quita valor a lo que expones acá, elmaluf.
Por elmaluf el 24 de Abril de 2012
The Fricky! :
Así es The Fricky!. Cuando uno empieza todas las herramientas de diseño web son altamente necesarias. Sin embargo, cuando vas avanzando en el aprendizaje, incorporas las nuevas tecnologías que vas conociendo.
El darte cuenta de que necesitas saber la base de algo (PHP, Javascript, etc.) para aprender a hacerlo mejor (más rápido, más eficiente, más barato...) y ponerte a aprenderlo, es en donde reside la riqueza de todo esto.
A mí, por ejemplo, me hicieron "click" las respuestas a este tutorial que hablaban de MVC y otros métodos de maquetar, y ya tengo la curiosidad de aprenderlos, e incorporar los que realmente me sirvan.
Por IsRamRam el 24 de Abril de 2012
http://www.desarrolloweb.com/articulos/video-includes-php.html
Saludos!
Por Fox el 24 de Abril de 2012
Por jordano_p el 25 de Abril de 2012
Para crear páginas web estáticas simples, el uso de plantillas de DreamWeaver, campos repetido y las áreas editables pueden ser de mucha ayuda.
Por otra parte si quieres utilizar includes esto ya sería en una web simple pero con PHP, yo he creado una web simple con php, utilice includes y ademas una pagina con toda la configuración de los enlaces títulos y demás configuraciones guardadas en variables, de esta forma para hacer cualquier cambio solo tengo que acudir a esa página de configuración.
En fin esos son temas distintos, el tutorial en si tiene sus objetivos, muy bien echo!!!
Por Enzo el 25 de Abril de 2012
Por Juan el 28 de Abril de 2012
Por eareddhel el 07 de Mayo de 2012
index.php
[sitio] header.php | nav.php | footer.php
[secciones] servicios.php | contacto.php | ayuda.php | quienes somos.php
[img] imagen1.png | imagen2.png | imagen3.png
[css] estilos.css
[js] funciones.js
Creo que se entiende la idea ¿verdad? El punto es que tanto el index como las páginas que están en la carpeta [secciones] tendrán la misma estructura, es decir, llamando a las diferentes partes de la web con inludes. El problema surge con los enlaces. Funcionan en el index pero no en las páginas que están en otras carpetas. Claro, puedo cambiar la ruta de los inlcudes en, por ejemplo, [secciones], pero las rutas de las imágenes que están en header.php o en footer.php ya no funcionan. Lo mismo con el menú de navegación.
Se me ocurría que una opción sería llamar todos los enlaces a partir de la raíz, de modo que estuviesen donde estuviesen, nunca se quebrarían, sin embargo, no he podido hacerlo funcionar.
La idea de hacerlo al revés, si bien es funcional al cambiar sólo el contenido diferente a mostrar, no me agrada por el hecho de que entonces tendríamos sólo una página. Si el usuario está en algun nivel profundo de nuestra web y presiona f5 volvería al inicio y eso no es una buena idea a mi parecer.
¿Alguna idea de cómo hacer funcionar los enlaces con los includes independientemente del nivel en que se envuentre la página?
Buena Caza y Largas Lunas.
Por gigyo el 03 de Diciembre de 2012
Por keresweb el 03 de Marzo de 2014
Por keresweb el 03 de Marzo de 2014
Por jhonatan el 17 de Noviembre de 2014
Por EDU el 01 de Abril de 2016
<?php include("encabezado.php"); ?>
<?php include("menu.php"); ?>
<?php include("footer.php"); ?>
No entiendo muy bien como funciona en estos casos.
Por kereswebpuntocom el 23 de Agosto de 2016
<?php include('..//pagina/top/header.php');?>
<?php include('pagina/banner/v1.php');?>
<?php include('..//pagina/menu/v1.php');?>
<?php include('..//pagina/display/v1.php');?>
<!-- id a llamar paginas -->
<?php
$id = $_REQUEST['id'];
switch($id) {
default: include('inclu/hch-embed.php');
break;
break;
// close this case
case "hch-opcion-2": include('inclu/hch-embed-2.php');
break;
case "hch-opcion-3": include('inclu/hch-embed-3.php');
break;
case "4": include('paginas/4.php');
break;
case "5": include('paginas/5.php');
break;
case "6": include('paginas/6.php');
break;
case "7": include('paginas/7.php');
break;
case "8": include('paginas/8.php');
break;
case "9": include('paginas/9.php');
break;
// close this case
} // close switch
?>
<!-- cierro los id de llamadas -->
<?php include('..//pagina/display/3/boo3.php');?>
<?php include('pagina/display/1/1-box.php');?>
<?php include('..//pagina/pie/footer.php');?>
Por kereswebpuntocom el 23 de Agosto de 2016
hch-opcion-2 es lo que se vera porque asi se le llama al case. pero le puedes poner numero ... ahora tiene que tener algo que salga por defecto cuanod corra en la pagina asi que digamos que pones en el index. hch-opcion-1 el cual seria por defecto.
entonces tenemos 2 articulos a mostrar uno por defecto. y otro
que seria la continuacion o lo que tu quieras. no soy bueno ensenando pero este codigo me funciona. puedes checarlo en http://www.keresweb.com/television/hch.php lo unico de este codigo es que el titulo no va a cambiar. es decir si estas en tv y vas a radio. si el idviene de tv va a tener el titulo de tv en radio asi que sera un poco confuso. pero si estas en un articulo largo. ejemplo mi receta. entonces puedes poner http://miweb.com/recetas/recetas-navidenas.php?id=receta2 espero lo entiiendas