Introducción al diseño web con PHP + CSS – Parte II -
Categories: Tutoriales - Tags: css, diseño web, PHPEn 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;} |
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" />
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> |
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;} |
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> |
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;} |
En el próximo tutorial les explico como cargar las páginas con la función include() de PHP. Saludos!!
todavia espero el resto del tutorial. alguna novedad?
Hace mucho que esta escrito. Lo podes encontrar en http://masquewordpress.com/tutoriales/introduccion-…