搜索
首页web前端css教程WebMatrix进阶教程(4):如何使用布局

微软发布Web开发工具WebMatrix的进阶教程,帮助开发人员人士认识这一号称微软史上最强的Web开发工具。接下来本期将继续为您介绍以下教程。

导读:Microsoft WebMatrix是一个免费的工具,可用于创建、自定义和在Internet上发布网站。
WebMatrix使您能够轻松创建网站。您可以从一个开源应用程序(比如WordPress、Joomla、 DotNetNuke或Orchard)开始,WebMatrix会为您处理下载、安装和配置这些应用程序的任务。或者您可以使用许多内置的模板自行编写代码,这些模板有助于您迅速上手。无论您做何选择,WebMatrix都提供了您的网站运行所需的一切内容,包括Web服务器、数据库和框架。通过在您的开发桌面使用与您将在Web主机上使用的相同堆栈,将网站上线的过程变得既轻松又顺利。
您可以从http://web.ms/webmatrix下载它。
现在您只需花几个小时便可学会使用WebMatrix、CSS、HTML、HTML5、ASP.NET、SQL、数据库等知识以及如何编写简单的Web应用程序。内容如下:
 
目前为止,您了解了如何使用WebMatrix创建一个非常简单的网页,此网页如何在多种不同的浏览器中运行,以及如何使用CSS样式来使基本的网页更加美观。
 
在本章中,您将更进一步,开始使用服务器编程。您可能习惯于客户端编程,比如构建在电话、桌面上运行的应用程序或者甚至在浏览器内运行的JavaScript应用程序。服务器编程的重要区别在于,许多应用程序代码不在客户端设备上运行。相反,最终用户的操作会向服务器发起网页请求,如果该网页是“活动”网页,服务器将运行代码并使用该代码生成将发送给浏览器的 HTML 标记和值。然后浏览器呈现此 HTML,用户会看到显示的结果。
 
随着您技能的不断提升,您将发现有时候将代码混搭在一起会很有用,一些代码在浏览器上运行(通常使用JavaScript或Silverlight等富Internet应用程序(RIA)技术),剩余代码在服务器上运行。
 
WebMatrix为网页编程引入了Razor语法,它提供的一项功能非常强大,但非常简单,那就是布局引擎。在本文中我们将介绍使用布局功能将所有常见的HTML(比如 93f0f5c25f18dab9d176bd4f6de5d30e和页脚内容)放在一个位置并为您的网页自动生成这些内容,这样当构建网页(比如电影列表)时,该网页的文件将仅拥有该网页的主要内容,您可以添加并完全控制剩余内容。
创建使用Razor的CSHTML网页

目前为止,您创建了使用.HTM 或 .HTML扩展名的HTML网页。这些是静态网页,所以浏览器调用它们的地址时,服务器会将它们和它们的内容发送给浏览器。服务器不会以任何方式处理该网页。
您可能听说过“动态”网页,这些网页是服务器基于HTML以及在服务器上运行来确定应该如何构建网页的代码所构建的,构建的内容将HTML化。动态网页能够实现真正强大的使用场景,本系列的后续内容将使用它们。除此之外,它们将允许您将电影存储到数据库中,让服务器利用数据库中的数据生成您网页的内容,您无需直接在 HTML 网页上编写电影标题,也无需在希望更改列表时更改网页。
在本节中,您将创建第一个动态网页。
 
在WebMatrix 中,动态网页具有 .CSHTML 或 .VBHTML扩展名。它们实际上是HTML文件,包含使用 C# (CS) 或 Visual Basic (VB) 编写的内联代码,这从扩展名可以看出。我将使用 CSHTML 文件,这样能够使用 C# 语言在网页上编写内联代码。执行此操作的方法,以及支持在 HTML 内部执行此操作的语法具有昵称“Razor”。
我们创建一个动态网页。
 
使用WebMatrix,在 Files 工作区中,创建一个名为movies.cshtml的新CSHTML网页:

323.png

WebMatrix将创建一个网页,它看起来像一个基本的HTML网页。将此网页的内容替换为以下内容:

<div id="movieslist">  
  <ol>  
   <li><a href="#">Its a wonderful life</a></li>  
   <li><a href="#">Lord of the Rings</a></li>  
   <li><a href="#">The Fourth World</a></li>  
   <li><a href="#">The Lion King</a></li>  
  </ol>  
 </div>

这段代码是不是看起来很奇怪?代码中没有6a74014ee44f5deb5894267f99b68016标记,没有ef1cac8df639bc9110cb13b8b5ab3dd7或a64997a0904a094b4570728d7f327acd标记,但它仍然能生效!或者至少能基本生效。运行它,您将看到以下界面:

324.png

页眉和页脚
 
上面的网页非常类似于我们之前创建的网页,但是让我们将网页页眉定义为HTML中包含电影列表的dc6dce4a544fdca2df29d5ac0ea9906b之前的所有内容,将页脚定义为 HTML中包含电影列表的dc6dce4a544fdca2df29d5ac0ea9906b 之后的所有内容。不要将此与您到目前为止一直使用的 default.html 网页的 1aa9e5d373740b65a0cc8f0a02150c53 和 c37f8231a37e88427e62669260f0074d 标记混淆了。
创建一个名为“PageHeader.cshtml”的新网页,将 default.html 中 moviesList dc6dce4a544fdca2df29d5ac0ea9906b 上方的所有内容复制到它之中。它应该类似于:

<!DOCTYPE html>  
<html lang="en">  
<head>  
  <meta charset="utf-8" />  
  <title>My Favorite Movies</title>  
  <link rel="stylesheet" type="text/css" href="movies.css" />  
</head>  
<body>  
  <header>  
    <h1>A list of my Favorite Movies</h1>  
  </header>

类似地,创建一个名为“PageFooter.cshtml”的新网页,将 default.html中moviesList dc6dce4a544fdca2df29d5ac0ea9906b下方的所有内容复制到它之中。它应该类似于:


 <footer>  
  This site was built using Microsoft WebMatrix.   
    <a href="Download>http://web.ms/webmatrix">Download it now.</a>  
  </footer>  
</html>

使用Razor动态添加页眉和页脚
 
现在您创建了这两个网页,接下来使用“Razor”编写第一部分服务器代码。WebMatrix 通过使用“@”字符,突出了HTML和“Razor”代码之间的区别。将此字符放在指示服务器如何操作的任何代码行之前。
例如,以下命令:
@RenderPage("pagename")将导致服务器从“pagename”加载HTML并将它放在当前文件中的此位置。所以对于我们的示例,如果将movies.cshtml更改为:

@RenderPage("PageHeader.cshtml")  
  <div id="movieslist">  
  <ol>  
    <li><a href="#">Its a wonderful life</a></li>  
    <li><a href="#">Lord of the Rings</a></li>  
    <li><a href="#">The Fourth World</a></li>  
    <li><a href="#">The Lion King</a></li>  
  </ol>  
  </div>  
@RenderPage("PageFooter.cshtml")

当运行网页时,它将类似于以下界面:

325.png

它与静态 HTML 文件的外观完全一样。您不应该感到奇怪,因为它现在具有相同的页眉和页脚(包括要求网页加载 CSS 的代码)以及相同的正文文本。但是可以看到,现在对页面的处理轻松多了,因为所有页眉和页脚代码都不需要处理,您创建的任何新网页都将具有相同的页眉、页脚和样式表。
 
创建布局网页
 
使用此方法,您创建了网页,然后在页面运行时使用Razor代码将页眉和页脚代码包含在网页上。这是一种自底向上的方法。
另一种可能更有效的方法是创建一个布局,将该布局用作每个网页的模板,然后将您想要的特定内容包含在该模板中。这更像是一种自顶向下的方法。
我们看一下它的工作原理:创建一个新CSHTML网页,您将它命名为 _siteLayout.cshtml。
将创建的网页的内容替换为以下内容。您可能发现这些代码很熟悉,因为它们是您之前创建的静态 default.html 网页中的所有内容

 <!DOCTYPE html>  
<html lang="en">  
<head>  
  <meta charset="utf-8" />  
  <title>My Favorite Movies</title>  
  <link rel="stylesheet" type="text/css" href="movies.css" />  
</head>  
<body>  
  <header>  
    <h1>A list of my Favorite Movies</h1>  
  </header>  
    
  

现在将名为“movieslist”的 dc6dce4a544fdca2df29d5ac0ea9906b 替换为以下代码:

@RenderBody()

请记住,前面我们说过“@”符号告诉WebMatrix此时在服务器上运行代码。RenderBody 命令只是告诉 WebMatrix 在此位置呈现网页的内容。

下面是 _sitelayout.cshtml 网页现在应该包含的内容:

<!DOCTYPE html>  
<html lang="en">  
<head>  
  <meta charset="utf-8" />  
    <title>My Favorite Movies</title>  
    <link rel="stylesheet" type="text/css" href="movies.css" />  
  </head>  
<body>  
  <header>  
    <h1>A list of my Favorite Movies</h1>  
  </header>  
  @RenderBody()  
  <footer>  
    This site was built using Microsoft WebMatrix.   
    <a href="http://web.ms/webmatrix">Download it now.</a>  
  </footer>  
</html>

所以,对于您刚才创建的网页movies.cshtml,该网页的内容为 dc6dce4a544fdca2df29d5ac0ea9906b 和 c34106e0b4e09414b63b2ea253ff83d625edfb22a4f469ecb59f1190150159c6 列表。因此我们的理念是,当您浏览到 CSHTML 网页时,WebMatrix 将使用布局网页确定如何绘制网页,因此它获取标题、CSS 和来自布局网页的所有内容。

在尝试此代码之前,不要忘记从movies.cshtml 删除@RenderPage 命令。

然后新建 _PageStart.cshtml

把其中的内容替换为:

@{  
    Layout = "~/_siteLayout.cshtml";  
 }

_PageStart.cshtml告诉启动的 cshtml 页与布局文件关联


现在启动movies.cshtml,便可看到效果


备注:movies.css


[css] view plain copy

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;  
}  
footer {  
font-size: smaller;  
color: #ccc;  
text-align: center;  
padding: 20px 10px 10px 10px;  
border-top: 1px solid #e5e5e5;  
}

 以上就是WebMatrix进阶教程(4):如何使用布局的内容,更多相关内容请关注PHP中文网(www.php.cn)!


声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
将框阴影添加到WordPress块和元素将框阴影添加到WordPress块和元素Mar 09, 2025 pm 12:53 PM

CSS盒子阴影和轮廓属性获得了主题。让我们查看一些在真实主题中起作用的示例,以及我们必须将这些样式应用于WordPress块和元素的选项。

使用GraphQL缓存使用GraphQL缓存Mar 19, 2025 am 09:36 AM

如果您最近开始使用GraphQL或审查了其优点和缺点,那么您毫无疑问听到了诸如“ GraphQl不支持缓存”或

使您的第一个自定义苗条过渡使您的第一个自定义苗条过渡Mar 15, 2025 am 11:08 AM

Svelte Transition API提供了一种使组件输入或离开文档(包括自定义Svelte Transitions)时动画组件的方法。

优雅且酷的自定义CSS卷轴:展示柜优雅且酷的自定义CSS卷轴:展示柜Mar 10, 2025 am 11:37 AM

在本文中,我们将深入研究滚动条。我知道,这听起来并不魅力,但请相信我,一个精心设计的页面是齐头并进的

展示,不要说展示,不要说Mar 16, 2025 am 11:49 AM

您花多少时间为网站设计内容演示文稿?当您撰写新的博客文章或创建新页面时,您是在考虑

使用Redwood.js和Fauna构建以太坊应用使用Redwood.js和Fauna构建以太坊应用Mar 28, 2025 am 09:18 AM

随着最近比特币价格超过20k美元的攀升,最近打破了3万美元,我认为值得深入研究创建以太坊

NPM命令是什么?NPM命令是什么?Mar 15, 2025 am 11:36 AM

NPM命令为您运行各种任务,无论是一次性或连续运行的过程,例如启动服务器或编译代码。

让我们使用(x,x,x,x)来谈论特殊性让我们使用(x,x,x,x)来谈论特殊性Mar 24, 2025 am 10:37 AM

前几天我只是和埃里克·迈耶(Eric Meyer)聊天,我想起了我成长时代的埃里克·迈耶(Eric Meyer)的故事。我写了一篇有关CSS特异性的博客文章,以及

See all articles

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

AI Hentai Generator

AI Hentai Generator

免费生成ai无尽的。

热门文章

R.E.P.O.能量晶体解释及其做什么(黄色晶体)
3 周前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳图形设置
3 周前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.如果您听不到任何人,如何修复音频
3 周前By尊渡假赌尊渡假赌尊渡假赌

热工具

MinGW - 适用于 Windows 的极简 GNU

MinGW - 适用于 Windows 的极简 GNU

这个项目正在迁移到osdn.net/projects/mingw的过程中,你可以继续在那里关注我们。MinGW:GNU编译器集合(GCC)的本地Windows移植版本,可自由分发的导入库和用于构建本地Windows应用程序的头文件;包括对MSVC运行时的扩展,以支持C99功能。MinGW的所有软件都可以在64位Windows平台上运行。

安全考试浏览器

安全考试浏览器

Safe Exam Browser是一个安全的浏览器环境,用于安全地进行在线考试。该软件将任何计算机变成一个安全的工作站。它控制对任何实用工具的访问,并防止学生使用未经授权的资源。

适用于 Eclipse 的 SAP NetWeaver 服务器适配器

适用于 Eclipse 的 SAP NetWeaver 服务器适配器

将Eclipse与SAP NetWeaver应用服务器集成。

SublimeText3 英文版

SublimeText3 英文版

推荐:为Win版本,支持代码提示!

mPDF

mPDF

mPDF是一个PHP库,可以从UTF-8编码的HTML生成PDF文件。原作者Ian Back编写mPDF以从他的网站上“即时”输出PDF文件,并处理不同的语言。与原始脚本如HTML2FPDF相比,它的速度较慢,并且在使用Unicode字体时生成的文件较大,但支持CSS样式等,并进行了大量增强。支持几乎所有语言,包括RTL(阿拉伯语和希伯来语)和CJK(中日韩)。支持嵌套的块级元素(如P、DIV),