 |
Web技術実習 |
| 戻る〔１１．知的財産権〕 次へ〔１３．Webページのチェック〕 目次 |
|
Web技術実習 |
| 戻る〔１１．知的財産権〕 次へ〔１３．Webページのチェック〕 目次 |
Webページに表示する基本的な構成要素の一つである画像について、配置方法などを学習し、画像を自由に扱えるようにする。
12-1 画像の保存形式
画像データはいろいろな形式（フォーマット）に変換され、ファイルとしてディスクに保存する。代表的な画像データの形式は次の通りである。
Webページで扱える画像データはGIF, JPEG, PNGである。
形式 拡張子 用 途 BMP .bmp Windowsが標準でサポートしている画像形式である。基本的に無圧縮で保存する。 GIF .gif イラストなどの色数の少ない画像の保存に適している。
256色までの画像を圧縮して保存する。JPEG .jpg
.jpeg写真などの色数の多い画像の保存に適している。
圧縮して保存するとき、画質を多少劣化させ、ファイルサイズを小さくする。PNG .png GIF, JPEGに代わってWWW用に開発された。
写真など色数の多い画像も画質の劣化なしで圧縮できる。
BMP(Bit MaP), GIF(Graphic Interchange Format), JEPG(Joint Photographic Experts Group), PNG(Portable Network Graphics)
12-2 画像の保存場所
Webページでは画像ファイルを別に用意し、<IMG>タグで画像ファイルの保存場所を指示をする。
<IMG src="fig/image01.png">
属性srcで画像ファイルの場所（figフォルダの中にあるimage01.png）を指定している。
作成した画像ファイルはHTMLファイルとは別のフォルダに保存しておくことが一般的である。これは、ファイルを管理（整理）する上で便利なためである。例えば、HTMLファイルをフォルダwebpageに保存したとすると、このフォルダのHTMLファイルで使用する画像データは、このフォルダ内のfigフォルダに保存しておく、といった具合である（次図）。
実習９ 画像を配置する。
HPBに用意されている素材集（画像データ）から画像をWebページに配置する。
HPBは「Web」のサイトを開いておくこと。
ファイル名は「gazou-ren1.htm」とする。ページのタイトルは「画像配置の練習1」とする。
・素材集から画像を配置
操作１ メニューバーから次のように選択する。素材集から開くのダイアログが表示される。
［挿入(I)］ → ［画像ファイル(I)］ → ［素材集から(G)...］
操作２ ダイアログの左側のリストから「写真」をクリックし、右側の画像一覧から適当なものを選択して、［開く(O)］ボタンをクリックする。カーソル位置に選択した画像が配置される。
※ 配置した画像は、マウスでドラッグすることで移動することができる。
・素材集から画像を配置 もう一つの方法
操作３ サイトビューの上にある［素材］タブをクリックする。リストから「写真」をクリックして、適当な画像をダブルクリックする。カーソル位置に選択した画像が配置される。
操作４ ファイル名を入力して保存する。そのとき、素材ファイルをコピーして保存のダイアログが表示される。ここで［保存］ボタンをクリックすると別のフォルダにある画像ファイルが、「Web」のサイトで用意したfigフォルダにコピーされる。
Webブラウザで、ファイルgazou-ren1.htmを閲覧して確認する。
・自分で用意した画像を配置
操作５ ペイントブラシを起動する。適当な画像を作成し、ファイル名「gazou-ren1.bmp」として保存する。 （保存場所は「マイドキュメント」とする。）
画像のサイズは、縦（高さ）100ピクセル×横（幅）100ピクセル程度とする。
操作６ メニューバーから次のように選択する。開くのダイアログが表示される。
［挿入(I)］ → ［画像ファイル(I)］ → ［ファイルから(F)...］
操作７ ペイントブラシで作成した画像ファイル「gazou-ren1.bmp」を選択して、［開く(O)］ボタンをクリックする。カーソル位置に選択した画像が配置される。
操作８ 上書き保存する。"操作４"のときのように、素材ファイルをコピーして保存のダイアログが表示されるので、同じように操作する。
Webブラウザで、ファイルgazou-ren1.htmを閲覧して確認する。
・画像の大きさを調整して配置する
操作９ メニューバーから次のように選択する。写真挿入のウィザードが表示される。
［挿入(I)］ → ［デジカメ写真(R)...］ → ［簡単挿入(D)...］
素材集から配置した画像は480×320ピクセルの大きさである。デジタルカメラから取り込んだ画像はさらに大きい場合が多い。
操作１０ ［素材集から(G)...］ボタンをクリックすると素材集から開くのダイアログが表示される。
操作１１ 適当な画像を選択して［開く(O)］ボタンをクリックするとウィザードに戻るので、［次へ(N)］ボタンをクリックする。
操作１２ 画像のサイズを調整するウィザードが開く。ここでは、左側の項目から「小（横幅160ピクセル）(S)」をチェックして、［次へ(N)］ボタンをクリックする。
操作１３ 画質を補正するウィザードが開く。明るさと輪郭を補正できるが、ここでは何もしないで［次へ(N)］ボタンをクリックし、飾り付けのウィザードで［完了］ボタンをクリックする。
操作１４ 上書き保存する。"操作４"のときのように、素材ファイルをコピーして保存のダイアログが表示されるので、同じように操作する。
Webブラウザで、ファイルgazou-ren1.htmを閲覧して確認する。
※ 画像配置の練習課題であるから、リンクの設定はしない。
※ 画像に対して中央揃えや右寄せなどを設定してみよ。
実習１０ 画像と文字のWebページをHPBで作成する。
HPBに用意されている素材集（画像データ）から画像をWebページに配置する。
HPBは「Web」のサイトを開いておくこと。
ファイル名は「gazou1.htm」とする。ページのタイトルは「画像と文字のサンプル」とする。
操作１ 「画像と文字のサンプル」と入力し、<H1>タグで見出し文字とする。
カーソルは次の行に移動しておく。
操作２ 適当な画像を配置する。
配置した画像を右クリックして表示されるメニューから［属性の変更(A)...］を選択すると、属性のダイアログが表示される。
この課題のすべての画像は、サイズの［幅(W)］は200ピクセル以下、［高さ(G)］は150ピクセル以下に設定する。 →※２
操作３ 属性のダイアログで、［位置揃え(I)］を上揃え に設定する。 →上図 設定１
操作４ 画像の右横に「上揃え align="top"」と入力する。行末で[Shift]＋[Enter]を押す。
操作５ 適当な画像を配置する。属性のダイアログで、［位置揃え(I)］を中央揃え に設定する。
画像の右横に「中央揃え align="middle"」と入力して、行末で[Shift]＋[Enter]を押す。
操作６ 適当な画像を配置する。属性のダイアログで、［位置揃え(I)］を下揃え に設定する。
画像の右横に「下揃え（自動） align="bottom"」と入力して、行末で[Shift]＋[Enter]を押す。
← 操作３，４の例
← 操作５の例
← 操作６の例
操作７ ファイル名を入力して保存する。Webブラウザで、ファイルgazou1.htmを閲覧して確認する。
操作８ 適当な画像を配置する。属性のダイアログで、［位置揃え(I)］を左寄せ に設定する。画像の右横に、次のように入力する。3行目の行末で、[Ctrl]＋[Enter]を押して、「左寄せと右寄せの両方が終了する位置まで改行(B)」を選択して［ＯＫ］をクリックする。
操作９ 適当な画像を配置する。属性のダイアログで、［位置揃え(I)］を左寄せ に設定する。また、余白の［左右(I)］に10と設定する。画像の右横に、次のように入力する。
←3行目の行末で
[Ctrl]＋[Enter]を押す。
上図：操作８、 下図：操作９
属性のダイアログの［回り込み］の右側にある［左寄せ］、［右寄せ］のチェックボックスにチェックを入れても同じ働きをする。
操作１０ 上書き保存し、Webブラウザの更新ボタンをクリックして確認する。
・代替えテキストの設定
操作１１ 4枚の画像に代替えテキストを設定する。
属性のダイアログで、ファイル名の下にある［代替テキスト(A)］に文字を入力すると、画像の上にマウスポインタが来たとき、設定した文字が表示される。
属性 alt = "ボタンの花"
操作１２ 上書き保存し、Webブラウザの更新ボタンをクリックして確認する。
できる限り、代替えテキストを設定する。
Webページは、健常者だけではなく、視覚や色覚に障害のある方も閲覧する。視覚に障害のある方は「読み上げソフト」によって耳から内容を知る。画像は読み上げることができないので、この代替えテキストが読み上げられる。画像の説明をわかりやすく設定する。
（参考）高齢者・障害者等配慮設計指針JIS X 8341-3
操作１３ サイト「Web」のWebページとして、リンクを設定する
文字のサンプルページと同じように、トップページと相互のリンクを設定する。
リンクポイントの文字は次の通りとする。
- index.htm （トップページ）
- ① 「フォント装飾のサンプル2」の次の行に「画像と文字のサンプル」と文字を入力する。
② 文字「画像と文字のサンプル」をドラッグして選択して「gazou1.htm」にリンクを設定し、上書き保存する。- gazou1.htm
- ① 見出しの次に段落を挿入し、「トップページへ戻る」と文字を入力する。
② 文字「トップページへ戻る」をドラッグで範囲指定して「index.htm」にリンクを設定し、上書き保存する。
操作１４ Webブラウザの更新ボタンをクリックして再表示させ、リンクの確認をする。
10-3 Webページの容量
画像などの複数のデータをWebページに配置すると、Webページ全体の容量にも気をつけたい。
HPBでは、メニューバーから次のように選択すると、現在編集中のページ全体の容量が表示される。
［表示(V)］ → ［ページの容量(O)...］
★ 画像サイズ（属性width, Height）はできるだけ指定する。
WebブラウザはHTMLソースを先頭から順に読み込んで表示していく。このとき、文字データはタグの指示で編集されて、表示される。画像は別のファイルとして用意されているので、HTMLソースを読み込んだだけでは表示できない。このとき、ブラウザは画像の表示場所だけ用意し、残りの文字データを表示する。画像の表示場所を用意するとき、画像のサイズが指定されていなければ最小のサイズで用意され、画像データが読み込まれたときに画像サイズの大きさになる。 一つのWebページに多くの画像がある場合、まれに正しいサイズにならないで画像が重なったり、一部が表示されなかったりすることがある。
IMGタグでサイズを指定しておけば、画像の表示場所を用意するときに指定されたサイズで用意されるので、このような現象を防ぐことができる。
・良くない例 ・画像サイズを設定した例 （ブラウザの［戻る］ボタンで戻ること。）
| 戻る〔１１．知的財産権〕 次へ〔１３．Webページのチェック〕 目次 | |
|
| Web技術実習 | Copyright © 2006,2007 Hiroshi Masuda | |
