Haga clic en el texto o seleccione un objeto de la página.
Última actualización el
27 abr 2021
Utilice este tema para aprender a utilizar el Inspector de propiedades para editar código en Vista de diseño en Dreamweaver.
Dreamweaver te permite crear y editar visualmente páginas web sin preocuparte por el código fuente subyacente, pero hay ocasiones en las que podrías necesitar editar el código para tener mayor control o para solucionar problemas en tu página web.Dreamweaver te permite editar parte del código mientras trabajas en la vista de diseño.
Esta sección está diseñada para personas que prefieren trabajar en la vista Diseño, pero que también quieren acceso rápido al código.
Seleccione etiquetas hijo en la Vista de diseño
Si seleccionas un objeto en la vista Diseño que contenga etiquetas secundarias (por ejemplo, una tabla HTML), puedes seleccionar rápidamente la primera etiqueta secundaria de ese objeto seleccionando Editar > Seleccionar elemento secundario.
Nota
Este comando sólo está activado en la vista de Diseño.
Por ejemplo, la etiqueta <table> normalmente tiene etiquetas secundarias <tr>.Si seleccionas una etiqueta <table> en el selector de etiquetas, puedes seleccionar la primera fila de la tabla mediante Edición > Seleccionar elemento secundario.Dreamweaver selecciona la primera etiqueta <tr> en el selector de etiquetas.Puesto que la etiqueta <tr> en sí misma tiene etiquetas secundarias, es decir, etiquetas <td>, seleccionar Edición > Seleccionar secundaria de nuevo selecciona la primera celda de la tabla.
Edición de código con el inspector de propiedades
Puedes usar el inspector de propiedades para inspeccionar y editar los atributos de texto o de objetos en tu página.Las propiedades mostradas en el inspector de propiedades generalmente corresponden a atributos de etiquetas; cambiar una propiedad en el inspector de propiedades por lo general tiene el mismo efecto que cambiar el atributo correspondiente en la vista Código.
Nota
Tanto el inspector de etiquetas como el inspector de propiedades te permiten ver y editar los atributos de una etiqueta.El inspector de etiquetas te permite ver y editar cualquier atributo asociado con una etiqueta determinada.El inspector de propiedades muestra solo los atributos más comunes, pero proporciona un conjunto más completo de controles para cambiar los valores de esos atributos, y te permite editar ciertos objetos (como columnas de tabla) que no corresponden a etiquetas específicas.
El inspector de propiedades para el texto u objeto aparece debajo de la ventana Documento.Si el inspector de propiedades no está visible, selecciona Ventana > Propiedades.
Modifique los atributos en el inspector de propiedades.
Edición de CFML con el inspector de propiedades
Utilice el inspector de propiedades para inspeccionar y modificar el marcado de ColdFusion en la vista Diseño.
En el inspector de propiedades, haz clic en el botón Atributos
para editar los atributos de la etiqueta o para añadir otros nuevos.
Si la etiqueta contiene contenido entre sus etiquetas de apertura y cierre, haga clic en el botón Contenido para editar el contenido.
El botón Contenido aparece solo si la etiqueta seleccionada no es una etiqueta vacía (es decir, si tiene tanto una etiqueta de apertura como de cierre).
Si la etiqueta contiene una expresión condicional, realice cambios en la misma en el cuadro Expresión.
Introducción a Quick Tag Editor
Utiliza el Editor de etiquetas rápidas para inspeccionar, insertar y editar rápidamente etiquetas HTML sin salir de la vista de diseño.
Si escribes HTML no válido en el editor rápido de etiquetas, Dreamweaver intenta corregirlo automáticamente insertando comillas de cierre y corchetes angulares de cierre donde sea necesario.
Para establecer las opciones del editor rápido de etiquetas, abre el editor rápido de etiquetas presionando Control-T (Windows) o Comando-T (Macintosh).
Quick Tag Editor dispone de tres modos de funcionamiento:
- Insertar HTML, que se utiliza para insertar código HTML nuevo.
- Editar etiqueta, que se utiliza para editar una etiqueta existente.
Insertar HTML, que se utiliza para insertar código HTML nuevo.
Editar etiqueta, que se utiliza para editar una etiqueta existente.
Ajustar etiqueta, que se utiliza para ajustar una nueva etiqueta alrededor de la selección actual.
Nota
El modo en el que se abre Quick Tag Editor depende de la selección actual de la vista Diseño.
El funcionamiento básico de Quick Tag Editor es el mismo en los tres modos: se abre el editor, se introducen o se editan las etiquetas o atributos y se cierra el editor.
Puede alternar entre los distintos modos presionando Control+T (Windows) o Comando+T (Macintosh) con Quick Tag Editor activo.
Edición de código con Quick Tag Editor
Utilice Quick Tag Editor ( Edit > Quick Tag Editor) para insertar y editar etiquetas HTML de forma rápida sin salir de la vista Diseño.
Inserción de una etiqueta HTML
En la vista Diseño, haz clic en la
página para colocar el punto de inserción donde quieras insertar código.
Presione Control+T (Windows) o Comando+T (Macintosh).
Quick Tag Editor se abre en modo Insertar HTML.
Introduzca la etiqueta HTML y, a continuación, presione Intro.
La etiqueta se inserta en tu código, junto con una etiqueta de cierre correspondiente si es aplicable.
Presione Escape para salir sin realizar ningún cambio.
Edición de una etiqueta HTML
Seleccione un objeto en la Vista de diseño.
También puedes seleccionar la etiqueta que quieres editar desde el selector de etiquetas en la parte inferior de la ventana Documento.Para obtener más información, consulte Editar código con el selector de etiquetas.
Presione Control+T (Windows) o Comando+T (Macintosh).
Quick Tag Editor se abre en modo Editar etiqueta.
Introduzca nuevos atributos, edite atributos existentes o edite
el nombre de la etiqueta.
Pulse Tab para avanzar de un atributo al siguiente;
pulse Mayús+Tab para retroceder.
Nota
De forma predeterminada, los cambios se aplican al documento al pulsar Tab o Mayús+Tab.
Para cerrar el editor de etiquetas rápidas y aplicar todos los cambios,
pulse Intro.
Para salir sin hacer ningún otro cambio, presione Escape.
Ajustar la selección actual con etiquetas HTML
Seleccionar texto sin formato o un objeto en la vista Diseño.
Nota
Si ha seleccionado texto o un objeto que incluya una etiqueta HTML de apertura o cierre, Quick Tag Editor se abrirá en modo Editar etiqueta en lugar del modo Ajustar etiqueta.
Pulse Control+T (Windows) o Comando+T (Macintosh), o
haga clic en el botón editor de etiquetas rápidas del inspector de propiedades.
Quick Tag Editor se abre en modo Ajustar etiqueta.
Introduzca una sola etiqueta de apertura, como strong,
y pulse Intro (Windows) o Retorno (Macintosh).
La etiqueta se inserta al principio de la selección actual, y una etiqueta de cierre correspondiente se inserta al final.
Para salir sin hacer ningún cambio, presione Escape.
Usar el menú de sugerencias en el editor de etiquetas rápidas
El editor de etiquetas rápidas incluye un menú de sugerencias de atributos que enumera todos los atributos válidos de la etiqueta que está editando o insertando.
También puede desactivar el menú de sugerencias o ajustar el retraso antes de que aparezca el menú en el editor de etiquetas rápidas.
Para ver un menú de sugerencias que enumere atributos válidos para una etiqueta, haga una breve pausa mientras edita un nombre de atributo en el editor de etiquetas rápidas. Aparece un menú de sugerencias que enumera todos los atributos válidos para la etiqueta que está editando.
Del mismo modo, para ver un menú de sugerencias que enumere nombres de etiquetas válidos, haga una breve pausa mientras introduce o edita un nombre de etiqueta en el editor de etiquetas rápidas.
Nota
Las preferencias de sugerencia de código del editor de etiquetas rápidas están controladas por las preferencias normales de sugerencia de código. Para obtener más información, consulte Establecer preferencias de sugerencia de código.
Siga uno de estos procedimientos:
Empiece a escribir un nombre de etiqueta o atributo. La selección en el menú de sugerencias de código salta al primer elemento que comience con las letras que has escrito.
Utilice las teclas de flecha hacia arriba y flecha hacia abajo para seleccionar un elemento.
Utilice la barra de desplazamiento para buscar un elemento.
Pulse Intro para insertar el elemento seleccionado, o haga doble clic
en un elemento para insertarlo.
Para cerrar el menú de sugerencias sin insertar un elemento, pulse
Escape o continúe escribiendo.
Desactivar el menú de sugerencias o cambiar el retraso antes de que aparezca
Seleccione Editar > Preferencias (Windows) o Dreamweaver > Preferencias (Macintosh) y seleccione Sugerencias de código.
Se mostrará el cuadro de diálogo Preferencias para la categoría Sugerencias para el código.
Para desactivar el menú de sugerencias, anule la selección de la opción Activar sugerencia de código.
Edición de código con el selector de etiquetas
Puede utilizar el selector de etiquetas para seleccionar, editar o quitar etiquetas sin salir de la vista de Diseño. El selector de etiquetas está situado en la barra de estado de la parte inferior de la ventana de documento y muestra una serie de etiquetas.
Edición o eliminación de una etiqueta
Haga clic en el documento.
Las etiquetas que se aplican en el punto de inserción aparecen en el selector de etiquetas.
Haz clic con el botón derecho (Windows) o Control+clic (Macintosh) en una
etiqueta del selector de etiquetas.
Para editar una etiqueta, seleccione Editar etiqueta del menú. Realiza los
cambios en el Editor de etiquetas rápido. Para obtener más información, consulta Editar
código con el Editor de etiquetas rápido.
Para eliminar una etiqueta, seleccione Quitar etiqueta del menú.
Seleccionar un objeto correspondiente a una etiqueta
Haga clic en el documento.
Las etiquetas que se aplican en el punto de inserción aparecen en el selector de etiquetas.
Haga clic en una etiqueta del selector de etiquetas.
El objeto representado por la etiqueta se selecciona en la página.
Nota
Utilizar esta técnica para seleccionar filas de tabla individuales (etiquetas tr) o celdas (etiquetas td).
Escribir y editar scripts en la vista Diseño
Puedes trabajar con JavaScript y VBScripts del lado del cliente tanto en las vistas Código como Diseño, de las siguientes maneras:
Escribir un script de JavaScript o VBScript para tu página sin salir de la vista de Diseño.
Crear un vínculo en tu documento a un archivo de script externo sin salir de la vista Diseño.
Editar un script sin salir de la vista Diseño.
Antes de comenzar, selecciona Ver > Ayudas visuales > Elementos invisibles para asegurar que los marcadores de Script aparezcan en la Página.
Escritura de un script de la parte del cliente
Coloca
el punto de inserción donde desees el Script.
Seleccione Insertar > HTML > Script.
Seleccione el script en la ventana de selección de archivos.
Nota
No es preciso que incluya las etiquetas de apertura y cierre de script.
La etiqueta script para el archivo seleccionado se inserta en el documento.
Edición de un script
Seleccione el marcador de scripts.
En el inspector de propiedades, haga clic en el botón Editar.
El script aparece en el cuadro de diálogo Propiedades del script.
Si vinculaste a un archivo de script externo, el archivo se abre en la vista Código, donde puedes hacer tus modificaciones.
Nota
Si hay código entre las etiquetas de script, se abre el cuadro de diálogo Propiedades del script incluso si también hay un vínculo a un archivo de script externo.
En el cuadro Idioma, especifica JavaScript o VBScript como el idioma del script.
En el menú emergente Tipo, especifica el tipo de script, ya sea del lado del cliente o del lado del servidor.
(Opcional) En el cuadro Fuente, especifica un archivo de script vinculado externamente.
Haga clic en el icono de carpeta o en el botón Examinar para seleccionar un archivo, o bien escriba la ruta.
Edite el script y haga clic en OK.
Editar Scripts del lado del servidor ASP en la vista Diseño
Utilizar el inspector de propiedades de script ASP para inspeccionar y modificar scripts del lado del servidor ASP en la vista Diseño.
En la vista Diseño, selecciona el icono visual
de la etiqueta de idioma de servidor.
En el inspector de Propiedad del Script ASP, haz clic en el botón
Editar.
Edite el script ASP del lado del servidor y haga clic en OK.
Editar scripts en la página utilizando el Inspector de propiedades
En el inspector de propiedades, seleccionar el idioma de scripts desde el menú emergente Idioma o escribir un nombre de idioma en el cuadro Idioma.
Nota
Si usas JavaScript y no estás seguro de la versión, selecciona JavaScript en lugar de JavaScript1.1 o JavaScript1.2.
En el menú emergente Tipo, especifique el tipo de script, ya sea del lado del cliente o del lado del servidor.
(Opcional) En el cuadro Origen, especifique un archivo de script vinculado de forma externa. Haga clic en el icono de carpeta para seleccionar el archivo o escriba la ruta correspondiente.
Haga clic en Editar para modificar el script.
Utilización de comportamientos de JavaScript
Puedes adjuntar fácilmente comportamientos de JavaScript (lado del cliente) a elementos de página usando la pestaña Comportamientos del inspector de etiquetas. Para obtener más información, consulta Aplicar comportamientos integrados de JavaScript en Adobe Dreamweaver.
Crear sitios web atractivos en Dreamweaver
Diseña, codifica y gestiona sitios web dinámicos en una potente herramienta todo en uno.
