Diseño web modular PHP chau frames
Categories: CSS, Diseño, PHP - Tags: CSS, maquetación, modular, PHP¿Por qué debemos olvidarnos de los frames?
Los viejos frames funcionan bien pero google, yahoo y ningún buscador los indexa bien, así que perdemos ranking y será muy raro que aparezcamos en un buscador, además no nos permiten disfrutar de las ventajas del CSS.
¿Qué es diseño web modular?
Para reemplazar a los viejos frames, es mejor usar PHP y separar las secciones de nuestra página web en módulos, en castellano la vamos trozar como pollo, de tal forma que cada pedazo contenga la estructura de la página:
- top_page.php Aqui vamos a poner todos los encabezados html
- header.php Aqui vamos a poner el encabezado de nuestra página, es decir el título y el menú
- footer.php Aqui vamos a poner la parte de abajo de nuestra página nuestro copyright, links, etc
top_page.php
Primero todo header del html, nuestro titulo, hoja de estilos
1 2 3 4 5 6 7 8 9 | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Mi pagina modular</title> <link href="style.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="wrapper"> |
header.php
Aqui vamos a poner nuestro encabezado y menu
1 2 3 4 5 6 7 8 |
footer.php
Aqui la parte final de nuestra página web
1 2 3 4 5 6 |
¿Cómo lo junto todo?
Pues usando includes vamos a pegar todas esas partes que se repiten en nuestra página web, y quedaría algo asi
1 2 3 4 5 6 | <?php include("includes/top_page.php"); ?> <?php include("includes/header.php"); ?> <div id="contenido"> <p>Nuestro texto va aqui</p> </div> <?php include("includes/footer.php"); ?> |
Aquí he descrito la forma más simple de hacer web modular pero no es la mejor forma, sobre todo a la hora de usar frienly url, o cuando tenemos muchas páginas, por lo que te sugiero leer la segunda parte de este tutorial
Últimos Comentarios