PART 6 *** HPを飾ろう！（最終章） ***

☆ 画面内の正確な位置に表示しましょう！ ☆


☆ 画像または文章を正確な位置に表示します。

正確な位置に表示するときはスタイルシートの絶対位置指定 position:absolute; を指定します。


ここではバナーを表示したいのですが、皆さんはまだバナーが無いと思いますので、 枠で囲んだバナー風の文章を表示し、クリックするとジャンプするリンクも一緒に付けます。

スタイルシート（CSS）で指定すると今までの画面の上に重ねて表示するので、 例えば画像の上にも文字が書けます。

フォルダ(HomaPage) の index.html を表示し、ここでは＜body＞タグの次の行に、 下記（ピンク色）のソースを書き入れてください。
表示する位置を絶対位置指定しているので、ソースは＜body＞〜＜/body＞内なら、 どこに書いてもいいのですが、なるべく貴方が解かりやすい場所にしましょう。


<a href="http://www14.plala.or.jp/donkey777/" target="_blank"> <P align="center" style="position:absolute;top:10;left:10;font-size:10; width:88;height:31;background-color:palegreen;border:2px outset silver; font-family:James_A;cursor:pointer;"> Donkey's HP<br>HP作成支援</P></a> （上記、styleタグの説明）
(position:absolute)=左上を原点とする絶対位置指定、(top:10;left:10)=上から10ピクセル、 左から10ピクセル、(font-size:10)=文字のサイズ、 (width:88;height:31)=枠のサイズ、(background-color:palegreen)=枠の背景色は薄緑、 (border:2px outset silver)=枠線の太さ2、枠の形outset、枠色はシルバー、 (font-family:James_A)=文字の書体、(cursor:pointer)=カーソルの形


STYLE を書き込むタグは一般に文章の場合は＜P＞または＜FONT＞、 画像は＜DIV＞または＜SPAN＞タグに書き込みます。
なお、＜P＞タグだけは終了記号＜/P＞を付けなくてもOKですが、 なるべく付けるようにしましょう。


のように画面左上にバナー風の枠が表示されクリックでDonkeyへジャンプしたらOKです。


バナーの表示方法

下記はバナーが有る方のために、表示するソースを載せておきます。 <img src="***.jpg" STYLE="position:absolute;top:10;left:10;width:88;height:31;"> "***.jpg"に貴方のバナー名とURLを書いてください。（表示位置は、top:?; left:?; で決めます）

バナーにリンクを付けるときは下記のように＜a＞〜＜/a＞の間にバナーを入れます。

<a href="あなたのHPのURL"> <img src="***.jpg" border="0" STYLE="position:absolute;top:10;left:10;width:88;height:31;"> </a> border="0"はリンクを付けたときに表示する枠線を消すタグです。



☆ 当サイト内のプログラムでHPを飾りましょう。 ☆


☆ Google検索BOXを載せる。

参考として、「JavaScript（テーブル系）」４番の「Google検索BOX」を載せてみましょう。

「Google検索BOX」のダウンロードでソースをコピーして、フォルダ(HomaPage) の index.html を表示し＜/table＞と＜/center＞の間に 、下記（ピンク色）のソースを書き込んでください。


<br> <!--Google検索ボックス--> <form method=GET action="http://www.google.co.jp/search"> <table bgcolor="#FFFFFF"><tr><td> <a href="http://www.google.co.jp/"> <img src="http://www.google.com/logos/Logo_40wht.gif" border="0" alt="Google" align="absmiddle"></a> <input type=text name=q size=31 maxlength=255 value=""> <input type=hidden name=hl value="ja"> <input type=hidden name=ie value=Shift_JIS> <input type=submit name=btnG value="Google 検索"> </td></tr></table></form>
のようにGoogle検索ボックスが表示されたらOKです。

☆ 背景色を変える。

次に、Google の背景が白いので index.html の背景色と同じ lightpink に変えましょう。

上記、ピンク色のソースの5行目＜table bgcolor="#FFFFFF"＞を ＜table bgcolor="lightpink"＞に変えてください。

のGoogleの背景色のように lightpink に変わればOKです。

このように、あなたの気に入ったプログラムを好みに改造して HomePage を飾ってください。



これでHP作成（サンプル１）は終了です！次章ではアップロードについて解説いたします。