Curso de Diseño de Web Sites Clase 3 Design Animation

Curso de Diseo 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 disear un Site. Tablas
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 Guese por la figura 1
Figura 1
Usted debera tener algo as (Figura 1) Tenga en cuenta que tenemos que estar en la vista de Diseo. Para saber en cual vista se encuentra identifique en la barra superior las opciones de: Cdigo Dividir Diseo
Design Animation - Cursos de informtica - TEL. (54.11) (4777.7973) Bs. As. Argentina
Cdigo: Muestra cdigo html Dividir: Muestra el cdigo html y la vista de diseo Diseo: Solo muestra la vista de diseo Siempre diseara en vista Diseo Tambin debe tener abierto el inspector de propiedades. Si no es as actvelo desde el men Ventana y luego seleccione Propiedades Una tabla es una herramienta que nos permite ordenar tres cosas: Imgenes Texto Animacin Las tablas estn formadas por un conjunto de celdas en donde podremos insertar, combinar agregar filas y columnas. Gracias a las tablas podremos distribuir texto, imgenes y animacin 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 pxeles)
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 parmetro de medida pxel una cierta cantidad de relleno Espacio entre celdas: En este campo podemos darle un espacio determinado a nuestras celdas Inserte la tabla con estos parmetros: Filas: 2 Columna: 1 Le quedara algo as:
Figura 3 En este caso, Dreamweaver hizo lo que le pedimos: Construyo una tabla de dos filas y una columna. Empiece a jugar con las tablas, para darse cuenta de cmo construye las mismas Dreamweaver con los diferentes parmetros
Ahora bien. Como interpretamos la tabla? En este momento, tenemos que darnos cuenta, que cada vez que diseamos algo en Dreamweaver (sea una tabla u otra cosa), tenemos que seleccionar el mismo para ver que tipo de propiedades tiene. Para seleccionarlo, simplemente haga un clic con el Mouse en el objeto (este caso tabla) en su borde Ahora, 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 parmetros esenciales que nos permitir manejarla Tengamos en cuenta, que el manejo de tablas, es un %70 de Dreamweaver y con mucha practica nos ser muy fcil controlar todos los parmetros. Por eso mismo, practique Antes que nada, es importante saber que una tabla es el contorno del objeto en general, y las celdas son los rectngulos que estn dentro de la misma. En este caso, tenemos por un lado una tabla de dos filas y una columna, que es lo mimo que decir dos celdas contenidas en una tabla. Es importante entender este concepto Para seleccionar la tabla, simplemente haga un clic una sola vez un borde de la misma Para seleccionar las celdas que estn dentro de la tabla haga otro clic una sola vez dentro la celda que desea seleccionar (no el borde) Si seleccionamos la tabla, vamos a apreciar en el inspector de propiedades los siguientes parmetros: ID tabla: (Todo en Dreamweaver posee un nombre). En este campo complete su nombre. Por ejemplo: tabla 1 Filas: En este campo, podemos visualizar cuantas filas tiene la tabla. Si nos equivocamos cuando creamos la tabla podemos corregirlo desde aqu. Pruebe en modificar el valor
Columnas: dem anterior con respecto a las columnas An: En este campo puede ajustar la medida del ancho de la tabla en pxeles. En este caso tenemos uno de 200 pxeles Al: En este campo puede ajustar la medida del alto de la tabla en pxeles. En ciertos casos Dreamweaver no le pone un valor determinado Rell Celda: Para entender este comportamiento pruebe en poner su nombre en dicha celda. 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 pxeles 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. Celda: Este campo por ahora siempre inserte el valor 0 (cero) Alinear: Aqu podemos ordenar nuestra tabla alineando correctamente la posicin de la misma en el escritorio (y por supuesto las celdas que estn adentro) en: Izquierda Centro Derecha Borde: Las tablas pueden ser invisibles o o no. Aqu nos estamos refiriendo a los bordes de la tabla y de las celdas Si queremos que sea invisible insertamos 0 (cero). Si queremos que se vea en nuestra Web deberemos insertar algn numero (por ejemplo 1) Al ir incrementando este parmetro 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. Si no salvo el documento, hgalo. Recuerde que en este momento usted va a guardar esta pagina dentro del site polar. Puede ponerle cualquier nombre a su documento html, por ejemplo pruebatablas.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

Siempre que esta diseando en Dreamweaver, al presionar la tecla F12 de su teclado, se abrir su navegador predeterminado. Esto es como quedara el trabajo final del la pagina (o documento) Continuemos:
Color Fondo: En este campo puede insertar un color en el fondo de la tabla. Pruebe diferentes matices! Es importante que recuerde en este caso, que esta modificando las propiedades de esta tabla. Eso significa que tambin las celdas respondern a estos parmetros o propiedades. Porque? Porque las celdas estn dentro de la tabla! (Despus veremos como modificar los parmetros 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. Recuerde que si la propiedad Borde es igual a cero , no se apreciara diferencia en su navegador, ya que los bordes de la misma estn invisibles. Para notar este cambio el valor de Borde deber ser 1 o ms Ahora vamos a ver las propiedades de las celdas. 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. A modo de ejemplo miremos la figura 6
Figura 6 Inspector de propiedades en celda Formato: Si es texto. Deseamos que sean encabezados o prrafos? Fuente: En este campo, podemos hacer que nuestro texto tenga diferentes tipos de fuetes que vienen predeterminados por Dreamweaver. Por ejemplo, si seleccionamos el texto de la celda, el texto puede ser Verdana / Times New Roman / Arial y tantas otras mas. Implemente fuentes diferentes y visualcelo en su explorador y notara cambios (F12) Tamao: Aqu podemos elegir el tamao de nuestra letra Tambin podemos modificar el color del texto, si es negrita, cursiva, alineada, justificada u otra El resto de las opciones de las celdas son exactamente iguales al de las tablas. Donde podemos modificar su alto y largo y tambin su color de fondo y borde Podemos ingresar ms tablas dentro de las celdas. Solo POSICIONEMONOS dentro de cualquier celda y vayamos a Insertar / Tabla de nuestro men emergente Ejemplo:
Figura 7 En este caso, en nuestra segunda celda, insertamos una tabla que contiene 16 celdas. (4 filas y 4 columnas) Tambin, si deseamos eliminar una tabla, basta con seleccionarla y apretar la tecla DELETE Si deseamos eliminar celdas, seleccionmoslas y apretemos tambin DELETE Ahora si empecemos con la parte practica El sitio que empezara a disear es el de Polar, donde podr encontrar el trabajo terminado dentro de su CD en: Ejemplos Webs/ Polar O en la Web: http://www.designanimation.com.ar/polar/ En el CD tiene todos los archivos e imgenes necesarios para copiar su Web y poder practicar correctamente lo que hoy aprendi. Nota Cuando usted ingresa a un site Web siempre va a ir su pagina principal (por Default) que es necesario predeterminar Nuestro navegador, cuando ingresa a la Web buscara el archivo index.htm Por ello es necesario tener en cuenta que los usuarios que naveguen ingresaran siempre a index.htm (como primera opcin)
Este documento (index.htm) ser la cara de nuestra Web, ya que deber contener toda la informacin del site (ejemplo en clarn: nota de tapa o principales noticias) Esto es muy importante: Cuando otorgue un nombre a un documento este no podr tener espacios en blanco. Ejemplo: mi pagina.htm (error) mipagina.htm (correcto) En nuestro caso, Polar, es una empresa de industria grafica y deber contener en su men, todas las opciones y links correspondientes para que los visitantes puedan de a poco ingresar en cada documento interno especifico Index. Htm (Empresa Grafica) productos.htm estamos.htm (Tipo de productos que ofrece) empresa) donde (Ubicacin de la
En Index.Htm representaremos un Bienvenido con el slogan de la compaa. Para entrar al sitio en si presionara ENTRAR Pruebe y observe Si presiono ENTRAR nos dirigiremos a intro.htm que se encuentra el sitio en si, con su barra de navegacin y especificacin del rubro Algunos sites eligen el documento index.htm como presentacin formal. Otros la eligen para ingresar al sitio directamente Nosotros vamos a disear intro.htm y en la clase numero 4 index.htm (que es Flash) Insertar imgenes en Tablas Para insertar imgenes en las celdas, solo debe hacer un clic en una celda y luego en el men emergente vaya a Insertar / Imgenes Trate de empezar con el site de polar (intro.htm), de acuerdo a las imgenes que contiene en el CD. Ingrese el texto, y termine ese documento de forma COMPLETA Consultemos, ya que seguramente empezara a tener dudas de cmo ordenar la informacin.
Flash
Abra un nuevo documento del programa.

En esta clase vamos a estudiar la barra de herramientas y la lnea de tiempo del programa, conjuntamente con la barra de propiedades. Barra de propiedades Figura 8 Esta barra posee todas las herramientas necesarias para disear los objetos que estamos interesados en implementar en Flash Empezaremos de izquierda a derecha y de arriba hacia abajo
10
Herramienta de Seleccin: Selecciona Objetos simplemente arrastrando con el Mouse Herramienta de Seleccin de Subseleccion: No es utilizado en esta versin de Flash Herramienta Lnea: Grafica Lneas 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 Crculos y valos Herramienta Cuadrado: Grafica Cuadrados y rectngulos Herramienta Lpiz Herramienta Pincel Herramienta transformacin libre: Modifica parmetros de los objetos (altura, ancho, radio y otros) Herramienta transformacin de relleno: No es muy utilizado Bote de tinta: No es muy utilizado en esta versin 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: Acta como una lupa En este apartado ejemplificamos el concepto bsico y esencial de cada herramienta de nuestra barra Con el tiempo, nos daremos cuenta con exactitud cual utilizar y en que caso particular Lnea de Tiempo
10

En nuestra segunda clase aprendimos muchas cosas acerca de los Frames o fotogramas (pequeos cuadrados blancos de nuestra lnea de tiempo). En esta clase explicaremos que son los fotogramas claves Supongamos que queremos que un crculo posea cierto movimiento en nuestro escenario, por ejemplo que se desplace de izquierda a derecha Para ello, pensemos: Que necesito? En principio necesitamos el objeto en si. El circulo De la barra de herramientas, hacemos un clic en la opcin de herramienta Ovalo. Luego en el escenario hagamos el crculo deseado y observemos nuestra barra de propiedades del crculo
11
Figura 9 Y ahora la barra de propiedades:
11
12
Figura 10
Bien. Tenemos un circulo, que segn nuestra barra de propiedades tiene un dimetro de 81 pxeles, y que esta en cierta posicin del eje x y eje y Cuando creamos objetos en Flash, 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 parmetros deseados. Tambin puede modificar el GROSOR del contorno incrementado el nmero que se encuentra a su derecha Flash es un programa, en el que los objetos que creamos en el ,tienen la propiedad de modificarse segn las necesidades de cada uno. Por ejemplo, si deseamos no tener (o eliminar) el contorno, podemos seleccionarlo (haga un clic en cada borde) y luego eliminarlo con la tecla DELETE En el caso del crculo, el borde es solo uno. En un cuadrado sern 4 Con la herramienta de seleccin, tambin podemos modificar el objeto. Por ejemplo, si deseo que el crculo se transforme en un semi-circulo, solo debemos seleccionar la mitad del mismo, y luego teclear DELETE En caso que solo queramos que nuestro diseo solo posea bordes , tan solo seleccionado la superficie (Un solo clic en la superficie del mismo bastara con seleccionarla) y apretando la tecla DELETE lo eliminaremos Tambin podemos mover el objeto. Para ello podemos seleccionarlo (Doble clic en la superficie) y con la herramienta de seleccin lo podremos trasladar en x y en y a cualquier parte de nuestro escenario Acomodase, y cree varios objetos. Crtelos mediante la herramienta de seleccin. Colquelos en diferentes partes del escenario. Modifique el color de sus contornos y de su superficie. Divirtase en Flash! Para continuar con el ejercicio, note la lnea de tiempo principal:
12
13
Figura 11
El circulo que hemos insertado en la CAPA1 origino un fotograma clave (punto negro) en el fotograma numero 1 Ahora bien, siempre es recomendable que esta capa posea un nombre, para ello con solo darle doble clic en CAPA1, usted podr modificar su nombre. Por ejemplo: mi crculo En un momento usted tendr varias capas, y en ciertos casos no sabr cual es cada una de ellas, 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 lnea 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, en esta misma capa y el objeto crculo desaparecer. Vuelva a clickearlo y volver a aparecer. Esta herramienta sirve para no confundirnos cuando tengamos muchos objetos en nuestro escenario De la misma manera, el candado que se encuentra al lado, nos permite bloquear o desbloquear los objetos
13

Si le da un clic al punto que se encuentra debajo del candado no podr mover el objeto crculo (Prubelo) Los objetos en flash (sean imgenes u otros dibujos vectoriales) deben estar contenidos en una biblioteca Esta es casi la parte ms importante del diseo 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, es necesario agregarlo en la biblioteca NO LO OLVIDE Seleccione el circulo (doble clic en la superficie) con la herramienta de seleccin o simplemente arrastre el Mouse con esta misma herramienta hasta seleccionarlo Nota Cada vez que un objeto vectorial o imagen esta seleccionado, podr identificar unos pequeos poros en la superficie y contorno del mismo Ahora vamos a ingresar a nuestro crculo 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 CRCULO
14
15
Figura 14 Finalmente ponemos Aceptar Si abrimos nuestra biblioteca (lo cual ustedes debieron hacerlo) podemos visualizar nuestro objeto circulo, que de ahora en adelante se llamara SIMBOLO GRAFICO CIRCULO
Figura 15
Los elementos en nuestra biblioteca van a ser declarados uno a uno, tal como lo hicimos recin Tambin podemos eliminarlo de la biblioteca, tan solo seleccionndolo y apretando DELETE, 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, por ahora para nosotros, es un smbolo (grafico/botn o Movie clip) creado en la biblioteca, con el objeto de minimizar espacio en nuestra pelcula Al tener nuestro circulo como instancia, notaremos que al seleccionarlo en el escenario, sus parmetros cambiaron y dejo de ser una forma para convertirse en un smbolo de biblioteca Ahora bien: Deseo que esa instancia se desplace de izquierda a derecha (animndose) como debo proseguir?
15
16
Es muy sencillo. Todo depende de la velocidad que queramos que se desplace. Para ello, tendremos que tener algo muy en cuenta Fotograma clave: Indica que va a ver un cambio en la lnea de tiempo, 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 (Lnea de color rojo) se posiciono en el fotograma numero 5. Solo basta mover nuestro objeto a la posicin que deseemos dentro del escenario Podemos utilizar la herramienta de seleccin para trasladarlo, o tambin seleccionamos nuestro objeto o smbolo y mediante en inspector de propiedades los trasladamos mediante los ejes x y y Muevan el cabezal, desde el fotograma 1 al 5 y notaran que el cambio se realizo! Para probar nuestras pelculas en Flash, solo debemos apretar CROL + ENTER de nuestro teclado Notaron la diferencia? Estamos animando! Pero la animacin puede complementarse de manera mas detallada Si nos posicionamos en el fotograma clave, que esta en el fotograma numero 1 y le damos un clic derecho vamos a encontrar varias opciones.
16

Elijamos la primera de ellas Crear interpolacin de movimiento y les quedara algo as:
17
Figura 18 Los fotogramas cambiaron de color, y ahora son violetas. Tambin se creo una flecha que va desde el fotograma clave nmero 1 al fotograma clave numero 5 o expresado de otra manera: Creamos una animacin de un smbolo grafico del Frame 1 al 5 Prueben en hacer CONTROL + ENTER y la animacin ser de diferente manera Si desean que el tiempo de animacin sea ms lento, en vez de situar el segundo fotograma clave en el Frame nmero 5, posicinenlo en el 20 (por ejemplo). Para ello, solo deben seleccionarlo y arrastrarlo al numero 20 Hasta aqu hemos terminado la clase numero 3. Sigan implementando movimientos y consltennos!
17

Curso de Diseño de Web Sites Clase 3 Design Animation

Hochgeladen von

Dokumentinformationen

Originaltitel

Copyright

Verfügbare Formate

Dieses Dokument teilen

Dokument teilen oder einbetten

Freigabeoptionen

Stufen Sie dieses Dokument als nützlich ein?

Sind diese Inhalte unangemessen?

Copyright:

Verfügbare Formate

Curso de Diseño de Web Sites Clase 3 Design Animation

Hochgeladen von

Copyright:

Verfügbare Formate

Curso de Diseo Web Design Animation

Curso de Diseo Web Design Animation

Curso de Diseo Web Design Animation

Curso de Diseo Web Design Animation

Curso de Diseo Web Design Animation

Curso de Diseo Web Design Animation

Curso de Diseo Web Design Animation

Curso de Diseo Web Design Animation

Curso de Diseo Web Design Animation

Curso de Diseo Web Design Animation

Curso de Diseo Web Design Animation

Figura 9 Y ahora la barra de propiedades:

Curso de Diseo Web Design Animation

Curso de Diseo Web Design Animation

Curso de Diseo Web Design Animation

Curso de Diseo Web Design Animation

Curso de Diseo Web Design Animation

Curso de Diseo Web Design Animation

Das könnte Ihnen auch gefallen