コンピュータ基礎演習３

コンピュータ基礎演習４

リンク

第５回　スタイルシートその２[レイアウト基本]（5月14日）

課題：スタイルシート(CSS)で簡単なレイアウトを行う

テキスト装飾済みのHTMLファイルに簡単なレイアウト（段組みなし）を設定する

授業前の準備

  • 教材のダウンロード：web_04.zip
  • ダウンロードしたフォルダの名前を変更する
    • 例：web_04_10810000
  • Dreamweaverを起動しサイト設定を行う
  • サイト設定ではサイト名とローカルルートフォルダを設定する
  • 退室時にはDreamweaverを終了させる前にサイト設定を削除およびフォルダを削除すること
  • 必要に応じてデータは各自でUSBメモリなどにコピーする

スタイルシートの初期化

  • ブラウザやDreamweaverは独自のデフォルトスタイルシートを持っている
  • 見出しや段落の間の余白やリストのインデントなどもすべてデフォルトスタイルシートの影響
  • スタイルシートでレイアウトを行うにはデフォルトスタイルシートを初期化しておく必要がある
  • ユニバーサルセレクタ（*）を使ったスタイルシート初期化の例 
    * {
  margin: 0px;
  padding: 0px;
}

ブロックのスタイル設定

  • CSSでのレイアウトではコンテンツをブロックに分けて行く作業が基本となる
  • ブロック分けは<div>タグで行う
  • ブロックにまとめたい範囲を選択して挿入パネルの「Divタグを挿入」もしくは挿入メニュー＞レイアウトオブジェクト＞Divタグを選択する
  • 挿入時にIDもしくはクラス名を設定する
  • 親ブロックに設定された親CSSはブロック内の要素に継承される
  • 親ブロックの幅が指定されている場合には子ブロックは原則的に親ブロックと同じ幅になる

ブラウザでの確認

  • CSSで設定したレイアウトは必ずブラウザで確認する
  • Dreamweaverではファイルメニュー＞ブラウザでプレビューを選択する
  • ブラウザによって表示が異なる場合があることを認識しておく

評価ポイント

  • スタイルシートの初期化が正しくできているか？（20点）
  • コンテンツ全体の幅の設定が適切に行えているか？（20点）
  • ブロックのスタイル設定が適切にできているか？（20点）
  • 余白とマージンの設定が適切にできているか？（20点）
  • 効果的なブロックレイアウトができているか？（20点）

HTMLファイルおよびCSSファイルの2ファイルを提出する

ファイル名に全角文字や記号を使わないこと

提出期限は授業日の翌週の月曜日の午後９時まで