Shoeisha Technology Media

CodeZine(コードジン)

特集ページ一覧

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

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

  • LINEで送る
  • このエントリーをはてなブックマークに追加
2007/11/01 14:00

本稿では、マイクロソフト社のWebオーサリングツール「Microsoft Expression Web」を利用して、Webサイトを構築する方法を紹介します。後編の今回は、Webサイトの構築方法、Webデザインレイアウトの基本、および、ダイナミックWebテンプレートの作成と適用方法について紹介します。

目次

はじめに

 本稿では、デザイン部分を担当したことのない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テンプレートの具体的な機能や利用方法については後述します。

Dreamweaverとの連携
 ダイナミックWebテンプレートは、Dreamweaverの「テンプレート」に該当します。ちなみに、ダイナミックWebテンプレートを適用したWebページは、Dreamweaverでも正常に動作し、編集可能領域内のみ編集することができます。ただし逆のパターン、すなわち、Dreamweaverのテンプレートが適用されたWebページをExpression Webで開くと正常動作せず、どこでも編集できてしまいます。
もし、Expression WebとDreamweaverを組み合わせてサイト管理する場合は、まず、Expression Web仕様のダイナミックWebテンプレートを作成し、Expression Webにて個々のWebページにそのダイナミックWebテンプレートを適用します。すると、Dreamweaverとの連携ができます。
 

Webサイトを作成するワークフロー

 Expression WebでWebサイトを作成する手順は、基本的に次のとおりです。

  1. Webサイトを開く
  2. フォルダ一覧作業ウィンドウでのWebサイトを構成する
  3. ベースとなるWebサイトデザインページを作成する
  4. ダイナミックWebテンプレートを作成する
  5. ダイナミック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サイトを作成してみます。

  1. [ファイル]-[新規作成]-[Webサイト]をクリックします。
  2. [標準]Webサイトの中から、[1ページのWebサイト]を選択します。
  3. [新しいWebサイトの場所を指定してください]のボックスには、既定のWebサイトの作成場所が指定されています。別の場所に変更したい場合は、[参照]ボタンをクリックし、目的の場所を選択します。
  4. [OK]ボタンをクリックします。
1ページのWebサイトを新規作成する
1ページのWebサイトを新規作成する
空白ページを1つ含むWebサイトが新規作成された後の画面
空白ページを1つ含むWebサイトが新規作成された後の画面
次回起動時に最後に作業したWebサイトを自動的に開かないようにしたい
 複数のWebサイトを構築したい場合などの理由で、次回起動時に最後に作業したWebサイトを自動的に開かないようにするには、[ツール]-[アプリケーションのオプション]をクリックし、[アプリケーションのオプション]ダイアログボックスの[全般]タブ内にある、「Expression Webの起動時に最後に作業したWebサイトを自動的に開く」のチェックを外し、[OK]ボタンをクリックします。
すると、次回起動時にはWebサイトが開かず、「Untitle_1.htm」が開くようになります。[ファイル]-[最近使ったサイト]のサブメニューから、最近使ったサイトを指定すると、そのサイトを簡単に開くことができます。
 

  • LINEで送る
  • このエントリーをはてなブックマークに追加

著者プロフィール

  • 小濱 良恵(コハマ ヨシエ)

    Microsoft MVP for Expression Web MSソフトの解説書やWeb記事を執筆するテクニカルライター。Expression Webの前身となるFrontPageは2000バージョンから使用しはじめ、個人サイト(www.wanichan.com) においてFrontPageや...

バックナンバー

連載:Expression Webチュートリアル
All contents copyright © 2005-2018 Shoeisha Co., Ltd. All rights reserved. ver.1.5