Demo, el resultado final
Descargate el codigo fuente
Resultado final
Este tutorial es la continuacion de Como disenar una pagina web en Phosothop
Para este tutorial necesitas tener un conocimiento básico de HTML y de CSS, como también un editor de textos (Notepad++, Dreamweaver, Textmate, Vim, etc).
Organización
Vamos a usar esta organización para los archivos y carpetas:
index.html
Código :
<!DOCTYPE html> <html> <head> <title>Juan Perez</title> <link rel="stylesheet" href="style.css"> </head> <body> <div id="contenedor"> <div id="cabecera"> <a href="#" id="logo">Logo</a> <ul id="menu"> <li><a href="#">Portafolio</a></li> <li><a href="#">Bio</a></li> <li><a href="#">Blog</a></li> <li><a href="#">Contacto</a></l1> </ul> </div> <div id="contenido"> </div> </div> <div id="pie"> <p>Juan Perez Copyright © 2010</p> </div> </body>
El codigo es simple, no hay mucho que explicar son solo divs dentro de divs:
style.css
Código :
/* Un pequeno reset a todos los estilos */
*{
margin:0;
padding:0;
border:0;
outline:0;
text-decoration:none;
list-style:none;
font-family:sans-serif;
color:white;
}
body{
}
/* el contenedor de la pagina de 960px de ancho y con un alto definido para ir viendo los cambios */
#contenedor{
width:960px;
margin:0 auto;
height:1000px;
padding:0 25px 20px;
}
/* El resto son estilos vacios que iremos llenando mientras avanzamos */
#cabecera{
}
#logo{
}
#menu{
}
#menu li{
}
#menu li a{
}
#menu li a:hover{
}
#pie{
}Nota: Entre las propiedades del #contenedor, he usado la propiedad margin con un valor de 0 auto, esto es un truco de CSS para centrar un elemento, siempre y cuando este tenga un ancho definido.
El resto aqui
