Design View
发布时间: 2016年7月
“设计”视图使用一种近似所见即所得的视图来显示 ASP.NET 网页、母版页、内容页、HTML 页和用户控件。 通过“设计”视图可以对文本和元素进行以下操作:添加、定位、调整大小以及使用特殊菜单或**“属性”**窗口设置其属性。 拆分视图允许您查看和编辑设计视图和源视图中的文档。 默认情况下,两个窗口水平排列。
向页面添加元素时,Visual Web Developer 会创建相应的标记,您也可以在“源”视图中编辑这些标记。 有关详细信息,请参见 NIB: Source View。
若要切换到“设计”视图,请单击位于“HTML 设计器”窗口底部的**“设计”**选项卡。
备注
“设计”视图只显示文档的正文,即显示 <body> 和 </body> 标记之间的部分。虽然使用“文档属性”窗口可以编辑 head 元素的某些属性(如文档的标题),但您必须切换到“源”视图,才能编辑不在 body 元素内的那些元素的属性。
“设计”视图与在 Web 浏览器中进行查看的区别
与页面在浏览器中的显示效果相比,“设计”视图提供的是近似所见即所得的编辑视图。 但是,“设计”视图中所显示的页面与该页面的实际呈现效果并不完全一致,因此,您始终应在一个或多个浏览器中测试页面,以确保页面的显示效果与您的设计预期相符。
“设计”视图中显示的文档与 Web 浏览器中显示的文档的区别如下:
设计图面是可编辑的。
某些元素(如数据源控件)会显示在“设计”视图中,您可以对其进行编辑,但这些元素不会呈现在浏览器中。 某些控件只有在编辑时才出现,大部分这类控件在“设计”视图中呈现为灰色的框。
某些字符和段落格式设置在特定浏览器中的显示可能会有所不同(如果该 Web 浏览器以不同于“设计”视图的方式实现格式设置)。
超链接不起作用。
不运行客户端脚本。
服务器代码不运行。
当指针经过支持备用文本的元素(如图像)时,这些元素不在工具提示中显示备用文本。
显示 null 字符
在“设计”视图中,使用包含 null 字符的模板时,将截断跟在 null 字符后面的字符。 数据不会丢失,但“设计”视图不会在模板中显示跟在 null 字符后面的字符。
在“设计”视图中定位元素
实际上,页面中的元素是按照自上而下的顺序来布局的。 默认情况下,当页面呈现到浏览器中时,其中的元素将以相同的自上而下的顺序呈现。 您也可以采用二维方式对元素进行布局,使用水平和垂直坐标将元素定位到页面中的任何位置。 此布局选项利用的是可以通过样式使用的定位选项。 有关详细信息,请参见 Positioning Elements in Design View。
在“设计”视图中导航
为了帮助您在元素之间移动和选择这些元素,“设计”视图提供了以下选项:
标记导航器。 标记导航器显示当前元素及其所属的父标记的层次结构。 使用标记导航器可以查看具有焦点的元素,还可以从当前元素移动到层次结构中处于较高位置的元素。 有关详细信息,请参见 NIB: Using the Tag Navigator in Visual Web Developer。
文档大纲。 通过**“文档大纲”**窗口,可以定位和选择文档中的所有元素,包括那些不显示的元素。 有关详细信息,请参见NIB: How to: Navigate in the HTML Editor in Visual Web Developer。
**“属性”窗口。 您从“属性”**窗口顶部的下拉列表中选择某个元素时,编辑器就会在文档中选择该元素。
添加元素
在设计尝试中,您可以使用以下方法向页面中添加元素:
从**“工具箱”**拖动这些元素。
双击**“工具箱”**中的某个元素,将在文档中的当前插入点位置插入该元素。
从 Visual Web Developer 中打开的另一个文档拖动这些元素。
从**“解决方案资源管理器”**拖动这些元素。 这种方法主要用于向页面添加用户控件和样式表引用。
直接在页面中键入文本。
“设计”视图中的智能标记
在设计尝试中,许多 ASP.NET 服务器控件都显示智能标记,通过智能标记可以快速访问最常用于配置服务器控件的设置和操作。 默认情况下,在首次向页面添加控件时会显示智能标记。 您还可以随时使用快捷菜单或单击智能标记的符号来显示智能标记。
“设计”视图中的表达式
在“设计”视图中,无法使用**“属性”**窗口来更改表达式的值。 例如,如果为“源”视图中的控件分配表达式,则无法在“设计”视图中更改此表达式的值。 由于已计算表达式的值,因此应使用“源”视图来更改表达式。
刷新设计器
从“源”视图切换到“设计”视图时,可能需要刷新设计器才能看到某些类型的文件更改。 例如,主题代码已分析但并未编译,因此,需要刷新设计器后,才能看到在“源”视图中对主题代码所做的更改。
若要刷新设计器,可以执行下列操作之一:
右击设计窗口,然后单击**“刷新”**。
在**“视图”菜单中,单击“刷新”**。
请参阅
Walkthrough: Creating a Basic Web Forms Page in Visual Studio
NIB: Source View
NIB: Paste Operations in the HTML Editor Source and Design Views
NIB: Using the Tag Navigator in Visual Web Developer
Positioning Elements in Design View
NIB: How to: Navigate in the HTML Editor in Visual Web Developer