コンピュータ基礎演習３

コンピュータ基礎演習４

リンク

第１１回　ロールオーバーの設定[フレームとビヘイビア]（7月2日）

課題：リンクのロールオーバー設定

テキストリンクと画像リンクのロールオーバー設定の方法

Fireworksのフレーム機能とスライス機能を使ってロールオーバー画像を書き出す

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

授業前の準備

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

ロールオーバーの設定（テキスト）

  • テキストにリンクを設定するとカラーが青で下線表示の状態になる
  • テキストリンクの表示を変えるにはaタグのスタイルを定義する
  • aタグには状態に合わせて表示を変える特殊なセレクタがある
  • a:hoverセレクタでテキストリンクのロールオーバー時のスタイルを定義することができる

ロールオーバーの設定（画像）

  • Webの画像のロールオーバーはJavascriptやCSSで表示画像ファイルを入れ替えることで実現している
  • ロールオーバー用の画像はFireworksのフレーム機能を使うと管理が楽であると共にスライス機能でフレーム毎にファイル名を変えて書き出すことができる
  • ロールオーバーを設定する画像にはHTML上で名前をつけておく必要がある
  • Dreamweaverではビヘイビア機能を使って画像のロールオーバー用Javascriptを自動的に設定することができる

評価ポイント

  • CSSによるテキストリンクのロールオーバーが正しくできているか？（20点）
  • Fireworksでのロールオーバー画像作成が正しくできているか？（20点）
  • Fireworksからの画像書き出しが正しくできているか？（20点）
  • ビヘイビアを使った画像のロールオーバーが正しく設定できているか？（20点）
  • 魅力あるページデザインになっているか？（20点）

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

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

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

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