12.176 cursos gratis
8.742.341 alumnos
Facebook Twitter YouTube
Busca cursos gratis:

Vamos a aprender a usar imágenes y algunas formas de presentarla en Dreanweaver CS5, el uso de imágenes para páginas web es muy importante, porque generalmente nuestras páginas web están compuestas en un 50% de imágenes.

Hay algo que necesitamos saber sobre las imágenes en primero lugar si las imágenes que vas usar son para armar la plantilla de tus páginas web tienes que saber que estas deben ser totalmente livianas porque si son para tus plantillas no va a ser optimo poner imágenes pesadas y esperarse minutos a esperar a que se carguen si vas a usar imágenes para tus plantillas usa en el formato GIF que son mucho más livianas que JPG y PNG transfórmalas puedes hacerlo con Photoshop para que no pierdas calidad como se pierde en Paint.

http://https://www.facebook.com/xander.technology.bolivia

Vamos a hacer una pequeña página WEB donde se usaran imágenes de distintas formas, para empezar abrimos DREANWEAVER CS5 y le damos en nuevo:

Dreanweaver. Archivos 1

Ahora elegimos página en blanco HTML y después clic en el botón CREAR como se muestra en las siguientes imágenes:

htlm. Nuevo documento 2

Ahora hacemos clic en la pestaña diseño para trabajar en ese formato, como se muestra en la siguiente imagen:

Pagina nueva. Dreanweaver 3

Bueno ahora necesitamos dos imágenes iguales una a colores y otra en blanco y negro como estas:

imagenes iguales dentro del documento 4

Ahora en DREANWEAVER vamos a la pestaña INSERTAR después en OBJESTOS DE IMAGEN y luego en IMAGEN DE SUSTITUCIÓN

etiquetar imagen 5

Y luego nos saldrá la siguiente ventana:

insertar imagen de sustitucion 6

En imagen ORIGINAL hacemos clic en EXAMINAR y ponemos la imagen en blanco y negro y la imagen de SUSTITUCION ponemos la imagen decolores haciendo clic en el segundo botono EXAMINAR, ahora para ver el efecto presiona el botón F12 del teclado para que se vea en tu explorador de internet predeterminado.

Ahora vamos a aprender a que se agrande una imagen cuando se pase por el MOUSE, para esto necesitamos usar los eventos del MOUSE.

Para esto vamos a la pestaña INSERTAR luego IMAGEN como se muestra en la siguiente imagen.

insertar imagen. Dreanweaver 7

Ahora de la misma forma escogemos nuestra imagen preferida y después guardamos nuestro proyecto en nuestro caso insertaremos la siguiente imagen llamada buscadores:

. imagen de buscadores en la red 8

Ahora si lo hemos hecho bien estos ejercicios nos abra salido así pero con tus propias imágenes:

Imagenes propias 9

Ahora le hacemos clic en la imagen de buscadores para seleccionarla y después en clic en la pestaña CODIGO y nos saldrá el editor de código muy parecido a este:

codigos de dreanweaver 10

Como teníamos seleccionado la imagen buscadores y después le hicimos clic en CÓDIGO nos salió una línea de código demarcada de color azul pues ese código pertenece a nuestra imagen BUSCADORES:

<img src="buscadores.jpg" width="225" height="224" />

La cual cambiamos por la siguiente:

<img src="buscadores.jpg" onmouseover="this.width=500;this.height=400;" onmouseout="this.width=200;this.height=150;" width="200" height="150" />

Y listo guarda y presiona F12 y versa como se agranda la imagen al pasar el mouse y la otra imagen como cambia de color al pasar el mouse.

Sobre el curso rýpido

Nuestras novedades en tu e-mail

Escribe tu e-mail:



MailxMail tratarý tus datos para realizar acciones promocionales (výa email y/o telýfono).
En la polýtica de privacidad conocerýs tu derechos y gestionarýs la baja.

ýQuieres ser el primero en opinar sobre Manejo de imágenes en Dreanweaver CS5?


Cursos similares

ACDSEE. Redimensionar varias imágenes
449 alumnos  
ACDSee . Redimensionar varias imágenes , el redimensionar las imágenes es una de... [19/11/09]
Photoshop. Recortar imágenes
5.818 alumnos Curso con výdeo
Cuantas veces quieres solo un pedazo de tu fotografía y no sabes cómo recortar... [06/09/10]
Flash tutorial. Fundir imágenes
1.265 alumnos Curso con výdeo
Tutorial de Adobe Flash con vídeo . En este curso vamos a enseñarte a fundir... [07/09/10]


ýQuý es mailxmail.com?|ISSN: 1699-4914|Ayuda
Publicidad|Condiciones legales de mailxmail