Introducción al diseño web con PHP + CSS – Parte II –
En el primer artículo vimos como quedaria la estructura de index.php mediante código html y explique un poco las diferentes secciones que tendrá la página web.
En este tutorial vamos a dar forma a esta estructura mediante una hoja de estilo en cascada o como mayormente conocemos , una hoja CSS.
Lo primero que tenemos que hacer es crear un archivo .css que en este caso le voy a poner default.css. Una vez creado lo guardamos en la carpeta CSS de nuestro sitio web. En default.css vamos a definir la estructura 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 | /* ------------------------------ 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;} /***************Header**********************/ #topbar{width:auto; display:block; height:80px;} #navbar{width:auto; display:block; height:24px;} /***************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;} |
/* ------------------------------ 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;} /***************Header**********************/ #topbar{width:auto; display:block; height:80px;} #navbar{width:auto; display:block; height:24px;} /***************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;}
Como pueden ver los comentarios en CSS a diferencia de html se encierran entre /* …… y….. */
Una vez guardado nuestro archivo default.css solo nos queda linkearlo a nuestro index.php
Para ello introducimos dentro de las etiquetas <head </head> el siguiente código:
<link href="css/default.css" rel="stylesheet" type="text/css" /> |
<link href="css/default.css" rel="stylesheet" type="text/css" />
Añadiendo los links a la barra de navegación
Para la barra de navegación vamos a usar una lista , y cada elemento de la lista será un link.
1 2 3 4 5 6 7 | <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">Contácto</a></li> </ul> |
<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">Contácto</a></li> </ul>
El código CSS para el navbar sería:
1 2 3 4 | #navbar ul, #navbar ul li{padding:0; margin:0; list-style:none; float:left;} #navbar a{color:#FFFFFF; font-weight:bold;} #navbar a:hover{background:#777777;} #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;} |
#navbar ul, #navbar ul li{padding:0; margin:0; list-style:none; float:left;} #navbar a{color:#FFFFFF; font-weight:bold;} #navbar a:hover{background:#777777;} #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;}
Por lo que el código completo quedaría 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 | <!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" /> //ARCHIVO CSS AÑADIDO <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... </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"> Contácto</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"> ...Contenido columna izq... </div> <div id="column_right"> ...Contenido columna der... </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> |
<!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" /> //ARCHIVO CSS AÑADIDO <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... </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"> Contácto</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"> ...Contenido columna izq... </div> <div id="column_right"> ...Contenido columna der... </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>
Y el código CSS completo sería el siguiente:
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 | /* ------------------------------ 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;} /***************Header**********************/ #topbar{width:auto; display:block; height:80px;} /****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{background:#777777;} #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;} |
/* ------------------------------ 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;} /***************Header**********************/ #topbar{width:auto; display:block; height:80px;} /****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{background:#777777;} #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;}
En el próximo tutorial les explico como cargar las páginas con la función include() de PHP. Saludos!!
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.