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 台しか教室に用意できないので,順番待ちになる可能性がある。すでにスキャ ナを使い慣れている人はあらかじめ画像を準備しておくとよい。 (以上)
© Copyright 2024 Paperzz