Edición de código en Vista de diseño

Dreamweaver permite crear y editar visualmente páginas web sin tener que preocuparse del código fuente subyacente, pero a veces es necesario editar el código para tener un mayor control o para resolver problemas de la página web. Dreamweaver permite editar código mientras se trabaja en Vista de diseño.

Esta sección está pensada para quienes prefieren trabajar en la Vista de diseño pero también desean poder acceder al código con rapidez.

Si selecciona un objeto en la vista de Diseño que contiene etiquetas hijo (por ejemplo, una tabla HTML), podrá seleccionar rápidamente la primera etiqueta hijo dicho objeto seleccionando Edición > Seleccionar hijo.

Por ejemplo, la etiqueta <table> normalmente tiene etiquetas <tr> hijo. Si selecciona una etiqueta <table> en el selector de etiquetas, podrá seleccionar la primera fila de la tabla seleccionando Edición > Seleccionar hijo. Dreamweaver seleccionará la primera etiqueta <tr> del selector de etiquetas. Dado que la propia etiqueta <tr> tiene etiquetas hijo, concretamente etiquetas <td>, al volver a seleccionar Edición > Seleccionar hijo, se selecciona la primera celda de la tabla.

Edición de código con el inspector de propiedades

Puede utilizar el inspector de propiedades para inspeccionar y editar los atributos del texto o de los objetos de la página. Las propiedades mostradas en el inspector de propiedades se suelen corresponder con los atributos de las etiquetas: si se cambia una propiedad en el inspector de propiedades, normalmente esto produce el mismo efecto que si se cambia el atributo correspondiente en la vista de Código.

Edición de CFML con el inspector de propiedades

Utilice el inspector de propiedades para inspeccionar y modificar el formato ColdFusion en la vista de Diseño.

Introducción a Quick Tag Editor

Puede utilizar Quick Tag Editor para inspeccionar, insertar y editar etiquetas HTML de forma rápida sin salir de la Vista de diseño.

Si se escribe HTML inválido en el Quick Tag Editor, Dreamweaver procura corregirlo de manera automática, insertando comillas de cierre y paréntesis angulares cuando sea necesario.

Para establecer las opciones de Quick Tag Editor, abra Quick Tag Editor 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.

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

Edición de una etiqueta HTML

Cómo rodear la selección actual con etiquetas HTML

Uso del menú de sugerencias en Quick Tag Editor

Quick Tag Editor incluye un menú de sugerencias sobre atributos que muestra todos los atributos válidos de la etiqueta que está editando o insertando.

También puede desactivar el menú de sugerencias o ajustar el tiempo que debe transcurrir antes de que aparezca el menú en Quick Tag Editor.

Para ver un menú de sugerencias que enumere los atributos válidos para una etiqueta, no olvide hacer una breve pausa al editar un nombre de atributo en Quick Tag Editor. Aparecerá un menú de sugerencias con todos los atributos válidos para la etiqueta que está editando.

De modo parecido, para ver un menú de sugerencias con los nombres de etiqueta válidos, haga una breve pausa al especificar o editar un nombre de etiqueta en Quick Tag Editor.

Desactivación del menú de sugerencias o modificación del tiempo que debe transcurrir antes de que aparezca

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

Selección de un objeto correspondiente a una etiqueta

Escritura y edición de scripts en la vista de Diseño

Puede trabajar con JavaScripts y VBScripts en el lado del cliente tanto en la Vista de código como en la Vista de diseño de las siguientes formas:

• Escriba un script JavaScript o VBScript para la página sin salir de la Vista de diseño.

• Cree un vínculo en el documento con un archivo de script externo sin salir de la Vista de diseño.

• Edite un script sin salir de la vista de Diseño.

  Antes de empezar, seleccione Ver > Ayudas visuales > Elementos invisibles para garantizar que los marcadores de scripts aparecerán en la página.

Escritura de un script de la parte del cliente

La etiqueta script para el archivo seleccionado se inserta en el documento.

Edición de un script

Edición de scripts ASP en el lado del servidor en la vista de Diseño

Utilice el inspector de propiedades de script ASP para inspeccionar y modificar scripts ASP en el lado del servidor en la vista de Diseño.

Edición de scripts en la página utilizando el inspector de propiedades

Utilización de comportamientos de JavaScript

Puede adjuntar fácilmente comportamientos JavaScript (lado del cliente) a elementos de página empleando la ficha Comportamientos del inspector de etiquetas. Para obtener más información, consulte Aplicación de comportamientos JavaScript incorporados.