·您现在的位置： 云翼网络 >> 文章中心 >> 网站建设 >> 网站建设问答 >> 系列教程 使用微软WebMatrix进行Web开发(3)

【如有意向点此提交需求】关于我们

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

作者：佚名      网站建设问答编辑：admin      更新时间：2022-07-23

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

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

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

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

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

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

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

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

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

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

第 8 部分：最终完成该应用程序，向您展示如何为数据创建删除页面。

第 9 部分：介绍如何使用 WebMatrix 将网站发布到 Internet.

Web 开发 101：第 3 部分，实现某种样式

在第 2 部分，您看到了如何使用 WebMatrix 创建非常简单的网页，以及此页面如何在多种不同浏览器中运行。在这一部分中，您将了解如何更改网页的视觉样式，使用级联样式表 （CSS） 技术。

这里是您在网页上内置的简单电影列表：

 

使用级联样式表准备设置网页样式

在接下来的几步中，您将看到更多的 HTML 标记，它们可用于实现超链接、网页分区和脚本标记等功能，您还将了解如何使用级联样式表 （CSS） 编辑此网页，设置它的外观。最后将使用布局获取此网页和网站上其他网页之间相同的内容，这样可以更轻松地编辑相同内容。

使用分隔线

在 HTML 中，可以使用

标记以逻辑方式将网页划分为几块。这在您在本文后面查看样式时尤其有用，您可以通过设置相应的 div 来指定网页某个部分的样式。

 这里是第一部分中您的网页的 HTML：

<!DOCTYPE html> 

<html lang="en">

    <head>

        <meta charset="utf-8" />

        <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>

            <li>The Lion King</li>

       </ol>

    </body>

</html>

要做的第一件事是将包含电影的列表包装到它自己的 中，如下所示:

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="utf-8" />

  <title>My Favorite Movies</title>

</head>

<body>

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

  <div id="movieslist">

  <ul>

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

    <li>Lord of the Rings</li>

    <li>The Fourth World</li>

    <li>The Lion King</li>

  </ul>

</div>

</body>

</html>

现在可以看到，包含电影的<ol><li> 列表现在包含在<div> 标记中。如果现在查看该网页，会发现与之前没什么不同。这是因为 <div>标记是一个逻辑分隔线。它没有任何物理外观。

使用超链接

您可能已经熟悉超链接 – 一个页面上链接到另一个页面的可单击区域。尽管这些区域称为超链接，但在 HTML 中它们最初称为定位标记 （anchor），因此只要您希望创建超链接，就可以使用 <a> 标记。

<a>（或定位）标记使 <a> 和 </a> 之间的内容可以单击。当用户单击此内容时，浏览器将重定向到 <a> 标记中使用 href 属性指示的一个 HREF（超引用）。