Csdn.NET は、Microsoft 史上最も強力な Web 開発ツールとして知られる Microsoft の新しい Web 開発ツール WebMatrix に関する高度なチュートリアルを開発者が理解できるように間もなくリリースします。 Microsoft の新しい開発ツール WebMatrix をインストールして使用する方法に関する前回の投稿に続き、WebMatrix を使用して最初の 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 アプリケーションの作成方法をわずか数時間で学ぶことができます。内容は次のとおりです:
パート 2 では、WebMatrix を使用して非常に単純な Web ページを作成する方法と、このページがさまざまなブラウザーでどのように実行されるかを説明しました。このセクションでは、カスケード スタイル シート (CSS) テクノロジを使用して Web ページの視覚スタイルを変更する方法を学習します。
Web ページに組み込むことができるムービーの簡単なリストは次のとおりです:
カスケード スタイル シートを使用して Web ページのスタイルを設定する準備をしましょう
次のいくつかの手順では、使用できる HTML タグがさらに表示されます。ハイパーリンク、ページ セクション、スクリプト タグなどの機能に加えて、カスケード スタイル シート (CSS) を使用してページを編集し、外観を設定する方法も学習します。最後に、レイアウトを使用してこのページとサイト上の他のページの間で同じコンテンツを取得し、同じコンテンツの編集が容易になります。
分割線を使用する
HTML では、
最初の部分の Web ページの HTML は次のとおりです:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>My Favorite Movies</title>
</head>
<body>
<h1>A list of my Favorite Movies</h1>
<ol>
<li>Its a wonderful life</li>
<li>Lord of the Rings</li>
<li>The Fourth World</li>
<li>The Lion King</li>
</ol>
</body>
</html>最初に行うことは、以下に示すように、映画を含むリストを独自の
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>My Favorite Movies</title>
</head>
<body>
<h1>A list of my Favorite Movies</h1>
<div id="movieslist">
<ul>
<li>Its a wonderful life</li>
<li>Lord of the Rings</li>
<li>The Fourth World</li>
<li>The Lion King</li>
</ul>
</div>
</body>
</html>これで、視聴できるようになります。映画を含む
ハイパーリンクの使用
ハイパーリンクについてはすでにご存知かもしれません。ハイパーリンクとは、あるページ上で別のページにリンクするクリック可能な領域です。これらの領域はハイパーリンクと呼ばれますが、HTML では元々アンカー タグと呼ばれていたため、ハイパーリンクを作成する場合は常に タグを使用します。
(または位置決め) タグは、 と の間のコンテンツをクリック可能にします。ユーザーがこのコンテンツをクリックすると、ブラウザは タグの href 属性を使用して指定された HREF (ハイパーリファレンス) にリダイレクトします。
属性は、タグ内ではなくタグ自体で定義されます。次のようになります:
したがって、ハイパーリンクを作成するには、次のような構文を使用します。 :
href は上記のような Web サイトである必要はなく、幹部も使用できます。プログラマーの操作のための JavaScript 関数。特別な href は、ハイパーリンクのスタイルが機能するかどうかをテストできるように、開発中にプレースホルダーとして使用されます。これを行うには、href として「#」文字を使用します。
したがって、ムービーを含むすべての
将要做的下一件事是向网页添加页眉和页脚。您将使用Html5中提供的新
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>My Favorite Movies</title>
</head>
<body>
<header>
<h1>A list of my Favorite Movies</h1>
</header>
<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>
<footer>
This site was built using Microsoft WebMatrix.
<a href="http://web.ms/webmatrix">Download it now.</a>
</footer>
</html>可以看到，它们是非常简单的HTML代码。
对于页眉，我们将前面创建的
在浏览器中查看网页，它现在将类似于以下界面：
除了页脚不同，它没有太多差异，但不用担心，这种情况很快就会改变！
定义网页的外观
在前面一节中，在介绍定位标记时您了解了属性，属性描述元素的行为。对于定位标记，您通过指定HREF属性定义了在单击时发生的行为。
可以想象，您可以使用属性指定元素的外观，包括字体样式、字体大小、颜色、边框等等。
所以，举例来说，对于我们前面在网页上定义的
可以看到，
尽管这样能很好地生效，但它并不是设置网页样式的最好方式。想象一下，如果您必须通过这种方式设置每个元素的样式，将会是什么结果。您的网页上最终会有很多文本，减缓下载和浏览的速度。
幸运的是，还有另一种方式，那就是在网页上使用样式表。样式表使用级联样式表概念来定义，其中元素上的样式集可以由子元素继承。举例来说，如果您在
我们看一下如何在
不用将所有样式代码放在
现在标记有了一个类，我们可以告诉浏览器为拥有此类的所有内容使用一种特定样式。这使用CSS代码语法来完成，类似于：
.Title {
font-size: xx-large;
font-weight: normal;
padding: 0px;
margin: 0px;
}样式“语言”包括一组以分号分隔并包含在花括号（{..}）中的属性。如果要将此样式应用到一个类，该类会使用“点”语法进行定义，也就是在类名称前添加一个点。
此代码放在网页页眉中的