Chapter9 リンクの設定 Chapter9 リンクの設定 1 2 3 Webページのテキストや画像から、別のWebサイトや別のファイルに ジャンプする機能をリンクと呼びます。このレッスンではリンクの設 定方法について学習します。 4 Lesson1 他のページへジャンプするリンクの設定 5 Point リンク設定の注意 サイト定義がされていないとリンク先 6 別のページへジャンプするリンクを設定しましょう。 7 の指定が面倒になります。サイトを定 義した状態で行いましょう。 課題 8 "index.html" を開いて、 「ディナー付宿泊プラン」をクリックしたら、"cam. html" へジャンプするリンクを設定しましょう。 9 Point リンクの設定 リンクの設定方法は下記の３つです。 ・URL を直接入力する。 10 ◆◆ テキストからのリンク 課題 １．リンク元となるテキストを選択します。 ・ファイル選択でページを指定する。 ・［ファイル］パネルへドラッグ & ド ロプする。 ［修正］メニューから［リンクの作成］ 補足 ２．プロパティインスペクターの［リンク］テキストボックスの右側に ある［ファイルの指定］アイコンの上にマウスをポイントします。 をクリックすると［ファイルの選択］ ダイアログボックスが表示されます。 この方法でもリンクの設定が可能です。 Point リンクの場所 リンク先には下記があります。 ・同じサイトにあるページやファイル ３． ［ファイル］パネル内のリンク先に指定したいファイルまで［ファイ ルの指定］アイコンをドラッグ＆ドロップします。 ・同じページ内の特定の位置（アン カーポイント） ・別のサイトにあるページ ・電子メールリンク ・同じページ内の特定フレームへのリ ンク Hint3 ［ファイル］パネルの表示 ［ファイル］パネルが表示されていな い場合は、［ウィンドウ］メニューか ら表示します。また、必要がないフォ ルダーは折り畳んでおくとパネル内 が使いやすくなります。折り畳まれ たフォルダー内にリンクする場合は、 フォルダー名の左側の + にマウスポ インタを乗せるとフォルダーが一時的 に展開されます。 114 Chapter9 リンクの設定 ４． ［リンク］テキストボックスにリンク先のファイルの指定が入り、リ ンクが設定されました。 Memo リンクの解除 リンクを解除するには、リンクを解除 したい部分のテキストを選択して、 ［リ ンク］テキストボックスに入力されて 1 いる内容を削除するか［修正］メニュー から［リンクの削除］を選択します。 ５．ブラウザーで確認します。リンク元をクリックするとリンク先のペー 2 3 ジが表示されます。 4 5 6 7 8 9 クリックすると表示さ れます。 10 Memo リンクが設定されている 部分の色 リンクを設定した部分は既定では青字 で表示されます。色を変更したい場合 は、［修正］メニューの［ページプロ パティ］を選択して表示される［ペー ジプロパティ］ダイアログボックスで 設定することができます。また、スタ イルシートを利用するとリンクの下線 を表示させないなど、さらに細かな設 定が可能です。 Memo 練習 1 下記の課題を行いましょう。 ［ファイルの参照］アイ コンを利用する方法 ［ファイルの指定］アイコンの右にあ る［ファイルの参照］アイコンを使い、 リンクを設定することも可能です。 １．"lesson1.html"を開いて、「新着情報」をクリックしたら、"index. html"のページへジャンプするリンクを設定しましょう。 ２ ． " index.html" を 開 い て 、 「 お 問 い 合 わ せ 」 を ク リ ッ ク し た ら 、 "kyosiki.html"のページへジャンプするリンクを設定しましょう。 1.［ファイルの参照］アイコンをク リックすると［ファイルの選択］ダ イアログボックスが表示されます。 2 リンク先のファイルを選択し［OK］ ボタンをクリックします。 3.［リンク］テキストボックスにリン ク先のファイルの指定が入り、リン クが設定されます。 ※ローカルサイト以外のファイルを選 択すると、アラートが表示されます ので［はい］を選択します。リンク 先のファイルがローカルサイト内に コピーされます。 115 課題 補足
© Copyright 2024 Paperzz
