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

 8.画像の表示 U - 2

 アルバム

 次に、アルバム風に画像を貼り付ける。画像が多いときなど便利である。
 先の hpage3.html に追加する。
 ここで使用する画像は適宜用意する。画像ファイルはc:\sample2フォルダ内にfig-samplフォルダを作りその中に保存する。 (サンプルはこちら fig-sampl.lzh 700KB

 カーソルを一番下まで移動して、メニューから次のように選択する。
    [挿入(I)] → [デジカメ写真] → [アルバム(A)...]

@ 画像と説明文のレイアウトを選択する。 ここでは図のように選択する。

 
A 画像を保存しているフォルダを選択する。左側に画像が表示されるので、クリックして選択する。
 1つ、または複数選択した後、[追加(A)]をクリックすると右側(選択済み写真)に追加表示される。
 [前へ(U)]、[後へ(L)]のボタンで写真の順番を入れ替える。[回転(R)]もできる。
 
B 画像の大きさを設定する。アルバムとして表示するので、あまり小さいと見にくくなる。

 画像の大きさは、色々な大きさで何度か試して決定する。ここでは、長い辺を256ピクセルとしている。


 このページはファイル名 hpage3.html として保存する。
 サンプルの画像は別のフォルダにあるが、ページを保存するときにサイトの画像を保存するフォルダにコピーされる。したがって、元の画像はそのまま残るのである。

 作成・保存後の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>
<DIV align="left">
<TABLE border="0" cellpadding="5" cellspacing="5">
  <TBODY>
    <TR>
      <TD align="right" valign="middle">
      <IMG src="fig/DSCF0333.jpg" width="256" height="192" border="0"></TD>
      <TD align="left" valign="middle">ここをマウスでダブルクリックして、文章を入力してください。</TD>
    </TR>
    <TR>
      <TD align="right" valign="middle">
      <IMG src="fig/DSCF0336.jpg" width="256" height="192" border="0"></TD>
      <TD align="left" valign="middle">ここをマウスでダブルクリックして、文章を入力してください。</TD>
    </TR>
    <TR>
      <TD align="right" valign="middle">
      <IMG src="fig/DSCF0344.jpg" width="256" height="192" border="0"></TD>
      <TD align="left" valign="middle">ここをマウスでダブルクリックして、文章を入力してください。</TD>
    </TR>
    <TR>
      <TD align="right" valign="middle">
      <IMG src="fig/DSCF0354.jpg" width="256" height="192" border="0"></TD>
      <TD align="left" valign="middle">ここをマウスでダブルクリックして、文章を入力してください。</TD>
    </TR>
    <TR>
      <TD align="right" valign="middle">
      <IMG src="fig/DSCF0360.jpg" width="256" height="192" border="0"></TD>
      <TD align="left" valign="middle">ここをマウスでダブルクリックして、文章を入力してください。</TD>
    </TR>
  </TBODY>
</TABLE>
</DIV>
</BODY>
</HTML>


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

 

 

inserted by FC2 system