Maquetar una página con CSS II

  • Por
Explicamos la creación de la cabecera de la página, que se simplificará al máximo para hacer el ejercicio más facil.

Continuamos el ejercicio práctico para realizar la maquetación de una página paso a paso con capas y hojas de estilo en cascada. Se puede ver el artículo anterior de esta serie en Maquetar una página con CSS.

La cabecera de la página

La imagen de la parte de arriba de la página la vamos a colocar en un único archivo gráfico. Es lo más cómodo para este diseño, pues la cabecera no tiene otro motivo que decoración.

<div id="cabecera"><img src="images/cabecera.jpg" width="700" height="106" alt="La Web del Invierno" border="0"></div>

Vemos que es una simple imagen, pero atención, que tenemos que colocar el </div> a continuación de <img> sin ningún espacio ni salto de línea, porque si no, Internet Explorer, nos introducirá un pequeño márgen debajo de la imagen, que queremos evitar.

Los atributos de estilo definidos para la cabecera son las dimensiones de la capa, que queremos que sean las mismas que las de la imagen. Aunque en este caso podríamos habernos ahorrado definir esos valores porque son los que se tomarían por defecto.

#cabecera{ 
height : 106px; 
width: 700px; 
}

La barra de navegación

Vamos con la capa utilizada para definir la barra de navegación horizontal que hay debajo de la cabecera.

<div id="navegador"> 
<a href="#" class="enlacenav">Portada</a> | 
<a href="#" class="enlacenav">Invierno</a> | 
<a href="#" class="enlacenav">Diciembre a marzo</a> | 
<a href="#" class="enlacenav">La chimenea</a> | 
<a href="#" class="enlacenav">Deportes de invierno</a> | 
<a href="#" class="enlacenav">Contacto</a> 
</div>

Como se puede ver, simplemente hemos definido una serie de enlaces dentro de una capa. Hay que fijarse que además los enlaces tienen una clase, llamada "enlacenav", que utilizaremos para darle un estilo específico a a estos enlaces, independiente del definido por defecto en la página.

Por lo que respecta a la capa, se define un color y una imagen de fondo, unos márgenes internos (atributo padding) y un borde, tanto para la parte de arriba de la capa como para la de abajo.

#navegador{ 
background : #F5F4C3 url(images/fondonav.gif); 
padding : 3px 10px 5px 10px; 
border-top : 1px solid #cccccc; 
border-bottom : 1px solid #cccccc; 
}

Para los estilos de los enlaces utilizamos una clase. Para definir los estilos de cada uno de los estados de los enlaces (visitados, activos, no visitados, etc), se utilizan las pseudo-clases VISITED, ACTIVE, FOCUS, LINK Y HOVER. Simplemente definimos el color de los enlaces, el mismo para todas las pseudo-clases, menos para HOVER, que tiene un color distinto. HOVER es el estado del enlace cuando el puntero ratón está situado encima. En este caso, cuando el ratón esté encima, cambiará de color.

A.enlacenav, A.enlacenav:VISITED, A.enlacenav:ACTIVE, A.enlacenav:FOCUS, A.enlacenav:LINK{ 
color: #494E6B; 
} 
A.enlacenav:HOVER{ 
color: #3F7DE3; 
}

Podemos ver cómo queda el ejercicio realizado hasta el momento.

Autor

Miguel Angel Alvarez

Miguel es fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Comenzó en el mundo del desarrollo web en el año 1997, transformando su hobby en su trabajo.

Compartir

Comentarios

Isabel

03/2/2006
Solo está explicada la forma de hacer la cabecera, y el resto del ejercicio???
Gracias

RESPUESTA

Eso lo puedes ver en los artículos siguientes. Tienes tanto enlaces al artículo siguiente como al anterior y al índice del manual donde está este artículo. Están después de la firma del colaborador.

nawelx

27/7/2006
Si, los codigos ke faltan explicar van en el CSS. en esa hoja, en realidad el resto es definir de la misma forma todas las otras capas ke vas a usar, altura, ancho, centrado etc... de eso se trata el CSS. todos los contenidos estan en una hoja HTML, y todos los estilos, efectos, etc... van separados en la hojita CSS. eso ke kiere decir, ke si cambiamos los valores de la hoja CSS. automaticamente cambiariamos el formato de la hoja HTML. es una manera mas fasil de trabajar, pero a veces se complica....
chau! espero les sirva de ayudita, estos son conceptos basicos , ke no estan explicados...

butter

11/12/2006
el ejercicio continua en:
http://www.desarrolloweb.com/articulos/1825.php

Cesar Maldonado

16/3/2009
muchas gracias! por el mini manual de maqueteo
me a ayudado bastante.

lo malo es que tuve que averiguar en otros link donde se declaraban los <div> porque en el manual mesclan la lista css con la pagina central html y se produce una confucion que va en el css y que va en el html
muchas gracias me ha servido mxo

estela_lopez

10/4/2009
agradecimiento
Quiero agradecer la ayuda, soy estudiante y estoy aprediendo a usar html y css gracias por su ayuda

estela_lopez

13/4/2009
duda
estoy realizando una pagina web utilizando css para mi tarea pero los enlaces no se como hacerlo necesito de su ayuda gracias

Strategy pattern

03/9/2009
es correcta esta interpretacion ?
llegue a la siguiente conclusion: me parece a mi que CSS no es ni mas ni menos que una forma(reducida) de aplicar el paradigma orientado a objetos, para el diseño estetico de una interfaz web. es correcto ?

Strategy pattern

03/9/2009
correccion sutil
no seria mejor decir: "...los enlaces PERTENECEN a la clase, llamada "enlacenav"..."
en vez de la palabra "TIENEN" ??

-- Como se puede ver, simplemente hemos definido una serie de enlaces dentro de una capa. Hay que fijarse que además los enlaces TIENEN una clase, llamada "enlacenav", --

Patricia

28/10/2009
asi deberia quedar
Creo que el ejercicio tiene un error... etiqueta head está mal ubicada por eso no funcionan los vinculos:



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>La web del invierno</title>
<link rel="STYLESHEET" type="text/css" href="estilo.css">
<div id="contenedor"><img src="imagenes/cabecera.jpg" width="700" height="106" /></div>
<div id="navegador">
<a class="enlacenav" href="#">Portada</a>
|
<a class="enlacenav" href="#">Invierno</a>
|
<a class="enlacenav" href="#">Diciembre a marzo</a>
|
<a class="enlacenav" href="#">La chimenea</a>
|
<a class="enlacenav" href="#">Deportes de invierno</a>
|
<a class="enlacenav" href="#">Contacto</a>
</div>
</head>

Angel

14/5/2010
Gracias
Gracias a los que comparte sus conocimento y por publicarlos ya que aveces uno no puede solventar un cursos de estos pero creo que a practica y a fallas que esto es lo mas divertido aprendemos y yo tambien comparto mis conocimientos y css es lo que necesito aprender jajajajaja bueno saludos y gracias por compartir

Eduardo ( el Gio )

30/5/2010
un ameno comentario
primero que todo, felicitarte por tu web me parece exelente y un ejemplo a seguir para los que queremos levantar nuestras propias webs, tambien agradecerte por toda la ayuda que brindas a los principiantes.

respecto a este articulo solo te quiero preguntar ¿porque se incluyo una imagen en el div de la cabecera?, ¿no es mas conveniente definir esta imagen como fondo para esta capa?, ¿de adquirir esta practica estamos rompiendo alguna regla de la W3C? ¿se hara mas ineficiente la pagina? o ¿hay alguna desventaja? Estare visitando la pagina en espera de la respuesta.

Bendiciones, una vez mas, Exelente trabajo el que hacen, les deseo exitos en sus negocios y su vida personal

francisco

24/8/2010
ayudenme
en k parte va esto
"A.enlacenav, A.enlacenav:VISITED, A.enlacenav:ACTIVE, A.enlacenav:FOCUS, A.enlacenav:LINK{
color: #494E6B;
}
A.enlacenav:HOVER{
color: #3F7DE3;
}
" a donde lo pongo ayudenme por favor

jorge_velas

31/8/2010
personalizar
buenas tardes

hay forma de embeber una fuente en html o en el css.... igual como se hace en flash... gracias

Luiz

13/6/2011
Falta en el CSS del ejemplo el ENLACENAV
Muy claro el tutorial, gracias, pero en el ejemplo falta colocar en el css el enlacenav para ver el hover.

clauditalujan

18/7/2011
Gracias
el articulo es excelente!!

dkor

18/7/2011
dkor+artista visual
esta es mi pagina web q si alguien quiere revisarla, simple publicidad, gracias.

http://www.dkor.cl/

fernando

13/10/2011
no puedo guardar con extencion .html
hola mi problema es que guardo el trabajo con extencion .html pero no se guarda sigue siendo .txt que debo hacer?... gracias por la respuesta

Osuna

17/1/2012
expliquen mejor
No entendi :D amo a mi mejor amiga Ambar!;<3

lucas roman

05/3/2012
menu desplegable
tengo un pequeño problemon mi datos li del menu desplegable, me aparecen encimados, y no se cual puede ser el problema, o mejor dicho cual es la solucion...
agregue un padding le agregue margin, le quite y le puse text decoration, le puse flost , jajajaj en resumen me complique la vida jajaja aca dejo mi codigo.

<style>
body {background-color:#999}
#contenedor{background-color:#0F6;height:500px;width:750px;margin:auto}
#menu{padding-left:0px;
margin-left:0px;
background-color:#09C;
width:750px;
height:30px;
}

#menu li {list-style:square;float:left;}
#menu li a{display:block;
width:205px;
left:30px;
background:#36F;
background-color:#09F;
border:double;
padding:20px;
margin:0px 10px 0px 10px
text-align:center;
color:#000;
margin:auto;
font-family:Verdana, Geneva, sans-serif;
font-size:14px;
font-weight:bold;
}
#menu li a:hover{background:navy;
border-color:transparent;
color:#06C;
margin:0px 10px 0px 10px;
position:absolute;
}
#menu li ul {display:none;
position:absolute;
}
#menu li ul li{display:block;
float:none;
position:relative;
padding:0px;}
#menu li:hover ul{display:block;
padding-left:0px;}
#menu li ul li a {display:block;
background-color:#0C9;
}



</style>
</head>

<body>
<div id="contenedor">
<div id="menu">
<li> Nosotros
<ul><a href="#">sub menu1</a></ul>
<ul><a href="#">sub menu2</a></ul>

</li>
<li> atracciones
<ul><a href="#">sub menu1</a></ul>
<ul><a href="#">sub menu2</a></ul>

</li>
<li> cuentas
<ul><a href="#">sub menu1</a></ul>
<ul><a href="#">sub menu2</a></ul>
<ul><a href="#">sub menu3</a></ul>

</li>

</div>
</div>

Erixon Cedeño

08/9/2012
Una duda
Buenas noches, excelente tutorial, tengo un pequeño problema, al realizarlo el borde de la barra de navegacion continua hasta el final de los bordes de la pagina no queda justo a los 700px, revise el codigo esta bien, revise el codigo de la pagina de muestra que ponen y está igual, pero esto solo pasa con la que hice yo, alguna explicacion de por que sucede esto? gracias de antemano.

Aleto7

08/5/2015
pregunta
gracias por su capacidad enorme de compartir sus conocimientos.
Quiero saber como encuentro la barrita que separa cada titulo de las paginas:
ejemplo:
portada (barrita) disenos (barrita) contacto (barrita)...etc.
Muchas gracias.