コンピュータ基礎演習3
- 第1回 Webデザインの現在と未来(4月9日)
- 第2回 HTML基礎(4月16日)
- 第3回 Dreamweaverの基本[マークアップ](4月23日)
- 第4回 スタイルシートその1[テキストの装飾](5月7日)
- 第5回 スタイルシートその2[レイアウト基本](5月14日)
- 第6回 スタイルシートその3[段組みレイアウト](5月28日)
- 第7回 XHTML + CSS 総合課題(6月4日)
- 第8回 Fireworksの基本[Web用画像の作成](6月11日)
- 第9回 写真の編集と背景の設定[インライン画像と背景画像](6月18日)
- 第10回 ボタン画像の作成とリンク[スライス機能](6月25日)
- 第11回 ロールオーバーの設定[フレームとビヘイビア](7月2日)
- 第12回 テンプレートの作成と編集(7月9日)
コンピュータ基礎演習4
第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時まで