Diseño y programaciã³n de pã ginas web

Transcripción

1 Diseño y programaciã³n de pã ginas web

2 Objetivos Con motivo de mostrar a cada usuario cómo diseñar y programar páginas web, este curso pretende formar inicialmente al alumno sobre el lenguaje de programación de páginas web por excelencia: HTML. Tras asentar las bases del lenguaje, el alumno será formado en el uso de Dreamweaver 8 (programa líder en la edición profesional de páginas web) permitiéndole gestionar y programar una web. Para ello, el curso incluye simulaciones del uso del programa por lo que no es imprescindible tenerlo instalado. Además son numerosas las prácticas paso a paso descargables (PDF), así como las explicaciones audiovisuales y los cuestionarios.

3 Contenido Módulo 1: Iniciación al HTML 1 - Internet Qué es Internet Los comienzos de Internet Aplicaciones que nos ofrece Internet Qué es WWW Servicios que nos ofrece WWW Cuestionario: Internet 2 - Conceptos básicos Qué es HTML Servidores y clientes WWW Dominios 3 - Estructura de un documento HTML Estructura básica Acentos y caracteres especiales Comentarios Aprender de otras páginas Primer ejemplo Práctica - Plantilla Cuestionario: Estructura de un documento HTML 4 - Dar formato a un documento Formato de párrafo Títulos Formato de texto Etiquetas para cambiar el tamaño y el tipo de letra Formato de línea Páginas con colores Ejercicio de repaso Práctica - Tamaños y formatos Práctica - Líneas Práctica - Colores Práctica - Introducción Cuestionario: Dar formato a un documento 5 - Listas Listas desordenadas Listas ordenadas Listas de definición Práctica - Listas

4 5.5 - Práctica - Provincias Cuestionario: Listas 6 - Imágenes La etiqueta IMG Parámetros de la etiqueta IMG Posición de la imagen con respecto al texto Borde de la imagen Práctica - Tarragona Cuestionario: Imágenes 7 - Enlaces Enlaces Creación de enlaces dentro de una misma página Enlaces con otra página dentro de nuestro sistema Práctica - Enlaces en la página provincias.html Práctica - Cueva del gato Cuestionario: Enlaces 8 - Tabla Qué es una Tabla Tablas básicas Los parámetros HEIGHT y WIDTH Alineaciones del texto dentro de la celda Mejorar la apariencia de una tabla Cuestionario: Tablas 9 - Marcos Qué son los Marcos La etiqueta FRAMESET La etiqueta FRAME Cuestionario: Marcos 10 - Apéndice Listado de direcciones Cuestionario: Cuestionario final HTML Básico Módulo 2: Dreamweaver Conociendo Macromedia Dreamweaver Introducción a Macromedia Dreamweaver Requisitos mínimos necesarios Entrar en Macromedia Dreamweaver

5 1.4 - Entorno de trabajo Barra de herramientas Insertar Ventana de documento Barra de herramientas Documento Panel Propiedades Edición de métodos abreviados de teclado Panel Activos Trabajar con el panel Activos Panel Historial Práctica simulada - Entrar en Macromedia Dreamweaver Práctica simulada - Localizar áreas del entorno de trabajo Práctica simulada - Configurar la ventana de documento Práctica - Diseño Web parte I Cuestionario: Conociendo Macromedia Dreamweaver 2 - Creación de sitios y páginas Web Planificación de un sitio Web Configurar un sitio Web Editar un sitio Web existente Sistema de protección Panel Archivos Configurar las preferencias del panel Archivos Mapa del sitio Mapa de diseño del sitio Crear, abrir y guardar documentos Configurar las propiedades del documento Guías visuales Insertar palabras clave y descripciones Previsualizar un documento Práctica simulada - Nuevo sitio Práctica simulada - Cambiar la página principal Práctica simulada - Configurar el fondo Práctica - Diseño Web parte II Cuestionario: Creación de sitios y páginas Web 3 - Trabajo con texto Vídeo real - Creación y colocación de textos Encabezados y párrafos Asignar fuentes a un texto Editar la lista de fuentes de Dreamweaver Cambiar el color del texto Alineación del texto Sangrías Crear listas Corrección ortográfica Insertar fechas en un documento de Dreamweaver Insertar caracteres especiales Insertar reglas horizontales Crear un texto Flash

6 Creación de estilos CSS Buscar y reemplazar texto Práctica simulada - Aplicar fuentes Práctica simulada - Corrección ortográfica Cuestionario: Trabajo con texto 4 - Imágenes Formatos de gráficos Web Colocación de imágenes Editar imágenes Cambiar el tamaño de las imágenes Uso de la etiqueta alt Justificar imágenes Alineación de imágenes con texto Insertar bordes Insertar imágenes de sustitución Práctica simulada - Insertar imagen Práctica simulada - Modificar una imagen Práctica - Diseño Web parte III Cuestionario: Imágenes 5 - Creación de marcos Vídeo real - Utilización de marcos Creación de marcos y conjuntos de marcos Crear un conjunto de marcos anidado Modificar el tamaño de los marcos Modificar los bordes de un conjunto de marcos Utilización del panel Marcos Abrir una página Web en un marco Añadir barras de desplazamiento Destinar la información de un vínculo Guardar archivos de marcos y conjuntos de marcos Práctica simulada - Marcos anidados Práctica - Diseño Web parte IV Cuestionario: Creación de marcos 6 - Creación de tablas Vídeo real - Utilización de tablas Creación de tablas en la ventana de documento Modificación de tablas Selección de elementos de una tabla Alineación del contenido de una celda Dividir y combinar celdas Anidar tablas Trabajar con formatos de tabla Ordenar tablas Práctica simulada - Trabajar con una tabla Práctica - Diseño Web parte V

7 Cuestionario: Creación de tablas 7 - Trabajar con capas Vídeo real - Aparición de las capas. Mejoras en el diseño Creación de capas Configurar las características por defecto de una capa Panel Capas Modificación de capas Ajustar la alineación de las capas Creación de una capa de carga Trabajar con líneas de tiempo en Dreamweaver Panel Líneas de tiempo Añadir capas al panel Líneas de tiempo Modificar la línea de tiempo Controles de la línea de tiempo Añadir cuadros clave Práctica simulada - Configuración de una capa Cuestionario: Trabajar con capas 8 - Vínculos Web Vídeo real - Localización y rutas de documentos Crear vínculos Crear vínculos desde el panel Propiedades Navegar usando anclajes Selección del destino de los vínculos Crear un vínculo de correo electrónico Creación de mapas de imagen Creación de menús de salto Creación de Barras de navegación Práctica simulada - Creación de vínculos Práctica - Diseño Web parte VI Cuestionario: Vínculos Web 9 - Formularios interactivos Vídeo real - Funcionamiento de los formularios Objetos de formulario Insertar un formulario en Dreamweaver Creación de campos de texto Creación de campos de texto ocultos Insertar casillas de verificación Insertar botones de opción Creación de menús desplegables Creación de listas Creación de botones para activar el formulario Insertar campo de archivo Práctica - Diseño Web parte VII Cuestionario: Formularios interactivos

8 10 - Biblioteca Vídeo real - Almacenamiento de elementos en Dreamweaver La paleta Activos Visualizar los elementos de un documento Insertar un elemento de biblioteca Modificar elementos de biblioteca Práctica simulada - Trabajar con la biblioteca Cuestionario: Biblioteca 11 - Plantillas Creación de plantillas con Dreamweaver Configurar las propiedades de una plantilla Definición de regiones editables en una plantilla Bloquear una región editable Creación de documentos basados en plantillas Práctica simulada - Trabajar con las plantillas de Dreamweaver Práctica - Diseño Web parte VIII Cuestionario: Plantillas 12 - Vídeos Vídeo en la red Vincular vídeos en Dreamweaver Reproducción de vídeos on - line Atributos de QuickTime Insertar RealVideo en un documento HTML Práctica simulada - Visualización de vídeos en un documento HTML Práctica - Diseño Web parte IX Cuestionario: Vídeos 13 - Comportamientos Panel Comportamientos Añadir un comportamiento Llamar JavaScript Cambiar propiedad Comprobar navegador Comprobar plug - in Controlar Shockwave o Flash Controlar sonido Mensaje emergente Arrastrar capa Ir a URL Abrir ventana del navegador Carga previa de imágenes Establecer imagen de barra de navegación Mostrar - Ocultar capas Intercambiar imagen

9 Validar formulario Práctica - Diseño Web parte X Cuestionario: Comportamientos 14 - Comandos de teclado Teclas de función de Dreamweaver Cuestionario: Cuestionario final