PROFESOR: ISAAC GARCIA RIOS

Presentación del tema: "PROFESOR: ISAAC GARCIA RIOS"— Transcripción de la presentación:

1 PROFESOR: ISAAC GARCIA RIOS

2 Contenido del Curso Introducción a Dreamweaver
Planeación para el Desarrollo de un Sitio Web Sitios Locales Crear una Nueva Página Html Guardar Documentos Entorno de Trabajo Barra Insertar Panel Propiedades Titulo de la Página Tamaño de la página Previsualización de las Páginas Propiedades Básicas de la Página Encabezados Insertar Textos Formatos de Textos Creación de Listas Imágenes Modificar los Atributos de la imagen Imágenes Cambiantes Vínculos Insertar Vínculos Mapas Sensibles Crear albums de fotos Películas, Sonidos Y ELEMENTOS FLASH Hojas de Estilo Creación de Estilos Manejo de Tablas Comportamientos sobre Imágenes Capas Animaciones en Dreamweaver Menús Desplegables Ventanas Pop-Up Manejo de Frames (Marcos) Creación de Formularios Validación de Formularios Contenidos del Head Publicar un Sitio

3 Introducción a Dreamweaver
¿Que es Dreamweaver? Dreamweaver es un editor HTML que contiene herramientas potentes para asegurar un diseño de alta calidad en la creación, edición y gestión de páginas web. Con esta herramienta se pueden crear tablas, marcos, capas, insertar comportamientos JavaScript, videos, etc. Dreamweaver incluye su propio FTP con el cual se puede actualizar de manera rápida y sencilla el servidor donde se encuentre hospedado el sitio.

4 Configurar la Página de Inicio Configurar el Espacio de Trabajo
Menú Edición / Preferencias Categoría General / Mostrar Página de Inicio Configurar el Espacio de Trabajo Categoría General / Botón “Cambiar espacio de trabajo”

5 Definir Sitios Locales
Definir un sitio local es un proceso previo a la creación de cualquier página individual el cual consiste en especificar una carpeta (denominada – Carpeta Raíz Local) del disco duro, esta carpeta será la base de toda la estructura de archivos y carpetas que serán utilizados dentro del sitio Web (páginas, imágenes, archivos, etc.) En el panel Archivos administra todos las carpetas y archivos de los sitios locales o remotos que se especifiquen en Dreamweaver. En este panel, se pueden crear, eliminar, copiar y mover archivos y carpetas. El sitio local no es mas que una replica del sitio remoto (sitio real del servidor Web) Los archivos que se encuentren fuera de la carpeta raíz, no estarán disponibles para el servidor remoto (servidor donde se publicará el sitio) Referencias Relativas Las ubicaciones y vínculos a todos los archivos que se encuentren dentro de un sitio, serán relativos a la carpeta raíz ???? \Carpeta etc Panel Archivos

6 ¿Cómo Definir un Sitio Local?
Utilizar la opción Administrar Sitios.. Esta opción nos permitirá: Especificar un Nuevo Sitio Editar la configuración de un Sitio Quitar un Sitio Duplicar un Sitio Importar y Exportar un Sitio Cambiar de Sitios Usar la opción Nuevo Se puede utilizar las siguientes formas: Básica (Wizard) Avanzada Definir las opciones del sitio (Básica) Nombre del Sitio Tecnología del Servidor (ASP *versiones , PHP, JPS ColdFusion, My Sql) Ruta y Forma de editar los archivos durante el desarrollo Local Directamente en el Server Forma de la conexión al Servidor Remoto Opción Administrar Sitios Menú Sitio / Administrar Sitios Configurar una Carpeta Predeterminada de Imágenes Seleccionar un sitio Editar Ficha Avanzado Carpeta Predeterminada de Imágenes Exportar o Importar un Sitio Al exportar un sitio, se genera un archivo con la extensión *.ste Cuando se exporta un sitio, se guarda dentro del archivo solo la configuración que se haya realizado del sitio, NO la estructura ni archivos.

7 Cambiar de Sitio Se puede seleccionar un sitio de los que ya se hayan establecido en Dreamweaver de las siguientes formas: Mediante la opción Administrar Sitios Mediante el Panel Archivos Seleccionar un Sitio por medio del “Administrador de Sitios” Menú Sitio / Administrar Sitios Seleccionar de la lista el Sitio deseado Botón Listo Seleccionar un Sitio por medio del “Panel de Archivos”

8 Crear una Nueva Página Para crear una nueva página puede hacer uso de las siguientes formas: Uso de la Opción Nuevo Mediante esta opción puede agregar nuevos documentos de tipo: HTML Hojas de Estilo en Cascada (CSS) Documentos de JavaScript y VbScript Documentos XML Páginas Dinámicas compatibles con lenguajes de Java ,ColdFusion, ASP y PHP Uso del Panel de Archivos Metacomando para Abrir el Cuadro “Nueva Pägina” (Ctrl + N) *Se puede configurar para que al usar este metacomando agregue una página de manera automática ( Edición / Preferencias / Categoría Nuevo Documento/ Casilla Mostrar el Cuadro de Dialogo Nuevo Documento con Ctrl+ N Agregar una Página por el Panel Archivos Clic Derecho sobre una Carpeta del Sitio Nuevo Archivo

9 ¿Qué pasa si no se guarda el documento? Reglas para nombrar un archivo
Guardar Documentos En el momento que se agregue un Nuevo Documento, es necesario almacenarlo inmediatamente, ya que de esta manera todas las rutas de referencia a los archivos y vínculos que se agreguen al documento, se establecerán de manera correcta, de lo contrario se presentarán vínculos rotos y errores dentro de un documento o todOs los documentos del sitio. Los documentos se deberán almacenar con la extensión .html Manejo de Extensiones Por default DW almacena los documentos con la extensión *.htm (solo para Windows), pero se recomienda almacenarlas con la extensión *.html para que tanto los equipos Macintosh y Windows puedan interpretar las páginas. ¿Qué pasa si no se guarda el documento? Si no se ha guardado el documento se utilizará una ruta temporal al momento de agregar un elemento a la página (imágenes, archivos de flash, etc) Archivo:\\ Esto podría ocasionar errores en el documento. Reglas para nombrar un archivo El nombre de un documento debe ser en minúsculas, ya que algunos navegadores, servidores y sistemas operativos no reconocen los archivos en MAYUSCULAS. El nombre del archivo debe empezar con letra (No Números) No utilizar espacios en blanco, en vez de espacios se puede utilizar un guión o guión bajo. *Algunos navegadores reemplazan los espacios por el signo de %, por lo que habría problemas en los vínculos entre documentos. No se permites signos especiales. La página principal del sitio debe de llevar el nombre Index.html como una norma que marcan la mayoría de los servidores.

10 Entorno de Desarrollo WYSIWYG
Entorno de Trabajo Paneles Los Paneles tienen las siguientes características: Pueden estar Flotantes o Acoplables Se puede expandir o contraer un panel Ocultar o Mostrar Paneles (Menú Ventana o F4) Se puede ocultar todo el grupo de paneles laterales Cambiar el nombre del panel Un panel se puede agregar con otro (Clic derecho en la pestaña del panel/Agrupar Panel con/seleccionar el panel) Para Cerrar un Panel: Clic Derecho en el título del panel Cerrar Grupo de Paneles Panel Historial Se pueden configurar en Edición/Preferencias/General/No.máximo de pasos en el Historial (de 2 a 9999 veces) Entorno de Desarrollo WYSIWYG WYSIWYG es el acrónimo de What You See Is What You Get (en inglés, "lo que ves es lo que obtienes"). Se aplica a los procesadores de texto y otros editores de texto con formato (como los editores de HTML) que permiten escribir un documento viendo directamente el resultado final, frecuentemente el resultado impreso

11 Mostrar la Barra INSERTAR como Fichas
La barra INSERTAR es la principal herramienta que utiliza Dreamweaver para el diseño de las páginas, la cual esta organizada de la siguiente manera: Común Diseño Formularios Texto HTML Aplicación Elementos de Flash Favoritos Mostrar la Barra INSERTAR como Fichas Menú Común de la Barra INSERTAR Mostrar como Fichas Mostrar como Menú Clic derecho sobre la Barra INSERTAR

12 Visualizar el Panel Propiedades (Ctrl + F3)
Este panel se utiliza para ver y modificar los atributos de los siguientes elementos: Textos Imágenes Tablas Frames Elementos de Flash Otros Elementos. Los atributos disponibles dentro del panel, cambiarán dependiendo del elemento seleccionado. Visualizar el Panel Propiedades (Ctrl + F3) Menú Ventana / Propiedades

13 Configurar el Titulo de la Página
Para definir el título de la página (el título que aparece en la barra de título del navegador), puede hacerlo de la siguiente manera: Barra de herramientas DOCUMENTO. Uso de la Opción de “Propiedades de la Página” Visualizar la Barra Documento Si la barra de herramientas Documento no está visible, elija Ver > Barras de herramientas > Documento. La barra de herramientas Documento aparece en la parte superior de la ventana de documento. Abrir el Cuadro Propiedades de la Página (Ctrl +J) Menú Modificar / Propiedades de la Página / Categoría “Titulo/ Codificación” O Clic en el Botón Propiedades de la Página del Panel Propiedades

14 Especificar el Tamaño de la página
Para el diseño de una página se debe tomar en cuanta la resolución que comúnmente los usuarios tengan configurado en una PC. Las resoluciones mas comunes son: 800 x 600 px 1024 x 768 px Para un diseño de un sitio a una resolución de 800 x 600 píxeles se deberá diseñar en base a las siguientes medidas: Ancho: 750 px Alto: 440 px o según lo largo de la página Resolución de 750 px x 440 px El motivo por que se deben de restar 50 píxeles es por los scroollsbars El tamaño de la página depende del contenido que se coloque dentro de la página.

15 Previsualización de las Páginas
Para previsualizar una página en el navegador se utliza: Menú Archivo/Vista Previa en el Navegador Dreamweaver permite configurar varios navegadores que se pueden utilizar en la previsualización. Editar los Navegadores Menú Edición / Preferencias Vista Previa en el Navegador

16 Propiedades Básicas de la Página
Hacer que el Background sea Fijo Meterse al Código (Pestaña Código) Localizar la etiqueta <Body> Agregar al final de la linea: <Body bgproperties=“fixed”> Paleta Segura de Colores (Web Safe Palette) Esta paleta es una recopilación de 216 colores que tienen el mismo aspecto en todos los navegadores (Windows y Mac) Colores Hexadecimales Colores que van desde el 0 al 9 y de la A a la F, ejemplos: Los colores se basan en el RGB, solo que en base hexadecimal. Para convertir un color RGB en Hexadecimal, se divide el valor entre 16, se toma el resultado entero de la división como el primer valor y el residuo como el segundo valor, ejemplo, el color 255,0,128 (dividir 255/16, 0/16 y 128/16) el resultado seria FF0080

17 Configurar el Formato de los Encabezados
Los encabezados son formatos predefinidos que son aplicados a un texto que se desea resaltar como en el caso de títulos y subtítulos. Configurar el Formato de los Encabezados Entrar al cuadro de dialogo Propiedades de la página Categoria Encabezados

18 Permitir Espacios Consecutivos Caracteres Especiales
Insertar Textos A medida que introduzca texto y aplique formato en la vista Diseño, Dreamweaver creará el código HTML subyacente para la página. Con los textos se pueden aplicar los siguientes atributos: Interlineados Salto con Interlineado Sencillo Salto con Interlineado Doble Definir el formato predeterminado de las fuente en toda la página Formatos Fuente Tamaño Color Estilos Formatos de Párrafo Alineación Sangría Salto con Interlineado Sencillo - Shift + Enter Salto con Interlineado Doble - Enter Permitir Espacios Consecutivos Menú Edición/Preferencias/Categoría General/Permitir múltiples espacios en blanco Caracteres Especiales Barra Insertar / Pestaña Texto / Botón Caracteres

19 Evitar la creación de Estilos en los Formatos de Texto
Formatos de Textos Para aplicar formatos a un texto se utiliza el panel Propiedades, en el cual podrá definir los siguientes formatos: Fuente Párrafo Evitar la creación de Estilos en los Formatos de Texto Para evitar que DW maneje tamaños de fuente basados en estilos, se desactiva la siguiente opción: Menú Edición / Preferencias / General / Utilizar CSS en lugar de etiquetas HTML Tamaños de Fuente El tamaño predeterminado de una página web es de 3 Los tamaños de las fuentes se clasifican en: Absolutos (1 a 7) Relativos (+- tomando como base el valor 3) Fuentes Seguras La lista de fuentes que contiene DW corresponde a las fuentes mas comunes instaladas en cualquier ordenador, en caso de no encontrar una fuente que se use en el documento, se ira a buscar la segunda fuente y así sucesivamente.

20 Creación de Listas Dreamweaver crea 3 tipos básicos listas: Ordenadas
Sin Ordenar Definición Personalizar la Numeración Menú Texto / Lista / Propiedades o En la Barra de Propiedades botón Elemento de Lista (Colocar el cursor en algún elemento de la lista Listas Menú y directorio Son variaciones antiguas de las listas con viñetas, ambas tienen la misma función en las listas sin ordenar y suelen aparecer iguales en al mayoría de los navegadores. Modificar el Color de la Viñeta Colocar la etiqueta <Font Color=“Color”> entre las etiquetas <ol> y <li> cerrándola antes de </ol> Tipos de Viñetas Anidadas Viñetas, Círculos y Cuadrados

21 Imágenes Las imágenes que utiliza Dreamweaver son:
JPG (Join Photographic Expert Group) Este formato es recomendable para imágenes fotográficas o imágenes con una mayor gama de tonalidades o para imágenes con degradados de alta calidad. Este formato no puede tener transparencias ni animaciones. GIF (Graphic Interchange Format) Este formato es el mas recomendable para imágenes de colores uniformes (sin degradados), este formato tiende a descargarse mas rápido por su formato comprimido. Permite tener transparencia y animaciones. PNG (Portable Network Graphic) Este formato comparte características de JPG y GIF, no pierde calidad, se comprimen mas que los GIF y conserva todos los colores como el JPG, pero el formato PNG no tiene animaciones y aun no lo soportan algunos navegadores y servidores.. JPEG – Grupo Conjunto de Expertos Fotográficos GIF – Formato de Intercambio de Gráficos PNG – Formato de Gráficos de Red Portatil

22 Insertar Imágenes Para insertar una imagen se puede realizar de las siguiente formas: Mediante la Barra Insertar Mediante la Opción Insertar Imagen Insertar una Imagen por la Barra Insertar

23 Modificar los Atributos de la imagen
Mediante el Panel Propiedades se puede modificar características como: Ancho y Alto Posición Vertical y Horizontal Archivo de Origen Texto Alterno Bordes Alineación de la Imagen Edición y Efectos de Imágenes Vínculos Edición de una Imagen en Fireworks Editar en Fireworks La imagen abre Fireworks donde los cambios que se realicen afectan al archivo original. Es recomendable trabajar en un archivo PNG para evitar hacerle cambios al archivo original. Optimizar en Fireworks Permite optimizar una imagen en cuanto a su tamaño y velocidad de descarga. El porcentaje de calidad ideal es del 80%. Recortar Recorta una imagen, Hay que dar Enter para que se aplique el recorte a la imagen. Los cambios afectan directamente al archivo. Recomendable utilizar Deshacer Muestrear Mejora la calidad cuando la imagen tiene un nuevo tamaño. Brillo y Contraste Perfilar Aumenta el contraste de los píxeles situados alrededor de los bordes de los objetos para aumentar la definición o nitidez de la imagen

24 Imágenes Cambiantes Dreamweaver permite cambiar una imagen por otra al momento de situar el puntero del mouse sobre la imagen (Rollover). Para un Rollover es recomendable trabajar con imágenes que tengan el mismo tamaño.

25 Vínculos En Dreamweaver se pueden especificar los siguientes tipos de vínculos: Links Absolutos Vínculos que marcan la ruta completa para llamar a un archivo especifico dentro del mismo sitio o en otros. Ejemplo 1: Ejemplo 2: C:\Mis Documentos\web\pagina2.htm Links Relativos Vínculos que se especifican solo colocando el nombre del archivo al que se desea llamar, tomando como base la ruta de la carpeta donde se encuentre almacenado el archivo actual. Ejemplos: archivo.htm carpeta/archivo.htm ../archivo.htm Textos Alternativos Un texto alternativo es una leyenda que se visualiza cuando el puntero del mose se encuentra sobre un hipervinculo

26 Vínculos Links a un e-mail Links a una Ancla Ejemplo:
Links a una Ancla Vinculo que se hace hacia cualquier lugar dentro de la misma página o a otro lugar especifico de otra página. Ejemplo 1: #nombredelancla Ejemplo 2: Pagina2.htm#nombredelancla Ejemplo 3: Links a una Ancla Es necesario colocar una ancla previamente

27 Insertar Hipervínculos Relativos, Absolutos y de Correo
Insertar Vínculos Para Insertar vínculos relativos, absolutos y correo electrónico, se puede realizar desde: Panel Propiedades Panel Insertar Insertar Hipervínculos Relativos, Absolutos y de Correo Panel Propiedades Seleccionar el texto o imagen donde se quiere insertar el Hipervínculo En el Panel Propiedades/Vinculo, ingresar el nombre de la pagina.htm o clic en la carpeta y seleccionar el archivo o arrastrar el botón señalar archivo (al lado derecho de este cuadro ) En caso de querer una página web, colocar En caso de querer un , colocar mailto: Barra Insertar Seleccionar el Texto Clic en el botón de la Cadenita Texto: Texto que se visualizará en la página Vinculo: Destino: Titulo: Es el texto alterno al momento de colocar el puntero en el hipervinculo Clave de Acceso: Meta comando mediante el uso de Alt + Letra para seleccionar el Link Índice de Fichas: El orden en que se desplazarán por los links por medio de la tecla TAB

28 Insertar Vínculos Las anclas son marcas con un nombre definido por el usuario, lo cual permiten crear vínculos a dichas marcas, generando un desplazamiento hacia esas marcas. Las características del nombre de una ancla son: Deben ser únicos dentro de la página No utilizar espacios ni signos especiales. Recomendable el uso de letras minúsculas Al hacer un vinculo hacia una ancla, se debe anteponer el signo # al nombre de la ancla. Ejemplo: #contenido #tema1 Insertar una Ancla Menú Insertar / Anclaje con Nombre (Ctrl + Alt + A) O Barra Insertar / Común / Botón Prevenir Errores Las anclas no funcionan dentro de tablas y capas, por lo que hay que mantenerlas fuera de estas.

29 Mapas Sensibles Los mapas sensibles permiten dividir una imagen en varias secciones con vínculos. Los mapas son definidos mediante un trazo sobre una imagen con las siguientes herramientas: Zona Interactiva Rectangular Zona Interactiva Oval Zona Interactiva Poligonal

30 Crear albums de fotos Dreamweaver tiene la facilidad de crear albums de fotografías apartir de una carpeta de imágenes. Dreamweaver además crea páginas y vínculos por cada una de las imágenes que se encuentre en la página principal del album. Creación de un Album Tener un archivo abierto Menú Comandos / Crear Album de Fotos Web * Los nombres de los archivos de imagen deben de cumplir con las normas de los archivos HTML.

31 Películas y Sonidos Sonidos Videos
En Dreamweaver se pueden insertar videos de los dos formatos mas conocidos: Videos de Windows Media QuickTime Sonidos Los sonidos pueden insertados como fondo de la página o con controles de reproducción a través de un Plug-in. Los formatos mas comunes de sonido son: Mp3 Wav Midi Para insertar una película o sonido (Plug-in) Se utiliza la opción Plug-In de la Barra Insertar. *Para conseguir que no se reproduzca de manera automática, se modifica el código a la siguiente forma: <embed src=“archivo.wav” autostart=“false” loop=“true”></embed> Insertar Sonido de Fondo Ir al código e insertar el siguiente código: <bgsound src=“archivo.wav” loop=“-1”> Diferencia entre QuickTime y Windows Media Archivos QuickTime (.mov) Estos pueden ser videos o pueden incluir elementos interactivos (Panorama de 360 Grados). El problema de estos videos es que la mayoría de las PC no tienen instalado el Plug-In de QuickTime, por lo que si no se descarga e instala, no se podrán ver los videos. Archivos Windows Media Estos archivos se podrán reproducir en la mayoría de los equipos y navegadores , ya que al tener Windows XP, se podrán reproducir sin necesidad de instalar un Plug-In Donde colocar los Archivos de video en el Sitio Los archivos de las imágenes deberán estar dentro de la misma carpeta que la página .html o dentro de una subcarpeta, No responde en caso de tener los archivos fuera de la carpeta del sitio o en una carpeta superior a donde se encuentra la página. Parámetros del Plug-In (Quick Time) controller true o false autoplay true o false

32 Hojas de Estilo Hoja de Estilo en Cascada (Cascading Style Sheet)
Un estilo es un grupo de atributos de formato identificados por un solo nombre que es el encargado de comunicar al navegador como mostrar un elemento. Ventajas de los Estilos: Facilita el empleo de formatos a un texto y la actualización de los mismos con solo modificar un estilo. Un estilo puede ser utilizado en: Solo en el documento donde fue creado En todas las páginas de un sitio, ya que los estilos se guardan en un archivo externo (*.css) y son llamados desde el archivo .html Un estilo puede ser reutilizado en otros sitios. Hoja de Estilos Archivo.css Pagina1.html Pagin2.html Pagin3.html Pagin4.html Estilos: Fuente Listas Fondos Párrafos

33 Asignar un Estilo a un Fondo Estilos con Viñetas de Imágenes
Creación de Estilos Un estilo se puede crear de diferentes maneras: Panel Propiedades Panel Estilos CSS Panel Inspector de Etiquetas Opción Estilos CSS del menú Texto Tipos de Selector: Clase: Permite aplicar el estilo a un bloque de texto seleccionado o por medio de código con el atributo class=“nombredelestilo” dentro de una etiqueta. Ejemplo: <p class=“miestilo”>Texto</p> Etiqueta Aplica un estilo donde exista una etiqueta igual a la que se haya especificado en esta opción en el cuadro Etiqueta Avanzada Aplica un estilo para los hipervinculos, existen los siguientes estados: Link = Link sin visitar Visited = Link Visitado Hover = Al colocar el mouse encima del Link Active = Al momento de dar clic en el link (No usar) Asignar un Estilo a un Fondo Clic derecho en la barra de estado sobre el campo Body Establecer clase / Elegir el estilo de fondo que desea Estilos con Viñetas de Imágenes Crear un nuevo estilo Categoría Lista / Imagen de Viñeta Seleccionar los elementos que llevaran viñeta Aplicar viñeta normal (boton de viñeta) Seleccionar de las propiedades el estilo creado para las viñetas con imagen Adjuntar un Estilo Permite vincular o importar una hoja de estilos a un documento nuevo.

34 Tablas Una tabla es la herramienta principal para realizar un mejor diseño de una página web. La mayoría de las páginas web están diseñadas en base a tablas. Una Tabla esta conformada por filas y columnas, la intersección entre estas forman una celda. Las Tablas contienen las siguientes propiedades: Propiedades Generales (Para toda una tabla) Propiedades Particulares (Para cada celda)

35 Propiedades de las Tablas
Propiedades Generales No. Columnas No. Filas Ancho y Alto de la Tabla Color de Fondo Imagen de Fondo Ancho y Color de los Bordes Alienación de la Tabla Espacio entre celdas (Espacio en Celda) Margen Interno de las Celdas (Espacio entre Celdas) Propiedades Particulares Alineación dentro de la Celda Ancho y Alto de la Celda Imagen y Color de Fondo de la Celda Color del Borde de la Celda Combinar una Celda Dividir una Celda

36 Texto de Accesibilidad Resumen (De preferencia no darlo)
Insertar Tablas Una tabla puede ser insertada de la siguiente forma: Menú Insertar / Tabla Mediante la Barra Inserta Importada Una tabla puede contener: Texto Imágenes Botones Elementos Flash Otras Tablas Insertar Tablas Barra Insertar / Diseño o Común Tamaño de la Tabla La tabla puede estar en Píxeles o Porcentaje Encabezados Las opciones Izquierda Superior y Ambos se refiere a que en las celdas en esa posición dentro de la tabla, tenga un formato en negritas. Texto de Accesibilidad Texto que aparece como encabezado en la parte superior de una tabla Resumen (De preferencia no darlo) Aparece en el Panel Etiquetas / Pestaña Atributos / Summary Importar una Tabla Se puede importar desde: Word y Excel (Copiar y Pegar) Archivos de Texto

37 Opción Formatear Tablas
Formato de Tablas Se le pueden aplicar propiedades a una tabla o las celdas por medio del panel Propiedades Propiedades de la Tabla Propiedades de las Celdas Ordenación de Tablas Comandos / Ordenar Tabla Opción Formatear Tablas Opción que contiene un conjunto de autoformatos. Comandos / Formatear Tablas *Si se aplican un Formateo a una tabla y despues se agregan filas o columnas, los cambios no se aplicará para las futuras filas y columnas.

38 Comportamientos sobre Imágenes
Un comportamiento común sobre una imagen es una acción llamada Rollover, la cual permite cambiar una imagen por otra al momento de posicionar el puntero del mouse encima de una imagen. Existen dos tipos de rollovers que se pueden realizar en Dreamweaver: Normal Cambia solamente una imagen por otra Avanzada Cambia mas de una imagen situada en cualquier parte de la página. Creación de Rollovers Se realiza con el panel comportamientos del menú ventana Colocar un texto en la Barra de Navegación Seleccionar una imagen Crear un Nuevo Comportamiento / Definir Texto / Establecer Texto en la Barra de Estado. Ingresar un Texto / Aceptar

39 Capas Las capas permiten colocar cualquier tipo de elementos en cualquier parte de la pantalla de manera flotante. Las capas pueden estar visibles u ocultas y se puede cambiar su estado en cualquier momento. Evitar Solapamientos Cuando esté activada esta opción, no podrá crear o mover capas delante de otras capas existentes, cambiar el tamaño o anidar capas en otras ya existentes. Si activa esta opción después de crear capas solapadas, separe todas las capas solapadas de las otras capas. Dreamweaver no arregla automáticamente las capas solapadas existentes en la página cuando se activa la opción Evitar solapamiento de capas. Manejo de una Capa Aplicarle un Behavior a una Capa Seleccionar una imagen Agregar un Comportamiento “Mostrar – Ocultar Capas” Seleccionar el nombre de la capa y determinar el estado de visualización (Mostrar u Ocultar) Aceptar Cambiar en el panel de comportamiento el evento (OnLoad) por el evento (OnMouseOver) ** Para que aparezca este evento es necesario tener previamente un evento Agregar un comportamiento pero para ocultar una capa con el evento OnMuseOut Una capa se puede duplicar Preferencias de las Capas Se puede configurar en Edición Preferencias las siguientes opciones: Color de fonfo de la capa, Anidar Capas, Estado Visible por default de las capas,. Tamaño por default de las capas Uso de la Etiqueta Div para las capas Dreamweaver crea las capas utilizando de forma predeterminada la etiqueta div. Convertir Capas en Tablas (Modificar/Convertir/Tablas en Capas) Cada una de las capas seleccionadas se convertirá en una capa

40 Animaciones en Dreamweaver
En Dreamweaver se pueden crear animaciones sencillas, ya que dreamweaver contiene un panel de línea de tiempo en la cual se pueden especificar trayectos y tiempo de duración a las animaciones. Las animaciones se pueden aplicar solamente a las capas y solo esta disponible para la actualización 1.0.1 Animar una Capa Clic derecho a la Capa Agregar a la Línea de Tiempo Agregar Frames a la Línea de Tiempo Ctrl + Clic sobre un Frame Agregar otra Línea de Tiempo Permite animar capas con diferente velocidad y configuraciones Clic derecho sobre la línea de tiempo

41 Menús Desplegables Dreamweaver contiene una herramienta muy sencilla para el diseño de menús desplegables. Los menús pueden ser Horizontales o Verticales Para la creación de un menú se utiliza el comportamiento Mostrar Menú Emergente

42 Creación de una Ventana Pop Up
Ventanas Pop-Up Son ventanas que se abren inmediatamente al entrar a la página de un sitio. Creación de una Ventana Pop Up Crear una Página Guardarla Colocar el contenido que contendrá la ventana PopUp Revisar el total del ancho y alto de la página Almacenarla En la Página principal, Agregar el comportamiento de Abrir Ventana del Navegador

43 Frames (Marcos) Marcos Conjunto de Marcos
Los marcos son estructuras dinámicas que permiten la organización de la información de una página web. Los marcos básicamente permiten dividir la ventana de un navegador en varias regiones, cada una de las cuales puede mostrar un documento HTML diferente Los marcos pueden ser áreas de contenidos (cambiantes) o áreas estáticas de una página. Conjunto de Marcos Es un archivo .html que indica al navegador el estructura, diseño y propiedades que tendrá cada uno de los marcos que se visualizarán en la página, tales como: Número de Marcos Tamaño de los Marcos Ubicación de los Marcos Archivo .html que se visualizará inicialmente dentro de cada frame Entre otras propiedades. Creación de Frames Los frames se pueden agregar del Menu Modificar / conjunto de Marcos O Después de haber colocado un frame se pueden agregar o quitar frames, arrastrando desde cualquier extremo de la regla hacia el interior de la pagina. Frames Predefinidos Existen frames predefinidos de Dreamweaver Barra Insertar / Diseño / Botón Marcos (Penúltimo Botón)

44 Creación de Marcos Predefinidos
Frames (Creación) Crear un Conjunto de Frames Se puede insertar un conjunto de marcos de varios diseños predefinidos de Dreamweaver. Para esto de puede relizar por medio de las siguientes formas. Menú Archivo Menú Insertar Botón Marcos de la Barra Insertar Insertar Frames Es posible insertar manualmente frames dentro de un documento ya existente mediante las siguientes opciones: Arrastrando con el mouse de los bordes del área del documento hacia adentro (es necesario contar previamente por lo menos con un frame) Creación de Marcos Predefinidos Menú Archivo / Nuevo / Conjunto de Marcos Menú Insertar / HTML / Marcos Barra Insertar / Pestaña Diseño / Botón Marcos

45 Frames (Propiedades) Los frames tienen las siguientes propiedades:
Propiedades del Conjunto de Marcos Numero de Filas y Columnas Tipo, ancho y color de Bordes Tamaño de la Fila o columna Pixeles Porcentaje Relativo Propiedades de los Frames Nombre del Frame Archivo de Origen ScrollBars Tipo y Color del Borde Ancho y Alto del Margen No Resize

46 Formularios Los formularios permiten solicitar y recibir información proporcionada por los usuarios que visiten un sitio web. Los formularios están compuestos por campos, los cuales pueden ser del siguiente tipo: Texto Botones de Opción Casillas de Verificación Menús Listas

47 Funcionamiento de los Formularios
Los datos del formulario pueden ser enviados a los siguientes destinos: A una Base de Datos en un servidor A un correo electrónico A una Aplicación que procesará la información Para que se lleve a cabo este proceso es necesario crear aplicaciones que puedan procesar la información enviada por los formularios. Algunas aplicaciones están desarrolladas en los siguientes lenguajes: PHP ASP Perl JPS ColdFusion CGI (Common Gateway Interface) Es un protocolo estándar que actúa como vinculo de comunicación entre los datos del formulario y el servidor.

48 Creación de un Formulario
Para crear un formulario se utiliza la Barra Insertar / Formulario o el menú Insertar. Insertar el área de Formulario Configurar el área del formulario. Dentro del área del formulario insertar los controles. Configurar los Controles. Colocar Botones de Envió y Restauración. NOTA: Los nombres que se les asignen a los controles debe ser iguales a las variables utilizadas en la aplicación que procesará los datos (CGI, ASP o PHP). Insertar un formulario Barra Insertar / Formularios / Formulario Validar un formulario Seleccionar el botón de Enviar Agregar el Comportamiento Validar Formulario Seleccionar de la Lista el campo a validar Especificar las propiedades para cada campo

49 Validación de Formularios
Es un comportamiento que comprueba los datos introducidos en los campos por parte del usuario por medio de reglas que se pueden establecer para cada campo (Regla de Validación). En caso de que los datos introducidos en un campo no cumpla con la regla de validación se visualizará en pantalla un mensaje de error. La validación se puede realizar de dos formas: Validación Campo por Campo. Validación de todo el formulario. Validar Formularios Seleccionar la etiqueta Form en la barra de etiquetas Agregar un Comportamiento de Validar Formulario De la lista especificar las propiedades para cada campo Para que los mensajes de validación aparezcan en español Irse al código y buscar la función MM_ValidteForm() Reemplazar los mensajes en ingles por español como los que se muestran a continuación: must contain an address must contain a number must contain a number between '+min+' and '+max+‘ The following error(s) occurred

50 Agregar un Contenido del Head
Contenidos del Head Entre las etiquetas Head, se pueden establecer ciertas propiedades que no son visibles en la página web (a excepción del título de la página). Las propiedades de cabecera mas utilizadas son: Meta Palabras Clave Descripción Actualizar Para ver los contenidos del Head, se pueden utilizar las siguientes opciones: Menú Ver Botón de Vistas Contenidos del Head Meta Registra y proporciona información sobre la página, como la codificación de caracteres, autor, palabras clave, valores que pueden servir para facilitar información al servidor, como la fecha de caducidad, el intervalo de actualización y la clasificación PICS de la página (Plataforma para la selección del contenido en Internet) Palabras Clave Muchos robots de motores de búsqueda (programas que exploran automáticamente la Web recopilando información que indexan los motores de búsqueda) leen el contenido de la etiqueta meta de palabras clave y utilizan la información para indexar las páginas en sus bases de datos. Las palabras claves deben de ir separadas por comas. Ejemplos: cursos, capacitación, cursos intensivos, clases, etc Descripción Información que utilizan los buscadores y que permite mostrar la descripción en la página de resultados de un buscador en una o dos líneas, Ejemplo: Cursos de Capacitación Intensivos en el DF Actualizar Se utiliza para indicar al navegador que después de un intervalo de tiempo (segundos) mande a llamar a otra URL distinta de manera automática o que actualice la misma página. Agregar un Contenido del Head Menú Insertar / HTML / Etiquetas del Head Barra Insertar / Pestaña HTML / Botón Head

51 Plantillas Una plantilla es un documento que se puede utilizar como base para la creación de otros documentos . Cada documento basado en una plantilla utiliza el mismo diseño y estructura que la plantilla Al modificar la plantilla, se actualizan automáticamente todas las páginas web basadas en esa plantilla. Una plantilla contiene las siguientes zonas: Región Editable Región No editable (Bloqueda) Región Opcional Región Repetida Región Editable (Menú Insertar / Objetos de Plantilla / Región Editable) Son áreas de la página que pueden modificarse en cada página donde se aplique la plantilla

52 Hacer Transparente el fondo de una película de Flash
Elementos Flash En Dreamweaver se pueden insertar elementos flash como: Botones Flash Textos Flash Animaciones de Flash (.swf) Para insertar cualquier elemento de este tipo, utilizar la barra Insertar / Común Hacer Transparente el fondo de una película de Flash En las propiedades del objeto Parametros Colocar el parametro: wmode con el valor transparent

53 Publicar un Sitio Para publicar un sitio es necesario contar con los siguientes requerimientos: Servidor (Local o Internet Server) Contar con una cuenta y password para accesar al Servidor Crear en el Servidor la misma estructura de archivos a la del sitio que se tiene en Dreamweaver Contar con un dominio de internet ( Tener un servicio de transferencia de archivos (FTP o FileManager) Servicio de SQL o algún manejador para Bases de Datos Server, PHP o CGI Al publicar un sitio hay que tomar en cuenta todos los archivos que se utilizaron en el sitio: Imágenes Elementos de Flash Hojas de Estilos Videos Scripts CGI o PHP´s Etc, etc.

54 Instructor: ISAAC GARCIA RIOS
Muchas Gracias Instructor: ISAAC GARCIA RIOS