８．一歩進んだホームページ

８．１ リンクで内容のあるホームページ作り
　８．１．１ 別のウインドに表示する
　８．１．２ 釦からのリンク
 ８．２ ブロックにまとめて配置を考える
　８．２．１ 色を付けて目立たせる
　８．２．２ 表・画像・文字の配置を考える
 ８．３ フレームでクリックの手間を減らす
８．４ ちょっとした工夫で見栄えを良くする
　８．４．１ ドロップダウンメニュー
　８．４．２ クリッカブルマップ
　８．４．３ 別画面にメニューを表示する
　

８．１ リンクで内容のあるホームページ作り

　ホームページの特長は、リンクをクリックすることによって新しい情報にアクセスできることです。ホームページはリンクで成り立っていると言っても過言ではありません。リンクを使いこなして、内容のあるホームページを作りましょう。

８．１．１ 別のウインドに表示する

　補足説明を、本文にそのまま記載すると、説明を見なくても解る人には煩わしいものです。そのような時に、説明を別のファイルに記述しリンクすると、すっきりしたページになります。
　しかし、説明を見る度に画面が切替わってしまうのも、流れが途切れて理解し難くなりますね。そんな時、説明だけ別のウィンドに表示すると流れが中断せず、理解し易いページ作りができます。

　それには、次の３つの方法があります。

  1. 標準サイズのブラウザで表示する。
  2. サイズやスタイルを指定して表示する。(JavaScriptを使う）
  3. 同上（リンクが多い場合に推奨）

i.標準サイズのブラウザで表示する

リンクタグに次の属性を指定します。

　<A HREF="リンク先URL" TARGET="ウインド名">〜</A>

　ウインド名は新しく開くウインドの名前なので、なんでもよい(wind01等)のですが、既にその名前のウインドが開いている場合はそちらに表示されるので、後ろに隠れている場合があります。(同時に複数のホームページを見ていて、他のホームページで同じ名前を使っている場合に起きる可能性があります。一般的な名前は使わない方がいいかもしれません。）
　TARGET="_blank"とすると"常に"名前の無い新しいウインドが開きます。

ii.サイズやスタイルを指定して表示する

　JavaScriptを使うと、新しく開くウィンドのスタイルを指定することができます。ただしJavaScriptに対応していないブラウザでは見ることができないので注意しましょう。

　ＨＴＭＬは次のように記述します。


<HEAD><TITLE>‥‥‥</TITLE>
<SCRIPT TYPE="text/javascript">
<!--
function newwin() {
window.open("リンク先URL","ウインド名","スタイル指定")
}
//-->
</SCRIPT>
</HEAD>
<BODY>
‥‥‥
<A HREF="JavaScript:newwin()">リンク先へ</A>
</BODY>
</HTML>

　スタイルを指定しなければ標準サイズのブラウザが開きます。スタイル指定の詳細はここをクリック。

<解説>

<HEAD>〜</HEAD>部分で関数newwin()を定義し、本文のリンクしたいところでその関数を実行するようにしています。（関数名newwinは好きな名前を付けます）
リンクのためにクリックするところは A タグで作成すれば通常の文字で表現できます。また画像を貼り付けてもいいですね。

クリック部を釦にしたい場合は、<FORM>タグを使います。ＨＴＭＬは次のとおりです。

<FORM>
<INPUT TYPE="button" VALUE="リンク先へ" onClick="newwin()">
</FORM>

iii.サイズやスタイルを指定して表示する（リンクが多い場合に推奨）

<HEAD>〜</HEAD>間に次のように記述します。
<SCRIPT TYPE="text/javascript">
<!--
var optionString = "スタイル指定";
//-->
</SCRIPT>

リンク箇所に次のように記述します。
<A HREF="javascript:void(0);" onClick="window.open('リンク先ＵＲＬ','ウインド名',optionString)">リンク先へ</A>

とっておきのテクニック！

指定したウインド名のウインドが既に開いている場合には、後ろに隠れて見えません。また、既に開いていなくても伝送路の混雑によりすぐに表示されなくてマウスを操作してしまうと、タイミングによっては新しく開いたウインドがアクティブにならず隠れている場合があります。そのような現象を避ける方法として、"リンク先URL"に次の記述を追加します。

<HEAD>………
<SCRIPT TYPE="text/javascript">
<!--
window.focus();
//-->
</SCRIPT>
</HEAD>

ページのトップへ

８．１．２ 釦からのリンク

　ページデザイン上、釦を使うとつい押したくなりなすね。そこで、是非見てもらいたいページへのリンクには釦を使うのも一案です。このホームページでも、サンプルページへのリンクには釦を使っています。

　釦は<FORM>タグで作ることができます。その釦を押した時にリンク先に飛ぶにはJavaScriptを使います。次の通りです。


<FORM>
<INPUT TYPE=button VALUE="リンク文字" onClick="JavaScript:location.href='リンク先URL'">
</FORM>

下の例は、リンク文字は「８．２へ」、リンク先URLは「#820」（このページの<A NAME="820">を示す）です。

ページのトップへ

８．２ ブロックにまとめて配置を考える

８．２．１ 色を付けて目立たせる

i.色帯の見出し

<DIV STYLE="background:色１;color:色２;width:100%;padding:n;margin-left:m;font-weight:bold">見出し</DIV>

この様に記述すると、色１の帯に色２で見出し文字が表示されます。

とっておきのテクニック！
色帯の左右に文字を書くには

<TABLE WIDTH=100%><TD BGCOLOR=fuchsia>
<TABLE><TD WIDTH=90%><B>見出し</TD>
<TD ALIGN=right>2000/02/01</TD></TABLE>
</TABLE>

ii.色ブロックに文字を書く

<DIV STYLE="background:色１;color:色２;width:L;height:H;padding:n;position:relative;left:x;top:y">
文章
</DIV>

この様に記述すると、色１のブロックに色２で文字が書けます。

とっておきのテクニック！
ブロックをたくさん作り、ｘ、ｙの値を色々変えると、文章を色々配置できます。重なった時上に表示したいブロックにz-index:n（ｎは数字）を追加します。数字の大きいほど上に表示されます。
ページのトップへ

８．２．２ 表・画像・文字の配置を考える

TABLEを使って各セルに表・画像・文字を配置すると、だれが見てもほぼ意図した通りに表示されます。

i.表を複数横に並べて説明を付ける

　複数の表は、通常縦に並びます。簡単な表は横に並べて表示したいですね。そんな時は次のようにします。

　すなわち、表の中に表を入れ、外の表は罫線を表示しない（BORDER=0または記述しない）ようにします。（ここでは説明のため、外の表の罫線も表示しました。）

９月２０日あいうえおかきくけこ
９月２０日あいうえお
かきくけこ
表１．何もしない表２．<NOBR>を使う

このとき注意すべきことは、中の表は</TR>、</TD>は省略しないことです。ネットスケープではうまく表示できなくなるようです。

すなわＨＴＭＬは次のように書きます。

<TABLE>
<TR><TD><TABLE BORDER=1>表１の内容</TABLE>
　　　<TD><TABLE BORDER=1>表２の内容</TABLE>
<TR><TD>表１の説明
　　　<TD>表２の説明
</TABLE>

　（外側の表の</TR></TD>は省略しても正常に表示されます。）


ii.画像と文字を並べる

この様なアイコンを作ってみましょう。
上の様な例もTABLEの応用で可能です。

すなわち罫線を表示すれば、次の様になります。
この様なアイコンを作ってみましょう。

ページのトップへ

８．３ フレームでクリックの手間を減らす

　ホームページ作りが進んでくると、色々なページが増えてその案内のための目次のページも必要になりますね。すると見る人はあるページを見終わって別のページに行く時に目次のページに戻ってから別のページに行くことになります。

　そんな不便を解消してくれるのがフレーム機能です。フレームは画面を分割して夫々の画面に別のＨＴＭＬファイルを表示させる機能です。従って、一つの画面に目次を表示しておき、別の画面に本文を表示すれば、常に表示されている目次をクリックして本文の好きなページを表示させることができます。

　このホームページもフレーム機能を使用しているので、どんなものかは既にわかっていると思いますが、簡単なサンプルを見ながら説明しますので。右の釦をクリックして下さい。

８．４へ
　
左の目次の各欄をクリックすれば別のページが表示されます。
フレーム表示されていない場合はここをクリックして下さい。