４．画像を使おう

• 今度は、自己紹介のページを作ります。画像を使ったアピール度のあるページにしましょう。

（クリックすれば、サンプルページを表示します。）

（１）画像の挿入

• [新規作成]を押して、新規ページを作成します。
  
  
• まず、自己紹介の見出し文と区切りの水平線を入力して下さい。

• 画像の挿入をする前に、一度ファイルを保存します。ファイル名は「profile.html」にします。　これは、ページのファイルと画像ファイルの位置関係を明確にしておくために必要なことですので、必ず実行して下さい。

• [画像の挿入]を押します。

• 「ファイルから」の右にある[参照]ボタンを押します。

• 3.5FDの、「river.jpg」を選択して、[開く]を押します。

• 画像が挿入されます。

　

（２）画像プロパティの設定

• ブラウザが画面に素早くレイアウトできるよう画像サイズなどの指定をしておきましょう。

• 画像の上でマウスを右クリックして、「画像のプロパティ」を選択します。

（代替テキスト）

• 「代替表示」の「テキスト」の欄に、文字列を入力して下さい。これは、画像が表示されないときに、画像の替わりに表示する文字列です。

（注意） 　「画像のソース」が上記のようにファイル名のみになっていることを確認して下さい。 　もし、「file:///a:/river.jpg」のようになっている場合は、自分のパソコン上に画像ファイルがあることを意味するので、インターネットを通じて他の人が見ることは出来ません。 　その場合は、挿入した画像を一度削除し、上記手順のとおり再度挿入して下さい。

（画像サイズ）

• [外観]のタブをクリックし、「サイズ」の「サイズの指定」をチェックして下さい。「幅」と「高さ」は、画像ファイルの実際の数値がピクセル数で表示されていますので、そのままにしておきます。

• [ＯＫ]すると、設定終わりです。画面上では、変化ないようですが、ブラウザで表示すると、レイアウト表示が早くなっているのが分かります。

　

（３）文字の回り込み

• 自己紹介の文章を、画像に続いて入力してみて下さい。
  

• 変ですね。画像のすぐ横の部分が大きく空いてしまいました。これは、文字の回り込みの設定をしていないからです。
  
  

（文字の回り込み設定）

• 「画像のプロパティ」を選択します。

• [外観]の「レイアウト」にある「配置」を「左」に変更して下さい。
  画像を画面の右端に持っていきたいときは、「右」を選択します。
  
  また、「横の間隔」に適当なピクセル数を設定すると、画像の左右にその分だけ余白が出来て、見やすくなります。

• 設定後

• なお、画面上に表示されているのマークは、画像と文字の部分の境目を表しています。

（文字の回り込み中止）

• 次に、画像の下に水平線を挿入したいのですが、このままでは先ほどの文章の続きに挿入されてしまいます。

• そこで、文章の最後に文字の回り込みを中止させるための改行を挿入する必要があります。

• まず、[shift]+[Enter]キーを押して改行を挿入します。

• 次に、改行マークを選択して右クリック、「改行のプロパティ」を選びます。「余白無し」を選択して、[OK]して下さい。

　

（４）背景色の設定

• 画像の下に水平線等を挿入し、さらに画像と自己紹介文の部分にインデントを設定して見やすくします。

• さて、FrontPageExpressでは、ページのプロパティは、「背景色：白、文字の色：黒」を標準にしています。せっかく、写真の画像を使ってカラフルになりましたので、ページの背景色を設定してみましょう。
  
  
• ページの適当な場所で右クリックし、「ページのプロパティ」を選択します。
• [背景]の「背景」で選択ボタンを押し、「ユーザ設定」をクリックします。

• Windowsの「色の設定」で、適当な色を選び、[OK]を押します。色の選び方は、下記のように３通りありますので、お好みの方法で行って下さい。できるだけ薄めの色を選ぶことをお薦めします。

（参考）色の選択方法 １．基本色から選ぶ（クリック） ２．色パレットから選び（クリック）、明るさを調整（ドラッグ） ３．色を表す数値で指定（色合い等または三原色）

• 設定後

　

• これで、自己紹介のページが完成です。

• [上書き保存]を押して、ファイルに保存して下さい。