Chapter9 リンクの設定

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
課題
補足