Inicié hace poco en esto del diseño web utilizando CSS; así que todavía no estoy muy empapado sobre el tema, pero de todas formas, espero que les resulte de utilidad este pequeño tip.
Ya se discutió hace un buen rato por los foros, pero no encontré documentación al repecto, por lo que aquí se las comparto, no se si sea la mejor manera pero igual, puedes sugerir mejoras.
Primero necesitamos diseñar el aspecto que queremos que tenga nuestra página (plantilla), para esto puedes utilizar el programa que gustes, siempre y cuando sepas como hacer los efectos que manejaremos en el programa que hayas elegido (que en realidad es el "Glow"), el formato no importa tampoco, eso te lo dejo a tu elección. En éste caso utilizaré Fireworks (imagen PNG).
Primero elegimos el tamaño del lienzo, es importante que elijas un valor de anchura adecuado para los usuarios que aún utilizan la resolución de (800x600), toma en cuenta lo estresante que es el scroll horizontal. Yo utlizaré un lienzo de 790x500 px.
A continuación, echamos a volar nuestra imaginación y plasmamos una plantilla para nuestra página, que consta de un encabezado, un cuerpo y un pie de página (si no se te ocurre nada en estos momentos has lo que yo, recuadros coloridos).
Al recuado blanco que formará el body puedes aplicarle esquinas redondeadas para una mejor apariencia. Ahora le agregamos el efecto de Glow; para los que decidieron seguir este tuto con Fireworks, lo explico a continuación:
Seleccionas el rectángulo y das un clic sobre el icono de "+" junto a la etiqueta "efect", te posas sobre "Shadow and Glow" y eliges "Glow".
aparecerá un pequeño recuadro de donde puedes elegir los valores de dispersión, color y transparencia. He aquí los que elegí yo.
Una ves elegidos los valores deseados, procedemos a cortar la imagen. Tomemos en cuenta las tres divisiones que mencioné antes: encabezado, cuerpo y pie.
entonces cortamos nuestra imagen en tres y guardamos cada una de las partes en archivos diferentes. chécate el ejemplo.
Imagen guardada como "header.png".
Ésta la guardé como "body.png".
Y por último, el pie de página ("foot.png").
Ahora nos vamos a nuestro CSS y agregamos lo que sigue:
Código :
* { margin: 0; padding: 0;/* para Firefox */ } body { text-align: center; /* para centrar los DIV's*/ } div#encabezado { margin: 0 auto 0 auto; /* centrar el DIV */ width: 790px; /* ancho del DIV */ height: 142px;/* Especificamos el alto resultante después de haber cortado la imagen (header.png)*/ background-image: url("header.png"); background-repeat: no-repeat; /* Evitamos que se repita la visualización de la imagen*/ } div#cuerpo { margin: 0 auto 0 auto; width: 790px; background-image: url("body.png"); background-repeat: repeat-y; /* Especificamos que se repita de forma vertical */ } div#pie { margin: 0 auto 0 auto; width: 790px; height: 54px; /* alto de la imagen (foot.png) después de haberla cortado */ background-image: url("foot.png"); background-repeat: no-repeat; }
Lo lógico es que nuestra plantilla se encuentre centrada en el documento, es por esa razón que agrego la especificación para el body (en caso de IE). Para entenderlo mejor, checa el tutorial de cómo centrar DIV's horizontales.
Como hemos especificado que la imagen central se repita sólo verticalmente, podrás agregar toda la información que desees y dará la apariencia de que la plantilla se va estirando, ¿Ahora entindes por qué dejamos las esquinas redondeadas superiores en la imagen del header?.
Ahora intenta jugar con los colores, si deseas un color diferente para el área vacía alrededor de la plantilla, cambia el color del lienzo de la imagen y aplica el mismo valor hexadecimal para el body. Y como un consejo, en ocasiones, si seleccionas todo el contenido de una página web, podrás descubrir algunos secretos de su diseño, y si aún así no se te prende el foco, pregúntale a San Google.
Gracias por el tip, ya necesitaba variar un poco en la estructura de mís páginas y esto me servira mucho. Por:Odin
Muy bueno, pero te comento algo: Para IE, el centrado que funciona es el de:
body { text-align: center }
pero para Firefox el centrado que funciona es:
div#contenedor { margin: 0 auto; } O lo que es lo mismo, los bordes derechos e izquierdos deben estar con margin auto.
Otra cosa con respecto a esto es que no deberias repetir esto:
margin: 0 auto 0 auto; /* centrar el DIV */
cuando esto es lo mismo:
margin: 0 auto; /* centrar el DIV */
El primero para TOP y BOTTOM y el segundo para LEFT Y RIGHT.
La imagen de body.jpg , puede ser de 1px de alto solamente, de esa manera se gana en peso de pagina.
De nuevo muy bueno tu tutorial. Por:fearlex_blog
gracias esto es muy práctico, es lo que siempre uno busca hacer al principio... podrías agregarle a esto mismo un menu y un contenido? gracias Por:jorge_blog
buen truco .. proporcina elegancia a la pagina Por:nelson_blog
La verdad es ke esta muy beno el tuto, io tenia problemas para maejar el CSS, y realmente me cabecie para poder hacer los bordes sombreados....
Muy bueno el tutorial, es muy claro.
Saludos Por:Pablosh_blog
Tengo problemas,
Lo primero es pan comido, pero ya cuando debo ingresar el codigo css se me dificulta la cosa...
Yo uso Dreamweaver, he adjuntado la plantilla css, y no me da resultados al chekar la vista previa....
Y mi otra duda es... donde inserto el contenido de la pagina..??? en una tabla de las mismas dimensiones ke el diseño sombreado o no????
me podrian ayudas Por:Pablosh_blog
Hola, está muy bueno el ejemplo, pero no puedo lograr ver la vista previa en Dreamweaver. Me gustaria saber o ver algun ejemplo de la aplicacion de este ejemploa Dreamweaver. Muchas Gracias Por:Pablo_Css_blog
esta muy dificil Por:alexandra_blog
como puedo poner el protector de pantalla matrix mi hi5 Por:david_blog
tengo una imagen en mi pc y deseo colocarlo como fondo en mi hi5 como lo hago¿?¿?¿ Por:Rossy_blog
bhueno hola a todos lo q yo queria era poner una caratula xq me dejeron para crear o buscar en inter una caratula para llevarlo a microdof word Por:katty Rojas_blog
hola Por:freddy_blog
hola Por:keyla_blog
jorge_blog :
gracias esto es muy práctico, es lo que siempre uno busca hacer al principio... podrías agregarle a esto mismo un menu y un contenido? gracias
Claro, puedes especificar qué contenido ponerle y te lo damos hecho ?
PD: Buen tip, le has dado una buena utilidad a eso del repeat-y, no había caido Por:infernalpr
¿Qué pasa o como se resuelve cuando el ancho de la página está determinado en %? Por:American_blog
que es una buena pajina y que es interesante Por:tu mama_blog
sorry pero no entiendi nada me gustaria k me esxplike como crear una plantilla para mi hi5! bueno el k tenga un gran corazon para ayudarme le dejo mi msn para estar en contacto espero k aigan alguien lo agradeceria mucho:
. Puedes descargar aqui el ejemplo funcionando
