Lección: Diseño y Elaboración de una Web Educativa con Dreamweaver
bjetivo de aprendizaje
Al finalizar esta lección, el estudiante será capaz de:
-
Comprender los conceptos básicos de diseño web y sistemas de aplicación.
-
Utilizar Dreamweaver para crear y estructurar una web educativa.
-
Instalar y configurar componentes como menús, plantillas, módulos y plugins.
-
Organizar el contenido mediante artículos y categorías.
🧠 1. Conceptos informáticos básicos
-
Sistema de aplicación: Software que permite realizar tareas específicas, como diseño web.
-
HTML/CSS/JS: Lenguajes fundamentales para la estructura, estilo e interactividad de páginas web.
-
Servidor local: Entorno de pruebas (ej. XAMPP) para visualizar la web antes de publicarla.
-
CMS (Sistema de Gestión de Contenidos): Plataforma que permite administrar contenido sin programar (ej. Joomla, WordPress).
🛠️ 2. ¿Qué es Dreamweaver?
Dreamweaver es un editor visual y de código para diseño web, desarrollado por Adobe. Permite crear sitios web mediante una interfaz WYSIWYG (lo que ves es lo que obtienes) o directamente con código.
Ventajas:
-
Vista dividida (diseño + código).
-
Integración con FTP para subir archivos.
-
Plantillas reutilizables.
-
Compatibilidad con HTML, CSS, JavaScript y PHP.
📐 3. Procedimientos para crear una Web educativa
Paso 1: Planificación
-
Define el objetivo educativo.
-
Identifica el público objetivo.
-
Estructura el contenido en secciones temáticas.
Paso 2: Configuración del sitio en Dreamweaver
-
Crear una carpeta raíz del sitio.
-
Configurar el sitio en Dreamweaver:
Sitio > Nuevo sitio. -
Establecer conexión con servidor local o remoto.
Paso 3: Diseño de la interfaz
-
Crear la página principal (
index.html). -
Insertar encabezados, menús, imágenes y texto educativo.
-
Aplicar estilos con CSS (interno o externo).
Paso 4: Instalación y configuración de elementos
| Elemento | Función | Cómo se gestiona |
|---|---|---|
| Plantillas | Diseño base reutilizable | Archivo > Nuevo > Plantilla |
| Componentes | Elementos funcionales (formularios, botones) | Insertar desde panel de objetos |
| Módulos | Secciones independientes (ej. noticias, calendario) | Crear como archivos HTML separados |
| Plugins | Extensiones para funciones extra (ej. reproductores, galerías) | Integrar mediante scripts o CMS |
| Menús | Navegación entre páginas | Crear con listas <ul> y estilos CSS |
| Artículos | Contenido educativo | Redactar en páginas individuales |
| Categorías | Organización temática | Agrupar artículos por tema o nivel |
🎨 4. Buenas prácticas en diseño educativo
-
Accesibilidad: Contraste adecuado, texto legible, navegación clara.
-
Multimedia: Uso moderado de imágenes, audio y video.
-
Interactividad: Formularios, cuestionarios, enlaces internos.
-
Responsive design: Adaptación a móviles y tablets.