搜尋
首頁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(例如

和頁腳內容)放在一個位置並為您的網頁自動生成這些內容,這樣當建立網頁(例如電影列表)時,該網頁的文件將僅擁有該網頁的主要內容,您可以添加並完全控制剩餘內容。
建立使用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 id="A-nbsp-list-nbsp-of-nbsp-my-nbsp-Favorite-nbsp-Movies">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 id="A-nbsp-list-nbsp-of-nbsp-my-nbsp-Favorite-nbsp-Movies">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 id="A-nbsp-list-nbsp-of-nbsp-my-nbsp-Favorite-nbsp-Movies">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
滑動頁腳滑動頁腳Apr 09, 2025 am 11:50 AM

剛剛推出了一個引人入勝的新網站。標語:Big Tech正在看著您。我們正在看大型技術。上升的出色工作。這

喜歡的頁面喜歡的頁面Apr 09, 2025 am 11:47 AM

前幾天,我發布了有關在JavaScript中解析RSS提要的內容。我還發布了有關RSS設置的信息,討論了Feedbin的核心。

重新創建Codepen Gutenberg嵌入塊以進行理智。重新創建Codepen Gutenberg嵌入塊以進行理智。Apr 09, 2025 am 11:43 AM

了解如何通過Chris Coyier實施WordPress的Gutenberg編輯器來創建一個自定義Codepen塊,並為Sanity Studio提供預覽。

如何使用CSS製作線路圖如何使用CSS製作線路圖Apr 09, 2025 am 11:36 AM

線,條和餅圖是儀表板的麵包和黃油,是任何數據可視化工具包的基本組成部分。當然,您可以使用SVG

編程SASS創建可訪問的顏色組合編程SASS創建可訪問的顏色組合Apr 09, 2025 am 11:30 AM

我們一直在尋求使網絡更容易訪問。顏色對比只是數學,因此Sass可以幫助涵蓋設計師可能錯過的邊緣案例。

我們如何創建一個在SVG中生成格子呢模式的靜態站點我們如何創建一個在SVG中生成格子呢模式的靜態站點Apr 09, 2025 am 11:29 AM

格子呢是一塊圖案布,通常與蘇格蘭有關,尤其是他們時尚的蘇格蘭語。在Tar​​tanify.com上,我們收集了5,000多個格子呢

PHP模板的後續行動PHP模板的後續行動Apr 09, 2025 am 11:14 AM

不久前,我僅以PHP(基本上是Heredoc語法)發布了有關PHP模板的信息。我從字面上使用該技術來進行某種超級基礎

使用Bootstrap組件創建模態圖像庫使用Bootstrap組件創建模態圖像庫Apr 09, 2025 am 11:10 AM

您是否曾經在網頁上單擊圖像,該圖像通過導航打開圖像的較大版本以查看其他照片?

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尊渡假赌尊渡假赌尊渡假赌
WWE 2K25:如何解鎖Myrise中的所有內容
3 週前By尊渡假赌尊渡假赌尊渡假赌

熱工具

WebStorm Mac版

WebStorm Mac版

好用的JavaScript開發工具

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

SublimeText3 英文版

SublimeText3 英文版

推薦:為Win版本,支援程式碼提示!

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

DVWA

DVWA

Damn Vulnerable Web App (DVWA) 是一個PHP/MySQL的Web應用程序,非常容易受到攻擊。它的主要目標是成為安全專業人員在合法環境中測試自己的技能和工具的輔助工具,幫助Web開發人員更好地理解保護網路應用程式的過程,並幫助教師/學生在課堂環境中教授/學習Web應用程式安全性。 DVWA的目標是透過簡單直接的介面練習一些最常見的Web漏洞,難度各不相同。請注意,該軟體中