Microsoft Word - 10isA06.doc

Transcription

1 ( 第 6 回 ) 情報科学 A 資料 グラフィックデータを使ったホームページ 担当笹原 千葉 野瀬 ポイント : サンプルを加工したものではなく, 自分でレイアウトや盛り込む内容を考えたオリジナルなページを作成してみよう 自分の描いたイラストをいれる, 背景に模様をつける, 表を使って図をレイアウトする, など, 見やすい Web ページを作成するためのテクニックを知っておこう Web ページは広く 公開される ( 多くの人の目に触れる ) ものであることを, よく理解しなければならない 公開してはいけないもの, 公開するときに注意が必要なものについて, 要点を押さえておこう 1. グラフィックを活用したページを作成する前に 他人の著作権などを侵害しないこと 漫画 アニメのキャラクタなどを許可なく使用してはいけない アイドルや芸能人の写真などをむやみに使用してはいけない 他人が撮影した写真 動画などを勝手に使用してはいけない 他人が書いたイラスト アニメーションなどを勝手に使用してはいけない 他人が書いた文書を引用する必要が生じた場合には, 必要な部分を出典と共に示す 教育 研究目的の利用であることを忘れないこと 大学の WWW サーバは, あくまでも教育 研究目的に設置されている 商売に使うなど, 教育 研究目的を逸脱した利用をしないように留意すること 他人に使わせたり, 外部の団体等の主張を掲載したり宣伝をするために使用しないこと 2. いろいろなグラフィックデータを扱う Web ページのなかで表示できるグラフィックデータの種類は,JPEG ( じぇいぺぐ, 拡張子.jpg) か,GIF ( じふ, 拡張子.gif) のみ 1 パワーポイントで描いた図やロゴ (PowerPoint 形式 ), ペイントブラシで描いたイラスト (BMP 形式 ),PhotoShop の画像データ (PSD 形式 ) などは, そのままでは Web ページに表示できない 2.1 グラフィックデータの形式変換 PhotoShop Elements を使ってパワーポイントやペイントブラシ (Paint) で描いた画像データを開くことができる PhotoShop Elements の Web 用に保存 を用い,GIF か JPEG の種類を指定して保存する こうすることによって, グラフィックデータの形式を変換することができる 1 JPEG と GIF のほかに PNG ( ぴんぐ, ぴーえぬじー, 拡張子.png) 形式の画像もウェブページ中に表示することができる PNG は新しい画像形式であり, アルファチャンネルによる透過など高度な画像処理技術が利用できるが, この授業では扱わない 麗澤大学 2010 年度情報科学 A 資料 No.6 1

2 デジタル化授業ホームページ : Paint PowerPoint Digital Camera ( 背景 イラストなど ) ( ロゴ 図など ) ビットマップファイル (bmp) で保存 ( 写真 ) 直接 PhotoShop で画像を作成することも可能 イメージスキャナ PhotoShop Elements などの画像処理ソフト JPEG ファイル (.jpg) GIF ファイル (.gif) 2.2. グラフィックデータ作成と変換のヒント ( 一例 ) 1. イラストや背景の模様の作成 ペイント ([ スタート ] [ プログラム ] [ アクセサリ ]) や PhotoShop Elements でイラストや背景の模様を描く ファイル 名前を付けて保存 で, ファイル名をつけて保存する ( ビットマップ (bmp) 形式や PhotoShop (PSD) 形式で作成した場合は JPEG または GIF 形式に変換が必要 ) 必要があれば PhotoShop Elements で 切り抜き をしたり, 効果をつけて ファイル Web 用に保存 で JPEG または GIF 形式で保存する 2. 図の作成 GIF 形式を推奨 Power Point で図を作成する ファイル 名前を付けて保存 で, ビットマップ形式を指定して, そのスライドだけをビットマップ形式で保存する ( 次ページ図参照 ) ビットマップ形式で作成したほうがきれいな画像ができる (GIF 形式で保存してもよいが, 仕上がりが粗くなる ) ビットマップ形式の画像を PhotoShop Elements で開き, 必要があれば 切り抜き などの編集をおこなったうえで,GIF ( または PNG) 形式で保存する 3. ロゴの作成 GIF 形式を推奨 PowerPoint の ワードアート を使ってロゴを作成する (2.3. 参照 ) より完成度の高いロゴを作りたい人は PhotoShop Elements によるロゴ作成に挑戦してもよいだろう ロゴは再度編集できるよう, PowerPoint 形式 (PhotoShop Elements の場合は PhotoShop 形式 ( 拡張子.psd)) でデータを保存しておく (JPEG,GIF 以外の画像ファイルを直接 Web ページ中に使うことはできないので,JPEG また GIF への変換が必要 ) 作成したロゴの公開用の画像を作成する ファイル 名前を付けて保存 (PhotoShop の場合には ファイル Web 用に保存 ) で保存する PowerPoint の場合, ファイルが複数のスライドを含む場合は, 必要なスライドのみ保存する ( 次ページ図参照 ) また,PowerPoint の場合, いったんビットマップ形式で保存してから 麗澤大学 2010 年度情報科学 A 資料 No.6 2

3 PhotoShop Elements で読み込み,GIF 形式に変換して保存したほうがきれいな画像ができる 必要があれば, 作成した画像を PhotoShop Elements で開いて 切り抜き などの編集をおこない GIF ( または PNG) 形式で保存する 4. デジタルカメラでとった写真データ JPEG 形式のものがほとんどなので, 多くの場合はそのまま使えるが, 画素が大きいとファイルサイズも大きくなる ファイルサイズを調べて 100KB を超すものは,PhotoShop Elements を使って 切り抜き をおこなうか, ファイル Web 用に保存 のダイアログで 変更後のファイルサイズ を設定する 画像解像度を変更したり ([ イメージ ] [ サイズ変更 ]), 色数を少なくしたりする ([ 画質調整 ] [ カラー ]) こともできる JPEG 形式で作成する画像は, 圧縮率を変更してファイルサイズを小さくすることができる ( プレビューで確認しながら調整しよう ) 5. 紙に描いてあるイラストや図, 写真のデータの取り込み 図書館 4 階ラウンジや 3 階 CALL 教室にあるイメージスキャナを使ってデータを取り込むことができる 利用方法は情報システムセンターが配布して入るマニュアル ネットワークスキャナの利用方法 ( 改訂版 ) (Tech-Note 2009 No.12) 2 を参照 補足 : PhotoShop で画像を簡単に開く方法 マイコンピュータ でファイルが保存されているフォルダを開き, ファイルのアイコンの上でマウスを右クリックし, メニューから プログラムから開く Adobe PhotoShop Elements ( 右図 ) を選択すると, 素早くファイルを開くことができる 2.3. パワーポイントで図を作成する時の操作方法 PowerPoint で図を作成する ファイル 名前を付けて保存 で, ビットマップ 形式 ( 拡張子 bmp) を指定する 後で図を修正する可能性がある場合には, いったん PowerPoint のプレゼンテーション形式で保存し, その上で画像形式に書き出すとよい また, ビットマップ (BMP) 形式で一旦出力した方ができあがりの画質がよい 名前を付けて保存 その他の形式 デバイスに依存しないビットマップ (BMP 形式のこと ) を選択 2 麗澤大学 2010 年度情報科学 A 資料 No.6 3

4 スライド全体が画像として保存されるので,PhotoShop Elements を使い 切り抜き で余白を削除する 1. PhotoShop Elements を起動して, ファイルを開く 2. 選択ツールで領域を選択し, 切り抜き をして空白を減らす ロゴ部分を領域選択する 背景の白が入らないようにしよう スライドにあらかじめ枠をつけておいても面白い PhotoShop Elements の Web 用に保存 ( 左下図 ) を使い JPEG または GIF 形式で画像を保存する ( 中央下図 ) PhotoShop Elements での画像の大きさの調整 : ファイル Web 用に保存 のダイアログで 変更後のファイルサイズ を設定する ( 右上図 ) イメージ サイズ変更 画像解像度 からも画像の大きさを設定できるが, 単位がピクセルではないので, ピクセル単位の大きさは後で確認する必要がある 大きめに作って Web 用に保存 ダイアログで変更するほうが簡単 確実 2.4. ペイントでイラストを作成する時の操作方法 ペイントでイラストや図を作成する ファイル 名前を付けて保存 で画像を保存する そのまま利用する場合には JPEG または GIF 形式を指定する (PhotoShop Elements などで加工する場合にはビットマップ形式を指定して保存し, 変換は PhotoShop を使ったほうがきれいな画像ができる ) 必要に応じて,Photoshop Elements を使って切り抜きなどの編集を行う ペイントで画像を保存するときの注意 : ペイント で作成したファイルを保存するとき, 拡張子を指定しないと拡張子が大文字になります HTML ファイルの中に画像のファイル名を記述する際には, 拡張子を含めた正しいファイル名を確認し, 正確に記述するようにしましょう 麗澤大学 2010 年度情報科学 A 資料 No.6 4

5 ファイル名の大文字区別は思わぬトラブルの原因になります Windows ではファイルの大文字小文字は区別されませんが, コンテンツを公開する際に使う WWW サーバ (Unix) では区別されます ( つまり,WWW サーバ上では myphoto.jpg と myphoto.jpg は別のファイル名になります ) そのため, 公開の際に思わぬトラブルになることがあります ( 公開の手順については次回授業で説明します ) 2.5. ホームページで表示できない画像の変換 ビットマップ (.bmp),tiff 形式 (.tif),photoshop 形式 (.psd) といった形式の画像や PowerPoint プレゼンテーションはそのままでは表示できない PhotoShop Elements で画像を開き, ファイル Web 用に保存 で JPEG または GIF 形式を指定し変換する 2.6. グラフィックデータの表示方法 HTML でグラフィックデータを表示するには,img タグを利用する ただし, 表示できるデータの形式は,JPEG か GIF のみ 同じフォルダに画像データを入れておくと簡単 ( どのフォルダにあるかを指定するこ とにより, 別のフォルダ置かれた画像を表示することも可能 ) img タグは以下のように記述する 例 : alt=" " の中には日本語を入力できる それ以外のタグは全て半角で書くこと! <img src="unit.jpg" alt="pc の写真 " height="188" width="251"> 半角スペースを入れること src: 表示したい画像ファイル名を指定 ( 同じフォルダにない画像の場合はファイルの場所も指定する 第 5 回資料を参照 同じフォルダにある場合には省略可能 ) alt: 画像ファイルを表示しない場合 ( もしくは, データがない場合 ), 代わりに表示する文字 height: 画像の高さを指定 width: 画像の横幅を指定 height や width を省略した場合は, 画像がそのままの大きさで表示される 3. Web ページ作成のテクニック HTML のタグを駆使すれば, かっこいいページが作成できる 手間をおしまず, いろいろ工夫してみよう ( もちろん, 内容そのものも充実させよう ) タグの使い方は, 参考になるウェブサイトなどを自分でどんどん調べ, 実際に使ってみて覚えていくのが近道 例えば, 以下のようなことをしたいときには, どうすればよいだろうか いくつかヒントを紹介する 上であげた画像の作成方法を活用しよう より高度な画像編集のための知識を授業ウェブページ 3 上で公開しているのでぜひ読んで実際に画像を作成してみよう 自分の書いた図やイラストをいれる ( 写真以外の図をいれる ) 画像として作成し,img タグで記述する 自分で描いた絵を背景に表示する ( 色をつけるだけではなくて ) body タグのなかで背景に画像を指定する ( 3.1 を参照 ) ロゴマークなどをデザインして入れる 画像として作成し,IMG タグで記述する 例えば, ワードアートなどでロゴを作成し,h1 のタグの中に以下のように画像を img タグで記述することで, 見出しを画像として表示できる <h1><img src="logo.gif alt= のホームページへようこそ! width= 317 height= 98 ></h1> 3 URL: 麗澤大学 2010 年度情報科学 A 資料 No.6 5

6 図を並べて表示する 表 (table タグと tr, td タグ ) を使ってレイアウトする ( 3.1. を参照 ) お手本になるようなページを探して参考にする ( 物まねするのではない!) WWW ブラウザの ページ ソースの表示 もしくはページ上でマウスを右クリックして, メニューから [ ソースの表示 ] を選択すれば, そのページの HTML を調べ, どういうタグがどのように組み合わされているのかを調べることができる Web ページの作成方法に関するテクニックやヒントは,WWW にたくさん掲載されている 検索エンジン等を駆使し, 自分でノウハウを探してみよう PowerPoint のワードアート 背景に模様を描いたファイルを指定 表を作って そこに文字や写真をレイアウト 3.1 HTML のテクニックで知っておくとよいもの 背景の模様を指定 : <body background=" ファイル名 "> 例 :<body background="back1.gif"> (body と background の間は半角スペース で区切る ) 表を使ったレイアウトの指定 : <table> </table> <tr> </tr> <td> </td> などを使用例 : <table width="458" height="337" align="center" border="0"> <tr> 字下げする <td><img src="myphoto.jpg" height="153" width="212"></td> と見やすく <td align="left" valign="middle"><b> かわいいアシカがいっぱい <br> なる ( 半角ス ( みんな野生です )</b></td> ペースを使 </tr> うこと!) <tr> <td align="right" valign="middle"><b> 珍しい花が 3000 種類 </b></td> <td><img src="flower.jpg" height="164" width="225"></td> </tr> </table> 3.2 画像作成のテクニックで知っておくとよい応用知識 Web ページの背景色 (16 進数の RGB (Red-Blue-Green) で指定 ) とロゴの色 (10 進数の RGB で指定 ) を合わせる : ロゴの背景色をホームページの背景色 ( または背景画像の色 ) と同じ色で作っておくときれいなロゴになる 10 進数の色表記を 16 進数に変換する方法は授業ホームページの資料 HTML での色の指定 :10 進数 16 進数コンバータ を参照 以下のようにロゴの背景色を透明にする方法もある 麗澤大学 2010 年度情報科学 A 資料 No.6 6

7 授業ホームページ : ロゴの周りを枠で囲み, デザインに利用するのも面白い 5 の実習資料を参照 背景を透明色にする : 透過 GIF の利用 GIF 形式で作成された画像には透明部分を設定できる 背景の画像や色がそのまま見えるので, ロゴの作成などに効果的である PhotoShop Elements で透明部分を指定する場合は, 画像を 背景 から レイヤー に変更してから編集をおこなう ( 詳細は授業ウェブページの補足資料 PhotoShop Elements を用いて透過 GIF 画像を作成する方法 を参照 ) 透過色は JPEG 形式の画像では指定できない また,JPEG 形式で保存してしまった画像やスナップ写真などは色が複雑に表現されているので,GIF 形式に変換して保存しなおしても綺麗な透過色は作ることができない なお,GIF 形式の画像はアニメーションなどを作成することもできる ( 説明は省略 ) 4. 練習課題 A ( 基礎編, 教師の指示に従って提出のこと ) file_server の [user-id] (X:) の homepage フォルダに保存してある sample3.html ファイルを EmEditor で開きなさい ( 自己紹介のサンプルページ ) PowerPoint かペイント ( または PhotoShop Elements 高度な編集ができるぶん熟練を要するので, 利用したことがある人, 関心のある人以外はペイントで OK) を利用して, 自分の写真の代わりになる画像を作りなさい ( 自分に見えなくとも OK とする ) 上記の画像を,sample3.html ファイルで表示されるように工夫しなさい 正確なファイル名, 画像の高さと横幅 ( ピクセル ) を確認すること sample3.html を WWW ブラウザで表示したところをブラウザで印刷しなさい 印刷結果に作成した自分の写真の代わりになる画像のファイル名 ( 拡張子を含む正確な名前 ) とファイルサイズ (KB) を記入しなさい 印刷結果に科目名, クラス名, 提出日, 学籍番号, 氏名, ふりがなを手書きで記入して提出しなさい 5. 練習課題 B ( 応用編, 提出は任意 ) file_server の [user-id] の homepage フォルダに保存してある mylogos.pptx ファイル (PowerPoint 2007 プレゼンテーション ) を開きなさい スライド 5 枚目の って誰なのさ? のスライドにあるロゴを自分なりに修正し, 自己紹介のページ用のロゴを作ってみなさい 2.3. および以下の図を参考に, 作成したロゴを デバイスに依存しないビットマップ 形式で保存しなさい ファイル名は myintro.bmp としなさい PhotoShop Elements を使い,myintro.gif のロゴの回りの不要な部分を 切り抜き なさい ( 切り抜き については第 1 回資料を参照 ) また, Web 用に保存 を使い,GIF 形式の画像として保存しなさい 麗澤大学 2010 年度情報科学 A 資料 No.6 7

8 授業ホームページ : 4. で使用した自己紹介のサンプルページ sample3.html に myintro.gif を表示するよう HTML を編集しなさい 以下のように <h1> </h1> の中に画像を記述し, タイトルのテキストの代わりにロゴ画像が見出しとして機能するようにすること ( 2.6. および 3. を参照 ) <h1><img src="myintro.gif alt= の自己紹介 width= *** height= *** ></h1> sample3.html の本文の内容を編集し, 自己紹介のページらしい記述を工夫しなさい sample3.html を WWW ブラウザで表示したところをブラウザで印刷しなさい 印刷結果を, 科目名, クラス名, 提出日, 学籍番号, 氏名, ふりがなを手書きで記入して提出しなさい 6. 実習課題 (Web ページ制作の最終課題 ) サンプルを使わないで, 自分自身の Web ページを作成しなさい なお, 最低限, 以下の Web ページ制作課題の条件 を満たしていること この授業時間中には当然終わらない まずはトップページ (index.html) を指定された期日までに作っておくこと 作成したホームページは期日 ( 後日確認する ) までに WWW サーバ上に公開する 重要 WWW サーバへの転送方法は後日授業であつかう Web ページ制作課題の条件 ホームページ ( トップページ ) が存在していること (index.html) 自分のユーザー名 / でアクセスできること 学生用の WWW サーバ名 ( は麗澤大学の公式ホームページや授業ホームページのものとは異なるので注意 サーバへの公開方法は次回学習する トップページには, 最低限, 次のものが記載されていること 誰のホームページであるのか, ということ 最終更新日 グラフィックデータ ( サイズが大きくならないように気を付けること ) 自分が作成した他のページに対するリンク ( トップページをメニューとして機能させる ) 麗澤大学のホームページ ( に対するリンク ページ作成者 ( つまり, あなた ) に対するメール送信用のタグ トップページ以外に, 最低 3 ページ, オリジナルなページが存在すること そのなかには, ページ作成者について紹介したページが 1 ページは存在していること ( ただし, プライバシーに関わる情報を開示しないように注意 ) 自分が作成したページには, 必ず, 自分のトップページに対するリンク ( ホームページに戻る など ) が存在していること 最低でも 5 個所, 自分で探した便利な WWW サイトへのリンクを乗せていること 必ず, 写真およびイラスト ( ないし図 ) がはいっていること ( もちろん著作権や肖像権に注意すること ) 他の人が作成したイラストや写真を使っている場合には, その旨を明示すること Web ページ課題の評価のポイントは以下の通り (1) デザインが優れているか (2) テーマや内容が工夫されているか 記載されている情報が有用で正確か (3) 著作権や肖像権などに配慮し, またネチケットを守っているか (4) プライバシーの開示など危険なことをしていないか 教師の指定した期限までにトップページ (index.html) を作成しておくこと ( 以上 ) 麗澤大学 2010 年度情報科学 A 資料 No.6 8