Vista de diseño

Artículo
04/10/2013

La Vista de diseño muestra ASP.NET Web Pages, las maestras, las HTML y los controles de usuario empleando una presentación que se aproxima bastante al modo WYSIWYG. Esta vista permite agregar texto y elementos y, a continuación, colocarlos, ajustar su tamaño y configurar las propiedades mediante menús especiales o la ventana Propiedades. La vista en dos paneles permite ver y editar un documento tanto en la vista Diseño como en la vista Código fuente. De forma predeterminada, las dos ventanas se organizan horizontalmente.

Al agregar elementos a la página, Visual Web Developer crea el marcado correspondiente que también puede editar en la vista Código fuente. Para obtener información detallada, vea Source View.

Para alternar a la Vista de diseño, haga clic en la ficha Diseño situada en la parte inferior de la ventana del Diseñador HTML.

Nota

La Vista de diseño muestra sólo el texto principal de un documento, la parte situada entre el <body> y las etiquetas </body>.Aunque puede editar algunas propiedades del elemento head, como el título del documento, mediante la ventana Propiedades del documento, debe alternar a la vista Código fuente para editar las propiedades de los elementos que no están en el elemento body.

Diferencias entre la Vista de diseño y los exploradores Web

La Vista de diseño proporciona una vista de edición que se aproxima bastante al modo WYSIWYG del aspecto que tendrá la página en un explorador. Sin embargo, esta vista no es una coincidencia de la representación de la página y siempre debe probar la página en un explorador (o en varios) para estar seguro de que la página aparecerá cuando la ha diseñado.

Un documento mostrado en la vista Diseño se diferencia de otro mostrado en un explorador web en lo siguiente:

La superficie de diseño se puede modificar.
Algunos elementos se muestran en la Vista de diseño con fines de edición, pero no se representan en el explorador, como los controles de origen de datos. La mayoría de los controles que sólo aparecen al editarlos se representan como cuadros grises en la Vista de diseño.
Algunos formatos de caracteres y de párrafo pueden mostrarse de forma diferente que en un explorador específico (si el explorador web implementa el formato de forma distinta que en la Vista de diseño).
Los hipervínculos no funcionan.
Los scripts de cliente no se ejecutan.
El código del servidor no se ejecuta.
Los elementos que admiten texto alternativo (como las imágenes) no lo muestran como información sobre herramientas al pasar el puntero sobre ellos.

Mostrar caracteres Null

En la Vista de diseño, cuando se usa una plantilla que contiene un carácter null, se truncan los caracteres posteriores a dicho carácter. No se pierden datos, pero la Vista de diseño no muestra los caracteres de una plantilla que van después de un carácter null.

Colocar elementos en la Vista de diseño

Los elementos de la página se diseñan físicamente de arriba abajo. De forma predeterminada, cuando la página se representa en el explorador, los elementos se representan en el mismo orden de arriba abajo. Asimismo puede diseñar los elementos bidimensionalmente, colocándolos mediante coordenadas horizontales y verticales en cualquier parte de la página. Esta opción de diseño aprovecha las opciones de posición disponibles mediante los estilos. Para obtener información detallada, vea Situar elementos en la Vista de diseño.

Navegar por la Vista de diseño

Para ayudarle a desplazarse por los elementos y seleccionarlos, la Vista de diseño proporciona estas opciones:

Explorador de etiquetas. El explorador de etiquetas muestra el elemento actual, junto con la jerarquía de etiquetas primarias a las que pertenece. Puede utilizarlo para ver el elemento que tiene el foco y para desplazarse desde el elemento actual a un elemento superior de la jerarquía. Para obtener información detallada, vea HTML Editor Tag Navigator.
Esquema del documento. La ventana Esquema del documento permite buscar y seleccionar todos los elementos de un documento, incluidos los que no se muestran. Para obtener información detallada, vea How to: Navigate in the HTML Editor in Visual Studio.
Ventana Propiedades. Cuando selecciona un elemento en la lista desplegable situada en la parte superior de la ventana Propiedades, el editor selecciona ese elemento del documento.

Agregar elementos

Puede agregar elementos a una página en la Vista de diseño de las siguientes formas:

Arrástrelos desde el Cuadro de herramientas.
Haga doble clic en el elemento del Cuadro de herramientas, que lo inserta en la ubicación actual del punto de inserción del documento.
Arrástrelos desde otro documento abierto en Visual Web Developer.
Arrástrelos desde el Explorador de soluciones. Es muy útil para agregar los controles de usuario y las referencias de la hoja de estilos a la página.
Escriba directamente el texto en la página.

Etiquetas inteligentes en la Vista de diseño

En la Vista de diseño, muchos controles de servidor ASP.NET muestran una etiqueta inteligente que proporciona acceso rápido a la configuración y a las acciones que se usan más frecuentemente para configurar el control. De forma predeterminada, se muestra la etiqueta inteligente la primera vez que agrega un control a la página. También puede mostrar esta etiqueta mediante el menú contextual o haciendo clic en su símbolo.

Expresiones en la Vista de diseño

En la Vista de diseño, no puede usar la ventana Propiedades para cambiar los valores de las expresiones. Por ejemplo, si asigna una expresión a un control en la vista Código fuente, no puede cambiar el valor de esa expresión en la Vista de diseño. Puesto que el valor de la expresión es un valor calculado, debería utilizar la vista Código fuente para cambiarla.

Actualizar al diseñador

Cuando alterna de la vista Código fuente a la Vista de diseño, quizá deba actualizar al diseñador para ver algunos tipos de cambios del archivo. Por ejemplo, se analiza el código del tema no compilado; por consiguiente, cualquier cambio realizado en el código del tema en la vista Código fuente requiere una actualización antes de poder verlo en el diseñador.

Para actualizar al diseñador, puede realizar una de las siguientes acciones:

Haga clic con el botón secundario del mouse en la ventana Diseño y, a continuación, haga clic en la carpeta Actualizar.
En el menú Ver, haga clic en Actualizar.

Vea también

Share via