Introducción al diseño web con PHP + CSS - Parte II -

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

Publicado en April 29, 2009 by Damian

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:

/* ------------------------------
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

link_css

Para ello introducimos dentro de las etiquetas <head </head> el siguiente código:

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.

<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:

#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:

<!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>

<div id="main">
<div id="column_left"> ...Contenido columna izq... </div>
<div id="column_right"> ...Contenido columna der... </div>

<div class="spacer"></div>

</div>

<div id="footer"> Ejemplo realizado para <a href="http://blog.timersys.com">Timersys</a>. </div>
</div>
</body>
</html>

Y el código CSS completo sería el siguiente:

/* ------------------------------
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!!

Comparte este artículo: