4. pasar de PSD a HTML y CSS | maquetar un menú

Ahora que tenemos la estructura básica de la página definida, el siguiente paso es maquetar la cabecera, donde encontramos dos menús. Uno a cada lado del logotipo.

diseñar y maquetar un menú en página web

Podemos ir trabajando sobre el archivo index.html desde donde hemos empezado para ir viendo evolucionar la página, aunque te aconsejo que cada vez que vayas a dar un paso importante, sobre todo al principio, hagas una copia de seguridad de lo que tienes hasta ahora. En caso de que «experimentando» con el código pierdas lo que tenías, siempre puedes recurrir a tu copia de seguridad. 🙂

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <title>Título de la página</title>
    <link href="estilos/home.css" rel="stylesheet" type="text/css">
    </head>
    <body>
        <div id="contenedor_global">
            <div id="cabecera">
            	cabecera
            </div>

            <div id="contenido">
            	contenido
            </div>

            <div id="pie">
            	pie
            </div>
        </div>
    </body>
</html>

Aquí tenemos nuestro código. Evidentemente, lo nuevo que vamos a colocar irá entre las etiquetas

<div id="cabecera">
</div>

Si volvemos (como siempre) a echar un vistazo a nuestro querido wireframe, podemos ver que la cabecera a su vez se divide en 3 divs: un menú izquierdo, el logotipo al centro y un menú en la parte derecha de la página, que no es más que una continuación del primer menú. Seguro que ya tienes en tu cabeza cómo se maquetarían estos tres divs. 🙂

<div id="cabecera">
    <div id="menu_izquierda">
    </div>

    <div id="logotipo">
    </div>

    <div id="menu_derecha">
    </div>
</div>

Para maquetar un menú en una página web, has de saber en primer lugar, que lo más apropiado es hacerlo con listas. A nivel semántico es lo más correcto ya que los botones de un menú no dejan de ser una lista de enlaces a otra/s página/s. Te dejo un enlace sobre listas en html que puede servirte como referencia antes de empezar. Ahí msimo podrás comprobar que existen dos tipos de listas:

1

ordenadas, que se maquetarán entre las etiquetas

<ol>
    <li></li>
</ol>
2

y desordenadas, cuyas etiquetas son:

<ul>
    <li></li>
</ul>

Donde <li> </li> será cada enlace o botón que se encuentre dentro del menú.

Para los menús utilizaremos las listas desordenadas. Y así, el código html para la cabecera quedaría de la siguiente forma:

<div id="cabecera">
    <div id="menu_izquierda">
        <ul>
            <li><a href="" title="">Inicio</a></li>
            <li><a href="" title="">Nosotros</a></li>
            <li><a href="" title="">Servicios</a></li>
        </ul>
    </div>

    <div id="logotipo">
    </div>

    <div id="menu_derecha">
        <ul>
            <li><a href="" title="">Proyectos</a></li>
            <li><a href="" title="">Blog</a></li>
            <li><a href="" title="">Contacto</a></li>
        </ul>
    </div>
</div>

Ya tenemos los menús, ahora tenemos que darle estilo. Debemos tener varias cosas en cuenta.

  1. Cada enlace tiene una pequeña ilustración que lo acompaña cuando la página que señala está activa o simplemente cuando el ratón pasa por encima.
  2. Los textos están en mayúsculas. (Esto puede hacerse con estilo en vez de escribir el código HTML con letras mayúsculas).
  3. Cada enlace tiene tanto por encima como por debajo una línea de puntos.

Estos son los tres aspectos más importantes (no tan comunes) que veo a tener en cuenta a la hora de maquetar. ¿Cómo solucionamos cada uno de ellos y cuáles son los atributos css correspondientes?

  1. background: url(/imagenes/icono.png) 0 0 no-repeat; || será el fondo [background] que hará aparecer el icono que acompaña al enlace.
  2. text-transform: uppercase; || convierte los textos en minúsculas a mayúsculas.
  3. border-bottom:1px dotted #7f7f7f; || Crea un borde en la parte baja del contenedor que sostiene el elemento con 1 píxel de grosor, punteado y del color que se le indica, en este caso #7f7f7f.

Te puede sonar a chino, pero enseguida lo entenderás y te será muy fácil utilizarlo. Veamos los estilos completos para cada uno de los elementos. Para que el menú izquierdo quede funcionando perfectamente, los estilos quedan de la siguiente manera:

#cabecera {
     width:930px;
     padding:0px;
     height:178px;
     margin:0px;
}
#menu_izquierda {
	width:221px;
	float:left;
        margin:0;
}
#menu_izquierda ul {
	width:136px;
	float:left;
	margin:0px;
	padding:0px;
	border-top:1px dotted #7f7f7f;
}

#menu_izquierda ul li {
	width:136px;
	height:27px;
	margin:0px;
	padding-top:10px;
	color:#222;
	float:left;
	text-transform:uppercase;
	border-bottom:1px dotted #7f7f7f;
}

#menu_izquierda ul li a{
	width:112px;
	float:left;
	padding-left:22px;
	color:#222;
}

#menu_izquierda ul li a:hover{
	color:#9d8e6e;
	background:url(../imagenes/icono-menu.png) 0 0 no-repeat;
}

#menu_izquierda ul li a.activo {
	color:#9d8e6e;
	background:url(../imagenes/icono-menu.png) 0 0 no-repeat;
}

¿Qué podemos no entender de aquí? En principio y como se puede comprobar, procuro asignar a cada elemento sus atributos comunes. Como comunes pueden ser: width, height (no siempre es necesario), float, margin y padding.

  • width: es el ancho del contenedor.
  • height: se refiere a la altura.
  • float: a que lado flota el contenedor, izquierda o derecha.
  • margin: son los márgenes externos al contenedor.
  • padding: son los márgenes internos en el contenedor.

Aquí te paso una chuleta de css para estos apuntes básicos. ¡Imprescindible!

Ahora vamos a ver paso a paso el código css:

Al #menu_izquierda le hemos dado su ancho correspondiente (según archivo.psd que hemos recibido del diseñador) y le decimos que flote a la izquierda. De aquí podemos deducir que para el #menu_derecha el código sería el siguiente:

#menu_derecha {
	width:221px;
	float:right;
}

El siguiente elemento #menu_izquierda ul corresponde a la lista que está dentro del div #menu_izquierda. A esta lista le estamos dando también los valores para el ancho, para que flote a la izquierda, un margen de 0px a cada lado exterior de su contenedor y el detalle de 1px de ancho para el borde superior. Este pequeño detalle, nos va a permitir que todos los elementos de la lista (<li>/<li>) estén rodeados tanto arriba como abajo por esa línea de puntos intermitentes, ya que le vamos a dar una línea sobre el contenedor total de la lista y una línea en el pie de cada uno de los elementos internos de la lista.

Con #menu_izquierda ul li, nos estamos refiriendo a cada uno de los elementos de la lista (sea enlace o no) y cuando escribamos #menu_izquierda ul li a entonces estamos señalando a los enlaces de los elementos de la lista. ¿Fácil, no? 🙂

Bien, entonces a #menu_izquierda ul li le damos un ancho, un alto, un margin general igual a 0, un margin interior superior (padding-top) de 10 px para que haya separación entre un elemento y otro. Le asignamos un color que recogemos del archivo.psd, le decimos con text-transform:uppercase que las letras las ponga en mayúsculas y le asignamos un borde inferior de línea discontinua.

La siguiente etiqueta #menu_izquierda ul li a hace referencia a cada uno de los enlaces que hay dentro de cada elemento de la lista. Mostramos un enlace de la siguiente manera:

<a href="url de la página" title="descripción del enlace">
    enlace a la página
</a>

Para saber más sobre enlaces en html te dejo un buen link de referencia. Y seguimos con esta etiqueta, a la que le hemos dado los valores comunes de ancho, float, color y un padding-left de 22px. ¿Por qué? con este margen interior izquierdo, le estamos dando espacio para que cuando el cursor pase por encima de cada enlace el icono que acompaña a cada uno aparezca a su izquierda.

Cuando vemos una etiqueta como esta, #menu_izquierda ul li a:hover, el hover nos está indicando que así va a reaccionar la etiqueta cuando pasemos el ratón por encima. Entonces le decimos que cuando el ratón pase por encima del enlace que está dentro del elemento de la lista cuyo div que lo contiene es #menu_izquierda, debe asignarle un color y una imagen de fondo que defiinimos de la siguiente manera:

background:url(../imagenes/icono-menu.png) 0 0 no-repeat;

Le estamos indicando que el fondo debe extraerlo de la siguiente url, que su posición debe ser 0 (0px alto) 0 (0 px ancho) y que no se repita, que solo se muestre una vez.

Por último tenemos #menu_izquierda ul li a.activo. Aquí leemos que hay un enlace de la lista a la cual hemos asignado una clase y la hemos llamado activo. Esta clase servirá para indicarnos en qué página nos encontramos y los valores que le hemos dado son el color y el background, los mismos que a #menu_izquierda ul li a:hover. ¿Casualidad? Por supuesto que no. Queremos que cuando el elemento esté activo se comporte de la misma manera que cuando el ratón pase por encima, es decir, con el icono al lado del nombre del enlace.

diseñar y maquetar un menú en página web

¡Ya sabemos maquetar un menú! En el siguiente enlace puedes ver cómo ha quedado la cabecera después de estas instrucciones. Y si quieres trastear un poco el código, no tienes más que descargarlo. ¡Suerte! Y hasta el siguiente post. 🙂


  1. pasar de PSD a HTML y CSS | definiendo los pasos
  2. pasar de PSD a HTML y CSS | recorte y optimización de imágenes para web
  3. pasar de PSD a HTML y CSS | maquetando una web desde cero
  4. pasar de PSD a HTML y CSS | maquetar un menu
  5. pasar de PSD a HTML y CSS | introducir un vídeo de vimeo o youtube
  6. pasar de PSD a HTML y CSS | crear varias columnas en html y css
  7. pasar de PSD a HTML y CSS | maquetar el pie de página

4 comentarios en «4. pasar de PSD a HTML y CSS | maquetar un menú»

  1. estimada, encuentro de gran utilidad su post sin embargo un problema de visualización me dificulta mucho ver correctamente el código, te pido que lo revises por favor. Gracias!

    • Muchas gracias por tu comentario Gabriel. Espero que el problema esté solucionado y puedas visualizar correctamente la página. ¡Un abrazo!

Los comentarios están cerrados.