第10回 ボタン画像の作成とリンク[スライス機能](6月25日)

課題:スライス機能を使っての画像の書き出しとリンク設定

Fireworksのスライス機能を使って複数の画像を同時に書き出す

画像にリンクを張る方法と注意点の確認

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

授業前の準備

  • 教材のダウンロード:web_09.zip
  • ダウンロードしたフォルダの名前を変更する
    • 例:web_09_10810000
  • Dreamweaverを起動しサイト設定を行う
  • サイト設定でサイト名、ローカルルートフォルダ、ならびにリモートサーバ情報を設定する
  • 前回の課題データがリモートサーバに残っている場合は削除しておく
  • 退室時にはDreamweaverを終了させる前にサイト設定を削除およびフォルダを削除すること
  • 必要に応じてデータは各自でUSBメモリなどにコピーする

スライス機能を使っての画像の書き出し

  • 背景と一体化したロゴやボタンなどはFireworksのスライス機能を使ってファイルを書き出す
  • スライスツールを使って書き出す領域を指定する
  • スライス名がそのまま書き出すファイル名になる
  • スライスごとに書き出すフォーマットを設定できる

画像へのリンク設定

  • 画像にリンクを設定するとリンク色のボーダー(境界線)が自動的に表示される
  • CSSでボーダーが表示されないように設定する

評価ポイント

  • スライス機能を使っての書き出しが正しくできているか?(20点)
  • 画像のフォーマットが適切に設定されているか?(20点)
  • 画像の配置とリンクの設定が適切に行われているか?(20点)
  • ファイルが正しくアップロードできているか?(20点)
  • 魅力あるページデザインになっているか?(20点)

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

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

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