Descripción:

💻 Curso: HTML y CSS Básico con Adobe Dreamweaver

Duración: 4 sesiones de 4 horas (total: 16 horas)
Objetivo general: Aprender a estructurar, diseñar y publicar un sitio web responsive desde cero, utilizando HTML, CSS y las herramientas visuales y de código de Adobe Dreamweaver.
Nivel: Básico – Intermedio
Modalidad: Teórico–práctico, con actividades por sesión, proyecto final y evaluación.

¡Mira lo que aprenderás!

🧩 Sesión 1 – Fundamentos de HTML y Dreamweaver

Duración: 4 horas
Objetivo:

Comprender la estructura básica del HTML y familiarizarse con la interfaz de Dreamweaver para crear páginas web desde cero.

Temas:

• Introducción al desarrollo web: estructura cliente/servidor y lenguajes

• Sintaxis HTML y estructura de una página web

• Etiquetas fundamentales: encabezados, párrafos, enlaces, listas, imágenes, tablas

• Estructura semántica con etiquetas HTML5 (<header>, <main>, <nav>, etc.)

• Interfaz de Adobe Dreamweaver: vistas (código, diseño, dividida), paneles y sitio local

🛠 Actividad:
Crear una página web básica con estructura semántica, incluyendo texto, listas, imágenes y enlaces. Visualizarla en Dreamweaver y validar estructura básica.

🎨 Sesión 2 – Introducción a CSS y diseño visual

Duración: 4 horas
Objetivo: Aplicar estilos con CSS para personalizar el diseño visual y modular del sitio web.

Temas:

• Sintaxis de CSS: selectores, propiedades y valores

• Estilos en línea, internos y externos (archivos .css)

• Tipografía, colores, márgenes, bordes y fondo

• Uso de clases, IDs y herencia de estilos

• Organización modular con Dreamweaver (uso de estilos compartidos)

• Introducción a herramientas visuales de diseño (modo diseño)

🛠 Actividad:
Diseñar una hoja de estilos externa y aplicarla a la página creada. Personalizar al menos 10 elementos con diferentes propiedades.

📱 Sesión 3 – Estructura del sitio y diseño responsive

Duración: 4 horas

Objetivo: Aplicar técnicas básicas de maquetación responsive usando Flexbox, media queries y Dreamweaver.

Temas:

• Modelo de cajas (box model)

• Maquetación con Flexbox: conceptos y estructura

• Unidades relativas (%, em, rem, vh, vw)

• Introducción a Media Queries para adaptar a diferentes dispositivos

• Pruebas de visualización responsive en Dreamweaver

• Inserción de navegación, botones e imágenes adaptables

🛠 Actividad:
Construir el layout completo de un sitio con tres secciones (inicio, servicios, contacto) usando Flexbox y estilos responsive.

🚀 Sesión 4 – Publicación del sitio y buenas prácticas

Duración: 4 horas

Objetivo: Integrar formularios, optimizar el sitio y preparar el proyecto para su publicación.

Temas:

• Creación de formularios HTML: campos, etiquetas y botones

• Estructura de carpetas del proyecto y rutas relativas

• Optimización de archivos, validación y comentarios

• Pruebas de visualización final

• Introducción a publicación local o con hosting gratuito

• Buenas prácticas de accesibilidad y usabilidad

🛠 Actividad:
Crear un formulario funcional de contacto. Realizar revisión final del sitio y dejarlo listo para publicación.

🧪 Evaluación Final

Examen teórico-práctico:

• Preguntas sobre estructura HTML, sintaxis CSS, propiedades visuales, maquetación responsive y uso de Dreamweaver.

• Horario: 8:00 am a 12:00 am COL
• Días: Sábado
• Fecha de inicio: 5 Julio
• Fecha final: 26 Julio
• Debes tener acceso al licenciamiento de Adobe Creative Cloud.
• Nivel de dificultad: Basico – Intermedio.