コンピュータ基礎演習３

コンピュータ基礎演習４

リンク

第８回　Fireworksの基本[Web用画像の作成]（6月11日）

課題：Fireworksを使ってのWeb画像の作成

Web画像の作成方法とフォーマットの種類を理解する

授業前の準備

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

Webにおける画像の使用

  • テキストだけでの表現力には限界があるので、魅力あるWebページにするには画像は不可欠
  • ただし、安易に画像を使う事は避け、可能な限りCSSでの表現を試みる
  • 画像をタグで配置する際には代替テキストを必ず設定する
  • 作成した画像ファイルは画像専用のフォルダを作成してその中に保存する
  • 書き出した画像の他に編集用のFireworksファイルも保存しておく

Webに使用する画像の種類

  • GIF (Graphic Interchange Format)
    • 最大256色
    • アイコンやイラストなどの色数の少ない画像に適している
    • 画像によっては色数を少なくしてファイル容量を小さくできる
    • 透過GIFやアニメーションGIFなどの拡張機能がある
  • JPEG (Joint Photographic Experts Group)
    • フルカラー（1670万色）
    • 写真などの色数の多い画像に適している
    • 圧縮率を選べる
    • 背景の透過はできない
  • PNG (Portable Network Graphics)
    • Web用に新たに開発された画像形式
    • アルファチャンネル（画像に半透明部分を設定可能）が使えるなど機能的には優れているが、古いブラウザでは表示できないため使用時は注意が必要

Fireworksの特長

  • ビットマップデータとベクターデータを同時に扱うことができる
  • 写真と文字を組み合わせることが多いWeb画像の作成に特化したツール
  • Fireworksで作成したファイルはFireworks PNG形式になっているのでWebで使うにはGIFまたはJPEGで書き出す
  • 書き出し後の容量や画質を確認して最適な設定で書き出すことが可能
  • ひとつのFireworksファイルから複数の画像を同時に書き出すことが可能
  • 正確な作図や複雑なイラストの作成などはIllustrator、きめ細かい写真の補正などはPhotoshopが適している

評価ポイント

  • Fireworksの特長を生かした画像作成ができているか？（20点）
  • 画像ファイルが適切な場所に保存されているか？（20点）
  • 画像の種類を適切に使い分けているか？（20点）
  • 画像の配置と代替テキストの設定が適切に行われているか？（20点）
  • 魅力あるページデザインになっているか？（20点）

HTMLファイルおよびCSSファイルと書き出したWeb画像ファイルを提出する

Fireworksファイル（*.png）は提出しなくてよい

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

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