Dreamweaver MX 2004, información detallada

A la finalización de la lección el alumno entenderá la pantalla de Dreamweaver y sabrá configurarla, sabrá crear un sitio Web así como gestionar las páginas pertenecientes al sitio. Crear, abrir, cerrar, renombrar, borrar páginas.

1.- Introducción a Dreamweaver MX

Explicación de la Metodología del curso.

¿Qué es Dreamweaver MX 2004?

Versiones MX y MX 2004

Instalación.

Descripción de la Pantalla.

Configuración de la pantalla.

Barras de herramientas.

Paneles.

Creación de un Sitio Web.

Referencias de HTML.

<HTML> y </HTML>.

<HEAD> y </HEAD>.

<BODY> y </BODY>.

Gestión de Páginas.

Crear una página Web.

Guardar una página.

Crear una página desde la solapa Archivos.

Abrir una Página.

Cerrar una Página.

Eliminar y Duplicar una Página.

Propiedades de una Página.

Vista preliminar en el navegador.

Ejercicios

Ejercicio 1

Configuración de pantalla

Ejercicio 2

Configurar el sitio de trabajo

Ejercicio 3

Crear las páginas

Dreamweaver MX 2004: 2.- Añadiendo texto

A la finalización de la lección el alumno sabrá crear páginas con la introducción de texto.

2.- Añadiendo Texto

Referencias HTML.

Etiquetas Importantes.

Estilos de Párrafo.

Etiqueta <FONT>.

Atributos de Alineación.

Edición básica de Texto.

Introducción de texto.

Movimiento del cursor.

Selección de Texto.

El Portapapeles.

Mover y copiar sin el portapapeles.

Otras Operaciones útiles.

Formato Básico de Texto

Estilo de Párrafo.

Fuente.

Editar Lista de fuentes.

Negrita y cursiva.

Tamaño.

Alineación de Párrafos.

Sangría de Párrafos.

Listas.

Regla horizontal.

Acerca del color.

Seleccionar el color.

Estilos para texto

Definir un estilo para texto

Cambiar el nombre de Estilos de texto

Administrar estilos de texto

Estilos y el HTML

Estilos vs. <FONT>

Opción predeterminada

Ejercicios

Ejercicio 1

Ejercicio 2

Ejercicio 3

Insertar texto al sitio Web

Dreamweaver MX 2004: 3.- Hipervínculos.

A la finalización de la lección, el alumno sabrá generar todo tipo de enlaces entre páginas.

3.- Hipervínculos

Referencias HTML

Etiqueta <A> y </A>

Atributos de <A>

Atributos de <BODY>

Cuestiones generales

Hipervínculos

URL

Direcciones absolutas y relativas

Elementos del enlace

Apariencia de los enlaces

Destino

Crear Hipervínculos

Utilizando el icono de carpeta o el campo de texto Vínculo del inspector de Propiedades

Señalar archivos para crear enlaces relativos.

Desde una selección de un documento abierto

Utilizando el menú Insertar

Hipervínculos de correo electrónico

Hipervínculos a marcadores

Crear un marcador

Crear un enlace a un marcador

Destino-Target de los Hipervínculos

Ejercicios

Ejercicio 1

Enlaces entre páginas

Ejercicio 2

Enlace a marcadores

Ejercicio 3

Enlace a una dirección de correo electrónico

Ejercicio 4

Aspecto visual de los enlaces realizados.

Dreamweaver MX 2004: 4.- Imágenes

A la finalización de la lección, el alumno sabrá colocar y administrar imágenes en una página web así como crear enlaces y mapas con ellas.

4.-Imágenes

Referencia HTML

Etiqueta <IMG>

Etiqueta <MAP> y </MAP>

Atributo background de BODY

Etiqueta Object

Introducción: Formatos de imagen y características

Insertar una Imagen.

Menú Insertar

Otros Métodos

Insertar un marcador de posición de Imagen

Imagen como enlace

Propiedades de la Imagen

Editar una Imagen

Ajustar el Tamaño

Uso de márgenes y bordes

Opciones de Alineación

Mapas de imagen

Modificar áreas del mapa

Imagen como fondo.

Inserción de objetos Flash y Fireworks

Deamweaver y Fireworks

Dreamweaver y Flash

Otros objetos Flash

Panel de Activos

Conceptos generales

Ejercicios

Ejercicio 1

Guardar imágenes

Ejercicio 2

Logotipos

Imagen título

Imágenes de ilustración

Ejercicio 3

Mapa de imagen

Ejercicio 4

Imagen de fondo y marca de agua

Ejercicio 5

Insertar una película flash

Dreamweaver MX 2004: 5.- Administración del sitio Web

A la finalización de la lección, el alumno será capaz de organizar adecuadamente los archivos de un sitio Web.

5.- Administración del Archivos Web

Introducción

Vistas del Sitio

Utilizar la vista mapa

Visualización de la vista mapa

Árbol de la vista mapa

Modificar la estructura del sitio

Más información

Operaciones sobre Archivos

Abrir

Eliminar

Cambiar nombre

Mover

Duplicar

Importar archivos

Mover todos los archivos asociados a una página

Operaciones sobre Sitios

Conceptos generales

Duplicar Sitio

Eliminar sitios

Ejercicios

Ejercicio 1

Ejercicio 2

Ejercicio 3

Dreamweaver MX 2004: 6.- Tablas

A la finalización de la lección, el alumno será capaz de diseñar páginas empleando las tablas como método de diseño.

6.- Tablas.

Introducción.

Referencias HTML.

Etiqueta <TABLE>.

Atributos de <TABLE>.

Crear una tabla.

Edición de una tabla.

Moverse por la tabla.

Selección de tablas y sus elementos.

Propiedades de tabla.

Propiedades de celda.

Cambiar el tamaño

Cambiar el número de filas y columnas.

Añadir filas y columnas.

Eliminar filas y columnas.

Combinar y dividir celdas.

Combinar.

Dividir.

Vista Ampliada y otras ayudas

Vista Ampliada

Ayuda Visual de ancho de tabla

Vista de Diseño.

Tablas de Diseño.

Celdas de Diseño.

Autoampliar.

Ajustar a cuadrícula.

Cuestiones de Diseño.

Tablas contenedoras.

Resoluciones de pantalla.

Celdas de separación.

Conflictos en el formato de tablas.

DOCTYPE y sus restricciones

¿Qué es?

Problema

Solución

Otras utilidades para tablas.

Formatear tablas.

Ordenar tablas.

Importar y Exportar tablas.

Ejercicios

Ejercicio de práctica

1 Tabla web

2 Bordes y espacios

3 Tablero de ajedrez

4 Diseño tarta

5 Diseño Formación

6 Diseño Dalí

Otros ejercicios propuestos.

Ejercicio 1.

Ejercicio 2.

Ejercicios obligatorios

1. Tablas de cabecera

2. Tablas contenedoras

3. Página index

4. Tablas en el resto de páginas

Dreamweaver MX 2004: 7.- Formularios

A la finalización el alumno será capaz de diseñar formularios para la recolección de datos desde una web, así como utilizar diferentes controladores CGI para la gestión de esos datos.

7.-Formularios

Introducción.

Referencias HTML Method Action Enctyp.

Etiqueta <FORM>.

Atributos de <FORM>.

Crear un formulario.

Objetos de formulario.

Cuadro de texto (Text field)

Área de texto (Text área)

Cuadros ocultos (Hidden field)

Casilla de verificación (Checkbox)

Botón de opción (radio button)

Grupos de opciones

Listas / Menús desplegables

Menús de salto como listas de navegación (Jump menú)

Botones (Button)

Campo de imagen (Image)

Campos de archivo (File Field)

Etiqueta

Juego de campos

Resumen HTML.

Orden de tabulación.

Atributo TABINDEX.

Controladores de formularios.

CGI.

E-mail.

Lo que hay que recordar

Lo primero: el cuadro de formulario

Ningún formulario sin propiedades.

Níngún campo sin nombre.

Ejercicios

Ejercicio 1

Formulario de la página de pedidos

Dreamweaver MX 2004: 8.- Marcos

A la finalización el alumno será capaz de diseñar webs basadas en una estructura de navegación con marcos.

8.- Marcos

Qué son y para qué sirven

Definición

Utilidad

Referencia html ( FRAME IFRAME)

Etiqueta <FRAMESET>

Atributos de <FRAMESET>

Atributos de <FRAME>

Etiqueta <IFRAME>

Creación de una pagina de marcos

Desde nuevo documento

Desde una página abierta

Modificar una página de marcos

Dividir marcos

Eliminar marcos

Selección de marcos y conjuntos de marcos.

En el panel Marcos

En la vista de Diseño

Guardar contenido de marco

Guardar una página de conjunto de marcos

Guardar una página que aparece dentro de un marco

Guardar todo

Propiedades del conjunto de marcos

Tamaño de marco de filas y columnas

Propiedades del marco

Nombre

Página de origen

Otras propiedades

Navegadores que no soportan marcos

Enlaces entre marcos.

Ejercicios

Ejercicio 1

Crear la página de conjunto de marcos

Página del marco de navegación

Página inicial para el marco inferior

Guardar las páginas de marcos

Ejercicio 2

Corrección de las páginas existentes

Dreamweaver MX 2004: 9.- Estilos CSS

A la finalización el alumno será capaz de diseñar estilos personales para mejorar la apariencia de las páginas así como su mantenimiento y organización.

9.-- Estilos CSS

REFERENCIA HTML (SELECTOR, REGLA, PROPIEDAD, VALOR)

Introducción

Terminología empleada en CSS

Propiedad

Valor

Declaración

Selector

Regla de estilo

Hoja de estilo

Unidades

Colocación de las reglas de estilo

Tipos de Estilos

Creación de estilos (Clase, selector y etiqueta)

Creación de una clase

Redefinir una etiqueta HTML

Creación de un estilo Avanzado

Aplicar una clase...

... a texto.

...a cualquier objeto HTML.

Panel de estilos CSS (Edición de estilos)

Modificar un estilo

Borrar un estilo

Hojas de estilo Externas .

Creación de estilos en una hoja externa.

Exportar estilos desde el HEAD a una Hoja externa

Vincular a una Hoja externa

Edición de una Hoja de Estilos y uso de plantillas.

Plantillas de hojas de estilo

Propiedades de los estilos.

Propiedades de Tipo.

Propiedades del Fondo

Propiedades de Bloque

Propiedades de Cuadro

Propiedades de Borde

Propiedades de Lista

Propiedades de Posición

Extensiones.

Gestión de estilos avanzada

Administrador de Estilos

Inspector de reglas de estilo

Resumen y consejos prácticos.

Conflicto entre estilos

Herencia entre etiquetas

Ejercicios

Ejercicio 1

Ejercicio 2.

Descarga el archivo estilo.css y aplícalo a todas las páginas del web.

Dreamweaver MX 2004: 10.- Capas.

A la finalización de la lección el alumno sabrá qué es una capa, su utilidad y su uso.

10.- Capas

Fundamentos de las capas.

Referencia HTML. (Etiquetas DIV).

Crear capas.

Operaciones básicas sobre capas.

Propiedades de las capas.

La solapa Capas.

Anidación de capas.

Método 1: Menú Insertar

Método 2: Icono de capa

Método 3: Solapa de capa

Position: absolute / relative

Diseño con capas.

Reglas.

Cuadrícula.

Alinear.

Convertir capas en tablas y viceversa.

Ejercicios

Ejercicio 1.

Elementos de partida.

Estructura de capas.

Añadiendo contenido a las capas.

Ubicando las capas en su posición.

Centrado a diferentes resoluciones.

Ejercicio 2 (de práctica)

Dreamweaver MX 2004: 11.- Comportamientos y DHTML

A la finalización de lección el alumno será capaz de emplear el código Javascript que genera el uso de cualquiera de los comportamientos descritos.

Lección 11. Comportamientos y DHTML

Comportamientos y eventos.

Aplicar un comportamiento.

Solapa Comportamientos.

Visualización de los eventos.

Botones de administración

Modificar un comportamiento aplicado.

Compatibilidad de los comportamientos y eventos.

Relación de eventos.

Comportamientos de Dreamweaver.

Abrir ventana del navegador.

Arrastrar capa.

Cambiar propiedad.

Carga previa de imágenes.

Comprobar el navegador.

Comprobar plug-in.

Controlar Flash.

Controlar sonido.

Definir imagen de barra de navegación.

Definir texto de barra de estado.

Definir texto en un cuadro de texto, una capa o un marco.

Intercambiar imagen.

Ir a URL.

Llamar a Javascript.

Mensaje emergente.

Menú de salto.

Menú de salto ir.

Mostrar/ocultar menú emergente.

Mostrar ocultar capas.

Restaurar imagen intercambiada.

Validar formulario.

Extensiones de Dreamweaver.

Administrador de Extensiones.

La extensión calendar.

Algunas extensiones para que te entre el gusanillo.

HTML Dinámico

Imágenes de sustitución; Rollover.

Barra de navegación.

Ejercicios

Ejercicio OBLIGATORIO 1.

Ejercicio OBLIGATORIO 2.

Ejercicio OBLIGATORIO 3.

Ejercicio de práctica 1.

Ejercicio de práctica 2.

Dreamweaver MX 2004: 12.- Productividad

A la finalización de la lección el alumno será capaz de emplear las herramientas de productividad que incorpora el programa, fundamentalmente el uso de plantillas y de la librería.

12.-- Productividad

Métodos de teclado

El panel Historial.

Uso del Historial

Reproducir secuencia

Guardar un Comando.

Grabadora de comandos

Panel de Activos

Utilización del panel Activos

Elementos de Biblioteca

Creación de un elemento de biblioteca

Inserción de un elemento de biblioteca.

Modificación de un elemento de biblioteca.

Otras operaciones sobre los elementos de la biblioteca.

Uso de plantillas

Creando una plantilla

Creación de región editable

Creación de una región repetida

Creación de una región opcional

Otras herramientas de productividad.

Fragmentos de código

SSI Server Side Includes

Ejercicios

Ejercicio 1. Comandos del historial

Ejercicio 2 . Operaciones con colores.

Ejercicio 3. Elemento de biblioteca.

Ejercicio 4. Plantillas.

Ejercicio 5. Fragmentos de código.

Dreamweaver MX 2004: 13.- Comprobación y Publicación

Revisar un sitio Web, resolver enlaces rotos, comprobar los tiempos de descarga, publicar en un servidor de Internet y promocionar el sitio Web

Lección 13. Comprobación y publicación.

Comprobación de un sitio Web.

Comprobar hipervínculos.

Reparación de vínculos rotos.

Seguir hipervínculos.

Archivos huérfanos.

Informes de un sitio.

Revisión del navegador de destino.

Informes de validación.

Limpiar Código HTML

Buscar y remplazar.

Comprobar tiempo de descarga.

Publicación de un sitio Web.

Obtención de los datos para publicar.

Configurar el sitio para la publicación en un servidor de Internet.

Publicar un sitio Web.

Comprobar la publicación.

Obtener archivos de un servidor.

Sincronizar un sitio Web.

Proteger y desproteger archivos.

Resumen de iconos de la solapa Sitio.

Ejercicios

Ejercicio 1

Ejercicio 2

Ejercicio 3

Dreamweaver MX 2004: 14.- Promoción en Internet.