manual DREAMWEAVER

Adobe Dreamweaver

[email protected] Página N° 1

Adobe Dreamweaver


INTRODUCCIÓN AL DISEÑO

WEB.

CAPACIDADES A LOGRAR

Conoce el Entorno de trabajo y los

Elementos de Dreamweaver.

Identifica los Conceptos básico, como

barra de Insertar, vistas, ventana de

documento, barra de estado e

Inspector de propiedades.

Crea página web html

Personaliza el entorno de trabajo

Trabaja con diferentes páginas, Abrir

y Guardar.

Adobe Dreamweaver


Entorno de Trabajo

Vamos a ver cuáles son los elementos básicos de Dreamweaver CS3 , la pantalla, las

barras, los paneles, etc, para saber diferenciar entre cada uno de ellos. Aprenderemos

cómo se llaman, dónde están y para qué sirven. También veremos cómo obtener ayuda,

por si en algún momento no sabemos cómo seguir trabajando. Cuando conozcamos todo

esto estaremos en disposición de empezar a crear páginas web.

a. Barra de insertar :

La barra de insertar contiene botones para la creación e inserción de diversos

tipos de objetos, como tabla, capas e imágenes. Al pasar el puntero sobre un

botón, aparece una descripción de la herramienta con el nombre de botón.

Los botones están organizados en fichas, a las que se pueden cambiar dando clic

sobre las fichas.

a

c

b

d

e

f

Adobe Dreamweaver


b. Vistas en dreamweaver Dreamweaver le permite trabajar en su documento de 3 diferentes maneras:

vista código, vista diseño y vista dividir la cual muestra el diseño y el código

del documento

c. Ventana del documento

En la vista de diseño, la ventana de documentos muestra el documento

aproximadamente igual a como aparecerá en un navegador web.

d. Inspector de Propiedades El inspector de propiedades permite examinar y editar las propiedades más

comunes del elemento de página seleccionado actualmente, como texto o un

objeto insertado .El contenido del inspector de propiedades es distinto en

función del elemento seleccionado.

e. Paneles Flotantes acoplables

La mayoría de los paneles de Dreamweaver pueden acoplarse (es decir,

combinarse en un único panel flotante con múltiples

fichas).Esto facilita al acceso a la información sin saturar el

espacio del trabajo.

f. Barra de estado

La barra de estado, situada en la parte inferior de la

b

Adobe Dreamweaver


ventana de documento, proporciona información adicional sobre el

documento que está creando.

a. Selector de etiqueta

Muestra la jerarquía de etiquetas que rodea a la selección actual.

b. Tamaño de ventana y zona de visualización

Permite cambiar el tamaño de la ventana de documento para que adopte

dimensiones predeterminadas y contiene botones de visualización, como mano,

zoom y herramienta de selección.

1. Aceptar

2. Guarde los cambios

3. Cierre la página index ,menú archivo cerrar o CTRL + W

Abrir Documentos

Esta opción permite abrir diversos tipos de documentos web tales como

archivos: *.html,*.css,*.js,*.asp.net vb.*.php,*.jsp,*.xml,etc

Pasos:

1. Dar clic en el menú archivo / abrir

2. Seleccione la página index.html

3. Dar clic en el botón abrir

a

Adobe Dreamweaver


Creación de sitios web locales


Identifica el concepto de sitio web

Crea sitio web local

Configura la propiedades de la página

Añade etiquetas html

Adobe Dreamweaver


Sitio Web

Un sitio web es un conjunto de documentos vinculados con atributos compartidos,

tales como temas relacionados ,un diseño similar o un objetivo común.

Creación de un sitio local

La carpeta local , es el directorio de trabajo.Esta carpeta es llamada tambien “sitio

local”.Esta capeta puede colocarse en el equipo local o en un servidor de red. En ella

se almacenaran los archivos con los que están trabajando en un sitio de

dreamwevaer.Para definir un sitio de Dreamweaver , tan sólo debe configurar una

carpeta local.Para transferir archivos a un servidor web o desarrollar aplicaciones

web , también necesita añadir datos para un sitio remoto y un servidor de prueba

1. Menú sitio /Administrar sitio , se mostrar el siguiente cuadro

2. Haga clic en el botón nuevo , elegir la opcion sitio.

3. Seleccionar la ficha avanzadas en el cuadro de diálogo definición de sitio que

aparece,estará seleccionada la categoría Datos Locales.introduzca las

opciones siguientes :

Adobe Dreamweaver


4. Dar clic en el botón listo

5. Dar clic en el botón aceptar

6. Se mostrar en el panel de archivos ,como la imagenen siguiente

7. Crear una página html nueva , menú archivo / nuevo y guarde la página con

el nombre index

Digite el nombre

del sitio web

Carpeta donde se

almacenaran los

archivos del sitio

web

Introduzca el URL que utilizará el

sitio web finalizando, de modo que

dreamweaver pueda verificar los

vínculos del sitio que utilicen URL

absolutos.

Carpeta donde se

almacenaran las

imágenes del sitio

web

Adobe Dreamweaver


Configurar las Propiedades del Documento

1. Dar clic en el botón propiedades de la página

2. Seleccione la categoría aspecto

3. Aplique siguientes propiedades ,como la imagen siguiente

4. Dar clic en la categoria titulo/codificación ,digite el

titulo aroni_sa

5. Cambie a la vista de codigo , se mostrara como la imagen siguiente

Etiquetas Html

1. Etiquetas principales de una página web

Adobe Dreamweaver


2. Ahora en la vista de código ,en el cuerpo de la página digite ARONI S.A.

3. Ahora en la vista de código ,en el cuerpo de la página digite ARONI S.A.

4. Cambie a la vista de diseño

5. Cambie a la vista de codigo y agregue a la etiqueta de texto la siguiente

propiedad.

6. Añadir línea horizontal , agregue a la etiqueta <hr color="#CC3300">

Adobe Dreamweaver


7. Cambie a la vista de diseño y presione la tecla F12 , para tener una vista previa

de la página web

8. Digite el siguiente texto , como la imagen siguiente

Dreamweaver CS3 es un software fácil de usar que permite crear

páginas web profesionales.

Las funciones de edición visual de Dreamweaver permiten agregar rápidamente

diseño y funcionalidad a las páginas, sin la necesidad de programar manualmente

el código HTML.

9. Cambie a la vista de diseño , sevisualizara como la imagen siguiente

10. Cambie a la vista de código

11. Añada la siguiente etiqueta , permite aplicar salto de linea

Adobe Dreamweaver


12. Etiqueta y sus propiedades

face : Tipo de fuente

size: Tamaño de fuente

color : color de fuente

13. Añadir la siguiente etiqueta .





14. Cambie a la vista de diseño se mostrara como la imagen siguiente

15. Cambie a la vista de código

16. Digite el siguiente texto

Se puede crear tablas, editar marcos, trabajar con capas,

insertar comportamientos JavaScript, etc., de una forma muy sencilla y visual

17. Añadir la siguiente etiqueta ,<marquee> sus propiedades


19. Cambie a la vista diseño y presione la tecla F12 , para tener una vista previa de la

página web , se visualizara el desplazamineto del texto

20. Cierre la ventana del navegador

Adobe Dreamweaver


PRIMERA PRÁCTICA

CALIFICADA

Adobe Dreamweaver


1. ¿Qué es Adobe Dreamwevaer ?

________________________________________________________________

________________________________________________________________

________________________________________________________________

________________________________________________________________

2. Mencione los tipos de páginas web:

_______________________________________________________________________

_______________________________________________________________________

_______________________________________________________________________

_______________________________________________________________________

_______________________________________________________________________

3. Describa el entorno de Trabajo

a

b

c

d e f

Adobe Dreamweaver


a. _____________________________

b. _____________________________

c. _____________________________

d. _____________________________

e. _____________________________

f. _____________________________

4. ¿Qué es un sitio web?

________________________________________________________________

________________________________________________________________

________________________________________________________________

________________________________________________________________

5. Cree el sitio web SIGNO, dentro de su memoria UBS o el disco C:\

6. Inserte una nueva página y guarde con el nombre index

7. Cambie el color de fondo por ,F3F3F3

8. En la vista de diseño, digite el texto signo, aplique alineación en el centro y

color de fuente rojo.

9. Digite Publicidad & Marketing y aplique tamaño de fuente +3 , color de fuente

azul y desplazamiento alternado

Digite SIGNO , aplique

alineación en el centro

y color rojo

Adobe Dreamweaver


10. Aplique la etiqueta <hr>

11. Digite los siguientes textos , aplique la etiqueta y aplique un color

diferente a cada fila del texto digitado

Adobe Dreamweaver


MANIPULACION DE TEXTO


Inserta texto

Selecciona texto

Aplica características del texto

Crea estilo css, para texto

Importa documentos de Microsoft

Word

Crea listas Ordenadas y sin ordenar

Adobe Dreamweaver


INSERTAR TEXTOS

El texto que se inserte en una página de dreamweaver puede ser:

- Digitando : Digitar en la página html

- Copia / pegar : Copiar de internet o de culaquier documento y

luego pegar en pagina html , menú edición / pegar.

- Pegado Especial: Aplique pegado especial cuando esta copiando

texto con vínculos , formatos y tablas de una página web.

FORMAS DE SELECCIÓN DE TEXTO

- Para seleccionar una palabra dar doble clic sobre el

- Para seleccionar una fila de texto dar clic al lado izquierdo de la fila

- Para seleccionar un párrafo dar tres clic consecutivos sobre el .

CARACTERÍSTICAS DEL TEXTO

Las características del texto seleccionado pueden ser definidas a través del menú

Texto, y a través del inspector de propiedades. Vamos a ver las posibilidades

que se nos ofrecen a través del inspector de propiedades, aunque sean menos que

las que se nos ofrecen a través del menú Texto.

Formato:

Permite seleccionar un formato de párrafo ya definido para HTML, que puede ser

encabezado, párrafo o preformateado. Los encabezados se utilizan para establecer

Adobe Dreamweaver


títulos dentro de un documento. El formato preformateado sirve para que el texto

aparezca tal cual ha sido escrito, por ejemplo, si entre dos palabras se introducen varios

espacios solo se considera uno, pero al establecer el formato preformateado se respetará

que hayan varios espacios en lugar de solo uno.

Seleccione el texto y aplique encabezado 1, en los encabezados se emplean para los

títulos o subtítulos

Fuente: Permite seleccionar un conjunto de fuentes. Aparecen

conjuntos de fuentes en lugar de una sola, ya que es posible

que al establecer una única fuente el usuario no la tenga en su

ordenador. El seleccionar un conjunto de fuentes posibilita que

en el caso de que el usuario no tenga una fuente se aplique otra del conjunto. Por

ejemplo, si seleccionamos Arial, Helvetica, Sans-serif, el texto se verá con la fuente

Arial, pero si esta no existe se verá en Helvetica.

Tamaño:

Permite cambiar el tamaño del texto. El tamaño lo podemos indicar en diversas

unidades, en píxeles, centímetros, etc...

Color:

Permite seleccionar el color de la fuente, ignorando el color que se haya definido en

las propiedades de la página. Si no se ha establecido ningún color en las

propiedades de la página ni aquí, el color del texto por defecto será el negro.

Estilo:

Estos botones permiten establecer si el texto aparecerá en negrita o en cursiva. A

través del menú Texto también se puede, entre otras cosas, subrayar el texto. Esta

opción no aparece en el panel de Propiedades ya que de normal no suele utilizarse,

debido a que los vínculos aparecen subrayados y el subrayar texto normal podría

hacer que el usuario pensara que se trata de un vínculo.

Alinear:

A través de estos botones es posible establecer la alineación del texto de una de estas

cuatro formas distintas: izquierda, centrada, derecha y justificada.

CREAR LISTA ORDENADA Y SIN ORDENAR

Lista:

Adobe Dreamweaver


Estos botones permiten crear listas con viñetas o listas numeradas.

Es posible insertar texto a modo de lista. A su vez, la lista puede ser numerada o

con viñetas.

Ejemplo de lista ordenada (numeración):

Mascotas

1. Perro

2. Gato

3. Aves

4. Canario

5. Loro

6. Hámster

A través del menú Texto, opción Lista, es posible acceder a las propiedades de la

lista Se debe de tener el cursor en algún lugar de la lista para que se active.

En la ventana Propiedades de lista se puede

especificar el tipo de lista (con números o con

viñetas), el tipo de números o viñetas que se

utilizarán (en la propiedad Estilo:), y en el caso

de las listas ordenadas, el número por el que

comenzará el recuento.

Sangría:

Estos dos botones permiten sangrar el texto y anular la sangría. La sangría es una

especie de margen que se establece a ambos lados del texto. En este caso los botones

se refieren a sangría a la izquierda del texto.

Ejemplo de lista sin ordenar (viñetas):

Preparar la mochila

Sacar los libros de ese día

Introducir los libros del día siguiente

Ponerme el pijama

Lavarme los dientes

Poner el despertador

Adobe Dreamweaver


IMPORTAR UN DOCUMENTO

En dreamweaver puede importar en formatos xml ,datos tabla, documentos de

Word y documentos de Excel.

1. Cree un documento nuevo

2. Menú archivo / importar

3. Seleccione el documento

4. Guarde con el nombre importar

CREACIÓN DE ESTILO CSS PARA TEXTO En el menú Texto / Estilo css / nuevo

Los estilos CSS están en hojas de estilo de actualización automática (también denominadas Hojas de Estilo en Cascada) se utilizan para combinar una serie de atributos del texto, como pueden ser el color o el tamaño, de modo que no sea necesario asignar estos atributos uno a uno cada vez que se desee repetir la asignación de esos mismos valores a otras partes del texto. También algunas de sus opciones pueden utilizarse para definir atributos de imágenes y otras características que no permitían definir los estilos HTML en versiones anteriores, como el color de fondo para el texto, etc.

Crear un Estilo Personalizado

1. Menú ventana / estilos css , en esta cuadro dar clic en el botón todo

2. Para crear un estilos dar clic en el botón nueva regla css

Nueva regla css Adjuntar hoja de estilo

Adobe Dreamweaver


3. En este cuadro ,seleccione el tipo de selector clase ,nombre párrafo , seleccione

nuevo archivo de hoja de estilo y aceptar

Tipo de selector:

Clase: (Puede ser aplicable a cualquier elemento html)

Se puede utilizar todas las veces que se requiera en un mismo documento

Puede tener cualquier nombre

Se reconoce porque lleva un punto delante del nombre

Ejemplo (.galería)

Etiquetas: (Redefine un elemento html)

Se utiliza para modificar una etiqueta ya existente del html

Los nombres ya están definidos

Se reconoce por qué no lleva ningún símbolo delante del nombre.

Ejemplo: (body, h1, p, ul, li, img)

Avanzadas (ID selector contextual,etc)

- Solo se puede aplicar a un elemento html una sola

vez. Generalmente se usa en capas, div y texto.

- Puede aplicarse la regla css y etiqueta HTML, como la

imagen siguiente.

- Puede tener cualquier nombre.

- Se reconoce porque lleva un . delante del nombre

4. Guarde con el nombre estilos

5. Seleccione fuente “arial,hevetica,sans-serif” ,tamaño “12” y color “#0066CC”

6. Aceptar

7. Seleccione un párrafo y aplique el estilo “párrafo”

Adobe Dreamweaver


.

VINCULACIÓN DE

DOCUMENTOS


Crea vínculos

Inserta Menú de salto

Insertar Elementos Spry

Añade comportamiento abrir

ventana del navegador

Establece la página principal

Inserta botones flash

Inserta texto Flash

Insertar video flash

Adobe Dreamweaver


VÍNCULO

Un vínculo o hipervínculo,no es más que un enlace, que al ser pulsado lleva de una

página o archivo a otra página o archivo.

Es posible asignar un vínculo a un texto, a una imagen, o a parte de una imagen.

Existen diferentes clases de rutas de acceso a la hora de definir los vínculos.

Vínculos con otros documentos

La forma más sencilla de crear vínculos es a través del inspector de

propiedades. Para ello es necesario seleccionar el texto o el objeto que va a

servir de vínculo , y seguidamente establecer el vínculo en el inspector.

Por ejemplo la siguiente dirección web http://www.dgrafico.com coloque en el

inspector de propiedades.

Ejecute la la página para que realice el vínculo.

Vínculos a un lugar del mismo documento

Conduce a un punto dentro de un documento.

1. En este caso nos ubicamos en el punto de destino del vinculo y luego no

vamos al menú , Insertar / anclaje con nombre .Asigne el nombre del anclaje

are

2. Seleccione el texto de vínculo

3. Realice el vínculo, se antepone le símbolo de numeración y luego el nombre del anclaje, como la imagen siguiente.

Anclaje con

nombre

Adobe Dreamweaver


Vínculos a un punto específico de otro documento

Conduce a un punto dentro de otro documento diferente. Para ello el vínvulo

debe ser nombre_de_documento.extension#nombre_de_punto.

El anclaje se define dentro de un documento por ejemplo gatronomia a través

del menú Insertar /Anclaje con nombre .

Dar el nombre fotos al punto de vínculo

Seleccione el texto fotos de la página index

Aplique el siguinete vinculo gastronomia.html#fotos

Ejemplo :

Por ello, es muy recomendable que utilices siempre minúsculas para evitar fallos

en los enlaces.

También deberás evitar utilizar caracteres especiales como acentos o espacios,

así no tendrás problemas a la hora de referenciar tus objetos.

Anclaje fotos

Adobe Dreamweaver


a) Crear También Vínculos Vacíos

que pueden ser útiles cuando se utilizan comportamientos, etc. Para ello es

necesario escribir en Vínculo únicamente una almohadilla #.

Ejemplo:

Vinculo de correo electrónico

Es posible especificar vínculos a direcciones de correo electrónico. Esto resulta útil

cuando se desea que los visitantes de la web puedan contactar con nosotros.

También es posible a través del menú Insertar / Vínculo de correo electrónico.

Se mostara como la imagen siguiente, al dar clic en este vínculo se abrir la ventana de outlook ,para que puedas enviar un mensaje al correo de itae.

Para asignar el vínculo de correo electrónico a una imagen realice los siguientes

pasos:

1. seleccione la imagen

2. Asigne el siguiente dato en el vínculo, mailto:[email protected]

Adobe Dreamweaver


Crear Salto de Menú

Es un menú dentro de un formulario que sus opciones son enlaces a otros documentos.

1. Inserte un formulario , menú insertar / formulario /formulario

2. Ahora , con el cursor dentro del formulario, vamos al menú insertar /

formulario / menú de salto

3. Aparece el siguiente cuadro de dialogo, en el que iremos llenando, el

nombre del menú y URL para el vínculo.

4. Agregue vinculo externo con otra página web

5. Presione la tecla F12 y verifique que funcione los vínculos

Barra de Menú Spry Es un menú desplegable que esta creado por hojas de estilos css.Este menú permite realizar vínculos con documentos web. Insertar barra de menú

1. Hacer clic en el menú insertar / spry / barras de menú spry .Se mostrar como la

imagen siguiente y elija la orientación

2. Ahora vamos a modificar la barra de menú

3. Dar clic en el título de la barra de menú para modificar los textos

Titulo

Adobe Dreamweaver


4. Propiedades de la barra de menú, dar clic en elemento 1 para modificar el

texto, vinculo, título y destino.

5. Al llenar los datos se mostrar como la imagen siguiente

Modificar aspecto del menú

1. Menú ventana / estilos css ,se mostrar la imagen siguiente

2. Dar clic en la regla ul.MenúBarhorizontal ,para modificar el tamaño de

fuente

3. Dar clic en la regla ul.MenuBarHorizontal a ,para cambiar el color del menú

y de fuente

Fichas

Todo y

actual

Regla css

Modifique el

tamaño a 80 %

Adobe Dreamweaver


4. Dar clic en la regla ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal

a:focus , para cambiar el color del menú y de fuente en el estado sobre.

5. Dar clic en la regla ul.MenuBarHorizontal a.MenuBarItemHover,

ul.MenuBarHorizontal a.MenuBarItemSubmenuHover,

ul.MenuBarHorizontal a.MenuBarSubmenuVisible , para cambiar el color

del menú y de fuente en el estado arriba.

6. Dar clic en la regla ul.MenuBarHorizontal li ,permite cambiar el ancho de

cada elemento del menú

Paneles en Fichas de Spry

Las fichas permiten organizar los elementos de una página web y de esta

manera ahorrar más espacio

1. Hacer clic en el menú insertar / spry / Paneles en Fichas de Spry .Se

mostrar como la imagen siguiente

Color del menú Color de

fuente

Adobe Dreamweaver


2. Para cambie el nombre de la ficha dar clic sobre y digite

3. Para agregar contenido en propiedades seleccione la ficha

4. Al agregar contenido en una ficha se mostrar como la imagen siguiente

Acordeón Spry

1. Hacer clic en el menú insertar / spry / Acordeón de Spry .Se mostrar como la imagen siguiente

2. Para cambiar el nombre de la etiqueta dar clic sobre y digite

3. Para añadir contenido seleccione en propiedades el panel

Adobe Dreamweaver


4. Al añadir texto en el panel historia se mostrara como la imagen siguiente

Comportamiento Los comportamientos son acciones que suceden cuando los usuarios realizan algún evento sobre un objeto, como pueden ser mover el ratón sobre una imagen, pulsar sobre un texto, hacer clic sobre un mapa de imagen, etc. Los comportamientos no existen como código html, se programan como JavaScript. Abrir el panel de comportamientos

1. Menú ventana / comportamientos

Abrir Ventana del Navegador

1. Dar clic en el signo (+) y seleccione abrir ventana del navegador

2. Seleccione la página mediante el botón examinar y dar el

ancho y alto con el que se va a mostrar la página al cargar

Seleccione

la etiqueta

El símbolo +

para añadir

paneles y –

para quietar

Adobe Dreamweaver


3. Al ejecutar la página va a cargar una página nueva, en el

que se va a mostrar la página seleccionada en el caso

anterior.

4 .Para modificar cualquier comportamiento, dar doble clic

sobre

Establecer la página Principal

Con esta opción se indica cual será la primera página que inicie en el sitio web.

1. Ingrese al panel de archivo ,menú ventana / archivos 2. Dar clic derecho sobre la página principal y seleccione la opción “establecer

como página principal”

Botones Flash

1. Menú / insertar / media / botones flash

2. En este cuadro seleccione un estilo de botón,

digite nombre del botón, vinculé con una página

web y seleccione el destino.

A través de Estilo: puede seleccionarse uno de los

distintos formatos de botón que se ofrecen.

En esta misma ventana hay que especificar también el Texto que mostrará el

botón (Texto del botón:), así como el nombre con el que será guardado

(Guardar como:) y el vínculo asociado (Vinculo: y Destino:).

Adobe Dreamweaver


Es preferible guardar los botones Flash en el mismo directorio que los

documentos HTML, en lugar de la carpeta destinada a almacenar imágenes, ya

que de no ser así es posible que al intentar asignar un vínculo dentro del propio

sitio, Dreamweaver no permita guardar el botón con ese vínculo en una

ubicación diferente del documento.

Recuerda que los botones deben

guardarse con la extensión SWF.

A través del inspector de propiedades del botón Flash es posible editar de nuevo

sus atributos:

Texto Flash

1. Menú / insertar / media / texto flash

2. En este cuadro seleccione el tipo de fuente , color , color

de sustitución y vincule con una página web

Ejecute la página y pase sobre el texto ,observe como cambia de color

El texto Flash es similar a un rollover, pero en lugar de intercambiar imágenes

intercambia el color del texto

Insertar Video Flash

1. Menú / insertar / media / flash video

2. En este cuadro seleccione el video en formato flv , seleccione la apariencia del

video y dar clic en el botón detectar tamaño .

3. Dar clic en el botón Aceptar

4. Ejecute la página y observe el video

Adobe Dreamweaver


SEGUNDA PRÁCTICA

CALIFICADA

Adobe Dreamweaver


PRACTICA CALIFICADA (DEPARTAMENTOS DEL PERÚ)

1. Cree el sitio web departamentos-perú , se mostrar como la

imágenes siguiente

2. Cree una página con el nombre index y guarde dentro del

sitio web, se tiene que mostrar como la imagen siguiente

3. La página index establecer como página

principal

4. Inserte un texto flash con el nombre

5. Digite el siguiente texto y aplique viñetas

6. Cree una regla css con el nombre lista , con la siguientes

características

7. Luego Seleccione el texto que digito y aplique la regla css

lista

8. Ubique el cursor al final del texto

9. Menú archivo / importar /documento de Word, se mostrara como la imagen

siguiente

Adobe Dreamweaver


10. Para los subtítulos cree un nueva regla css

11. Cree un nueva regla css ,para que los párrafos estén justificados

12. Añadir imágenes para cada departamento

13. Alinear las imágenes en el centro de la página

Adobe Dreamweaver


14. Ubique el cursor al costado del subtítulo Arequipa

15. Inserte el anclaje con nombre ,dar el nombre are

16. Seleccione el texto y realice el vinculo

17. Realice el vínculo como la imagen siguiente

18. Aplique una imagen de fondo ,la imagen está en la carpeta dreamweaver-sesion

06

19. Cambie el color de los subtítulos a rojo

20. Guarde los cambios y presione la tecla F12, para tener una vista previa de la

página.

21. A terminado la practica

Adobe Dreamweaver


APLICACIONES CON IMÁGENES


Inserta imágenes

Maneja panel propiedades de imagen

Realiza vínculos con imágenes

Inserta marcador de posición de

imágenes

Inserta mapa de imágenes

Añade comportamiento de sustitución

de imagen

Alinea texto con imágenes

Añade comportamiento de barra de

navegación con imágenes

Inserta álbum de fotos

Adobe Dreamweaver


INSERTA IMÁGENES

Las imágenes que van a ser parte de nuestro sitio web tienen que estar dentro de

una carpeta determinada

1. Menú insertar imagen

2. Otra forma de insertar es mediante la barra de insertar

PANEL DE PROPIEDADES DE IMAGEN

Nombre de imagen y tamaño

Origen y vínculo

La casilla origen hace referencia a la ruta donde se encuentra la imagen.

En la casilla vinculo, podemos introducir el nombre de la página web enlazada a

la imagen .Al dar clic sobre la imagen nos mostrar otra página web.

Texto alternativo de imágenes

La casilla “ALT” significa “Texto alternativo “: Muchas personas no le dan

importancia a esta casilla pero en determinadas circunstancias su contenido es vital.

Edición de Imágenes

Dreamweaver nos permite editar imágenes.

Ancho

Alto

b

c

d

e a

Adobe Dreamweaver


a. Recortar; esta herramienta recorta el tamaño de una imagen, nos permite

entonces eliminar las áreas no deseadas de la imagen.

b. Volver a muestrear; permite muestrear una imagen cuyo tamaño se ha

cambiado, lo que mejora su calidad en su nuevo tamaño y forma.

c. Brillo y contraste; permite ajustar los valores de brillo y de contraste de una

imagen.

d. Optimizar; abre el cuadro de dialogo optimizar, para cambiar el formato y la

calidad.

e. Perfilar; permite ajustar la nitidez de una imagen.

MARCADOR DE POSICIÓN DE IMÁGENES

Un marcador de posición de imagen es un gráfico que se utiliza hasta que el gráfico

definitivo está listo para su incorporación a la página web.

Insertar un marcador de posición de imagen

1. Menú insertar / objetos de imagen / marcador de posición de imagen

2. Ingrese un nombre para el marcador .ancho y alto, el

color del marcador de posición y asignarles una

etiqueta de texto.

3. Se mostrar como la imagen siguiente

MAPA DE IMÁGENES

Un mapa de imagen es una imagen que ha sido dividida en regiones o

“zonas interactivas”; cuando se hace clic en la “zona interactiva” se realiza

el vínculo.

Adobe Dreamweaver


Por ejemplo puedes hacer que dentro de una misma imagen existan

distintos vínculos .Es decir, que cada zona de la imagen que determines

lleve a un documento o a un destino específico del documento.

a. Herramienta puntero de zona interactiva

b. Herramienta de zona interactiva rectangular

c. Herramienta de zona interactiva oval

d. Herramienta de zona interactiva poligonal

Para crear un mapa de imagen

1. Seleccione la imagen

2. Ir al inspector de propiedades, para seleccionar la herramienta

3. Active la herramienta de zona interactiva poligonal y situar sobre la imagen,

comience a dibujar por todo el espacio que desee que tenga vínculo.

Por ejemplo sobre el departamento de Loreto

4. Puede configurar un vínculo en el mismo documento para la zona interactiva,

como la imagen siguiente.

a

b c

d

Nombre del mapa

Adobe Dreamweaver


5. Ahora puede ejecutar la página y comprobar el vinculo

IMÁGENES DE SUSTITUCIÓN Una imagen de sustitución es una imagen que cambia cuando el puntero pasa sobre

ella.

Una imagen de sustitución consta de dos imágenes .La principal (la que carga

inicio) y la imagen de sustitución (la que aparece al pasar el puntero sobre la

imagen principal).

Crear imagen de sustitución

1. Menú insertar / objetos de imagen /imagen de sustitución

2. Aparece el cuadro de dialogo insertar imagen de sustitución, seleccione la

imagen de origen y de sustitución.

3. Ahora presione la tecla F12, para ver el efecto.

BARRA DE NAVEGACIÓN CON IMÁGENES Una barra de navegación se compone de una imagen o conjunto de imágenes cuya visualización cambia según las acciones que realice el usuario (pasar el puntero sobre las imágenes). Pasos para insertar:

1. Menú insertar / objeto de imagen / barra de navegación

Adobe Dreamweaver


2. En este cuadro seleccione las imágenes para la barra de navegación

3. Los botones [ + ] y [ - ]para adicionar y eliminar elementos para la barra de

navegación. 4. Configure las opciones para cada elemento de barra de navegación

seleccionado, a través de las siguientes opciones :

a. Nombre de elemento: permite asignar el nombre de cada elemento de la

barra de menú

b. Imagen arriba: Muestra la imagen inicial en el elemento del menú

c. Sobre la imagen: Determina la imagen que se muestra cuando el puntero

este sobre el elemento de la barra de navegación.

d. Imagen abajo: Permite definir la imagen que se muestre al hacer clic sobre

un elemento.

e. Sobre mientras la imagen abajo: permite determinar la imagen que se va

a mostrar cuando ubicamos el puntero sobre una imagen que ha sido

presionada.

f. Texto alternativo: Muestra un mensaje emergente al ubicar el puntero del

mouse sobre la imagen.

g. Carga previa de imagen: permite cargar las imágenes en la cache del

navegador, para que la carga sea más rápida.

h. Mostrar imagen abajo inicialmente: permite configurar un elemento de

barra de navegación en el estado presionado que mostrara la imagen de

dicho estado.

i. Opciones de Insertar: permite establecer la orientación en la que se va a

insertar.

j. Usar tablas: insertar la barra de navegación en una tabla sin bordes.

k. Dar clic en el botón aceptar.

Adobe Dreamweaver


ÁLBUM DE FOTOS WEB

Este comando permite crear un álbum de fotos interactivo.

Para crear el álbum de fotos es necesario tener instalado adobe fireworks cs3 o

superior.

Para este proceso necesitamos una carpeta donde va a estar la página web y dentro

de ella una carpeta con imágenes

1. Ingrese a dreamweaver

2. Menú comandos / Crear álbum de fotos web

3. En este cuadro digite el titulo, informacion de subencabezado , seleccione la carpeta de origen (donde se encuentran las imágenes) y la carpeta de destino para este caso es la carpta web

4. Al finalizar se mostrar como la imagen siguiente

5. Presione la tecla F12 para ejecute la página web

Adobe Dreamweaver


DISEÑO DE PÁGINAS


Inserta tablas en la vista estándar

Inserta filas y columnas

Utiliza propiedades de tabla

Inserta tablas en la vista de diseño

Configura propiedades de página con

regla css

Crea plantilla web

Inserta regiones editables

Adobe Dreamweaver


TABLAS

Todos los objetos se alinean por defecto a la izquierda de

las páginas web, pero gracias a las tablas es posible

distribuir el texto en columnas, colocar imágenes al lado de

un bloque de texto, y otra serie de cosas que sin las tablas

serían imposibles de realizar.

Hoy en día, la mayoría de las páginas web se basan en

tablas, ya que resultan de gran utilidad al mejorar notablemente las opciones de

diseño.

1. Rellenar las celdas

Las celdas son cada uno de los recuadros que forman una tabla, resultan de la

intersección entre una fila y una columna.

imagen y texto

COLUM

NA

Texto dentro de una

celda

CELDA

FILA

Para poder insertar algún elemento en una celda, ya sea texto o imágenes,

simplemente hay que situar el cursor previamente dentro de la celda deseada.

2. Seleccionar elementos de una tabla

Para seleccionar tabla, menú Modificar / tabla/Seleccionar tabla.

Adobe Dreamweaver


Formato de tabla

Las propiedades de la tabla se especifican

a través de su inspector de propiedades.

A través del inspector de propiedades se pueden modificar los valores que se

especificaron al insertar la tabla. Al mismo tiempo, pueden indicarse otros como

pueden ser el valor Alinear (que permite alinear la tabla a la izquierda, al centro

o a la derecha), el color de fondo (en Col. Fondo) o de borde de la tabla (en Col.

borde), o la imagen de fondo

Borrar anchos de columna

Seleccione la tabla, en inspector de propiedades

dar clic en la opción borrar ancho de columnas

INSERTA FILAS Y COLUMNAS

Lo primero que hay que hacer es, estando el cursor en una celda, dar clic derecho sobre la

tabla

Según las celdas seleccionadas, algunas de las opciones de Tabla se podrán utilizar mientras

que otras no.

Para insertar una fila o una columna, hay que pulsar sobre las opciones Insertar fila o

Insertar columna.

Para eliminar una fila o una columna, hay que posicionar el cursor en la fila o columna a

eliminar y elegir la opción Eliminar fila o Eliminar columna del menú Tabla.

Adobe Dreamweaver


COMBINAR CELDAS

Combinar celdas consiste en convertir 2 o más celdas en una sola por lo que dejará de haber

borde de separación entre una celda y otra ya que serán una sola.

DIVIDIR

Dividir celdas consiste en partir en dos una celda.

Una de las formas de combinar celdas es a través del inspector de propiedades.

INSERTAR TABLA LA VISTA MODO DISEÑO

Esta vista permite dibujar tabla y celdas de una forma más fácil

1. Menú ver / modo de tabla /modo de diseño

2. Para dibujar emplee los siguientes comandos

Combinar celdas

Adobe Dreamweaver


3. Al diseñar se mostrara como la imagen siguiente

4. Ahora cambie al modo estándar para agregar contenido

CONFIGURAR PROPIEDADES DE PÁGINA CON REGLA CSS

Aplicar color fondo y márgenes con regla css

1. Menú ventana / estilos css

2. Dar clic en el botón nueva regla css

3. Seleccione el tipo selector etiqueta y seleccione la etiqueta body

4. Aceptar

5. Digite el nombre del archivo de hoja de estilos

“configuración”

6. Dar clic en el botón Guardar

7. Aplique color de fondo #FFC00

Adobe Dreamweaver


8. Aplicar márgenes de página “0”


10. En el panel de estilos se mostrara como la imagen siguiente

CREACIÓN DE PLANTILLAS WEB

Cada vez que deseamos crear un sitio web, tenemos que tener muy en cuenta que las

páginas deben seguir un formato uniforme.

La mayoría de nosotros solemos hacer copias de los documentos ya creados, y

trabajar sobre estas copias, modificando simplemente su contenido. Esta es la forma

más sencilla de tener páginas con una estructura basada en la estructura de otras ya

creadas previamente.

Antes de comenzar a crear plantillas cree su sitio web.

Crear plantillas

1. Menú archivo / nuevo , seleccione plantilla html

2. Menú archivo /guardar como plantilla, dar el nombre

queirolo y dar clic en el botón guardar.

3. En el panel archivo se mostrara como la imagen

siguiente

Adobe Dreamweaver


4. Realice el diseño de su página web principal

INSERTAR REGIONES EDITABLES

1. Ingrese a plantilla web

2. Menú insertar /objeto de plantilla /región

editable, se mostrar como la imagen siguiente.

3. Se mostrara como la imagen siguiente


Crear página web a partir de plantilla

1. Menú archivo / nuevo , seleccione página de plantilla

2. Elija la plantilla web

3. Al crear la página ,guarde

4. Inserte el contenido en la región editable

5. Para realizar cambios realice en la plantilla web

Adobe Dreamweaver


TERCERA PRÁCTICA

CALIFICADA

Adobe Dreamweaver


PRACTICA: Departamentos del Perú

1. Cree el sitio web departamentos-peru

2. Cree una nueva página con el nombre index y guarde

3. Inserte una tabla de 2 fila , 1 columna y un ancho de 913 pixeles

4. Alinea la tabla en el centro

5. Aplique el color de fondo de la tabla “#990000”

6. Inserte en la primera fila un marcador de posicion de imagen de 776 * 122

pixeles

7. Dar doble clic sobre el mercador de posición y seleccione la imagen banner , de

la carpeta Dreamweaver - Sesion 09

8. Ubique el cursor en la segunda fila

9. Inserte una tabla de 52 fila , 3columna y un ancho de 638 píxeles

10. Coloque la tabla en el centro

11. Aplique a la tabla 2 la imagen de fondo “ fondo-tabla.gif ”

12. Inserte la imagen del mapa del perú en la primera fila de la tabla 2

Adobe Dreamweaver


13. Aplique mapa de imagen para los siguientes departamentos :

arequipa,lima,loreto,ucayali,cajamarca,tacna ,apurimac

ayacucho,ica,huanuco.

Mapa de imagen se activa al seleccionar una imagen

14. En la siguiente fila coloque la lista de los departamentos ,como la imagen siguiente

15. Combine la siguiente fila

16. Abrir de la carpeta Dreamweaver - Sesion 09 , el documento departamentos del

Perú

17. Añadir texto e imagen del departamento de Arequipa , como la imagen

siguiente

18. Añadir texto e imagen para los demás departamentos :

arequipa,lima,loreto,ucayali,cajamarca,tacna ,apurimac,ayacucho,ica,huanuco

19. Realice el vínculo de cada mapa de imagen con un departamento empleando

anclaje con nombre. Por ejemplo Loreto

20. Vincule la lista con cada departamento y guarde los cambio

Adobe Dreamweaver


21. Realice el siguiente vínculo, al dar clic en lima que se muestra la imagen mapa

del Perú para poder seleccionar otro departamento con vínculo.

22. Realice el mismo proceso para los demás departamentos

23. Aplique a las dos tablas borde 0 , relleno de celda 0 y espaciado de celda 0

24. Aplique con regla css margenes de página 0

25. Guarde los cambios y presione la tecla F12.

Adobe Dreamweaver


Diseño de páginas con división CAPACIDADES A LOGRAR

Etiquetas Div. y estilos CSS

Formulario

Elementos de formulario

Adobe Dreamweaver


ETIQUETAS DIV. Y ESTILOS CSS

Una etiqueta es un elemento que te permite diagramar una página web, dividiendo

por sectores los contenidos que se van insertando.

Antes de comenzar a insertar divisiones cree su sitio web y configure las propiedades

(color de fondo y márgenes) de su página web

1. Menú insertar /objeto de diseño /etiqueta div

2. Digite el nombre de la división marco1 y dar clic en el botón Nueva

regla CSS

3. Seleccione el tipo de selector

Avanzadas(ID,…) , dar clic en el

botón aceptar

4. Dar el nombre estilos y guarde

5. En este cuadro aplique el ancho “772” , alto “800” y

márgenes


7. Puede insertar más etiquetas div de diferentes tamaños empleando regla css

En el punto de inserción: Permite insertar la

etiqueta div donde este el cursor

Después de la etiqueta: Permite indicar después de

que etiqueta se va insertar la etiqueta div

Adobe Dreamweaver


FORMULARIO

Los formularios se utilizan para recoger datos de los usuarios, nos pueden servir

para realizar un pedido en una tienda virtual, crear una encuesta, conocer las

opiniones de los usuarios, recibir preguntas, etc.

Una vez el usuario rellena los datos y pulsa el botón para enviar el formulario se

arrancará un programa que recibirá los datos y hará el tratamiento correspondiente.

Campo de texto y Área de texto

Permiten introducir texto. El Campo de texto solo permite

al usuario escribir una línea, mientras que el Área de texto

permite escribir varias.

Se puede pasar de Campo de texto a Área de texto a través del inspector de

propiedades, marcando la opción Una línea o Multi línea respectivamente.

También es posible definirlo como Contraseña es como el campo de texto pero las

letras que va tecleando el usuario se sustituyen por un carácter como podrás ver en

la imagen siguiente.

A continuación tienes un ejemplo de cada uno de estos tres tipos. Puedes escribir en

ellos para ver su funcionamiento.

A través del inspector de propiedades es posible asignar también el Ancho del

cuadro de texto, el número máximo de líneas o caracteres, y el valor inicial del

cuadro.

Botón

Es el botón tradicional de Windows. El botón puede tener asignadas tres opciones:

Enviar formulario, Restablecer formulario (borrar todos los campos del formulario),

o Ninguna (para poder asignarle un comportamiento diferente de los dos

anteriores).

Adobe Dreamweaver


También es posible cambiar el texto del botón, a través de la propiedad Etiqueta del

inspector de propiedades.

Casilla de verificación

Es un cuadrito que se puede activar o desactivar.

Puede asignársele el Estado inicial como Activado o como Desactivado.

Botón de opción

Es un pequeño botón redondo que puede activarse o

desactivarse. Si hay varios del mismo formulario, sólo puede

haber uno activado. Cuando se activa uno, automáticamente

se desactivan los demás.

Lista/Menú

Una lista o menú es un elemento de formulario que lleva asociada una lista de

opciones.

--- Elige opción lista --- Perro Gato Canario Loro --- Elige opción menú--- Perro

Gato Canario Loro

Los elementos se añaden a través del botón Valores de lista... del inspector de

propiedades.

Cuando se trata de un menú, solo es posible elegir uno de los elementos, pero si se

trata de una lista, a través de Selecciones del inspector de propiedades puede

permitirse que se seleccionen varios simultáneamente.

Etiqueta

Se utiliza para ponerle nombres al resto de elementos de formulario, para que el

usuario pueda saber qué datos ha de introducir en cada uno de ellos.

Crear formularios

1. Menú Insertar / Formulario / formulario

Una vez creado un formulario, este aparecerá en la ventana de Dreamweaver

como un recuadro formado por líneas rojas discontinuas de color rojo.

Adobe Dreamweaver


Dentro de dicho formulario se podrán insertar los elementos de formulario.

Es muy recomendable utilizar tablas para organizar los elementos de los formularios.

Utilizando tablas se consigue una mejor distribución de los elementos del formulario,

lo que facilita su comprensión y mejora su apariencia.

Ejemplo:

Validar formularios

La validación de formularios sirve para hacer que Javascript valide el formulario

antes de que se envíe el formulario, para que en el caso de que haya campos del

formulario que sean obligatorios, tengan que rellenarse antes de

poder enviarse.

Para validar un formulario hay que abrir el panel de

Comportamientos. Este panel se

Puede abrir a través del menú Ventana, opción Comportamientos, o

pulsando Mayús+F3.

En este panel hay que desplegar el botón

y pulsar sobre la opción Validar

formulario, deberás haber seleccionado el formulario previamente.

Entonces se mostrará una ventana como la siguiente, donde aparecen todos los

elementos del formulario.

Puede seleccionarse uno por uno cada elemento del formulario, pudiendo

especificar los requisitos que ha de cumplir.

Puede establecerse como campo a rellenar obligatoriamente (Valor Obligatorio), y

si su contenido ha de ser numérico (Número), una Dirección de correo electrónico,

etc.

Adobe Dreamweaver


PÁGINA DE MARCOS CAPACIDADES A LOGRAR

Inserta Marcos

Guarda archivos de marcos y conjunto

de marcos

Modifica propiedades de marcos

Controlar el contenido del marco con

vínculos

Adobe Dreamweaver


MARCOS O FRAMES

Los marcos o frames sirven para distribuir mejor los datos de las páginas, ya que

permiten mantener fijas algunas partes, como pueden ser el logotipo y la barra de

navegación, mientras que otras sí pueden cambiar. Además de mejorar la

funcionalidad, pueden mejorar también la apariencia.

Crear marcos

1. Crear su sitio web , para este caso vamos a crear “Harley”

2. Crear una página en blanco ,menú archivo / nuevo / página html .Todavía no

guarde la página web

3. Menú insertar / html / marcos /superior anidado izquierda

4. Se mostrara como la imagen siguiente

Guardar marcos

Todos los documentos que contienen marcos tienen que tener una página en

cada uno de ellos. Es por esto que al crear algún marco, se cargan páginas

nuevas por defecto en cada uno de ellos, a excepción del marco que contiene la

página original.

Estas páginas nuevas pueden ser posteriormente sustituidas por otras ya

existentes, como ya veremos más adelante.

Es necesario guardar la página que contiene el grupo de marcos, así como cada

una de las páginas que están incluidas en sus marcos.

Adobe Dreamweaver


No es conveniente guardar la primera vez los marcos con la opción Guardar

todo, ya que podemos equivocarnos al dar los nombres a los nuevos

documentos.

Es preferible guardar cada documento uno por uno, a no ser que todos los

marcos contengan alguna página ya existente, ya que en ese caso el único

documento al que habrá que dar nombre será al que contiene el grupo de marcos.

1. Ubique el cursor en el marco superior

2. Menú archivo / guardar marco , guarde con el nombre superior

3. Ubique el cursor en el marco de la derecha

4. Menú archivo / guardar marco , guarde con el nombre derecha

5. Ubique el cursor en el marco de la centro

6. Menú archivo / guardar marco , guarde con el nombre centro

Adobe Dreamweaver


7. Menú archivo / guardar todo, guarde con el nombre index

8. Se mostrara en el panel de archivos como la imagen siguiente

Seleccionar Marcos

1. Menú ventana / marcos , se mostrar el siguiente cuadro

2. Dar clic en el borde del marco para que se seleccione

Cambiar el tamaño del marco superior

1. Al seleccionar el borde podrá modifica el alto de los marcos

Si el marco esta

seleccionado aparecerán

líneas como estas

Borde del marco

Adobe Dreamweaver


2. Se mostrara las propiedades del marco , seleccione el marco superior

3. Para cambiar el alto de la fila a100

4. Para cambiar el ancho dar clic en el borde

5. Modifique el ancho del marco izquierdo, seleccione la columna izquierda.

6. Ahora puede añadir contenido en cada marco, como la imagen siguiente

Adobe Dreamweaver


CONTROLAR EL CONTENIDO DEL MARCO CON VÍNCULOS

Para incluir un vínculo en un marco que abra un documento en otro marco, deberá

establecer el destino del vínculo. El destino es el marco en el que se abrirá el contenido

vínculo.

Para establecer un marco de destino

1. Seleccione texto o un objeto

2. En el campo vínculo del panel propiedades digite el nombre de la página

web ,como la imagen siguiente

3. Seleccione el destino mainFrame

4. Presione la tecla F12 para tener una vista previa de la página

mainframe: Muestra el contenido

de la página en el marco del

centro.

LeftFrame: Muestra el contenido

de la página en el marco de la

izquierda.

TopFrame: Muestra el contenido

de la página en el marco superior.

Adobe Dreamweaver


CUARTA PRÁCTICA

CALIFICADA

Adobe Dreamweaver


PRACTICA: Latín Joyas

1. Cree el sitio web Latin-Joyas

2. Crear una página en blanco .Todavía no guarde la página web

3. Añadir marco superior anidado izquierdo

4. Guardar cada marco con el nombre (superior ,izquierda y centro ) y la

página principal guarde con el nombre (index)

5. Coloque el banner el marco superior, la imagen está en la carpeta

dreamweaver - Sesion 12.

6. En el marco de la izquierda inserte una tabla y dentro una barra de menú

spry, como la imagen siguiente.

En el estado sobre del menú cambie por un color gris y color de texto rojo

oscuro.

7. Aplique como color de fondo el siguiente código #FFCC00

8. Aplique a la página izquierda un color de fondo #FFCC00

9. Guarde los cambios del marco

10. En el marco del centro ,inserte una tabla de 3 fila y 3 columnas

11. Aumente el espacio de celda a 10 , color de borde gris y una imagen de fondo

12. Inserte las imágenes

Adobe Dreamweaver



14. Cree una página nueva con el nombre planta, guarde.

15. En la página plata inserte una tabla y añadir imágenes


17. Cree una página con el nombre oro, guarde.

18. Inserte una tabla y añadir imágenes

19. Cree una página con el nombre bisutería, guarde.

20. Inserte una tabla y añadir imágenes

Adobe Dreamweaver


21. Cree una página con el nombre historia, guarde.

22. De la carpeta Dreamweaver - Sesion 12, abrir el documento de texto historia,

copie el texto y pegar en la página web historia.

23. Cree una página con el nombre contacto, guarde.

24. Inserte un formulario

25. Inserte una tabla con 6 filas y 2 columnas dentro del formulario

26. Añadir en la tabla datos y elementos de formulario


28. Realce los vínculos para que cada página se muestre en el marco del centro.


Adobe Dreamweaver


Adobe Dreamweaver


LA INTERFAZ DE FLASH CS4

Flash CS4 cuenta con un entorno o interfaz de trabajo renovada de lo más

manejable e intuitiva. Además, tiene la ventaja de que es similar a la de otros

programas de Adobe (Photoshop, Dreamweaver, Ilustrador...), todo esto hace más

fácil aprender Flash y más rápido su manejo y dominio. Esto es lo que nos

encontraremos al abrir Flash CS4 por primera vez:

LA BARRA DE MENÚS

La Barra de Menús

tiene como propósito facilitar el acceso a las distintas utilidades del programa. Es similar a

la de cualquier otro programa de diseño web o gráfico, aunque tiene algunas

particularidades. Veamos los principales Submenús a los que se puede acceder:

Archivo: Permite crear nuevos archivos, abrirlos, guardarlos... Destaca la potencia de la

utilidad

Importar que inserta en la película actual casi todo tipo de archivos (sonidos, vídeo,

imágenes e incluso otras películas Flash), o la de Configuración de Publicación desde donde se pueden modificar las características de la publicación. También permite configurar la impresión

de las páginas, imprimirlas.

Edición: Es el clásico menú que te permite Cortar, Copiar, Pegar... tanto objetos o dibujos

como fotogramas; también permite personalizar algunas de las opciones más comunes del programa.

Ver: Además de los típicos Zooms, te permite moverte por los fotogramas y por las

escenas. También incluye la posibilidad de crear una cuadrícula y unas guías. Esto se puede

seleccionar desde los submenús Cuadrícula y Guías desde donde también se pueden configurar sus opciones.

Adobe Dreamweaver


Insertar: Permite insertar objetos en la película, así como nuevos fotogramas, capas,

acciones, escenas...

Modificar: La opción Transformar permite modificar los gráficos existentes en la película,

y la opción Trazar Mapa de Bits convierte los gráficos en mapas vectoriales (este tema se tratará

más adelante). El resto de opciones permite modificar características de los elementos de la animación Suavizar, Optimizar o de la propia película (Capa, Escena...).

Texto: Sus contenidos afectan a la edición de texto. Más adelante se tratará en profundidad.

Comandos: Permite administrar los Comandos (conjunto de sentencias almacenadas que

permiten emular lo que un usuario pueda introducir en el entorno de edición) que hayamos

almacenado en nuestra animación, obtener otros nuevos de la página de Macromedia o ejecutar los que ya tengamos.

Control: Desde aquí se modifican las propiedades de reproducción de la película.

Reproducir, Rebobinar, Probar Película.

Depurar: Aquí encontraremos las opciones de depuración de la película que te ayudarán a

encontrar errores de programación en ActionScrit, entre ellos se encuentran Entrar, Pasar,

Salir, Continuar...

Ventana: Este menú, además de las opciones clásicas acerca de cómo distribuir las ventanas, incluye accesos directos a todos los paneles y también la posibilidad de crear tus

propios Espacios de Trabajo, guardarlos, cargarlos, etc.

La Línea de Tiempo

La Línea de Tiempo representa una forma de ver los fotogramas de modo simplificado.

Consta de 2 partes

1) Los Fotogramas (frames) que vienen delimitados por líneas verticales (formando

rectángulos) 2) Los Números de Fotograma que permiten saber qué número tiene asignado

cada fotograma, cuánto dura o cuándo aparecerá en la película.

La Línea de Tiempo - Fotogramas

Un fotograma representa el contenido de la película en un instante de tiempo. Por tanto,

una animación no es más que una sucesión de fotogramas. Todo esto se puede controlar

desde la Línea de Tiempo, pero no todos los fotogramas tienen el mismo

comportamiento ni se tratan igual. Veamos qué tipos de fotogramas hay y cuáles son sus

rasgos.

a) Fotograma Clave (KeyFrame): Son fotogramas con un contenido específico, se crean,

por tanto, para insertar en ellos un nuevo contenido no existente en la película. Se

Adobe Dreamweaver


identifican por tener un punto negro en el centro y cuando esté vacío se le diferencia por

una línea negra vertical.

Por ejemplo, en el ejemplo de la "pelota" que rebotaba en el suelo habría 3 Keyframes. Uno

para cada posición distinta de la pelota.

b) Fotograma Normal (Normal Frame): Estos fotogramas siempre siguen a los

fotogramas clave, no representan contenido nuevo y son de color gris.

El último fotograma de una secuencia de fotogramas normales viene representado por un

cuadrado blanco sobre fondo gris.

En el ejemplo, los fotogramas del 2 - 4 son fotogramas normales, su contenido no es

nuevo, esto es, es el mismo que el del fotograma 1. Como vemos, su misión es prolongar la

duración de un fotograma clave o keyframe.

c) Fotograma Contenedor: No son fotogramas propiamente dichos, sino que

representan un lugar dentro de la Línea de Tiempo en la que se puede insertar uno.

Por defecto ocupan toda la película y Flash no los tendrá en cuenta al publicar la

película. En la imagen anterior, son fotogramas contenedor todos los fotogramas a

partir del 11 (incluido). 1 de cada 5 fotogramas contenedor es gris, el resto,

blancos.

d) Fotograma Vacío: Son fotogramas sin contenido, Su color es blanco. En la

imagen, los fotogramas del 6 al 10 (incluidos) son fotogramas vacíos. No debemos

confundirlos con los fotogramas contenedor, pues estos últimos vienen

delimitados por líneas verticales grises (no negras). Si se inserta algo en estos

fotogramas, pasan a ser Keyframes.

e) Fotograma Etiquetado (Rabel Frame): Contiene en la parte superior una

"bandera" roja que indica que tienen un nombre asociado. Dicho nombre se

establece desde el Panel Propiedades. Si la duración del frame es la suficiente, se

puede leer el nombre (o etiqueta) que identifica al conjunto de fotogramas.

Adobe Dreamweaver


CREACION DE FORMAS BASICAS

APLICANDO COLORES

Trabaja con la herramienta

rectangulo y herramientas ovalo

libremente para dar forma a los

objetos.

Aplica el uso de capas.

Utiliza las animaciones de flash

Adobe Dreamweaver


Adobe Dreamweaver


Ejercicio 2:

Saturno

Vamos a dibujar un planeta parecido a Saturno

Adobe Dreamweaver


CREACION DE FORMAS BASICAS

APLICANDO COLORES

Trabaja con la herramienta rotacion.

Trabaja con colores de contorno y

colores de relleno.

Usa medidas de rotacion sobre el eje

de 360 grados.

Duplica objetos.

Alinea Objetos.

Adobe Dreamweaver


Adobe Dreamweaver


CREACION DE MOVIMIENTO DE

OBJETOS

Trabaja con la herramienta linea.

Usa Color de Fondo en el

escenario.

Trabaja con interpolacion de

moviemiento.

Trabaja con diferentes tipos de

animación.

Adobe Dreamweaver


ANIMACIÓN DE LÍNEAS

Una buena animación no tiene que porqué estar compuesta sólo por textos o

imágenes espectaculares. En ocasiones conviene darle a la película un aire más

sencillo o añadir determinados efectos que la hagan vistosa sin necesidad de

cargar mucho la película visualmente, y en cuanto a tamaño de archivo se

refiere. Esto lo podemos conseguir simplemente animando líneas y haciendo que

se muevan por el escenario.

Esta técnica nos permite dar dinamismo a la animación o crear formas distintas

a lo largo de su recorrido. Son especialmente útiles y vistosas en fondos oscuros

y se suelen usar para formar rectángulos que se aprovechan para insertar

imágenes.

Adobe Dreamweaver


CREACION ANIMACION

FOTOGRAMA POR FOTOGRAMA

Trabaja con la herramienta texto.

Separa y desagrupa texto estatico.

Trabaja con animacion por

fotograma por fotograma.

Domina el manejo de las capas

asignadole nombre a cada una de

ella.

Adobe Dreamweaver


Adobe Dreamweaver


CREACION ANIMACION POR

FORMA

Trabaja con las herramientas

basicas generando animacion

por forma.

Convierte figuras geometricas a

objetos.

Diferencia el uso de animacion

por forma.

Usa los degradados para animar

objetos

Adobe Dreamweaver


INTERPOLACIÓN POR FORMA

Cuando lo que queramos no sea cambiar la posición de un objeto en el escenario,

sino su forma de manera progresiva (o ambas cosas a la vez), Flash CS4 nos ofrece

la técnica de la Interpolación por Forma, que consiste simplemente en ir

transformando el contorno de un objeto creado en su interfaz hasta que sea igual que

el contorno de otro objeto distinto.

Adobe Dreamweaver


CREACION ANIMACION POR

FORMA

Trabaja con las herramientas

basicas generando animacion

por forma.

Convierte figuras geometricas a

objetos.

Diferencia el uso de animacion

por forma.

Usa los degradados para animar

objetos.

Adobe Dreamweaver


Adobe Dreamweaver


EVALUACION FINAL

Adobe Dreamweaver


manual DREAMWEAVER

Documents

Transcript of manual DREAMWEAVER