はじめに
本稿では、デザイン部分を担当したことのないASP.NET開発者が、友人から「起業したので会社のサイトを作って！ おまえさんプロなんだからできるでしょ。頼むよ」と不意に言われ、結局引き受けてしまったストーリーをベースに、ASP.NETとの連携にも優れたマイクロソフト社のWebオーサリングツール「Microsoft Expression Web」（以下、Expression Web）によるWebサイト制作方法を解説します。
前編では、Wordライクな操作性、Web標準への準拠、ASP.NETとの連携といった、Expression Webの特長について触れました。今回は、Webサイトの構築方法、閲覧者にとって使いやすいWebサイトとは何かを説明し、Webデザインレイアウトの基本や、Webサイトのレイアウトを統一させるのに便利な「ダイナミックWebテンプレート」の利用方法を説明します。
前回の記事
対象読者
- はじめてWebサイトを制作する方
- デザイン部分も担当する必要があるASP.NET開発者
- 脱フレームページを目指す方
- XHTML＋CSSベースのWeb標準サイトを効率的に構築したい方
- 友人にサイト制作をムチャ振りされた可哀想な方
必要な環境
- Windows Vista、Windows XP Service Pack 2、またはWindows 2003 Service Pack 1以上
- .NET Framework 2.0以降
- Microsoft Expression Web
Webサイト制作をはじめる前に
例え、どんなにWebサイトを作成する高度な技術があっても、目的や伝えたい情報などがなければWebサイトを作成することはできません。
友人に頼まれて人様のWebサイトを作ることは、自分のサイトを作るよりも難しいものです。何のサイトにしていくのか、どんな情報を伝えたいのか、サイトの目的や発信する情報を明確にするために、いかに細かくヒアリングするかがポイントになります。
Webサイト制作をはじめる前に、以下の5つを決めておいてください。
- 公開目的
- 公開場所（ホスティングサーバはどこにするか）
- 誰に向けて発信したいか
- 伝えたい情報
- 公開期間
この5つが決まれば、Webサイトは半分完成したと言っても過言ではないでしょう。
特に、公開目的、発信する情報、そして、その対象者を決定することによって、来訪者にとってひと目で「何のサイトなのか」ということが明確になり、価値のあるものになります。
Webサイト内のページデザインを統一しよう
Webサイトは自由にレイアウトができますが、サイト内のページデザインは統一するのが鉄則です。例えば、サブページに進んだ際に背景色やレイアウトデザインなどがまったく異なっていたら、閲覧者は違和感を覚えることでしょう。Expression Webでサイト内のページデザインを統一するには、ダイナミックWebテンプレートを利用します。
とりわけ、フレームページは、Web標準の観点から非推奨要素になります。フレームの代わりに、ダイナミックWebテンプレートの利用をお勧めします。ダイナミックWebテンプレートの具体的な機能や利用方法については後述します。
もし、Expression WebとDreamweaverを組み合わせてサイト管理する場合は、まず、Expression Web仕様のダイナミックWebテンプレートを作成し、Expression Webにて個々のWebページにそのダイナミックWebテンプレートを適用します。すると、Dreamweaverとの連携ができます。
Webサイトを作成するワークフロー
Expression WebでWebサイトを作成する手順は、基本的に次のとおりです。
- Webサイトを開く
- フォルダ一覧作業ウィンドウでのWebサイトを構成する
- ベースとなるWebサイトデザインページを作成する
- ダイナミックWebテンプレートを作成する
- ダイナミックWebテンプレートからWebページを新規作成する
Webサイトを開く
Webサイトを開くには
Expression Webをインストールすると、「マイドキュメント」フォルダ内に「My Web Sites」フォルダが自動生成されます。この「My Web Sites」フォルダは、Expression Webにおいて「Webサイト」として認識される特殊フォルダです。
通常、Expression Webを起動後、［ファイル］-［サイトを開く］を選択し、その「My Web Sites」を開き、その内にWebサイトに使われるファイルやフォルダを格納して編集することによって、リンク切れやダイナミックWebテンプレートの操作などのサイト管理が行えます。
サイトを開いて作業後、Expression Webを終了し、次回のExpression Web起動時には、最後に作業したWebサイトが自動的に開くように初期設定されています。
複数のサイト管理などの場合は、Webサイトの新規作成が必要
「マイドキュメント」フォルダ内の「My Web Sites」フォルダではなく、別の場所にあるフォルダをExpression Webでサイト管理したい場合や、複数のサイトを管理したい場合は、Expression Webでサイト管理機能を有効にするために、Webサイトの新規作成が必要です。ここでは、Webサイトを新規作成し、そのWebサイト内でサイトを構築していく方法を解説していきます。
Webサイトの作成方法は、大きく分けて「標準」と「テンプレート」があります。「テンプレート」カテゴリでは、Expression Webにあらかじめ用意されているさまざまなデザインを元にして、Webサイトを作成できます。Webページレイアウトやデザインなどを一から作成していく場合は、「標準」カテゴリから選択します。ここでは、「標準」カテゴリから空白ページを1つ含む新しいWebサイトを作成してみます。
- ［ファイル］-［新規作成］-［Webサイト］をクリックします。
- ［標準］Webサイトの中から、［1ページのWebサイト］を選択します。
- ［新しいWebサイトの場所を指定してください］のボックスには、既定のWebサイトの作成場所が指定されています。別の場所に変更したい場合は、［参照］ボタンをクリックし、目的の場所を選択します。
- ［OK］ボタンをクリックします。
すると、次回起動時にはWebサイトが開かず、「Untitle_1.htm」が開くようになります。［ファイル］-［最近使ったサイト］のサブメニューから、最近使ったサイトを指定すると、そのサイトを簡単に開くことができます。
