DESIGNAID

Herramientas claves para representar tus ideas

Crea fondos a pantalla completa en dreamweaver

La encuesta de este mes ha ido avanzando poco a poco más hacia Photoshop, Diseño web y 3DS MAX. Ya me imaginaba que iria más o menos hacia esos lados pero me asombra un poco que el sr. Flash esté entre los últimos. Si no has enviado tu voto hazlo ahora todavia hay oportunidad para enviarme tus comentarios, yo trataré de compartirles mas posts sobre lo que necesiten. De hecho todavia tengo posts guardados sobre 3DS MAX pero no he tenido tiempo ni oportunidad de publicarlos. (si alguien se ha mudado de casa alguna vez sabrá lo complicado que resulta y el tiempo que requiere, asi que sorry por lo retrasados que estan los posts de 3DS MAX)😉 asi que paciencia con eso que si vienen.

Y en esta oportunidad va para complacer los que están trabajando con el web o con sus páginas, porque haremos en dreamweaver una de las prácticas más simples y más buscadas: Usar un fondo a pantalla completa para nuestras páginas. Ya hemos trabajado con las imágenes usandolas como fondos para nuestras páginas en una que otra oportunidad aqui en Designaid, -incluso hasta un “efecto ego” como lo nombraron por ahi- pero esta vez será diferente porque usaremos el codigo HTML para controlar nuestras imágenes en Dreamweaver: Usaremos este fondo para colocarlo en toda nuestra página:

Este será el efecto de pantalla completa de mi pagina web.

Este será el efecto de pantalla completa de mi pagina web.

Un fondo con un gradiente de un tono a otro. Lo interesante es que lo haremos de tal manera que parezca una imagen vista a pantalla completa en nuestro navegador de internet y cargará super rápido. Un resultado sencillo pero que resulta muy atractivo como efecto para nuestros fondos….ah y para variar lo que siempre digo: super fácil de hacer.

Listo? veamos como hacerlo…

PASO 1: Nos ayudaremos con nuestro mejor amigo para crear nuestra imagen. (Por si alguien no sabe quien es; pues es Photoshop) Crea un documento nuevo de unos 450 pixeles de alto y 1 pixel de ancho. si. un solo pixel de ancho. Te preguntas porque? porque usaremos un truco simple para repetir esta imagen en todo el fondo y trabajaremos con el HTML para insertarlo en nuestro fondo. Ahora solo crea tu gradiente vertical usando los tonos que quieras. Si no has trabajado con los gradientes te recomiendo este otro efecto de gradientes para conocer como usar esta herramienta. Es posible que te sea incomodo trabajar con una imagen tan delgada pero paciencia que el resultado vale la pena. La herramienta de lupa es tu mejor amiga.

PASO 2: Usa la herramienta de cuenta gotas y haz un click en el color inferior de tu gradiente, casi al final que muestra el ultimo color de tu gradiente. Ahora verás ese color seleccionado en tu ventana de herramientas. Ahora haz doble click en esa muestra de color para ver el color picker. El color picker te mostrará los valores de ese color en el modelo de color especifico y lo que buscamos es el valor hexadeximal (color web) para ese color en especifico. en mi caso el color es este:

Este es mi color. Anota el valor de el tuyo y tenlo a la mano.

Este es mi color. Anota el valor de el tuyo y tenlo a la mano.

Anota el valor de tu colot porque lo usaremos luego cuando estemos trabajando en el codigo HTML en Dreamweaver.

Ahora guarda la imagen como un documento GIF. Te recomiendo que uses el comando en el menu de FILE > SAVE FOR WEB para salvar tus imagenes. De esa forma podrás tener un mayor control sobre el archivo. Selecciona la calidad máxima que puedas para el formato GIF. De todas maneras no va a pesar mucho ya que sólo tiene 1 pixel de ancho. Colocale de nombre FONDO.GIF

PASO 3: Ya estamos listos con Photoshop. Pasemos ahora al trabajo en Dreamweaver. Para empezar es importante que definas tu sitio, asi garantizas que todos tus archivos están en la misma carpeta. Crea un documento nuevo en Dreamweaver y usa los botones de vista para ver al mismo tiempo tu codigo HTML y tu diseño. Mas específicamente activa este botón:

Desde aqui muestras el codigo y las imagenes al mismo tiempo.

Desde aqui muestras el codigo y las imagenes al mismo tiempo.

De esta forma podrás editar el codigo HTML y trabajar visualmente en tu diseño. Estoy usando la version MX (me parece más rápida que todas) pero puedes encontrar este botón en la misma ubicación en cualquier versión de Dreamweaver.

En el código de tu página busca entonces la etiqueta que dice </head> e introduce este código despues de esa linea:

<style>
body {
 background:XXXXXX URL(fondo.gif)
 repeat-x;
}
</style>

Asi quedó el mio:

Asi coloqué el codigo en mi pagina. Ojo donde lo colocas. fijate bien.

Asi coloqué el codigo en mi pagina. Ojo donde lo colocas. fijate bien.

PASO 4: Ya casi estamos listos. Ahora sólo debes hacer lo siguiente: Edita el código HTML que acabas de insertar y substituye el texto “XXXXXX” por el valor hexadecimal de tu color. Lo guardaste no? bien. Sólo tipealo para quitar las Xs. El mio era FDf1c5. Luego vete a FILE > SAVE AS… y salva tu archivo HTML. Yo lo guardé en la misma carpeta donde está la imagen del fondo.

Este es mi codigo ya editado y listo.

Este es mi codigo ya editado y listo.

Listo!! ahora presiona la tecla F12 en tu teclado en Dreamweaver y prueba tu fondo. (recuerda salvar primero tu archivo HTML) Ten en cuenta que el codigo debe saber donde están tus archivos. En este codigo que usé, yo guardé el archivo FONDO.GIF en la misma carpeta donde guarde mi documento HTML. Si tu tienes una carpeta donde guarda tus imagenes debes decirle al codigo donde esta. Por ejemplo si tus imagenes están en la carpeta llamada “imagenes” entonces tu codigo seria ahora: URL(/imagenes). Esto mismo va para los nombres del archivo de imagen; colocale el nombre completo de tu archivo.

Porqué funciona el codigo? simple. El código que usamos lo que hace es decirle al navegador de internet que use una imagen de fondo pero que sólo la repita de manera horizontal. (eje X) Al mismo tiempo otra linea de código le dice al navegador que use un color de fondo en especifico que casualmente😉 es el mismo color de la imagen que tiene tu gradiente. El resultado: no importa el tamaño de la ventanda de tu navegador el fondo parecerá ser uno solo como si fuera a pantalla completa. Algo asi:

ASi funciona la mecánica del fondo.

ASi funciona la mecánica del fondo.

También puedes experimentar con la imagen y crear texturas interesantes en tus diseños.

)

Un fondo experimental...en un tiempito de sobra que tuve🙂

Prueba con distintos artes. Hice este fondo experimentando una con una imagen. Creo que me quedo demasiado grande😛 Asi que la podria reducir mucho en tamaño pero la idea es probar a ver que podría salir para usarlo en nuestros trabajos. Si quieres probarla en Dreamweaver, descargala desde mi BOX de archivos. La coloqué como FONDO_EXPERIMENTAL.GIF

Espero te ayude en tus diseños.

saludos a todos.

Luis S.

14 comentarios»

  Alkachofa wrote @

Hola que tal Amigo. No encontré un formulario de contacto para dejartelo por ahí, por eso te lo escribo aquí: Te interesaría hacer un intercambio de Links con nuestro Blog?

  Neto wrote @

hola, esta muy buena la explicación, gracias por compartirla, pero me surgio un problema: sigo lospasos y en dreamweaver me muestra la imagen, pero cuando presiono f12 en el navegador no me muestra ese fondo, ¿tenes idea por que puede ser?
gracias!!

  Luis Suarez wrote @

Hola Neto. Recuerda que debes salvar tu archivo de imagen en la misma carpeta donde salvaste tu documento html. ( o en su defecto cambiar la ruta en el codigo) revisa a partir del paso 4 lo que haz hecho a ver si te falto algo por colocar.

saludos.

Luis S.

  Neto wrote @

Cosa rara, cuando la colgue en el servidor se ve perfectamente (netoweb.hostinggratisargentina.com), asi como los links del menu que es en flash, que en la vista del dreamweaver no me funcionaban y en internet si…. misterios de la vida??? o la comprobacion de que no hay ciencia exacta?? (o me tengo que dedicar a estudiar un poquito mas)…
bueno, como siempre gacias por compartir el conocimiento!!

  Javier wrote @

Amigo. Pasó esto: fondo.gif y html guardados en la misma carpeta. El fondo es balnco arriba y llega a azul abajo. Cuando hago todo lo que dice acá, el fondo se ve amarillo en dreamweaver y al presionar F12 se ve blanco (como al principio), pero sin la imagen en gradiente.

  Luis Suárez wrote @

Hola Javier.

Pueden ser varias cosas, verifica que hayas colocado exactamente el codigo en el sitio correcto. si falta o sobra algun caracter no va a funcionar. (verifica el paso 3 y 4) tambien es posible que hayas colocado el codigo en el lugar equivocado. recuerda tambien salvar todo lo que haz hecho. Luego para probarlo no lo veas en Dreamweaver ya que te muestra solo una previsualizacion, abre tu archivo final en Internet explorer o en tu navegador a ver si se muestra la imagen.

saludos.

Luis S.

  david wrote @

seor tutor no me funciono el fondo la pagina me sale en blanco, tengo todos los archivos en un solo sitio, no se q paso, me dreamweaver es el cs3

  david wrote @

señor tutor no me funciono el fondo la pagina me sale en blanco, tengo todos los archivos en un solo sitio, no se q paso, me dreamweaver es el cs3

  estefano wrote @

y si quieres poner dos imagenes de fondo???

  Luis Suarez wrote @

Hola Estefano. gracias por escribirme.

Dos imagenes de fondo? como seria exactamente? porque podrias hacer tu montaje en Photoshop en una imagen y simplemente usar ese arte como fondo.

saludos.

Luis S.

  alan wrote @

Hola que tal, ya 3 años despues de este tutorial exelente y muy bien explicado, aqui estoy realizandolo pero tengo un problemita que nadie tuvo segun he leido, La imagen de 450px x 1 px se repite perfectamente hacia los costados en su misma linea pero tambien esa franja de imagenes repetidas vuelve a repetirse por debajo de la misma, o sea, tengo 2 franjas de colores una debajo de la otra. Quisiera sacar 1 para que quede perfecto y no se como. Muchas gracias saludos

  Luis Suarez wrote @

Hola Alan. Gracias por visitarme.
Si la imagen se repetira siempre no importa su tamaño. las dos opciones que tienes para arreglarlo son: 1-hacer una imagen lo suficientemente larga como para que no se vea a resoluciones altas. (facil de hacer pero no muy limpio ni profesional) y 2-utilizando hojas de estilo CSS (la solucion idonea y profesional) para decirle al fondo que se repita solo de forma horizontal. Utilizar hojas de estilo es facil; Investiga buscando “CSS” en google, mas especificamente el comando “background-repeat:repeat-x;” que te permitira repetir la imagen solo horizontalmente. Con CSS no solo puedes repetir la imagen de fondo horizontalmente sino tambien no repetirla nunca, o repetirla solo verticalmente, entre muchisimas otras cosas.

Espero te ayude.

saludos!

Luis S.

  rafash wrote @

yo quiero también dos imágenes de fondo, y que dependiendo del país del visitante combine unas con otras….

es posible?

  Luis Suarez wrote @

Hola Rafa.

Si es posible hacerlo. lo mas facil es usar un codigo javascript o CSS que te permita cambiar el fondo al azar. busca en google con esos terminos y encontraras varios tuts para hacerlo.

espero te ayude!

saludos.

Luis S.


Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

A %d blogueros les gusta esto: