Transcript DreamWeaver (curso de 6 horas) David Escudero Mancebo Dpto. Informática Universidad de Valladolid SITIOS WEB El objetivo de Internet es difundir información que pueda ser accesible.

DreamWeaver
(curso de 6 horas)
David Escudero Mancebo
Dpto. Informática
Universidad de Valladolid
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.
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.
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.
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.
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
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¡¡¡
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.
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
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.
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.
IMAGENES
Establecer 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Ó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.

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.
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.
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.
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.
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.
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.

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
FORMULARIOS
Añadir menús.
Añadir ficheros.
EJERCICIOS: Preparar un formulario
para Comprar las entradas del fútbol.
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.
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.
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.
MEDIA
Podemos introducir animaciones flash
Tenemos botones flash y texto flash
predeterminados
Podemos variar las propiedades de
éstos y establecer vínculos
PLANTILLA
Se hacen plantillas para disponer de
documentos donde sólo 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>Diseño
Nuevo Estilo. Modificar etiqueta o
nuevo estilo. Guardar
Después aplicar. Puede editarse.
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.
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.
VER (opción de menú)
Regletas, cuadrículas e imagen patrón.
Vistas de código o documento.
Modificar > Alinear y Organizar
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 +
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.
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.