01May 2009 7 Comments */?>

Introducción al diseño web con PHP + CSS – Parte III –

Categorías: Tutoriales - Tags: , ,

En el primer post vimos como sería la estructura básica de una web y su correspondiente código HTML. En el segundo tutorial le aplicamos estilo mediante CSS y le añadimos una barra de navegación.

Bien , en esta última parte del tutorial vamos a ver como vamos a ir cargando las diferentes “secciones” de la web en lo que sería la columna izquierda de nuestra web. Para ello necesitamos comprobar el valor de la variable $_GET[‘page’] y segun sea su valor cargar un contenido u otro. Para ello hacemos lo siguiente:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
       <?php
//Este código lo ponemos dentro del div column_left que es el contenido que vamos a ir cambiando.
//Se comprueba que la variable page esta creada y su valor
if(isset($_GET['page']) && $_GET['page']=='registrarse'){
// include registrarse
include('include/in-registrar.php');
//Si no , se comprueba el valor nuevamente
} elseif(isset($_GET['page']) && $_GET['page']=='login'){
// include login
include('include/in-login.php');
//Si no , se comprueba el valor nuevamente
} elseif(isset($_GET['page']) && $_GET['page']=='contacto'){
// include contacto
include('include/in-contacto.php');
// En cualquier otro caso , mostramos el home
} else {
include('include/in-home.php');
}
?>

Con esto tendriamos la web casi echa, con una columna derecha fija y la parte izquierda dinámica. Podriamos añadir un poquito más de estilo CSS para darle forma, resultando nuestro archivo final asi:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
/* ------------------------------
Estructura de la página
------------------------------ */
 
/*
#container tiene un ancho absoluto de 780 pixeles.
El ancho de los elentos internos estan establecidos a auto,
por lo que todos tendrán el ancho del elemento contenedor.
*/
#container{width:780px; margin:0 auto;
border:7px solid #CCCCCC;
padding:20px;
}
p{
font:11px Verdana;
text-align:justify;
}
/***************Header**********************/
#topbar{width:auto; display:block; height:80px;
border:1px solid #191919;
}
                 /****Barra de navegación*****/
#navbar{width:auto; display:block; height:24px;}
#navbar ul, #navbar ul li{padding:0; margin:0; list-style:none; float:left;}
#navbar a{color:#FFFFFF; font-weight:bold;}
#navbar a:hover{color:red;}
#navbar li a:link, #navbar li a:visited {background:#444444; text-decoration:none; height:24px; line-height:24px; display:inline; float:left; width:auto; padding:0px 10px;}
 
/***************Contenido principal************/
#main{width:auto; display:block;}
#column_left{width:560px; margin-right:20px; float:left;}
#column_right{width:200px; float:left;}
 
/*
div.spacer, soluciona el alto de #main en diseños con 2 columnas
*/
div.spacer{clear:both; height:10px; display:block;}
 
/***************footer*********************/
#footer{width:auto; display:block; height:24px;
border-top:1px solid;
text-align:center;
}

Y el código HTML de la siguiente forma:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitio nal.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
 
<link href="css/default.css" rel="stylesheet" type="text/css" />
<title>page title</title>
</head>
 
<body>
<div id="container">
               <div id="topbar"> ...Contenido del topbar donde podemos poner un logo por ej </div>
               <div id="navbar"><ul>
                                            <li><a href="index.php?page=home"> Home</a></li>
                                            <li><a href="index.php?page=registrarse"> Registrarse </a></li>
                                            <li><a href="index.php?page=login"> Login</a></li>
                                            <li><a href="index.php?page=contacto"> Contacto</a></li>
                                            </ul>
                </div>
<!-- Sección principal en la cual cargaremos las páginas usando variables URL y la función de PHP include() -->
               <div id="main">
                     <div id="column_left"> 
                     <?php
//Este código lo ponemos dentro del div column_left que es el contenido que vamos a ir cambiando.
//Se comprueba que la variable page esta creada y su valor
if(isset($_GET['page']) && $_GET['page']=='registrarse'){
// include registrarse
include('include/in-registrar.php');
//Si no , se comprueba el valor nuevamente
} elseif(isset($_GET['page']) && $_GET['page']=='login'){
// include login
include('include/in-login.php');
//Si no , se comprueba el valor nuevamente
} elseif(isset($_GET['page']) && $_GET['page']=='contacto'){
// include contacto
include('include/in-contacto.php');
// En cualquier otro caso , mostramos el home
} else {
include('include/in-home.php');
}
?>
                     </div>
                     <div id="column_right"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p></div>
<!--  Esta sección soluciona un problema con el diseño CSS, forzando la altura de la sección main a ocupar la misma altura que las dos columnas(#columnt_left and #column_right) -->
                     <div class="spacer"></div>
<!-- close #main content -->
                </div>
<!-- close #container -->
    <div id="footer"> Ejemplo realizado para <a href="http://masquewordpress.com">Timersys</a>. </div>
</div>
</body>
</html>

Bueno , espero que esto les haya servido de ayuda. Porfavor comentes si ven algun que otro error o quieren cambiar algo.
Ejemplo online
Descargar ejemplo

Damián Logghe

Programador freelancer y emprendedor en sueños. Contento de ser mi jefe y poder hacer lo que me gusta. WordPress es mi principal fuente de ingreso y me escribo tanto para ayudar como para tener una guia de memoria. Quieres contratarme? Déjame un mensaje.

More Posts - Website

Follow Me:
TwitterFacebookLinkedInGoogle Plus

  • cristhoper

    justo acabo de pasar un curso basico de asp.net donde me encantaron los masterPage y quiero hacer algo similar en php .. sta guia m cae de perilla

    Gracias!!

  • Alejandro

    Hola!
    como poner un enlace dentro del div en el que se inserta la información dinámicamente y que este enlace a su vez inserte la información en ese mismo div?

  • Luis

    Hola..!!
    Bueno una vez mas felicitaciones por el tutorial. Esta realmente excelente. Ahora me surgio un inconveniente en la tercera parte ; donde se realizan los "include". Sucede que trate de insertar una pagina en php (un buscador) que consta de dos partes. Una parte en html (el formulario de busqueda) y otra toda en php , que no es otra cosa mas que el script o codigo que realiza el acceso a la bd , la consulta y muestra los datos encontrados. Todo esto en una misma pagina php. Cuando pongo el modelo a funcionar , la parte del formulario de busqueda funciona perfecto; pero cuando aprieto el boton "buscar" el modelo no me muestra los datos encontrados y me lleva directamente a la home; sin dar ningun error. Ahora la pagina de busqueda , probada "afuera del modelo" funciona perfectamente. Agradeceria que me orientaras, me gustaria saber que estoy haciendo mal. Saludos.

    • Probablemente el problema sea la dirección de tu formulario . Recuerda paserle la variable get de tu página. Por ej: action="index.php?page=formulario" .
      Saludos

      • Luis

        Definitivamente lo tuyo, tambien es la docencia. Muchas gracias.

  • Juan

    hola, vi este ejemplo y esta mnuy bueno estoy buscando algo asi, pero lo mio seria que el menu fueraa la izquierda, y que ese menu sea tipo abanico, que se Habra un submenu dentro del menu principla, cuando doy clik, cuando doy clik en otro se cierre ese y se abra el otro donde di clik, y que la informacion de muestre en el centro, al lado izquierdo estaria asi bien que seria fijo, pero que cuando se muestre la informacion el abanico se mantenga abierto donde le di el clik, alguien me pudiera ayudar, soy Nuevo en esto, me pueden escribir a [email protected]

  • Miguel De La Vega

    Me han ayudado mucho tus tutoriales
    Ahora sólo me queda una duda
    ¿Cómo puedo hacer para que el contenido del menú que se acaba de realizar (Home, Registrarse, Login y Contacto), aparezca en la columna izquierda de la página?
    Se me complican esos enlaces
    Saludos,