超初心者のための Web作成特別講座

第5回 Webページを1つにまとめよう

いよいよ、すべてのページを一つのフォルダにまとめて、Webページを完成させます。 この作業は、グループに共有のUSBメモリーを1つ用意し、そのうえで進めると効率が良く、管理もうまくいくと思います。

第3回でも説明しましたが、このWebページのテンプレートは、ひとりひとりが1つのページ作成を受け持って、それぞれが自分のページを完成させていくと、最後は自動的に1つのWebページとしてリンク・構成されるようになっています。

ページのまとめ方

画像説明

 1つのページにまとめる方法は、第3回で述べました。その手順を、箇条書きにすると、次のようになります。
この作業は、チームの誰かがひとりで代表して進めるといいでしょう。

1.まず、USBに、自分たちのWebページの名前(必ず英文字で、空白は含まないこと、)を付けたフォルダを用意します(groupAとします)。
2.次に、フォルダの中に images という名前のファルダを用意します。
3 USBを、メンバーに順に回覧して、それぞれのページ(page1.html、page2.htmlなど)を、groupAフォルダに、利用した写真や映像は そのなかのimagesフォルダにコピーしてもらいます。
4.コピーが終了したら、USB上のそれぞれのページを、直接クリックして、ページが表示されることを確認してください。

 この段階での確認作業は、重要です。このワークショップでは、各ページの作成に責任は最後まで、各担当者の責任で進めることにしています。したがって、USBで多々しく表示されていないとすれば、各メンバーのPC上で正しく表示されているかを確認してください。 もし、PCではうまく表示されていたなら、必要なファイルをコピーすることを失敗したということになりますし、もしPCでもうまく表示できないなら、そもそもページが完成していなかったことになります。
よくある失敗は、imagesフォルダにコピーしたはずの写真のファイル名が間違っているという場合です。ファイル名は、大文字、小文字も、拡張子もすべて、完全に同じでなければ、表示されません。1つ1つ確認してください。

最後に、テンプレートから、index.html と sitemap.html を USBメモリーのgroupAフォルダにコピーしてください。

メインメニューを同じにする

画像説明








メインメニューの部分は、全ページ共通の部分で初期設定は、以下のようになっています。

<div class="mainmenu"> <!--begin メインメニュー-->
<a href="index.html">ホーム</a>
| <a href="page1.html">page1 表題(章)</a>
| <a href="page2.html">page2 表題(章)</a>
| <a href="page3.html">page3 表題(章)</a>
| <a href="page4.html">page4 表題(章)</a>
| <a href="sitemap.html">サイトマップ</a>
</div> <!--end メインメニュー -->
 前回にも説明したように、<a>・・・</a>がリンクボタンの部分で、上の例では、画面には、「page1 表題(章)」と表示され、その部分をクリックすると、page1.htmlのページが表示されます。

 この部分を、それぞれのページの見出しに変更しましょう。作業はUSBのgroupAフォルダ内で、班のひとりが代表して行うのが効率がいいです。

 page1.html や page2.html などのファイル名は変更する必要はありません。もし5ページ以上で構成していた場合は、「| <a href="page4.html">page4 表題(章)</a>」の部分をコピーして増やしてください。

 メインメニューの変更が終了して、正しく表示できることが確かめられたら、すべてのページのメインメニューを、テキストエディタをつかって、同じものに入れ替えます。
 さて、これでどのページから表示しても、メインメニューをクリックすれば他のページが呼び出されるようになったはずです。確かめてください。

サイトマップを作る

画像説明

 サイトマップとは、web全体のページ構成を表示する目次のようなもので、見出しをクリックするとそのページやその部分が閲覧できるようになっているものをいいます。このテンプレートでは、以下のようになっています。

<div class="column"> <!--begin コラム-->
<h2>サイトマップ</h2>

<ul>
<li><a href="index.html">ホーム</a></li>
</ul>

<ul>
<li><a href="page1.html">page1 表題(章)</a>
<ul>
<li><a href="page1.html#1">page1 節1</a></li>
<li><a href="page1.html#2">page1 節2</a></li>
<li><a href="page1.html#3">page1 節3</a></li>
</ul>
</li>

 ・・・・・・・・・

</ul>

<ul>
<li><a href="sitemap.html">サイトマップ</a></li>
</ul>

</div> <!--end コラム-->
 もう、おわかりですね。それぞれのページの表題、各節のみだしをもらって、サイトマップを作り上げてください。実は、過去ページの<ul>から</ul>の部分は、各ページのサブメニューと同じになっています。したがって、各ページからその部分をコピーして、サイトマップの対応部分を入れ替えると、サイトまマップが出来上がります。
※(注)初期のテンプレートは、htmlの部分が省略されているので、そこを加筆のこと

<div class="submenue"><!-- begin サブメニュー-->
<ul>
<li><a href="page1.html#1">page1 節1</a></li>
<li><a href="page1.html#2">page1 節2</a></li>
<li><a href="page1.html#3">page1 節3</a></li>
</ul>
</div> <!-- end サブメニュー-->
それぞれのページのサブメニューから、sitemap.htmlのサイトマップへコピーできると、サイトマップは出来上がりです。正しく、表示するか確かめましょう。

全体構成を確認し、改善点を話し合う

画像説明

これまでの作業で、USBのgroupAフォルダに、表紙以外のページが出来上がりました。この段階でgroupAフォルダを、メンバーのPCにそれぞれ配布します。 次に、内容をみて、各ページの内容や表記の量やバランス、使用されている図や写真の大きさやわかりやすさ、などを見て、改善点を話し合いましょう。 この時、改善案があがったら、まず担当者が担当のページを変更し、それをUSBにコピーします。 このルールを守ると、自分のページの最新版は必ずPC上にあり、Webページの全体像は、USBにあることになります。これはグループでWeb開発を共同で行う場合に非常に大切なルールとなります。

表紙を作成する

各ページとサイトマップが完成したら、最後に共同で、表紙(ホーム)をデザインし作成しましょう。表紙は、パンフレットの表紙と同じように、見る人に内容の全体像が分かるよう、魅力的でなければなりません。利用者がはじめにみるのが、ホームですので、各ページにはどんなことが書いてあるのか、このWebの目的、利用の仕方、対象者などがわかるように、イラストやイメージ写真、キャッチフレーズなどを工夫してください。

 表紙が完成すると、全体が出来上がりです、