Igual es un poco pronto y no sabéis cual será la aplicación que le vais a dar a la web que estáis creando, la verdad yo tampoco, se me agotaron las temáticas, jeje, así que improvisare un poco, espero no defraudaros
Como la mayoría de vosotros ya os defendéis con el PSP o el Photoshop, vamos a realizar en primer lugar algunas imágenes que sirvan para decorar la misma
Aunque las medidas de las imágenes que empleemos depende de cada uno yo me centrare en las siguientes medidas
para el top 900 x 225 y la llamaremos cabecera.jpg
para la base 900 x 56 le damos el siguiente nombre base.jpg
Mi cabecera y mi base son estas, el tamaño aquí se ve reducido, fijaros que no le puse ningún marco a las mismas, el borde que le añadimos en lecciones anteriores será quien lo enmarque jeje
Para el fondo que aparece en los laterales da igual, normalmente 200x200 y lo llamamos fondo.jpg , si no queréis imagen para el fondo ponéis un color liso
Recordar que este fondo se repetira, asi que dependiendo del programa que useis tener en cuenta este detalle
Para el menú hacemos una imagen similar a la que os dejo adjunta, la partís en dos trozos, fijaros en los modelos, aunque si os gusta esa podéis usarla también, hacerla simple, después solo con colorearla la adaptáis a vuestra web, os dejo la que he preparado entera y los dos trozos , los nombres que les daremos son, menu-sup.jpg ( la pequeñita) y menu-fondo.jpg (para la mas larga)
Aparte hacemos otra imagen con un gradiente para nuestra barra de navegación, alto 20 y ancho 100 y la llamamos navegacion.jpg, yo usare esta
Guardamos todas nuestras imágenes en la carpeta imágenes que tenemos en nuestro ordenador, y por supuesto las subiremos a nuestra carpeta imágenes que tenemos en nuestro hostin, donde tenemos ya algunas mas
La cabecera
Abrimos nuestra plantilla y nos vamos a la capa cabecera, borramos la palabra cabecera y en su lugar insertamos nuestra imagen destinada a tal fin
Si vamos a vista previa veréis que se descuadra un poco, la causa es el borde que le pusimos de un px así que si a nuestra cabecera le quitamos esos pixeles, si nuestra imagen mide 900 de ancho le restamos dos, uno por cada lado quedando 898 y al alto le hacemos lo mismo le restamos dos y ponemos en height 223, recordar el codigo para las imagenes
Vamos a vista previa y quedo perfecto
***
Navegación
Ahora cambiamos el color que le pusimos al menú de navegación por el fondo que hemos creado teníamos asignado un color con backgroun-color y ahora queremos una imagen para el fondo, fijaros en lo siguiente, el hecho de poner 20px de alto para esa imagen es porque nosotros le dimos al menú navegación esa altura, ¿os acordáis?
Abrimos nuestra hoja de estilos y vamos a modificar el background-color por background-image, os dejo lo que tenemos y como lo vamos a dejar
#navegacion{ background-color : #CDAA7D; border-bottom: #000000 1px solid; border-left: #000000 1px solid; border-right: #000000 1px solid; height:20px;}
Cambia por:
#navegacion{ background-image : url(imagenes/navegacion.jpg); border-bottom: #000000 1px solid; border-left: #000000 1px solid; border-right: #000000 1px solid; height:20px;}
***
El body
El body es quien define el fondo de los laterales y como tambien habiamos preparado una imagen para el le añadimos esa caracteristica
body {text-align: center; background-image:url(imagenes/fondo2.jpg);}
Contenido
A la capa contenido tiene un color elegido al azar asi que le cambiamos el color por uno que combine con el resto de nuestra portada, solo cambiamos el color por el que nos guste para el mismo, el resto lo dejamos igual
#contenido {width:auto; background-color : #f2cc7b; border-bottom:#000000 1px solid; border-left: #000000 1px solid; border-right: #000000 1px solid}
El pie
Aquí le pondremos el mismo color que al contenido, quedando así:
#pie {background-color :#f2cc7b; border-bottom: #000000 1px solid; border-left: #000000 1px solid; border-right: #000000 1px solid}
El menú
Aquí cambiamos el color también por la imagen que tenemos preparada y que hemos llamado menu-fondo.jpg
#menu {background-image:url(imagenes/menu-fondo.jpg); width:180px; float:left; text-align: left; margin-right: 10px; margin:10px 10px 10px 10px}
***
Me parece que ya empieza a tener otro aspecto
Retocamos mas detalles antes de insertar lo que nos falta,
los colores que le dimos a nuestros títulos , igual no cuadran ahora, así que modificar ese color por negro u otro que os guste y combine con los tonos de vuestra Web
Repasando y retocando colores
Teníamos varios tonos aplicados a las las tres etiquetas h1, h2 y h3, así que si lo consideráis cambiar el color o el estilo , yo dejare el estilo como lo pusimos antes, pero cambiare y pondré todas del mismo color, en la lección 16 se explico este apartado, si olvidasteis algún detalle darle un vistazo al mismo AQUI
h1 {font-size: 1.4em; color:#FFFFE0 ; font-weight: bold ; text-decoration: underline ;text-align: center;}
h2{font-size: 1.2em; color:#FFFFE0 ; font-weight: bold ; text-decoration: none ;text-align: center;}
h3{font-size: 1.1em; color:#FFFFE0 ; font-weight: 600 ;font-style:oblique ;text-align: center;}
Los colores que tienen aplicado los enlaces del menú tampoco me combinan ahora, también es verdad que antes tampoco combinaban mucho jeje pero ya que estamos de decoradoras le voy a modificar también los colores a la etiqueta "a" dejo las mismas propiedades y solo le cambio el color
El mío quedo así
a{color: #352c23; font-size:1.2em ; text-decoration: none}
a: link{}
a:visited{}
a:hover{color:#f2cc7b; font-size:1.2em; text-decoration:underline}
a:active{}
***
Nuestra vista previa ahora seria esta: AQUI
***
Tutorial realizado por Energiaelca
Derechos reservados