ゼミI実習


ゼミIで使用しているテキストがあります

HTML実習(その6)地図のページにリンクする


前回作ったページに新しいページを追加してもらいます。修正する部分だけ示します。

bodyタグの部分でidがleftのリンクの部分について変更します。ここをクリックして2006kyouzai_map.lzhをダウンロードして解凍してください。それと前回ダウンロードした教材の中にthumb_nailというフォルダがあるので、この中のファイルを使用します。

今回ダウンロードしたファイルは主要大陸の白地図が入っています。この白地図に対し、thumb_nailフォルダに入っている国旗を該当する位置にはりつけてもらい、地図を完成させます。

<body>
<div id="header">
見出しなんか入れるといいな。
</div>
<div id="left">
大陸別参加国一覧<br><br>
<a href="africa.htm">アフリカ</a><br>
</div>
  以下省略

上記の例ではアフリカ大陸の白地図に対して、参加する国の国旗を並べてもらいます。完成した地図をafrica.htmというページでimgタグにより表示できるようにしておきましょう。フォルダrefmapには国名の入った地図があるので、これを参考にして地図を完成させてください。

全部で6つのページをリンクから見ることができるようにしてください。

図を作る際の手順は以下のようにして進めるとよいでしょう。

・まず、地図のファイルをペイントで開きます。
・メニューで変形>キャンパスの色とサイズをクリックします。
・サイズがあるので幅と高さの値をメモしておきます。
・このファイルはこのままにしておきます。
・新しくペイントを開きます。
・メニューで変形>キャンパスの色とサイズをクリックします。
・先ほどメモしておいた値をもとに幅と高さに値を設定します。
・それから先に開いたままの地図をメニューで編集>すべて選択により選択します。
・続けてコピーします。
・新しく開いたペイントにはりつけます。
・これで、国旗をはりつける準備ができたので元の地図のファイルを開いたペイントは終了します。
・thumb_nailフォルダに入っている国旗をペイントで開き、同様にしてコピーします。
・地図をコピーしたペイントで国旗をはりつけます。
・その大陸について作業が終わったら例えばafrika_kokki.pngのようにわかりやすい名前でファイルを保存します。pngの形式で保存してください。
・この絵をもとにWebページを作ることになります。

以上のようにして作業を進めていきます。ただし、国旗を移動できるのは、はりつけた時だけなので慎重に(といっても大体でかまいません)作業を行ってください。

練習1.今回の作業を行い、Webページを完成させて、index.htmにリンクさせてください。できた方は見せてください。