Microsoft-expression-web-microsoft-expression-dynamic-web-template

提供:Dev Guides
移動先:案内検索

動的Webテンプレート

動的Webテンプレートは、WebページのHTMLベースのマスターコピーであり、作成可能なWebページの設定、書式設定、およびページ要素(テキスト、グラフィックス、ページレイアウト、スタイル、変更可能な領域など)を含めることができます。

Webサイトのページに動的Webテンプレートを添付すると、そのテンプレートはそれらのページのレイアウトを定義します。 Webサイトでは任意の数の動的Webテンプレートを使用でき、必要な数のページに動的Webテンプレートを添付できます。

ダイナミックWebテンプレートを使用すると、同じレイアウトを共有するHTMLページを作成できます。 共有レイアウトを提供することに加えて、テンプレートの他の領域への変更を防止しながら、テンプレート内の一部の領域を編集可能にすることができます。

つまり、他のユーザーにコンテンツの追加と編集を許可しながら、ページのレイアウトとテンプレート自体を保持することができます。

動的Webテンプレートの必要性

Webサイト設計の最も重要な概念は、サイトの一貫したルックアンドフィールを維持し、ダイナミックWebテンプレートを使用してそれを実現することです。 動的Webテンプレートは以下を提供します-

  • サイトマップ、連絡先、概要、検索ページなどの基本的なページ。 訪問者は、サイト上の任意のページからホームページにアクセスできる必要があります。
  • サイト全体で一貫したナビゲーション。
  • サイト全体で一貫した外観。

動的Webテンプレートを作成する

ダイナミックWebテンプレート(DWT)を作成するには、空のHTMLページから始めて、**。dwtファイル*として保存します。 手順を追って説明していきましょう。

  • ステップ1 *-indexlファイルを開き、[ファイル]→[名前を付けて保存…​]メニューオプションを選択して、[名前を付けて保存]ダイアログを開きます。

メニューオプション

[ファイルの種類]ドロップダウンから動的Webテンプレート(* .dwt)を選択し、ファイル名をインデックスから master.dwt に変更して、[保存]ボタンをクリックします。

  • ステップ2 *-これで、フォルダリストに新しいファイルmaster.dwtが作成されます。 新しいHTMLファイルを作成して、index_2lと名付けましょう。 master.dwtファイルを開き、デザインビューまたはコードビューで、メインコンテンツの<div>タグ内を右クリックします。

HTMLファイル

  • ステップ3 *-メニューから、[編集可能な領域の管理]を選択します。[編集可能な領域]ダイアログが開きます。

編集可能な領域

  • ステップ4 *-リージョン名に、編集可能なリージョンの名前を入力し、[追加]をクリックします。 必要に応じて、編集可能な領域を追加して繰り返します。

地域名

  • ステップ5 *-すべての編集可能な領域を追加したら、[閉じる]をクリックします。 次に、index_2lファイルに移動し、フォルダリストでも選択します。

すべての編集可能な領域

  • ステップ6 *-[書式]メニューに移動し、[動的Webテンプレート]→[動的Webテンプレートの添付…​]を選択します。[動的Webテンプレートの添付]ダイアログが開きます。

動的Webテンプレート

ステップ7 *-ここではmaster.dwtファイルである *Dynamic Web Template を選択し、[開く]ボタンをクリックします。 警告メッセージが表示されます。 はいをクリックします。

警告メッセージ

  • ステップ8 *-同じテンプレートがindex_2lファイルに適用されていることがわかります。 同様に、同じテンプレートをWebサイトに必要な数のHTMLページに追加できます。

同じテンプレート

  • ステップ9 *-このページでは、メインコンテンツセクションのみを編集できます。 マウスを他のセクションに移動すると、編集できないことがわかり、マウスカーソルも赤い十字の円に変わります。

メインコンテンツセクション

  • ステップ10 *-外観を確認するには、[ファイル]メニューに移動し、ブラウザで[プレビュー]を選択します。

プレビューを選択