第３章３で作ったトップページの続きを編集します。
メモ帳を開きます（スタート→プログラム→アクセサリー→メモ帳クリックです）
「マイドキュメント」の「webpage」から保存している「index.htm」ファイルをメモ帳までドラッグします
あるいは「index.htm」をクリックして開きます。
（表示→ソース）でメモ帳が開きます
コピーライトの上に、各コンテンツをページへのリンクを作ります
リンクを各場所として<div></div>を追加し、クラス名を「menu」とします
<div class="menu"></div>と書きます
リンクを設定するためのテキストを書きます
ここでは、リンク先の内容がわかるように、春の色 夏の色 秋の色 冬の色とします
リンク先の名前とコピーライトの間に「20px」余白を入れます
<style>の中のdiv.copy{～}に「;margin-top:20px」を追加しします。
「春の色」という文字にリンクを設定し、クリックするとcontents.htmが開くようにします
まず、リンクを設定したい部分を、<a href="～">～</a>で囲みます
次に、hrefの値として、リンク先のページ「contents-h.htm」を指定します
春の色に対して「<a href="contents-h.htm">」「</a>」を追加します
リンクを設定したら、リンク先の動作を確認します
「春の色」をクリックすると、コンテンツページが開きます
他のページ「夏の色」「秋の色」「冬の色」にもリンクを設定します
しかしまだページを作っていないのでページは表示されません。
この後順に作成していきます
|
<html> <head> <title>色探しの旅</title> <style type="text/css"><!-- body{color:#666666;background-color:#f0f8ff} h1{font-size:25px; font-family:'Comic Sans MS';color:royalblue} span.iro{color:olive;font-weight:bold} span.sora{color:navy} p{width:360px;text-align:left;background-color:#dbe9dd;padding:20px;border-style:dotted;border-width:6px;border-color:#377c5f} div.copy{background-color:#377c5f;color:#ffffff;font-size:smaller;padding:2px;width:30%;margin-top:20px} --></style> </head> <body> <div align="center"> <h1>色探しの旅『Sky&Water』</h1> <p>日本の四季には色が満ちています。<span class="sora">空</span> そして<span class="sora">水</span>の色<span class="iro">『色探しの旅』</span>に出かけませんか</p> <div class="menu"> <a href="contents-h.htm">春の色</a>* <a href="contents-n.htm">夏の色</a>* <a href="contents-a.htm">秋の色</a>* <a href="contents-f.htm">冬の色</a> </div> <div class="copy">copyright(c)sora</div> </div> </body> </html> |
リンク先としてインターネット上にあるページを指定する場合、
http;//～で始まるインターネットアドレスで指定します。
一方自分のパソコンで作っているページには、インターネットアドレスがありません。
そこで、相対パスを使ってリンク先を指定します。
相対パスは、リンク元（リンクを付けようとしているページ）から見た、
リンク先（開こうとしているページ）の場所を示します。
互いのファイルの位置関係により、書き方が変わります
①リンク元とリンク先が同じフォルダの中にある場合【参照】
index.htmからcontents-h.htmlにリンクする
同じフォルダの中にあるため、ファイル名だけ書きます。<a href="contents-h.htm">
contents-h.htmからindex.htmにリンクする
同じフォルダの中にあるため、ファイル名だけ書きます。<a href="index.htm">
②どちらかのページがフォルダの中にある場合【参照】
index.htmからcontents-h.htmにリンクする。<a href="page/contents-h.htm">
contents-h.htmからindex.htmにリンクする。<a href="../index.htm">
「../」は一つ上のフォルダを表します。
③どちらかのページがフォルダの奥深くある場合【参照】
index.htmからcontents-h.htmlにリンクする。<a href="page/haru/contents-h.htm">
「pageフォルダの中のharuフォルダの中のcontents-h.htm」を表します
contents-h.htmからindex.htmにリンクする。<a href="../../index.htm">
２個上のフォルダなので「../../」で表します
④それぞれが異なるフォルダにある場合【参照】
index.htmからcontents-h.htmlにリンクする。<a href="../page/contents-h.htm">
「一つ上のフォルダのpageフォルダの中のcontents-h.htm」を表します
contents-h.htmからindex.htmにリンクする。<a href="../top/index.htm">
「一つ上のフォルダのtopフォルダの中のindex.htm」を表します