PDF (adobe.com)

Selección y visualización de elementos de la ventana de documento



Para seleccionar un elemento de la vista Diseño de la ventana de documento, haga clic en el elemento. Si un elemento es invisible, tendrá que convertirlo en visible para poder seleccionarlo.

Algunos códigos HTML no tienen representación visible en los navegadores. Por ejemplo, las etiquetas comment no aparecen en los navegadores. No obstante, mientras crea una página, puede resultar útil poder seleccionar este tipo de elementos invisibles, editarlos, moverlos o borrarlos.

Dreamweaver permite especificar si debe mostrar iconos que marquen la ubicación de los elementos invisibles en la vista Diseño de la ventana de documento. Para indicar los marcadores de elementos que deben aparecer, puede definir opciones en las preferencias de Elementos invisibles. Por ejemplo, puede especificar que sean visibles los anclajes con nombre, pero no los saltos de línea.

Puede crear determinados elementos invisibles (como comentarios y anclajes con nombre) utilizando los botones de la categoría Común del panel Insertar. Después podrá modificar estos elementos utilizando el inspector de propiedades.

Selección de elementos

  • Para seleccionar un elemento visible de la ventana de documento, haga clic en el elemento o arrastre el puntero hasta el elemento.

  • Para seleccionar un elemento invisible, seleccione Ver > Ayudas visuales > Elementos invisibles (si no está seleccionado) y haga clic en el marcador del elemento en la ventana de documento.

    Algunos objetos aparecen en un lugar de la página distinto a aquél en el que se ha insertado el código. Por ejemplo, en la vista Diseño, un elemento con posición absoluta (elemento PA) puede situarse en cualquier lugar de la página, pero en la vista Código, la definición del elemento PA debe establecerse en un lugar fijo. Cuando los elementos invisibles se encuentran visibles, Dreamweaver muestra marcadores en la ventana de documento para indicar la posición del código correspondiente a los elementos invisibles. Al seleccionar un marcador, se selecciona el elemento completo; por ejemplo, al seleccionar el marcador de un elemento PA, se selecciona el elemento PA completo.

  • Para seleccionar una etiqueta completa (incluido su contenido, si lo hay), haga clic en una etiqueta del selector de etiquetas, situado en la parte inferior izquierda de la ventana de documento. (El selector de etiquetas aparece tanto en la vista Diseño como en la vista Código.) El selector de etiquetas siempre muestra las etiquetas que rodean a la selección actual o al punto de inserción. La etiqueta situada más a la izquierda es la etiqueta más externa que contiene la selección actual o el punto de inserción. La siguiente etiqueta está contenida en la etiqueta más externa, y así sucesivamente; la etiqueta situada más a la derecha es la etiqueta más interna que contiene la selección actual o el punto de inserción.

    En el siguiente ejemplo, el punto de inserción se sitúa en una etiqueta de párrafo, <p>. Para seleccionar la tabla que contiene el párrafo que desea seleccionar, seleccione la etiqueta <table> situada a la izquierda de la etiqueta <p>.


Visualización del código HTML asociado al texto u objeto seleccionado

 Siga uno de estos procedimientos:
  • En la barra de herramientas Documento, haga clic en el botón Mostrar vista de Código.

  • Seleccione Ver > Código.

  • En la barra de herramientas Documento, haga clic en el botón Mostrar vistas de Código y Diseño.

  • Seleccione Ver > Código y diseño.

  • Seleccione Ventana > Inspector de código.

    Cuando seleccione un elemento en el editor de código (la vista Código o el inspector de código), normalmente también se seleccionará en la ventana de documento. Es posible que tenga que sincronizar las dos vistas antes de que aparezca la selección.

Visualización u ocultación de iconos de marcadores para elementos invisibles

 Seleccione Ver > Ayudas visuales > Elementos invisibles.
Nota: Al mostrar elementos invisibles, el diseño de la página puede cambiar ligeramente, ya que se desplazarán otros elementos unos pocos píxeles; de manera que, para lograr un diseño preciso, oculte los elementos invisibles.

Configuración de preferencias de Elementos invisibles

Utilice las preferencias de Elementos invisibles para seleccionar qué tipos de elementos estarán visibles al seleccionar Ver > Ayudas visuales > Elementos invisibles.

  1. Seleccione Edición > Preferencias (Windows) o Dreamweaver > Preferencias (Macintosh) y haga clic en Elementos invisibles.
  2. Seleccione qué elementos deben hacerse visibles y, a continuación, haga clic en Aceptar.
    Nota: Una marca de verificación junto al nombre del elemento en el cuadro de diálogo indica que ese elemento se encontrará visible cuando seleccione Ver > Ayudas visuales > Elementos invisibles.
    Anclajes con nombre
    Muestra un icono que marca la ubicación de cada anclaje con nombre (a name ="") en el documento.

    Scripts
    Muestra un icono que marca la ubicación del código JavaScript o VBScript en el cuerpo del documento. Seleccione el icono para editar el script en el inspector de propiedades o para vincularlo a un archivo externo de script.

    Comentarios
    Muestra un icono que marca la ubicación de los comentarios HTML. Seleccione el icono para ver el comentario en el inspector de propiedades.

    Saltos de línea
    Muestra un icono que marca la ubicación de cada salto de línea (BR). Esta opción está desactivada de forma predeterminada.

    Mapas de imágenes de la parte cliente
    Muestra un icono que marca en el documento la ubicación de cada mapa de imagen de la parte del cliente.

    Estilos incrustados
    Muestra un icono que indica la ubicación de los estilos CSS incrustados en la sección body (el cuerpo) del documento. Si los estilos CSS están colocados en la sección Head del documento, no aparecerán en la ventana de documento.

    Campos ocultos de formulario
    Muestra un icono que marca la ubicación de campos de formulario que tienen el atributo type (tipo) definido como "hidden" (oculto).

    Delimitador de formulario
    Muestra un borde alrededor de un formulario para indicar dónde puede insertar elementos de formulario. El borde muestra el alcance de la etiqueta form, de manera que todos los elementos de formulario situados dentro de dicho borde estén correctamente encerrados entre etiquetas form.

    Anclajes para elementos PA
    Muestra un icono que marca la ubicación del código que define un elemento PA. El elemento PA puede encontrarse en cualquier lugar de la página. (Los elementos PA no son elementos invisibles; tan sólo el código que define al elemento PA es invisible.) Seleccione el icono para seleccionar el elemento PA; podrá ver el contenido del elemento PA incluso en el caso de que el elemento PA esté marcado como oculto.

    Anclaje para elementos alineados
    Muestra un icono que indica la ubicación del código HTML para elementos que aceptan el atributo align. Estos elementos pueden ser imágenes, tablas, objetos ActiveX, plug-ins y applets. En algunos casos, el código del elemento puede estar separado del objeto visible.

    Etiquetas de formato de servidor visuales
    Muestra la ubicación de las etiquetas de formato de servidor (como las etiquetas Active Server Pages o ColdFusion) cuyo contenido no se puede ver en la ventana de documento. Estas etiquetas normalmente generan etiquetas HTML cuando las procesa un servidor. Por ejemplo, una etiqueta <CFGRAPH> genera una tabla HTML cuando la procesa un servidor ColdFusion. Dreamweaver representa la etiqueta con un elemento invisible de ColdFusion, ya que Dreamweaver no puede determinar el resultado dinámico final de la página.

    Etiquetas de formato de servidor no visuales
    Muestra la ubicación de las etiquetas de formato de servidor (como las etiquetas Active Server Pages o ColdFusion) cuyo contenido no se puede ver en la ventana de documento. Estas etiquetas normalmente son etiquetas de configuración, de procesamiento o lógicas (por ejemplo, <CFSET>, <CFWDDX>, y <CFXML>) que no generan etiquetas HTML.

    CSS Display: Ninguno
    Muestra un icono que indica la posición del contenido oculto por la propiedad display:none en la hoja de estilos vinculada o incrustada.

    Mostrar texto dinámico como
    Muestra el texto dinámico de la página en el formato {Recordset:Field} de forma predeterminada. Si la longitud de estos valores es suficiente para distorsionar el formato de página, puede cambiar la visualización a {}.

    Server-Side Includes
    Muestra el contenido real de cada archivo server-side include.