DreamWeaver (curso de 6 horas)

David Escudero Mancebo Dpto. Informtica Universidad de Valladolid

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

SITIOS WEB
Esta informacin se almacena en ficheros: .html (texto e imagen), .gif, .jpeg (imgenes) 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 Ventana> Sitio Al empezar a hacer un trabajo debemos abrir un sitio nuevo.

EJERCICIO: Abrir el sitio con MDW.

SITIOS WEB
Para crear un sitio definimos lo siguiente: Datos locales

Nombre del sitio. Nombre de la carpeta raz 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.

PAGINAS WEB
Las pginas web permiten componer la informacin que se quiere distribuir. Incluyen texto+imgenes+otros (vdeo, audio, animaciones, etc...) Incluyen enlaces para poder navegar EJERCICIO: Anlisis de pgina web. Identificacin de elementos.

PAGINAS WEB
Una pgina web est escrita en html Se trata de un lenguaje que se apoya en texto. Cada elemento de una pgina web tiene su correspondiente etiqueta en el fichero .html correspondiente.

EJERCICIO: Analizar una pgina en MDW. Modificar elementos y ver el efecto

EL TEXTO
Puede escribirse directamente en el editor y despus darle un formato. Ventana>Propiedades Cambiar el estilo: fuente, color, cursiva... Cambiar el formato: encabezados, normal, prrafo y formatos. EJERCICIO: Escribir una pgina web con unos cuantos apartados combinando estilos. ATENCIN: NO SE TRATA DE UN TAPZ

LA PGINA
Botn derecho> Propiedades de la pag.

Imgenes de fondo Colores y mrgenes Ejercicio: Hacer un patrn de fondo e incluirlo.

Creacin de lneas horizontales.

VNCULOS
Seleccionar el texto y escribir en la opcin Vnculo de la ventana de propiedades. Opciones:
Escribir el destino. Arrastrar el archivo destino. Buscar el archivo.

Tambin con el botn

VNCULOS
Creacin de vnculos 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 vnculo. Si el marco que contiene el vnculo no est anidado, el archivo vinculado se cargar en la ventana completa del navegador. _self en el mismo marco o ventana que el vnculo. (predeterminado) _top en la ventana completa del navegador

EJERCICIO: Hacer un ndice para un documento con tres apartados.

IMAGENES
Insertar una imagen es incluir una referencia a un fichero con la imagen: .gif, .jpeg, .png Pulsar el botn . Insertar>Imagen. Ctrl+Alt+I Propiedades bsicas de tamao y vnculo. Posicin en la ventana. Alineamiento de texto a su alrededor. Seleccin de zonas (avanzado) Imagen Origen Base: Imagen de inferior calidad que se carga antes en el navegador.

IMAGENES
Establecer una imagen como vnculo. Establecer zonas de la imagen como vnculo; dibujar la zona con las herramientas de zona interactiva

IM de SUSTITUCIN
Se seleccionan dos imgenes y al pasar con el ratn una cambia de forma.Pulsar . Insetar>Imgenes interactivas>Imgenes de sustitucin. Consejos:
Utilizar imgenes de la misma forma y tamao. Puede ser la misma imagen y cambiar slo un atributo: fuente, transparencia, sombra. Emplear color de transparencia.

TABLAS
Propiedades de tamao y posicin de celdas. Es posible insertar tablas dentro de tablas. Tambin pueden modificarse las propiedades de las celdas. Fila de encabezado. Dividir y juntar celdas. Asignar imgenes de fondo. Insertar tablas desde archivos.

TABLAS
La principal funcin de las tablas es organizar los contenidos. Disposicin: Permite dividir la pgina en zonas. Pueden aadirse nuevas zonas o eliminar las existentes. Es importante darse cuenta de que en el fondo slo hay una tabla.

BARRA DE NAVEG..
Se seleccionan cuatro imgenes y al pasar con el ratn una cambia de forma.Pulsar Los botones pueden aparecer pulsados. Para aadir o eliminar opciones volver a Insertar Barra de Navegacin.

CAPAS
Sirven para incluir elementos flotantes. Indice z de apilamiento Control de desbordamientos. Posibilidad de recortar un rectngulo. 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.

MARCOS
Permiten estructurar vistas web. Un fichero .html indica la distribucin. Cada marco es otro fichero .html Haciendo click en el borde del marco podemos cambiar la configuracin. Haciendo Alt-click en el interior del marco podemos cambiar propiedades. Haciendo click en el interior del marco podemos disear la pgina web.

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

FORMULARIOS
Sirven para enviar datos. El nombre de los elementos es muy importante y puede ser un requisito del cliente. Aadir etiquetas y Textos. Aadir botones de enviar y de limpiar. Aadir casillas y botones de opcin. Aadir grupos de opciones

FORMULARIOS
Aadir mens. Aadir ficheros. EJERCICIOS: Preparar un formulario para Comprar las entradas del ftbol.

HEAD
Meta: introduce informacin sobre la pgina
actual.

Claves de bsqueda: Empleadas por los

robots de motores de bsqueda.

Descripcin: tambin se emplea en las

bsquedas.

Actualizar:especifica que el navegador debe

actualizar la pgina despus de un periodo de tiempo determinado.

HEAD
Base : establece la URL base que sirva de
referencia a todas las rutas de la pgina relativas al documento.

Vnculo : es un vnculo empleado para

especificar una hoja de estilos externa.

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 lnea, espacios en blanco,etc.

MEDIA
Podemos introducir animaciones flash Tenemos botones flash y texto flash predeterminados Podemos variar las propiedades de stos y establecer vnculos

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

ESTILOS CSS
Permite modificar atributos de un rango de texto determinado. Ventana>Diseo Nuevo Estilo. Modificar etiqueta o nuevo estilo. Guardar Despus aplicar. Puede editarse.

ESTILOS HTML
Panel Diseo> Estilos HTML. Podemos crear diferentes estilos para el texto seleccionado o el prrafo. Escogemos las distintas opciones del cuadro de dilogo.

COMPORTAMIENTOS
Panel Diseo>Comportamientos Podemos aadir o eliminar comportamientos. Acciones: Cambiar propiedad, validar
formulario, carga previa de imgenes, mensaje emergente,Mostrar-Ocultar capas, etc. Pulsar al + para aadir una accin. Eventos: escoge la accin que provoca el comportamiento definido. Pulsar la patilla que aparezca entre el evento y la accin.

VER (opcin de men)

Regletas, cuadrculas e imagen patrn. Vistas de cdigo o documento.

Modificar > Alinear y Organizar

APLICACIN
Bases de datos: tenemos que crear una
conexin 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 conexin con la base de datos, pulsar +

APLICACIN
Vinculaciones: sirven para utilizar datos
dinmicos. 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 pgina, pulsando el botn Insertar, Vincular y seleccionando el campo en cuestin. Podemos crear variables de peticin, de sesin y de aplicacin.

APLICACIN
Comportamientos del servidor: aaden 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 pgina, Repetir regin, Autentificacin de usuario,etc.