estilo-css

preparando el diseno II

[Tema 3] preparando el diseño II:
En este tema os enseñaremos a colocar las graficas al diseño web, bien si eres nuevo en el mundo webmaster os recomendamos el editor grafico "Gimp" y si eres un usuario con experiencia recomendamos "photoshop".


Yo he trabajado en photoshop, pero si quereis Gimp os lo podeis dercargar haciendo clic aqui.

Gimp es un programa gratuito y muy facil de manejar.

El fondo
El fondo puede ser de varios tipos, pero nosotros vamos a poner un fondo en el que aparece un perro, es este:
http://i50.tinypic.com/2642s09.jpg

Tambien si no sabes donde buscar fondos, nosotros tenemos algunas paginas de interes para buscar fondos, has clic aqui.

El header

Depende del tema de vuestra web el header debe de llevar una imagen relacionada. Por ejemplo si mi web es de perros obiamente llevara la imagen de un perro, esta es la imagen:
http://www.perros.com/content/perros_com/img/login-img.gif

Bien estas imagenes sin fondo o con fondo transparente se suelen llamar renders.

Bueno ya he creado un header y la healojado en tinypic:
http://i25.tinypic.com/zv7p0x.png

*Tambien puedes alojar imagenes en Paginawebgratis.es

El menu
El menu debe tener el mismo tamaña de ancho que el header, y la altura la que querais. Tambien el menu se puede poner arriva o abajo del header, en este caso lo vamos a poner por arriva del header, ya que pega con el texto de bienvenida que pusimos en el header.

Este es el menu:
http://i45.tinypic.com/auccra.png

El sidebar
El sidebar solo he hecho los botones donde va el titulo y el boton de abajo, estan hechos en photoshop, pero tambien se puede hacer en Gimp.

-Boton arriva:
http://i49.tinypic.com/r1ar9c.png

-Boton abajo:
http://i47.tinypic.com/33o1aud.png

El footer

Esta es la ultima parte de nuestra web, es recomendable poner un footer, ya que hay podemos añadir que la web es nuestra, lo de copiright, etc

-este es el footer:
http://i46.tinypic.com/1znr868.png

Ahora que tenemos las imagenes, en el siguiente tema veremos como colocarlas en nuestra web.


Siguiente pagina

=> ¿Desea una página web gratis? Pues, haz clic aquí! <=