Cómo crear un email HTML en Dreamweaver (CC / 2024)

Dreamweaver permite diseñar emails HTML visualmente (vista Diseño) o por código (vista Código/Dividir). Los emails HTML requieren HTML tabla-based, CSS inline, imágenes absolutas y prueba exhaustiva en clientes de correo (Outlook, Gmail, Apple Mail, móvil).

1. Configuración inicial del documento

1. Archivo → Nuevo → HTML → Crear.
2. Vista → Diseño (o Dividir).
3. Propiedades de página (abajo) → Propiedades de página...:
   • Título: Asunto del email.
   • Codificación: UTF-8 (Unicode).
   • Tipo de documento: HTML5 (aunque email use subconjunto).
   • Márgenes: 0 (para email full-width).
   • Fuente base, tamaño, color, fondo.
4. Categoría Enlaces (CSS): color enlace, visitado, hover, subrayado.
5. Categoría Encabezados (CSS): estilos para h1-h6.

2. Estructura base: Tabla contenedora (wrapper)

Los emails se maquetan con tablas anidadas para compatibilidad universal (especialmente Outlook Windows que usa motor Word).

<table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0" style="background:#f4f4f4;">
  <tr>
    <td align="center" style="padding:20px 10px;">
      <!-- Tabla email real (600-640px max) -->
      <table role="presentation" width="600" cellpadding="0" cellspacing="0" border="0" style="background:#ffffff;font-family:Arial,sans-serif;">
        <tr><td style="padding:30px;">CONTENIDO AQUÍ</td></tr>
      </table>
    </td>
  </tr>
</table>

role="presentation" elimina semántica tabla para lectores de pantalla.

3. Crear contenido en Vista Diseño

• Texto: Escribe directamente. Formato: Propiedades → Formato (Párrafo, Encabezado 1-6), Negrita (B), Cursiva (I), Color.
• Listas: Selecciona líneas → icono Lista con viñetas / Numerada.
• Imágenes: Insertar → Imagen → Desde archivo. Importante: Sube imágenes a tu servidor/CDN y usa URL absoluta (https://tudominio.com/img/foto.jpg). En Propiedades: Alt text obligatorio, ancho/alto en px, style="display:block; border:none; outline:none; text-decoration:none;".
• Botones (CTA): Tabla 1 celda + fondo color + padding + texto blanco + enlace. No uses <button> ni <input> (no funcionan en email).
• Espaciado: Usa padding en <td>, no margin (no soportado). Spacer: <tr><td height="20" style="font-size:0;line-height:0;">&nbsp;</td></tr>.

4. CSS Inline obligatorio

Dreamweaver no inlinnea automáticamente todo. Antes de enviar:

1. Selecciona todo (Ctrl+A) → Copiar (Ctrl+C).
2. Usa inliner.cm, Mailchimp CSS Inliner, Premailer, o extensión VS Code "Email HTML Inliner".
3. Pega el HTML inlinneado en nuevo archivo Dreamweaver → guarda.

5. Vista previa y test

1. Archivo → Vista previa en navegador → Chrome/Firefox (render webkit/gecko).
2. Test real obligatorio: Envía a cuentas de prueba: Gmail (web/app), Outlook (Win/Mac/Web), Apple Mail, Yahoo, iOS Mail, Android Gmail. Usa Litmus, Email on Acid, Parcel (gratis para devs) para capturas en 100+ clientes.
3. Verifica: render, enlaces, imágenes (alt text), CTA, modo oscuro (prefers-color-scheme), accesibilidad.

6. Envío

Dreamweaver no envía emails. Copia el HTML final → pega en tu ESP (Mailchimp, Brevo, ActiveCampaign, HubSpot, Klaviyo, Customer.io) o en Gmail/Outlook via "Insertar HTML" (extensiones como "HTML Inserter for Gmail").

Plantillas starter recomendadas (gratis, probadas)

• Cerberus / HTML Email Boilerplate (GitHub) – patrones responsive sin media queries (fluid hybrid).
• Foundation for Emails 2 / MJML – frameworks que compilan a HTML tabla-compatible.
• Mailchimp / Brevo templates – listos para importar.