Adobe Dreamweaver
Página N° 1
ronylton@hotmail.com
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.
Página N° 2
ronylton@hotmail.com
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 e
b c
f
d
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.
Página N° 3
ronylton@hotmail.com
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 Página N° 4
ronylton@hotmail.com
b
Adobe Dreamweaver ventana de documento, proporciona información adicional sobre el documento que está creando.
a
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
Página N° 5
ronylton@hotmail.com
Adobe Dreamweaver
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
Página N° 6
ronylton@hotmail.com
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 :
Página N° 7
ronylton@hotmail.com
Adobe Dreamweaver
Carpeta donde se almacenaran los archivos del sitio web
Digite el nombre del sitio web
Carpeta donde se almacenaran las imágenes 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.
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 Página N° 8
ronylton@hotmail.com
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
Página N° 9
ronylton@hotmail.com
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">
Página N° 10
ronylton@hotmail.com
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 <br>, permite aplicar salto de linea
Página N° 11
ronylton@hotmail.com
Adobe Dreamweaver 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
Página N° 12
ronylton@hotmail.com
Adobe Dreamweaver
PRIMERA PRﾃ，TICA CALIFICADA
Pﾃ｡gina Nﾂｰ 13
ronylton@hotmail.com
Adobe Dreamweaver 1. ¿Qué es Adobe Dreamwevaer ? ________________________________________________________________ ________________________________________________________________ ________________________________________________________________ ________________________________________________________________
2. Mencione los tipos de páginas web: _______________________________________________________________________ _______________________________________________________________________ _______________________________________________________________________ _______________________________________________________________________ _______________________________________________________________________ 3. Describa el entorno de Trabajo
c
b
a f
e
d
Página N° 14
ronylton@hotmail.com
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.
Digite SIGNO , aplique alineación en el centro y color rojo
9. Digite Publicidad & Marketing y aplique tamaño de fuente +3 , color de fuente azul y desplazamiento alternado
Página N° 15
ronylton@hotmail.com
Adobe Dreamweaver 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
Pågina N° 16
ronylton@hotmail.com
Adobe Dreamweaver
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
Página N° 17
ronylton@hotmail.com
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 Página N° 18
ronylton@hotmail.com
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: Página N° 19
ronylton@hotmail.com
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 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
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.
Página N° 20
ronylton@hotmail.com
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
Adjuntar hoja de estilo
Nueva regla css
2. Para crear un estilos dar clic en el botón nueva regla css
Página N° 21
ronylton@hotmail.com
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”
Página N° 22
ronylton@hotmail.com
Adobe Dreamweaver
.
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
Página N° 23
ronylton@hotmail.com
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
Anclaje con nombre
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. Página N° 24
ronylton@hotmail.com
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
Anclaje fotos
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. Página N° 25
ronylton@hotmail.com
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:itae@hotmail.com
Página N° 26
ronylton@hotmail.com
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 Página N° 27
ronylton@hotmail.com
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 Fichas Todo y actual Regla css
2. Dar clic en la regla ul.MenúBarhorizontal ,para modificar el tamaño de fuente
Modifique el tamaño a 80 %
3. Dar clic en la regla ul.MenuBarHorizontal a ,para cambiar el color del menú y de fuente
Página N° 28
ronylton@hotmail.com
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.
Color de fuente
Color del menú
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
Página N° 29
ronylton@hotmail.com
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 Página N° 30
ronylton@hotmail.com
Adobe Dreamweaver
Seleccione la etiqueta
4. Al añadir texto en el panel historia se mostrara como la imagen siguiente
El símbolo + para añadir paneles y – para quietar
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
Página N° 31
ronylton@hotmail.com
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:).
Página N° 32
ronylton@hotmail.com
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
Página N° 33
ronylton@hotmail.com
Adobe Dreamweaver
SEGUNDA PRﾃ，TICA CALIFICADA
Pﾃ｡gina Nﾂｰ 34
ronylton@hotmail.com
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 Página N° 35
ronylton@hotmail.com
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
Página N° 36
ronylton@hotmail.com
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 Página N° 37
ronylton@hotmail.com
Adobe Dreamweaver
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
Página N° 38
ronylton@hotmail.com
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 Ancho Alto
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.
c
a b
e d Página N° 39
ronylton@hotmail.com
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.
Página N° 40
ronylton@hotmail.com
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 d b
c
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 Nombre del mapa
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.
Página N° 41
ronylton@hotmail.com
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
Página N° 42
ronylton@hotmail.com
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.
Página N° 43
ronylton@hotmail.com
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
Página N° 44
ronylton@hotmail.com
Adobe Dreamweaver
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
Página N° 45
ronylton@hotmail.com
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.
Página N° 46
ronylton@hotmail.com
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.
Página N° 47
ronylton@hotmail.com
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.
Combinar celdas
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
Página N° 48
ronylton@hotmail.com
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 Página N° 49
ronylton@hotmail.com
Adobe Dreamweaver
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
Página N° 50
ronylton@hotmail.com
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
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 Página N° 51
ronylton@hotmail.com
Adobe Dreamweaver
TERCERA PRﾃ，TICA CALIFICADA
Pﾃ｡gina Nﾂｰ 52
ronylton@hotmail.com
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
Página N° 53
ronylton@hotmail.com
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 Página N° 54
ronylton@hotmail.com
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.
Página N° 55
ronylton@hotmail.com
Adobe Dreamweaver
Diseño de páginas con división CAPACIDADES A LOGRAR Etiquetas Div. y estilos CSS Formulario Elementos de formulario
Página N° 56
ronylton@hotmail.com
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 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
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
Página N° 57
ronylton@hotmail.com
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).
Página N° 58
ronylton@hotmail.com
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.
Página N° 59
ronylton@hotmail.com
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 Comportamientos. Este panel se
que abrir
el panel
de
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.
Página N° 60
ronylton@hotmail.com
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
Página N° 61
ronylton@hotmail.com
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.
Página N° 62
ronylton@hotmail.com
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 Página N° 63
ronylton@hotmail.com
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
Si el marco esta seleccionado aparecerán líneas como estas
Borde del marco
Cambiar el tamaño del marco superior 1. Al seleccionar el borde podrá modifica el alto de los marcos
Página N° 64
ronylton@hotmail.com
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
Pågina N° 65
ronylton@hotmail.com
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 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. 4. Presione la tecla F12 para tener una vista previa de la página
Página N° 66
ronylton@hotmail.com
Adobe Dreamweaver
CUARTA PRﾃ，TICA CALIFICADA
Pﾃ｡gina Nﾂｰ 67
ronylton@hotmail.com
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 Página N° 68
ronylton@hotmail.com
Adobe Dreamweaver
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
Página N° 69
ronylton@hotmail.com
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
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
Página N° 70
ronylton@hotmail.com
Adobe Dreamweaver
Página N° 71
ronylton@hotmail.com
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.
Página N° 72
ronylton@hotmail.com
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 Página N° 73
ronylton@hotmail.com
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.
Página N° 74
ronylton@hotmail.com
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
Página N° 75
ronylton@hotmail.com
Adobe Dreamweaver
Página N° 76
ronylton@hotmail.com
Adobe Dreamweaver Ejercicio 2: Saturno Vamos a dibujar un planeta parecido a Saturno
Pågina N° 77
ronylton@hotmail.com
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.
Página N° 78
ronylton@hotmail.com
Adobe Dreamweaver
Página N° 79
ronylton@hotmail.com
Adobe Dreamweaver
Página N° 80
ronylton@hotmail.com
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.
Página N° 81
ronylton@hotmail.com
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.
Página N° 82
ronylton@hotmail.com
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.
Página N° 83
ronylton@hotmail.com
Adobe Dreamweaver
Página N° 84
ronylton@hotmail.com
Adobe Dreamweaver
Página N° 85
ronylton@hotmail.com
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
Pågina N° 86
ronylton@hotmail.com
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.
Página N° 87
ronylton@hotmail.com
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.
Pågina N° 88
ronylton@hotmail.com
Adobe Dreamweaver
Página N° 89
ronylton@hotmail.com
Adobe Dreamweaver
EVALUACION FINAL
Página N° 90
ronylton@hotmail.com
Adobe Dreamweaver
Página N° 91
ronylton@hotmail.com