1

IIS7 + Expression Webで Webサイトを作ろう

- Webサイトの作成と公開 -

■はじめに

本シリーズは全 3 回で、Web サーバーを構築して Web サトを作り公開する方法を学びます。

Windows Server 2008 に付属されている IIS7（Internet Information Services 7.0）を使い Web

サーバーを構築し、Expression Web 3 でオリジナルの Web サトを作成して公開する方法を、ス

テップバステップでご紹介します。

■ 「IIS7」とは？

IIS（Microsoft Internet Information Services）は、Windows 上で動作するンターネット サー

バー ソフトウェゕです。Web サーバー、FTPサーバー、SMTPサーバーなど、さまざまなサーバー機

能をもっています。IIS7 は IIS の現行バージョンで、開発、管理共に最も優れており、多くの管理

機能を備えているため、他の Web サービスに比べて、わかりやすく利用しやすいことが特徴です。

■ 「Expression Web 3」とは？

Microsoft Expression Web 3（マクロソフト エクスプレッションウェブ 3）は、Web サトを製

作するソフトウェゕ（Web オーサリングツール）です。Web 標準に準拠したサトや ASP.NET、

PHP などの機能を活用したサト制作を効率的に行えます。Web サト制作が初めての方でも、わ

かりやすく容易に Web サトを製作できます。

2

第 1 章 Web サーバーを設定する

■はじめに

第 1 章では、製作の前準備として Windows Server 2008 をンストールし、その中に同梱されて

いる IIS7 をンストールします。

学生の皆様は、DreamSpark から Windows Server 2008 を無償でダウンロードしてご利用いただ

けます。DreamSpark は、学生の方を対象にしたソフトウェゕ開発製品、ゕプリケーションデザン

製品などの無償提供プログラムです。早速、DreamSpark に登録してWindows Server 2008 をン

ストールしてみましょう。→DreamSpark にゕクセスする

■Windows Server 2008 をインストールする

Windows Server 2008 をダウンロードしたら、手順に従ってンストールします。

※ 注意 ※

「ンストールの種類」の画面で「カスタム（詳細）」を選択して、デゖスク パーテゖションを設定

して、ンストールします。

■IIS7 を設定する

Windows Server 2008 を起動します。「スタート」メニューから、「管理ツール」＞「サーバーマ

ネージャ」を選択します。

3

「サーバーマネージャ」ウゖンドウで「役割の概要」の「役割の追加」を選択します。

「役割の追加ウゖザード」の「開始する前に」で、そのまま「次へ」をクリックします。

4

「サーバーの役割」で、「Webサーバー(IIS)」をチェックし、「次へ」をクリックします。

「Webサーバー(IIS)」では、そのまま「次へ」ボタンをクリックします。

5

「役割サービス」では、デフォルトの設定のまま、「次へ」をクリックします。

「確認」では、「ンストール」をクリックします。

6

ンストールが始まり、進行状況が表示されます。

ンストール結果が表示されたら「閉じる」をクリックします。

7

■Webサーバーの確認

Webサーバーの設定が正常に完了したことを確認してみましょう。

「Internet Explorer」を起動し、URLゕドレス「http://localhost/」を入力して実行します。

次のような画面が表示されたら、IIS7 は正常に設定されています。

■ まとめ

本章では、IIS7 をンストールし Web サーバー を準備しました。これで Web サトを作成する

準備ができました。第 2 章からは、Web サトを作成するオーサリングツール Expression Web 3

を使って、実際に Web サトを作成します。

8

第 2 章 Webサイトを作成する ①

■はじめに

第 1 章では、IIS7 をンストールし Web サーバー を準備しました。本章は、Web サトを作成

するオーサリングツール Expression Web 3 をンストールして準備します。第 1 章で準備した

Windows Server 2008 にンストールすれば良いでしょう（※他の環境にンストールして利用す

ることも可能です）。そして、実際に Web サトを作成してみます。

■インストールする前に

＜ Internet Explorer セキュリティの設定＞

まず、ンターネットから、いくつかのフゔルをダウンロードする必要がありますが、Windows

Server 2008 のセキュリテゖ設定によって、ダウンロードできない可能性があります。その場合は、

次のように設定し、ダウンロードを可能にします。

Windows Server 2008 の「スタート」メニューから、「管理ツール」＞「サーバーマネージャ」を

選びます。「サーバーマネージャ」ウゖンドウで、「セキュリテゖ情報」の「IE ESC の構成」をクリ

ックします。

「Internet Explorer セキュリテゖ強化の構成」ウゖンドウで、「管理者」の「オフ」と「ユーザー」

の「オフ」をチェックし、「OK」をクリックします。

9

＜.Net Framework 3.5 SP 1＞

Expression Web 3 をンストールするには、「.Net Framework 3.5 SP 1」サービスパックが必要

です。Windows Server 2008 をまだ更新されていない場合には、まずこのサービスパックをダウン

ロードし、ンストールしてください。→.NET Framework 3.5 Service Pack 1

■Expression Web 3 をインストールする

学生の皆様は、DreamSpark から Expression Studio 3 を無償でダウンロードしてご利用いただけ

ます。 Expression Studio 3 には、Expression Blend 3, Expression Web 3, Expression Design 3,

Expression Encoder 3 が含まれています。→DreamSpark にアクセスする

■デスクトップ エクスペリエンス の設定

Expression Encoder 3 （Silverlight ビデオ）を使用可能にするため、次のように設定します。

1. Windows Server 2008 の「スタート」メニューから「管理ツール」＞「サーバーマネージャ」を

選びます。

2. 左側のパネルで「機能」を選択し、右側のパネルの「機能の追加」をクリックします。

3. 「デスクトップ エクスペリエンス」をチェックし「次へ」をクリックします。

1

2

10

4. ンストールが完了したら、再起動します。

■Silverlight 3 ランタイムをインストールする

Internet Explorer 上で Silverlight のコンポーネントを表示できるように、Microsoft Silverlight サ

トから Silverlight3 のゕドオンをンストールします。→ Microsoft Silverlight

※上記 URL サトにゕクセスし、 をクリックしてンストールしてください。

■インストールの後

「IE ESC の構成」を元の状態に戻します。

1. Windows Server 2008 の「スタート」メニューから「管理ツール」＞「サーバーマネージャ」を

選びます。

2. 「サーバーマネージャ」ウゖンドウで「役割の概要」の「役割の追加」を選びます。

3. 「Internet Explorer セキュリテゖ強化の構成」ウゖンドウで、「管理者」と「ユーザー」を「オ

ン」にして「OK」をクリックします。

11

■Web サイトを新規作成する

1. Expression Web 3 を起動します。

2. メニューから「サト」＞「新規サト」をクリックします。※あるいは、 （新規サト）を

クリックします。

3. 「新規作成」ウゖンドウで「テンプレート」を選択し、「パーソナル 3」を選び、「場所」と「名

前」の値をそのままにして「OK」をクリックします。すると、個人のホームページが作成されま

す。

4. 中央の「サトビュー」から「default.html」を選び、 をクリックして（あるいは、F12 キーを

押す）サトをプレビューできます。

12

■ページを追加する

5. 次に「ビデオ ギャラリー」というページを追加します。メニューから「フゔル」＞「新規」＞

「ダナミック Web テンプレート作成」を選択します。※あるいは （新規ドキュメント）の

↓ を ク リ ッ ク し て 、 「 ダ ナ ミ ッ ク Web テ ン プ レ ー ト 作 成 」 を 選 択 し ま す 。

「フゔル名」には ”master” と入力し「開く」をクリックします。

6. メニューから「フゔル」＞「保存」を選択します。※あるいは、 （保存）をクリックします。

7. Mysite のフォルダーの中に、新しいフォルダー「video_gallery」を作成します。

「フゔル名」に ”default.html” と入力します。

「タトルの変更」ボタンをクリックし、ページタトルに ”ビデオギャラリー” と入力して、

「OK」をクリックします。

最後に「保存」ボタンをクリックします。

13

8. 同じように ”Game” という名前で新しいページを作成してください。

項目 値

フォルダー ルート

フゔル名 game.html

ページタトル フルーツバスケット

■ダイナミックWebテンプレートを変更する

9. 追加した 2 つのページにゕクセスするために master.dwt にリンクを追加します。

10. 左側にある「フォルダーリスト」ウゖンドウの「master.dwt」をダブルクリックします。

11. 開いた「master.dwt」の下には「分割」をクリックすると、デザンとコードが両方も表示され

ます。

デザン画面で「PhotoGallery」を選択すると、コード画面に対処タグが表示されます。

1

2

3

3

4

5

6

14

12. 下記のエローマーカーの行を追加します。また、グリーンマーカーの部分はこのように変更しま

す。

<div id="footer">

<div id="copyright">

<p>Copyright © 0000. All Rights Reserved.</p>

</div>

<p>

<a href="default.html">ホーム</a> |

<a href="about_me/default.html">自己紹介</a> |

<a href="resume/default.html">履歴書</a> |

<a href="photo_gallery/default.html">フォト ギャラリー</a> |

<a href="video_gallery/default.html">ビデオ ギャラリー</a> |

<a href="game.html">ゲーム</a> |

<a href="links/default.html">リンク</a> |

<a href="contact/default.html">連絡先</a>

</p>

</div>

15

13. フッタも、下記のように変更します。

14. ページの上部にあるタトルと説明を編集します。「Web サトの名前」を ”僕の庭” へ、

「Web サトの説明」を ”植物の世界へようこそ” に変更します。

15. メニューから「フゔル」＞「すべて保存」を選択します。※あるいは、 （すべて保存）をク

リックします。次のダゕログが表示されたら「はい」をクリックします。

<div id="footer">

<div id="copyright">

<p>Copyright © 0000. All Rights Reserved.</p>

</div>

<p>

<a href="default.html">ホーム</a> |

<a href="about_me/default.html">自己紹介</a> |

<a href="resume/default.html">履歴書</a> |

<a href="photo_gallery/default.html">フォト ギャラリー</a> |

<a href="video_gallery/default.html">ビデオ ギャラリー</a> |

<a href="game.html">ゲーム</a> |

<a href="links/default.html">リンク</a> |

<a href="contact/default.html">連絡先</a>

</p>

</div>

16

■イメージ（画像）を追加する

16. ルートの default.html を開きます。

17. 「ツールボックス」ウゖンドウで「HTML」－「タグ」－「メージ」をドラッグし、ページ内の

メージを配置したい場所へドロップします。

18. ドロップしたメージ、 をダブルクリックすると「画像のプロパテゖ」ウゖンドウが表示され

ます。「画像」を選択し、「代替テキスト」に入力し、ハパーリンクの「場所」を指定します。

19. 設定したメージのサズが大きすぎるので、メージサズを小さくします。メージの右下角

を Shift キーを押しながらドラッグすると、縦横比を固定したままリサズできます。

20. メージをリサズしても、フゔルサズ（バトサズ）は変わりません。画像をより速く表

示できるよう、表示サズのフゔルサズへ変更しましょう。リサズした画像の下にある

（画像の処理）にマウスを移動し、↓をクリックして「変更したサズに画像をリサンプルする」

をチェックします。

1

2

3

4

17

21. ルートの default.html を保存すると「埋め込みフゔルの保存」ウゖンドウが表示されます。

「フォルダーの変更」をクリックし「images」を選択して保存します。

22. サトをプレビューします。

■ まとめ

本章では、Web サトを作成するオーサリングツール Expression Web 3 を準備し、実際に Web

サトを作成してみました。静的な Web ページは、テンプレートを使ってこのように簡単に作成す

ることができます。Expression Web を使って、いろいろなレゕウトデザンの Web ページを作

成してみてください。

次回、第 3 章では、フォトギャラリーやビデオなど動きのあるページを作成してみます。

18

第 3 章 Webサイトを作成する ②

■はじめに

第 2 章では、Expression Web 3 を準備し、実際に Web サトを作成してみました。

次回、第 3 章では、ビデオなど動きのあるページを作成してみましょう。Web サトにフォトギャ

ラリー、Silverlight 動画を追加します。

■フォトギャラリーを作成する

1. Expression Web 3 を起動します。

2. メニューの「サト」＞「サトを開く」を選択し、第２章で作成したサトを開きます。

3. 「フォルダーリスト」ウゖンドウで「photo_gallery」フォルダー内の「defult.html」を開きます。

4. メニューの「テーブル」＞「テーブルの挿入」をクリックすると、「テーブルの挿入」ウゖンドウ

が表示されます。「セル内容のスペース」に「５」を設定し「OK」をクリックします。

5. テーブルのセルにメージを入力します。

6. メージのソースを設定してから、右クリックして、「オートサムネル」を選択すると、自動的

にサムネルが作成されます。

19

7. 別のメージとサムネルを作成してみましょう。

8. ページの上部にあるタトルと説明を編集します。「フォトギャラリーのタトル」を ”きれいな

木” へ、「ここにフォトギャラリーを挿入します」を ”気に入った写真” へ変更します。

9. 変更してフゔゖルを保存すると、「埋め込みフゔルの保存」ウゖンドウが表示されます。「フォ

ルダーの変更」をクリックして、「photo_gallery」に「tree_images」というフォルダーを新規

作成して保存します。

10. プレビューしてみましょう。

20

■Silverlight ビデオ

11. 「フォルダーリスト」ウゖンドウで「video_gallery」フォルダーを開いて、「defult.html」を開

きます。

12. 「ツールボックス」ウゖンドウで「HTML」－「メデゖゕ」－「Silverlight ビデオ」をドラッグし

て、「default.html」デザンにドロップすると、「ビデオの選択」が表示されます。

13. ビデオフゔルを選択すると「Silverlight ビデオを挿入する」ウゖンドウが表示されます。

14. 「テンプレート」のリストから、テンプレートを選びプレビューします。

15. 「幅」を「300」に設定し「エンコード」をクリックします。

16. 「default.html」デザンには埋め込んだビデオフゔルは表示されませんが、プレビューすると

ビデオを確認できます。

17. プレビューする際には「ブロックされているコンテンツを許可」してください。

21

■Silverlight コントロール

18. 「フォルダーリスト」ウゖンドウで「game.html」を開きます。

「ツールボックス」ウゖンドウの「HTML」－「メデゖゕ」－「Silverlight」をドラッグし、

「game.html」デザンにドロップします。「Silverlight 2 XAP フゔルか Silverlight 3 XAP

フゔルを選択します」ウゖンドウでは XAP フゔルを選択します。

19. 「game.html」デザンに埋め込んだ Silverlight オブジェクトをダブルクリックすると

「ActiveX コントロールのプロパテゖ」ウゖンドウが表示されます。「サズ」の「幅」を

「400」に変更し、「高さ」を「300」に変更します。

20. 「game.html」を保存します。

21. プレビューする際には「ブロックされているコンテンツを許可」してください。

22

■ パブリッシュ

22. これで、サトのデザンが完了しました。

23. サトを公開する前に、Web サーバーにドメン名もしくは IP ゕドレスを用意する必要があり

ます。ここでは例として「www.example.co.jp」というドメンを使用します。

24. メニューから「サト」＞「パブリッシュの設定」を選択すると、「サトの設定」ウゖンドウが

表示されます。「全般」タブの「Web 名」を ”MyGarden” に変更します。

「パブリッシュ」タブで「パブリッシュ先」の「追加」ボタンをクリックします。「接続の設定」

ウゖンドウで「場所」と「資格情報」などを入力し「追加」ボタンをクリックします。

23

25. 「サトの設定」の「パブリッシュ先」に設定した接続が表示されます。「オプション」の「サブ

サトを含む」をチェックし「OK」をクリックします。

26. メニューから「サト」＞「パブリッシュ」を選択します。「サトビュー」の「パブリッシュ」

タブで、フゔルとフォルダーをすべて選択し、「→」（フゔルをサトにパブリッシュ）をク

リックします。

24

27. Internet Explorer を起動し ”http://www.example.co.jp/MyWebSite/default.html” のページ

を開きます。先にデザンしたホームページが表示されました。

25

■ まとめ

本シリーズでは、IIS7 で Web サーバーを準備し、Expression Web 3 を使って Web サトを製

作し公開しました。テンプレートを利用したページデザン、画像の埋め込み、フォトギャラリーの

作成、Silverlight ビデオなどを利用して、バリエーションのある Web サトを作成してみました。

このように、管理機能に優れた IIS7 と 簡易なオーサリングツールを使えば、 Web サトを手軽に

製作し公開することができます。今回、ご紹介できなかった機能もありますので、いろいろと試しな

がらオリジナルの Web サトを作成してみてください。