第6回課題 (画像の作成 (1))

2002/11/18
情報処理演習B「マルチメディアウェブページ作成」
第6回
課題 (画像の作成 (1))
実習 0. 準備
•
file_server の Kadai にある [schiba] → [web02] の中の [No7] フォルダを ZIP ディスクに
コピーしなさい。
実習 1. ファイル形式の変換
[No7] フォルダにある BMP (24bit ビットマップ) 形式の画像ファイル sample.bmp を「ペイン
ト」で開き,sample.gif という名前で GIF 形式の画像に変換しなさい。
同様に,sample.bmp を sample2.gif に変換しなさい。どのような変化があるか,調べ,また
sample.gif との違いを比べなさい。
実習 2:JPEG 画像の圧縮度の変更
[No7] フォルダにある BMP 形式の画像ファイル viet.bmp を使い,以下の作業をしなさい。
1.
2.
3.
Photo Editor で viet.bmp を開きなさい。
viet.bmp を viet.jpg という名前をつけ,JPEG 形式で保存しなさい。圧縮度は 100 (最高画
質) を指定しなさい。
70, 40, 10 の異なる3つの圧縮度を指定し,viet.bmp を JPEG 形式で保存しなさい。それぞ
れ viet70.jpg, viet40.jpg, viet10.jpg というファイル名で保存し,以下の表に各ファイルの
物理サイズ (ファイルサイズ) を調べて記入しなさい。また,それぞれのファイルをブラウ
ザまたは Photo Editor で閲覧し,見栄えを比べなさい。
ファイル名
ファイルサイズ
4.
viet.bmp
viet.jpg
viet70.jpg
viet40.jpg
viet10.jpg
viet.bmp の表示サイズを高さ 300 ピクセルに変更し (幅は高さに合わせて調整する),圧縮度
30 程度に合わせて cho.jpg という名前で保存しなさい。物理サイズ (ファイルサイズ) が
20KB 以下になるようにし,必要ならば再度作成しなおすこと。
実習 2:トリミングと透過 GIF 作成
[No7] フォルダにある logo_korea.gif という GIF 形式の画像ファイルを PhotoEditor で開き,
黄色の部分の外側をトリミングし,logo_korea1.gif という名前をつけて保存しなさい。保存後,[フ
ァイル] → [プロパティ] で画像の高さと幅 (ピクセル) を調べなさい。
さらに,黄色の部分を透過にし,logo_korea2.gif という名前をつけて保存しなさい。
作成した logo_korea1.gif, logo_korea2.gif を好きな外国を紹介する Web ページ課題の入っている
フォルダ (No5 フォルダ) にコピー (または移動) しなさい。課題ページの h1 要素を以下のよう
に修正して上記の画像を表示させ,両者がどのように表示されるかを調べなさい。
変更前: <h1><a name="top"><span class="en" lang="en">My Favorite Country:</span> 国
の名前</a></h1>
変更後: <h1><a name="top"><img src="logo_korea1.gif" alt="My Favorite Country: 紹介する国
の名前” width=”画像の幅” height=”画像の高さ” align=”center”></a></h1> (logo_korea1.gif の場合)
※ 「紹介する国の名前」
「画像の幅」
「画像の高さ」には,それぞれ自分の内容を入れること。
2002/11/18
情報処理演習B「マルチメディアウェブページ作成」
実習 3:オリジナルのロゴの作成
[No7] フォルダにあるプレゼンテーションファイル mylogo.ppt を PowerPoint で開きなさい。
スライド 1 枚目には実習2で利用したロゴのデザインがある。1 枚目のスライドを参考に,課題
で作成した,国を紹介するページのためのタイトルロゴを 2 枚目のスライドに作成しなさい。ロ
ゴの大きさは幅 470 ピクセル,
高さ 150 ピクセル程度とする (= 12.4 センチ×4 センチ程度)。
[No7]
フォルダに 540 ピクセル×180 ピクセルの画像 (色は黄色 #FFFF00 の単色) があるので,利用
してよい (黄色を利用したい人は,
「ペイント」でロゴでは使わない色を変更して使うとよい)。書
き出した GIF 画像は少し縮むので,大きめに作っておくとよいようだ。1 枚目のスライドや配布
資料 6 ページを参考に,ワードアートを用いてテキストを入れること。
ロゴは GIF で作成し,mylogo.gif という名前で保存しなさい。トリミングを行い,必要ならばさ
らに透過 GIF にしなさい。
作成したロゴを,国を紹介するページのトップページに表示させなさい。ロゴを表示する img タ
グには,幅と高さを表す width, height 属性, 代替テキストを入れる alt 属性を必ず入れること
(実習 2 参照)。更新したページを FTP し,インターネット上でタイトルロゴつきのページが閲覧
できるようにしなさい。
来週の授業の準備
次週,スキャナを使った作業をおこなう。実習として,以下のような Web ページを作成するので,
各自内容に合った素材 (写真その他) を準備しなさい。
思い出の一枚 (自分にとって印象に残っている写真等を紹介する)
写真は,肖像権,プライバシーなどで問題がなければ,アルバムその他からとっても構わない。
また,希望するならばイラスト等でもよい。デジタルカメラを持っている場合などは,スキャナ
を使わなくともかまわない。
当日スキャナは 1 台しか教室に用意できないので,順番待ちになる可能性がある。すでにスキャ
ナを使い慣れている人はあらかじめ画像を準備しておくとよい。
(以上)