DISEO WEB

Creacin de men

El men es un elemento fundamental de nuestra web, y hemos de dedicarle una atencin
especial.

Bsicamente, el men es un conjunto de enlaces a las distintas partes de nuestro sitio, y lo ms
habitual es encontrarlo en el html de la pgina, o en un archivo javascript. De momento, vamos a
ver cmo crearlo desde el HTML.

La estructura puede ser cualquiera: podemos hacer un men con divs, con tablas, etc. Pero lo ms
comn, por ser una estructura sencilla de manejar, es utilizar una lista (<ul></ul>), y est forma es
la que explicaremos. Si desactivamos los estilos del navegador (en Firefox, men Ver Estilo de
pgina Sin estilo; IE no tiene esta opcin) o vemos el cdigo fuente de webs como
www.elpais.es o www.marca.es, podremos encontrar que en el lugar del men aparece una lista.

Por tanto, cada elemento del men es un elemento de la lista <li></li>. El elemento, contendr
normalmente un enlace (<a href=""></a>) a una pgina del sitio.

Observa que hemos el men de nuestro ejemplo, siguiendo esta estructura:

********************************************************************************
<ul>
<li><a href="index.html">Inicio</a></li>
<li><a href="flores/index.html">Flores</a></li>
<li><a href="nosotros.html">Nosotros</a></li>
<li><a href="contacto.html">Contacto</a></li>
<li><a href="noticias.html">Noticias</a></li>
</ul>
********************************************************************************

ESTILO BSICO DEL MEN

Una vez creado el men, todo lo referente a su aspecto lo haremos utilizando estilos CSS. Lo ms
cmodo ser darle un id, por ejemplo id="menu". De esta manera podremos referirnos la men
como ul#menu, y a sus elementos como ul#menu li.

Las listas se muestran casi igual en IE que en Firefox, pero en el primero se desplazan hacia la
derecha utilizando margin, y en el segundo padding. Para no liarnos, podemos comenzar por
poner ambos a 0, y ya les daremos algn valor si lo creemos necesario.

Otra cosa caracterstica de las listas son las vietas. Podemos quitarlas con la propiedad list-style-
type: none;, o utilizar una imagen con la propiedad list-style-image: url(imagen.png);.

Al final los elementos de la lista tendrn el aspecto de botones que se pueden pulsar. Pero esto no
es cierto, ya que el enlace slo est en el texto, porque la etiqueta <a> es un elemento en lnea
que se ajusta a su contenido. Podemos cambiar este comportamiento con aplicndole a los
enlaces del men la regla display: block. Esto lo convierte en un elemento de bloque, y hace que
ocupe todo su contenedor.

Daremos un formato apropiado al texto, a los enlaces, y aadiremos un borde a los elementos
para diferenciarlos. Todo esto en funcin del diseo que queramos conseguir.