Para visualizar el código HTML asociado al texto u objeto seleccionado, realice una de las acciones siguientes:
Última actualización el
20 dic. 2021
Seleccione y vea los elementos en Dreamweaver, muestre o oculte los iconos de marcadores para elementos invisibles y defina las preferencias de elementos invisibles.
Para seleccionar un elemento de la vista de 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) y modificarlos utilizando el cuadro de diálogo Preferencias > Elementos invisibles.
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, vaya a la vista Diseño y seleccione Ver > Opciones de vista de diseño > 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 de Diseño, un elemento con posición absoluta (elemento PA) puede situarse en cualquier lugar de la página, pero en la vista de 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 de Diseño como en la vista de 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.
Visualización del código HTML
En la barra de herramientas Documento, haga clic en Código.
Seleccione Ver > Código.
Seleccione Ver > Dividir > opción Código-En Vivo, Código-Diseño o Código-Código.
Seleccione Ventana > Inspector de código.
Cuando seleccione un elemento en el editor de código (la vista de 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.
Mostrar u ocultar iconos de marcadores para elementos invisibles
Seleccionar Ver > Opciones de vista de diseño > Ayudas visuales > Elementos invisibles.
Nota
Mostrar elementos invisibles puede cambiar ligeramente el diseño de una página, moviendo otros elementos unos pocos píxeles, por lo que para un diseño de precisión, se deben ocultar los elementos invisibles.
Configuración de preferencias de Elementos invisibles
Usa las preferencias de Elementos invisibles para especificar qué tipos de elementos serán visibles cuando selecciones Ver > Ayudas visuales > Elementos invisibles.
Selecciona Edición > Preferencias (Windows) o Dreamweaver > Preferencias (Macintosh), luego haz clic en Elementos invisibles.
Selecciona qué elementos deben hacerse visibles y haz clic en Aceptar.
Una marca de verificación junto al nombre del elemento en el cuadro de diálogo significa que el elemento es visible cuando se selecciona 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.Selecciona el icono para editar el Script en el inspector de Propiedad o para vincular a un archivo de Script externo.
Comentarios
Muestra un icono que marca la ubicación de los comentarios HTML.Selecciona el icono para ver el comentario en el inspector de Propiedad.
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 la ubicación de cada mapa de imagen del lado del cliente en el documento.
Estilos incrustados
Muestra un icono que muestra la ubicación de los estilos CSS incrustados en la sección del cuerpo del documento.Si los estilos CSS se colocan en la sección head de un documento, no aparecen en la ventana Documento.
Campos ocultos de formulario
Muestra un icono que marca la ubicación de los campos de formulario que tienen el atributo type establecido en "hidden".
Delimitador de formulario
Muestra un borde alrededor de un formulario para que puedas ver dónde insertar elementos de formulario.El borde muestra la extensión de la etiqueta form, por lo que cualquier elemento de formulario dentro de ese borde está correctamente incluido en las etiquetas form.
Anclajes para elementos PA
Muestra un icono que marca la ubicación del código que define un elemento AP.El elemento PA puede encontrarse en cualquier lugar de la página. (Los elementos AP no son elementos invisibles; solo el código que define el elemento AP es invisible.)Selecciona el icono para seleccionar el elemento AP; luego puedes ver el contenido del elemento AP incluso si el elemento AP está marcado como oculto.
Anclaje para elementos alineados
Muestra un icono que muestra la ubicación del código HTML para elementos que aceptan el atributo align.Estos incluyen imágenes, tablas, objetos ActiveX, complementos 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 marcado del servidor (como las etiquetas de Active Server Pages y las etiquetas de ColdFusion) cuyo contenido no se puede mostrar en la ventana Documento.Estas etiquetas suelen generar 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 final dinámico de la página.
Etiquetas de formato de servidor no visuales
Muestra la ubicación de las etiquetas de marcado del servidor (como las etiquetas de Active Server Pages y las etiquetas de ColdFusion) cuyo contenido no se puede mostrar en la ventana Documento. Estas etiquetas suelen ser etiquetas de configuración, procesamiento o lógica (por ejemplo, <CFSET>, <CFWDDX> y <CFXML>) que no generan etiquetas HTML.
CSS Display: Ninguno
Muestra un icono que indica la ubicación del contenido oculto por la propiedad display:none en la hoja de estilos vinculada o integrada.
Mostrar texto dinámico como
Muestra cualquier texto dinámico de la página en el formato {Recordset:Field} de forma predeterminada. Si la longitud de estos valores es lo suficientemente larga como para distorsionar el formato de la página, puede cambiar la visualización a {} en su lugar.
Server-Side Include
Muestra el contenido real de cada archivo server-side include.
Temas similares
Crear sitios web atractivos en Dreamweaver
Diseña, codifica y gestiona sitios web dinámicos en una potente herramienta todo en uno.
