Expression WebでWebサイトを作ってみよう (2)

.NET開発者のためのWebサイト制作入門（後編）

メインコンテンツ領域にダミーテキストを入れる

　ダイナミックWebテンプレートで編集可能領域を設定する前に、その領域内にあらかじめ、ダミーのテキストを入れておく必要があります。もし、編集可能領域内の部分に何も見出しまたは段落が入っていない場合、または、見出しや段落以外のプレーンなテキストの場合は、ダイナミックWebテンプレートを適用したWebページにおいて、編集可能領域内で思い通りに編集できなくなるので注意してください。

#page_contentエリア内にダミーテキストを挿入した画面

メインコンテンツエリアを編集可能領域に設定する

　メインコンテンツ領域にダミーテキストを入れたら、メインコンテンツ領域「#page_contet」の内部を編集可能領域に設定します。

　編集ウィンドウ上部にあるクイックタグセレクタを利用すると、簡単にその領域の内部を選択することができます。その内部を選択した状態で、編集可能領域名を付けます。

1. メインコンテンツ内にカーソルを移動し、クイックタグセレクタ<div#page_content>の右にある▼をクリックし、［タグ内容の選択］を選択します。Dreamweaverにおいては、セレクタを選択するとタグの内容が選択できますが、Expression Webにおいてクイックタグセレクタを選択すると、タグとその要素全体が選択されますので注意してください。
    
    

   
   　
2. ［書式］-［ダイナミックWebテンプレート］-［編集可能な領域の管理］を選択します。
   　
3. ［編集可能な領域］ダイアログボックスの［領域名］ボックスに、領域名を入力して、［追加］ボタンをクリックします。
    

   
   　
4. 編集可能領域が設定されたので、［閉じる］ボタンをクリックします。
   編集可能領域が設定された画面

   

ダイナミックWebテンプレートの適用

ダイナミックWebテンプレートからWebページを新規作成するには

　［フォルダ一覧］作業ウィンドウから適用したいダイナミックWebテンプレートを右クリックし、［ダイナミックWebテンプレートから新規作成］を選択すると、簡単にダイナミックWebテンプレートからWebページを新規作成することができます。

既存のWebページにダイナミックWebテンプレートを適用するには

　既存のファイルにダイナミックWebテンプレートを適用する方法はいくつかありますが、そのうち簡単な方法を紹介します。例えば、既存のホームページ「index.html」にダイナミックWebテンプレートを適用するには次の手順に従います。

1. ［フォルダ一覧］作業ウィンドウから「index.html」ファイルをダブルクリックします。
2. ［フォルダ一覧］作業ウィンドウの「master.dwt」ファイルを選択して、開いている「index.html」の編集ウィンドウまでドラッグ＆ドロップします。

まとめ

　Webサイト制作を始める前に、誰に、どんな情報を伝えたいのか、そしてその目的は何かを明確にしておく必要があります。そのためには、伝えたい情報をより具体的に収集し、分類いくとよいでしょう。

　そして、何よりも、閲覧者が予測しやすいナビゲーションに心がけることが重要になっていきます。Webサイト全体のデザインを統一するには、ダイナミックWebテンプレートをうまく活用してください。ダイナミックWebテンプレートは複数作成することができます。カテゴリごとにダイナミックWebテンプレートを使い分けると便利でしょう。