HTML基礎講座第5回、HTML基礎講座初級編(5)です。
ここまで４回終わりました、タグ打ちには馴れましたか？
今回、タグより、特殊なレイヤー機能を使用します。
この講座では、ホームページを作る事が目的であり、HTMLは、必要な物に絞っております。
講座内に、HTML一覧基礎編を用意しました。
教材をご希望の方は、圧縮ファイルを用意しました。
教材DownLoad ここに、教材を置いてありますから、ダウンロードして下さい。
HTML基礎講座．第５回
HTML基礎講座．第5回、基礎講座初級編、最終回になります
テキストは、前回の物を読み出してください。
編集は、<body>の部分です。
これまでと違い、ここからは、上のほうだけで、作業する事になります。
8行目、<BODY background="tail_a1.jpg" style="text-align:left;">
ここにバックグラウンド、背景を設定する部分があるんです。
ここも、書式として、覚えてしまう（記録して置く）のが、良いでしょう。
ファイル名を書き換えるだけですから。
今度は、TITLEバック、ここが、今回の最大の難関なんです。
12行目、<DIV style="width: 1000px; height: 100%; top: 4px; left: 4px;
13行目、 z-indez: 0; position: absolute">
2行は、続きなので、ここに「z-index ： 0」を書き加えてあります。
これは、表示順を指示するもにですが、今回のように、上から順になっていれば無くても表示できますが、
はっきり、指示しておいた方が良いでしょう。
9行目、<div style="width: 1000px; height: 500px; top: 4px; left: 4px;
10行目、 z-index: -1; position: absolute;">
11行目、 <img border="0" src="haikei_ti.png" width="1000"
height="300"></div>
3行でセットなので、TITLEバックの画像を、背面に表示する為にレイヤーを追加しています。
10行目に「z-index ： -1」と有るように、表示順が先なんです。
このレイヤーを表示してから、本体のレイヤーを同じ位置に重ねて表示するというわけ。
「position: absolute」は、絶対位置指定、2枚のレイヤー共に、画面の左上隅を基点に表示されます。
この場合では、基点からの離れ具合の設定は、「top: 4px; left: 4px;」と同じ設定をしています。
もう1つの変更点、もうお気づきと思いますが、「width: 1000px;」とどちらもピクセル固定にして有ります。
画像は、画面の伸縮に合わせて伸縮しないので、TITLEバックを指定するときは、横幅固定になります。
この部分、かなりわかりにくい部分ですが、何とか記憶の片隅に詰め込んでください。
あとは、好みによる、修正点を残すのみですね。
9行目、<div style="width: 1000px; height: 500px; top: 0px; left: 0px;
12行目、<DIV style="width: 1000px; height: 100%; top: 0px; left: 0px;
top：0px、left：0pxに打ち直しました、全体が、左上に隙間無く付きますね。
14行目、<TABLE border="1" bordercolor="#dddddd" width="100%"
height="100%" cellpadding="0">
18行目、<TABLE border="0" bordercolor="#00ff00" width="100%"
height="100%" cellpadding="0">
いずれの行も、「cellpadding="0"」を最後に追加しあります。
これにより、入子の表が隙間無く付きます。
以上で、HTML基礎講座初級編は終了です。
画像挿入の方法などは、Homepage初級者講座を参照してください。
バナー画像、タイトル画像、背景画像、タイトルバック画像など、作成方法を知りたい方は、OnLineSooftコーナーを参照してください。
教材ファイルは、当分の間は、何時でも見られる様に、しておきます。
「旅の思い出写真集」のタイトルが付いてますが、教材です。このページの中に、リンクがあります。
ダウンロードし易いように、Zip圧縮ファイルを用意しました。必要に応じてご利用下さい。
HTML基礎講座、中級編でも、この現在ファイルを引き続き使用する予定です。
HTML基礎講座第5回終了です。
|