演练：Visual Web Developer 中的基本 HTML 编辑

  • 项目

更新：2007 年 11 月

Microsoft Visual Web Developer Web 开发工具提供了丰富的 HTML 编辑经验，该编辑经验使您可以在 WYSIWYG（所见即所得）模式中工作以便对网页进行可视化处理，还使您可以直接使用 HTML 标记以便进行更好的控制。本演练介绍 Visual Web Developer 的 HTML 编辑功能。

本演练演示的任务包括：

  • 在“设计”视图中创建和编辑 HTML。

  • 在“源”视图中创建和编辑 HTML。

  • 使用“拆分”视图。

  • 使用导航工具在 HTML 标记之间快速移动。

先决条件

为了完成本演练，您需要：

  • 对 Visual Web Developer 有一个大概的了解。

有关在 Visual Web Developer 中创建网页的介绍，请参见演练：在 Visual Web Developer 中创建基本网页。

在本演练中，将使用一个网站和一个 ASP.NET 网页，该网页与在演练：在 Visual Web Developer 中创建基本网页中创建的网页相似。如果您已完成该演练，则可以使用其中创建的网站和网页。

创建网站和网页

如果您已经在 Visual Web Developer 中创建了网站（例如，通过完成演练：在 Visual Web Developer 中创建基本网页），则可以使用该网站，并转至下一节。否则，按照下面的步骤创建一个新的网站和网页。

创建文件系统网站

  1. 打开 Visual Web Developer。

  2. 在**“文件”菜单上单击“新建网站”**。

    出现**“新建网站”**对话框。

  3. 在**“Visual Studio 已安装的模板”之下单击“ASP.NET 网站”**。

  4. 在**“位置”**框中输入要保存网站页面的文件夹的名称。

    例如，键入文件夹名“C:\WebSites”。

  5. 在**“语言”**列表中，单击您想使用的编程语言。

  6. 单击**“确定”**。

    Visual Web Developer 创建该文件夹和一个名为 Default.aspx 的新页。

在“设计”视图中工作

在演练的此部分中，您将了解如何在“设计”视图（该视图提供页的类似于 WYSIWYG 的视图）中工作。可以通过键入添加文本，如同在字处理程序中那样。可以使用格式设置命令直接设置文本格式或通过创建内联样式设置文本格式。

“设计”视图显示页的方式与页在浏览器中的显示方式类似，但是也存在一些差异。第一个差异是在“设计”视图中，文本和元素是可编辑的。第二个差异是为了帮助编辑页，“设计”视图显示一些在浏览器中不显示的元素和控件。另外，某些元素（如 HTML 表）具有特殊的“设计”视图呈现，这种呈现为编辑器添加了额外的空间。总之，“设计”视图帮助您对页进行可视化处理，但是不会精确地表示页在浏览器中的呈现方式。

在“设计”视图中添加静态 HTML 并设置其格式

  1. 如果未处于“设计”视图中，请单击位于窗口左下角的**“设计”**。

  2. 在页的顶端，键入“ASP.NET 网页”。

  3. 突出显示该文本以将其选定，然后在**“样式应用”工具栏上单击“标题 1”**。

  4. 将插入指针放置在**“ASP.NET 网页”**下，然后键入“此页由 ASP.NET 管理。”

  5. 突出显示该文本，然后在**“格式”菜单上单击“新建样式”**。

    **“新建样式”**对话框随即显示。

  6. 单击以选中**“将新样式应用于文档选择内容”**框。

  7. 从**“字体系列”下拉列表中选择一种字体，然后单击“应用”**。

    该字体系列随即应用于选定的文本。

  8. 在**“类别”下单击“块”，然后从“行高”下拉列表中选择“(值)”**。输入行高值。

  9. 从**“字母间距”下拉列表中选择“(值)”。输入字母间距值。单击“应用”**，查看应用于选定文本的值。

  10. 单击**“确定”**。

查看标记信息

在“设计”视图中工作时，您可能会发现查看设计图面标记（如 div 和 span）以及其他没有可视化呈现功能的标记是十分有用的。

在“设计”视图中查看 HTML 设计图面标记

  • 在**“视图”菜单上指向“可视辅助”**，然后单击“ASP.NET 非可视控件”。

    设计器显示段落、分行符和其他不呈现文本的标记的符号。

添加控件和元素

在“设计”视图中，可以从工具箱中将控件拖动到页上。可以使用对话框添加某些元素（如 HTML 表）。在本节中，将添加一些控件和一个表以供您稍后在演练中使用。

添加控件和表

  1. 将插入指针放置在**“此页由 ASP.NET 管理。”**的结束段落标记的右侧，然后按 Enter。

  2. 从工具箱的**“标准”**组中，将一个 TextBox 控件拖到页上。

    9z74w20y.alert_note(zh-cn,VS.90).gif说明：

    也可以通过双击一个控件进行添加。

  3. 将一个 Button 控件拖到页上。

    TextBox 和 Button 控件是 ASP.NET Web 服务器控件，而不是 HTML 元素。

  4. 在**“表”菜单上单击“插入表”**。

    出现**“插入表”**对话框。

  5. 单击**“确定”**。

    **“插入表”**对话框提供用于配置所创建的表的选项。但是对于本演练，您可以使用默认表布局。

创建超链接

“设计”视图提供生成器和其他工具以帮助创建需要进行属性设置的 HTML 元素。

创建超链接

  1. 在文本**“此页由 ASP.NET 管理。”中，突出显示“ASP.NET”**以选择它。

  2. 在**“格式”菜单上单击“转换为超链接”**。

    出现**“超链接”**对话框。

  3. 在**“URL”**框中，键入“https://www.asp.net”。

  4. 单击**“确定”**。

在“属性”窗口中设置属性

通过在“属性”窗口中设置值可以更改页上元素的外观和行为。

使用“属性”窗口设置属性

  1. 单击在本演练的前面部分“添加控件和元素”中添加的 Button 控件。

  2. 在“属性”中，将**“文本”设置为“单击此处”，将“前景色”设置为另一种颜色，将“粗体”**设置为 true。

  3. 将插入点放置在上一节中创建的**“ASP.NET”**超链接中。

    注意，在“属性”窗口中，a 元素的 HRef 属性设置为向该超链接提供的 URL。

测试该页

通过在浏览器中查看页可以看到编辑的结果。

以外部方式在浏览器中启动页

  • 右击该页，然后单击**“在浏览器中查看”**。

    • 如果提示您保存更改，则单击**“是”**。

    Visual Web Developer 启动 Visual Web Developer Web 服务器，该服务器是可以用于在不使用 IIS 的情况下测试页的本地 Web 服务器。

更改默认视图

默认情况下，Visual Web Developer 在“源”视图中打开新页。

将默认页面视图更改为“设计”视图

  1. 在**“工具”菜单上单击“选项”**

  2. 在“选项”对话框中单击**“常规”，然后在“起始页位置”下方单击“设计视图”**。

9z74w20y.alert_note(zh-cn,VS.90).gif说明：

可以通过多种方式运行页。如果按 Ctrl+F5，则 Visual Web Developer 会执行在属性页上为“启动选项”配置的启动操作。Ctrl+F5 的默认启动选项为运行当前页；即“源”视图或“设计”视图中当前活动的页。也可以在调试器中运行页。有关更多信息，请参见演练：在 Visual Web Developer 中调试网页。

在“源”视图中工作

“源”视图使您可以直接编辑页的标记。“源”视图编辑器为您提供了许多在创建 HTML 和 ASP.NET 控件时有所帮助的功能。同在“设计”视图中一样，可以在“源”视图中使用工具箱向页中添加新元素。

在“源”视图中添加元素

  1. 通过单击位于窗口左下角的**“源”切换到“源”**视图。

    已添加的控件是作为 <asp:> 元素创建的。例如，Button 控件为 <asp:button> 元素。所进行的属性 (Property) 设置作为属性 (Attribute) 设置保留在 <asp:button> 标记中。

  2. 从工具箱的**“HTML”组（而不是“标准”**组）中将一个 Table 控件拖到页上，并将其直接放置在 </form> 结束标记的上方。

编辑器在您手动键入标记时也有所帮助。例如，编辑器在您键入时提供上下文相关的结束 HTML 标记和属性选择。通过在有问题的标记下方标记波浪线，编辑器还提供有关标记的错误和警告信息。将鼠标放置在标记文本上可以查看错误或警告信息。

在“源”视图中编辑 HTML

  1. 将插入点放置在 </form> 结束标记上方，然后键入一个左尖括号 (<)。

    注意，编辑器提供了在当前上下文中适用的标记的列表。

  2. 突出显示**“a”**以选择它，然后按空格键。

    编辑器显示适用于定位点标记的属性的列表。

  3. 在该列表中，单击**“href”**，然后键入一个等号和一个双引号 (=")。

    编辑器提供用于链接到的当前可用页的列表，以及一个用于打开**“Homepicker”**对话框的选项。

  4. 在文件列表中，双击**“Default.aspx”**，按空格键，然后键入一个右尖括号 (>) 以结束标记。

    编辑器插入一个 </a> 结束标记。

  5. 完成定位点元素以使其使用链接文本“主页”链接到 Default.aspx 页，如下所示：

    <a href="Default.aspx">Home</a>

  6. 将插入点放置在 a 标记中。

    注意，“属性”(Property) 显示标记的属性 (Attribute)。

  7. 在“属性”窗口中，对于**“HRef”**属性，单击省略号 (…) 按钮。

    出现**“选择项目项”**对话框。

    现在可以选择当前网站中的一页作为目标页。如果在从中选择的网站中没有其他页，则关闭**“选择项目项”对话框，并在“属性”**窗口的 Href 框中键入一个喜爱的 URL。

  8. 将插入点直接放置在 </form> 结束标记的上方，然后键入“<无效>”。

    编辑器在该标记下方标记波浪线，指示该标记不是已识别的 HTML 标记。

  9. 移除在上一步中创建的标记。

检查 HTML 格式设置

页设计器的一个重要功能是保留应用于页的 HTML 格式设置，除非您显式指定编辑器重新设置文档格式。

检查 HTML 格式设置

  1. 通过对齐 Button 控件的属性来重新设置这些属性的格式，以使声明性语法类似于下面这样：

    <asp:Button
    id="Button1"    runat="server"    Font-Bold="True"    ForeColor="Blue"    Text="Click Here" />

    注意，在缩进第一个属性后，如果在标记中按 Enter，则后面的行会缩进以匹配。

  2. 切换到“设计”视图。

  3. 右击新的 Button 控件，然后单击**“复制”**。

  4. 将插入点放置在新 Button 控件的下方，右击，然后单击**“粘贴”**。

    这会创建一个 ID 为 Button2 的按钮。

  5. 从工具箱的**“标准”**组中，将第三个 Button 控件拖到页上，该控件创建 <Button3>。

  6. 切换到“源”视图。

    注意，<Button2> 的格式设置方式与 <Button1> 的格式设置方式相同。另一方面，<Button3> 的格式是使用 asp:button 元素的默认格式设置来设置的。

    9z74w20y.alert_note(zh-cn,VS.90).gif说明：

    有关如何对各元素的格式设置进行自定义的更多信息，请参见演练：Visual Web Developer 中的高级 HTML 编辑。

  7. 编辑文档以便 <Button1> 和 <Button2> 位于同一行上，且它们之间不存在空格：

    <asp:Button ID="Button1" runat="server" Font-Bold="True" 
ForeColor="Blue" Text="Click Here" /><asp:Button ID="Button2" 
runat="server" Font-Bold="True" ForeColor="Blue" Text="Click Here"/>

    元素可以换行，但是 <Button1> 的结尾（即 />）后必需紧跟 <Button2> 的开头（即 <asp:Button ID=）。

  8. 切换到“设计”视图。

    注意，<Button1> 和 <Button2> 紧靠在一起，它们之间没有空格。

  9. 切换到“源”视图

  10. 在**“编辑”菜单上单击“设置文档的格式”**。

    文档格式被重新设置，但是 <Button1> 和 <Button2> 仍在同一行上。如果编辑器要分隔按钮，则它会在呈现过程中引入空格。因此，编辑器不会更改已创建的格式设置。

在“拆分”视图中工作

使用“拆分”视图，您可以同时查看“设计视图”和“源视图”窗口。

在“拆分”视图中查看页面

  • 通过单击位于窗口左下角的**“拆分”切换到“拆分”**视图。

在元素之间导航

随着页大小和复杂度的不断增加，能够快速查找标记和减少页中的混乱变得十分有用。Visual Web Developer 提供以下工具在您在“源”视图中工作时帮助完成这些任务：

  • 文档大纲，提供文档的完整视图。

  • 标记导航器，提供有关当前选择的标记和该标记在页层次结构中的位置的信息。

要开始，请向页添加更多元素以便能够检查导航功能。

添加元素

  1. 切换到**“设计”**视图。

  2. 从工具箱的**“HTML”**组中，将一个 Table 控件拖动到在本演练的前面部分“在‘源’视图中工作”中创建的表的一个单元格中。

  3. 从工具箱的**“标准”**组中，将一个 Button 控件拖动到嵌套表的中间单元格中。

使用页上的几个嵌套元素可以查看“文档大纲”如何提供到页中任何元素的快速导航。

使用“文档大纲”导航

  1. 切换到**“源”**视图。

  2. 在**“视图”菜单上单击“文档大纲”**。

  3. 在“文档大纲”中，单击**“Button4”**。

    在编辑器中，在上面过程中添加的 <Button4>控件被选择。

标记导航器提供有关当前选择的标记和该标记在页层次结构中的位置的信息。

使用标记导航器导航

  1. 将插入点放置在 <asp:button> 标记中。

    注意窗口底部的标记导航器，该导航器显示 <asp:button> 标记及其父标记。标记导航器包括元素的 ID（如果有），以使您可以标识正显示哪个元素。标记导航器还显示用 Class 属性设置的已分配的级联样式表（如果有）。

  2. 在标记导航器中，单击离 <asp:button#Button4> 标记最近的 <table> 标记。

    标记导航器移动到内部 <table> 元素并选择该元素。

  3. 在标记导航器中，单击所选择的 <table> 左侧的 <td> 标记。

    包含嵌套表的整个单元格被选择。

    9z74w20y.alert_note(zh-cn,VS.90).gif说明：

    可以使用标记导航器标记中的下拉列表来单击选择标记或其内容。默认情况下，在标记导航器中单击一个标记会选择该标记及其内容。

还可以使用标记导航器来帮助移动或复制元素。

使用标记导航器移动或复制元素

  1. 使用标记导航器选择包含 <Button4> 的 <tr> 标记。

  2. 按 Ctrl+C 复制该标记。

  3. 使用标记导航器移动到外部表。

  4. 在“源”视图中，将插入指针放置在 <table> 标记与第一个 <tr> 标记之间。

  5. 按 Ctrl+V 将复制的行粘贴到表中。

  6. 切换到“设计”视图。

    注意，新行已添加（包括 Button 控件）。

设置文本格式

  • **“格式设置”**工具栏将内联样式应用于大多数设置。使用 b 和 i 标记可应用粗体和斜体格式设置。段落格式设置通过块标记来应用，如 p（用于正常情况）、pre（用于已设置格式的情况）等。通过使用内联样式以符合 XHTML 1.1 标准的方法可应用段落对齐。

  • 设计器还使您可以创建 style 块和指向级联样式表的链接。有关更多信息，请参见演练：创建和修改 CSS 文件。

  • 默认情况下，编辑器会创建与 XHTML 1.1 标准相符的标记，并将所有 HTML 标记名称转换为小写（即使这些名称是以大写方式键入的）。编辑器还用引号将属性 (Attribute)（属性 (Property)）值括起来。有关更多信息，请参见演练：Visual Web Developer 中的高级 HTML 编辑。

更改默认标记验证

  1. 在“源”视图中，右击页，然后单击**“格式设置与验证”**。

  2. 在**“选项”对话框中展开“文本编辑器 HTML”，然后单击“验证”**。

  3. 在**“目标”**列表中，输入验证类型。

后续步骤

本演练已为您提供了网页编辑器的 HTML 功能的概述。这包括如何在“设计”视图和“源”视图、基本格式设置和导航中创建 HTML。您可能希望了解有关 Visual Web Developer 中的编辑功能的更多信息。例如，您可能希望执行下列操作：

请参见

任务

演练：Visual Web Developer 中的高级 HTML 编辑

概念

“设计”视图

参考

“源”视图