DreamWeaver (curso de 6 horas)

1. DreamWeaver (curso de 6 horas) David Escudero Mancebo Alfonso Pedriza Rebollo Dpto. Informática Universidad de Valladolid

2. SITIOS WEB • El objetivo de Internet es difundir información que pueda ser accesible de forma remota. • La información aparece en sitios web a los que se accede con una dirección (ej http://www.euitt.upm.es) • EJERCICIO: Acceder a este sitio con el navegador.

3. SITIOS WEB • Esta información se almacena en ficheros: .html (texto e imagen), .gif, .jpeg (imágenes) y otros (.doc, .pdf). • http:://www.euitt.upm.es/index.html • http:://www.euitt.upm.es/laeuitt/situacion.html • http:://www.euitt.upm.es/gifs/plano_situacion.gif • EJERCICIO: Abrir el sitio con MDW. • Ventana> Sitio • Al empezar a hacer un trabajo debemos abrir un sitio nuevo.

4. SITIOS WEB • Para crear un sitio definimos lo siguiente: • Datos locales • Nombre del sitio. • Nombre de la carpeta raíz local • Datos remotos: definimos el modo de acceso a estos datos y donde se encuentran. • Servidor de prueba: introducimos el tipo de servidor y el modo de acceso. • Los dos últimos campos no siempre son necesarios.

5. PAGINAS WEB • Las páginas web permiten componer la información que se quiere distribuir. • Incluyen texto+imágenes+otros (vídeo, audio, animaciones, etc...) • Incluyen enlaces para poder navegar • EJERCICIO: Análisis de página web. Identificación de elementos.

6. PAGINAS WEB • Una página web está escrita en html • Se trata de un lenguaje que se apoya en texto. • Cada elemento de una página web tiene su correspondiente etiqueta en el fichero .html correspondiente. • EJERCICIO: Analizar una página en MDW. Modificar elementos y ver el efecto

7. EL TEXTO • Puede escribirse directamente en el editor y después darle un formato. • Ventana>Propiedades • Cambiar el estilo: fuente, color, cursiva... • Cambiar el formato: encabezados, normal, párrafo y formatos. • EJERCICIO: Escribir una página web con unos cuantos apartados combinando estilos. • ATENCIÓN: NO SE TRATA DE UN TAPÍZ¡¡¡

8. LA PÁGINA • Botón derecho> Propiedades de la pag. • Imágenes de fondo • Colores y márgenes • Ejercicio: Hacer un patrón de fondo e incluirlo. • Creación de líneas horizontales.

9. VÍNCULOS • Seleccionar el texto y escribir en la opción Vínculo de la ventana de propiedades. • Opciones: • Escribir el destino. • Arrastrar el archivo destino. • Buscar el archivo. • También con el botón

10. VÍNCULOS • Creación de vínculos internos. • Enlace a un e-mail • Destinos • _blank en una ventana de navegador nueva y sin nombre. • _parent en el conjunto de marcos padre o en la ventana del marco que contiene el vínculo. Si el marco que contiene el vínculo no está anidado, el archivo vinculado se cargará en la ventana completa del navegador. • _self en el mismo marco o ventana que el vínculo. (predeterminado) • _top en la ventana completa del navegador • EJERCICIO: Hacer un índice para un documento con tres apartados.

11. IMAGENES • Insertar una imagen es incluir una referencia a un fichero con la imagen: .gif, .jpeg, .png • Pulsar el botón . Insertar>Imagen. Ctrl+Alt+I • Propiedades básicas de tamaño y vínculo. • Posición en la ventana. Alineamiento de texto a su alrededor. • Selección de zonas (avanzado) • Imagen Origen Base: Imagen de inferior calidad que se carga antes en el navegador.

12. IMAGENES • Establecer una imagen como vínculo. • Establecer zonas de la imagen como vínculo; dibujar la zona con las herramientas de zona interactiva

13. IM de SUSTITUCIÓN • Se seleccionan dos imágenes y al pasar con el ratón una cambia de forma.Pulsar . Insetar>Imágenes interactivas>Imágenes de sustitución. • Consejos: • Utilizar imágenes de la misma forma y tamaño. • Puede ser la misma imagen y cambiar sólo un atributo: fuente, transparencia, sombra. • Emplear color de transparencia.

14. TABLAS • Propiedades de tamaño y posición de celdas. • Es posible insertar tablas dentro de tablas. • También pueden modificarse las propiedades de las celdas. • Fila de encabezado. • Dividir y juntar celdas. • Asignar imágenes de fondo. • Insertar tablas desde archivos.

15. TABLAS • La principal función de las tablas es organizar los contenidos. • Disposición: Permite dividir la página en zonas. • Pueden añadirse nuevas zonas o eliminar las existentes. • Es importante darse cuenta de que en el fondo sólo hay una tabla.

16. BARRA DE NAVEG.. • Se seleccionan cuatro imágenes y al pasar con el ratón una cambia de forma.Pulsar • Los botones pueden aparecer pulsados. • Para añadir o eliminar opciones volver a Insertar Barra de Navegación.

17. CAPAS • Sirven para incluir elementos flotantes. • Indice z de apilamiento • Control de desbordamientos. • Posibilidad de recortar un rectángulo. • OJO: Fuertemente dependientes del navegador. • Se puede hacer (casi) lo mismo con tablas. • Para anidar: Edicion> Preferencias> Capas • Convertir Capas en Tablas siempre que sea posible.

18. MARCOS • Permiten estructurar vistas web. • Un fichero .html indica la distribución. • Cada marco es otro fichero .html • Haciendo click en el borde del marco podemos cambiar la configuración. • Haciendo Alt-click en el interior del marco podemos cambiar propiedades. • Haciendo click en el interior del marco podemos diseñar la página web.

19. MARCOS • Enlaces entre marcos: • Puede hacerse que la página de destino aparezca en un frame. • mainframe: Marco principal. • leftframe: marco de la izquierda. • bottomframe: marco inferior. • Rigthframe: marco de la parte derecha.

20. FORMULARIOS • Sirven para enviar datos. • El nombre de los elementos es muy importante y puede ser un requisito del cliente. • Añadir etiquetas y Textos. • Añadir botones de enviar y de limpiar. • Añadir casillas y botones de opción. • Añadir grupos de opciones

21. FORMULARIOS • Añadir menús. • Añadir ficheros. • EJERCICIOS: Preparar un formulario para Comprar las entradas del fútbol.

22. HEAD • Meta: introduce información sobre la página actual. • Claves de búsqueda: Empleadas por los robots de motores de búsqueda. • Descripción: también se emplea en las búsquedas. • Actualizar:especifica que el navegador debe actualizar la página después de un periodo de tiempo determinado.

23. HEAD • Base : establece la URL base que sirva de referencia a todas las rutas de la página relativas al documento. • Vínculo : es un vínculo empleado para especificar una hoja de estilos externa.

24. TEXTO Y CARACTERES • Podemos escribir en Negrita, Cursiva, con texto predeterminado, emplear la hoja de estilos, encabezados,etc. • Podemos utilizar caracteres especiales como salto de línea, espacios en blanco,etc.

25. MEDIA • Podemos introducir animaciones flash • Tenemos botones flash y texto flash predeterminados • Podemos variar las propiedades de éstos y establecer vínculos

26. PLANTILLA • Se hacen plantillas para disponer de documentos donde sólo se puedan modificar determinadas partes. • Crear plantilla. Insertar Plantilla. • Para utilizarla: Nuevo > Plantilla

27. ESTILOS CSS • Permite modificar atributos de un rango de texto determinado. • Ventana>Diseño • Nuevo Estilo. Modificar etiqueta o nuevo estilo. Guardar • Después aplicar. Puede editarse.

28. ESTILOS HTML • Panel Diseño> Estilos HTML. • Podemos crear diferentes estilos para el texto seleccionado o el párrafo. • Escogemos las distintas opciones del cuadro de diálogo.

29. COMPORTAMIENTOS • Panel Diseño>Comportamientos • Podemos añadir o eliminar comportamientos. • Acciones: Cambiar propiedad, validar formulario, carga previa de imágenes, mensaje emergente,Mostrar-Ocultar capas, etc. Pulsar al + para añadir una acción. • Eventos: escoge la acción que provoca el comportamiento definido. Pulsar la patilla que aparezca entre el evento y la acción.

30. VER (opción de menú) • Regletas, cuadrículas e imagen patrón. • Vistas de código o documento. • Modificar > Alinear y Organizar

31. APLICACIÓN • Bases de datos: tenemos que crear una conexión con la base de datos a emplear. • Definir sitio • Definir tipo de documento (ASP, PHP, JSP) • Definir el servidor remoto con el que vamos a tratar • Definir la conexión con la base de datos, pulsar +

32. APLICACIÓN • Vinculaciones: sirven para utilizar datos dinámicos. • Se necesita realizar tres de los pasos anteriores (definir sitio, tipo de documento y servidor de prueba). • Pulsando + podemos crear un juego de registros y podremos vincular los campos de la base de datos a nuestra página, pulsando el botón Insertar, Vincular y seleccionando el campo en cuestión. • Podemos crear variables de petición, de sesión y de aplicación.

33. APLICACIÓN • Comportamientos del servidor: añaden los comportamientos necesarios para trabajar con la base de datos a la que nos conectamos. • Una vez definido el juego de registros, podemos insertar los valores de los formularios en la base de datos. • Mostrar los campos de la base de datos en la página, Repetir región, Autentificación de usuario,etc.