Adobe Dreamweaver
[email protected] Página N° 1
Adobe Dreamweaver
[email protected] Página N° 2
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
[email protected] Página N° 3
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
[email protected] Página N° 4
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
[email protected] Página N° 5
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
[email protected] Página N° 6
Creación de sitios web locales
CAPACIDADES A LOGRAR
Identifica el concepto de sitio web
Crea sitio web local
Configura la propiedades de la página
Añade etiquetas html
Adobe Dreamweaver
[email protected] Página N° 7
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
[email protected] Página N° 8
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
[email protected] Página N° 9
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
[email protected] Página N° 10
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
[email protected] Página N° 11
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 <br>, permite aplicar salto de linea
Adobe Dreamweaver
[email protected] Página N° 12
12. Etiqueta <font> y sus propiedades
face : Tipo de fuente
size: Tamaño de fuente
color : color de fuente
13. Añadir la siguiente etiqueta .
<font color="#006633" face="Verdana, Arial, Helvetica, sans-serif" size="+1">
</font>
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
18. Guarde los cambios
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
[email protected] Página N° 14
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
[email protected] Página N° 15
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
[email protected] Página N° 16
10. Aplique la etiqueta <hr>
11. Digite los siguientes textos , aplique la etiqueta <br/> y aplique un color
diferente a cada fila del texto digitado
12. Guarde los cambios
Adobe Dreamweaver
[email protected] Página N° 17
MANIPULACION DE TEXTO
CAPACIDADES A LOGRAR
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
[email protected] Página N° 18
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
[email protected] Página N° 19
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
[email protected] Página N° 20
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
[email protected] Página N° 21
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
[email protected] Página N° 22
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
[email protected] Página N° 23
.
VINCULACIÓN DE
DOCUMENTOS
CAPACIDADES A LOGRAR
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
[email protected] Página N° 24
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
[email protected] Página N° 25
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
[email protected] Página N° 26
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
[email protected] Página N° 27
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
[email protected] Página N° 28
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
[email protected] Página N° 29
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
[email protected] Página N° 30
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
[email protected] Página N° 31
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
[email protected] Página N° 32
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
[email protected] Página N° 33
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
[email protected] Página N° 35
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
[email protected] Página N° 36
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
[email protected] Página N° 37
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
[email protected] Página N° 38
APLICACIONES CON IMÁGENES
CAPACIDADES A LOGRAR
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
[email protected] Página N° 39
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
[email protected] Página N° 40
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
[email protected] Página N° 41
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
[email protected] Página N° 42
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
[email protected] Página N° 43
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
[email protected] Página N° 44
Á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
[email protected] Página N° 45
DISEÑO DE PÁGINAS
CAPACIDADES A LOGRAR
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
[email protected] Página N° 46
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
[email protected] Página N° 47
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
[email protected] Página N° 48
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
[email protected] Página N° 49
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
[email protected] Página N° 50
8. Aplicar márgenes de página “0”
9. Dar clic en el botón aceptar
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
[email protected] Página N° 51
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
4. Guarde los cambios
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
[email protected] Página N° 53
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
[email protected] Página N° 54
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
[email protected] Página N° 55
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
[email protected] Página N° 56
Diseño de páginas con división CAPACIDADES A LOGRAR
Etiquetas Div. y estilos CSS
Formulario
Elementos de formulario
Adobe Dreamweaver
[email protected] Página N° 57
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
6. Dar clic en el botón aceptar
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
[email protected] Página N° 58
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
[email protected] Página N° 59
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
[email protected] Página N° 60
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
[email protected] Página N° 61
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
[email protected] Página N° 62
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
[email protected] Página N° 63
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
[email protected] Página N° 64
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
[email protected] Página N° 65
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
[email protected] Página N° 66
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
[email protected] Página N° 68
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
[email protected] Página N° 69
13. Guarde los cambios
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
16. Guarde los cambios
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
[email protected] Página N° 70
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
27. Guarde los cambios
28. Realce los vínculos para que cada página se muestre en el marco del centro.
29. Guarde los cambios
Adobe Dreamweaver
[email protected] Página N° 71
Adobe Dreamweaver
[email protected] Página N° 72
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
[email protected] Página N° 73
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
[email protected] Página N° 74
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
[email protected] Página N° 75
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
[email protected] Página N° 76
Adobe Dreamweaver
[email protected] Página N° 77
Ejercicio 2:
Saturno
Vamos a dibujar un planeta parecido a Saturno
Adobe Dreamweaver
[email protected] Página N° 78
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
[email protected] Página N° 79
Adobe Dreamweaver
[email protected] Página N° 80
Adobe Dreamweaver
[email protected] Página N° 81
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
[email protected] Página N° 82
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
[email protected] Página N° 83
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
[email protected] Página N° 84
Adobe Dreamweaver
[email protected] Página N° 85
Adobe Dreamweaver
[email protected] Página N° 86
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
[email protected] Página N° 87
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
[email protected] Página N° 88
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
[email protected] Página N° 89
Adobe Dreamweaver
[email protected] Página N° 91
Top Related