Guía del usuario Cancelar

Escritura y edición de código

Buscar

Última actualización el 3 may 2021

Descubra cómo trabajar en la Vista de código y sacar el máximo partido de las funciones de codificación de Dreamweaver.

En Dreamweaver hay varias maneras de trabajar con código.

Puede abrir un nuevo archivo de código mediante el cuadro de diálogo Nuevo documento y comenzar a escribir allí el código.

Creación de un nuevo archivo de código en Dreamweaver

A medida que vaya escribiendo, se mostrarán sugerencias de codificación que le ayudarán a seleccionar código y a evitar errores tipográficos. Los documentos rápidos de Dreamweaver le serán de gran utilidad y le proporcionarán ayuda con CSS cuando lo necesite.

También puede insertar código con el panel Insertar o utilizar métodos abreviados como, por ejemplo, abreviaturas de Emmet.

Si ve que copia y pega el mismo código varias veces, pruebe estas funciones para ahorrar tiempo:

El panel Fragmentos es muy útil para crear e insertar fragmentos de código con formato previo en el código.
El uso de varios cursores le permite crear y editar varias líneas de código a la vez.

Dreamweaver también proporciona un conjunto de herramientas de edición que hacen que navegar y realizar cambios en el código resulte un proceso sencillo.

Utilice la función de buscar y reemplazar de Dreamweaver para buscar etiquetas, atributos o texto en el código.
Utilice el navegador de código para desplazarse a código relacionado tanto dentro como fuera del archivo en uso. Mejor aún, utilice la función Edición rápida para editar código en archivos relacionados sin siquiera abrir el archivo en una nueva ficha.
Haga clic con el botón derecho en el código para abrir un sencillo menú contextual que le permitirá editar el código directamente.
Utilice Ajustar etiqueta para ajustar el texto dentro de las etiquetas.

Continúe leyendo para obtener más información sobre todas estas funciones del código.

Inserción de código con el panel Insertar

Sitúe el punto de inserción en el código.
Seleccione una categoría en el panel Insertar.
Haga clic en un botón del panel Insertar o seleccione un elemento de un menú emergente del panel Insertar.

Cuando haga clic en un icono, el código aparecerá inmediatamente en la página, o bien aparecerá un cuadro de diálogo donde se le solicitará información adicional para completar el código.

El número y el tipo de botones disponibles en el panel Insertar varía en función del tipo de documento actual. También depende de si utiliza la Vista de código o la vista de Diseño.

Uso del kit de herramientas de Emmet con Dreamweaver

Emmet es un complemento que permite programar y generar código HTML y CSS a gran velocidad.

Utilice abreviaturas de Emmet en la Vista de código o en el inspector de código de Dreamweaver y presione la tecla Tabulador para expandir estas abreviaturas a formato HTML o CSS.

Las abreviaturas de HTML se expanden en páginas HTML y PHP. Las abreviaturas CSS se amplían en páginas CSS, LESS, SASS y SCSS o en la etiqueta style de una página HTML.

A continuación se muestran algunos ejemplos de cómo utilizar abreviaturas de Emmet en la Vista de código. Para obtener información detallada, y para su referencia, consulte la Documentación de Emmet.

Nota:

Actualmente Dreamweaver admite abreviaturas de Emmet 1.2.2.

Ejemplo 1: Inserción de código HTML mediante Emmet

Para añadir rápidamente código HTML a una lista sin ordenar con tres elementos, abra el archivo HTML y escriba la siguiente abreviatura de Emmet en la Vista de código, dentro de <body></body>:

div>(ul>li*3>{Lorem Ipsum})+p*4>lorem

Luego, asegúrese de que el cursor se encuentra justo detrás de la abreviatura de Emmet y pulse el tabulador para ampliarla. Alternativamente, seleccione la abreviatura completa y luego pulse Intro.

La abreviatura se ampliará y mostrará el siguiente código:

<div>
    <ul>
        <li>Lorem Ipsum</li>
        <li>Lorem Ipsum</li>
        <li>Lorem Ipsum</li>
    </ul>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Saepe, voluptatum, perferendis ad impedit iste assumenda et laborum doloribus optio molestiae perspiciatis modi quaerat corrupti velit cupiditate eligendi tempora temporibus vel.</p>
    <p>Ipsa, distinctio, eveniet ad numquam libero quam doloremque culpa illo ex possimus eligendi amet nesciunt provident inventore rerum facere ea veritatis itaque? Suscipit rem asperiores excepturi sapiente enim architecto esse.</p>
    <p>Harum, ad porro molestiae corporis natus aut non fugit. Recusandae, reprehenderit, voluptate voluptas reiciendis voluptatum tempora vero vel libero facere fuga maiores ratione eaque ad illum porro dignissimos sit eos.</p>
    <p>Dignissimos, molestiae, quis ducimus ratione temporibus sed accusamus libero consequuntur ex velit maiores illum repudiandae cum! Dolorum, dolore, pariatur, incidunt in saepe laudantium consequatur provident totam vero velit nobis accusantium!</p>
</div>

Ejemplo 2: Insertar código CSS mediante Emmet

Para insertar código CSS para crear radios de bordes con prefijos de proveedor, abra su archivo CSS y escriba la siguiente abreviatura de Emmet dentro de una clase:

-bdrs

Al pulsar el tabulador, la abreviatura se amplía y muestra el siguiente código:

-webkit-border-radius: ;
 
-moz-border-radius: ;
 
border-radius: ;

Uso de comentarios de código

Un comentario es un texto descriptivo que se inserta en el código HTML para explicar el código o facilitar otra información. El texto del comentario aparece solo en la Vista de código y no se muestra en los navegadores.

Adición de comentarios al código

Para añadir comentarios, en primer lugar, escriba el texto del comentario. Después puede colocar el cursor en el punto de inserción y hacer clic el icono de inserción de la barra de herramientas para abrir el submenú Aplicar comentario.

También puede seleccionar el texto y convertirlo en un comentario. El texto seleccionado se ajustará en un bloque de comentario.

Puede añadir comentarios mediante distintas opciones de sintaxis. Seleccione la sintaxis adecuada y Dreamweaver insertará las etiquetas automáticamente. Todo lo que necesita hacer es escribir el texto del comentario.

Puede también utilizar los métodos abreviados del teclado Ctrl+/ (en Windows) o Cmd+/ (en Mac) para añadir comentarios.

Si utiliza el método abreviado de teclado sin seleccionar ningún texto, el comentario se aplicará a la línea actual. Si selecciona texto y utiliza el método abreviado del teclado, el comentario se aplicará al texto seleccionado.

Eliminación de comentarios del código

Para quitar comentarios del código, seleccione el código y haga clic en el icono Eliminar comentario, en la barra de herramientas. Puede también utilizar los métodos abreviados del teclado Ctrl-/ (en Windows) o Cmd-/ (en Mac) para eliminar comentarios.

Visualización o no de los comentarios en el código

Para pasar de mostrar a ocultar comentarios, y viceversa, en la Vista de código, simplemente presione Ctrl+/ en Windows, o Cmd+/ en Mac en el comentario o la línea seleccionados.

Uso de varios cursores para añadir o cambiar texto en varios lugares

Añada cursores en varios lugares o seleccione varias secciones de código y edítelas simultáneamente con la función de uso de varios cursores de Dreamweaver.

Nota:

La operación de copiar y pegar y la operación de buscar y reemplazar no funcionarán con varios cursores ni con varias selecciones.

Adición de varios cursores o varias selecciones

Puede agregar varios cursores de distintas maneras, según requiera.

Si desea añadir el mismo texto en varios lugares sin reemplazar nada del texto existente, añada varios cursores.

Si desea reemplazar el texto existente, puede hacer varias selecciones. Puede seleccionar líneas continuas o discontinuas de texto, o ambas, y añadirles cursores.

Para añadir varios cursores o varias selecciones en la misma columna en líneas continuas:

Mantenga pulsada la tecla Alt y, a continuación, haga clic y arrastre verticalmente. Al arrastrar verticalmente, se añaden cursores en cada una de las líneas por las cuales se arrastre.

Texto agregado en cursores en varias líneas

Para seleccionar líneas de texto continuas, presione la tecla Alt y arrastre en diagonal. Cuando se arrastra en diagonal, Dreamweaver selecciona un bloque de texto rectangular dentro de la selección.

Selección y actualización de varias líneas de texto simultáneamente

Nota:

Para añadir rápidamente cursores o incluir diversas líneas en una selección, utilice el método abreviado del teclado Mayús-Alt-Flecha arriba o Flecha abajo.

Una vez que haya añadido cursores (o seleccionado texto) en varios lugares, siga adelante y empiece a escribir.

Si tiene varios cursores, el nuevo texto se añade.

Si ha seleccionado contenido en varias líneas de texto, el texto seleccionado se sustituye por el nuevo texto que introduzca.

Para añadir varios cursores en diferentes columnas a lo largo de distintas líneas:

Para añadir cursores a líneas de texto discontinuas, simplemente presione la tecla Ctrl y haga clic en las diferentes líneas donde desee colocar el cursor.

Adición de cursores a varias líneas discontinuas de texto

Para seleccionar líneas discontinuas de texto, seleccione un texto y, a continuación, presione la tecla Ctrl (Windows) o Cmd (Mac) y continúe con otras selecciones.

Para añadir cursores al principio/final de cada línea:

Seleccione varias líneas de texto y presione las teclas de flecha hacia la izquierda o la derecha.

Para añadir cursores en líneas precedentes o siguientes para una selección:

Presione las teclas Mayús+Alt+Flecha arriba/abajo y, a continuación, presione la tecla de flecha hacia la derecha.

Para seleccionar líneas continuas y discontinuas de texto:

Puede combinar estas técnicas para seleccionar tanto vídeo continuo como diferentes líneas de texto dentro de una sola selección.

Seleccione en primer lugar las líneas discontinuas de texto y, a continuación, presione Ctrl-Alt (en Windows) o Cmd-Alt (en Mac) y arrastre para añadir un conjunto de líneas a las diversas selecciones existentes.

Selección de líneas continuas y discontinuas de texto

Obtención de ayuda con CSS en Dreamweaver con los documentos rápidos

Al trabajar con archivos CSS, LESS o SCSS en Dreamweaver, podrá obtener rápidamente más información sobre las propiedades o los valores CSS.

Coloque el cursor dentro de una propiedad o un valor y presione Ctrl+K; Dreamweaver abrirá documentación desde el proyecto de documentos de la plataforma web.

Puede abrir simultáneamente varios editores y visores de documentos en línea.

Documentación de CSS dentro de Dreamweaver

Para cerrar un solo editor o visor de documentos en línea, haga clic en la "X" en la esquina superior izquierda o presione Esc con Documentos rápidos seleccionado.

Para cerrar todos los editores y documentos en línea, vuelva a colocar el cursor en el editor de código principal y presione Esc.

Análisis del código

Dreamweaver es compatible con linting (análisis del código en busca de errores potenciales) para HTML, CSS y JavaScript.

El panel Salida muestra los errores y las advertencias que linting haya encontrado. Para obtener más información, consulte Depuración de código mediante linting.

Además, Dreamweaver muestra una vista previa rápida de los errores en la columna de número de línea perteneciente a la línea que contenga un error. El número de línea se muestra en rojo para indicar que contiene errores y, cuando se coloca el puntero sobre él, aparece una breve descripción del error.

Nota: solo se muestra el primer error de la línea. Si la línea solo tiene una advertencia, se muestra la descripción de la advertencia. Si la línea contiene una advertencia y un error, solo se muestra la descripción del error.

Ajuste del texto en el código con Ajustar etiqueta

Utilice la opción Ajustar etiqueta en la Vista de código para ajustar líneas de texto específicas con una etiqueta. En la vista de diseño o la vista en vivo podrá utilizar esta función para ajustar objetos con una etiqueta.

Seleccione el texto en la Vista de código, o un objeto en la vista de diseño y, a continuación, presione Ctrl+T en el teclado.

Se abre una ventana emergente en la que podrá seleccionar varias etiquetas HTML.
Seleccione una etiqueta en el menú.

Si está trabajando en la Vista de código, el texto seleccionado se ajustará con la etiqueta. Si está trabajando en la vista de diseño o en vivo, el objeto seleccionado se ajustará con la etiqueta.

Edición de código con el menú contextual Programación

Utilice el menú contextual de Dreamweaver para realizar modificaciones rápidas en el código.

Para acceder al menú contextual, haga clic con el botón derecho (en Windows) o Comando y clic (en Mac). Dispone de las siguientes opciones:

Edición rápida

Haga clic en esta opción para entrar en el modo de edición rápida. En este modo, Dreamweaver proporciona código específico según contexto y herramientas en línea para que pueda obtener rápidamente la sección de código que necesite. Para más información, consulte Edición rápida.

Cortar, copiar y pegar

Haga clic en estas opciones para cortar, copiar y pegar texto rápidamente, sin tener que acceder al menú Edición.

Buscar y reemplazar, Buscar siguiente y Buscar anterior

Haga clic en estas opciones para encontrar y reemplazar texto con rapidez, sin necesidad de acceder al menú Buscar.

Crear nuevo fragmento

Utilice esta opción para crear fragmentos de código que pueda guardar y usar posteriormente. Seleccione el código y haga clic en Crear nuevo fragmento para convertir en fragmento el código seleccionado. Para más información, consulte Uso de fragmentos de código.

Abrir archivo relacionado

Haga clic con el botón derecho sobre una etiqueta de vínculo o de script y haga clic en Abrir archivo relacionado para abrir el archivo.

Adjuntar hoja de estilos

Adjunte una hoja de estilos CSS existente a su página.

Selección

El submenú Selección incluye diversas opciones de edición de código que se pueden utilizar en una sección de código seleccionada, como mostrar u ocultar una línea y bloquear comentarios, expandir y contraer una selección, convertir CSS en línea a reglas, mover reglas CSS e imprimir código.

Navegador de código

Haga clic en esta opción para navegar a las fuentes de código relacionadas, como reglas CSS internas y externas, server-side includes, archivos JavaScript externos, archivos de plantillas principales, archivos de biblioteca y archivos de código fuente iframe. Para más información, consulte Navegación al código relacionado.

Herramientas de sugerencias para el código

El submenú Herramientas de sugerencias para el código le ofrece el selector de color, el navegador de URL y las herramientas de la lista de fuentes.

Aplicación de sangría a los bloques de código

A medida que escribe y edita código en la Vista de código o en el inspector de código, puede cambiar el nivel de sangría de un bloque o línea de código seleccionados, desplazándolo una tabulación hacia la derecha o hacia la izquierda.

Aplicación de sangría al bloque de código seleccionado

Presione la tecla Tab o
Presione Ctrl + ]; o
Seleccione Editar > Aplicar sangría al código.

Anulación de la sangría aplicada al bloque de código seleccionado

Presione Mayús +Tab; o
Presione Ctrl+[ o
Seleccione Editar > Anular sangría de código.

Navegación al código relacionado

El navegador de código muestra una lista de fuentes de código relacionadas con la selección actual de la página. Utilícelo para navegar a las fuentes de código relacionadas, como pueden ser reglas CSS internas y externas, server-side includes, archivos JavaScript externos, archivos de plantilla padre, archivos de biblioteca y archivos de origen de iframe. Al hacer clic en un vínculo en el navegador de código, Dreamweaver abre el archivo que contiene el código correspondiente. El archivo aparece en el área de archivos relacionados, en el caso de que esté activado. Si no están activados los archivos relacionados, Dreamweaver abrirá el archivo seleccionado como documento independiente en la ventana de documento.

Al hacer clic en una regla CSS en el navegador de código, Dreamweaver le llevará directamente a la regla correspondiente. Si se trata de una regla interna del archivo, Dreamweaver mostrará la regla en una vista dividida. Si se trata de una regla CSS externa, Dreamweaver abrirá el archivo y mostrará la regla en el área de archivos relacionados situada sobre el documento principal.

Puede acceder al navegador de código desde las vistas Diseño, Código y Dividida, así como desde el inspector de código.

Para ver un vídeo de introducción al uso del Navegador de código, elaborado por el equipo de ingeniería de Dreamweaver, consulte www.adobe.com/go/dw10codenav.

Para ver un tutorial en vídeo acerca del trabajo con la Vista en vivo, archivos relacionados y el navegador de código, consulte www.adobe.com/go/lrvid4044_dw.

Apertura del navegador de código

Mantenga pulsada la tecla Alt (Windows) o Comando+Opción (Macintosh) y haga clic en cualquier lugar de la página. El navegador de código muestra vínculos con el código que afecta al área en la que ha hecho clic.

Haga clic fuera del navegador de código para cerrarlo.

Nota:

También puede abrir el navegador de código haciendo clic en el indicador de navegador de código . Este indicador aparece cerca del punto de inserción de la página cuando el ratón ha permanecido inactivo durante más de 2 segundos.

Navegación al código mediante el navegador de código

Abra el navegador de código desde el área de la página que le interesa.
Haga clic en la parte del código a la que desea ir.

El navegador de código agrupa fuentes de código relacionadas por archivo y enumera los archivos alfabéticamente. Supongamos, por ejemplo, que hay reglas CSS en tres archivos externos que afectan a la selección del documento. En este caso, el navegador de código enumerará estos tres archivos y las reglas CSS que afectan a la selección. Por lo que respecta a las reglas CSS relacionadas con una selección determinada, el navegador de código funciona como el panel Estilos CSS en Modo actual.

Nota:

Al pasar el puntero por encima de vínculos con reglas CSS, el navegador de código muestra descripciones de las propiedades de la regla. Estas descripciones son útiles para diferenciar muchas reglas que compartan el mismo nombre.

Desactivación del indicador del navegador de código

Abra el navegador de código.
Seleccione Desactivar indicador en la esquina inferior derecha.
Haga clic fuera del navegador de código para cerrarlo.

Para reactivar el indicador del navegador de código, mantenga pulsada la tecla Alt (Windows) o Comando + Opción (Macintosh) y haga clic para abrir el navegador de código y anule la selección de la opción Desactivar indicador.

Desplazamiento a una función de JavaScript o VBScript

En la Vista de código y en el inspector de código podrá ver una lista de todas las funciones de JavaScript o VBScript en el código y desplazarse a cualquiera de ellas.

Abra el documento en Vista de código (Ver > Código) o en el inspector de código (Ventana > Inspector de código).
Siga uno de estos procedimientos:
- En la Vista de código, haga clic con el botón derecho del ratón (Windows) o pulse la tecla Control y haga clic (Macintosh) en cualquier punto de la Vista de código y, seguidamente, seleccione el submenú Funciones en el menú contextual.
Nota:

El submenú Funciones no aparece en la vista de Diseño.

Las funciones JavaScript o VBScript que haya en el código aparecerán en el submenú.

Nota:

Para ver las funciones clasificadas por orden alfabético, haga clic con el botón derecho del ratón mientras pulsa la tecla Control (Windows) o mantenga pulsadas las teclas Opción y Control y haga clic (Macintosh) en la Vista de código y, a continuación, seleccione el submenú Funciones.
- En el inspector de código, haga clic en el botón Navegación por el código ({ }), en la barra de herramientas.
Seleccione el nombre de la función a la que desea desplazarse.

Extracción de JavaScript

JavaScript Extractor (JSE) elimina la mayor parte o la totalidad del código JavaScript del documento de Dreamweaver, lo exporta a un archivo externo y vincula el archivo externo al documento. JSE también puede eliminar del código manejadores de eventos, como onclick y onmouseover, y adjuntar de forma oportuna al documento el código JavaScript asociado a dichos manejadores.

Tenga en cuenta las siguientes limitaciones de JavaScript Extractor antes de utilizarlo:

JSE no extrae etiquetas de script del cuerpo del documento (salvo en el caso de widgets de Spry). Existe la posibilidad de que, al externalizar estos scripts, se produzcan resultados inesperados. De manera predeterminada, Dreamweaver enumera estos scripts en el cuadro de diálogo Extraer JavaScript, pero no los selecciona para su extracción. (Si lo desea, puede seleccionarlos manualmente).
JSE no extrae el código JavaScript de regiones editables de archivos .dwt (plantillas de Dreamweaver), de regiones no editables de instancias de plantillas ni de elementos de biblioteca de Dreamweaver.
Tras extraer el código JavaScript mediante la opción Extraer código JavaScript y adjuntar discretamente, ya no podrá editar comportamientos de Dreamweaver en el panel Comportamientos. Dreamweaver no puede inspeccionar y rellenar el panel Comportamientos con comportamientos que se han adjuntado discretamente.
No podrá deshacer los cambios después de cerrar la página. No obstante, podrá deshacer los cambios mientras permanezca en la misma sesión de edición. Seleccione Editar > Deshacer Extraer JavaScript para deshacer los cambios.
Es posible que determinadas páginas complejas no funcionen de la forma esperada. Tenga cuidado al extraer JavaScript de páginas con document.write() en el cuerpo y variables globales.

Para ver un vídeo de introducción elaborado por el equipo de ingeniería de Dreamweaver sobre la compatibilidad con JavaScript que ofrece Dreamweaver, consulte www.adobe.com/go/dw10javascript.

Para utilizar JavaScript Extractor:

Abra una página que contenga JavaScript.
Haga clic en Herramientas > Extraer JavaScript.
En el cuadro de diálogo Extraer JavaScript, modifique las opciones predeterminadas si es preciso.
- Seleccione Extraer JavaScript solamente si desea que Dreamweaver traslade todo el código JavaScript a un archivo externo y que haga referencia a dicho archivo en el documento actual. Esta opción deja en el documento los manejadores de eventos, como onclick y onload, y mantiene visibles los comportamientos en el panel Comportamientos.
- Seleccione Extraer código JavaScript y adjuntar discretamente si desea que Dreamweaver 1) traslade el código JavaScript a un archivo externo y haga referencia a él en el documento actual, y 2) elimine los manejadores de eventos del código HTML y los inserte en tiempo de ejecución mediante JavaScript. Cuando seleccione esta opción, no podrá editar los comportamientos en el panel Comportamientos.
- En la columna Editar, anule la selección de aquellas modificaciones que no desee realizar o seleccione modificaciones que Dreamweaver no haya seleccionado de manera predeterminada.
  De manera predeterminada, Dreamweaver enumera, pero no selecciona, las siguientes modificaciones:
  
  Bloques de script de la sección head del documento que contengan llamadas a document.write() o document.writeln().
  
  Bloques de script de la sección head del documento que contengan firmas de función relacionadas con el código de manipulación de EOLAS, del que se tiene constancia que utiliza document.write().
  
  Bloques de script de la sección head del documento, a no ser que los bloques solo contengan constructores de widget de Spry o de conjuntos de datos de Spry.
- Dreamweaver asigna automáticamente ID a los elementos que carezcan de ella. Si no desea estas ID, puede cambiarlas editando los cuadros de texto de ID.
Haga clic en OK.

El cuadro de diálogo de resumen proporciona un resumen de las extracciones. Revise las extracciones y haga clic en Aceptar.
Guarde la página.

Dreamweaver crea un archivo SpryDOMUtils.js, además de otro archivo que contiene el código JavaScript extraído. Dreamweaver guarda el archivo SpryDOMUtils.js en una carpeta denominada SpryAssets, incluida en el sitio, y guarda el otro archivo al mismo nivel que la página de la que se ha extraído el código JavaScript. No olvide cargar ambos archivos dependientes en el servidor web cuando cargue la página original.

Edición rápida

En lugar de saturar su entorno de programación con muchos paneles e iconos, el modo de edición rápida de Dreamweaver coloca código específico según contexto y herramientas en línea para que pueda llegar rápidamente a la sección de código que necesita.

Para entrar en el modo de edición rápida:

Haga clic con el botón derecho del ratón en un fragmento de código y seleccione Edición rápida en el menú contextual que aparece.
Presione Ctrl + E (en Windows) o Cmd + E (en Mac).

Uso del modo de edición rápida con archivos HTML

En un archivo HTML, coloque su cursor dentro de una clase o un atributo de ID (nombre o valor) o en el nombre de la etiqueta. Edición rápida le muestra todas las reglas CSS, SCSS y LESS coincidentes en su proyecto. Puede editar estas reglas directamente en línea, sin necesidad de salir del contexto del archivo HTML.

Cuando coincidan varias reglas, desplácese entre ellas mediante la lista de la derecha (o utilice Alt-Flecha arriba/abajo).

Para crear una regla CSS directamente desde el editor en línea, haga clic en Nueva regla o presione Ctrl-Alt-N (en Windows) o Cmd-Opc-N (en Mac).

Uso del modo de edición rápida con archivos JavaScript

En un archivo JavaScript, coloque el cursor en el nombre de una función. Edición rápida le muestra el cuerpo de la función (incluso si está presente en otros archivos a los que una declaración require() haga referencia).

Uso del modo de edición rápida con archivos CSS, SCSS o LESS

Cuando se abre Edición rápida con el cursor dentro de un valor de color, se puede acceder al selector de color y modificar rápidamente los colores utilizados en el código CSS.

Acceso al selector de color en un archivo CSS

En un archivo CSS, LESS o SCSS, coloque el cursor en una función de temporización de transición (transition-timing-function) cubic-bezier() o steps(); Edición rápida muestra un editor gráfico de la curva de transición.

Las funciones de tiempo predefinidas ease, ease-in, ease-out, ease-in-out, step-start y step-end son también puntos de inicio válidos.

Manipulación de una curva Bezier con Edición rápida

Refactorización de código

La refactorización de código es el proceso de reestructurar código informático existente sin cambiar su comportamiento externo, de manera que el código se vuelva más legible, fácil de mantener y más sencillo de entender y depurar. Se utiliza cuando se tiene código duplicado, métodos largos o clases de gran tamaño en el código. La depuración de código permite ahorrar tiempo gracias a una serie de pequeñas funciones y a una sustitución adecuada.

Con la refactorización de JavaScript, puede cambiar los nombres a funciones y definir el ámbito de una variable para poder llamarla desde dentro de un bloque de código en el que está definida.

Nota:

El código de refactorización ahora está disponible únicamente en archivos .js.

Refactorización de JavaScript

Puede refactorizar código en documentos html, php y JavaScript. Al hacer clic con el botón derecho en el área de código de Dreamweaver, la opción Refactorizar aparece en el menú emergente. Refactorizar dispone de las siguientes opciones:

Cambiar nombre
Extraer a variable
Extraer a función
Envolver en Try Catch
Envolver con condición
Convertir a función flecha
Crear Getters/Setters

Para comprender la funcionalidad de cada opción de refactorización, consulte las siguientes secciones:

Cambiar nombre

Cambiar nombre se utiliza para cambiar todas las apariciones de un nombre de variable o de función en un determinado código JavaScript. La selección de una variable mediante clic y arrastre no es necesaria para refactorizar.

Realice los pasos siguientes para cambiar nombres en JavaScript:

Seleccione o coloque el cursor de texto en el código que requiera un cambio.
Haga clic con el botón derecho en el texto seleccionado y, a continuación, seleccione Refactorizar > Cambiar nombre. También puede utilizar los métodos abreviados del teclado Ctrl + Alt + R en el sistema operativo Windows o Comando + opción + R en macOS, para cambiar el nombre.
En la pantalla aparecerá una vista con varios cursores, que le permitirá cambiar todas las apariciones de la variable. Con las mejoras de la función de varios cursores, queda seleccionada la aparición siguiente de la selección actual. Reescriba un único nombre para la variable o función, para reemplazar al nombre actual.

Antes: Cambiar nombre

Después: Cambiar nombre

Extraer a variable

Utilice Extraer a variable para reemplazar una expresión por una variable, variable local o constantes en JavaScript seleccionando una expresión y haciendo clic con el botón derecho en ella. A continuación, selecione Refactorizar > Extraer a variable. También puede utilizar Ctrl + Alt + V en el sistema operativo Windows y Cmd + Alt + V en macOS.

Extraer a función

Use Extraer a función para reemplazar una expresión de las llamadas de una función dentro de un parámetro. El valor predeterminado del nuevo parámetro puede inicializarse dentro del cuerpo de la función o pasarse a través de llamadas a funciones.

Realice los pasos siguientes para refactorizar usando Extraer a función:

Seleccione cualquier expresión o conjunto de expresiones en JavaScript.

Selección de una expresión
Haga clic con el botón derecho y seleccione Refactorizar > Extraer a función. También puede utilizar Ctrl + Alt + M, en el sistema operativo Windows, o Cmd + Alt + M en el sistema operativo Mac.
Seleccione el ámbito de destino para extraer la función en el menú emergente que se muestra en la pantalla.

Tipos de ámbito
El resultado varía según el ámbito de destino que se haya seleccionado. Por ejemplo, el ámbito de destino puede ser un constructor, la clase seleccionada o una función global.

Las características de Extraer a función son las siguientes:
- Identifica los parámetros para pasarlos en función de los identificadores disponibles en la selección o en el ámbito extraído.
- Identifica los parámetros de retorno a devolver desde la función, basándose en los identificadores cuyos valores se cambian en la selección.
- También crea una función con un nombre exclusivo.
Las siguientes capturas de pantalla muestran la salida en función del correspondiente ámbito de destino que haya seleccionado el usuario.
Constructor

Clase

Global

Envolver en try catch

Utilice Envolver en Try Catch para una excepción de un bloque de código que aparezca como un error después de compilar el programa. Esta función envuelve el bloque de código en un bloque try catch. Este bloque de código queda marcado como excepción mientras se ejecuta el programa.

Seleccione o coloque el cursor en el código, haga clic con el botón derecho y seleccione Refactorizar > Envolver en Try Catch. Si se coloca el cursor en una posición, encuentra las sentencias circundantes y, de no haberlas, comprueba si el código consta de sentencias o no. Si hay sentencias, entonces envuelve el código en un bloque Try Catch.

Antes: Envolver en try catch — Antes: Envolver en Try Catch

Después: Envolver en try catch — Después: Envolver en Try Catch

Envolver con condición

Use Envolver con condición para una expresión de un código para compilarla solo si se da una condición específica.

Seleccione una expresión en el código, haga clic con el botón derecho y seleccione Refactorizar > Envolver con condición.

Antes: Envolver con condición — Antes: Envolver con Condición

Después: Envolver con condición — Después: Envolver con Condición

Convertir a función flecha

Una función flecha es una expresión que no tiene sus propias expresiones de función, como this, arguments, super, or new.target. Estas expresiones de función son para expresiones no de método y no se pueden utilizar como constructor.

Sitúe el cursor en una función, haga clic con el botón derecho y seleccione Refactorizar > Convertir a función flecha.

Antes: Convertir a función flecha — Antes: Convertir a Función flecha

Después: Convertir a función flecha — Después: Convertir a Función flecha

Nota:

Si la sentencia seleccionada tiene un parámetro, en ese caso la estructura del parámetro aparecerá como => {statements}.
Si la sentencia seleccionada tiene cero parámetros o más de uno, como param (param1, param2), en ese caso la estructura de parámetros aparecerá como param (param1, param2) => {statements}.

Crear getters/setters

En JavaScript, un setter, o definidor, se puede utilizar para ejecutar una función en la que una propiedad especificada requiera un cambio. Los setters, o definidores, suelen utilizarse junto con getters, o captadores, para crear un tipo de seudopropiedad. No se puede crear un setter, o definidor, para una propiedad que tenga un valor real.

Sitúe el cursor en un miembro de una expresión de objeto, haga clic con el botón derecho y seleccione Refactorizar > Crear Getters/Setters.

Antes: Crear getters/setters — Antes: Crear Getters/Setters

Después: Crear getters/setters — Después: Crear Getters/Setters

Sugerencias para solución de problemas

En la tabla siguiente se ofrecen sugerencias de solución de problemas para los mensajes de error correspondientes que aparecen en pantalla, debido a la selección incorrecta de código:

Nombre de función	Mensaje de error	Sugerencia de solución de problemas
Cambiar nombre	No hay expresión en la posición dada	Coloque el cursor sobre un nombre de variable o función, o antes.
Extraer a variable	La selección no forma una expresión	Seleccione una expresión en el código antes de refactorizar el código.
Extraer a función	El bloque seleccionado debería representar un conjunto de declaraciones o una expresión	Asegúrese de seleccionar un bloque con un conjunto de sentencias o una expresión.
Envolver en Try Catch	Seleccione un código válido para envolver en un bloque Try-catch	Asegúrese de seleccionar algún código antes de aplicar la opción de refactorización try catch.
Envolver con condición	Seleccione un código válido para envolver en un bloque con condición	Asegúrese de seleccionar una expresión antes de aplicar la opción refactorización Envolver con condición.
Convertir a función flecha	Coloque el cursor dentro de una expresión de función	Asegúrese de colocar el cursor dentro de una expresión de función antes de aplicar la opción de refactorización.
Crear Getters/Setters	Coloque el cursor en un miembro de una expresión de objeto	Asegúrese de colocar el cursor en un miembro de una expresión de objeto antes de aplicar la opción de refactorización de crear getters/setters

Buscar y reemplazar texto

Puede utilizar las funciones de buscar y reemplazar de Dreamweaver, para buscar cualquier tipo de texto, código o espacio en blanco, en su sitio o en la carpeta.

También puede buscar en todo el contexto, o puede limitar la búsqueda a solo el texto que se presente en la Vista de diseño o únicamente al código.

También puede utilizar potentes algoritmos de coincidencia de patrones (expresiones regulares) para las operaciones sofisticadas de buscar y reemplazar.

Una vez encontrado el texto, también puede optar por reemplazarlo por el texto, código o espacio en blanco que haya especificado.

Para obtener más información, consulte Buscar y reemplazar texto.

Vista previa de imágenes y colores en la Vista de código

Tras insertar el código correspondiente para imágenes y colores, podrá obtener una vista previa de ellos en la Vista de código.

Vista previa de imágenes

Pase el ratón por encima de cualquier dirección URL de una imagen para obtener la vista previa de esa imagen en la Vista de código. Puede obtener una vista previa de las imágenes llamadas de las siguientes formas:

url();
data-uri()
Valor del atributo src de la etiqueta img

Dreamweaver también muestra vistas previas de imágenes alojadas de forma remota.

Si Dreamweaver no puede mostrar vistas previas de rutas remotas, aparecerá el mensaje "No se puede cargar la imagen".

Puede obtener vistas previas de los tipos de imágenes siguientes:

JPEG
jpg
PNG
GIF
SVG

Vista previa de imágenes en la Vista de código

Vista previa de colores

Pase el ratón por encima de los valores de color para obtener una vista previa de los mismos en la Vista de código. Los formatos compatibles son:

Valores hexadecimales de color de 3 y 6 dígitos: #ff0000;
RGB: rgb (0, 0, 0);
RGBA: rgba (0, 255, 228, 0,5);
HSL: hsl (120, 100 %, 50 %);
HSLA: hsla (120, 60 %, 70 %, 0,3);
Nombres de colores predeterminados: oliva, verde azulado, rojo, etc.

Vista previa de colores está disponible en todos los tipos de documentos que admitan los formatos de color mencionados anteriormente.

Vista previa de colores en la Vista de código

Haga clic con el botón derecho del ratón en un valor y seleccione Edición rápida para abrir el selector de color y elegir un color deferente.

Nota:

Para desactivar las vistas previas de imágenes y colores, desactive la opción Vista > Opciones de Vista de código > Vista previa de activos.

Impresión de código

Puede imprimir el código para editarlo sin conexión a Internet, archivarlo o distribuirlo.

Abra una página en la vista de Código.
Seleccione Archivo > Imprimir código.
Especifique las opciones de impresión y haga clic en Aceptar (Windows) o en Imprimir (Macintosh).

Adobe

Obtén ayuda de forma más rápida y sencilla

¿Nuevo usuario?