はじめに
マイクロソフト社のWebオーサリングツール「Microsoft Expression Web」（以下、Expression Web）を使って、ASP.NETと連携したWebフォームを作る方法を解説します。Expression Webは、ASP.NETとの連携にも優れています。
本稿では、HTML形式で構成されているWebページをaspxファイルに置き換える形で、Webフォームを作成してみます。
具体的には、まずダイナミックWebテンプレート（前稿参照）からWebページを作成し、ASP.NETが利用できるようにASPX形式にした後、Webユーザーコントロール（ASCXファイル）を組み合わせてWebフォームを作成し、ブラウザでプレビューするまでの手順を説明します。
対象読者
- Expression Webをある程度触ったことがある方
- デザイン部分も担当する必要があるASP.NET開発者
- ダイナミックWebテンプレートについて理解のある方
- 他のWebページとデザインが統一されたWebフォームを作りたい方
必要な環境
- Windows Vista、Windows XP Service Pack 2、またはWindows 2003 Service Pack 1以上
- .NET Framework 2.0以降
- Microsoft Expression Web
ダイナミックWebテンプレートからWebページを作成
Expression Webでは、Webサイトのページデザインを統一するため、ダイナミックWebテンプレートを作成してから、それを元に個々のWebページを作成していくのが基本となります。なお、本稿で利用しているテンプレート（master.dwt）は添付ファイルに含まれています。
- ［ファイル］-［新規作成］-［ダイナミックWebテンプレートから作成］を選択します。
- ［ダイナミックWebテンプレートの適用］ダイアログボックスにて、作業中のサイトの中から適用するダイナミックWebテンプレートを選択して、［開く］ボタンをクリックします。
［ダイナミックWebテンプレートの適用］ダイアログボックスから選択して［開く］ボタンをクリック
- ダイナミックWebテンプレートから新規Webページが生成され、「(1 / 1) ファイルが更新されました。」との情報メッセージが表示されるので、［閉じる］ボタンをクリックします。
「(1 / 1) ファイルが更新されました。」メッセージにて、［閉じる］ボタンをクリック
ダイナミックWebテンプレートからすばやくWebページを作成するには
［フォルダ一覧］作業ウィンドウから適用したいダイナミックWebテンプレートを直接右クリックして、［ダイナミックWebテンプレートから新規作成］を選択すると、ダイナミックWebテンプレートからすばやくWebページを作成できます。
対象となるDWTファイルを右クリックして、［ダイナミックWebテンプレートから新規作成］を選択
編集可能領域内の編集
ダイナミックWebテンプレートの編集可能領域には、あらかじめダミーテキストが入っています。これらを書き換えてWebページを完成させていくわけですが、クイックタグセレクタを利用すると効率よく作業が行えます。
例えば、この例では現在「見出し1」スタイルに入っている文字「Headline 1」を「お問い合わせ」に書き換えてみます。クイックタグセレクタを利用せずに直接文字を書き換えると、必要なタグまでなくなってスタイルが削除されたりする場合があるので注意してください。
- 見出し1のスタイルが適用されている「Headline 1」の部分にカーソルを移動します。
- クイックタグセレクタバーの
<h1>タグ右側の▼をクリックして、［タグ内容の選択］を選択します。すると、<h1>タグ内の要素だけが選択されるようになります。
<h1>タグ内のテキストだけが選択された状態で、「お問い合わせ」と入力します。
- 「お問い合わせ」に文字が書き換えられました。
- 最後に、不要なテキストがあれば削除します。
