基礎と応用のホームページ講座（２７）

学校の紹介の小目次と１ページ目の相互リンク

「hosinのリンクツリー」画面

┏ btn ┳ ttindex_ah.jpg D： ━ yamatesho ╋ hosin ┳ ＊＊�Ahosin_ndx.htm ┃ ┣ tthosin_ah.jpg ┃ ┣ hosin_ah.jpg ┃ ┣ new02ah.jpg ┃ ┣ ＊＊＊�Bhosin1.htm ┃ ┣ ＊＊＊�Chosin2.htm ┃ ┗ ＊＊＊�Dhosin3.htm ┗ ＊�@index.htm

「リンクの相互関係」画面

�@index → �Ahosin_ndx �Ahosin_ndx → �@index �Bhosin01 　 �Bhosin01 �Chosin02 　 �Chosin02 �Dhosin03 　 �Dhosin03 �Bhosin01 → �Ahosin_ndx 　 �Chosin02 → �Ahosin_ndx �Chosin02 　 �Bhosin01 　 　 　 　 �Dhosin03 �Dhosin03 → �Ahosin_ndx 　 　 　 　 �Chosin02

第２７回では、�Ahosin_ndxから�Bhosin01にリンクする、�Bhosin01から�Ahosin_ndxにリンクする(これが相互リンク)を扱います。

「小目次と１ページ目の相互リンク(１)」画面

写真（１）

写真（１）は、「小目次と１ページ目の相互リンク(１)」画面です。 (１)�@セルの中をダブルクリック→�A「リンク」

「小目次と１ページ目の相互リンク(２)」画面

写真（２）

写真（２）は、「小目次と１ページ目の相互リンク(２)」画面です。 (１)�@「01」が見えるように、 (２)�A「リンク」ウィンドウ・「ファイル選択」ウィンドウを移動 (３)�B「ファイルの場所」は「hosin」フォルダ→�C「hosin01」を選択→�D「開く」→「OK」

「小目次と１ページ目の相互リンク(３)」画面

写真（３）

写真（３）は、「小目次と１ページ目の相互リンク(３)」画面です。 (１)小目次から１ページ目へのリンクが完了しました。 (２)リンクが成功すると、文字色が変色し、文字列に下線が入ります。

「小目次と１ページ目の相互リンク(４)」画面

写真（４）

写真（４）は、「小目次と１ページ目の相互リンク(４)」画面です。 (１)学校の紹介の１ページ目(hosin01)を開く (２)�@１ページ目なので、戻る(back)・進む(next)ボタンは削除する。 (２)�A「home」をクリック(ダブルクリックでもよい)→�B「開く」

「小目次と１ページ目の相互リンク(５)」画面

写真（５）

写真（５）は、「小目次と１ページ目の相互リンク(５)」画面です。 (１)�@「home」が見えるように、 (２)�A「リンク」ウィンドウ・「ファイル選択」ウィンドウを移動 (３)�B「ファイルの場所」は「hosin」フォルダ→�C「hosin_ndx」を選択→�D「開く」→「OK」

リンク元 ボタン リンク先 �Bhosin01 → → �Ahosin_ndx

「小目次と１ページ目の相互リンク(６)」画面

写真（６）

写真（６）は、「小目次と１ページ目の相互リンク(６)」画面です。 (１)１ページ目から小目次へのリンクが完成しました。 (２)クリックだけで相互に往来できるようにするのも、見る人に配慮したホームページの基礎基本です。