Comments
Description
Transcript
ウェブページの作成 (3) 8. 画像の作成 (2) 図やロゴを作成
2005 年度コンピュータ・リテラシー (S) 第 14 回授業 (2005.07.22) ウェブページの作成 (3) 担当:千葉庄寿 (ちば しょうじゅ, e-mail: [email protected]) 8. 画像の作成 (2) 図やロゴを作成する時の操作方法 • • PhotoShop のような本格的な画像作成ソフトを使わなくとも,PowerPoint の図形描画機 能を使って図を作成することもできる。 「ファイル」→「名前を付けて保存」で,JPEG/GIF/PNG のうち,適切な形式を指定す る (ワードアートや図形など,かっちりした線を用いるロゴの場合には,GIF 形式を選ぶ とよい →前回資料§6.2.を参照)。 画像作成後,ロゴのデザインを再度修 正したり,同じデザインで複数のロゴ を作る可能性がある場合には,いった ん PowerPoint のプレゼンテーション 形式を選び,編集可能なスライドとし て保存した上で,作成したロゴを JPEG/GIF/PNG 形式に書き出すとよ い (左図参照)。 「名前を付けて保存」 「現在のスライドを保存」 • 1 保存したスライドは余白を含んでいるので,画像と してホームページにそのまま利用しても,うまく表 示されない (右図)。 ¾ Photo Editor に読み込み,トリミングをして空 白を減らす (前回資料§6.3.参照:領域を選択し, [イメージ] → [トリミング],次ページ左図)。 ¾ 必要に応じてロゴや図のサイズも変更する (Photo Editor で[イメージ] → [サイズ変更]) 麗澤大学 コンピュータ・リテラシー (S) 必要なのはロゴの部分だけ! 第 14 回 授業 URL: http://www.FL.reitaku-u.ac.jp/~schiba/lit_s/ ¾ 「マイコンピュータ」上で縦横の大きさとファイルサイズを確認する (ファイルを選 択し,[ファイル]→[プロパティ], 右下図) トリミング ※ トリミングをしないで画像ファイルを表示すると… (img タグの書き方 →前々回資料§3.) <img src="titlelogo.gif" alt="ようこそ千葉 の ホ ー ム ペ ー ジ へ ! " height="188" width="251"> →小さく表示されてしまう! <img src="titlelogo.gif" alt="ようこそ千葉のホー ムページへ!"> →大きく表示されてしまう! • トリミング後の 画像を表示 ウェブページの作成 (3) 2 高度な技術:「透過 GIF」 ¾ GIF 画像は画像で使われている色のうち,一色を透明なものとして指定することが できる。背景画像や背景の色が透けて見えるようになり,不要な余白を感じさせない 画像を作ることができる。JPEG では透過処理はできない。 ¾ 透過 GIF では,透明に指定した色の箇所は全て透明と 解釈されてしまうので,例えば余白の白を透明にすると, ロゴ中に使われている他の白の部分まで透明になって しまう。そこで,PowerPoint でスライド上にロゴを作 成する際には,ロゴに使用しない色を背景色として指定 しておくとよい (背景の指定方法:[書式]→[背景],右 図参照)。 ¾ 透過 GIF の作成方法: 1. ツールバー上の「透過色に指 定」ボタンを押す。 2. 透過色に指定したい部分をク リックする。 「透過色に変更」ダイ アログボックスで色を確認し, 「OK」を押す。 3. 指定した色が透過色に変わる。 確認し,(必要なら名前を付けて) 画像を保存する。 9. ウェブページ公開時のトラブルシューティング ウェブページの作成はパソコンの総合的な利用スキル/知識を試すのにもってこい。転送後に トラブルがあったら,以下の 9.1.∼9.4. のようなポイントを確認してみよう。 9.1. 自分のホームページが表示されない • URL は間違っていないか? ¾ ログイン名は正しいか? ~ (ティルデ) は正しく入力しているか。 ¾ フ ァ イ ル 名 は 正 し い か ? 拡 張 子 (html ま た は htm) は 正 し い か ? う っ か り index.htm.htm などとしていないか? • ホームディレクトリのなかに www (半角小文字で) というディレクトリが存在するか? ¾ WWW と大文字になっていないか? 3 麗澤大学 コンピュータ・リテラシー (S) 第 14 回 授業 URL: http://www.FL.reitaku-u.ac.jp/~schiba/lit_s/ • ¾ WWWと全角になっていないか index.htm ファイルが www ディレクトリのなかに存在しているか? ¾ index.htm. (不要なドット!), index.htm.htm など余計な文字や記号がついていな いか? ¾ 正しく半角の小文字になっているか? 全角になっていたりしないか? ¾ 転送したファイルは www ディレクトリの中にあるか?間違った場所に転送していな いか? 9.2. 自分では見えているけど,友達には見えない,といわれる • ブラウザの「ロケーション」「場所」に URL を打ち込まず,ネットワークドライブに保 存してあるコンテンツを見ていないか? 正しく WWW サーバに転送されているか? • 写真が表示されない,といわれるときも,JPEG ファイルや GIF ファイルが WWW サー バ上に転送されているかどうかを確認すること。 9.3. エディタで修正しても,内容が反映されない • EmEditor で修正してネットワークドライブに保存後,再度 WWW サーバに転送したか? ※ 再転送の場合には,ファイルを上書きするかどうか FFFTP が聞いてくる。 どうしても分からない場合には,念のため,WWW サーバ上のファイルを削除 してから転送しなおすとよい。 • 転送する場所は間違っていないか? 9.4. 正しいところにリンクしない/リンクしたページが表示されない • <a href="…"> タグの書き方に間違いはないか。a と href の間に半角スペースが入って いるか?全角のスペースがどこかにはいっていないか。 • リンク先の URL は正しいか?確かに存在しているか? • リンクするファイル名を正しく半角小文字で表記しているか?拡張子は正しいか?ファ イル名の大文字小文字は違っていないか?ファイル名にスペースが使われていないか? (最後の 2 つの項目のトラブルは,Windows で表示させた際には気づかず,実際にコンテ ンツを WWW サーバで公開した場合に初めてトラブルが発生する。) ウェブページの作成 (3) 4