“设计”视图

项目
08/18/2008

更新：2007 年 11 月

“设计”视图使用一种近似所见即所得的视图来显示 ASP.NET 网页、母版页、内容页、HTML 页和用户控件。通过“设计”视图可以对文本和元素进行以下操作：添加、定位、调整大小以及使用特殊菜单或“属性”窗口设置其属性。

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

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

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

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

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

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

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

显示不可见元素

为了帮助您编辑页面，“设计”视图可以显示通常情况下在浏览器中不可见的某些元素，如隐藏字段。“设计”视图还可以将运行时不呈现标记的 ASP.NET 服务器控件（如数据源控件）显示为灰色框或其他表示形式。

另外，您还可以选择显示对使用页面中的元素和标记有帮助的边框和符号。有关详细信息，请参见如何：在“设计”视图中显示隐藏信息。

显示 null 字符

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

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

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

在“设计”视图中导航

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

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

添加元素

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

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

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

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

“设计”视图中的表达式

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

刷新设计器

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

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

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

请参见

Share via