Dreamweaverで流体グリッドレイアウトを作成したら、次は設計のセクションを構成するためにタグなどの要素を追加します。 Dreamweaver CCでページをデザインするときは、タグを使用するかHTML5タグを使用するかの2つのオプションがあります。
これらの流体レイアウトではどちらも同じように機能しますが、タグやタグなどのHTML5タグを使用すると、Webページに意味や構造が追加されるため、利点があります。
タグ、HTML5タグ、およびその他の要素を流体グリッドレイアウトに追加するには、以下の手順に従います。
-
挿入→構造→ナビゲーションを選択します。
または、構造挿入パネルでナビゲーションをクリックすることもできます。
-
[挿入]ダイアログボックスの[流体要素として挿入]チェックボックスをオンにします。
流体グリッドレイアウト機能を使用する場合は、タグを追加するときにこのオプションを選択する必要があります。
<！ - 2 - >
-
[挿入]ダイアログボックスで、クラスまたはIDセレクタを使用して挿入するタグの新しいスタイルを作成するかどうかを選択し、新しいスタイルの名前を入力します。
HTML5タグを挿入する場合でも、3つのレイアウトすべてで要素の書式設定に使用できる、対応するクラスまたはIDスタイルを作成する必要があります。
<！ - 3 - >クラススタイル名はドット（。）で始まり、IDスタイル名はシャープ記号（#）で始まらなければなりません。
-
OKをクリックします。
タグがレイアウトに追加され、レイアウト内に新しいボックスが形成され、対応するスタイル名がCSSレイアウトに3回追加されます。
-
レイアウトに含まれている最初のタグを選択し、タグの右下に表示される小さなごみ箱アイコンをクリックして削除します。
初期タグを流体グリッドレイアウトに含めることはできますが、それに適用されるスタイルの名前を変更することもできます。
-
挿入→構造→商品を選択します。
[記事の挿入]ダイアログボックスが開きます（[ヘッダーの挿入]ダイアログボックスと同様）。
-
[挿入]ダイアログボックスの[流体要素として挿入]チェックボックスをオンにします。
-
[挿入]ダイアログボックスで、クラスまたはIDセレクタを使用して挿入するタグの新しいスタイルを作成するか、新しいスタイルの名前を入力するかを選択します。
-
OKをクリックします。
タグがレイアウトに追加され、レイアウト内に新しいボックスが形成され、対応するスタイル名がCSSレイアウトに3回追加されます。
-
ステップ6〜9を繰り返して、レイアウトに必要な数だけ要素を追加します。
HTML5要素を流体グリッドレイアウトに追加するには、ストラクチャインサートパネルの対応するアイコン（ナビゲーション1つ、ヘッダー1つ、記事2つ、フッター1つ ）をクリックします。
このコードでは、流体グリッドレイアウト用に作成する各スタイルの名前に、接頭辞 fluid- が追加されています。
