Guía del usuario Cancelar

Optimización del código

  1. Guía del usuario de Dreamweaver
  2. Introducción
    1. Conceptos básicos sobre diseño web adaptable
    2. Novedades de Dreamweaver
    3. Desarrollo web con Dreamweaver: información general
    4. Dreamweaver / Preguntas frecuentes
    5. Métodos abreviados de teclado
    6. Requisitos del sistema para Dreamweaver
    7. Resumen de funciones
  3. Dreamweaver y Creative Cloud
    1. Sincronizar la configuración de Dreamweaver con Creative Cloud
    2. Bibliotecas Creative Cloud en Dreamweaver
    3. Uso de archivos de Photoshop en Dreamweaver
    4. Trabajar con Adobe Animate y Dreamweaver
    5. Extraer archivos SVG optimizados para la Web desde bibliotecas
  4. Espacios de trabajo y vistas de Dreamweaver
    1. El espacio de trabajo de Dreamweaver
    2. Optimización del espacio de trabajo de Dreamweaver para la implementación visual
    3. Buscar archivos por nombre de archivo o contenido | Mac OS
  5. Configuración de sitios
    1. Acerca de los sitios de Dreamweaver
    2. Configuración de una versión local del sitio
    3. Conectar con servidores de publicación
    4. Configuración de un servidor de prueba
    5. Importación y exportación de la configuración de un sitio de Dreamweaver
    6. Traer sitios web existentes desde un servidor remoto a la raíz del sitio local
    7. Funciones de accesibilidad en Dreamweaver
    8. Ajustes avanzados
    9. Configuración de las preferencias de sitio para transferir archivos
    10. Especificación de la configuración del servidor proxy en Dreamweaver
    11. Sincronizar la configuración de Dreamweaver con Creative Cloud
    12. Uso de Git en Dreamweaver
  6. Administrar archivos
    1. Creación y apertura de documentos
    2. Administración de archivos y carpetas
    3. Carga de archivos al servidor y descarga desde el mismo
    4. Desprotección y protección de archivos
    5. Sincronizar archivos
    6. Comparación de archivos para detectar diferencias
    7. Ocultación de archivos y carpetas en el sitio de Dreamweaver
    8. Activación de Design Notes para sitios de Dreamweaver
    9. Prevención de la posible actuación repentina de Gatekeeper
  7. Maquetación y diseño
    1. Usar ayudas visuales al diseñar
    2. Información sobre el uso de CSS para diseñar la página
    3. Diseño de sitios web interactivos con Bootstrap
    4. Creación y uso de consultas de medios en Dreamweaver
    5. Presentación de contenido en tablas
    6. Colores
    7. Diseño interactivo mediante diseños de cuadrícula fluida
    8. Extract en Dreamweaver
  8. CSS
    1. Aspectos básicos de las hojas de estilos en cascada
    2. Diseño de páginas con el Diseñador de CSS
    3. Uso de preprocesadores de CSS en Dreamweaver
    4. Configuración de las preferencias de estilos CSS en Dreamweaver
    5. Mover reglas CSS en Dreamweaver
    6. Conversión de CSS en línea en una regla CSS en Dreamweaver
    7. Uso de etiquetas div
    8. Aplicación de degradados al fondo
    9. Creación y edición de efectos de transición de CSS3 en Dreamweaver
    10. Formatear código
  9. Contenido de página y activos
    1. Definición de las propiedades de la página
    2. Configuración de propiedades de encabezado CSS y propiedades de vínculo CSS
    3. Uso de texto
    4. Buscar y reemplazar texto, etiquetas y atributos
    5. Panel DOM
    6. Editar en la Vista en vivo
    7. Codificación de documentos en Dreamweaver
    8. Selección y visualización de elementos de la ventana de documento
    9. Configuración de las propiedades de texto en el inspector de propiedades
    10. Revisión ortográfica de una página web
    11. Uso de las reglas horizontales en Dreamweaver
    12. Añadir y modificar combinaciones de fuentes en Dreamweaver.
    13. Trabajo con activos
    14. Inserción y actualización de fechas en Dreamweaver
    15. Creación y gestión de activos favoritos en Dreamweaver
    16. Insertar y editar imágenes en Dreamweaver
    17. Adición de objetos multimedia
    18. Adición de vídeos en Dreamweaver
    19. Insertar vídeo HTML5
    20. Insertar archivos SWF
    21. Adición de efectos de sonido
    22. Insertar audio HTML5 en Dreamweaver
    23. Trabajar con elementos de bibliotecas
    24. Uso de texto árabe y hebreo en Dreamweaver
  10. Establecimiento de vínculos y navegación
    1. Acerca del establecimiento de vínculos y la navegación
    2. Vinculación
    3. Mapas de imágenes
    4. Vínculos de solución de problemas
  11. Widgets y efectos de jQuery
    1. Uso de interfaz de usuario y widgets móviles de jQuery en Dreamweaver
    2. Uso de efectos jQuery en Dreamweaver
  12. Programación de sitios web
    1. Acerca de la programación en Dreamweaver
    2. Entorno de programación en Dreamweaver
    3. Configuración de las preferencias de programación
    4. Personalización de los colores del código
    5. Escritura y edición de código
    6. Sugerencias de código y completado de código
    7. Contraer y expandir código
    8. Reutilizar código con fragmentos
    9. Depuración de código mediante linting
    10. Optimización del código
    11. Edición de código en Vista de diseño
    12. Trabajo con el contenido de Head para páginas
    13. Inserción del lado del servidor incluida en Dreamweaver
    14. Uso de bibliotecas de etiquetas en Dreamweaver
    15. Importación de etiquetas personalizadas a Dreamweaver
    16. Uso de comportamientos de JavaScript (instrucciones generales)
    17. Aplicación de comportamientos JavaScript incorporados
    18. Acerca de XML y XSLT
    19. Realización de transformaciones XSL del lado del servidor en Dreamweaver
    20. Realización de transformaciones XSL en el lado del cliente en Dreamweaver
    21. Adición de entidades de caracteres para XSLT en Dreamweaver
    22. Formatear código
  13. Flujos de trabajo de varios productos
    1. Instalación y uso de extensiones para Dreamweaver
    2. Actualizaciones integradas en Dreamweaver
    3. Insertar documentos de Microsoft Office en Dreamweaver (solo Windows)
    4. Trabajo con Fireworks y Dreamweaver
    5. Edición de contenido en sitios de Dreamweaver con Contribute
    6. Integración de Dreamweaver Business Catalyst
    7. Crear campañas de correo electrónico personalizado
  14. Plantillas
    1. Acerca de las plantillas de Dreamweaver
    2. Reconocimiento de plantillas y documentos basados en plantillas
    3. Crear una plantilla de Dreamweaver
    4. Crear regiones editables en plantillas
    5. Creación de tablas y regiones repetidas en Dreamweaver
    6. Usar regiones opcionales en plantillas
    7. Definición de atributos de etiqueta editables en Dreamweaver
    8. Creación de plantillas anidadas en Dreamweaver
    9. Edición, actualización y eliminación de plantillas
    10. Exportar e importar contenido xml en Dreamweaver
    11. Aplicación o eliminación de una plantilla de un documento existente
    12. Edición de contenido en plantillas de Dreamweaver
    13. Reglas de sintaxis de etiquetas de plantilla en Dreamweaver
    14. Configuración de preferencias de resaltado en regiones de plantillas
    15. Ventajas de usar plantillas en Dreamweaver
  15. Móvil y multipantalla
    1. Creación de consultas de medios
    2. Cambio de la orientación de página para dispositivos móviles
    3. Creación de aplicaciones web para dispositivos móviles con Dreamweaver
  16. Sitios, páginas y formularios web dinámicos
    1. Aspectos básicos de las aplicaciones web
    2. Configuración del ordenador para desarrollo de aplicaciones
    3. Solución de problemas de conexiones a bases de datos
    4. Eliminación de secuencias de comandos de conexión en Dreamweaver
    5. Diseñar páginas dinámicas
    6. Introducción a las fuentes de contenido dinámico
    7. Definir fuentes de contenido dinámico
    8. Añadir contenido dinámico a las páginas
    9. Cambio de contenido dinámico en Dreamweaver
    10. Visualización de registros de bases de datos
    11. Proporcionar datos en vivo y solucionar sus problemas en Dreamweaver
    12. Añadir comportamientos de servidor personalizados en Dreamweaver
    13. Crear formularios con Dreamweaver
    14. Uso de formularios para recopilar información de los usuarios
    15. Crear y activar formularios de ColdFusion en Dreamweaver
    16. Crear formularios web
    17. Compatibilidad mejorada con HTML5 para elementos de formulario
    18. Desarrollar un formulario con Dreamweaver
  17. Creación visual de aplicaciones
    1. Creación de las páginas maestra y de detalles en Dreamweaver
    2. Crear páginas de búsqueda y resultados
    3. Crear una página de inserción de registros
    4. Crear una página de actualización de registros en Dreamweaver
    5. Creación de páginas de eliminación de registros en Dreamweaver
    6. Usar comandos ASP para modificar una base de datos en Dreamweaver
    7. Crear una página de registro
    8. Crear una página de inicio de sesión
    9. Creación de una página para acceso exclusivo de usuarios autorizados
    10. Protección de carpetas en ColdFusion con Dreamweaver
    11. Uso de componentes de ColdFusion en Dreamweaver
  18. Prueba, vista previa y publicación de sitios web
    1. Vista previa de páginas
    2. Vista previa de páginas web de Dreamweaver en varios dispositivos
    3. Comprobación del sitio de Dreamweaver

 

Obtenga más información sobre cómo limpiar el código en Dreamweaver, comprobar la compatibilidad con navegadores, valide los documentos XML y creación de páginas compatibles con XHTML.

Limpieza del código

Se pueden eliminar automáticamente etiquetas vacías, combinar etiquetas font anidadas y, en general, mejorar el código HTML o XHTML desordenado o ilegible.

Para obtener información sobre cómo limpiar HTML generado a partir de un documento de Microsoft Word, consulte Cómo abrir y editar documentos existentes.

  1. En un documento abierto, Seleccione Herramientas > Limpiar HTML.

  2. En el cuadro de diálogo que aparece, seleccione las opciones deseadas y haga clic en Aceptar.
    Nota:

    Según el tamaño del documento y el número de opciones seleccionadas, la operación de limpieza puede tardar varios segundos en realizarse.

    Eliminar Etiquetas contenedoras vacías

    Elimina las etiquetas que carecen de contenido. Por ejemplo, las etiquetas <b></b> y <font color="#FF0000"></font> están vacías, pero la etiqueta <b> en <b>texto</b> no lo está.

    Eliminar Etiquetas anidadas repetidas

    Elimina todas las repeticiones de una etiqueta. Por ejemplo, en el código <b>Esto es lo que <b>realmente</b> quería decir</b>, las etiquetas b que delimitan la palabra realmente son redundantes y se eliminarían.

    Eliminar Comentarios HTML ajenos a Dreamweaver

    Elimina todos los comentarios que Dreamweaver no haya insertado. Por ejemplo, <!‑‑begin body text--> se eliminaría, pero no <!‑‑TemplateBeginEditable name="doctitle”‑‑>, ya que se trata de un comentario de Dreamweaver que marca el comienzo de una región editable en la plantilla.

    Eliminar Formato especial de Dreamweaver

    Elimina comentarios que Dreamweaver añade al código para permitir que los documentos se actualicen automáticamente cuando se actualizan las plantillas y los elementos de biblioteca. Si selecciona esta opción al limpiar el código en un documento creado a partir de una plantilla, el documento se separará de la plantilla. Para más información, consulte Separación de un documento de una plantilla.

    Eliminar Etiqueta(s) específica(s)

    Elimina las etiquetas especificadas en el cuadro de texto contiguo. Utilice esta opción para eliminar etiquetas personalizadas insertadas por otros editores visuales y otras etiquetas que no desea que aparezcan en el sitio (por ejemplo, blink). Separe las distintas etiquetas mediante comas (por ejemplo, font,blink).

    Combinar etiquetas de <font> anidadas cuando sea posible

    Consolida dos o más etiquetas font cuando controlan el mismo rango de texto. Por ejemplo, <font size="7"><font color="#FF0000">rojo grande</font></font> se cambiaría a <font size="7" color="#FF0000">rojo grande</font>.

    Mostrar registro al terminar

    Muestra un cuadro de alerta con detalles acerca de los cambios realizados en el documento inmediatamente después de concluir la limpieza.

Verificación de que las etiquetas y llaves están equilibradas

Puede realizar una comprobación para asegurarse de que las etiquetas, paréntesis (()), llaves ({ }) y corchetes ([ ]) de la página estén equilibrados. Equilibrados significa que todos los paréntesis, etiquetas, llaves y corchetes de apertura tienen uno de cierre, y viceversa.

Comprobación de que las etiquetas están equilibradas

  1. Abra el documento en la Vista de código.
  2. Sitúe el punto de inserción en el código anidado que desea comprobar.
  3. Seleccione Edición > Seleccionar etiqueta padre.

    Se resaltarán las etiquetas de apertura y cierre (y su contenido) en el código. Si elige Edición > Seleccionar etiqueta padre, y las etiquetas están equilibradas, Dreamweaver seleccionará las etiquetas html y /html más externas.

Comprobación de que los paréntesis, llaves y corchetes estén equilibrados

  1. Abra el documento en la Vista de código.
  2. Sitúe el punto de inserción en el código que desea comprobar.
  3. Seleccione Editar > Código > Equilibrar llaves.

    Se seleccionará todo el código comprendido entre los paréntesis, llaves y corchetes. Si se vuelve a elegir Editar > Código > Equilibrar llaves, se seleccionará todo el código comprendido dentro de los paréntesis, llaves y corchetes que encierran la nueva selección.

Comprobación de la compatibilidad con los navegadores

La función Comprobar compatibilidad con navegadores (BCC) le ayuda a ubicar combinaciones de código HTML y CSS que pueden provocar problemas en determinados navegadores. Esta función también comprueba el código de los documentos para cualquier propiedad o valor CSS que no sea compatible con los navegadores de destino.

Validación de documentos XML

Puede establecer las preferencias del validador, los problemas específicos que debe comprobar el validador y los tipos de errores de los que debe informar el Validador.

  1. Siga uno de estos procedimientos:
    • Para un archivo XML o XHTML, seleccione Archivo > Validar > Como XML.

    • La ficha Validación del panel Resultados mostrará el mensaje “No se han encontrado errores ni advertencias” o una lista de los errores de sintaxis encontrados.

  2. Haga doble clic sobre un mensaje de error para seleccionar el error en el documento.
  3. Para guardar el informe como un archivo XML, haga clic en el botón Guardar informe.
  4. Para ver el informe en su navegador principal (así podrá imprimir el informe), haga clic en el botón Examinar informe.

Validación de documentos con el validador de W3C

Dreamweaver le ayuda a crear páginas web compatibles con estándares gracias a su compatibilidad incorporada con el validador de W3C. El validador de W3C valida el cumplimiento de los estándares HTML, XHTML o XML en los documentos HTML y XML. Puede validar documentos abiertos y archivos publicados en un servidor en vivo.

Utilice el informe que se genera tras la validación para corregir los errores existentes en el archivo.

Nota:

En las preferencias de Dreamweaver, puede especificar el analizador sintáctico que desea utilizar para validar sus documentos. Esta especificación se utiliza como configuración alternativa para los casos en los que no se pueda detectar el tipo de documento (DOCTYPE) automáticamente.

Validación de un documento abierto

  1. Para abrir el panel Validación, seleccione Ventana > Resultados > Validación. Este panel muestra los resultados de la validación.

  2. Seleccione Archivo > Validar > Documento actual (W3C).

Validación de un documento en vivo

Para documentos en vivo, Dreamweaver valida el código recibido por el navegador. Este código se muestra al hacer clic con el botón derecho del ratón en el navegador y elegir la opción para ver el código fuente. La validación de documentos en vivo es especialmente útil cuando se validan páginas dinámicas con PHP, JSP, etc.

La opción Validar documento en vivo solo se activa cuando la URL de la página que se está validando comienza por http.

  1. Para abrir el panel Validación, seleccione Ventana > Resultados > Validación. Este panel muestra los resultados de la validación.

  2. Haga clic en Vista en vivo.

  3. Seleccione Archivo > Validar > Validar documento en vivo (W3C).

En el caso de los documentos en vivo, cuando se hace doble clic en un error en el panel de validación W3C, se abre una ventana independiente. La ventana muestra el código generado por el navegador y resalta la línea que contiene el error.

Personalización de la configuración de validación

  1. Para abrir el panel Validación, seleccione Ventana > Resultados > Validación.

  2. En el panel Validación W3C, haga clic en el icono de Validación W3C (reproducción). Seleccione Configuración.

  3. Seleccione un DOCTYPE para la validación si no se ha especificado un DOCTYPE explícitamente para el documento.

  4. Si no desea que se muestren errores y advertencias, borre las opciones.

  5. Haga clic en Administrar si desea eliminar las advertencias o errores que haya ocultado mediante el panel Validación W3C. Cuando quite los errores y advertencias, estos no aparecerán al seleccionar Mostrar todo en el panel Validación W3C.

  6. Seleccione No mostrar el cuadro de diálogo de notificación del validador de W3C si no desea que el cuadro de diálogo de notificación del validador de W3C se muestre al comenzar la validación.

Trabajo con informes de validación

Tras la validación, los informes de validación se muestran en el panel Validación W3C.

  • Para obtener más información sobre el error o advertencia, seleccione el error/advertencia en el panel Validación W3C. Haga clic en Más información.

  • Para guardar el informe como un archivo XML, haga clic en Guardar informe.

  • Para ver el informe completo en HTML, haga clic en Examinar informe. El informe HTML proporciona la lista completa de los errores y advertencias junto con un resumen.

  • Para saltar a la ubicación del código que contiene el error, seleccione el error en el panel Validación W3C. Haga clic en el botón Opciones y seleccione Ir a línea.

  • Para ocultar los errores y las advertencias, seleccione el error o la advertencia en cuestión. Haga clic en el botón Opciones y seleccione Ocultar error.

  • Para ver todos los errores y advertencias, incluidos los errores ocultos, haga clic en el botón Opciones. Seleccione Mostrar todo. Los errores y advertencias ocultos que haya eliminado en el cuadro de diálogo Preferencias no se incluirán.

  • Para borrar todos los resultados del panel Validación W3C, haga clic en el botón Opciones. Seleccione Borrar resultados.

Configuración de las preferencias del validador

Además del validador estándar de W3C, Dreamweaver es compatible con validadores de código externos que instale como extensiones. Cuando instale una extensión de validador externo, Dreamweaver enumerará sus preferencias en la categoría Validador de W3C del cuadro de diálogo Preferencias.

  1. Seleccione Edición > Preferencias (Windows) o Dreamweaver > Preferencias (Macintosh).
  2. Seleccione Validador de W3C en la lista Categoría de la izquierda.

  3. Seleccione las bibliotecas de etiquetas que desea utilizar para la validación.

    No puede seleccionar varias versiones de la misma biblioteca de etiquetas y del mismo idioma. Por ejemplo, si selecciona HTML 4.01, no podrá seleccionar también HTML 5. Seleccione la versión más antigua con la que desee realizar la validación. Por ejemplo, si un documento contiene código HTML 4.01 válido, el código HTML 5 también será válido.

  4. Seleccione las opciones de visualización para los tipos de errores y advertencias que desea que se incluyan en el informe del validador.
  5. Haga clic en Aplicar para aplicar los cambios y, a continuación, haga clic en Cerrar para cerrar el cuadro de diálogo Preferencias.

Creación de páginas compatibles con XHTML

Cuando crea una página, puede hacer que sea compatible con XHTML. También puede hacer que un documento HTML existente sea compatible con XHTML.

Creación de documentos compatibles con XHTML

  1. Seleccione Archivo > Nuevo.
  2. Seleccione la categoría y el tipo de página que vaya a crear.
  3. Seleccione una de las definiciones de tipo de documento XHTML (DTD) en el menú emergente DocType que aparece a la derecha del cuadro de diálogo y haga clic en Crear.

    Por ejemplo, puede hacer que un documento HTML sea compatible con XHTML seleccionando XHTML 1.0 de transición o XHTML 1.0 estricto en el menú emergente.

    Nota:

    No todas las clases de documentos pueden hacerse compatibles con XHTML.

Creación de documentos compatibles con XHTML de forma predeterminada

  1. Seleccione Edición > Preferencias o Dreamweaver > Preferencias (Mac OS X) y elija la categoría Nuevo documento.
  2. Seleccione un documento predeterminado, elija una de las definiciones de tipo de documento XHTML en el menú emergente Tipo de documento predeterminado (DTD) y haga clic en Aceptar.

    Por ejemplo, puede hacer que un documento HTML sea compatible con XHTML seleccionando XHTML 1.0 de transición o XHTML 1.0 estricto en el menú emergente.

Creación de un documento compatible con XHTML a partir de un documento HTML

  1. Abra un documento y siga uno de estos procedimientos:

    • En el caso de los documentos sin marcos, seleccione Archivo > Convertir y, a continuación, seleccione una de las definiciones de tipo de documento XHTML.

      Por ejemplo, puede hacer que un documento HTML sea compatible con XHTML seleccionando XHTML 1.0 de transición o XHTML 1.0 estricto en el menú emergente.

    • En el caso de los documentos con marcos, seleccione un marco y, después, seleccione Archivo > Convertir. A continuación, seleccione una de las definiciones de tipo de documento XHTML.

  2. Para convertir todo el documento, repita este paso con todos los marcos y con el documento de conjunto de marcos.

Nota:

No se puede convertir una instancia (copia) de una plantilla, ya que debe estar en el mismo lenguaje que la plantilla en que se basa. Por ejemplo, un documento basado en una plantilla XHTML siempre estará en XHTML, y un documento basado en una plantilla HTML no compatible con XHTML siempre será HTML y no se podrá convertir a XHTML ni a ningún otro lenguaje.

Logotipo de Adobe

Inicia sesión en tu cuenta