【5】画像の挿入

○基礎知識

1.インターネット上で利用される主な画像フォーマットには、『JPEG』や
  『GIF』があります。    
                            ***P96参照***

2.『JPEG』は、写真の画像で利用され、拡張子は、.jpg です。

3.『GIF』は、ロゴやアイコン、バナー等で使用し、拡張子は、.gif です。

4.画像ファイルは、「hp」フォルダの中に入れて使用します。


○画像ファイル処理

1.『写真』を縮小し、「hp」フォルダの中に入れます。

 ☆すでに適当な写真画像ファイルがありましたら、それを直接「hp」フォルダの中
  にコピーしてもOKです。
  ここでは、サンプル画像を縮小して、入れてみます。

 a.『ペイント』を起動させ、ファイルを開き、『マイピクチャー』から適当な画像
   を選択します。

 ☆ペイントは、[すべてのプログラム]の中の[アクセサリ]の中にあります。

 b.[変形][伸縮と傾き]を選択し、写真を縮小します。(今回は水平方向を30%
   垂直方向を20%に縮小します。)

 ☆縮小した方が「容量」が少なくて済みます。
 
 c.[名前を付けて保存]を選択し、保存場所を「hp」フォルダとし、ファイル名
   を hp1.jpg として、[保存]をクリックします。


2.フリーの『画像素材』をWebサイトから持ち帰ります。

 a.『Queen's FREE World』のHPを開きます。

 b.「Web Graphics」の[ENTER]をクリックします。

 c.画面左側のメニューの[PLATE]を選択し、PLATE文字付の [NEW/工事中/文字]
   を選択します。

 d.★アニメ★の下の、[Newその1]を選択します。

 e.出てきた画像を、右クリックし、[名前を付けて画像を保存する]を選択し、保
   存場所を「hp」フォルダ、ファイル名を hp2.gif として、[保存] をクリック
   します。



○HTML入力

1.「生活者主権の会」と水平線の間に写真を入れます。

 a.「index.html文書」を表示させます。

 b.「生活者主権の会」と「水平線」の間に、<img src="hp1.jpg"> と入力して、
   「写真」を表示させます。

 ☆『属性』の width を使って「幅」、height を使って「高さ」を指定すると、ファ
  イルの写真の大きさを変更することができます。

 c.上書き保存し、HPに画面を切り替え、更新すると、「生活者主権の会」の下に
  「写真」が表示されます。


2.持ち帰った画像素材を写真の横に入れます。

 a.1に続けて、<img src="hp2.gif"> と入力すると、写真の右側に『NEW』が
   入ります。

 ☆センターリングのバランスを取るために、<img src="hp1.jpg"> の前に、全角の
  スペースを3つ入力して下さい。

 b.上書き保存し、HPに画面を切り替え、更新し、確認して下さい。


 《委員会HP・第2回学習会−その5の完成HPの画面と同じになればOKです。》
  
       ↓

◎これで第5回目は終了です。

                           第2回学習会【その6】へ

                           第2回学習会 目次へ








100MB無料ホームページ可愛いサーバロリポップClick Here!