搜尋

首頁 >web前端 >css教學 >WebMatrix進階教學(4)：如何使用版面

WebMatrix進階教學(4)：如何使用版面

黄舟
黄舟原創
2016-12-26 16:43:541177瀏覽

微軟發表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（例如

和頁腳內容）放在一個位置並為您的網頁自動生成這些內容，這樣當建立網頁（例如電影列表）時，該網頁的文件將僅擁有該網頁的主要內容，您可以添加並完全控制剩餘內容。
建立使用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網頁：

WebMatrix進階教學(4)：如何使用版面

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>

這段程式碼是不是看起來很奇怪？程式碼中沒有標記，沒有

或標記，但它仍然能生效！或至少能基本生效。運行它，您將看到以下介面：

WebMatrix進階教學(4)：如何使用版面

页眉和页脚
 
上面的网页非常类似于我们之前创建的网页，但是让我们将网页页眉定义为HTML中包含电影列表的

之前的所有内容，将页脚定义为 HTML中包含电影列表的
之后的所有内容。不要将此与您到目前为止一直使用的 default.html 网页的
和
标记混淆了。
创建一个名为“PageHeader.cshtml”的新网页，将 default.html 中 moviesList
上方的所有内容复制到它之中。它应该类似于：
<!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

下方的所有内容复制到它之中。它应该类似于：


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

当运行网页时，它将类似于以下界面：

WebMatrix進階教學(4)：如何使用版面

它与静态 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”的 

 替换为以下代码：

@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，该网页的内容为 

 和 
  1.  列表。因此我们的理念是，当您浏览到 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
上一篇：WebMatrix進階教學(3)：如何實作某種樣式下一篇：WebMatrix進階教學(3)：如何實作某種樣式

相關文章

看更多