INSTITUCION EDUCATIVA TECNICO SUPERIOR INDUSTRIAL Barrancabermeja AREA: TEMA: Tecnologa e Informtica Grado 11 Diseo Web VI - Creacin de mens

s bsicos

Objetivo Partiendo de una misma lista con enlaces, vamos a crear dos mens distintos cambiando slo el CSS. Ejercicio 1. Men horizontal Vamos a crear un men, con aspecto de una barra horizontal. Al pasar el cursor por los distintos elementos, estos alternarn el color de texto y fondo.

1. Copia en el escritorio la pgina nosotros.html, que se encuentra en la carpeta d:\web. 2. Abre la pgina copiada con KompoZer. Habilita la vista y haz clic sobre la etiqueta de la barra de estado. 3. Busca la lista de men con los enlaces, y asgnale el id menu1 [<ul id="menu1">]. 4. Abre la herramienta Editor de CSS, pulsando el cono o presionando la tecla F11. 5. Define una nueva regla de estilo creando el selector ul#menu1. 6. Al selector ul#menu1, qutale los mrgenes, padding, y estilo de la lista. Dale tambin el formato general al texto como aparece a continuacin: ul#menu1 { margin: 0; padding: 0; list-style-type: none; font-family: sans-serif; font-size: 16px; font-weight: bold; } 7. Define una nueva regla de estilo creando el selector ul#menu1 li para los elementos del men. 8. A los elementos, les daremos flotamiento a la izquierda (float: left;) para que aparezcan en la misma lnea, un alto especfico (height: 2.5em), y el mismo alto de lnea (line-height: 2.5em;) para que se centre verticalmente, adems de los estilos para conseguir el diseo que buscamos. Introduce los estilos: ul#menu1 li { border-style: solid; border-color: #003300; border-width: 3px 0; background-color: #006600; float: left; height: 2.5em; line-height: 2.5em; }

9. Como todo el texto de los elementos son enlaces, ser en el selector ul#menu1 a en el que definamos el estilo del texto. Declara el selector, qutale el subrayado y dale el color al texto que se muestra a continuacin. Adems, para que llenen a todo el elemento de lista, le hemos dado display: block y un alto del 100%: ul#menu1 a { padding: 0 20px; color: #f0d7b5; text-decoration: none; display: block; height: 100%; } . 10. Para cambiar el color del fondo al posar el ratn, utilizaremos el selector ul#menu1 li:hover, y para cambiar el color del texto, el selector ul#menu1 li:hover a. Declara los siguientes estilos: #menu1 li:hover { background-color: #99ff99; } #menu1 li:hover a { color: #006600; }

Ejercicio 2. Men vertical Vamos a crear un men vertical, que tendr un ancho fijo de 150px. Al pasar el cursor sobre los elementos, se resaltarn, desplazando un poco el elemento. Adems, habr un estilo distinto para el elemento que indique la pgina actual.

1. A continuacin de la lista del primer ejercicio, en el cdigo HTML, crea una lnea horizontal, que rompa el flotamiento, escribiendo <hr style="clear: both;" />. 2. Copia la lista del ejercicio anterior, debajo de la lnea. 3. Cambia el id="menu1" por id="menu2". 4. Define el selector ul#menu2. 5. Sobre este selector, definimos los estilos de fuente, y como antes le quitamos margin y padding. Podemos definir el ancho especfico en este selector, as que introduce los estilos que se detallan a continuacin: ul#menu2 { margin: 0; padding: 0; list-style-type: none; font-family: sans-serif; font-size: 16px; font-weight: bold; background-color: #6FA3FF; padding: 5px 7px; width: 150px; } 6. Define el selector ul#menu2 li para el estilo de los elementos del men.

7. En este caso, por el diseo que buscamos, debemos de aplicar los colores y bordes. Como queremos que los elementos sean un poco ms altos, tambin podemos aumentar el padding. Introduce los estilos que aparecen a continuacin: ul#menu2 li { background-color: #5F82BF; margin:1px; text-align:center; border-color: #B5C4DF; border-width: 1px 5px; border-style: solid double; } 8. Y como el texto es un enlace, cambiamos el estilo de los enlaces del men, con el selector #menu2 a { color: #B5C4DF; text-decoration:none; padding: 5px; display: block;} al que le hemos dado el color y quitado el subrayado. 9. Ya tenemos el estilo normal. Utilizando la pseudoclase :hover, define el estilo para cuando el cursor esta sobre el elemento, declarando el selector #menu2 li:hover. 10. Para conseguir el desplazamiento, aade al selector anterior posicionamiento relativo, y un ligero desplazamiento hacia la derecha #menu2 li:hover { position: relative; right: -5px; }. 11. Aade el estilo #menu2 li:hover a { color: white; } para que el color del enlace cambia al pasar el cursor. 12. Nos queda crear una clase para el elemento seleccionado. Crea una clase llamada actual, declarando el selector #menu2 li.actual. 13. Para conseguir el aspecto que buscamos, define las siguientes propiedades: #menu2 li.actual { border-color: #D1DCEF; border-style: solid; background-color: #7495CF; } #menu2 li.actual a{ color: #EFF5FF; } 14. Asgnale a alguno de los elementos del men la clase actual. 15. Gurdalo y prubalo. Al terminar, avisa al profesor para su calificacin. Compromiso De acuerdo al diseo de su sitio web establecido mediante el maquetado, disee el men (horizontal o vertical) y enve el archivo en formato .html por correo electrnico a jecksonloza@gmail.com. Reutilice el diseo del maquetado para empezar a desarrollar el contenido de su sitio web, teniendo en cuenta los vnculos del men. Recuerde que todos los archivos de su sitio web deben estar en un mismo directorio.

Jeckson Enrique Loza Arenas Docente.