FreeSoftWEB.tk
Diseño Gráfico orientado a la Web

Diseñando una web de formas redondeadas con Inkscape, TheGIMP y CSS

Copyright © 2005, 2006 Daniel Martínez. Se otorga permiso para copiar, distribuir y/o modificar este documento bajo los términos de la Licencia de Documentación Libre GNU, Versión 1.2 o cualquier otra versión posterior publicada por la Free Software Foundation; sin Secciones Invariantes, sin Cubierta Frontal, y sin Cubierta Posterior. Se puede obtener una copia de la licencia de gnu.org, también traducida al castellano, y comentada en la Wikipedia.

Introducción

Vamos a explicar el modo de convertir esto:

En esto:

Y para ello vamos a usar Inkscape, TheGIMP, y algo de CSS. Mediante Inkscape dibujaremos la estructura del diseño, mediante TheGIMP dividiremos la imagen en distintos trozos, y mediante CSS usaremos esos trozos para que el dibujo quede plasmado en nuestra web.

Dibujar la estructura con Inkscape

Empezaremos por abrir Inkscape, y mediante la herramienta Crear rectángulos y cuadrados (F4) dibujaremos un rectángulo de esquinas redondeadas. Para obtener las esquinas redondeadas deberemos arrastrar los tiradores de la esquina superior derecha de la figura hasta conseguir la curvatura deseada. A continuación convertimos este objeto en un trazo desde el menú Trazo --> Objeto a trazo (Mayús.+Ctrl+C).

Una vez que hemos concretado la forma de nuestra figura, vamos a establecer el color de la misma. Para ello accede al menú Objeto --> Relleno y borde (Mayús.+Ctrl+F), y primero selecciona la pestaña Color de trazo. En la parte superior de dicha pestaña encontramos seis botones seleccionables. Pulsa el segundo por la izquierda, Color uniforme. De esta manera el borde tendrá un color liso. En la sub-pestaña RGB escribe los valores R 255, G 149, B 11, A 255 (lo que da como resultado RGBA ff950bff, de color naranja), y en la parte inferior del diálogo selecciona una Opacidad maestra de 1'000. En la pestaña Estilo de trazo (en la parte superior derecha del diálogo) elige un ancho de 11 pixels para el borde de la figura.

El siguiente paso es algo más complicado (no mucho), dado que vamos a establecer el color del relleno de la figura, pero no será un color plano, sino un gradiente o degradado. Para ello, en el propio diálogo de Relleno y borde, seleccionamos la pestaña Relleno, y de entre los botones de la parte superior elegimos el tercero, Gradiente lineal. Dado que no tenemos un gradiente de los colores necesarios, pulsamos el botón Duplicar, con lo cual creamos una copia del gradiente actual, y pulsamos Editar... para realizar los cambios oportunos.

De esta manera abriremos el diálogo Editor de gradiente, donde deberemos establecer los colores que formarán nuestro gradiente, que deberán ser al menos dos. Desplegando la lista de la parte superior podremos acceder a dichos colores, que en nuestro caso serán blanco (R255, G255, B255, A255) y naranja (R255, G149, B11, A255).

Pero no es suficiente con especificar los colores del gradiente, también hay que especificar cuál será la orientación de éste. Por defecto el gradiente irá de izquierda a derecha, de manera totalmente horizontal, pero a nosotros nos interesa que vaya en diagonal de la esquina superior izquierda a la esquina inferior derecha. Para ello deberemos seleccionar la herramienta Crear y editar gradientes (Ctrl+F1), de manera que aparezca una línea horizontal con dos tiradores, que son los que deberemos mover para determinar la orientación del gradiente. Lo que pretendemos con este gradiente es obtener una figura de color naranja con una leve sombra blanquecina en la esquina superior izquierda, para obtener una cierta sensación de volumen:

Ahora volvemos a acceder a Objeto --> Relleno y borde (Mayús.+Ctrl+F), y en la parte inferior del diálogo reducimos la Opacidad maestra a 0'589, con lo que obtenemos una figura de un color mucho más ténue. Con esto debería bastarnos para dar por terminado uno de los objetos, pero vamos a darle un último toque. De la misma manera que hemos aplicado una sombra de color blanco en la esquina superior izquierda, vamos a aplicar una sombra de color oscuro en la esquina inferior derecha, la esquina opuesta. Para ello empezaremos por hacer una copia de nuestro objeto a través de Edición --> Copiar, Edición --> Pegar, y la situaremos exactamente encima del original. Accederemos al menú de Relleno y borde, y repetiremos para el relleno el mismo procedimiento que hemos seguido unos pasos antes, pero esta vez el gradiente oo degradado estará formado por un color marrón (R173, G98, B0, A255) y un color totalmente transparente (R255, G255, B255, A0). Además reduciremos algo más la Opacidad maestra de este segundo elemento, que será de 0'440. Esto nos da el siguiente resultado, que será el cuerpo de nuestra web:

Crearemos una nueva copia de la primera figura a través de Edición --> Pegar (recordemos que ya lo habíamos copiado), y en Relleno y borde, en la pestaña Relleno, crearemos un nuevo gradiente para esta figura que estará formado por un tono naranja (R255, G124, B8, A255) y el color blanco (R255, G255, B255, A255). Usaremos un Opacidad maestra de 0'710. Este nuevo elemento, de un color más oscuro que el anterior, será el menú de nuestra web, así que reduciremos su tamaño arrastrando uno de los vértices del objeto.

Seleccionamos las tres figuras que hemos dibujado, y acudimos a Objeto --> Agrupar (Ctrl+G) para que formen un solo conjunto. Vamos al menú Archivo --> Exportar mapa de bits (Máyus.+Ctrl+E), y en Tamaño del mapa de bits elegimos un ancho de 780 pixels. ¿Por qué este tamaño? Porque tomamos como referencia una resolución de pantalla de 800x600 pixels, que es una de las más comunes. Restándole a los 800 pixels de ancho unos 20 pixels para barras de desplazamiento vertical y similares, obtenemos los 780 pixels. Esto no quiere decir que nuestra web sólo vaya a verse correctamente con esta resolución, es sólo una referencia orientativa. Más adelante podremos comprobar que la web se verá correctamente a cualquier resolución común. Elegimos también la ruta en la que se guardará el archivo, y pulsamos Exportar.

Y con esto termina el trabajo con Inkscape. Os dejo tanto el gráfico vectorial como el resultado en formato PNG por si os habéis atascado en algún paso.

Dividir la imagen mediante TheGIMP

A partir de ahora seguiremos con TheGIMP, una herramienta de un potencial incalculable que, sin embargo, utilizaremos para una tarea muy sencilla: cortar en trozos el modelo que hemos obtenido mediante Inkscape. Pero ojo, hemos dicho que vamos a usar CSS para diseñar nuestra web, así que esta tarea no va a consistir en recortar la imagen en celdas para incrustarlas en una tabla HTML, no usaremos tablas para maquetar la web, nuestro trabajo va a ser un pelín distinto.

Dado que nuestro modelo está formado por dos cajas, vamos a recortar de cada caja ocho trozos: uno por cada una de las esquinas, y otro por cada uno de los lados. Aquí tenéis el esquema del despiece:

Y aquí los distintos trozos:

Algunos de los trozos son particularmente grandes porque necesitamos que abarquen una esquina y un gradiente completo, mientras que otros son especialmente pequeños (los que llevan números del 1 al 4) porque formarán una zona homogénea en la que basta con una muestra reducida.

Expliquemos brevemente cómo se recortan esas secciones. Abrimos el dibujo resultante con TheGIMP, y antes de proceder a recortar la imagen, vamos al menú Capa --> capa nueva, elegimos el blanco como color de fondo, y pulsamos Aceptar. La imagen se mostrará totalmente en blanco, dado que hemos situado encima de nuestra imagen una capa de ese mismo color. Si acudimos al menú Capa --> pila --> capa al fondo, esta nueva capa de color blanco irá al fondo, dejando ver nuevamente nuestra imagen. Ahora acudimos a Capa --> pila --> seleccionar la capa superior (o simplemente pulsamos la tecla Inicio de nuestro teclado), y después entramos en Capa --> Combinar hacia abajo, de manera que ambas capas se combinen en una sola. Comprobemos el resultado de estas operaciones:

Una vez hecho esto, ya podemos proceder a recortar la imagen. Para ello usaremos la herramienta Seleccionar regiones rectangulares, que podremos tomar pulsando la letra R de nuestro teclado, eligiendo dicha herramienta del menú de herramientas mediante el ratón, o a través de Herramientas --> Herramientas de selección --> Selección rectangular. El funcionamiento de esta herramienta es bien simple: pinchamos en un extremo de la sección rectangular que queremos seleccionar, y manteniendo pulsado el botón del ratón, arrastramos el cursor hasta el extremo opuesto. Utilizando este sistema seleccionaremos una a una las 16 porciones de imagen que acabamos de mostrar, y las guardaremos una a una mediante la milenaria e infalible técnica de copiar y pegar. Para copiar podemos usar la combinación de teclas Ctrl+C, o acceder al menú Edición --> Copiar. Para pegar la imagen no recurriremos al archiconocido Ctrl+V, sino que usaremos la alternativa Edición --> Pegar como nuevo, de manera que guardar cada uno de los trozos en un archivo distinto resulte más sencillo. Una vez que tengamos recortados y convenientemente guardados los 16 trozos habremos acabado nuestro trabajo con TheGIMP, y dejaremos a Wilber descansar.

Aplicar la hoja de estilo CSS al documento HTML

Antes de nada veamos la estructura del documento HTML al que queremos dar lustre. Es un documento bien simple que está formado por una cabecera <h1></h1> para el título, un índice a base de listas <ul><li></li></ul>, y después cinco párrafos <p></p> con un texto de prueba cualquiera. Ahorrándonos el contenido de los párrafos, el código HTML de nuestro documento sería así:

<html>
    <head>
    </head>
    <body>
        <h1>Lorem Ipsum</h1>
        <ul>
            <li><a href="">INICIO</a></li>
            <li><a href="">Sección primera</a></li>
            <li><a href="">Sección segunda</a></li>
            <li><a href="">Sección tercera</a></li>
            <li><a href="">Sección cuarta</a></li>
            <li><a href="">Sección quinta</a></li>
        </ul>
        <p>Lorem ipsum dolor sit amet...</p>
        <p>Sed porta massa. Nulla quam eros...</p>
        <p>Pellentesque faucibus rutrum...</p>
        <p>Vestibulum pulvinar porta...</p>
        <p>Vestibulum et nibh. Morbi...</p>
    </body>
</html>

Recordemos que esto daba como resultado la imagen mostrada al principio de este documento:

Para poder aplicarle la hoja de estilo vamos a preparar convenientemente el terreno, separando los tres elementos principales en capas mediante <div></div>: el título, el índice y el cuerpo. Estas capas se llamarán cabecera, menu1 y cuerpo1.

<html>
    <head>
    </head>
    <body>

        <div id="cabecera">
        <h1>Lorem Ipsum</h1>
        </div>

        <div id="cuerpo1">

            <div id="menu1">
            <ul>
                <li><a href="">INICIO</a></li>
                <li><a href="">Sección primera</a></li>
                <li><a href="">Sección segunda</a></li>
                <li><a href="">Sección tercera</a></li>
                <li><a href="">Sección cuarta</a></li>
                <li><a href="">Sección quinta</a></li>
            </ul>
            </div>

        <p>Lorem ipsum dolor sit amet...</p>
        <p>Sed porta massa. Nulla quam eros...</p>
        <p>Pellentesque faucibus rutrum...</p>
        <p>Vestibulum pulvinar porta...</p>
        <p>Vestibulum et nibh. Morbi...</p>
        </div>

    </body>
</html>

Y empezamos añadiendo los primeros atributos CSS, que van entre <head> y </head>. Vamos a dar al cuerpo y al menú colores de fondo similares a los utilizados en nuestro diseño con Inkscape. Además me voy a permitir el lujo de establecer ciertos parámetros de estilo que, si me permitís, evitaré explicar, ya que son secundarios en este diseño. Fijaos en lo que va en negrita:

<html>
    <head>
        <style>
            body
                {
                background: #fff;
                font-family: Verdana, Arial, Helvetica, sans-serif;
                padding: 0;
                margin: 0;
                text-align: center;
                }
            * html body { overflow: auto; }
            p
                {
                text-align: justify;
                }
            #cabecera
                {
                margin-top: 5px;
                margin-left: auto;
                margin-right: auto;
                }
            #cuerpo1
                {
                background: #ffd093;
                border: 0;
                margin-left: 20px;
                margin-right: 10px;
                margin-bottom: 10px;
                font-family: Verdana, Arial, Helvetica, sans-serif;
                color: black;
                }
            #menu1
                {
                float: right;
                margin-top: 100px;
                margin-left: 15px;
                margin-bottom: 10px;
                padding: 0;
                background: #ff932f;
                }
            a.menu:link,a.menu:active,a.menu:visited
                {
                color: #444;
                font-weight: bold;
                text-decoration: none;
                }
            a.menu:hover, li.menu:hover
                {
                color: #aaa;
                text-decoration: underline;
                font-weight: bold;
                }
            li.menu
                {
                color: #666;
                padding-top: 0;
                padding-bottom: 0;
                padding-right: 5px;
                padding-left: 0;
                margin-top: 0;
                margin-bottom: 0;
                margin-right: 10px;
                margin-left: 0;
                font-size: 10pt;
                text-align: left;
                }
        </style>
    </head>
    <body>

        <div id="cabecera">
        <h1>Lorem Ipsum</h1>
        </div>

        <div id="cuerpo1">

            <div id="menu1">
            <ul class="menu">
                <li class="menu"><a href="">INICIO</a></li>
                <li class="menu"><a href="">Sección primera</a></li>
                <li class="menu"><a href="">Sección segunda</a></li>
                <li class="menu"><a href="">Sección tercera</a></li>
                <li class="menu"><a href="">Sección cuarta</a></li>
                <li class="menu"><a href="">Sección quinta</a></li>
            </ul>
            </div>

        <p>Lorem ipsum dolor sit amet...</p>
        <p>Sed porta massa. Nulla quam eros...</p>
        <p>Pellentesque faucibus rutrum...</p>
        <p>Vestibulum pulvinar porta...</p>
        <p>Vestibulum et nibh. Morbi...</p>
        </div>

    </body>
</html>

Si abrimos nuestro editor de texto favorito (por ejemplo, Kate), pegamos todo ese código, guardamos el archivo con extensión .html y lo visualizamos en un navegador, obtenemos lo siguiente:

Y ahora... ¡empieza la diversión! Por fin vamos a empezar a utilizar los recortes que hemos obtenido mediante Inkscape y TheGIMP. ¿Y cómo lo haremos? Poniendo los distintos recortes como fondo de las capas cuerpo1 y menu1. Empezaremos por el trozo Cuerpo 1 (la imagen web_redondeada_B_1.png). Colocaremos esta imagen como fondo en la esquina superior izquierda de la capa cuerpo1, y estableceremos que dicha imagen se repita en horizontal (eje x) para que ocupe toda la franja superior de la capa. Esto es lo que hay que cambiar en nuestro documento HTML:

#cuerpo1
    {
    background: #ffd093 url(./web_redondeada_B_1.png) top left repeat-x;
    border: 0;
    margin-left: 20px;
    margin-right: 10px;
    margin-bottom: 10px;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    color: black;
    }

Fijaos bien en el cambio que provoca esto en el borde superior del cuerpo de nuestro documento:

Tenemos que repetir eso con el resto de trozos de imagen. Pero nos encontramos con un problema: no se puede establecer más de una imagen de fondo en una capa. ¿Cómo haremos para ubicar el resto de trozos en los bordes de nuestra capa? Haremos trampa: vamos a meter más capas dentro de nuestra capa, una por cada nuevo trozo que queramos poner en el fondo, estableceremos que esas capas tengan un borde de cero pixels (para que encajen a la perfección), que tengan fondo transparente (para que no tapen las anteriores), y de esta manera podremos ubicar cada uno de los trozos sin problemas. Empezaremos por introducir tres capas más dentro de la capa cuerpo1, para cubrir de esta manera los cuatro laterales:

<div id="cuerpo1">
<div id="cuerpo2">
<div id="cuerpo3">
<div id="cuerpo4">

Por cada capa nueva que abrimos mediante <div> tenemos que añadir al final una nueva etiqueta de cierre mediante </div>, justo después de los cinco párrafos de texto, y justo antes de la etiqueta </body>:

    </div>
    </div>
    </div>
    </div>
</body>

Ahora que hemos introducido las nuevas capas, vamos a asignarle una imagen de fondo a cada una en la hoja de estilo, al principio del documento. Tenemos que tener en cuenta que en unas capas la imagen de fondo se alineará arriba (top) y en otras abajo (bottom), en unas a la derecha (right) y en otras a la izquierda (left), y que en unas se repetirá horizontalmente (repeat-x) mientras en otras se repetirá verticalmente (repeat-y):

#cuerpo2
    {
    padding: 0px;
    background: transparent url(./web_redondeada_B_2.png) top right repeat-y;
    }
#cuerpo3
    {
    padding: 0px;
    background: transparent url(./web_redondeada_B_3.png) bottom left repeat-x;
    }
#cuerpo4
    {
    padding: 0px;
    background: transparent url(./web_redondeada_B_4.png) top left repeat-y;
    }

Esto empieza a tomar forma:

Ahora crearemos otras tres capas más exactamente igual que hemos hecho en el anterior paso, capas que llamaremos cuerpo5, cuerpo6 y cuerpo7, con las cuales pondremos como fondo los trozos de imagen de los bordes.

<div id="cuerpo1">
<div id="cuerpo2">
<div id="cuerpo3">
<div id="cuerpo4">
<div id="cuerpo5">
<div id="cuerpo6">
<div id="cuerpo7">

¡Ojo, falta algo! ¿Nadie se ha dado cuenta? Sí, hace falta una octava capa. No la hemos puesto porque queremos darle un trato diferente. En esta capa estableceremos ciertos márgenes para el texto, y todo lo que vaya dentro de esta capa respetará esos márgenes. El problema es que dentro de las capas cuerpo hemos metido el menú, y no queremos que el menú tenga que respestar esos márgenes, ya que queremos que se muestre en el extremo derecho (sin connotaciones políticas :-P) del cuerpo, pegado al borde. Así que primero tendremos que escribir el código correspondiente al menú, y después abriremos la octava capa.

<div id="cuerpo7">

    <div id="menu1">
    <ul>
        <li><a href="">INICIO</a></li>
        <li><a href="">Sección primera</a></li>
        <li><a href="">Sección segunda</a></li>
        <li><a href="">Sección tercera</a></li>
        <li><a href="">Sección cuarta</a></li>
        <li><a href="">Sección quinta</a></li>
    </ul>
    </div>

<div id="cuerpo8">

No nos olvidemos de cerrar las capas:

    </div>
    </div>
    </div>
    </div>
    </div>
    </div>
    </div>
    </div>
</body">

En esta ocasión no queremos que la imagen de fondo se repita, ni en horizontal ni en vertical, queremos que se muestre una sola vez, así que utilizaremos no-repeat. Además en la octava capa, que es donde irá finalmente el texto de los cinco párrafos que hemos escrito, añadiremos unos atributos adicionales para establecer los márgenes. Esto es lo que tenemos que añadir en la hoja de estilo:

#cuerpo5
    {
    padding: 0px;
    background: transparent url(./web_redondeada_B_5.png) top right no-repeat;
    }
#cuerpo6
    {
    padding: 0px;
    background: transparent url(./web_redondeada_B_6.png) bottom right no-repeat;
    }
#cuerpo7
    {
    padding: 0px;
    background: transparent url(./web_redondeada_B_7.png) bottom left no-repeat;
    }
#cuerpo8
    {
    background: transparent url(./web_redondeada_B_8.png) top left no-repeat;
    padding-left: 30px;
    padding-top: 20px;
    padding-bottom: 30px;
    padding-right: 50px;
    }

Veamos cómo va quedando:

No está nada mal, se parece bastante a lo que queríamos conseguir. Pero aún queda el toque mágico del menú. El procedimiento es exactamente el mismo: crear nuevas capas y ponerle a cada una una imagen de fondo. Dado que ya habéis comprendido el procedimiento anterior (y si no, volvedlo a leer), me limitaré a poneros cómo quedan las capas del menú:

<div id="menu1">
<div id="menu2">
<div id="menu3">
<div id="menu4">
<div id="menu5">
<div id="menu6">
<div id="menu7">
<div id="menu8">
<ul class="menu">
    <li class="menu"><a class="menu" href="">INICIO</a></li>
    <li class="menu"><a class="menu" href="">Sección primera</a></li>
    <li class="menu"><a class="menu" href="">Sección segunda</a></li>
    <li class="menu"><a class="menu" href="">Sección tercera</a></li>
    <li class="menu"><a class="menu" href="">Sección cuarta</a></li>
    <li class="menu"><a class="menu" href="">Sección quinta</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

Y su correspondiente hoja de estilo:

#menu1
    {
    float: right;
    margin-top: 100px;
    margin-left: 15px;
    margin-bottom: 10px;
    padding: 0;
    background: #ff932f url(./web_redondeada_C_1.png) top left repeat-x;
    }
#menu2 { padding: 0; background: transparent url(./web_redondeada_C_2.png) top right repeat-y; }
#menu3 { padding: 0; background: transparent url(./web_redondeada_C_3.png) bottom left repeat-x; }
#menu4 { padding: 0; background: transparent url(./web_redondeada_C_4.png) top left repeat-y; }
#menu5 { padding: 0; background: transparent url(./web_redondeada_C_5.png) top right no-repeat; }
#menu6 { padding: 0; background: transparent url(./web_redondeada_C_6.png) bottom right no-repeat; }
#menu7 { padding: 0; background: transparent url(./web_redondeada_C_7.png) bottom left no-repeat; }
#menu8 { padding: 10px; background: transparent url(./web_redondeada_C_8.png) top left no-repeat; clear: both; }

Con lo que finalmente conseguimos lo que buscábamos:

¿Cómo? ¿Que queréis que os ponga TODO el código HTML (y CSS), para aseguraros de no haber cometido ningún error? Ay, no sé yo si debería... seguro que más de uno se limitará a copiar el código sin tratar de entender por qué es así, que es lo realmente interesante... En fin, os haré caso, pero prometedme que intentaréis hacerlo por vuestros propios medios. ¡Y sed originales, no lo copiéis al pie de la letra! Cambiad colores, tamaños, procedimientos... añadid trucos de vuestra cosecha... ¡y divertíos! Venga, que me lío; allá va el código:


<html>
<head>
<style>
body
{
background: #fff bottom right no-repeat;
font-family: Verdana, Arial, Helvetica, sans-serif;
padding: 0;
margin: 0;
text-align: center;
}
* html body { overflow: auto; }
p
{
text-align: justify;
}
#cabecera
{
margin-top: 5px;
margin-left: auto;
margin-right: auto;
}
#cuerpo1
{
background: #ffd093 url(./web_redondeada_B_1.png) top left repeat-x;
border: 0;
margin-left: 20px;
margin-right: 10px;
margin-bottom: 10px;
font-family: Verdana, Arial, Helvetica, sans-serif;
color: black;
}
#cuerpo2 { padding: 0px; background: transparent url(./web_redondeada_B_2.png) top right repeat-y; }
#cuerpo3 { padding: 0px; background: transparent url(./web_redondeada_B_3.png) bottom left repeat-x; }
#cuerpo4 { padding: 0px; background: transparent url(./web_redondeada_B_4.png) top left repeat-y; }
#cuerpo5 { padding: 0px; background: transparent url(./web_redondeada_B_5.png) top right no-repeat; }
#cuerpo6 { padding: 0px; background: transparent url(./web_redondeada_B_6.png) bottom right no-repeat; }
#cuerpo7 { padding: 0px; background: transparent url(./web_redondeada_B_7.png) bottom left no-repeat; }
#cuerpo8
{
background: transparent url(./web_redondeada_B_8.png) top left no-repeat;
padding-left: 30px;
padding-top: 20px;
padding-bottom: 30px;
padding-right: 50px;
}
#menu1 {
float: right;
margin-top: 100px;
margin-left: 15px;
margin-bottom: 10px;
padding: 0;
background: #ff932f url(./web_redondeada_C_1.png) top left repeat-x;
}
#menu2 { padding: 0; background: transparent url(./web_redondeada_C_2.png) top right repeat-y; }
#menu3 { padding: 0; background: transparent url(./web_redondeada_C_3.png) bottom left repeat-x; }
#menu4 { padding: 0; background: transparent url(./web_redondeada_C_4.png) top left repeat-y; }
#menu5 { padding: 0; background: transparent url(./web_redondeada_C_5.png) top right no-repeat; }
#menu6 { padding: 0; background: transparent url(./web_redondeada_C_6.png) bottom right no-repeat; }
#menu7 { padding: 0; background: transparent url(./web_redondeada_C_7.png) bottom left no-repeat; }
#menu8 { padding: 10px; background: transparent url(./web_redondeada_C_8.png) top left no-repeat; clear: both; }
a.menu:link,a.menu:active,a.menu:visited
{
color: #444;
font-weight: bold;
text-decoration: none;
}
a.menu:hover, li.menu:hover
{
color: #aaa;
text-decoration: underline;
font-weight: bold;
}
li.menu
{
color: #666;
padding-top: 0;
padding-bottom: 0;
padding-right: 5px;
padding-left: 0;
margin-top: 0;
margin-bottom: 0;
margin-right: 10px;
margin-left: 0;
font-size: 10pt;
text-align: left;
}
</style>
</head>
<body>
<div id="cabecera">
<h1>Lorem Ipsum</h1>
</div>
<div id="cuerpo1"><div id="cuerpo2"><div id="cuerpo3"><div id="cuerpo4"><div id="cuerpo5"><div id="cuerpo6"><div id="cuerpo7">
<div id="menu1"><div id="menu2"><div id="menu3"><div id="menu4"><div id="menu5"><div id="menu6"><div id="menu7"><div id="menu8">
<ul>
<li class="menu"><a href="" class="menu">INICIO</a></li>
<li class="menu"><a href="" class="menu">Sección primera</a></li>
<li class="menu"><a href="" class="menu">Sección segunda</a></li>
<li class="menu"><a href="" class="menu">Sección tercera</a></li>
<li class="menu"><a href="" class="menu">Sección cuarta</a></li>
<li class="menu"><a href="" class="menu">Sección quinta</a></li>
</ul>
</div></div></div></div></div></div></div></div>
<div id="cuerpo8">
<p>Lorem ipsum dolor sit amet... (completa tú el párrafo)</p>
<p>Sed porta massa. Nulla quam... (completa tú el párrafo)</p>
<p> Pellentesque faucibus rutrum... (completa tú el párrafo)</p>
<p> Vestibulum pulvinar porta... (completa tú el párrafo)</p>
<p> Vestibulum et nibh. Morbi quam... (completa tú el párrafo)</p>
</div>
</div></div></div></div></div></div></div>
</body>
</html>

Para terminar, debo advertiros de que este diseño se ve correctamente en todos los navegadores en los que lo he probado (Konqueror, Mozilla Firefox y Opera), pero no en MS Internet Explorer, que no se ve del todo bien. Como de costumbre, este deficiente navegador viene a desbaratarnos un bonito diseño. En todo caso, espero que os haya gustado. ;-)

Enlaza a FreeSoftWEB, y no te pierdas estos enlaces:

Foro Legba Gimpeando Curso Photoshop Curso Swish Va-Mas LotuAbokatuak