dreamweaver

DreamWeaver

(curso de 6 horas)

David Escudero Mancebo Dpto. Informática

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)

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

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.

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

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.

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.

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.

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.

VÍNCULOS

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

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

IMAGENES

Establecer una imagen como vínculo. Establecer zonas de la imagen como vínculo; dibujar la zona con las

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.

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.

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.

BARRA DE NAVEG..

Se seleccionan cuatro imágenes y al pasar con el ratón una cambia de

forma.Pulsar

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

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.

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.

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.

FORMULARIOS

Añadir menús. Añadir ficheros.

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

HEAD

Base : establece la URL base que sirva de referencia a todas las rutas de la página

relativas al documento.

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

MEDIA

Podemos introducir animaciones flash Tenemos botones flash y texto flash predeterminados

PLANTILLA

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

ESTILOS CSS

Permite modificar atributos de un rango de texto determinado.

Ventana>Diseño

Nuevo Estilo. Modificar etiqueta o nuevo estilo. Guardar

ESTILOS HTML

Panel Diseño> Estilos HTML.

Podemos crear diferentes estilos para el texto seleccionado o el párrafo.

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.

VER (opción de menú)

Regletas, cuadrículas e imagen patrón. Vistas de código o documento.

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,

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.

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.