系列教程使用微软WebMatrix进行Web开发(2)

2019-03-19 07:04:46来源：站长之家Chinaz.com 阅读 ()

在本系列文章中，您将学习如何开发一个简单的 Web 应用程序来管理您最喜爱的电影列表。尽管它很简单，但它将展示完整的 Web 应用程序的许多功能，包括使用数据库存储数据，提供让用户向数据库添加数据、编辑和删除数据的功能。（您可能听说过 CRUD – 创建、检索、更新、删除，现在您将学习如何在 WebMatrix 中实现这些操作！）

您还将学习如何通过 WebDeploy 和 WebMatrix 中的主机供应商来部署应用程序！

访问webmatrix专区，了解更详细的动态 http://www.chinaz.com/zt/webmatrix/

WebMatrix：轻量级的一站式免费网站开发工具

内容第 1 部分：向您介绍 WebMatrix 以及如何安装和使用它。

第 2 部分：指导您使用 WebMatrix 创建您的第一个网页。

第 3 部分：让您熟悉 CSS 和样式表，使您可以使自己的页面更加美观。

第 4 部分：介绍布局，以及如何为各个页面中的相同代码使用 WebMatrix 中的布局。

第 5 部分：介绍数据，您将学习如何在网页中使用数据库，以及使网页更加动态。

第 6 部分：介绍如何构建一个页面来让用户可以向数据库添加数据，使您的网站可以呈现该数据。

第 7 部分：介绍如何在一个页面中编辑数据库，实现更改的自动更新。

使用 WebMatrix 创建网站

开发人员可以通过两种方式创建网站。第一种方式是使用一个开源 Web 应用程序（使用“来自 Web 库的网站”选项），其中社区中的成员已为您完成了大量艰难的工作。或许您听说过 WordPress、Drupal、Joomla、Umbraco、DotNetNuke 或 Orchard？WebMatrix 使您可以轻松下载它们的代码，并配置您的服务器来在一个简单且无缝的流程中运行它，无论它们使用何种技术编写。

当然，另一种方法是自行编写所有内容（使用“来自模板的网站”选项）。WebMatrix 附带了 ASP.NET 网页框架，该框架提供了一种非常简单但非常强大的网站创建方式，支持创建使用数据库并能集成社交框架、媒体等内容的动态网站。

本书将介绍如何使用 ASP.NET 网页以及它集成的“Razor”框架，您可以看到创建一个简单网站来提供包含您最喜爱电影的数据库是多么简单。您将了解如何让网站适用于所有浏览器，如何创建网页，如何通过呈现来自数据库的数据而使这些网页更加动态，以及其他许多功能。

在第 2 部分中，您将首先创建网站，然后向其中添加一个静态 HTML 页面。

Web 开发 101：第 2 部分，创建您的第一个网页

在第 1 部分中您了解了 WebMatrix 的基本概念，了解了如何安装并运行它。在本章中将使用它创建您的第一个网站，以及向其中填充您的第一个网页。

创建网站

选择“来自模板的网站”选项，您将看到下面的对话框。请注意，您可能看到许多不同的模板，因为 WebMatrix 的功能不断在改进。您需要使用的是 Empty Site 模板。选择此模板，将它命名为 Movies。

当按下 OK 时，WebMatrix 将为您创建一个新的空网站。然后此网站将被加载到 WebMatrix 编辑器中。您可以在这里看到这一点：

在进一步开发之前，理解在这里看到的一些内容会有所帮助。第一点是 WebMatrix 不仅仅是一个代码编辑工具。它集成了一个名为 IIS Express 的 Web 服务器。Web 服务器是一个特殊的软件，它监听 Internet 的数据请求，通过（通常是向 Web 浏览器）传送该数据来回答该请求。

只要您打开浏览器并键入类似 http://www.microsoft.com 这样的内容，您就会调用 Microsoft 的 Web 服务器，该服务器将通过发送 HTML、JavaScript、CSS、图片等代码来回应。然后您的浏览器会将它们组合到一个网页中。

在 WebMatrix 中内置一个服务器，使您能够像使用 Internet 上的 Web 服务器一样非常轻松地开发网站。如果您查看屏幕，在网站名称（在本例中为“Movies”）的下面您将看到该服务器在地址 http://localhost:8946 上提供该网站，这表明服务器的主机位于本地，也就是位于您的开发机器上。

从 WebMatrix 内，您可以启动该 Web 服务器并运行您的网站，但是如果您现在这么做，将得到一个错误，因为您还未为网站创建任何内容。我们下一步将完成此任务。

创建您的第一个网页

您将注意到，WebMatrix 允许您通过选择左侧的按钮，在不同的工作区之间切换。现在选择的是 Site 按钮，工作区为您显示了网站的详细信息（比如网站的 URL）和您可使用的其他工具（比如监控您的网站请求）。在学习本文的过程中将深入分析每个工作区，但是现在只需按下 Files 按钮选择该工作区。

WebMatrix 现在将打开 Files 工作区，由于您的网站中还没有任何文件，所以它看起来是空的。但是，它提供了一个非常友好的按钮，允许您向网站添加文件，或者您可以使用工具栏中的 New 按钮创建新文件。

无论选择哪种方法，您都将看到 Choose a File Type 对话框，其中提供了针对网络上通常使用的许多不同文件类型的许多选择。

选择 HTML 文件类型，将它命名为 default.html 并按下 OK。WebMatrix 现在将创建一个简单的 HTML 文件并打开它。

HTML（超文本标记语言）文件是一组指令，它告诉浏览器如何绘制网页。它通常包含一个标头和一个正文，标头中包含关于网页本身的指令，正文是网页的内容。内容使用标记来进行标记，内容从尖括号中的标记名称开始，比如 <body>，到尖括号中的斜杠后跟名称结束，比如 </body>。因此，这些标记中的任何内容都会被浏览器视为网页的正文。您可以在 w3cschools.com 上了解 HTML 及其标记的更多内容。http://w3schools.com/html/default.asp。

编辑网页，使它类似于以下形式：

<!DOCTYPE html>

<head>

<title>My Favorite Movies</title>

</head>

<body>

<h1>A list of my Favorite Movies</h1>

<ol>

<li>It's a wonderful life</li>

<li>Lord of the Rings</li>

<li>The Fourth World</li>

</ol>

</body>

</html>

您在 <title> 标记中输入了一些文本，并在 <body> 标记之间添加了一些代码。此代码将使用 <h1> 作为 Heading 1 样式文本，使用 <ol> 告诉浏览器您在呈现一个列表，使用一些 <li> 项告诉浏览器您在呈现一些列表项。

在 WebMatrix 工具栏中，您将看到一个“Run”按钮。

选择它，WebMatrix 将启动浏览器，打开在您的本地服务器上运行的网站。

这里发生了很多事情。我们详细分析一下。

Web 服务器

注意到浏览器上的地址栏了吗？它没有打开您硬盘上的文件，但它启动了 Web 服务器并将浏览器指向该 Web 服务器，要求它提供文件 default.html。

看一下您 PC 上的系统托盘，您将看到一个小图标表明 Web 服务器 IIS Express 正在运行。

右键单击它，您将看到它正在运行您的 Movies 网站。

网页标题

现在看一下网页的浏览器选项卡。它应该包含文本“My Favorite Movies”。为了进行比较，我们在 Internet Explorer、Chrome、Safari、FireFox 和 Opera 中运行同一个网站。可以注意到，该文本是您输入到网页的 <head> 中的 <title> 标记内的内容，您通过这种方式告诉浏览器这是网页标题。不同的浏览器会采用不同的方式处理网页标题。

Internet Explorer：

Chrome：

Safari：

Firefox：

Opera：

Web 开发人员需要注意的是，不同的浏览器执行操作的方式稍微不同。在不同的浏览器上测试您的网页，检查它的行为是否符合预期，这是个不错的想法。

注意：在不同的浏览器中启动您的网站

WebMatrix 的一个真正不错的方面不是为您提供了一个在开发机器上运行的 Web 服务器，而是能够快速启动您安装的任何浏览器。可以单击 WebMatrix 工具功能区中的 Run 按钮底部的向下箭头体验这一点。

该列表将仅显示您已安装的浏览器。

网页正文

在代码中，您在语句“A list of my Favorite Movies”两边使用了 <h1> 标记。这告诉浏览器使用“Heading 1”样式，这样您可以看到它采用一种较大的加粗字体呈现。

最后，使用 <ul>（表示“未排序的列表”）和 <li>（表示“列表项”）标记编写最喜爱的电影列表，然后浏览器呈现它们。请注意，您没有在列表中添加任何项目符号，但浏览器仍然呈现了项目符号 – 这是因为这是浏览器将用于呈现 <li> 项的默认样式。在本教程的第 3 部分中，您将了解如何修改此样式，采用您想要的方式来呈现列表项。

小结

在这一部分中，使用 WebMatrix 创建了一个简单的网页，您了解了如何使用 Web 服务器在网站中呈现该网页。您创建了第一个 HTML 页面，编写了一些 HTML 标记来告诉浏览器如何呈现该网页。您还了解了可以向标题中添加某种标记来定义网页数据，向正文中添加标记来定义网页内容。然后您运行该网页并看到它在多个不同的浏览器中的工作方式。在下一个教程中，您将学习如何设置网页的样式来使它更加美观！

在本系列文章的下一部分中，您将了解样式和级联样式表，以及如何使用它们使您的网页更加美观！

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有