Sitúe el punto de inserción en el código.
Última actualización el
27 abr. 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.
Hay varias formas de trabajar con código en Dreamweaver.
Puedes abrir un nuevo archivo de código utilizando el cuadro de diálogo Nuevo documento y empezar a escribir tu código.
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. Obtén ayuda con CSS cuando la necesites usando los Documentos rápidos de Dreamweaver.
También puedes insertar código utilizando el panel Insertar o usar métodos abreviados de código como las abreviaciones Emmet.
Si te encuentras copiando y pegando el mismo fragmento de código varias veces, entonces prueba estas funciones que ahorran tiempo:
- El panel Fragmentos es invaluable para crear e insertar rápidamente fragmentos de código preformateados en tu código.
- Los cursores múltiples te permiten crear y editar múltiples líneas de código al mismo tiempo.
Dreamweaver también proporciona un sólido conjunto de herramientas de edición que hacen que navegar y realizar cambios en tu código sea un proceso fluido.
- Usa la función 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. Aún mejor, usa la función Edición rápida para editar código en archivos relacionados sin siquiera abrir el archivo en una nueva pestaña.
- Haz clic derecho en el código para mostrar un menú contextual simple y relevante que te permite editar el código directamente.
- Usa Wrap Tag para envolver texto en etiquetas.
Sigue leyendo para obtener más información sobre todas estas funciones de código.
Inserción de código con el panel Insertar
Seleccione una categoría en el panel Insertar.
Haz clic en un botón del panel Insertar o selecciona un elemento
de un menú emergente del panel Insertar.
Cuando haces clic en un icono, el código aparece en tu página inmediatamente, o aparece un cuadro de diálogo solicitando más información 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 expanden en páginas CSS, LESS, SASS, SCSS, o dentro de la etiqueta de estilo en 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 información detallada y de referencia, consulta la documentación de Emmet.
Nota
Dreamweaver actualmente admite abreviaturas Emmet 1.2.2.
Ejemplo 1: Insertar código HTML usando Emmet
Para añadir rápidamente código HTML para una lista no ordenada con tres elementos, abre el archivo HTML y escribe la siguiente abreviación 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, selecciona toda la abreviación y luego presiona Intro.
La abreviatura se expande al 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 usando Emmet
Para insertar código CSS para crear radio de borde con prefijos de proveedor, abre tu archivo CSS y escribe la siguiente abreviación Emmet dentro de una clase:
-bdrs
Cuando presionas Tab, la abreviatura se expande al 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. Luego puedes colocar el cursor en el punto de inserción y hacer clic en el icono Insertar 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 incluye en un bloque de comentarios.
Puede añadir comentarios mediante distintas opciones de sintaxis. Seleccione la sintaxis adecuada y Dreamweaver insertará las etiquetas automáticamente. Solo necesitas introducir el texto de tu comentario.
También puedes usar los métodos abreviados de teclado Ctrl+/ (en Windows) o Cmd+/ (en Mac) para agregar comentarios.
Si utiliza el método abreviado de teclado sin seleccionar ningún texto, el comentario se aplicará a la línea actual. Si seleccionas texto y usas el método abreviado de teclado, el comentario se aplica 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. También puedes usar los métodos abreviados de teclado Ctrl-/ (en Windows) o Cmd-/ (en Mac) para eliminar comentarios.
Visualización o no de los comentarios en el código
Para alternar entre mostrar y ocultar comentarios en la vista de código, simplemente pulsa Ctrl+/ en Windows o Cmd+/ en Mac para el comentario o línea seleccionada.
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
Las operaciones de copiar y pegar, y buscar y reemplazar no funcionan con múltiples cursores o múltiples selecciones.
Adición de varios cursores o varias selecciones
Puedes agregar múltiples cursores de diferentes maneras según tus requisitos.
Si quieres agregar el mismo texto en múltiples lugares sin reemplazar ningún texto existente, agrega múltiples cursores.
Si desea reemplazar el texto existente, puede hacer varias selecciones. Puedes seleccionar líneas de texto continuas, o líneas de texto discontinuas, o ambas, y agregarles cursores.
Para agregar múltiples cursores o múltiples selecciones en la misma columna en líneas continuas:
Mantenga pulsada la tecla Alt y, a continuación, haga clic y arrastre verticalmente. Cuando arrastras verticalmente, se agregan cursores a cada línea que atraviesas.
Para seleccionar líneas de texto continuas, presione la tecla Alt y arrastre en diagonal. Cuando arrastras diagonalmente, Dreamweaver selecciona un bloque rectangular de texto dentro de esa selección.
Nota
Para agregar rápidamente cursores o incluir múltiples líneas en una selección, usa el método abreviado de teclado Shift-Alt-Arriba o Abajo.
Una vez que hayas agregado los cursores (o seleccionado texto) en múltiples lugares, empieza a escribir.
Si tienes múltiples cursores, entonces se agrega nuevo texto.
Si has seleccionado contenido en múltiples líneas de texto, entonces el texto seleccionado se reemplaza con el nuevo texto que ingreses.
Para agregar múltiples cursores en diferentes columnas en varias líneas:
Para agregar cursores a líneas de texto discontinuas, simplemente pulsa la tecla Ctrl y haz clic en las diferentes líneas donde quieras colocar el cursor.
Para seleccionar líneas de texto discontinuas, selecciona algo de texto, luego pulsa la tecla Ctrl (Windows) o la tecla Cmd (Mac) y continúa haciendo selecciones adicionales.
Para agregar cursores al principio o final de cada línea:
Selecciona múltiples líneas de texto y pulsa las teclas de flecha izquierda o derecha.
Para agregar cursores en líneas anteriores o siguientes para la selección:
Pulsa las teclas Shift+Alt+Arriba/Abajo y luego pulsa la tecla de flecha derecha.
Para seleccionar líneas de texto continuas y discontinuas:
Puedes combinar estas técnicas para seleccionar tanto líneas continuas como separadas de texto dentro de una sola selección.
Primero selecciona las líneas de texto discontinuas, luego pulsa Ctrl-Alt (en Windows) o Cmd-Alt (en Mac) y arrastra para agregar un conjunto de líneas a las múltiples selecciones existentes.
Obtención de ayuda con CSS en Dreamweaver con los documentos rápidos
Mientras trabajas con archivos CSS, LESS o SCSS en Dreamweaver, puedes obtener rápidamente más información sobre propiedades de CSS o valores.
Coloca el cursor dentro de una propiedad o valor y presiona Ctrl + K, Dreamweaver abre documentación del proyecto Web Platform Docs.
Puedes abrir simultáneamente múltiples editores en línea y visualizadores de documentos.
Para cerrar un solo editor en línea o visualizador de documentos, haz clic en la "X" en la parte superior izquierda o presiona Escape mientras Quick Docs esté en enfoque.
Para cerrar todos los editores en línea y documentos, coloca el cursor de nuevo en el editor de código principal y presiona Escape.
Analizar código
Dreamweaver admite linting (análisis de código para detectar posibles errores) 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 pasas el cursor sobre él, se muestra 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 Diseño o Live, puedes usar esta función para envolver objetos con una etiqueta.
Selecciona texto en la vista Código o un objeto en la vista Diseño, y presiona Ctrl+T en tu teclado.
Aparece un elemento emergente que te permite seleccionar entre varias etiquetas HTML.
Selecciona una etiqueta del menú.
Si está trabajando en la Vista de código, el texto seleccionado se ajustará con la etiqueta. Si estás trabajando en la vista Diseño o Live, el objeto seleccionado se envuelve con la etiqueta.
Editar código con el menú contextual Coding
Usa el menú contextual de Dreamweaver para editar rápidamente tu código.
Para acceder al menú contextual, haga clic con el botón derecho (en Windows) o Comando y clic (en Mac). Las siguientes opciones están disponibles para tu uso:
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, consulta Quick edit.
Cortar, copiar y pegar
Haz 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
Haz clic en estas opciones para buscar y reemplazar texto rápidamente sin tener que 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
Haz clic con el botón derecho sobre un enlace/etiqueta de Script y haz clic en abrir archivo relacionado para abrir el archivo.
Adjuntar hoja de estilos
Adjunta una hoja de estilo CSS existente a tu página.
Selección
El submenú Selección incluye varias opciones de edición de código que se pueden usar en una parte seleccionada del código, como conmutar comentarios de línea y bloque, expandir y contraer 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 de código pone al alcance de tus dedos el selector de color, el explorador de URL y las herramientas de lista de fuentes.
Aplicación de sangría a los bloques de código
Mientras escribes y editas código en la vista Código o el inspector de Código, puedes cambiar el nivel de sangría de un bloque o línea de código seleccionado, desplazándolo hacia la derecha o izquierda una tabulación.
Aplicación de sangría al bloque de código seleccionado
- Presiona Tab, o
- Presiona Ctrl+], o
- Seleccione Edición > Aplicar sangría al código.
Anular la sangría del bloque de código seleccionado
- Presiona Mayús+Tab, o
- Presiona Ctrl+[, o
- Seleccione Edición > 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.
Puedes acceder al Code Navigator desde las vistas Diseño, Código y Dividir, y también desde el inspector de código.
Para obtener una descripción general en vídeo del equipo de ingeniería de Dreamweaver sobre cómo trabajar con el Code Navigator, consulta www.adobe.com/go/dw10codenav.
Para un tutorial en vídeo sobre cómo trabajar con Vista en vivo, archivos relacionados y el Code Navigator, consulta www.adobe.com/go/lrvid4044_dw.
Apertura del navegador de código
Alt+clic (Windows) o Comando+Opción+clic (Macintosh) en cualquier lugar de la página.El Code Navigator muestra enlaces al código que afecta al área en la que hiciste clic.
Haga clic fuera del navegador de código para cerrarlo.
Nota
También puedes abrir el Navegador de código haciendo clic en el indicador del Navegador de código 
.Este
indicador aparece cerca del punto de inserción en tu página cuando el ratón
ha estado sin actividad durante 2 segundos.
Navegar al código con el Code Navigator
Abrir el Code Navigator desde el área de la página que te 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 sugerencias son útiles cuando quieres distinguir entre muchas reglas que comparten un 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 volver a habilitar el indicador del Code Navigator, Alt+Clic (Windows) o Comando+Opción+Clic (Macintosh) para abrir el Code Navigator y deseleccionar la opción Deshabilitar indicador.
Ir a una función JavaScript o VBScript
En la vista Código y el inspector de código, puedes ver una lista de todas las funciones JavaScript o VBScript en tu código y saltar a cualquiera de ellas.
Ver el documento en vista de código (Ver > Código) o el Inspector de código (Ventana > Inspector de código).
Siga uno de estos procedimientos:
En la vista Código, haga clic con el botón derecho del ratón (Windows) o presione la tecla Control y haga clic (Macintosh) en cualquier punto de la vista Código y, seguidamente, seleccione el submenú Funciones en el menú contextual.
Nota
El submenú Funciones no aparece en la vista 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 presiona la tecla Control (Windows) o mantenga presionadas las teclas Opción y Control y haga clic (Macintosh) en la vista Código y, a continuación, seleccione el submenú Funciones.
- En el inspector de código, haz clic en el botón navegación de código ({ }) en la barra de herramientas.
Selecciona un nombre de función para saltar a la función en tu
código.
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.
Ten en cuenta las siguientes limitaciones del Extractor JavaScript antes de usarlo:
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 información general en vídeo del equipo de ingeniería de Dreamweaver sobre la compatibilidad con JavaScript en Dreamweaver, consulta www.adobe.com/go/dw10javascript.
Para utilizar JavaScript Extractor:
Abrir una página que contenga JavaScript.
Haz clic en Herramientas > Externalizar JavaScript.
En el cuadro de diálogo Externalizar JavaScript, edite las selecciones predeterminadas si es necesario.
Selecciona Solo externalizar JavaScript si quieres que Dreamweaver mueva cualquier JavaScript a un archivo externo y haga referencia a ese archivo en el documento actual. Esta opción deja controladores de eventos como onclick y onload en el documento y deja los comportamientos visibles en el panel Comportamientos.
Selecciona Externalizar JavaScript y adjuntar de forma no intrusiva si quieres que Dreamweaver 1) mueva JavaScript a un archivo externo y haga referencia a él en el documento actual, y 2) elimine controladores de eventos del HTML y los inserte en tiempo de ejecución usando JavaScript. Cuando seleccionas esta opción, ya no puedes editar comportamientos en el panel Comportamientos.
En la columna Editar, anula la selección de cualquier edición que no quieras hacer, o selecciona ediciones que Dreamweaver no seleccionó por defecto.
Por defecto, Dreamweaver enumera pero no selecciona las siguientes ediciones:
Bloques de script en el encabezado del documento que contienen llamadas a document.write() o document.writeln().
Bloques de script en el encabezado del documento que contienen firmas de función relacionadas con código de gestión de EOLAS, que se sabe que usa document.write().
Bloques de Script en el cuerpo del documento, a menos que los bloques contengan solo constructores de widget Spry o conjunto de datos Spry.
Dreamweaver asigna automáticamente ID a elementos que aún no tienen ID.Si no te gustan estos ID, puedes cambiarlos editando los cuadros de texto de ID.
Haga clic en OK.
El cuadro de diálogo de resumen proporciona un resumen de 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 tu entorno de codificación con muchos panels e iconos, el modo Edición rápida en Dreamweaver pone código y herramientas específicas del contexto en línea permitiéndote llegar rápidamente a la sección de código que necesitas.
Puedes entrar al modo Edición rápida:
- Haciendo clic derecho en un fragmento de código y seleccionar Edición rápida del menú contextual que aparece
- Pulsa 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. Puedes editar estas reglas directamente en línea, sin salir nunca del contexto del archivo HTML.
Cuando múltiples reglas coinciden, navega entre ellas usando la lista del lado derecho (o usa Alt-Arriba/Abajo).
Para crear una regla CSS directamente desde el editor en línea, haz clic en Nueva regla o pulsa Ctrl-Alt-N (en Windows) o Cmd-Opt-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 te muestra el cuerpo de la función (incluso si está presente en otros archivos referenciados por una declaración require()).
Usar el modo Edición rápida con archivos CSS, SCSS o LESS
Cuando abres Edición rápida con tu cursor dentro de un valor de color, puedes acceder al selector de color y modificar rápidamente los colores usados en tu código CSS.
En un archivo CSS, LESS o SCSS, coloca el cursor en una función de temporización de transición cubic-bezier() o steps() y Edición rápida muestra un editor gráfico de curva de transición.
Las funciones de temporización predefinidas ease, ease-in, ease-out, ease-in-out, step-start y step-end también son puntos de partida válidos.
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, puedes cambiar el nombre de las funciones y establecer el ámbito de una variable para poder llamarla desde un bloque de código en el que esté definida.
Nota
La refactorización de código ahora solo está disponible en archivos .js.
Refactorización de JavaScript
Puede refactorizar código en documentos html, php y JavaScript. Cuando haces clic con el botón derecho en el área de código en Dreamweaver, la opción Refactor aparece en el menú desplegable.Refactor consta 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, consulta 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. No es necesario seleccionar una variable haciendo clic y arrastrando para refactorizar.
Realiza los siguientes pasos para cambiar el nombre en JavaScript:
Resalta o coloca el Cursor de texto en el código que requiere un cambio.
Haz clic con el botón derecho en el texto seleccionado y luego selecciona Refactor > Rename. También puedes usar Ctrl + Alt + R en Windows OS, o Command + option + R en macOS como Método abreviado de teclado 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. Retype un nombre único de Variable o función para reemplazar el nombre actual.
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 puedes usar Ctrl + Alt + V en 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 se puede inicializar dentro del cuerpo de la función o pasar a través de llamadas de función.
Realice los siguientes pasos para refactorizar mediante Extract to Function:
seleccionar cualquier expresión o un conjunto de expresiones en JavaScript.
Haz clic con el botón derecho y selecciona Refactor > Extract to Function. También puedes usar Ctrl + Alt + M en Windows OS o Cmd + Alt + M en Mac OS.
Seleccione el ámbito de destino para extraer la función del menú emergente que se muestra en pantalla.
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 Extract to function son:
- Identifica los parámetros a pasar basándose en los identificadores disponibles en la selección o en el ámbito extraído.
- Identifica los parámetros de retorno para devolver desde la función basándose en identificadores cuyos valores cambian en la selección.
- También crea una función con un nombre único.
Las siguientes captura de pantalla muestran la salida basada en el ámbito de destino respectivo seleccionado.
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 se marca como una excepción durante la ejecución del programa.
Selecciona o coloca el cursor en el código, haz clic derecho y selecciona Refactorizar > Encapsular en Try Catch. Si colocas el cursor en una posición, encuentra las declaraciones circundantes; de lo contrario, verifica si el código contiene declaraciones o no. Si hay declaraciones, encapsula el código en un bloque Try Catch.
Envolver con condición
Usa Encapsular en condición para una expresión en el código que se compile solo bajo una condición específica.
Seleccione una expresión en el código, haga clic con el botón derecho y seleccione Refactorizar > Encapsular en 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 o new.target. Estas expresiones de función son para expresiones que no son métodos y no se pueden usar como constructor.
Coloca el cursor en una función, haz clic derecho y selecciona Refactorizar > Convertir a función flecha.
Nota
- Si la declaración seleccionada tiene un parámetro, la estructura del parámetro aparece como param => {declaraciones}.
- Si la declaración seleccionada tiene cero o más de un parámetro como param (param1, param2), la estructura del parámetro aparece como param (param1, param2) => {declaraciones}.
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 puedes crear un setter para una propiedad que tenga un valor real.
Coloca el cursor en un miembro de una expresión de objeto, haz clic derecho y selecciona Refactorizar > Crear Getters/Setters.
Sugerencias para solución de problemas
La siguiente tabla proporciona consejos de solución de problemas para los mensajes de error correspondientes que se muestran en pantalla debido a la selección incorrecta de código:
|
Nombre de función |
Mensaje de error |
Sugerencia para solucionar 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
Puedes usar las funciones de buscar y reemplazar de Dreamweaver para buscar cualquier tipo de texto, código o espacios en blanco en tu sitio o carpeta.
También puede buscar el formato completo, 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 otro 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 Código
Después de insertar código relevante para imágenes y colores, puedes obtener una vista previa directamente en la vista de código.
Vista previa de imagen
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. Puedes obtener vista previa de imágenes que se referencian como cualquiera de las siguientes:
- url();
- data-uri()
- Valor del atributo Src de la etiqueta img
Dreamweaver también muestra las vistas previas de las imágenes alojadas de forma remota.
Si Dreamweaver no puede mostrar la vista previa para rutas remotas, muestra el mensaje «Error al cargar la imagen».
Puedes obtener vista previa de los siguientes tipos de imagen:
- JPEG
- JPG
- PNG
- GIF
- SVG
Vista previa de color
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 admitidos son:
- Valores de color hexadecimales 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 predefinidos, como Olive, Teal, red.
La vista previa de color está disponible en todos los tipos de documento para los formatos de color anteriores.
Hacer clic con el botón derecho en un valor y seleccionar Edición rápida para abrir el selector de color y seleccionar un color diferente.
Nota
Para deshabilitar las vistas previas de imágenes y colores, desmarque la opción Ver > Opciones de vista de código > Vista previa de activos.
Impresión de código
Puedes imprimir tu código para editarlo sin conexión, archivarlo o distribuirlo.
Abra una página en la vista de Código.
Seleccione Archivo > Imprimir código.
Especifica las opciones de impresión y luego haz clic en Aceptar (Windows)
o Imprimir (Macintosh).
Crear sitios web atractivos en Dreamweaver
Diseña, codifica y gestiona sitios web dinámicos en una potente herramienta todo en uno.
