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

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

在本系列文章中，您将学习如何开发一个简单的 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>

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

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

<!DOCTYPE html>

<head>

<title>My Favorite Movies</title>

</head>

<body>

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

<ul>

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

<li>Lord of the Rings</li>

<li>The Fourth World</li>

</ul>

</div>

</body>

</html>

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

使用超链接

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

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

属性在标记本身上定义，而不是在标记内定义，类似于：

<tag attribute=”attributevalue”>content</tag>

因此，要创建超链接，您可以使用这样的语法：<a href=”http://www.microsoft.com”>Click Here</a>

href 不必是一个像上面这样的网站，也可以是一个执行编程人员所使用的操作的 JavaScript 函数。一种特殊的 href 可在开发期间用作占位符，这样您可以测试超链接的样式是否有效。为此，使用“#”字符作为 href。

所以，为了将所有包含电影的 <li> 项转换为超链接，我们将电影的文本包装在 <a>标记中，将 HREF 设置为 #，类似于以下形式：

<!DOCTYPE html>

<head>

<title>My Favorite Movies</title>

</head>

<body>

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

<ol>

<li><a href="#">It's a wonderful life</a></li>

<li><a href="#">Lord of the Rings</a></li>

<li><a href="#">The Fourth World</a></li>

</ol>

</div>

</html>

如果运行网页，您将看到列表上的元素将使用熟悉的超链接样式，也就是所谓的蓝色下划线：

添加页眉和页脚

将要做的下一件事是向网页添加页眉和页脚。您将使用 HTML5 中提供的新 <header> 和 <footer> 标记来完成此任务。可以在 w3cschools 网站上了解 HTML5 的更多信息：http://w3schools.com/html5/default.asp

<!DOCTYPE html>

<head>

<title>My Favorite Movies</title>

</head>

<body>

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

</header>

<ol>

<li><a href="#">It's a wonderful life</a></li>

<li><a href="#">Lord of the Rings</a></li>

<li><a href="#">The Fourth World</a></li>

</ol>

</div>

This site was built using Microsoft WebMatrix.

<a href="http://web.ms/webmatrix">Download it now.</a>

</footer>

</html>

可以看到，它们是非常简单的 HTML 代码。

对于页眉，我们将前面创建的 <h1> 包装在 <header> 标记中，对于页脚，我们创建一些文本和一个超链接。

在浏览器中查看网页，它现在将类似于以下界面：

除了页脚不同，它没有太多差异，但不用担心，这种情况很快就会改变！

定义网页的外观

在前面一节中，在介绍定位标记时您了解了属性，属性描述元素的行为。对于定位标记，您通过指定 HREF 属性定义了在单击时发生的行为。

可以想象，您可以使用属性指定元素的外观，包括字体样式、字体大小、颜色、边框等等。

所以，举例来说，对于我们前面在网页上定义的 <h1>（其内容为“A list of my Favorite Movies”），您可以更改它的字体和颜色如下：

<h1 style=“color:blue; font-size:32; font-family:Verdana; text-decoration:underline”>A list of my Favorite Movies</h1>

可以看到，<h1> 标记的样式属性包含该样式的定义列表。上面的标记将颜色设置为蓝色，将字体设置为 32，将字体系列设置为 Verdana，并将文本装饰设置为下划线，得到的结果如下所示：

尽管这样能很好地生效，但它并不是设置网页样式的最好方式。想象一下，如果您必须通过这种方式设置每个元素的样式，将会是什么结果。您的网页上最终会有很多文本，减缓下载和浏览的速度。

幸运的是，还有另一种方式，那就是在网页上使用样式表。样式表使用级联样式表概念来定义，其中元素上的样式集可以由子元素继承。举例来说，如果您在 <div> 上设置了一个样式，并且 <div> 具有子元素 <ol> 和 <li>，那么该样式也将应用于它们，除非开发人员改写了此样式。w3cschools 是一个了解 CSS 的好地方：http://w3schools.com/css/default.asp。

我们看一下如何在 <h1> 标记上定义样式，而无需在样式属性上使用很多内联代码。

不用将所有样式代码放在 <h1> 标记本身内，我们只需要指定它的类属性，如下所示：

<h1 class=“Title”>A list of my Favorite Movies</h1>

现在标记有了一个类，我们可以告诉浏览器为拥有此类的所有内容使用一种特定样式。这使用 CSS 代码语法来完成，类似于：

.Title {

font-size: xx-large;

font-weight: normal;

padding: 0px;

margin: 0px;

}

样式“语言”包括一组以分号分隔并包含在花括号（{。.}）中的属性。如果要将此样式应用到一个类，该类会使用“点”语法进行定义，也就是在类名称前添加一个点。

此代码放在网页页眉中的 <style>标记内。您的网页标记应该类似于：

<!DOCTYPE html>

<head>

<title>My Favorite Movies</title>

.Title {

font-size: xx-large;

font-weight: normal;

padding: 0px;

margin: 0px;

}

</style>

</head>

<body>

<h1 class="Title">A list of my Favorite Movies</h1>

</header>

<ol>

<li><a href="#">It's a wonderful life</a></li>

<li><a href="#">Lord of the Rings</a></li>

<li><a href="#">The Fourth World</a></li>

</ol>

</div>

This site was built using Microsoft WebMatrix.

<a href="http://web.ms/webmatrix">Download it now.</a>

</footer>

</html>

当运行它时，样式将生效，您将看到以下界面：

请记住 <h1> 拥有一个“Title”类，所以通过设置 .Title，您可以设置拥有相同类的所有元素的样式。

当希望设置特定元素时，可以为该元素使用一个类（假设该类只有一个实例），或者可以使用一个 id 命名该元素，然后设置该 id 的类。如果看一下您的 HTML，您将会注意到电影列表保存在一个 id 为“moviesList”的 <div> 中。您可以通过在样式表定义中在“moviesList”之前添加 # 来设置它的样式，如下所示：

#movieslist{

font-family： Geneva， Tahoma， sans-serif;

}

这样就定义了 <div> 的样式，并且因为样式表可以级联（只需为它们提供该名称），此 div 中的任何元素都将应用此样式。所以，即使我没有专门设置包含这些文本的 <li> 元素的样式，仍然会应用该样式：

请记住，浏览器默认会将 <ol> 列表中的 <li> 对象呈现为编号项。我们可以设置样式来删除编号项。因为这些对象位于我们称为“movieslist”的 div 的内部，我们可以轻松访问它们来更改其样式。

下面是语法：

#movieslist ol {

list-style： none;

margin： 0;

padding： 0;

border： none;

}

该语法表明，对于 #movieslist 中的每个 <ol>，将样式设置为不是列表（也即没有项目符号）、没有外边距、没有边框、没有内边距。

下面是设置后的结果：

可以看到，现在没有编号。

每个列表项的文本保存在一个 <a> 标记中，所以我们可以使用以下语法，定义 #movieslist 中的每个 <li>标记内的每个 <a> 标记的外观：

#movieslist li a {

font-size: large;

color: #000000;

display: block;

padding: 5px;

}

这里的设置不言自明，我们现在看一下运行网页时的外观。

对于 <a> 标记，当将鼠标悬停在链接上时，会发生另一种行为。您可以使用此行为来“即时跟踪”鼠标，更改将鼠标悬停在元素上时它的样式。CSS 也支持此功能，只需使用以下语法

#movieslist li a:hover{}

所以，我们现在可以定义将鼠标悬停在标记上时执行的操作：

#movieslist li a:hover {

border-left: 10px solid #94c9d4;

padding-left: 10px;

background-color: #e7f5f8;

text-decoration: none;

}

这段代码在文本左侧提供 10 像素的边框，提供一种背景颜色来突出显示文本。

当将鼠标悬停在一个选项上时，您可以看到这一设置的效果：

体验 CSS 非常有趣，而 WebMatrix 简化了这一体验。您在实际操作中可能会想“这个 CSS 确实非常好，但是当我的网站包含多个页面时怎么办呢？”

这个问题非常好，因为 CSS 已经使用 <script> 块集成到了网页 <head> 中。好消息是，<script> 块不用必须使用它内部的脚本，它可以指向外部文件，通过这种方式，指向该文件的任何页面都将能利用相同的样式。

使用 WebMatrix 很容易完成此任务。打开“Files”工作区，单击“New”按钮并选择“New File…”

将打开 New Files 对话框。选择“CSS”作为文件类型并将 CSS 命名为“movies.css”。

按下 OK 就会创建 Movies.css 文件。它将包含一个空 <body> 标记，如下所示：

body {

}

将此标记替换为下面的 CSS。我整理了您在操作过程中使用的一些 CSS 内容，为页眉创建了特定的 CSS，而没有在《h1》上使用 Class 属性，这使 HTML 更加简洁。

body {

font-family: Tahoma, Verdana, Geneva, sans-serif;

width: 85%;

margin: 20px auto;

}

header {

padding: 10px;

border-bottom: 1px solid #e5e5e5;

}

header h1 {

font-size: xx-large;

font-weight: normal;

padding: 0px;

margin: 0px;

}

#movieslist{

margin: 20px 0;

}

#movieslist ul {

list-style: none;

margin: 0;

padding: 0;

}

#movieslist li a {

font-size: large;

color: #000000;

display: block;

padding: 5px;

}

#movieslist li a:hover {

border-left: 10px solid #94c9d4;

padding-left: 10px;

background-color: #e7f5f8;

text-decoration: none;

}

返回到您的网页，删除整个 <script> 标记，将它替换为以下内容：

这会告诉浏览器加载您的样式表，而不是直接在页面内获取样式。您的页面标记现在应该类似于以下形式，您肯定会认为它简洁多了：

<!DOCTYPE html>

<head>

<title>My Favorite Movies</title>

</head>

<body>

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

</header>

<ol>

<li><a href="#">It's a wonderful life</a></li>

<li><a href="#">Lord of the Rings</a></li>

<li><a href="#">The Fourth World</a></li>

</ol>

</div>

This site was built using Microsoft WebMatrix.

<a href="http://web.ms/webmatrix">Download it now.</a>

</footer>

</html>

页脚看起来不太简洁，所以我们向 CSS 文件添加一些样式使它看起来更加美观。

footer {

font-size: smaller;

color: #ccc;

text-align: center;

padding: 20px 10px 10px 10px;

border-top: 1px solid #e5e5e5;

}

这段代码将文本居中，将它设置为较小的灰色字体。设置后的结果如下所示：

小结

在本文中，您了解了如何在 WebMatrix 中使用 CSS，向网页中添加样式信息。您了解了如何外部化 CSS，使它可以在网页之间共享，包括如何设置一个 CSS 类来支持设置多个元素的样式，如何使用 CSS 并使用特定元素的 ID 来设置它的设计，以及如何从容器元素将设计信息级联到它们的子元素中，并允许子元素改写其父元素的样式。

标签：

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