Diseño web - taller 7
4
INSTITUCION EDUCATIVA TECNICO SUPERIOR INDUSTRIAL Barrancabermeja AREA: Tecnología e Informática – Grado 11 TEMA: Diseño Web VI - Creación de menús básicos Objetivo Partiendo de una misma lista con enlaces, vamos a crear dos menús distintos cambiando sólo 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 alternarán el color de texto y fondo. 1. Copia en el escritorio la página nosotros.html , que se encuentra en la carpeta d:\web. 2. Abre la página 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 asígnale 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, quítale los márgenes, padding, y estilo de la lista. Dale también el formato general al texto como aparece a continuación: 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 línea, un alto específico (height: 2.5em), y el mismo alto de línea (line-height: 2.5em;) para que se centre verticalmente, además de los estilos para conseguir el diseño 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;
-
Upload
jecksonloza -
Category
Documents
-
view
217 -
download
0
Transcript of Diseño web - taller 7
7/31/2019 Diseño web - taller 7
http://slidepdf.com/reader/full/diseno-web-taller-7 1/3
7/31/2019 Diseño web - taller 7
http://slidepdf.com/reader/full/diseno-web-taller-7 2/3
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, quítale el subrayado y dale el color al texto que se muestra a continuación.
Además, 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 ratón, 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
resaltarán, desplazando un poco el elemento. Además, habrá un estilo distinto para el elemento que indique la
página actual.
1. A continuación de la lista del primer ejercicio, en el código HTML, crea una línea horizontal, que rompa el
flotamiento, escribiendo <hr style="clear: both;" />.
2. Copia la lista del ejercicio anterior, debajo de la línea.
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 específico en este selector, así que introduce los estilos que se detallan a continuación:
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/31/2019 Diseño web - taller 7
http://slidepdf.com/reader/full/diseno-web-taller-7 3/3
7. En este caso, por el diseño que buscamos, debemos de aplicar los colores y bordes. Como queremos que los
elementos sean un poco más altos, también podemos aumentar el padding.
Introduce los estilos que aparecen a continuación:
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, añade al selector anterior posicionamiento relativo, y un ligero
desplazamiento hacia la derecha #menu2 li:hover { position: relative; right: -5px; }.
11. Añade 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. Asígnale a alguno de los elementos del menú la clase actual.
15. Guárdalo y pruébalo.
Al terminar, avisa al profesor para su calificación.
Compromiso
De acuerdo al diseño de su sitio web establecido mediante el maquetado, diseñe el menú (horizontal o
vertical) y envíe el archivo en formato .html por correo electrónico a [email protected].
Reutilice el diseño del maquetado para empezar a desarrollar el contenido de su sitio web, teniendo en cuenta
los vínculos del menú. Recuerde que todos los archivos de su sitio web deben estar en un mismo directorio.
Jeckson Enrique Loza Arenas
Docente.
