5.各ページを関連づけよう 最後に、作りかけのトップページを完成します。
(1)リンクの設定
メニューの<ウインドウ>を選択し、トップページ「index.html」をクリックして、呼び出します。
- 画面がトップページに切り替わります。
(各ページへのリンク)
- では、それぞれのページへの関連づけ(リンク)をしましょう。
- まず、「最近の話題」の文字列を選択します。
[ハイパーリンクの作成または編集]を押します。
[開いてるページ]をクリックし、「開いているページ」の一覧から、「インターネットで何ができるの(internet.html)」を選択して、[OK]を押します。
つぎのような警告が出ますが、無視して[はい]を押して下さい。
この方法は、「ローカルファイルへのリンク」にはなりませんので心配することはありません。
これで、「インターネットで何ができるの」のページへのリンクが設定されます。
同様に、「プロフィール」にもリンクの設定をして下さい。
(別のホームページへのリンク)
「おすすめページ」には、インターネットに公開しているホームページへのリンクを設定してみましょう。例えば、STNetのホームページ(http://www.stnet.co.jp/)へのリンクを設定してみます。
そのために、まずブラウザでSTNetのホームページを表示しておきます。
さきほどと同様に、「おすすめページ」の文字列を選択して、
[ハイパーリンクの作成または編集]を押します。
[WWW]の「URL」の欄にSTNetのホームページのURLが自動的に入力されていますので、[OK]を押します。
(注意)
複数のブラウザを使用しているときは、「通常使うブラウザ」でリンクしたいページを表示して下さい。うまくいかない場合は、ブラウザの「場所」の欄からURLをコピーして、FrontPageExpressのリンク先URLへ転記して下さい。
メールアドレスには、既にリンクが自動的に設定されています。確認してみましょう。
メールアドレスの上でマウスを右クリックし、「ハイパーリンクのプロパティ」を選択します。
リンクの設定が確認できます。
(ポイント)リンクを設定するとき
- 自分のページへのリンク・・・FrontPageExpressで開いてから、「開いているページへのリンク」で設定
- 他のページへのリンク・・・ブラウザで表示してから、「リンクの作成」を選択すると自動的に設定される
- メールアドレスへのリンク・・・アドレスをページに書き、段落にすると、自動的に設定される
(2)ページの背景に画像を貼り付ける
適当な場所でマウスを右クリックし、「ページのプロパティ」を選択します。
[背景]の「背景の画像」をチェックし、[参照]ボタンを押します。
[参照]ボタンを押し、3.5FDより、目的の背景画像(今回は「bg13.jpg」)を選択します。
「背景の画像」の欄に、ファイル名が転記されたのを確認して、[OK]します。
背景画像貼り付け後
(3)マーク画像の活用
「最近の話題」などの各段落の先頭にマーク画像を貼り付けて、しゃれた感じにしてみましょう。
「最近の話題」の前にカーソルを移動し、
[画像の挿入]を押します。
マーク画像(今回は、「mark1.gif」)を選択し、[OK]します。
貼り付け後
「プロフィール」と「おすすめページ」の前にもマークを貼り付けて、トップページがこれで完成です。
[上書き保存]を押して、トップページを上書きしましょう。
(4)ブラウザでの確認
トップページをブラウザで読み込み表示します。
リンクを設定した「最近の話題」など青色文字で下線のある部分をクリックします。
- 「インターネットで何ができるの」のページが表示されましたか?
- ブラウザの[戻る]ボタンを押し、トップページに戻ります。他のページも同様にクリックして表示してみて下さい。
- 各ページを表示してみて、どこかおかしい個所が見つかれば、FrontPageExpressで該当個所を修正し文書ファイルを上書き保存し、ブラウザで再読み込みし、修正内容を確認します。
- また、全体のバランスをよくみて、修正が必要ないか念入りにチェックして下さい。
さあ、これで一応ホームぺージが完成しました。
あとは、できあがったページをサーバへ転送するだけです。
(補足)FrontPageExpressでのリンクの確認
最終的な確認はブラウザで行いますが、FrontPageExpressでもブラウザと同様にリンクの確認を行うことができます。
- FrontPageExpressでリンクを設定した個所の上にマウスをおくと、画面の左下にリンク先が表示されます。
- また、[ctrl]キーを押しながら(矢印は、
になります)クリックするとリンク先のぺージに切り替わります。