Imágenes de sustitución

Se puede hacer con una imagen, como un efecto divertido de la Web, pero en general se usan para dar efecto a los botones de los menús.

Tendremos que crear unos botones en el Psp:

Abrimos una imagen transparente y con la herramienta Rectángulo de Selección con bordes redondeados, hacemos un rectángulo de alrededor de 100/120 px de ancho por 20/30 de alto. Lo rellenamos del color que hayamos elegido. Duplicamos el rectángulo. Aplicamos a cada uno de los rectángulos una ligera sombra:

Vertical -2 horizontal 1

Opacidad 27 Difuminado 1

Invirtiendo el valor vertical, primero 2

2

y luego -2:

3

Escribimos el nombre de la opción y yo le puse una sombra, aun mas suave.

Guardaremos en formato gif, con el mismo nombre, por ejemplo:

dream1 y dream2 ( o dream y dream1, son nombres que son importantes, para reconocerlas al insertar.) los podremos guardar ya directamente en la carpeta de Imágenes del Sitio.

* Nota: Por cierto, yo suelo tener también en el Sitio, una carpeta con las imágenes originales;  es decir, en formato psp, si un día he de añadir una opción mas al menú, solo he de abrirla, escribir el texto correspondiente y guardar.

Y ejemmm…. podía haberme esmerado un poco mas en ellos no?? Seguro que los vuestros son preciosos!!! ;)

Situaremos el cursor en la opción que vamos a insertar. Si tenemos el nombre ya puesto, lo borraremos. Ir a Insertar/Objetos de Imagen/Imagen de sustitución.:

4

Aparecerá este cuadro de dialogo donde vamos a poner los siguientes valores:

5

  • a) Donde señala la mano, si no ponemos nosotros un nombre, lo hara el Dream por defecto, poniendo normalmente ‘imagen’ y un numero que suele ser por orden de las que hemos usado hasta ese momento.
  • b) Imagen Original, sera la primera que hemos guardado.
  • c) Imagen de sustitución la segunda.
  • d) El texto alternativo, no lo olvidéis mmm… es importante y ya veréis porque vale?
  • e) Al hacer clic, ir a URL: como hacíamos cuando los vínculos, aunque no este creado aun el documento, podemos poner el enlace a él. Funcionara, siempre que luego al crearlo, recordemos el nombre que pusimos y lo asignemos igual.

Ver el efecto en vista previa ;) mola, a que si?? Insertar/Media:

9

En el cuadro de dialogo, elegimos un modelo de botón y…:

10

en nombre del botón, que pagina vincular, etc… y el resultado es:

Esta bien, pero… quienes no saben crear un botón, usan estos, nosotros podemos crearlos y ser originales, no creéis??

Insertar un archivo Flash

Una vez que ya tengáis un banner, o cualquier archivo Flash que deseéis insertar en el documento, vamos a Insertar/Media/Plug-in

11

Desde allí, buscaremos el archivo Flash, aceptamos y listo.

Nota: En el Dream, solo veremos una imagen totalmente en color gris con el símbolo de Flash Macromedia. Al subir este archivo al servidor y el documento, sera cuando lo podremos visualizar correctamente.

El código añadido es muy sencillo:

<p><embed src=”imgsust/felizdia.swf” width=”370″ height=”270″></embed></p>

Si queremos que el mismo archivo, en caso que el usuario no tenga instalados los plugins en su navegador para poder visualizar correctamente este tipo de archivos, lo insertaremos como Flashpaper:

12

Si así y todo tenemos problemas para visualizar el archivo Flash, habríamos de modificar ya el código de forma manual, así que si tenéis este problema me dais un toque y vemos como lo hariamos.

Insertar archivos de sonido

Desde Insertar/Media/Plug-in, también podemos, seleccionando un archivo de sonido, insertar música o sonidos en el documento.  Al Examinar, buscaremos un archivo midi, o wav, los mp3, son demasiado pesados, tardan mucho en cargarse y ralentizan toda la Web.

Además de ser ilegal ;) es recomendable usar archivos wav, de baja calidad o midis de los muchos que podemos encontrar en la Red. Pero alerta, siempre descargarlos y usarlos de nuestro propio servidor o estariamos robando ancho de banda.

En el documento, hasta no hacer una vista previa lo que veremos sera así:

14

Y el código que nos añade:

<p><embed src=”../../webdisenio/imagenes/Realidadosuenio.wav” width=”32″ height=”32″></embed></p>

Al insertar música en una pagina Web, hay algo que hemos de tener muy en cuenta. La mayoría de usuarios finales, suelen, ( solemos) escuchar música mientras navegamos por la Red. Y seguramente habéis ‘sufrido’ que al entrar en una pagina, se organiza un buen lío al mezclarse la música que estamos escuchando, con la que el Webmaster puso en su Sitio.

Y no se puede hacer nada…. mas que cerrar esa pagina y rápido no? Pues podemos entonces, poner música si, pero dar la oportunidad a ese usuario de decidir si la escucha o no, y que no tenga que irse ;) Pulsando el icono que aparece al insertar el sonido, en el Inspector de Propiedades, vemos:

15

Por defecto, es así, pero podemos cambiar algunas cosas: Primero la anchura de la consola:

16

con 90 estará bien.

Y al pulsar el botón Parámetros se abre una ventana donde podemos añadir un para de ellos, el primero autostar con valor false, lo que hará que hasta que no pulsemos para escucharlo no se cargue el sonido:

17

Añadimos otro parámetro que sera loop y valor true ahora vemos en vista previa como resulta lo que hemos hecho:

18

hasta que no pulsemos donde indica la flechita, los sonidos no se activaran y sera el usuario quien decida escucharlos o no, pero no se ira.. y seguramente si lo escuchara… ni que sea por curiosidad no? ;)

El código que nos quedo después de estos cambios lo veremos así:

<embed src=”ruta del archivo de sonido” autostart=”false” loop=”true” width=”90″ height=”32″</embed>

Seguramente conocéis un comando mucho mas habitual, sobretodo los que usen el OE:

<BGSOUND balance=0

src=”../../webdisenio/imagenes/Realidadosuenio.wav” volume=0 loop=infinite>

Con este comando, tan solo escucharan los sonidos, aquellos usuarios que usen el navegador IExplorer quienes entren en la pagina con otro, sea el Firefox ( Mozilla) o cualquier otro, ni se entera que pusimos un archivo de sonido o música ;) Por esto es conveniente usar el embed que sirve para todos, aunque es posible que hayáis de instalar el plugin Quick Time  para el navegador.

Que podéis descargar de la pagina de Apple Aquí

Ejemplos del tuto Aquí

Responder