...

ウェブページの作成 (3) 8. 画像の作成 (2) 図やロゴを作成

by user

on
Category: Documents
16

views

Report

Comments

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
Fly UP