Curso de Diseño Web – Design Animation

Tercera Clase En esta clase vamos a empezar a explicar uno de las herramientas fundamentales de Dreamweaver, que es utilizado siempre al querer diseñar un Site. Tablas

1

Antes de empezar a razonar el funcionamiento de las tablas, debemos tener preparado el escritorio de nuestra Web Site correctamente. Al abrir Dreamweaver debemos dirigirnos a nuestra Web Polar que hemos creado la clase pasada Para eso vamos al grupo de paneles y abrimos Archivos Si todo funciona correctamente abrimos nuestra Web Polar Guíese por la figura 1

Figura 1

Usted debería tener algo así (Figura 1) Tenga en cuenta que tenemos que estar en la vista de Diseño. Para saber en cual vista se encuentra identifique en la barra superior las opciones de: Código – Dividir – Diseño

Design Animation - Cursos de informática - TEL. (54.11) (4777.7973) Bs. As. Argentina

1

Cursos de informática . combinar agregar filas y columnas.TEL. Si no es así actívelo desde el menú Ventana y luego seleccione Propiedades Una tabla es una herramienta que nos permite ordenar tres cosas: Imágenes Texto Animación Las tablas están formadas por un conjunto de celdas en donde podremos insertar. Gracias a las tablas podremos distribuir texto. imágenes y animación de forma ordena y concreta en nuestro Site Para poder activarla vaya al menú emergente en Insertar y luego Tabla Figura 2 Las opciones que nos muestra Dreamweaver para insertar una tabla son las que se puede apreciar en la Figura 2 Filas: En este campo podemos insertar x cantidad de filas Columnas: En campo podemos insertar x cantidad de columnas Ancho de tabla: En este campo podemos ser precisos con respecto al ancho de nuestra tabla (En píxeles) Design Animation .11) (4777.Curso de Diseño Web – Design Animation 2 Código: Muestra código html Dividir: Muestra el código html y la vista de diseño Diseño: Solo muestra la vista de diseño Siempre diseñara en vista Diseño También debe tener abierto el inspector de propiedades. As.7973) Bs. (54. Argentina 2 .

11) (4777.Cursos de informática . As.Curso de Diseño Web – Design Animation 3 Grosor de Borde: En este campo podemos obtener de nuestra tabla diferentes grosores de borde Relleno de celda: En este campo podemos insertar mediante el parámetro de medida “píxel” una cierta cantidad de relleno Espacio entre celdas: En este campo podemos darle un espacio determinado a nuestras celdas Inserte la tabla con estos parámetros: Filas: 2 Columna: 1 Le quedara algo así: Figura 3 En este caso. para darse cuenta de cómo construye las mismas Dreamweaver con los diferentes parámetros Design Animation .7973) Bs. (54. Empiece a jugar con las tablas. Dreamweaver hizo lo que le pedimos: Construyo una tabla de dos filas y una columna.TEL. Argentina 3 .

(54. simplemente haga un clic una sola vez un borde de la misma Para seleccionar las celdas que están dentro de la tabla haga otro clic una sola vez dentro la celda que desea seleccionar (no el borde) Si seleccionamos la tabla. As. Es importante entender este concepto Para seleccionar la tabla. es un %70 de Dreamweaver y con mucha practica nos será muy fácil controlar todos los parámetros. Por eso mismo.7973) Bs. y las celdas son los rectángulos que están dentro de la misma. tenemos que darnos cuenta. En este caso. Para seleccionarlo.Curso de Diseño Web – Design Animation 4 Ahora bien.Cursos de informática . simplemente haga un clic con el Mouse en el objeto (este caso tabla) en su borde Ahora. tenemos por un lado una tabla de dos filas y una columna. En este campo complete su nombre. Pruebe en modificar el valor Design Animation . Como interpretamos la tabla? En este momento.11) (4777.TEL. es importante saber que una tabla es el contorno del objeto en general. que cada vez que diseñamos algo en Dreamweaver (sea una tabla u otra cosa). que el manejo de tablas. podemos visualizar cuantas filas tiene la tabla. Si nos equivocamos cuando “creamos” la tabla podemos corregirlo desde aquí. practique Antes que nada. observe el inspector de propiedades (Debajo del escritorio de trabajo) Figura 4 Inspector de propiedades En el inspector de propiedades (al seleccionar la tabla) podemos apreciar los parámetros esenciales que nos permitirá manejarla Tengamos en cuenta. tenemos que seleccionar el mismo para ver que tipo de propiedades tiene. vamos a apreciar en el inspector de propiedades los siguientes parámetros: ID tabla: (Todo en Dreamweaver posee un nombre). Por ejemplo: tabla 1 Filas: En este campo. que es lo mimo que decir dos celdas contenidas en una tabla. Argentina 4 .

hágalo.htm Ahora Dreamweaver le abrió su navegador (ejemplo Explorer) Hay algo en su documento? Ve los bordes de la tabla? Por supuesto que no Ahora pruebe otra vez. pero esta vez complete en el campo Borde: 1 (uno) Noto diferencia? Ahora su tabla posee bordes que pueden visualizarse en el navegador Design Animation .11) (4777. Si no salvo el documento.TEL. (54. Celda: Este campo por ahora siempre inserte el valor 0 (cero) Alinear: Aquí podemos ordenar nuestra tabla alineando correctamente la posición de la misma en el escritorio (y por supuesto las celdas que están adentro) en: Izquierda – Centro – Derecha Borde: Las tablas pueden ser invisibles o o no.Cursos de informática . por ejemplo pruebatablas. En este caso tenemos uno de 200 píxeles Al: En este campo puede ajustar la medida del alto de la tabla en píxeles. Si queremos que se vea en nuestra Web deberemos insertar algún numero (por ejemplo 1) Al ir incrementando este parámetro notaremos que los bordes de nuestra tabla y celdas son de mayor grosor Pruebe lo siguiente: Borde: 0 (cero) Luego presione F12 en su teclado. Aquí nos estamos refiriendo a los bordes de la tabla y de las celdas Si queremos que sea invisible insertamos “0” (cero). Puede ponerle cualquier nombre a su documento html. En ciertos casos Dreamweaver no le pone un valor determinado Rell Celda: Para entender este comportamiento pruebe en poner su nombre en dicha celda.Curso de Diseño Web – Design Animation 5 Columnas: Ídem anterior con respecto a las columnas An: En este campo puede ajustar la medida del ancho de la tabla en píxeles. Para ello simplemente haga un clic en la celda y tipee Ahora en Rell Celda inserta 50 Noto que Dreamweaver acomodo el texto en 50 píxeles de cada lado de la celda? Esta es una manera de acomodar los objetos que dispongamos dentro de las celdas (pero no la única) Esp.7973) Bs. As. Recuerde que en este momento usted va a guardar esta pagina dentro del site polar. Argentina 5 .

Para ello haga un clic en una celda (Dentro de la misma) Observemos las propiedades de esta celda en el inspector: Figura 5 Antes de empezar a ver sus propiedades complete en la primera celda su nombre. (54. Para notar este cambio el valor de Borde deberá ser 1 o más Ahora vamos a ver las propiedades de las celdas. As. Pruebe diferentes matices! Es importante que recuerde en este caso.TEL. Recuerde que si la propiedad Borde es igual a cero .Curso de Diseño Web – Design Animation Siempre que esta diseñando en Dreamweaver. Argentina 6 . Eso significa que también las celdas responderán a estos parámetros o propiedades. A modo de ejemplo miremos la figura 6 Design Animation . al presionar la tecla F12 de su teclado.Cursos de informática . se abrirá su navegador predeterminado.11) (4777. que esta modificando las propiedades de esta tabla. no se apreciara diferencia en su navegador. ya que los bordes de la misma están invisibles. Porque? Porque las celdas están dentro de la tabla! (Después veremos como modificar los parámetros de las celdas junto al inspector de propiedades) Color Borde: En este campo puede insertar un color de borde a la tabla y sus celdas. Esto es como quedaría el trabajo final del la pagina (o documento) Continuemos: 6 Color Fondo: En este campo puede insertar un color en el fondo de la tabla.7973) Bs.

Por ejemplo.TEL.7973) Bs. el texto puede ser Verdana / Times New Roman / Arial y tantas otras mas. Donde podemos modificar su alto y largo y también su color de fondo y borde Podemos ingresar más tablas dentro de las celdas. justificada u otra El resto de las opciones de las celdas son exactamente iguales al de las tablas.Curso de Diseño Web – Design Animation 7 Figura 6 Inspector de propiedades en celda Formato: Si es texto. si seleccionamos el texto de la celda. (54. podemos hacer que nuestro texto tenga diferentes tipos de fuetes que vienen predeterminados por Dreamweaver. As. Deseamos que sean encabezados o párrafos? Fuente: En este campo. si es negrita. Implemente fuentes diferentes y visualícelo en su explorador y notara cambios (F12) Tamaño: Aquí podemos elegir el tamaño de nuestra letra También podemos modificar el color del texto.11) (4777. alineada. cursiva. Solo POSICIONEMONOS dentro de cualquier celda y vayamos a Insertar / Tabla de nuestro menú emergente Ejemplo: Design Animation .Cursos de informática . Argentina 7 .

basta con seleccionarla y apretar la tecla DELETE Si deseamos eliminar celdas. si deseamos eliminar una tabla. Nota Cuando usted ingresa a un site Web siempre va a ir su pagina principal (por Default) que es necesario predeterminar Nuestro navegador.htm (como primera opción) Design Animation .TEL.7973) Bs.11) (4777. donde podrá encontrar el trabajo terminado dentro de su CD en: Ejemplos Webs/ Polar O en la Web: http://www.Curso de Diseño Web – Design Animation 8 Figura 7 En este caso.htm Por ello es necesario tener en cuenta que los usuarios que naveguen ingresaran siempre a index. cuando ingresa a la Web buscara el archivo index. Argentina 8 . As. en nuestra segunda celda.ar/polar/ En el CD tiene todos los archivos e imágenes necesarios para copiar su Web y poder practicar correctamente lo que hoy aprendió.designanimation. (54. (4 filas y 4 columnas) También.Cursos de informática .com. seleccionémoslas y apretemos también DELETE Ahora si empecemos con la parte practica El sitio que empezara a diseñar es el de Polar. insertamos una tabla que contiene 16 celdas.

Curso de Diseño Web – Design Animation 9 Este documento (index. ya que deberá contener toda la información del site (ejemplo en clarín: nota de tapa o principales noticias) Esto es muy importante: Cuando otorgue un nombre a un documento este no podrá tener espacios en blanco. Polar.htm (que es Flash) Insertar imágenes en Tablas Para insertar imágenes en las celdas. Htm (Empresa Grafica) productos.TEL.htm como presentación formal.htm que se encuentra el sitio en si.htm) será la cara de nuestra Web.htm (correcto) En nuestro caso. Para entrar al sitio en si presionara ENTRAR Pruebe y observe Si presiono ENTRAR nos dirigiremos a intro.htm (error) mipagina. solo debe hacer un clic en una celda y luego en el menú emergente vaya a Insertar / Imágenes Trate de empezar con el site de polar (intro. ya que seguramente empezara a tener dudas de cómo ordenar la información. Design Animation .htm (Tipo de productos que ofrece) empresa) donde (Ubicación de la En Index. Ingrese el texto. Argentina 9 . Ejemplo: mi pagina.htm estamos.htm). todas las opciones y links correspondientes para que los visitantes puedan de a poco ingresar en cada documento interno especifico Index. de acuerdo a las imágenes que contiene en el CD. (54.htm y en la clase numero 4 index. es una empresa de industria grafica y deberá contener en su menú. Flash Abra un nuevo documento del programa.7973) Bs. y termine ese documento de forma COMPLETA Consultemos. As.Htm representaremos un Bienvenido con el slogan de la compañía.11) (4777. Otros la eligen para ingresar al sitio directamente Nosotros vamos a diseñar intro.Cursos de informática . con su barra de navegación y especificación del rubro Algunos sites eligen el documento index.

7973) Bs. Barra de propiedades Figura 8 Esta barra posee todas las herramientas necesarias para diseñar los objetos que estamos interesados en implementar en Flash Empezaremos de izquierda a derecha y de arriba hacia abajo 10 Herramienta de Selección: Selecciona Objetos simplemente arrastrando con el Mouse Herramienta de Selección de Subseleccion: No es utilizado en esta versión de Flash Herramienta Línea: Grafica Líneas Herramienta Lazo: Selecciona por medio de un lazo ciertas partes especificas de nuestros objetos Herramienta Pluma: Grafica por medio de la pluma Bezier objetos Herramienta Texto: Inserta texto en nuestros trabajos Herramienta Ovalo: Grafica Círculos y óvalos Herramienta Cuadrado: Grafica Cuadrados y rectángulos Herramienta Lápiz Herramienta Pincel Herramienta transformación libre: Modifica parámetros de los objetos (altura.TEL. conjuntamente con la barra de propiedades. (54.11) (4777. As. ancho. nos daremos cuenta con exactitud cual utilizar y en que caso particular Línea de Tiempo Design Animation .Cursos de informática . Argentina 10 . radio y otros) Herramienta transformación de relleno: No es muy utilizado Bote de tinta: No es muy utilizado en esta versión de Flash Herramienta Cubo de pintura: Colorea objetos Cuenta Gotas: Copia el color de objetos para modificarlo en otros Herramienta borrador: Funciona como una goma de borrar Herramienta Mano: Se utiliza para desplazarse en el escenario de forma libre Herramienta Zoom: Actúa como una lupa En este apartado ejemplificamos el concepto básico y esencial de cada herramienta de nuestra barra Con el tiempo.Curso de Diseño Web – Design Animation En esta clase vamos a estudiar la barra de herramientas y la línea de tiempo del programa.

As.11) (4777.Curso de Diseño Web – Design Animation En nuestra segunda clase aprendimos muchas cosas acerca de los Frames o fotogramas (pequeños cuadrados blancos de nuestra línea de tiempo). pensemos: Que necesito? En principio necesitamos el objeto en si.TEL. por ejemplo que se desplace de izquierda a derecha Para ello. Argentina 11 . Luego en el escenario hagamos el círculo deseado y observemos nuestra barra de propiedades del círculo 11 Figura 9 Y ahora la barra de propiedades: Design Animation .7973) Bs. En esta clase explicaremos que son los fotogramas claves Supongamos que queremos que un círculo posea cierto movimiento en nuestro escenario. El circulo De la barra de herramientas. (54.Cursos de informática . hacemos un clic en la opción de herramienta Ovalo.

Por ejemplo.Curso de Diseño Web – Design Animation 12 Figura 10 Bien. solo debemos seleccionar la mitad del mismo. Para ello podemos seleccionarlo (Doble clic en la superficie) y con la herramienta de selección lo podremos trasladar en “x” y en “y” a cualquier parte de nuestro escenario Acomodase. el borde es solo uno. si deseamos no tener (o eliminar) el contorno. Diviértase en Flash! Para continuar con el ejercicio. (54. tan solo seleccionado la superficie (Un solo clic en la superficie del mismo bastara con seleccionarla) y apretando la tecla DELETE lo eliminaremos También podemos mover el objeto. si deseo que el círculo se transforme en un semi-circulo.7973) Bs. Colóquelos en diferentes partes del escenario.11) (4777. y cree varios objetos. También puede modificar el GROSOR del contorno incrementado el número que se encuentra a su derecha Flash es un programa. Tenemos un circulo. podemos seleccionarlo (haga un clic en cada borde) y luego eliminarlo con la tecla DELETE En el caso del círculo. note la línea de tiempo principal: Design Animation .tienen la propiedad de modificarse según las necesidades de cada uno. en el que los objetos que creamos en el . As. Por ejemplo.Cursos de informática . y luego teclear DELETE En caso que solo queramos que nuestro diseño “ solo posea bordes” . que según nuestra barra de propiedades tiene un diámetro de 81 píxeles.TEL. Argentina 12 . En un cuadrado serán 4 Con la herramienta de selección. y que esta en cierta posición del eje “x” y eje” y” Cuando creamos objetos en Flash. Modifique el color de sus contornos y de su superficie. también podemos modificar el objeto. Córtelos mediante la herramienta de selección. poseen propiedades de color en su CONTORNO y en su SUPERFICIE Como controlamos estas matices de color? En la misma barra de propiedades! Puede cambiar el contorno y superficie de acuerdo a los parámetros deseados.

11) (4777. para ello con solo darle doble clic en CAPA1.7973) Bs. nos permite bloquear o desbloquear los objetos Design Animation . Esta herramienta sirve para no confundirnos cuando tengamos muchos objetos en nuestro escenario De la misma manera. el candado que se encuentra al lado. siempre es recomendable que esta capa posea un nombre. As. Argentina 13 . (54. Vuelva a clickearlo y volverá a aparecer. usted podrá modificar su nombre.Cursos de informática . por eso conviene darle un nombre Entonces: Figura 12 Note el cambio del nombre de la capa de la figura 11 a figura 12 El ojito de color negro (que se encuentra en la línea de tiempo. al lado del nombre de la capa) indica si el objeto que se encuentra en el fotograma (en este caso circulo) es visible o no Haga un clic el punto que estaba debajo de este ojo. y en ciertos casos no sabrá cual es cada una de ellas.TEL.Curso de Diseño Web – Design Animation 13 Figura 11 El circulo que hemos insertado en la CAPA1 origino un fotograma clave (punto negro) en el fotograma numero 1 Ahora bien. Por ejemplo: mi círculo En un momento usted tendrá varias capas. en esta misma capa y el objeto círculo desaparecerá.

(54.Cursos de informática . Argentina 14 . podrá identificar unos pequeños poros en la superficie y contorno del mismo Ahora vamos a ingresar a nuestro círculo a la biblioteca Para ello presione F8 de nuestro teclado y se le mostraran diferentes opciones: Figura 13 En este caso. Flash nos pregunta que tipo de SIMBOLO queremos agregar a nuestra biblioteca personal (De hecho active la biblioteca desde VENTANA del menú emergente y luego BIBLIOTECA) En primera medida nosotros vamos a crear un GRAFICO y le vamos a poner el nombre de CÍRCULO Design Animation .11) (4777.TEL.7973) Bs.Curso de Diseño Web – Design Animation Si le da un clic al punto que se encuentra debajo del candado no podrá mover el objeto círculo (Pruébelo) Los objetos en flash (sean imágenes u otros dibujos vectoriales) deben estar contenidos en una biblioteca Esta es casi la parte más importante del diseño en Flash Mx 14 La biblioteca nos permite declarar todos los objetos en el programa Por eso que cada vez que creemos objetos o importemos. As. es necesario agregarlo en la biblioteca NO LO OLVIDE Seleccione el circulo (doble clic en la superficie) con la herramienta de selección o simplemente arrastre el Mouse con esta misma herramienta hasta seleccionarlo Nota Cada vez que un objeto vectorial o imagen esta seleccionado.

As.TEL.7973) Bs. que de ahora en adelante se llamara “SIMBOLO GRAFICO CIRCULO” Figura 15 Los elementos en nuestra biblioteca van a ser declarados uno a uno.11) (4777. (54. con el objeto de minimizar espacio en nuestra película Al tener nuestro circulo como instancia. tan solo seleccionándolo y apretando DELETE. tal como lo hicimos recién También podemos eliminarlo de la biblioteca. sus parámetros cambiaron y dejo de ser una forma para convertirse en un símbolo de biblioteca Ahora bien: Deseo que esa instancia se desplace de izquierda a derecha (animándose) como debo proseguir? Design Animation . notaremos que al seleccionarlo en el escenario. pero tenga cuidado! Si eliminamos un elemento de nuestra biblioteca desaparecerá de nuestro escenario por siempre El objetivo de agregar o declarar nuestros objetos en la biblioteca de flash es para que el programa lo identifique como una instancia. Una instancia.Curso de Diseño Web – Design Animation 15 Figura 14 Finalmente ponemos Aceptar Si abrimos nuestra biblioteca (lo cual ustedes debieron hacerlo) podemos visualizar nuestro objeto circulo. Argentina 15 . es un símbolo (grafico/botón o Movie clip) creado en la biblioteca.Cursos de informática . por ahora para nosotros.

que esta en el fotograma numero 1 y le damos un clic derecho vamos a encontrar varias opciones. Para ello.11) (4777. As. Argentina 16 .7973) Bs. tendremos que tener algo muy en cuenta Fotograma clave: Indica que va a ver un cambio en la línea de tiempo.Curso de Diseño Web – Design Animation 16 Es muy sencillo. desde el fotograma 1 al 5 y notaran que el cambio se realizo! Para probar nuestras películas en Flash. o también seleccionamos nuestro objeto o símbolo y mediante en inspector de propiedades los trasladamos mediante los ejes “x” y “y” Muevan el cabezal. Solo basta mover nuestro objeto a la posición que deseemos dentro del escenario Podemos utilizar la herramienta de selección para trasladarlo.TEL.Cursos de informática . solo debemos apretar CROL + ENTER de nuestro teclado Notaron la diferencia? Estamos animando! Pero la animación puede complementarse de manera mas detallada Si nos posicionamos en el fotograma clave. Design Animation . (54. Todo depende de la velocidad que queramos que se desplace. y a su vez en un objeto En el Frame o fotograma numero 1 existe un fotograma clave ya que esta seleccionado con un punto Figura 16 Para que exista un cambio en ese objeto simplemente debemos posicionarnos en el fotograma numero 5 y luego apretemos F6 de nuestro teclado Figura 17 Les quedo algo así? Ya estamos a un paso de animarlo Ahora noten que el cabezal (Línea de color rojo) se posiciono en el fotograma numero 5.

As. Sigan implementando movimientos y consúltennos! Design Animation .Cursos de informática . También se creo una flecha que va desde el fotograma clave número 1 al fotograma clave numero 5 “o” expresado de otra manera: Creamos una animación de un símbolo grafico del Frame 1 al 5 Prueben en hacer CONTROL + ENTER y la animación será de diferente manera Si desean que el tiempo de animación sea más lento. Argentina 17 .TEL. (54.7973) Bs. Para ello. solo deben seleccionarlo y arrastrarlo al numero 20 Hasta aquí hemos terminado la clase numero 3. en vez de situar el segundo fotograma clave en el Frame número 5.Curso de Diseño Web – Design Animation Elijamos la primera de ellas Crear interpolación de movimiento y les quedara algo así: 17 Figura 18 Los fotogramas cambiaron de color. y ahora son violetas.11) (4777. posiciónenlo en el 20 (por ejemplo).

Sign up to vote on this title
UsefulNot useful