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

2002/11/18
情報処理演習Ｂ「マルチメディアウェブページ作成」
第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 の異なる３つの圧縮度を指定し，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
情報処理演習Ｂ「マルチメディアウェブページ作成」
実習 3：オリジナルのロゴの作成
[No7] フォルダにあるプレゼンテーションファイル mylogo.ppt を PowerPoint で開きなさい。
スライド 1 枚目には実習２で利用したロゴのデザインがある。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 台しか教室に用意できないので，順番待ちになる可能性がある。すでにスキャ
ナを使い慣れている人はあらかじめ画像を準備しておくとよい。
(以上)