“设计”视图

项目
04/10/2013

“设计”视图使用一种近似所见即所得的视图来显示 ASP.NET 网页、母版页、内容页、HTML 页和用户控件。通过“设计”视图可以对文本和元素进行以下操作：添加、定位、调整大小以及使用特殊菜单或**“属性”**窗口设置其属性。拆分视图允许您查看和编辑设计视图和源视图中的文档。默认情况下，两个窗口水平排列。

向页面添加元素时，Visual Web Developer 会创建相应的标记，您也可以在“源”视图中编辑这些标记。有关详细信息，请参见 Source View。

若要切换到“设计”视图，请单击位于“HTML 设计器”窗口底部的**“设计”**选项卡。

备注

“设计”视图只显示文档的正文，即显示 <body> 和 </body> 标记之间的部分。虽然使用“文档属性”窗口可以编辑 head 元素的某些属性（如文档的标题），但您必须切换到“源”视图，才能编辑不在 body 元素内的那些元素的属性。

“设计”视图与在 Web 浏览器中进行查看的区别

与页面在浏览器中的显示效果相比，“设计”视图提供的是近似所见即所得的编辑视图。但是，“设计”视图中所显示的页面与该页面的实际呈现效果并不完全一致，因此，您始终应在一个或多个浏览器中测试页面，以确保页面的显示效果与您的设计预期相符。

“设计”视图中显示的文档与 Web 浏览器中显示的文档的区别如下：

设计图面是可编辑的。
某些元素（如数据源控件）会显示在“设计”视图中，您可以对其进行编辑，但这些元素不会呈现在浏览器中。某些控件只有在编辑时才出现，大部分这类控件在“设计”视图中呈现为灰色的框。
某些字符和段落格式设置在特定浏览器中的显示可能会有所不同（如果该 Web 浏览器以不同于“设计”视图的方式实现格式设置）。
超链接不起作用。
不运行客户端脚本。
服务器代码不运行。
当指针经过支持备用文本的元素（如图像）时，这些元素不在工具提示中显示备用文本。

显示 null 字符

在“设计”视图中，使用包含 null 字符的模板时，将截断跟在 null 字符后面的字符。数据不会丢失，但“设计”视图不会在模板中显示跟在 null 字符后面的字符。

在“设计”视图中定位元素

实际上，页面中的元素是按照自上而下的顺序来布局的。默认情况下，当页面呈现到浏览器中时，其中的元素将以相同的自上而下的顺序呈现。您也可以采用二维方式对元素进行布局，使用水平和垂直坐标将元素定位到页面中的任何位置。此布局选项利用的是可以通过样式使用的定位选项。有关详细信息，请参见在“设计”视图中定位元素。

在“设计”视图中导航

为了帮助您在元素之间移动和选择这些元素，“设计”视图提供了以下选项：

标记导航器。标记导航器显示当前元素及其所属的父标记的层次结构。使用标记导航器可以查看具有焦点的元素，还可以从当前元素移动到层次结构中处于较高位置的元素。有关详细信息，请参见 HTML Editor Tag Navigator。
文档大纲。通过**“文档大纲”**窗口，可以定位和选择文档中的所有元素，包括那些不显示的元素。有关详细信息，请参见How to: Navigate in the HTML Editor in Visual Studio。
**“属性”窗口。您从“属性”**窗口顶部的下拉列表中选择某个元素时，编辑器就会在文档中选择该元素。

添加元素

在设计尝试中，您可以使用以下方法向页面中添加元素：

从**“工具箱”**拖动这些元素。
双击**“工具箱”**中的某个元素，将在文档中的当前插入点位置插入该元素。
从 Visual Web Developer 中打开的另一个文档拖动这些元素。
从**“解决方案资源管理器”**拖动这些元素。这种方法主要用于向页面添加用户控件和样式表引用。
直接在页面中键入文本。

“设计”视图中的智能标记

在设计尝试中，许多 ASP.NET 服务器控件都显示智能标记，通过智能标记可以快速访问最常用于配置服务器控件的设置和操作。默认情况下，在首次向页面添加控件时会显示智能标记。您还可以随时使用快捷菜单或单击智能标记的符号来显示智能标记。

“设计”视图中的表达式

在“设计”视图中，无法使用**“属性”**窗口来更改表达式的值。例如，如果为“源”视图中的控件分配表达式，则无法在“设计”视图中更改此表达式的值。由于已计算表达式的值，因此应使用“源”视图来更改表达式。

刷新设计器

从“源”视图切换到“设计”视图时，可能需要刷新设计器才能看到某些类型的文件更改。例如，主题代码已分析但并未编译，因此，需要刷新设计器后，才能看到在“源”视图中对主题代码所做的更改。

若要刷新设计器，可以执行下列操作之一：

右击设计窗口，然后单击**“刷新”**。
在**“视图”菜单中，单击“刷新”**。

请参见

通过