検索

ホームページ >ウェブフロントエンド >CSSチュートリアル >WebMatrix 応用チュートリアル (4): レイアウトの使い方

WebMatrix 応用チュートリアル (4): レイアウトの使い方

黄舟
黄舟オリジナル
2016-12-26 16:43:541178ブラウズ

Microsoft は、開発者がこれを理解するのに役立つ Web 開発ツール WebMatrix に関する高度なチュートリアルをリリースしました。WebMatrix は、Microsoft 史上最も強力な Web 開発ツールとして知られています。今回も引き続き、以下のチュートリアルを紹介していきます。

はじめに: Microsoft WebMatrix は、インターネット上で Web サイトを作成、カスタマイズ、公開するために使用できる無料のツールです。
WebMatrix を使用すると、ウェブサイトを簡単に作成できます。オープン ソース アプリケーション (WordPress、Joomla、DotNetNuke、Orchard など) から始めることができ、WebMatrix がアプリケーションのダウンロード、インストール、構成のタスクを処理します。または、すぐに始めるのに役立つ多くの組み込みテンプレートを使用して、自分でコードを作成することもできます。どちらを選択しても、WebMatrix は、Web サーバー、データベース、フレームワークなど、Web サイトの実行に必要なものをすべて提供します。 Web ホストで使用するものと同じスタックを開発デスクトップで使用することで、Web サイトをオンラインにするプロセスが簡単かつスムーズになります。
http://web.ms/webmatrix からダウンロードできます。
WebMatrix、CSS、HTML、HTML5、ASP.NET、SQL、データベースなどの使い方と、簡単な Web アプリケーションの作成方法をわずか数時間で学ぶことができます。内容は次のとおりです:

これまで、WebMatrix を使用して非常に単純な Web ページを作成する方法、この Web ページがさまざまなブラウザでどのように実行されるか、および CSS スタイルを使用して基本的な Web ページをより美しくする方法を学習しました。 。

この章では、さらに一歩進んで、サーバー プログラミングの使用を開始します。電話機、デスクトップ上で実行されるアプリケーション、さらにはブラウザ内で実行される JavaScript アプリケーションの構築など、クライアント側のプログラミングには慣れているかもしれません。サーバー プログラミングとの重要な違いは、多くのアプリケーション コードがクライアント デバイス上で実行されないことです。代わりに、エンドユーザーのアクションによってサーバーへの Web ページのリクエストが開始され、Web ページが「アクティブな」Web ページの場合、サーバーはコードを実行し、そのコードを使用して HTML タグと送信される値を生成します。ブラウザに。次に、ブラウザーがこの HTML をレンダリングし、ユーザーは結果が表示されます。

スキルが上達すると、一部のコードをブラウザーで実行し (JavaScript や Silverlight などのリッチ インターネット アプリケーション (RIA) テクノロジを使用することがよくあります)、残りのコードをサーバー上で実行するなど、コードを組み合わせて使用​​すると便利な場合があります。

WebMatrix は、Web ページ プログラミング用の Razor 構文を導入し、非常に強力でありながら非常にシンプルな機能、つまりレイアウト エンジンを提供します。この記事では、レイアウト機能を使用して、一般的な HTML (

やフッター コンテンツなど) をすべて 1 か所に配置し、Web ページ用にこのコンテンツを自動的に生成する方法について説明します。 list)、ページのファイルにはページのメイン コンテンツのみが含まれ、残りのコンテンツを追加して完全に制御できます。
Razor を使用して CSHTML Web ページを作成する

これまで、.HTM または .HTML 拡張子を使用して HTML Web ページを作成しました。これらは静的な Web ページであるため、ブラウザーがそのアドレスを呼び出すと、サーバーはそのアドレスとそのコンテンツをブラウザーに送信します。サーバーはこのページをいかなる方法でも処理しません。
「動的」Web ページについて聞いたことがあるかもしれません。これは、Web ページの構築方法を決定するためにサーバー上で実行される HTML とコードに基づいてサーバーによって構築される Web ページです。動的 Web ページは非常に強力な使用例を可能にし、このシリーズの残りの部分ではそれらを使用します。とりわけ、映画のタイトルを HTML ページに直接書き込んだり、ページを変更したりすることなく、映画をデータベースに保存し、サーバーがデータベース内のデータを使用して Web ページのコンテンツを生成できるようになります。出品内容を変更したいとき。
このセクションでは、最初の動的 Web ページを作成します。

WebMatrix では、動的 Web ページには .CSHTML または .VBHTML 拡張子が付いています。拡張子からわかるように、これらは実際には C# (CS) または Visual Basic (VB) で記述されたインライン コードを含む HTML ファイルです。 CSHTML ファイルを使用します。これにより、C# 言語を使用して Web ページにインライン コードを記述できます。これを行うメソッドと、HTML 内でこれを行うことをサポートする構文には、「Razor」というニックネームが付けられています。
動的なWebページを作成します。

WebMatrix を使用して、[ファイル] ワークスペースで、movies.cshtml という名前の新しい CSHTML Web ページを作成します。

WebMatrix 応用チュートリアル (4): レイアウトの使い方

WebMatrix は、基本的な HTML Web ページに似た Web ページを作成します。このページのコンテンツを次のものに置き換えます: 

<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): 特定のスタイルを実装する方法

関連記事

続きを見る