コンピュータ基礎演習３

コンピュータ基礎演習４

リンク

第７回　XHTML + CSS 総合課題（6月4日）

課題：XHTML + CSS コーディングによるWebページの作成

ここまでの総合課題としてWebページの作成を行う

完成例(50%縮小)

授業前の準備

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

課題ページの作成

  • 新規HTMLファイルにテキストを流しこんで作成する
    テキストの一部を削除したり、追加することは禁止
  • レイアウトはすべてスタイルシートで行う
    スタイルシートの初期化を行ってからスタイルの追加を行う
  • スタイルは外部スタイルシートを作成してHTMLファイルに添付する
    HTMLファイル内にスタイルを設定しないように注意する
  • タイトル設定、マークアップ、レイアウト、ブロック分け等、自分で考えて行う
  • 画像はweb_06/imgフォルダ中の４点をすべて使用する
    配置方法や位置は自由
  • オリジナル画像を４点まで追加可能
    ただし、文章とまったく無関係と思われる画像は不可
    追加する画像はweb_06/imgフォルダにコピーする

ブラウザでの確認

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

評価ポイント

  • スタイルシートファイルの設定ならびに初期化が正しくできているか？（20点）
  • マークアップならびにブロック分けが適切にできているか？（20点）
  • スタイルシートによるレイアウトが適切に行えているか？（20点）
  • スタイルシートによるテキスト装飾が適切に行えているか？（20点）
  • 画像の配置と代替テキストの設定が適切に行えているか？（20点）

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

オリジナル画像を追加した場合はその画像ファイルも提出する

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

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