Además de los elementos gráficos ya mencionados, en el diseño de una página web podemos utilizar otros componentes, entre los que destacamos los siguientes:

Líneas horizontales

Las líneas de separación horizontales son un elemento gráfico ampliamente usado en todo tipo de diseños, desde los periódicos y revistas hasta las páginas web. Su misión principal es separar bloques de contenidos, creando un límite visual entre ellos.


En las páginas web es posible crear estos elementos mediante la etiqueta HR (Horizontal Rule) del lenguaje HTML, que permite introducir una línea horizontal entre dos saltos de línea. El inconveniente principal de usar esta etiqueta es que la configuración de las propiedades de la línea (ancho, alto, color, etc.) son muy limitadas, así como de diferentes interpretación por los navegadores.


Podemos entonces usar una imagen como línea separadora, generalmente en formato GIF, que nos va a solucionar los problemas de la etiqueta HR, además de permitirnos diseñar líneas de todo tipo. Tanto es así que existen muchas páginas en Internet que ofrecen todo tipo de líneas gratuitamente, desde las más simples, a un solo color y totalmente lisas, hasta las más complejas, con dibujitos en sus extremos, líneas con sombra e incluso animadas.


Este tipo de elementos gráficos fue muy usado en su momento, pero poco a poco los diseñadores fueron abandonándolos, y hoy en día es difícil encontrar una página comercial o corporativa que los utilice, habiendo sido sustituidos en gran parte por espacios blancos, que recargan visualmente menos la página.

En caso de desear incluir alguno, es preferible usar una línea simple, de un solo color y sin sombra, evitando las líneas animadas, pues distraen al usuario de los contenidos importantes.


Este tipo de líneas simples, de un solo color, se crean fácilmente con un GIF de 1x1 píxeles del color deseado, imagen base a la que luego damos las dimensiones necesarias en cada caso.

Bullets o topos

Los bullets o topos son pequeños elementos gráficos que se utilizan para marcar un punto concreto de la pantalla o par acompañar un texto, principalmente en listas sin ordenar precediendo a cada uno de los elementos de la misma.


Cuando creamos una lista en un procesador de textos, podemos elegir entre una variedad de topos (círculos, rectángulos, estrellas, etc.), al igual que ocurre con el sistema de numeración de las listas ordenadas.


El lenguaje HTML también ofrece la posibilidad de elegir entre tres topos diferentes para las listas sin ordenar: los círculos, los discos y los rectángulos. Como vemos, muy pocas posibilidades para el diseño de estas listas, por lo que los desarrolladores buscaron una forma de ampliar el tipo de topos posibles, lo que se consiguió con la aparición de las Hojas de estilos en Cascada, que permiten definir una imagen como topos de una lista.


Por lo tanto, actualmente podemos confeccionar nuestros propios topos gráficos, generalmente en formato GIF, al ser gráficos de pocos colores, con lo que la adaptación de las listas al estilo general de la página es completa.

Las imágenes que vayamos a usar como topos de una lista deben tener un tamaño adecuado, ni muy grandes, para que no estropeen el aspecto visual típico de una lista, ni demasiado pequeños, para que se puedan ver con facilidad. Podemos decir que deben estar alrededor de los 10x10 píxeles, dependiendo del tamaño del texto de la lista.

A veces no es conveniente el uso de una lista para maquetar un grupo de elementos en una página, debido sobre todo a que las listas, por propia naturaleza, mantienen unas características espaciales propias: crean una separación entre la lista y el resto de elementos de la página y definen un espacio propio entre los topos y los elementos de la lista.

En estos casos podemos recurrir a la simulación de una lista usando una tabla con tres celdas básicas por fila. En la primera celda de cada fila situamos la imagen del topo, la segunda se usa para definir la separación entre topo y texto (generalmente con un GIF transparente de 1x1 píxeles dentro) y la tercera queda destinada a los contenidos textuales.


Una ventaja adicional de este tipo de construcciones es que permiten la construcción de rollovers con los topos, pudiendo cambiar estos de color cuando se pasa el puntero sobre su texto asociado.

Recursos para la obtención de gráficos

Existen en Internet multitud de sitios para obtener recursos gráficos, lo que pasa es que van apareciendo unos y desapareciendo otros, por lo que lo mejor es buscar en Google.