DreamWeaver (curso de 6 horas)

1
DreamWeaver (curso de 6 horas)

• David Escudero Mancebo
• 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.
• Ventanagt 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 textoimágenesotros (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.
• VentanagtPropiedades
• 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 derechogt 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 . InsertargtImagen. CtrlAltI
• 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 .
  InsetargtImágenes interactivasgtImá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 Ediciongt Preferenciasgt 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.
• Actualizarespecifica 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 gt Plantilla

27
ESTILOS CSS

• Permite modificar atributos de un rango de texto
  determinado.
• VentanagtDiseño
• Nuevo Estilo. Modificar etiqueta o nuevo estilo.
  Guardar
• Después aplicar. Puede editarse.

28
ESTILOS HTML

• Panel Diseñogt 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ñogtComportamientos
• 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 gt 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.