curso de diseño de web sites clase 3 design animation
TRANSCRIPT
-
8/3/2019 Curso de diseo de Web Sites Clase 3 Design Animation
1/17
Curso de Diseo Web Design Animation
Tercera Clase
En esta clase vamos a empezar a explicar uno de las herramientas fundamentales deDreamweaver, que es utilizado siempre al querer disear un Site.
Tablas
Antes de empezar a razonar el funcionamiento de las tablas, debemos tener preparadoel escritorio de nuestra Web Site correctamente.
Al abrir Dreamweaver debemos dirigirnos a nuestra Web Polar que hemos creado laclase 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 vistase 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 1
1
-
8/3/2019 Curso de diseo de Web Sites Clase 3 Design Animation
2/17
Curso de Diseo Web Design Animation
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 elmen Ventana y luego seleccione Propiedades
Una tabla es una herramienta que nos permite ordenar tres cosas:
Imgenes
Texto
Animacin
Las tablas estn formadaspor un conjunto de celdasen donde podremosinsertar, combinar agregarfilas y columnas.
Gracias a las tablaspodremos distribuir texto,imgenes y animacin deforma ordena y concreta ennuestro Site Para poderactivarla vaya al menemergente en Insertar y
luego Tabla
Figura 2
Las opciones que nosmuestra 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 columnasAncho de tabla: En este campo podemos ser precisos con respecto al ancho de nuestratabla (En pxeles)
Design Animation - Cursos de informtica - TEL. (54.11) (4777.7973) Bs. As. Argentina 2
2
-
8/3/2019 Curso de diseo de Web Sites Clase 3 Design Animation
3/17
Curso de Diseo Web Design Animation
Grosor de Borde: En este campo podemos obtener de nuestra tabla diferentes grosoresde borde
Relleno de celda: En este campo podemos insertar mediante el parmetro de medidapxel una cierta cantidad de relleno
Espacio entre celdas: En este campo podemos darle un espacio determinado anuestras 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, paradarse cuenta de cmo construye las mismas Dreamweaver con los diferentesparmetros
Design Animation - Cursos de informtica - TEL. (54.11) (4777.7973) Bs. As. Argentina 3
3
-
8/3/2019 Curso de diseo de Web Sites Clase 3 Design Animation
4/17
Curso de Diseo Web Design Animation
Ahora bien. Como interpretamos la tabla?
En este momento, tenemos que darnos cuenta, que cada vez que diseamos algo enDreamweaver (sea una tabla u otra cosa), tenemos que seleccionar el mismo para verque tipo de propiedades tiene.
Para seleccionarlo, simplemente haga un clic con el Mouse en el objeto (este casotabla) 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 losparmetros esenciales que nos permitir manejarla
Tengamos en cuenta, que el manejo de tablas, es un %70 de Dreamweaver y conmucha 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 engeneral, 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 lomimo que decir dos celdas contenidas en una tabla. Es importante entender esteconcepto
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 vezdentro la celda que desea seleccionar (no el borde)
Si seleccionamos la tabla, vamos a apreciar en el inspector de propiedades lossiguientes parmetros:
ID tabla: (Todo en Dreamweaver posee un nombre). En este campo complete sunombre. Por ejemplo: tabla 1
Filas: En este campo, podemos visualizar cuantas filas tiene la tabla. Si nosequivocamos cuando creamos la tabla podemos corregirlo desde aqu. Pruebe enmodificar el valor
Design Animation - Cursos de informtica - TEL. (54.11) (4777.7973) Bs. As. Argentina 4
4
-
8/3/2019 Curso de diseo de Web Sites Clase 3 Design Animation
5/17
Curso de Diseo Web Design Animation
Columnas: dem anterior con respecto a las columnas
An: En este campo puede ajustar la medida del ancho de la tabla en pxeles. En estecaso tenemos uno de 200 pxeles
Al: En este campo puede ajustar la medida del alto de la tabla en pxeles. En ciertoscasos Dreamweaver no le pone un valor determinado
Rell Celda: Para entender este comportamiento pruebe en poner su nombre en dichacelda. 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 lamisma 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 bordesde la tabla y de las celdas
Si queremos que sea invisible insertamos 0 (cero). Si queremos que se vea ennuestra Web deberemos insertar algn numero (por ejemplo 1)
Al ir incrementando este parmetro notaremos que los bordes de nuestra tabla yceldas 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
Design Animation - Cursos de informtica - TEL. (54.11) (4777.7973) Bs. As. Argentina 5
5
-
8/3/2019 Curso de diseo de Web Sites Clase 3 Design Animation
6/17
Curso de Diseo Web Design Animation
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 lapagina (o documento)
Continuemos:
Color Fondo: En este campo puede insertar un color en el fondo de la tabla. Pruebediferentes matices!Es importante que recuerde en este caso, que esta modificando las propiedades deesta tabla. Eso significa que tambin las celdas respondern a estos parmetros opropiedades.Porque? Porque las celdas estn dentro de la tabla! (Despus veremos como modificarlos 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 sunavegador, ya que los bordes de la misma estn invisibles. Para notar este cambio elvalor 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. Amodo de ejemplo miremos la figura 6
Design Animation - Cursos de informtica - TEL. (54.11) (4777.7973) Bs. As. Argentina 6
6
-
8/3/2019 Curso de diseo de Web Sites Clase 3 Design Animation
7/17
Curso de Diseo Web Design Animation
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 defuetes que vienen predeterminados por Dreamweaver. Por ejemplo, si seleccionamos eltexto de la celda, el texto puede ser Verdana / Times New Roman / Arial y tantas otrasmas.
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. Dondepodemos modificar su alto y largo y tambin su color de fondo y borde
Podemos ingresar ms tablas dentro de las celdas. Solo POSICIONEMONOS dentro decualquier celda y vayamos a Insertar / Tabla de nuestro men emergente
Ejemplo:
Design Animation - Cursos de informtica - TEL. (54.11) (4777.7973) Bs. As. Argentina 7
7
-
8/3/2019 Curso de diseo de Web Sites Clase 3 Design Animation
8/17
Curso de Diseo Web Design Animation
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 teclaDELETE
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 trabajoterminado 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 poderpracticar 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 predeterminarNuestro navegador, cuando ingresa a la Web buscara el archivo index.htm
Por ello es necesario tener en cuenta que los usuarios que naveguen ingresaransiempre a index.htm (como primera opcin)
Design Animation - Cursos de informtica - TEL. (54.11) (4777.7973) Bs. As. Argentina 8
8
http://www.polar.designanimation.com.ar/http://www.polar.designanimation.com.ar/ -
8/3/2019 Curso de diseo de Web Sites Clase 3 Design Animation
9/17
Curso de Diseo Web Design Animation
Este documento (index.htm) ser la cara de nuestra Web, ya que deber contener todala 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 podrtener 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 sumen, todas las opciones y links correspondientes para que los visitantes puedan de apoco ingresar en cada documento interno especifico
Index. Htm productos.htm dondeestamos.htm
(Empresa Grafica) (Tipo de productos que ofrece) (Ubicacin de laempresa)
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 subarra de navegacin y especificacin del rubroAlgunos sites eligen el documento index.htm como presentacin formal. Otros la eligenpara 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 elmen emergente vaya a
Insertar / Imgenes
Trate de empezar con el site de polar (intro.htm), de acuerdo a las imgenes quecontiene en el CD. Ingrese el texto, y termine ese documento de forma COMPLETA
Consultemos, ya que seguramente empezara a tener dudas de cmo ordenar lainformacin.
Flash
Abra un nuevo documento del programa.
Design Animation - Cursos de informtica - TEL. (54.11) (4777.7973) Bs. As. Argentina 9
9
-
8/3/2019 Curso de diseo de Web Sites Clase 3 Design Animation
10/17
Curso de Diseo Web Design Animation
En esta clase vamos a estudiar la barra de herramientas y la lnea de tiempo delprograma, conjuntamente con la barra de propiedades.
Barra de propiedades
Figura 8
Esta barra posee todas las herramientas necesarias para disear los objetos queestamos interesados en implementar en FlashEmpezaremos de izquierda a derecha y de arriba hacia abajo
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 especificasde 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 libreHerramienta Zoom: Acta como una lupaEn este apartado ejemplificamos el concepto bsico y esencial de cada herramienta denuestra barraCon el tiempo, nos daremos cuenta con exactitud cual utilizar y en que caso particular
Lnea de Tiempo
Design Animation - Cursos de informtica - TEL. (54.11) (4777.7973) Bs. As. Argentina 10
10
-
8/3/2019 Curso de diseo de Web Sites Clase 3 Design Animation
11/17
Curso de Diseo Web Design Animation
En nuestra segunda clase aprendimos muchas cosas acerca de los Frames ofotogramas (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 nuestroescenario, 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 depropiedades del crculo
Figura 9
Y ahora la barra de propiedades:
Design Animation - Cursos de informtica - TEL. (54.11) (4777.7973) Bs. As. Argentina 11
11
-
8/3/2019 Curso de diseo de Web Sites Clase 3 Design Animation
12/17
Curso de Diseo Web Design Animation
Figura 10
Bien. Tenemos un circulo, que segn nuestra barra de propiedades tiene un dimetrode 81 pxeles, y que esta en cierta posicin del eje x y eje yCuando creamos objetos en Flash, poseen propiedades de color en su CONTORNO y ensu 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 seencuentra a su derecha
Flash es un programa, en el que los objetos que creamos en el ,tienen la propiedad demodificarse 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 debemosseleccionar la mitad del mismo, y luego teclear DELETE
En caso que solo queramos que nuestro diseo solo posea bordes , tan soloseleccionado la superficie (Un solo clic en la superficie del mismo bastara conseleccionarla) 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 acualquier 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 desu superficie. Divirtase en Flash!
Para continuar con el ejercicio, note la lnea de tiempo principal:
Design Animation - Cursos de informtica - TEL. (54.11) (4777.7973) Bs. As. Argentina 12
12
-
8/3/2019 Curso de diseo de Web Sites Clase 3 Design Animation
13/17
Curso de Diseo Web Design Animation
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 consolo 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 cadauna 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 lacapa) indica si el objeto que se encuentra en el fotograma (en este caso circulo) esvisible o no
Haga un clic el punto que estaba debajo de este ojo, en esta misma capa y el objetocrculo desaparecer. Vuelva a clickearlo y volver a aparecer.
Esta herramienta sirve para no confundirnos cuando tengamos muchos objetos ennuestro escenario
De la misma manera, el candado que se encuentra al lado, nos permite bloquear odesbloquear los objetos
Design Animation - Cursos de informtica - TEL. (54.11) (4777.7973) Bs. As. Argentina 13
13
-
8/3/2019 Curso de diseo de Web Sites Clase 3 Design Animation
14/17
Curso de Diseo Web Design Animation
Si le da un clic al punto que se encuentra debajo del candado no podr mover elobjeto crculo (Prubelo)
Los objetos en flash (sean imgenes u otros dibujos vectoriales) deben estarcontenidos en una biblioteca
Esta es casi la parte ms importante del diseo en Flash Mx
La biblioteca nos permite declarar todos los objetos en el programaPor eso que cada vez que creemos objetos o importemos, es necesario agregarlo en labibliotecaNO LO OLVIDE
Seleccione el circulo (doble clic en la superficie) con la herramienta de seleccin osimplemente arrastre el Mouse con esta misma herramienta hasta seleccionarlo
Nota
Cada vez que un objeto vectorial o imagen esta seleccionado, podr identificar unospequeos 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 nuestrabiblioteca personal (De hecho active la biblioteca desde VENTANA del menemergente y luego BIBLIOTECA)
En primera medida nosotros vamos a crear un GRAFICO y le vamos a poner el nombre
de CRCULO
Design Animation - Cursos de informtica - TEL. (54.11) (4777.7973) Bs. As. Argentina 14
14
-
8/3/2019 Curso de diseo de Web Sites Clase 3 Design Animation
15/17
Curso de Diseo Web Design Animation
Figura 14
Finalmente ponemos Aceptar
Si abrimos nuestra biblioteca (lo cual ustedes debieron hacerlo) podemos visualizarnuestro objeto circulo, que de ahora en adelante se llamara SIMBOLO GRAFICOCIRCULO
Figura 15
Los elementos en nuestra biblioteca van a serdeclarados 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 nuestroescenario por siempre
El objetivo de agregar o declarar nuestrosobjetos en la biblioteca de flash es para que elprograma lo identifique como una instancia.
Una instancia, por ahora para nosotros, es unsmbolo (grafico/botn o Movie clip) creado en labiblioteca, con el objeto de minimizar espacio ennuestra pelculaAl tener nuestro circulo como instancia,notaremos que al seleccionarlo en el escenario,
sus parmetros cambiaron y dejo de ser unaforma para convertirse en un smbolo debiblioteca
Ahora bien:
Deseo que esa instancia se desplace deizquierda a derecha (animndose) como deboproseguir?
Design Animation - Cursos de informtica - TEL. (54.11) (4777.7973) Bs. As. Argentina 15
15
-
8/3/2019 Curso de diseo de Web Sites Clase 3 Design Animation
16/17
Curso de Diseo Web Design Animation
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 unobjeto
En el Frame o fotograma numero 1 existe un fotograma clave ya que esta seleccionadocon un punto
Figura 16
Para que exista un cambio en ese objeto simplemente debemos posicionarnos en elfotograma numero 5 y luego apretemos F6 de nuestro teclado
Figura 17
Les quedo algo as?
Ya estamos a un paso de animarloAhora noten que el cabezal (Lnea de color rojo) se posiciono en el fotograma numero5. Solo basta mover nuestro objeto a la posicin que deseemos dentro del escenario
Podemos utilizar la herramienta de seleccin para trasladarlo, o tambinseleccionamos nuestro objeto o smbolo y mediante en inspector de propiedades lostrasladamos 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 denuestro tecladoNotaron 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 ledamos un clic derecho vamos a encontrar varias opciones.
Design Animation - Cursos de informtica - TEL. (54.11) (4777.7973) Bs. As. Argentina 16
16
-
8/3/2019 Curso de diseo de Web Sites Clase 3 Design Animation
17/17
Curso de Diseo Web Design Animation
Elijamos la primera de ellasCrear interpolacin de movimiento y les quedara algo as:
Figura 18
Los fotogramas cambiaron de color, y ahora son violetas. Tambin se creo una flechaque va desde el fotograma clave nmero 1 al fotograma clave numero 5 oexpresado 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 maneraSi desean que el tiempo de animacin sea ms lento, en vez de situar el segundofotograma 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 yconsltennos!
Design Animation - Cursos de informtica - TEL. (54.11) (4777.7973) Bs. As. Argentina 17
17