Kompozer: Crear un banner para la web

Tamaño: px

Comenzar la demostración a partir de la página:

Download "Kompozer: Crear un banner para la web"

Purificación Romero Coronel
hace 8 años
Vistas:

1 Kompozer: Crear un banner para la web En este tutorial vamos a ver cómo crear un banner con Macromedia Flash y luego vamos a insertarlo en la página de inicio de nuestra web. 1.-Abre Macromedia Flash MX 2004 y cambia el tamaño del documento a 800 x 200 píxeles. 1

insertarlo en la página de inicio de nuestra web. 1.

2 2.- Ahora crea un rectángulo con fondo verde y borde azul de las mismas dimensiones. 3.- Selecciona el rectángulo creado y pulsa la tecla F8 para convertirlo a símbolo (con el nombre fondo ) de tipo gráfico. 2

3 4.- Observa la Biblioteca de símbolos ; aparece el símbolo que acabamos de crear. 5.- Cambia el nombre de la capa a fondo, sitúate en el fotograma 40 y pulsa la tecla F6 para insertar fotograma clave. 3

4 6.- Ahora creamos una interpolación de movimiento, de manera que en el fotograma 0 el rectángulo lo ponemos con canal alfa a valor 0, y en el fotograma 40 establecemos el canal alfa al 100%. Para ello sitúate en el fotograma 0, selecciona el rectángulo, y en el desplegable Color elige Alfa con valor 0%. Y luego, en el fotograma 40 elige color alfa con valor 100%. 4

5 7.- Sobre el primer fotograma, hacemos clic con el botón derecho del ratón y elegimos Crear interpolación de movimiento. 5

6 8.- El resultado es el siguiente. Así se consigue que vaya apareciendo el color verde de forma gradual. 9.- Ahora crea una nueva capa y llámala oso Sobre esta capa vamos a insertar la imagen del oso oso_bancoimagenesite.wmf que encontrarás en la carpeta RECURSOS/WEB del curso. Esta imagen está tomada del Banco de Imágenes del ITE. Para insertar la imagen pulsa sobre el menú Archivo/Importar/Importar a biblioteca. 6

- Sobre esta capa vamos a insertar la imagen del oso oso_bancoimagenesite.

7 11.- Arrastra el archivo que acabas de importar a la biblioteca a la ventana de dibujo El resultado sería así. Seleccionando el fotograma 1 de la capa oso, sitúo el oso en la posición de inicio (por ejemplo, a la derecha de la ventana). 7

8 13.- Ahora nos colocamos sobre el fotograma 15 de la capa oso y creamos fotograma clave (F6). En este fotograma 15 cambiamos la posición del oso en la ventana de dibujo Sobre el fotograma 1 de la capa oso, con el botón derecho del ratón, haz clic en Crear interpolación de movimiento. 8

En este fotograma 15 cambiamos la posición del oso en la ventana de

9 15.- Crea una nueva capa asturias. En ella insertaremos un texto Con la herramienta Texto, sobre el fotograma 15, arrastra el ratón sobre la ventana de dibujo y escribe un texto Y con la tecla F6 inserta un fotograma clave en el fotograma 15 para que sólo se vea el texto a partir de este fotograma. 9

ventana de dibujo y escribe un texto. 17.

10 18.- Guarda el archivo en la carpeta Documents/Web/Web Asturias/recursos de tu pendrive con el nombre banner_asturias.fla Ahora vamos a publicar el archivo para convertirlo a formato SWF. Haz clic en el menú Archivo/Publicar. 10

11 20.- Observa que en la misma carpeta recursos se han creado los archivos banner_asturias.swf y banner_asturias.html. El que nos interesa, para insertarlo en la web, es el archivo banner_asturias.swf. Cópialo y pégalo en la carpeta Documents/Web/Web Asturias, junto con los archivos html Ahora crea una fila nueva en la tabla del archivo index.html para ubicar el banner. 11

El que nos interesa, para insertarlo en la web, es el archivo banner_asturias.swf.

12 22.- Sitúa el cursor en la fila donde quieres insertar el banner, y pulsa sobre el menú Insertar/HTML para insertar aquí el código HTML correspondiente al banner. El código HTML lo obtenemos abriendo el fichero banner_asturias.html y pulsando con el botón derecho del ratón sobre la página, eligiendo la opción Ver código fuente de la página. 23.-Copiamos todo el código que aparece entre las etiquetas <body> y </body> Y lo pegamos en la tabla seleccionando la fila en cuestión y con el menú Insertar/ HTML El resultado sería el siguiente: 12

html y pulsando con el botón derecho del ratón sobre la página, eligiendo la opción Ver código fuente de la página. 23.

13 Como el banner mide 800 píxeles y hemos puesto que la tabla sea el 100% de la ventana, el banner no se ajusta a la tabla. 26.-Podemos hacer los siguientes cambios sobre el archivo index.html Tabla: 800 píxeles de ancho. Anchos de las celdas: sigue dejando 30% para las celdas izquierda y derecha y 40% para las celdas centrales. Objetos que hemos insertado con código html, como el álbum de flickr, el de slideshare, goear, etc, miramos el código html y ponemos siempre width=100% de la celda. 27.-Luego, ponemos un color de fondo a la página index.html (menú Formato/Colores y fondo de página): 13

Anchos de las celdas: sigue dejando 30% para las celdas izquierda y derecha y 40% para las celdas centrales.

14 Seleccionamos Usar colores personalizados y escogemos un color para el fondo. El resultado al navegar sería: 28.-Para que la tabla quede centrada respecto a la ventana de navegación, seleccionamos la tabla, y en propiedades de tabla escogemos alineación centrada. 14

-Para que la tabla quede centrada respecto a la ventana de

15 Ahora al navegar tendríamos la tabla centrada y con fondo. 15

Documentos relacionados

Kompozer: Añadir formato a la página y añadir imágenes

Kompozer: Añadir formato a la página y añadir imágenes En estos tutoriales hemos escogido el tema Asturias para hacer una página web con Kompozer. Para empezar, crea la carpeta Web Asturias en la carpeta