| 前回までに作り上げた、「旅の思い出・写真集」のトップページを題材にします |
|
ソースをTeraPadで開き、80行で折り返し＆行番号を付加して有ります。 |
|
 |
|
1行目、HTMLの種類を表示、「HTML4.01 Transitional」
通常はこのままにしておきます。
2行目、HTML文書の開始
3行目、ヘッダー部分の開始
4行目、ホームページビルダーで作ってますよ。
5行目、シフトJISコードで作ります。
6行目、CSS、スタイルシートのタイプを指定してます。
7行目、タイトルですね。
8行目、ヘッダー終了
<META タグは、他にも、ページの内容を表示してみたり、
<META http-equiv="description" content="
旅行記・写真集">
キーワードを入れてみたり
<META http-equiv="keywords" content="
旅行記,写真集"> 出来る様です。
4行目は、明らかに不用、自分の名前にでも変更しようかな？ やはり、削除対象ですね。
|
| 次からが、本文開始部分とレイアウト枠の部分です。 |
|
 |
|
9行目、BODY、ここから本体の始まりですよ。
background〜 背景画像の指定
style="text-aliign : left テキスト表示を左寄せに
text="#660000" lin="#000066" vlink="#004000"
テキスト&リンク色の設定
10行目〜16行、<DIV 〜〜>〜〜</DIV> 一塊のブロックに纏める。
ビルダーでは、z-index と組み合わせて、レイアウト枠に仕立てているようです。
ちなみに、１は前面、-3は最背面、このファイルの場合ではですが。
position : absolute; は表示位置を指定
visibility : visible; は表示をします、何ですが、ここが判りにくい。
全体として、表題を前面に表示しています。
17行目〜26行目、タイトルバックの画像、小生の自作です。
z-index ： -3 最背面に表示しています。
<DIV>は、ディビジョン、divisionの略のようですね。
|
| 今度こそ、本文です。 |
|
 |
|
27行目から、3番目のレイヤー、iD="Layer3"
表示順 z-index ： -2 最背面よりも前面に表示、
表示位置は、top ： 0px ： left ： 0px 左の角に、隙間無く位置決め、
大きさは、width ： 1000px 横幅 、heidth ： 1200px 高さ
35行目、text-align ： left テキスト左寄せ
37行目、一番外側の表、<TABLE style="width:1000px;
hiegth:1200px" border="1">1000×1200、枠線表示
38行目、<TBODY>、表の本体開始
39行目、<TR>、表の中に行を作ります。
40行目、<TD width="1000" height="1200" valign="top"
align="left">、行の中に列を作ります。大きさは、1000×1200px
41行目、<DIV>、一まとめに括りますよ。
42行目、<TABLE width="100%">、幅100%の表を、入子にします。
ヘッダー部分の表になります。
43行目、<TBODY>、入子にした表の表の本体開始
44行目、<TR>、入れ子にした表に行を作ります。
45行目、<TD style="height:55px; width:200px" align="left"
valign="top">最初の列（セル)、サイズ固定？
<IMG src="logo1112111.gif" border="0" width="200"
height="55"></TD>、最初のセル内の画像、大きさを指定して表示。
46行目、<TD style="height:55px; width:800px" align="right"
valign="middle" colspan="3"> </TD>
2番目のセル、表示方法は右寄せ、colspan=3 列の結合数（３）、
これが、表組みのキモ、下の列に対しての結合数です。
 ； 表を空にしない為の空白文字 </TD>
列の終わりを表す。45,46行で、ヘッダーを構成してます。
47行目、</TR>、行の終わりを表す。
48行目、</TBODY>、表本体の終了を表す。
49行目、</TABLE>、表の終わり、42行目から始まった表を閉じます。
一つ目の入子部分が終わった・・
|
| 2番目の入子部分です |
| |
 |
|
50行目、<DIV>、また、一括りの始まり、
51行目、<TABLE width="990">、2番目の入子の表を作ります。
52行目、<TBODY>、2番目の入子の表本体開始
53行目、<TR>、2番目の入子の表、1行目開始
54行目、<TD colspan="2" valign="top">、2番目の入子の表、
1行目、最初の列（セル）
55行目、<TABLE bgcolor="#c8e8d0" border="1"
width="200">、セルの中に、更に入子の表を作る。
この部分が、左ペイン、リンク表や広告表示用の部分はここです。
bgcolor="#c8e8d0" border="1"背景色を設定し、
表の枠を表示してます。
56行目、<TBODY>、左ペインの本体開始
57行目、<TR>、最初の行、（1行目)
58行目、<TD width="200" valign="middle"
align="center"><A href="osirasex.html">
<IMG src="logo5.gif" width="119"height="46"
border="0" alt="お知らせ "></A></TD>、
1行目の最初の列、長いですね、順にいきましょう。
<TD width="200" valign="middle"
align="center">、セルの幅200px、表示位置は、縦横共に中央揃え
<A href="osirasex.html">、リンクの設定、「お知らせ」を呼び出します。
<IMG src="logo5.gif" width="119" height="46"
border="0" alt="お知らせ "></A></TD>
リンクを設定する画像「logo5.gif」の表示設定と、</A>
リンク終了、</TD>列の終了。
59行目、</TR>、1行目終了、56行目に始まった行の終了です。
60行目、<TR>、2行目開始
61行目、<TD width="200" valign="middle"
align="center"><A href="nikki.html"><
IMG src="logo41.gif" width="68"height="45"
border="0" alt="日記"></A></TD>、
また長い、分割して説明します。
<TD width="200" valign="middle"
align="center">、セルの幅200px、表示位置は、縦横共に中央揃え
<A href="nikki.html">リンクの設定、「日記」を呼び出します。
<IMG src="logo41.gif" width="68" height="45"
border="0" alt="日記"></A></TD>
リンクを設定する画像「logo41.gif」の表示設定と、</A>リンク終了、
</TD>列の終了。
62行目、</TR>、2行目終了、60行目に始まった行の終了です。
63行目、<TR>、3行目開始
64行目、<TD width="200"> </TD>、3行目は空白文字のみ、
65行目、</TR>、3行目終了、63行目に始まった行の終了です。
66行目、<TR>、4行目開始
67行目、<TD align="center" width="200"><
IMG src="A042.GIF"
width="108" height="85" border="0"> </TD>
この行は、画像表示、アニメーションGIF、「A042.GIF」を表示しています。
68行目、</TR>、4行目終了、66行目に始まった行の終了です。
|
| 左ペインの続き |
| |
 |
| |
69行目、<TR>、5行目開始
70行目、<TD> </TD>、この行は、空白文字のみ
この後繰り返しなので、少し飛ばします。
76行目、<TD align="center"><IMG src="a_ilst073.gif"
width="64" height="64" border="0"><IMG
src="a_ilst073.gif" width="64" height="64"
border="0"><BR>、長いですね、今回も分割します。
<TD align="center">、センター表示
<IMG src="a_ilst073.gif" width="64" height="64"
border="0">、アニメーションGIFの表示
<IMG src="a_ilst073.gif" width="64" height="64"
border="0">、並べてアニメーションGIFを表示して、
<BR>改行です。
77行目、<IMG src="a_ilst073.gif" width="64" height="64"
border="0"><IMG src="a_ilst073.gif" width="64"
height="64" border="0"></TD>、ここも、分割します。
<IMG src="a_ilst073.gif" width="64" height="64"
border="0">、アニメーションGIFの表示
<IMG src="a_ilst073.gif" width="64" height="64"
border="0">、並べてアニメーションGIFを表示して、
</TD>列終了です、
これで、76行と合わせて同じ画像を4つ纏めて表示できます。
78行目、</TR>、行終了
79行目、<TR>、行開始
80行目、<TD> </TD>、この行は、空白文字のみ
この後繰り返しなので、少し飛ばします。
100行目、</TBODY>、56行目始まった表本体終了。
101行目、</TABLE>、55行目始まった表の終了。
|
| 次も、左ペインの続き |
| |
 |
| |
102行目、前回の表の下に、続けて表を作成。こちらは枠表示無しなんです。
少し飛ばしますが、
118行目、ここ迄、102行の表が続きますが、表があるだけ、中身はなのも有りません。
119行目、<TD width="5"></TD>、
54行目のセルの右にセルを追加、幅5px、隙間を取っているだけの事です。
120行目、<TD align="left" valign="top"
width="790"><BR>、コンテンツ表示部分の開始です。
121行目、<BR>、ただの改行
118行までで、左ペインを終わり、119行目から、コンテンツの表示部分、
左ペインの直ぐ右に並べると、隙間が少ないのでは、5pxの隙間を空けてみました。
これで、前半終了、HTML初級講座第2回は、
この続き、少ダブらせて、119行目から、再開します。 |
