Iniciar sesión
Registrar
Hazte fan en Facebook
Visitanos en Flickr
Unetenos en Google+
Siguenos en Twitter
Suscribete en Youtube
Este tema está cerrado
Que tal comunidad de hardwaremx este tutorial ya tiene tiempo que lo realice sin embargo a los que apenas se inician en el lenguaje de programacion interpretado como lo es php aqui les traigo este tutorial basico de una web modular.
Antes que nada vamos a nesesitar algunos conocimientos previos de los lenguajes php , html y css, cabe mensionar que pueden lograr crear la web modular sin estos conocimientos pero les costara un poco mas de trabajo, bueno para comenzar vamos a crear un archivo php a el cual nombraremos:
Contenido.php
el metodo de seleccion switch () ya lohempos utilizado en otros lenguajes como java este funciona de la siguiente manera cuando switch recibe un parametro por ejemplo switch(‘miwebprincipal’) se ira comparando en cada caso (case) aver si existe alguno que contenga ese nombre por ejemplo:
el break; sirve para que no se siga comparando con los demas casos y hay termine de comparar y asi muestra lo que tenga ese caso. Ahora nesesitamos incluir ese Contenido.php a un index o alguna pagina principal entonces creamos:
Index.php
Bueno ya saben la inclusion del contenido la haremos en la parte qeu sutedes gusten del index esto ya sera para lo estetico y lo hacemos de esta forma:
los links para que nuestro contenido sea llamado lo se deven crear asi:
este es el Css que hice para mi ejemplo pero ustedes pueden crearlo o modificarlo a su gusto:
Aqui dejo una capura de pantalla:
Les dejaria el demo que lo tengo colgado en una web donde soy colaborador sin embargo no se si se considere spam asi que mejor les dejo el enlace de descarga para que lo monten en su servidor local:
DESCARGA:
http://www.mediafire.com/?3af0cdzvmdytgvg
Antes que nada vamos a nesesitar algunos conocimientos previos de los lenguajes php , html y css, cabe mensionar que pueden lograr crear la web modular sin estos conocimientos pero les costara un poco mas de trabajo, bueno para comenzar vamos a crear un archivo php a el cual nombraremos:
Contenido.php
<?
switch ($_GET["seccion"]){
case 'noticias';
include("modulos/principal.php");
break;
case 'linux';
include("modulos/linux.php");
break;
case 'descargar';
include("modulos/descargar.php");
break;
default:
include("modulos/principal.php");
}
?>
el metodo de seleccion switch () ya lohempos utilizado en otros lenguajes como java este funciona de la siguiente manera cuando switch recibe un parametro por ejemplo switch(‘miwebprincipal’) se ira comparando en cada caso (case) aver si existe alguno que contenga ese nombre por ejemplo:
<?
$query='miwebprincipal'
switch($query){
//en este caso entrara
case 'miwebprincipal':
//aqui entrara
break;
}
?>
el break; sirve para que no se siga comparando con los demas casos y hay termine de comparar y asi muestra lo que tenga ese caso. Ahora nesesitamos incluir ese Contenido.php a un index o alguna pagina principal entonces creamos:
Index.php
<!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>Ejemplo de Web Modular</title>
<style>
body{
padding:0;
margin:0 auto;
background:url(imagenes/bck.jpg) repeat-x;
}
.principal{
padding:0;
margin:0 auto;
width:900px;
background:#cccccc;
border-right: 1px solid #000000;
border-left: 1px solid #000000;
}
.cuadros{
background:#ffffff; height:400px;
border-right: 1px solid #000000;
border-left: 1px solid #000000;
border-top: 1px solid #000000;
border-bottom: 1px solid #000000;
}
.link{
height:20px;
}
A:link {
FONT-SIZE: 13px;
COLOR:#FF3300;
FONT-FAMILY: arial, helvetica, verdana, sans-serif;
text-decoration: none;
}
A:visited {
FONT-SIZE: 13px;
COLOR:#FF3300;
FONT-FAMILY: arial, helvetica, verdana, sans-serif;
TEXT-DECORATION: none;
}
A:active {
FONT-SIZE: 13px;
COLOR:#FF3300;
FONT-FAMILY: arial, helvetica, verdana, sans-serif;
TEXT-DECORATION: none;
}
A:hover {
font-size: 13px;
color: #7ed9ff;
font-family: arial, helvetica, verdana, sans-serif;
}
</style>
</head>
<body>
<center>
<div align="center"><img width="900" height="100" src="imagenes/header.gif" alt="Cabecera" /></div>
<div>
<table width="900" border="0" cellspacing="10" cellpadding="1">
<tr>
<td width="250">
<div>
<div><a href="index.php?seccion=principal"><B>Principal</B></a></div>
<div><a href="index.php?seccion=linux"><B>Apache en Linux</B></a></div>
<div><a href="index.php?seccion=descargar"><B>Descargar Template</B></a></div>
</div>
</td>
<td>
<div>
<div style="border: 0px solid #D1D1D1; OVERFLOW-y: scroll; OVERFLOW-x: hidden; HEIGHT: 400px">
<?
include("contenido.php");
?>
</div>
</div>
</td>
</tr>
</table>
</div>
<table width="900" border="2" cellspacing="0" cellpadding="5">
<tr>
<td align="center">Copyright 2010 www.mixinformatico.com</td>
</tr>
</table>
</center>
</body>
</html>
Bueno ya saben la inclusion del contenido la haremos en la parte qeu sutedes gusten del index esto ya sera para lo estetico y lo hacemos de esta forma:
<?
include("contenido.php");
?>
los links para que nuestro contenido sea llamado lo se deven crear asi:
<a href="index.php?seccion=principal"><B>Principal</B></a>
este es el Css que hice para mi ejemplo pero ustedes pueden crearlo o modificarlo a su gusto:
<style>
body{
padding:0;
margin:0 auto;
background:url(imagenes/bck.jpg) repeat-x;
}
.principal{
padding:0;
margin:0 auto;
width:900px;
background:#cccccc;
border-right: 1px solid #000000;
border-left: 1px solid #000000;
}
.cuadros{
background:#ffffff; height:400px;
border-right: 1px solid #000000;
border-left: 1px solid #000000;
border-top: 1px solid #000000;
border-bottom: 1px solid #000000;
}
.link{
height:20px;
}
A:link {
FONT-SIZE: 13px;
COLOR:#FF3300;
FONT-FAMILY: arial, helvetica, verdana, sans-serif;
text-decoration: none;
}
A:visited {
FONT-SIZE: 13px;
COLOR:#FF3300;
FONT-FAMILY: arial, helvetica, verdana, sans-serif;
TEXT-DECORATION: none;
}
A:active {
FONT-SIZE: 13px;
COLOR:#FF3300;
FONT-FAMILY: arial, helvetica, verdana, sans-serif;
TEXT-DECORATION: none;
}
A:hover {
font-size: 13px;
color: #7ed9ff;
font-family: arial, helvetica, verdana, sans-serif;
}
</style>
Aqui dejo una capura de pantalla:
Les dejaria el demo que lo tengo colgado en una web donde soy colaborador sin embargo no se si se considere spam asi que mejor les dejo el enlace de descarga para que lo monten en su servidor local:
DESCARGA:
http://www.mediafire.com/?3af0cdzvmdytgvg
Volver arriba
...
