Gimp の使い方 マニュアル
|
|
３.3 貼り付け
ここでは、ホームページビルダーを使ってウェブページを作ります。ページとソースの両方が見れる方が作業しやすいと思います。
画像を分割したとき③④では幅が390と389、⑤⑥では幅が180と599と同じ２列でも幅が違います。このため、一つの表では収まりません。
そこで、①から④までを一つの表に、⑤から⑧までをもう一つの表に張り込んで連結します。
まず、新しいページを作り、表を作ります。①から④までを入れる表は、３行２列です。
ホームページビルダーのタスクバーの「表」→「表の挿入」と進み、３行２列の表を作ります。チェックは全部はずして下さい。
できた表の縁のあたりを右クリックすると、表の周りが赤く囲まれメニューが出ます。そこで「属性の変更」をクリックします。
表の幅を779、「枠表示」のチェックをはずし、背景を「白」にします。
次にこのパネルの上の方にある「表の列」のタブをクリックし、
第１列の幅を390、第２列の幅を389に設定します。「OK」をクリックして表ができます。
１行目には①、２行目には②が入ります。そこで、左右２つのセルを連結します。
左のセルにマウスを持っていき左ボタンを押し、押したままで右のセルに移動すると、２つのセルが選択され黒くなります。
そこで右クリックしメニューの「選択セルの結合」をクリックすると、一つのセルになります。２行目も同じように結合します。
第１行にマウスを移動し、メニューから「挿入」→「画像ファイル」→「ファイルから」を選択し①の画像（ここでは1001.ｊｐｇでした）を探してクリックすると、貼り付けられます。
第２行に②を貼り付けるのですが、この画像の上に文字を載せるので、②は画像を貼り付けるのではなく背景に設定します。
第２行目にマウスを持っていき、右クリックし「スタイルの設定」をクリックします。パネルで「編集(4)」→「色と背景」→「参照(B)」をクリックすると、画像を選べますから②の画像（ここでは1002.ｊｐｇ）を選択します。
「参照(B)」の左の窓にファイル名が入れば成功です。後は「OK」をクリックして確定します。
③と④は画像の上にテキストを書かないので、①と同じように画像を挿入します。
プレビュー画面で見てみると
②の画像は背景にしたので、テキストを入れないとつぶれています。②は画像の高さ20に固定して使いますから、セルの高さを20に設定しておきます。
ソースコードを見てください。２行目の<TD colspan="2" ……>の最後に □height="20"を書き足します。□は半角スペースです。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<META name="GENERATOR" content="IBM WebSphere Studio Homepage Builder Version 9.0.3.0 for Windows">
<META http-equiv="Content-Style-Type" content="text/css">
<TITLE></TITLE>
<LINK rel="stylesheet" href="table.css" type="text/css" id="_HPB_TABLE_CSS_ID_">
</HEAD>
<BODY>
<TABLE width="779" bgcolor="#ffffff">
<COL span="1" width="390">
<COL span="1" width="389">
<TBODY>
ここが１行目
<TR>
<TD colspan="2"><IMG src="file:///C:/MySite/material/header/gimp/image/1001.jpg" width="799" height="70" border="0"></TD>
</TR>
ここが２行目
<TR>
<TD colspan="2" style="background-image : url(file:///C:/MySite/material/header/gimp/image/1002.jpg);"□height="20"></TD>
</TR>
ここが３行目
<TR>
<TD><IMG src="file:///C:/MySite/material/header/gimp/image/1003.jpg" width="390" height="230" border="0"></TD>
<TD><IMG src="file:///C:/MySite/material/header/gimp/image/1004.jpg" width="389" height="230" border="0"></TD>
</TR>
</TBODY>
</TABLE>
</BODY>
</HTML> |
次に、セルとセルの間にあるスキマをなくします。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<META name="GENERATOR" content="IBM WebSphere Studio Homepage Builder Version 9.0.3.0 for Windows">
<META http-equiv="Content-Style-Type" content="text/css">
<TITLE></TITLE>
<LINK rel="stylesheet" href="table.css" type="text/css" id="_HPB_TABLE_CSS_ID_">
</HEAD>
<BODY>
<TABLE width="779" bgcolor="#ffffff"□cellspacing=0□cellpadding=0>
<COL span="1" width="390">
<COL span="1" width="389">
<TBODY>
ここが１行目
<TR>
<TD colspan="2"><IMG src="file:///C:/MySite/material/header/gimp/image/1001.jpg" width="799" height="70" border="0"></TD>
</TR>
ここが２行目
<TR>
<TD colspan="2" style="background-image : url(file:///C:/MySite/material/header/gimp/image/1002.jpg);"
height="20"></TD>
</TR>
ここが３行目
<TR>
<TD><IMG src="file:///C:/MySite/material/header/gimp/image/1003.jpg" width="390" height="230" border="0"></TD>
<TD><IMG src="file:///C:/MySite/material/header/gimp/image/1004.jpg" width="389" height="230" border="0"></TD>
</TR>
</TBODY>
</TABLE>
</BODY>
</HTML> |
<TABLE width="779" bgcolor="#ffffff">に □cellspacing=0□cellpadding=0 を書き入れます。□は半角スペースです。
これで②が現れ、スキマがなくなりました。
続けて、新たに表を作り⑤から⑧までを貼り付けます。
今度作る表も、３行２列です。最初の表のすぐ下に表を作ります。今度の表は、第１列は幅180、第２列は幅599です。
さっきと同じように、cellspacing=0 cellpadding=0 を書き足して下さい。また、第２行と第３行はセルを結合して下さい。
⑤⑥⑧はテキストを追加するので背景に、⑦は画像として挿入します。テキストを書き込む前なので⑤⑥⑧はつぶれています。
|
  
「再販権（リセールライト）つきホームページ作成素材」Topへ戻る
「簡単にプロ並みのヘッダー画像を作れる」Topへ戻る
「３５６ ウェブ・テンプレート」Topへ戻る
|