コンピュータ基礎演習３

コンピュータ基礎演習４

リンク

第９回　写真の編集と背景の設定[インライン画像と背景画像]（6月18日）

課題：サムネイル画像と背景画像をWebページに設定する

Webページに画像を表示させる２つの方法の違いと目的を理解する

DreamweaverのFTP機能を使ってファイルをアップロードする

完成サンプル

完成データ

授業前の準備

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

Webページに画像を配置する２つの方法

  • インライン画像として配置
    • ページの本文中に<img>タグを使って挿入する
    • コードに記述され、検索エンジンなどにも認識される
    • 代替テキストの設定が必須
    • 情報として必要な画像や、ボタンなどクリックされる画像に用いる
  • 背景画像として配置
    • スタイルシートを使ってブロック（<Div>）タグの背景として表示させる
    • HTMLコードには記述されないため、検索エンジンなどには認識されない
    • 代替テキストは不要（設定できない）
    • 情報としては必要の無いイメージ画像などに用いる

Dreamweaverでのファイルのアップロード（PUT）

  • サイト設定のリモート情報にFTP情報を設定する
  • FTP情報はこのサイトで課題の提出ページで確認する
  • リモート情報が設定されるとファイルパネルでファイルをアップロード（PUT）できる
  • ファイルをドラッグ＆ドロップでアップロードしないように注意
  • アップロードしないファイルはフォルダにまとめてクローク設定をする

評価ポイント

  • ファイルが正しくアップロードできているか？（20点）
  • サムネイル画像が適切に作成できているか？（20点）
  • 画像の配置と代替テキストの設定が適切に行われているか？（20点）
  • 背景画像の設定が適切にできているか？（20点）
  • 魅力あるページデザインになっているか？（20点）

サイト全体をDreamweaverでアップロード（PUT）して提出する

Fireworksファイル（*.png）などの素材はフォルダにまとめてクローク設定をしておく

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

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