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

　用意されたテンプレート（template）pages.cssファイルを書き換えることで、見やすくすてきなＷｅｂページができるようになってきました。みんなのページがほぼ完成したら、1つにまとめ、作品に仕上げましょう。テンプレート（template）では、この点も考慮して、うまくできるようになっています。

スタイルの統一

（ここからの操作は、みんなで話し合いながら、行います）

　１）まず、皆さんで、お互いのページのデザインを評価して、自分達の作品には、どのデザイン、色、文字の大きさが、バランスよく、読みやすいか、検討してください。
グループとしての統一案が決まってきたら、「まとめ役」を一人決めて body, h1, h2, h3, p の スタイルを、修正し、この作品の基本デザインとして確認・完成してください。

　２）次に、まとめ役の人の pages.cssファイルを、USBメモリなどの外部メモリあるいはサーバを介して、メンバーに配布します。各メンバーは、pages.cssファイルを受け取ったものに入れ替えます。自分のページを閲覧してみてください。同じ基本デザインで、ページが表示されるようになるはずです。

　３）新しいデザインで各ページがわかりやすく見れるか、確認してください。もしよくない部分があったら、文章や写真の大きさを直すか、基本デザインを見直すかして、調整しましょう。この時、文章を読みやすくするため、以下のような工夫が可能です。

　それぞれのページがさらにポリッシュアップされたら、USBメモリなど、外部メモリに１つのWebとしてまとめましょう。

　４）はじめに、メンバーの一人の作品のフォルダを、すべて外部メモリにコピーします。この時、フォルダ名がtemplateのままであったら、この作品を表すファイル名に、英文字（英語またはローマ字）で付けなおしましょう。またフォルダ名にバージョン番号を付けましょう。例えば、作品名を、sakuhin1とした場合、sakuhin1という感じです。これから作品がどんどんバージョンアップしていきます。そのたびに番号を sakuhin1　sakuhin2　sakuhin3...と変更していくと、管理が楽になります。

　５）次に、他のメンバーが、自分の作成したページと利用した写真を、外部メモリの対応するフォルダ内にコピーします。この時写真は、それぞれ自分のページ番号に対応して名前を付けているはずですので、重複しないはずです。ただ、ページの .htmlは、外部メモリにもあるので上書きになるはずです。でも問題ありません。これで、外部メモリ状ではすべてのページがリンクして閲覧できるはずです。

　６）バージョン番号のついた、外部メモリ上の作品を、それぞれのメンバーのPCにコピーしましょう。これで、ほぼ完成に近づきました。

メインメニューをつくる

　このtemplate では、メインメニューは、header.html で書かれており、初期状態は以下のようになっています。

　ここでのはじめの４行（メインヘッダーの部分）は、背景写真(ファイル名 header.jpg で、たて200×よこ870pxにトリミングした写真)に上書きで h1 のスタイルで表題を書いている部分です。表示すると以下のようになります。

　また、残り（メインメニューの部分）は、以下のようなメニュー画面となります。

　ここで、<a href="page＊.html" target="_parent">　～　</a>　は、～部分をクリックすると、page＊.htmlへハイパーリンクするという意味で、上記のように、第〇章の表題が<a>タグでくくられていますので、文字列をクリックすると、それぞれのページの html ファイル（ Webページ）に移動することになります。

　さて、header.html を修正するのは、次の３つです。

1. h1　の作品のタイトルを、皆さんの作品のタイトル名にする
2. 背景の写真を、自分たちのテーマにあったものに入れ替える
3. 各章の表題を、それぞれのページの表題に書き換える

この段階でページ数やホームの有無などで、メニューを増やしたり、減らしたり調整するのはもちろんです。出来上がったら、メンバーで配布しあってください。

サイトマップを作る

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

　ここでは、<a>リンクのとび先として　page2.html#3、page3.html#aaa のように、ファイル名の後に#名前や数字がついています。数字や名前をつけると、そのページで <a id="3"></a> や <a id="aaa"></a>と記述されている途中の行から表示させることができます。また、とび先が #名前だけになっていると、同じページ内での移動という意味になります。1ページが画面に収まらないなど、長い場合などによく使われます。

　とび先側のページの書き方は、以下の通りです。templateでは、各節のはじめに、数字で名前がつけられています。

　もう、おわかりですね。それぞれのページの表題、各節の見出しを教えてもらって、サイトマップを作り上げてください。確認するのは、以下の赤字部分になります。

　全てのページの節の名前が転記できると、サイトマップは出来上がりです。この作業は、一人が代表でおこなって、メンバーに配布してもらっても、いいかもしれません。サイトマップは閲覧者にとっても、制作者にとっても便利で有用なページになりますので、正しく、表示されているか必ず確かめましょう。

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

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

表紙を作成する

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

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