ホームページの作成（ホームページビルダー6）
前へ　目次へ　次へ

　８．画像の表示 Ⅱ

　ここからはホームページビルダーの便利な機能を利用してみる。
　基本的な画像の表示はすでに説明したが、ほかにも便利な機能が用意されているので使ってみよう（左図、デジカメ写真）。
 
・簡単挿入(D)...
・アルバム(A)...
・スライドショー(S)...
・サムネイル(H)...
 

　簡単挿入

　新しくページを用意して画像を表示（貼り付け）してみる。
　　　　［ファイル(F)］　→　［新規作成(N)］　→　［標準モードで新規作成(B)］

　このページは後でファイル名 hpage3.html として保存する。

　左図のような画像を表示してみる。ここで用意するのは画像だけである。枠の画像はサンプルを利用している。実際にはこの画像（ハスの花）もサンプルを利用しているが、基本的な操作方法は同じである。

　画像を挿入したい位置にカーソルを移動して、メニューから次のように選択する。
　　　　［挿入(I)］　→　［デジカメ写真］　→　［簡単挿入(D)...］

①　画像を指定する。ここでは［素材集から(G)...］をクリックする。
②　素材のダイアログから画像を選択して［開く(O)］をクリックする。
③　［次へ(N)>］をクリックする。

 
　自分で用意した画像がある場合は①で［ファイルから(F)...］をクリックする。ここで画像を回転させることもできる。選択した画像や回転した画像などはプレビューに表示される（左図）。
 
　画像はJPEGだけでなく、GIFやPNGも選択できる。
 
 
④　画像サイズを調整する。　ここでは、［中(横幅320ピクセル)(M)］を選択する。
　ホームページ用にはデータサイズが小さい方がよい。
⑤　画像の補正をする。　ここでは、チェックなしで次に進む。

 
⑥　飾り付け、すなわち画像に付ける枠を選択し、［完了］をクリックする。

　枠付きの画像は新しいファイル名で作成されるので、元の画像はそのまま残る。
　画像編集用のソフトウェアを使わなくても、サイズの変更や合成ができて便利である。

　このページはファイル名 hpage3.html として保存する。
　　　［ファイル(F)］　→　［名前を付けて保存(A)...］
　保存のメニューを選択すると、現在のサイト(sample2フォルダ)に保存される。
　サンプルの画像は別のフォルダにあるが、ページを保存するときにサイトの画像を保存するフォルダにコピーされる。したがって、元の画像はそのまま残るのである。

　作成・保存後のHTMLソースは次のようになる。（画像のファイル名、改行位置などは違う場合がある。）

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML>
<HEAD>
<META name="GENERATOR" content="IBM WebSphere Homepage Builder Version 6.0.2.1 for Windows">
<META http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<META http-equiv="Content-Style-Type" content="text/css">
<TITLE></TITLE>
</HEAD>
<BODY>
<P><IMG src="fig/flr0012.jpg" width="320" height="213" border="0"></P>
</BODY>
</HTML>


前へ　目次へ　次へ
 ホームページの作成（ホームページビルダー6） Copyright © 2002 Hiroshi Masuda

 

 

inserted by FC2 system