１日目の売れる（反応のある）HPの作り方の講義内容のページへのリンク   ２日目の売れる（反応のある）HPの作り方の講義内容のページへのリンク   ３日目の売れる（反応のある）HPの作り方の講義内容のページへのリンク   ４日目の売れる（反応のある）HPの作り方の講義内容のページへのリンク  
　
　　　　　　TOP　→　ナビ作成上のテクニック

ナビ作成上のテクニック

　　ナビはカテゴリー別であったり、ジャンル別であったり、のほかのページへのリンクを設定します、
　　そのためのいくつかのタイプの使い方などをご説明いたします。
１

ロールオーバーナビ

  
 

ロールオーバーとは、このサイトのナビに使っているテクニックです、ナビにカーソルが当たると、指定された
画像に置き換わります、そしてその画像にリンクが張ってあればそのリンク先へ移動します。

　　 このように動作させるためには、まず同じ大きさの画像を2つ用意しておく必要があります
　　 次に、Dream Weaverでしたら、入れたい場所にカーソルを持って行き
　　 メニュウーバーの 挿入から⇒イメージオブジェクト ⇒ロールオーバーイメージを選択
　　 ロールオーバーイメージの挿入というダイアログ画面が立ち上がります
　　イメージ名は自動で名前が入っているはずです
　　 元のイメージとは初めに表示される画像のことです、画像はgif,jpg,pngであればOKです
　　 参照ボタンから保存してあるホルダーを開き画像ファイルを 決定しOKします
　　 次は、ロールオーバーイメージです、これは元のイメージにカーソルを移動したとき
　　 現れる二番目の画像です、このサイトですと中の文字は変わらず、枠線と下側に青いラインがでますね
　　 参照ボタンをクリックして決定しOKします、次の代替えテキストとは画像を表示させないようにIEを設定している方や
　　 音声による読み出しなどを設定されている人たちのためでもありますし、SEO対策としても有効なのでかならず入力してください
　　 ”ボタン1”、とか”イメージ７”、とかではなく”二日目の売れる（反応のある）HPの作り方の講義内容のページへのリンク”
　　 といったように具体的な内容を記入するほうがベターです。
　　 次の、クリック時にURLに移動は参照ボタンをクリックしリンクさせたいURLを決定しOKします。
　　
　　 このように指定すれば Dreamweaver では自動的に、スクリプトのｈｔｍｌとロールオーバーのｈｔｍｌは
　　 書き込まれて、ロールオーバーを仕込むことができます

　　このページの、IE の メニューバー　⇒　表示　⇒　ソース　をクリックするとページのHTMLのソースが表示されます
　　 head 部分のなかの、script JavaScript　の部分と、 <div id="navi">の部分が、このロールオーバーのソースです

参考サイト　：　えてがみ由游　　服部築炉　　

  
２

プルダウンメニュー

  
 

　　プルダウンメニューとは、ナビのメニューをクリックすると、ズラズラーと下にその階層の下のナビが出てくるテクニックです
　　一番のなじみ深いのは、IEなどのメニューバーでおなじみですね、これの書き込み方法はいくつかありますが
　　一番簡単な方法を説明いたします

  
 
 
  　

　　上のプルダウンメニューをクリックしてみてください、それぞれのページに飛びますね、ではソースを見てみましょう

　　　　 <form> <select name="select" onchange="location.href=value;">
　　　　 <option value="#">売れる（反応のある）HPの作り方　移動先を選択</option>
　　　　 <option value="ichinichi.htm">１日目</option>
　　　　 <option value="futukame.htm">２日目</option>
　　　　 <option value="mikkame.htm">３日目</option>
　　　　 <option value="yokkame.htm">４日目</option>
　　　　 <option value="navi.htm">ナビテクニック</option>
　　　　 </select></form>

　　これだけのソースでプルダウンメニューを仕込んでいます

　　ご自身のサイトでお使いになる場合、
　　 売れる（反応のある）HPの作り方　移動先を選択　　このテキストを作品集、ですとか何々シリーズですとかに
　　 変えていただければOKです、次に、１日目からーナビテクニックまでをリンクさせたいページのタイトルに変えます
　　 次に、１日目だったら　ichinichi.htm にリンクさせたいわけなのでこのように書き込みます、
　　 一つ気を付けなければならないことは、どこの階層からどこへリンクさせたいかです、
　　 この navi.htm　のページは、このサイトの htm というホルダーに入っています、そのため
　　 このページから同じサイトの別のページにリンクを張る場合、そのページの 0000.htm という記入で
　　 リンクが張れます、トップページの index.htm から htm ホルダーの navi.htm にリンクを張る場合は
　　 htm/navi.htm　のような記入になります、ちなみにこのページから同じ階層（ディレクトリー）の images　の中の
　　 画像を指定するには、
　

　　　　
　
　　 ../images/1-2.gif のようになります、ソースを見てみると
　　 <img src="../images/1-2.gif" width="200" height="60" />　となっています。

　参考サイト　：アトリエ-INA