DreamWeaver (curso de 6 horas)

David Escudero Mancebo

Dpto. Informática

Universidad de Valladolid

SITIOS WEBEl 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.

SITIOS WEBEsta 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.

SITIOS WEBPara 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.

PAGINAS WEBLas 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.

PAGINAS WEBUna 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

EL TEXTOPuede 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¡¡¡

LA PÁGINABotón derecho> Propiedades de la pag.

Imágenes de fondoColores y márgenesEjercicio: Hacer un patrón de fondo e incluirlo.

Creación de líneas horizontales.

VÍNCULOSSeleccionar 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

VÍNCULOSCreación de vínculos internos.Enlace a un e-mailDestinos _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.

IMAGENESInsertar una imagen es incluir una referencia a un fichero con la imagen: .gif, .jpeg, .pngPulsar el botón . Insertar>Imagen. Ctrl+Alt+IPropiedades 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.

IMAGENESEstablecer una imagen como vínculo.

Establecer zonas de la imagen como vínculo; dibujar la zona con las herramientas de zona interactiva

IM de SUSTITUCIÓNSe 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.

TABLASPropiedades 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.

TABLASLa 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.

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.

CAPASSirven para incluir elementos flotantes.Indice z de apilamientoControl 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> CapasConvertir Capas en Tablas siempre que sea posible.

MARCOSPermiten 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.

MARCOSEnlaces 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.

FORMULARIOSSirven 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

FORMULARIOSAñadir menús.

Añadir ficheros.

EJERCICIOS: Preparar un formulario para Comprar las entradas del fútbol.

HEADMeta: 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.

HEADBase : 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.

TEXTO Y CARACTERESPodemos 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.

MEDIAPodemos introducir animaciones flash

Tenemos botones flash y texto flash predeterminados

Podemos variar las propiedades de éstos y establecer vínculos

PLANTILLASe hacen plantillas para disponer de documentos donde sólo se puedan modificar determinadas partes.

Crear plantilla. Insertar Plantilla.

Para utilizarla: Nuevo > Plantilla

ESTILOS CSSPermite modificar atributos de un rango de texto determinado.

Ventana>Diseño

Nuevo Estilo. Modificar etiqueta o nuevo estilo. Guardar

Después aplicar. Puede editarse.

ESTILOS HTMLPanel 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.

COMPORTAMIENTOSPanel Diseño>ComportamientosPodemos 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.

VER (opción de menú)Regletas, cuadrículas e imagen patrón.

Vistas de código o documento.

Modificar > Alinear y Organizar

APLICACIÓNBases de datos: tenemos que crear una conexión con la base de datos a emplear.Definir sitioDefinir tipo de documento (ASP, PHP,

JSP)Definir el servidor remoto con el que

vamos a tratarDefinir la conexión con la base de datos,

pulsar +

APLICACIÓNVinculaciones: 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.

APLICACIÓNComportamientos 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.