Unidad 9. Imágenes (VI)

9.6. Pestañas y botones

Si echamos otro vistazo a nuestro diseño, vemos que para que estén en consonancia, las pestañas también deberían de ser un poco redondeadas. Pero en este caso, como todas tienen el mismo ancho, utilizaremos una imagen, que además nos permitirá darle otros efectos, como degradados.

En las páginas web, es frecuente utilizar imágenes para crear iconos, por ejemplo los de aulaClic , o para simular botones, con texto incluido, como .

La idea de estos ejemplos es simple, colocar la imagen en un enlace. Pero hay que tener cuidado, y pensar siempre que las imágenes podrían no cargarse. Por eso es muy importante incluir un atributo alt en las imágenes. Y si la imagen no deja bien claro a dónde va el enlace, añadir además un texto descriptivo en el atributo title.

En elementos con texto, como botones o pestañas, para evitar problemas con las imágenes, y porque resulta mejor para navegadores, buscadores, personas con deficiencias visuales que usen navegadores especiales, etc... es muy recomendable utilizar un texto normal, y la imagen como fondo.

Y esto es lo que haremos en nuestro ejemplo. Como los elementos son de un tamaño determinado 90x40 px, crearemos tres imágenes de fondo: una la pondremos con el elemento normal, otra cuando esté el ratón encima, y otra para la clase activa.

9.7. Inkscape. Crear la pestaña

Como se trata de una imagen, un dibujo que queremos crear desde cero, utilizaremos Inkscape. Con esta aplicación, vamos a crear una pestaña para nuestros elementos del menú, que son de 90 px de ancho y 40 px de alto.

Recuerda, que en Inkscape podemos crear rectángulos con la herramienta Crear rectángulos y cuadrados . Los rectángulos, muestran un control circular en su esquina superior derecha que nos permite regular el radio de redondeo de sus cuatro lados, mientras tengamos la herramienta seleccionada.

También hemos visto que en la barra de herramientas superior hay unos controles que nos permiten cambiar el tamaño del elemento.

Con esto, no nos resultará difícil crear la pestaña. Creamos un cuadrado, de 88px de ancho (más vale que nos sobre un poco que intentar encajarlo al píxel) y 45 px de alto (el alto no tienen que ser los 40px exactos, si sobra algo, no se mostrará), con los bordes sin redondear.

Una vez creado, el rectángulo, con él seleccionado pulsamos las teclas Ctrl + D. Este comando, duplica el elemento. Es decir, ahora tenemos dos rectángulos iguales, uno encima del otro. Para poder moverlo, elegimos la herramienta Seleccionar , y con el elemento seleccionado, pulsamos la tecla Flecha Arriba varias veces, para desplazarlo un poco hacia arriba, sin que se pierde la alineación vertical. Al rectángulo que queda arriba, le redondeamos las esquinas de nuevo con la herramienta Crear rectángulos y cuadrados .

Como vemos, para crear la pestaña, tenemos que unir estos elementos. Para hacerlo, seleccionamos los dos, y pulsamos en el menú Trayecto → Unión. Con esto hemos creado un único elemento con la forma de la pestaña.

 Cursos Informática Gratuitos