How To Dreamweaver

Divタグの挿入してみよう

Divタグとは?

まずはベースを作ります

挿入バーのカテゴリを[一般]にして、[Divタグ挿入]ボタンをクリックします

 

[Divタグを挿入]ダイアログボックスが開くので
  IDに[base]と入力し、[新規CSSスタイル]をクリックします

 

[新規CSSルール]ダイアログボックスが開くので、
セレクタタイプ→詳細設定をクリック
セレクタ→[#base]と入力します
設定をしたら[OK]をします

[CSSファイルの新規保存]ダイアログボックスが開くので、
  CSSファイルに名前を付けて保存します

[#baseのCSSルール定義]ダイアログボックスが開くので、
  カテゴリを[ボックス]にし、幅を[750px]に高さを[800px]に設定します

余白を全て[10px]に、マージンの左右を[自動]に設定します

カテゴリから[ボーダー]を選択します
 スタイル(全て同一):二重線
 幅(全て同一):3px
 カラー(全て同一):#FFCC99
 に設定します

 

カテゴリから[背景]を選択します
 背景:#FFFFCC を設定します

[OK]ボタンをクリックします

[Divタグを挿入]ダイアログの[OK]ボタンをクリックします

これでIDが[base]のDivタグが挿入されました。
これがホームページの土台となりますので、
この中に本文や写真、コンテンツを入れていきます。
今回は[base]の中に[left]と[right]のDivコンテンツを挿入してみましょう。

[base]の中にDivコンテンツを挿入してみよう

まずは左のコンテンツ[left]を挿入してみましょう。

挿入バーのカテゴリを[一般]にして、[Divタグ挿入]ボタンをクリックします

[Divタグを挿入]ダイアログが開くので、
  IDに[left]と入力し、[新規CSSスタイル]をクリックします

[新規CSSルール]ダイアログが開くので、
 セレクタタイプ:詳細設定をクリック
 セレクタ:[#base #left]と入力
 設定をしたら[OK]をします

[CSSファイルの新規保存]ダイアログが開くので、CSSファイルに名前を付けて保存します

[#base #leftのCSSルール定義]ダイアログが開くので、カテゴリを[ボックス]にし、
 幅:300px
 高さ:700px
 フロート:左
 余白:(全て同一)10px
 マージン:上50px 左10px
 に設定します

 

あとは前回と同様に[ボーダー]と[背景]の設定をして[OK]をクリックします
(カラーのみ違う色にしましょう)

次に右のコンテンツ[right]を挿入してみましょう。

挿入バーのカテゴリを[一般]にして、[Divタグ挿入]ボタンをクリックします

[Divタグを挿入]ダイアログが開くので、
  IDに[right]と入力し、[新規CSSスタイル]をクリックします

[新規CSSルール]ダイアログが開くので、
 セレクタタイプ:詳細設定をクリック
 セレクタ:[#base #right]と入力
 設定をしたら[OK]をします

[CSSファイルの新規保存]ダイアログが開くので、CSSファイルに名前を付けて保存します

[#base #rightのCSSルール定義]ダイアログが開くので、カテゴリを[ボックス]にし、
 幅:380px
 高さ:700px
 フロート:左
 余白:(全て同一)10px
 マージン:上50px 左10px
 に設定します

 

あとは前回と同様に[ボーダー]と[背景]の設定をして[OK]をクリックします
(カラーのみ違う色にしましょう)

これで[base]の中に2つのコンテンツが追加されました。