WebMatrix 上級チュートリアル (2): WebMatrix を使用して最初の Web ページを作成する方法を説明します。

黄舟
リリース: 2016-12-26 16:21:34
オリジナル
1672 人が閲覧しました

はじめに: 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 アプリケーションの作成方法をわずか数時間で学ぶことができます。内容は次のとおりです:


パート 1 では、WebMatrix の基本概念を学習し、WebMatrix をインストールして実行する方法を学習しました。この章では、これを使用して最初の Web サイトを作成し、最初の Web ページを設定します。


ウェブサイトを作成

「テンプレートからウェブサイト」オプションを選択すると、以下のダイアログボックスが表示されます。 WebMatrix の機能は常に改善されているため、さまざまなテンプレートが表示される可能性があることに注意してください。使用する必要があるのは、空のサイト テンプレートです。このテンプレートを選択し、「映画」という名前を付けます。

WebMatrix 上級チュートリアル (2): WebMatrix を使用して最初の Web ページを作成する方法を説明します。

[OK] を押すと、WebMatrix は新しい空の Web サイトを作成します。この Web サイトは WebMatrix エディターにロードされます。これはここで見ることができます:


WebMatrix 上級チュートリアル (2): WebMatrix を使用して最初の Web ページを作成する方法を説明します。

次に進む前に、ここに表示されている内容のいくつかを理解するのに役立ちます。 1 つ目のポイントは、WebMatrix は単なるコード編集ツールではないということです。 IIS Express と呼ばれる Web サーバーが統合されています。 Web サーバーは、インターネットからのデータ要求をリッスンし、そのデータを (通常は Web ブラウザーに) 送信することでその要求に応答する特別なソフトウェアです。

ブラウザを開いて http://www.microsoft.com などと入力するとすぐに、Microsoft の Web サーバーが呼び出され、HTML、JavaScript、CSS、画像などのコードが送信されて応答します。 。ブラウザーはそれらを 1 つの Web ページに結合します。

WebMatrix 上級チュートリアル (2): WebMatrix を使用して最初の Web ページを作成する方法を説明します。

WebMatrix にはサーバーが組み込まれており、インターネット上の Web サーバーを使用するのと同じように、Web サイトを非常に簡単に開発できます。画面を見ると、Web サイトの名前 (この場合は「Movies」) の下に、サーバーがアドレス http://localhost:8946 で Web サイトを提供していることがわかります。これは、サーバーのホストがローカルであることを示しています。 、それは開発マシン上にあります。

WebMatrix 内から Web サーバーを起動して Web サイトを実行できますが、今それを実行すると、Web サイトのコンテンツをまだ作成していないため、エラーが発生します。次にこのタスクを完了します。

最初の Web ページを作成します

WebMatrix では、左側のボタンを選択することで、さまざまなワークスペースを切り替えることができます。 [サイト] ボタンが選択されると、ワークスペースに Web サイトの詳細 (Web サイトの URL など) と使用できるその他のツール (Web サイトのリクエストの監視など) が表示されます。この記事を読み進めるにつれて、各ワークスペースについて詳しく分析していきますが、ここでは [ファイル] ボタンを押してワークスペースを選択するだけです。

WebMatrix 上級チュートリアル (2): WebMatrix を使用して最初の Web ページを作成する方法を説明します。

WebMatrix は [ファイル] ワークスペースを開きます。Web サイトにはまだファイルがないため、空のように見えます。ただし、Web サイトにファイルを追加したり、ツールバーの [新規] ボタンを使用して新しいファイルを作成したりできる、非常に使いやすいボタンが用意されています。

WebMatrix 上級チュートリアル (2): WebMatrix を使用して最初の Web ページを作成する方法を説明します。


どの方法を選択しても、[ファイル タイプの選択] ダイアログ ボックスが表示され、Web で一般的に使用されるさまざまなファイル タイプについて多くの選択肢が表示されます。

WebMatrix 上級チュートリアル (2): WebMatrix を使用して最初の Web ページを作成する方法を説明します。

HTML ファイルの種類を選択し、default.html という名前を付けて、[OK] を押します。 WebMatrix は単純な HTML ファイルを作成して開きます。

WebMatrix 上級チュートリアル (2): WebMatrix を使用して最初の Web ページを作成する方法を説明します。


HTML (ハイパーテキスト マークアップ言語) ファイルは、ブラウザーに Web ページの描画方法を指示する一連の命令です。通常、Web ページ自体に関する説明が含まれるヘッダーと、Web ページのコンテンツである本文が含まれます。コンテンツは、タグを使用してマークアップされます。タグは、

のように山括弧で囲まれたタグ名で始まり、 のように山括弧で囲まれたスラッシュとその後に続く名前で終わります。したがって、これらのタグ内にあるものはすべて、ブラウザによって Web ページの本文として扱われます。 HTML とそのマークアップについて詳しくは、w3cschools.com をご覧ください。

http://w3schools.com/html/default.asp。

次のように Web ページを編集します。

<!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>It&#39;s a wonderful life</li>  
  
<li>Lord of the Rings</li>  
  
<li>The Fourth World</li>  
  
<li>The Lion King</li>  
  
</ol>  
  
</body>  
  
</html>
ログイン後にコピー

タグにテキストを入力し、 タグの間にコードを追加しました。このコードは、見出しスタイルのテキストとして

を使用し、リストをレンダリングしていることをブラウザーに伝え、いくつかのリスト項目をレンダリングしていることをブラウザーに伝えます。

WebMatrix ツールバーに、[実行] ボタンが表示されます。

WebMatrix 上級チュートリアル (2): WebMatrix を使用して最初の Web ページを作成する方法を説明します。

それを選択すると、WebMatrix がブラウザを起動し、ローカル サーバーで実行されている Web サイトを開きます。

WebMatrix 上級チュートリアル (2): WebMatrix を使用して最初の Web ページを作成する方法を説明します。

ここではたくさんのことが起こっています。詳しく分析してみましょう。

Webサーバー

ブラウザのアドレスバーに気づきましたか?ハード ドライブ上のファイルは開きませんが、Web サーバーを起動し、ブラウザーに Web サーバーをポイントさせて、default.html ファイルを要求します。

WebMatrix 上級チュートリアル (2): WebMatrix を使用して最初の Web ページを作成する方法を説明します。

PC のシステム トレイを見ると、Web サーバー IIS Express が実行中であることを示す小さなアイコンが表示されます。


WebMatrix 上級チュートリアル (2): WebMatrix を使用して最初の Web ページを作成する方法を説明します。

それを右クリックすると、映画 Web サイトが実行されていることがわかります。

WebMatrix 上級チュートリアル (2): WebMatrix を使用して最初の Web ページを作成する方法を説明します。


Webページのタイトル

次に、Webページのブラウザタブを見てください。 「My Favorite Movies」というテキストが含まれている必要があります。比較のために、同じ Web サイトを Internet Explorer、Chrome、Safari、FireFox、Opera で実行しています。このテキストは、ページの

タグに入力するものであることに注意してください。これにより、これがページのタイトルであることがブラウザに通知されます。ブラウザーが異なれば、ページタイトルの処理方法も異なります。 <p>Internet Explorer: </p> <p><img src="https://img.php.cn//upload/image/915/447/252/1482740394715536.png" title="1482740394715536.png" alt="WebMatrix 上級チュートリアル (2): WebMatrix を使用して最初の Web ページを作成する方法を説明します。"></p> <p><strong>Chrome: <br></strong></p> <p><br></p> <p><img src="https://img.php.cn//upload/image/301/695/811/1482740408680613.jpg" title="1482740408680613.jpg" alt="WebMatrix 上級チュートリアル (2): WebMatrix を使用して最初の Web ページを作成する方法を説明します。"></p> <p><br></p> <p><strong>Safari: <br></strong></p> <p><img src="https://img.php.cn//upload/image/860/235/698/1482740425940973.png" title="1482740425940973.png" alt="WebMatrix 上級チュートリアル (2): WebMatrix を使用して最初の Web ページを作成する方法を説明します。"> </p> <p><br></p> <p><strong>Firefox: <br></strong></p> <p><img src="https://img.php.cn//upload/image/406/268/658/1482740440654102.jpg" title="1482740440654102.jpg" alt="WebMatrix 上級チュートリアル (2): WebMatrix を使用して最初の Web ページを作成する方法を説明します。"></p> <p><strong> Opera: <br></strong></p> <p><img src="https://img.php.cn//upload/image/882/302/483/1482740453452250.png" title="1482740453452250.png" alt="WebMatrix 上級チュートリアル (2): WebMatrix を使用して最初の Web ページを作成する方法を説明します。"></p> <p><br></p> <p> Web 開発者は、ブラウザーごとに操作の実行方法が若干異なることに注意する必要があります。さまざまなブラウザでページをテストして、期待どおりに動作するかどうかを確認することをお勧めします。 </p> <p> 注: 別のブラウザで Web サイトを起動してください </p> <p> WebMatrix の本当に優れた点の 1 つは、開発マシン上で実行される Web サーバーを提供することではなく、インストールしたブラウザをすぐに起動できることです。 WebMatrix ツール リボンの [実行] ボタンの下部にある下矢印をクリックすると、これを体験できます。 </p> <p><img src="https://img.php.cn//upload/image/400/118/699/1482740473997790.png" title="1482740473997790.png" alt="WebMatrix 上級チュートリアル (2): WebMatrix を使用して最初の Web ページを作成する方法を説明します。"></p> <p>リストには、インストールしたブラウザのみが表示されます。 <br></p> <p><br></p> <p> 上記は WebMatrix の上級チュートリアル (2) です。WebMatrix を使用して最初の Web ページのコンテンツを作成する方法を説明します。関連コンテンツの詳細については、PHP 中国語 Web サイト (www.php) を参照してください。 .cn)! <br></p> <p><br></p>
関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト:福祉オンライン PHP トレーニング,PHP 学習者の迅速な成長を支援します!