Diseño web responsive con Adobe Dreamweaver
Un curso de Arturo ServínDiseñador web
Un curso de Arturo Servín, Diseñador web
Aprende HTML y CSS básico para crear paso a paso un sitio web responsive y con una interfaz visual
Adobe Dreamweaver es un software que permite construir páginas web desde una interfaz completamente visual, y que, a diferencia de otros programas, tiene la capacidad de generar códigos HTML y CSS sin errores, porque cuenta con una función que verifica que estén escritos correctamente. Además, integra sin dificultad las herramientas de Creative Cloud como colores, imágenes o archivos .svg, entre otros.
En este curso, el diseñador web Arturo Servín —más conocido como Monky Lab— te enseñará a realizar un sitio web responsive con Adobe Dreamweaver de una manera visual y sin conocimientos en HTML y CSS utilizando una interfaz gráfica con herramientas de construcción y escritura de código. De este modo, con la fusión entre la programación básica y el diseño, tendrás un mayor control en la elaboración de cualquier documento web.
Para realizar este curso no es necesario tener conocimientos en HTML y CSS. Además, es el complemento ideal para los alumnos de su Domestika Basics: Adobe Photoshop para diseño web, para hacer realidad la página web que han diseñado.
¿Qué aprenderás en este curso online?
31 lecciones & 39 recursos adicionales
¿Qué haremos en el curso?
4 minutos, 44 segundos
¿Qué son la UX y UI?
9 minutos, 11 segundos
Dirección de arte
11 minutos, 32 segundos
La ventaja de estandarizar
9 minutos, 2 segundos
¿Porque usar Dreamweaver?
7 minutos, 33 segundos
Descripción general del área de trabajo
9 minutos, 39 segundos
¿Qué incluye este curso?
Arturo Servín te explicará cómo empezó en el diseño web y cómo ha ido enfrentando los diferentes cambios y avances tecnológicos. Hablará de sus influencias y te mostrará referencias de diseño web funcional.
Empezarás conociendo los principios básicos del diseño web, luego Arturo te enseñará a diferenciar UX de UI, y te dará algunos consejos sobre la dirección de arte y la construcción del site y sus estándares.
Verás cómo utilizar las herramientas de Adobe Dreamweaver para construir un website en el que irás colocando las etiquetas base con lenguaje HTML y estableciendo parámetros. Experimentarás colocando texto e imágenes, así como enlaces a diferentes clases de archivos.
Complementarás la estructura visual usando las ventanas CSS. Aprenderás a generar selectores y valores, luego a establecer el modelo de caja orientado a parámetros responsive y mediante elementos del CSS darás estilo a tu página: tipografías, diseño de cajas, aplicación de position, display y floats; y aplicarás imágenes de fondo, bordes o listas y clases, entre otros elementos.
¿Cómo hacer tu sitio responsive? Establecerás los parámetros de construcción del site usando Media Queries para las diferentes medidas requeridas, crearás un menú sencillo que sirva tanto para smartphone como para ordenador, y verás cómo revisar y corregir antes de subir tu website.
¡Todo listo para publicar! Utilizarás la ventana FTP del programa para sincronizar las carpetas locales del site con las carpetas del site remoto, y así poder hacer cambios de forma inmediata en tu web.
Software y herramientas recomendados para este curso
¿Cuál es el proyecto del curso?
Desarrollarás un sitio web responsive básico de solo una página, que te permita tener entregables funcionales, tanto para clientes como para equipos de programación más avanzados.
Proyectos de estudiantes del curso
¿A quién está dirigido este curso online?
A diseñadores gráficos que no se han decidido a dar el paso hacia el diseño web, a diseñadores web principiantes, a diseñadores de UI iniciados, y a cualquiera que quiera aprender a diseñar su página web responsive.
Requisitos y materiales
Para este curso no es necesario tener conocimientos previos, ya que aprenderás HTML y CSS desde cero, pero te puede ser útil el curso previo de Arturo Servín, de Adobe Photoshop para diseño web.
En cuanto a herramientas, necesitarás un ordenador con Adobe Dreamweaver CC 2019 o superior instalado.
Opiniones
- hace 5 meses
bien
- hace 10 meses
muy bien explicado
- rmmarinacePLUShace 1 año
I've programmed for the web for almost 20 years, but never designed with Dream Weaver. I teach Graphic Design with Phtoshop and Illustrator so it was time to learn DW--so this is a fantastic start.
- hace 1 año
Excelente, muy completo lo sentí como un basics, sin ser basics!
- hace 1 año
Buen curso
Actualmente es el director general de La Constelación, un estudio enfocado al marketing digital, e-commerce y diseño web.
Contenidos
- U1
Introducción
- Presentación
- Influencias
- ¿Qué haremos en el curso?
- U2
Principios de diseño web
- ¿Qué son la UX y UI?
- Dirección de arte
- La ventaja de estandarizar
- U3
Perdiendo el miedo a Dreamweaver: construyendo una página web básica
- ¿Porque usar Dreamweaver?
- Descripción general del área de trabajo
- Creación de carpetas de trabajo
- Sintaxis HTML usando etiquetas, atributos y valores
- Estructura general de una página web
- Colocando texto e imágenes
- Enlaces
- U4
Agregando estilo a una página web
- Vinculación de un archivo CSS y su Sintaxis
- Selectores y valores
- El modelo de caja y reinicio de una hoja de estilos
- Estilos tipográficos
- Estilos para el diseño de cajas P1
- Estilos para el diseño de cajas P2
- Aplicando position, display y floats P1
- Aplicando position, display y floats P2
- Decoración CSS
- U5
Un sitio responsivo
- Creando Media Queries
- Primero el móvil
- Haciendo un menú responsivo sencillo P1
- Haciendo un menú responsivo sencillo P2
- Usando las vistas previas
- Revisar y corregir
- U6
Publicación de sitio web
- Definiendo un sitio remoto desde Dreamweaver
- Subiendo el sitio web
- Sincronizar el sitio local y el sitio remoto
- PF
Proyecto final
- Introducción al diseño web responsive con Adobe Dreamweaver
Qué esperar de un curso de Domestika
Aprende a tu ritmo
Disfruta aprendiendo desde casa, sin horarios y a tu ritmo. Tú decides cuándo seguir con cada unidad.
Aprende de los mejores profesionales
Aprende los métodos y técnicas más útiles con los mejores profesionales del sector creativo.
Conoce a profesores expertos
Cada profesor te transmitirá sus conocimientos con pasión, ofreciéndote explicaciones claras y una perspectiva profesional en cada lección.
Certificados
PLUSSi eres Plus, obtén un certificado personalizado y firmado por tu profesor. Compártelo en tu porfolio, en las redes sociales o donde quieras.
Ponte en primera fila
La alta calidad de los vídeos permitirá que no te pierdas ni un solo detalle. Gracias al acceso ilimitado, podrás ver las lecciones todas las veces que necesites para perfeccionar tus habilidades.
Comparte conocimientos e ideas
Pregunta, pide opinión y ofrece soluciones. Comparte tu experiencia de aprendizaje con otros estudiantes de la comunidad tan apasionados por la creatividad como tú.
Conecta con una comunidad creativa global
Esta comunidad cuenta con millones de usuarios de todo el mundo, personas curiosas y con ganas de explorar y expresar su creatividad.
Realiza cursos profesionalmente producidos
Domestika selecciona cuidadosamente los profesores y produce cada curso internamente para garantizar una experiencia de aprendizaje online excelente.
Preguntas frecuentes
Aprenderás a crear, estructurar y diseñar sitios web responsivos usando Dreamweaver, HTML y CSS, optimizando la experiencia de usuario e interfaz, gestionando recursos visuales, tipografía, colores y flujos de trabajo colaborativos.
El curso está dirigido a personas con conocimientos básicos de diseño o desarrollo web, ideal para nivel intermedio que busca profundizar en la creación de sitios responsivos y el uso eficiente de Dreamweaver.
Es recomendable tener conocimientos básicos de HTML y CSS, aunque el curso repasa los conceptos fundamentales y te guía en su aplicación práctica dentro de Dreamweaver.
Necesitas una computadora con Adobe Dreamweaver instalado, acceso a internet y conocimientos básicos de navegación en sistemas de archivos. No se requiere experiencia avanzada en programación.
Aprenderás a aplicar Media Queries, estructuras adaptativas y el principio mobile first para que tus sitios web funcionen y se vean bien en cualquier dispositivo, optimizando la experiencia del usuario.
Sí, el curso enseña a seleccionar, combinar e integrar tipografías y paletas cromáticas utilizando herramientas como Google Fonts, Adobe Fonts y Adobe Color para lograr una identidad visual coherente.
Sí, aprenderás a diseñar formularios accesibles, crear botones estándar y personalizarlos mediante CSS, garantizando usabilidad y accesibilidad en tus proyectos web.