第2回　ホームページを充実させよう

6 ページにリンクを入れる

次に、ページにリンクを入れる方法を説明します。Webページ上で、特に青色で表示され下線がついた文字をクリックすると、他のページにジャンプします。この仕組みをハイパーリンク、あるいは単にリンクとよびます。このリンクを設定するのも、Composerでは簡単にできます。

他サイトへのリンク

それでは、「リンク集」の「稚内北星学園大学」の文字をクリックすると、稚内北星学園大学のWebページにジャンプするようにしてみましょう。

  1. リンクを設定したい文字（ここでは「稚内北星学園大学」）をマウスで選択する。

    2. 図6.36　「稚内北星学園大学」をマウスで選択
  2. 「挿入」メニューから「リンク」を選択する。

    3. 図6.37　「挿入」メニューから「リンク」を選択
  3. 「リンクのプロパティ」ダイアログが表示されるので、「リンクの場所」に、ジャンプしたいページのURL（ここでは「http://www.wakhok.ac.jp/」）と書き込む。

    4. 図6.38　「リンクのプロパティ」ダイアログ
  4. ＯＫボタンを押すと、「稚内北星学園大学」にリンクが設定される

    5. 図6.39　「稚内北星学園大学」にリンクが設定される

練習問題

練習6.5　「Yahoo!Japan」と「goo」にもリンクを設定してください。

※「Yahoo!Japan」のURLは「http://www.yahoo.co.jp/」、「goo」のURLは「http://www.goo.ne.jp/」です。


図6.40　「Yahoo!Japan」と「goo」にリンクを設定

別ページへのリンク

他のサイトへのリンクだけではなく、自分で作った別のページへのリンクを作ることも可能です。ここでは、以前作っておいた「読書のページ」へのリンクを作ってみましょう。とはいっても、その方法は、他のサイトへのリンクを作るのと同じです。

  1. リンクを設定したい文字（ここでは「読書」）をマウスで選択する。

    2. 図6.41　「稚内北星学園大学」をマウスで選択
  2. 「挿入」メニューから「リンク」を選択する。
  3. 「リンクのプロパティ」ダイアログが表示されるので、「リンクの場所」に、ジャンプしたいページのファイル名（ここでは「reading.html」）と書き込む。

    4. 図6.42「リンクのプロパティ」ダイアログ
  4. ＯＫボタンを押すと、「読書」にリンクが設定される

    5. 図6.43　「読書」にリンクが設定される

ここまでできたら、上書き保存しておきましょう。

リンクの確認

先ほど設定したリンクが正しいかどうか、確認しておきましょう。Composer上では確認ができませんので、Netscapeで、今作成中のページを表示させてみます。すでに表示されている場合は、ツールバーの「更新」ボタンを押してください。

たとえば、「読書」をクリックしてみましょう。読書のページ（reading.html）が表示されればＯＫです。


図6.44　「読書のページ」が表示される

練習問題

練習6.6　「音楽鑑賞のページ」を新たに作ってください。ファイル名を「music.html」としてZドライブの「www」フォルダに保存してください。そして、「わたしのページ」の「音楽鑑賞」の文字から「音楽鑑賞のページ」へのリンクを設定してください。

※趣味が音楽鑑賞でない人は、別の趣味のページをつくってもかまいません。